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

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

@@ -1,13 +1,7 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
-  Card,
-  Focus,
-  Mosaic,
-  styles3 as styles,
-  useContainerDebug,
-  useEventHandlerAdapter,
-  useRootContext
-} from "../chunk-X6GV7SMK.mjs";
+  Mosaic
+} from "../chunk-MK6KU66S.mjs";
 
 // src/testing/decorator.tsx
 import React from "react";
@@ -15,16 +9,10 @@ var withMosaic = () => {
   return (Story) => /* @__PURE__ */ React.createElement(Mosaic.Root, null, /* @__PURE__ */ React.createElement(Story, null));
 };
 
-// src/testing/Board.tsx
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+// src/testing/types.ts
 import * as Schema from "effect/Schema";
-import React2, { forwardRef, useMemo, useRef, useState } from "react";
-import { Obj, Ref, Type } from "@dxos/echo";
+import { Ref, Type } from "@dxos/echo";
 import { ObjectId } from "@dxos/keys";
-import { useObject } from "@dxos/react-client/echo";
-import { Tag } from "@dxos/react-ui";
-import { Json } from "@dxos/react-ui-syntax-highlighter";
-import { getHashStyles, mx } from "@dxos/ui-theme";
 var TestItem = Schema.Struct({
   name: Schema.String,
   description: Schema.optional(Schema.String),
@@ -35,221 +23,47 @@ var TestItem = Schema.Struct({
 }));
 var TestColumn = Schema.Struct({
   id: ObjectId,
-  items: Schema.mutable(Schema.Array(Type.Ref(TestItem)))
+  name: Schema.String,
+  items: Schema.mutable(Schema.Array(Ref.Ref(TestItem)))
 }).pipe(Type.object({
   typename: "example.com/type/Column",
   version: "0.1.0"
 }));
-var Root = /* @__PURE__ */ forwardRef(({ id, columns, debug }, forwardedRef) => {
-  const [DebugInfo, debugHandler] = useContainerDebug(debug);
-  const [viewport, setViewport] = useState(null);
-  const eventHandler = useEventHandlerAdapter({
-    id,
-    items: columns,
-    getId: (data) => data.id,
-    get: (data) => data,
-    make: (object) => object,
-    canDrop: ({ source }) => Obj.instanceOf(TestColumn, source.data)
-  });
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx("plb-2 grid bs-full is-full overflow-hidden", debug && "grid-cols-[1fr_20rem] gap-2"),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React2.createElement(Focus.Group, {
-    asChild: true,
-    axis: "horizontal"
-  }, /* @__PURE__ */ React2.createElement(Mosaic.Container, {
-    asChild: true,
-    withFocus: true,
-    axis: "horizontal",
-    autoScroll: viewport,
-    eventHandler,
-    debug: debugHandler
-  }, /* @__PURE__ */ React2.createElement(Mosaic.Viewport, {
-    axis: "horizontal",
-    padding: true,
-    viewportRef: setViewport
-  }, /* @__PURE__ */ React2.createElement(Mosaic.Stack, {
-    axis: "horizontal",
-    items: columns,
-    getId: (item) => item.id,
-    Tile: Column,
-    debug
-  })))), /* @__PURE__ */ React2.createElement(DebugInfo, null));
-});
-var Column = /* @__PURE__ */ forwardRef(({ classNames, location, data, debug }, forwardedRef) => {
-  const [column, updateColumn] = useObject(data);
-  const [DebugInfo, debugHandler] = useContainerDebug(debug);
-  const dragHandleRef = useRef(null);
-  const [viewport, setViewport] = useState(null);
-  const eventHandler = useEventHandlerAdapter({
-    id: data.id,
-    items: column.items,
-    getId: (data2) => data2.dxn.toString(),
-    get: (data2) => data2.target,
-    make: (object) => Ref.make(object),
-    canDrop: ({ source }) => Obj.instanceOf(TestItem, source.data.target),
-    onChange: (mutator) => updateColumn((column2) => mutator(column2.items))
-  });
-  const menuItems = useMemo(() => [
-    {
-      label: "Delete",
-      onClick: (obj) => {
-        updateColumn((column2) => {
-          const idx = column2.items.findIndex((item) => item.target?.id === obj?.id);
-          if (idx !== -1) {
-            column2.items.splice(idx, 1);
-          }
-        });
-      }
-    }
-  ], [
-    updateColumn
-  ]);
-  return /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
-    asChild: true,
-    dragHandle: dragHandleRef.current,
-    location,
-    id: data.id,
-    data,
-    debug
-  }, /* @__PURE__ */ React2.createElement(Focus.Group, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: mx("grid bs-full card-default-width overflow-hidden bg-deckSurface", debug ? "grid-rows-[min-content_1fr_20rem]" : "grid-rows-[min-content_1fr_min-content]", classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React2.createElement(Card.Toolbar, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
-    ref: dragHandleRef
-  }), /* @__PURE__ */ React2.createElement(Card.Title, null, column.id), /* @__PURE__ */ React2.createElement(Card.Menu, {
-    items: []
-  })), /* @__PURE__ */ React2.createElement(Card.Context, {
-    value: {
-      menuItems
-    }
-  }, /* @__PURE__ */ React2.createElement(Mosaic.Container, {
-    asChild: true,
-    withFocus: true,
-    axis: "vertical",
-    autoScroll: viewport,
-    eventHandler,
-    debug: debugHandler
-  }, /* @__PURE__ */ React2.createElement(Mosaic.Viewport, {
-    axis: "vertical",
-    padding: true,
-    viewportRef: setViewport
-  }, /* @__PURE__ */ React2.createElement(Mosaic.Stack, {
-    axis: "vertical",
-    items: column.items,
-    getId: (data2) => data2.dxn.toString(),
-    Tile: Item
-  })))), /* @__PURE__ */ React2.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "grow flex p-1 justify-center text-xs"
-  }, column.items.length), /* @__PURE__ */ React2.createElement(DebugInfo, null)))));
-});
-Column.displayName = "Column";
-var Item = /* @__PURE__ */ forwardRef(({ classNames, data: ref, location, debug }, forwardedRef) => {
-  const rootRef = useRef(null);
-  const composedRef = useComposedRefs(rootRef, forwardedRef);
-  const dragHandleRef = useRef(null);
-  const object = ref.target;
-  if (!object) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
-    asChild: true,
-    dragHandle: dragHandleRef.current,
-    id: ref.dxn.toString(),
-    data: ref,
-    location,
-    debug
-  }, /* @__PURE__ */ React2.createElement(Focus.Group, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Card.Root, {
-    classNames,
-    onClick: () => rootRef.current?.focus(),
-    ref: composedRef
-  }, /* @__PURE__ */ React2.createElement(Card.Toolbar, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
-    ref: dragHandleRef
-  }), /* @__PURE__ */ React2.createElement(Card.Title, null, object.name), /* @__PURE__ */ React2.createElement(Card.Menu, {
-    context: object
-  })), /* @__PURE__ */ React2.createElement(Card.Row, {
-    icon: "ph--note--regular",
-    classNames: "text-description"
-  }, object.description), /* @__PURE__ */ React2.createElement(Card.Row, {
-    icon: "ph--tag--regular"
-  }, object.label && /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "flex shrink-0 gap-1 text-xs items-center"
-  }, /* @__PURE__ */ React2.createElement(Tag, {
-    palette: getHashStyles(object.label).hue
-  }, object.label))))));
-});
-Item.displayName = "Item";
-var Placeholder = (props) => {
-  return /* @__PURE__ */ React2.createElement(Mosaic.Placeholder, {
-    ...props,
-    classNames: styles.placeholder.root
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: mx("flex bs-full border border-dashed border-separator rounded-sm", styles.placeholder.content)
-  }));
-};
-Placeholder.displayName = "Placeholder";
-var Debug = /* @__PURE__ */ forwardRef(({ classNames }, forwardedRef) => {
-  const { containers, dragging } = useRootContext(Debug.displayName);
-  const counter = useRef(0);
-  return /* @__PURE__ */ React2.createElement(Json, {
-    data: {
-      containers,
-      dragging,
-      count: counter.current++
-    },
-    classNames: mx("text-xs", classNames),
-    ref: forwardedRef
-  });
-});
-Debug.displayName = "Debug";
-var Board = {
-  Root,
-  Column,
-  Item,
-  Placeholder,
-  Debug
-};
 
 // src/testing/CardContainer.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React3 from "react";
+import React2 from "react";
 import { Icon, Popover } from "@dxos/react-ui";
 import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
 var DEFAULT_BLOCK_SIZE = 22;
 var MIN_BLOCK_SIZE = 8;
-var CardContainer = ({ children, icon = "ph--placeholder--regular", role }) => {
+var CardContainer = ({ children, role, icon = "ph--arrow-line-down--regular" }) => {
   switch (role) {
-    case "card--popover":
-      return /* @__PURE__ */ React3.createElement(PopoverCardContainer, {
+    case "popover":
+      return /* @__PURE__ */ React2.createElement("div", {
+        role: "none",
+        className: "flex justify-center"
+      }, /* @__PURE__ */ React2.createElement(PopoverCardContainer, {
         icon
-      }, children);
-    case "card--intrinsic":
+      }, children));
+    case "intrinsic":
     default:
-      return /* @__PURE__ */ React3.createElement(IntrinsicCardContainer, null, children);
+      return /* @__PURE__ */ React2.createElement(IntrinsicCardContainer, null, children);
   }
 };
-var border = "relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-x-auto";
-var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) => {
-  return /* @__PURE__ */ React3.createElement(Popover.Root, {
+var PopoverCardContainer = ({ children, icon = "ph--arrow-line-down--regular" }) => {
+  return /* @__PURE__ */ React2.createElement(Popover.Root, {
     open: true
-  }, /* @__PURE__ */ React3.createElement(Popover.Content, {
-    onOpenAutoFocus: (event) => event.preventDefault()
-  }, /* @__PURE__ */ React3.createElement(Popover.Viewport, {
-    classNames: "popover-card-width"
-  }, children), /* @__PURE__ */ React3.createElement(Popover.Arrow, null)), /* @__PURE__ */ React3.createElement(Popover.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Icon, {
+  }, /* @__PURE__ */ React2.createElement(Icon, {
     icon,
     size: 5
-  })));
+  })), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
+    onOpenAutoFocus: (event) => event.preventDefault()
+  }, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
+    classNames: "dx-card-popover"
+  }, children), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
 };
 var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeChange }) => {
   const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState({
@@ -257,11 +71,15 @@ var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeCha
     defaultProp: defaultSize,
     onChange: onSizeChange
   });
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: border,
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg",
     style: sizeStyle(size, "horizontal"),
     ...resizeAttributes
-  }, children, /* @__PURE__ */ React3.createElement(ResizeHandle, {
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "flex flex-col w-full h-full overflow-hidden"
+  }, children), /* @__PURE__ */ React2.createElement(ResizeHandle, {
     side: "inline-end",
     fallbackSize: DEFAULT_BLOCK_SIZE,
     minSize: MIN_BLOCK_SIZE,
@@ -271,34 +89,45 @@ var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeCha
 };
 
 // src/testing/DefaultStackTile.tsx
-import React4, { useRef as useRef2, useState as useState2 } from "react";
-import { Obj as Obj2 } from "@dxos/echo";
-import { Json as Json2 } from "@dxos/react-ui-syntax-highlighter";
+import React3, { useMemo, useRef, useState } from "react";
+import { Obj } from "@dxos/echo";
+import { Card, Toolbar } from "@dxos/react-ui";
+import { Menu, createMenuAction } from "@dxos/react-ui-menu";
+import { Json } from "@dxos/react-ui-syntax-highlighter";
 var DefaultStackTile = (props) => {
-  const dragHandleRef = useRef2(null);
-  const [open, setOpen] = useState2(false);
-  return /* @__PURE__ */ React4.createElement(Mosaic.Tile, {
+  const dragHandleRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const menuItems = useMemo(() => [
+    createMenuAction("toggle-details", () => setOpen((prev) => !prev), {
+      label: open ? "Hide details" : "Show details",
+      icon: "ph--placeholder--regular"
+    })
+  ], [
+    open
+  ]);
+  return /* @__PURE__ */ React3.createElement(Mosaic.Tile, {
     ...props,
-    className: "border border-separator rounded-sm font-mono"
-  }, /* @__PURE__ */ React4.createElement(Card.Toolbar, null, /* @__PURE__ */ React4.createElement(Card.DragHandle, {
+    className: "border border-separator rounded-xs font-mono"
+  }, /* @__PURE__ */ React3.createElement(Menu.Root, null, /* @__PURE__ */ React3.createElement(Card.Toolbar, null, /* @__PURE__ */ React3.createElement(Card.DragHandle, {
     ref: dragHandleRef
-  }), /* @__PURE__ */ React4.createElement(Card.Title, null, Obj2.getLabel(props.data) ?? props.data.id), /* @__PURE__ */ React4.createElement(Card.Menu, {
-    items: [
-      {
-        label: open ? "Hide details" : "Show details",
-        onClick: () => setOpen((open2) => !open2)
-      }
-    ]
-  })), open && /* @__PURE__ */ React4.createElement(Card.Row, null, /* @__PURE__ */ React4.createElement(Json2, {
+  }), /* @__PURE__ */ React3.createElement(Card.Title, null, Obj.getLabel(props.data) ?? props.data.id), /* @__PURE__ */ React3.createElement(Menu.Trigger, {
+    asChild: true,
+    disabled: !menuItems?.length
+  }, /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: "Menu"
+  })), /* @__PURE__ */ React3.createElement(Menu.Content, {
+    items: menuItems
+  }))), open && /* @__PURE__ */ React3.createElement(Card.Row, null, /* @__PURE__ */ React3.createElement(Json, {
     data: props.data,
     classNames: "text-xs"
   })));
 };
 DefaultStackTile.displayName = "DefaultStackTile";
 export {
-  Board,
   CardContainer,
-  Debug,
   DefaultStackTile,
   IntrinsicCardContainer,
   PopoverCardContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/testing/decorator.tsx", "../../../../src/testing/Board.tsx", "../../../../src/testing/CardContainer.tsx", "../../../../src/testing/DefaultStackTile.tsx"],
-  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n  return (Story) => (\n    <Mosaic.Root>\n      <Story />\n    </Mosaic.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as Schema from 'effect/Schema';\nimport React, { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { Obj, Ref, Type } from '@dxos/echo';\nimport { ObjectId } from '@dxos/keys';\nimport { useObject } from '@dxos/react-client/echo';\nimport { Tag, type ThemedClassName } from '@dxos/react-ui';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\nimport { getHashStyles, mx } from '@dxos/ui-theme';\n\nimport {\n  Card,\n  type CardMenuProps,\n  Focus,\n  Mosaic,\n  type MosaicTileProps,\n  type MosiacPlaceholderProps,\n  mosaicStyles,\n  useMosaic,\n} from '../components';\nimport { useContainerDebug, useEventHandlerAdapter } from '../hooks';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n  name: Schema.String,\n  description: Schema.optional(Schema.String),\n  label: Schema.optional(Schema.String),\n}).pipe(\n  Type.object({\n    typename: 'example.com/type/Item',\n    version: '0.1.0',\n  }),\n);\n\nexport interface TestItem extends Schema.Schema.Type<typeof TestItem> {}\n\nexport const TestColumn = Schema.Struct({\n  id: ObjectId,\n  items: Schema.mutable(Schema.Array(Type.Ref(TestItem))),\n}).pipe(\n  Type.object({\n    typename: 'example.com/type/Column',\n    version: '0.1.0',\n  }),\n);\n\nexport interface TestColumn extends Schema.Schema.Type<typeof TestColumn> {}\n\n//\n// Root\n//\n\ntype RootProps = {\n  id: string;\n  columns: TestColumn[];\n  debug?: boolean;\n};\n\nconst Root = forwardRef<HTMLDivElement, RootProps>(({ id, columns, debug }, forwardedRef) => {\n  const [DebugInfo, debugHandler] = useContainerDebug(debug);\n  const [viewport, setViewport] = useState<HTMLElement | null>(null);\n\n  const eventHandler = useEventHandlerAdapter({\n    id,\n    items: columns,\n    getId: (data) => data.id,\n    get: (data) => data,\n    make: (object) => object,\n    canDrop: ({ source }) => Obj.instanceOf(TestColumn, source.data),\n  });\n\n  return (\n    <div\n      role='none'\n      className={mx('plb-2 grid bs-full is-full overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}\n      ref={forwardedRef}\n    >\n      <Focus.Group asChild axis='horizontal'>\n        <Mosaic.Container\n          asChild\n          withFocus\n          axis='horizontal'\n          autoScroll={viewport}\n          eventHandler={eventHandler}\n          debug={debugHandler}\n        >\n          <Mosaic.Viewport axis='horizontal' padding viewportRef={setViewport}>\n            <Mosaic.Stack axis='horizontal' items={columns} getId={(item) => item.id} Tile={Column} debug={debug} />\n          </Mosaic.Viewport>\n        </Mosaic.Container>\n      </Focus.Group>\n      <DebugInfo />\n    </div>\n  );\n});\n\n//\n// Column\n//\n\ntype ColumnProps = Pick<MosaicTileProps<TestColumn>, 'classNames' | 'location' | 'data' | 'debug'>;\n\nconst Column = forwardRef<HTMLDivElement, ColumnProps>(({ classNames, location, data, debug }, forwardedRef) => {\n  const [column, updateColumn] = useObject(data);\n  const [DebugInfo, debugHandler] = useContainerDebug(debug);\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [viewport, setViewport] = useState<HTMLElement | null>(null);\n  const eventHandler = useEventHandlerAdapter<Ref.Unknown>({\n    id: data.id,\n    items: column.items,\n    getId: (data) => data.dxn.toString(),\n    get: (data) => data.target!,\n    make: (object) => Ref.make(object),\n    canDrop: ({ source }) => Obj.instanceOf(TestItem, source.data.target),\n    onChange: (mutator) => updateColumn((column) => mutator(column.items)),\n  });\n\n  // Context menu.\n  const menuItems = useMemo<NonNullable<CardMenuProps<TestItem>['items']>>(\n    () => [\n      {\n        label: 'Delete',\n        onClick: (obj) => {\n          updateColumn((column) => {\n            const idx = column.items.findIndex((item) => item.target?.id === obj?.id);\n            if (idx !== -1) {\n              column.items.splice(idx, 1);\n            }\n          });\n        },\n      },\n    ],\n    [updateColumn],\n  );\n\n  return (\n    <Mosaic.Tile asChild dragHandle={dragHandleRef.current} location={location} id={data.id} data={data} debug={debug}>\n      <Focus.Group asChild>\n        <div\n          className={mx(\n            'grid bs-full card-default-width overflow-hidden bg-deckSurface',\n            debug ? 'grid-rows-[min-content_1fr_20rem]' : 'grid-rows-[min-content_1fr_min-content]',\n            classNames,\n          )}\n          ref={forwardedRef}\n        >\n          <Card.Toolbar>\n            <Card.DragHandle ref={dragHandleRef} />\n            <Card.Title>{column.id}</Card.Title>\n            <Card.Menu items={[]} />\n          </Card.Toolbar>\n          <Card.Context value={{ menuItems }}>\n            <Mosaic.Container\n              asChild\n              withFocus\n              axis='vertical'\n              autoScroll={viewport}\n              eventHandler={eventHandler}\n              debug={debugHandler}\n            >\n              <Mosaic.Viewport axis='vertical' padding viewportRef={setViewport}>\n                <Mosaic.Stack axis='vertical' items={column.items} getId={(data) => data.dxn.toString()} Tile={Item} />\n              </Mosaic.Viewport>\n            </Mosaic.Container>\n          </Card.Context>\n          <div role='none'>\n            <div className='grow flex p-1 justify-center text-xs'>{column.items.length}</div>\n            <DebugInfo />\n          </div>\n        </div>\n      </Focus.Group>\n    </Mosaic.Tile>\n  );\n});\n\nColumn.displayName = 'Column';\n\n//\n// Item\n//\n\ntype ItemProps = Pick<MosaicTileProps<Ref.Ref<TestItem>>, 'classNames' | 'location' | 'data' | 'debug'>;\n\nconst Item = forwardRef<HTMLDivElement, ItemProps>(({ classNames, data: ref, location, debug }, forwardedRef) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const object = ref.target;\n  if (!object) {\n    return null;\n  }\n\n  return (\n    <Mosaic.Tile\n      asChild\n      dragHandle={dragHandleRef.current}\n      id={ref.dxn.toString()}\n      data={ref}\n      location={location}\n      debug={debug}\n    >\n      <Focus.Group asChild>\n        <Card.Root classNames={classNames} onClick={() => rootRef.current?.focus()} ref={composedRef}>\n          <Card.Toolbar>\n            <Card.DragHandle ref={dragHandleRef} />\n            <Card.Title>{object.name}</Card.Title>\n            <Card.Menu context={object} />\n          </Card.Toolbar>\n          <Card.Row icon='ph--note--regular' classNames='text-description'>\n            {object.description}\n          </Card.Row>\n          <Card.Row icon='ph--tag--regular'>\n            {object.label && (\n              <div role='none' className='flex shrink-0 gap-1 text-xs items-center'>\n                <Tag palette={getHashStyles(object.label).hue}>{object.label}</Tag>\n              </div>\n            )}\n          </Card.Row>\n        </Card.Root>\n      </Focus.Group>\n    </Mosaic.Tile>\n  );\n});\n\nItem.displayName = 'Item';\n\n//\n// Placeholder\n//\n\nconst Placeholder = (props: MosiacPlaceholderProps<number>) => {\n  return (\n    <Mosaic.Placeholder {...props} classNames={mosaicStyles.placeholder.root}>\n      <div\n        className={mx(\n          'flex bs-full border border-dashed border-separator rounded-sm',\n          mosaicStyles.placeholder.content,\n        )}\n      />\n    </Mosaic.Placeholder>\n  );\n};\n\nPlaceholder.displayName = 'Placeholder';\n\n//\n// Debug\n//\n\nexport const Debug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {\n  const { containers, dragging } = useMosaic(Debug.displayName!);\n  const counter = useRef(0);\n  return (\n    <Json\n      data={{ containers, dragging, count: counter.current++ }}\n      classNames={mx('text-xs', classNames)}\n      ref={forwardedRef}\n    />\n  );\n});\n\nDebug.displayName = 'Debug';\n\n//\n// Board\n//\n\nexport const Board = { Root, Column, Item, Placeholder, Debug };\n\nexport type { RootProps, ColumnProps, ItemProps };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport const CardContainer = ({\n  children,\n  icon = 'ph--placeholder--regular',\n  role,\n}: PropsWithChildren<{ icon?: string; role?: string }>) => {\n  switch (role) {\n    case 'card--popover':\n      return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;\n    case 'card--intrinsic':\n    default:\n      return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n  }\n};\n\nconst border = 'relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-x-auto';\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({ children, icon = 'ph--placeholder--regular' }: PopoverCardContainerProps) => {\n  return (\n    <Popover.Root open>\n      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n        <Popover.Viewport classNames='popover-card-width'>{children}</Popover.Viewport>\n        <Popover.Arrow />\n      </Popover.Content>\n      <Popover.Trigger asChild>\n        <Icon icon={icon} size={5} />\n      </Popover.Trigger>\n    </Popover.Root>\n  );\n};\n\n//\n// Intrinsic card container (size constrained by card).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div className={border} style={sizeStyle(size, 'horizontal')} {...resizeAttributes}>\n      {children}\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Card, Mosaic, type StackTileComponent } from '../components';\n\nexport const DefaultStackTile: StackTileComponent<Obj.Any> = (props) => {\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  return (\n    <Mosaic.Tile {...props} className='border border-separator rounded-sm font-mono'>\n      <Card.Toolbar>\n        <Card.DragHandle ref={dragHandleRef} />\n        <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n        <Card.Menu\n          items={[\n            {\n              label: open ? 'Hide details' : 'Show details',\n              onClick: () => setOpen((open) => !open),\n            },\n          ]}\n        />\n      </Card.Toolbar>\n      {open && (\n        <Card.Row>\n          <Json data={props.data} classNames='text-xs' />\n        </Card.Row>\n      )}\n    </Mosaic.Tile>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
-  "mappings": "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",
-  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "useComposedRefs", "Schema", "React", "forwardRef", "useMemo", "useRef", "useState", "Obj", "Ref", "Type", "ObjectId", "useObject", "Tag", "Json", "getHashStyles", "mx", "TestItem", "Struct", "name", "String", "description", "optional", "label", "pipe", "Type", "object", "typename", "version", "TestColumn", "id", "ObjectId", "items", "mutable", "Array", "Ref", "Root", "forwardRef", "columns", "debug", "forwardedRef", "DebugInfo", "debugHandler", "useContainerDebug", "viewport", "setViewport", "useState", "eventHandler", "useEventHandlerAdapter", "getId", "data", "get", "make", "canDrop", "source", "Obj", "instanceOf", "React", "div", "role", "className", "mx", "ref", "Focus", "Group", "asChild", "axis", "Mosaic", "Container", "withFocus", "autoScroll", "Viewport", "padding", "viewportRef", "Stack", "item", "Tile", "Column", "classNames", "location", "column", "updateColumn", "useObject", "dragHandleRef", "useRef", "dxn", "toString", "target", "onChange", "mutator", "menuItems", "useMemo", "onClick", "obj", "idx", "findIndex", "splice", "dragHandle", "current", "Card", "Toolbar", "DragHandle", "Title", "Menu", "Context", "value", "Item", "length", "displayName", "rootRef", "composedRef", "useComposedRefs", "focus", "context", "Row", "icon", "Tag", "palette", "getHashStyles", "hue", "Placeholder", "props", "mosaicStyles", "placeholder", "root", "content", "Debug", "containers", "dragging", "useMosaic", "counter", "Json", "count", "Board", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "icon", "role", "React", "PopoverCardContainer", "IntrinsicCardContainer", "border", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "Trigger", "asChild", "Icon", "size", "defaultSize", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "useRef", "useState", "Obj", "Json", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "React", "Mosaic", "Tile", "className", "Card", "Toolbar", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Menu", "items", "label", "onClick", "Row", "Json", "classNames", "displayName"]
+  "sources": ["../../../../src/testing/decorator.tsx", "../../../../src/testing/types.ts", "../../../../src/testing/CardContainer.tsx", "../../../../src/testing/DefaultStackTile.tsx"],
+  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n  return (Story) => (\n    <Mosaic.Root>\n      <Story />\n    </Mosaic.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Ref, Type } from '@dxos/echo';\nimport { ObjectId } from '@dxos/keys';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n  name: Schema.String,\n  description: Schema.optional(Schema.String),\n  label: Schema.optional(Schema.String),\n}).pipe(\n  Type.object({\n    typename: 'example.com/type/Item',\n    version: '0.1.0',\n  }),\n);\n\nexport interface TestItem extends Schema.Schema.Type<typeof TestItem> {}\n\nexport const TestColumn = Schema.Struct({\n  id: ObjectId,\n  name: Schema.String,\n  items: Schema.mutable(Schema.Array(Ref.Ref(TestItem))),\n}).pipe(\n  Type.object({\n    typename: 'example.com/type/Column',\n    version: '0.1.0',\n  }),\n);\n\nexport interface TestColumn extends Schema.Schema.Type<typeof TestColumn> {}\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport type CardContainerProps = PropsWithChildren<{ role?: 'popover' | 'intrinsic'; icon?: string }>;\n\nexport const CardContainer = ({ children, role, icon = 'ph--arrow-line-down--regular' }: CardContainerProps) => {\n  switch (role) {\n    case 'popover':\n      return (\n        <div role='none' className='flex justify-center'>\n          <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>\n        </div>\n      );\n    case 'intrinsic':\n    default:\n      return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n  }\n};\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--arrow-line-down--regular',\n}: PopoverCardContainerProps) => {\n  return (\n    <Popover.Root open>\n      <Popover.Trigger asChild>\n        <Icon icon={icon} size={5} />\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content onOpenAutoFocus={(event: Event) => event.preventDefault()}>\n          <Popover.Viewport classNames='dx-card-popover'>{children}</Popover.Viewport>\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n//\n// Intrinsic card container (size constrained by card itself).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      role='none'\n      className='relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      <div role='none' className='flex flex-col w-full h-full overflow-hidden'>\n        {children}\n      </div>\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo, useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Card, Toolbar } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Mosaic, type MosaicStackTileComponent } from '../components';\n\nexport const DefaultStackTile: MosaicStackTileComponent<Obj.Any> = (props) => {\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  const menuItems = useMemo(\n    () => [\n      createMenuAction('toggle-details', () => setOpen((prev) => !prev), {\n        label: open ? 'Hide details' : 'Show details',\n        icon: 'ph--placeholder--regular',\n      }),\n    ],\n    [open],\n  );\n\n  return (\n    <Mosaic.Tile {...props} className='border border-separator rounded-xs font-mono'>\n      <Menu.Root>\n        <Card.Toolbar>\n          <Card.DragHandle ref={dragHandleRef} />\n          <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n          {/* TODO(wittjosiah): Reconcile with Card.Menu. */}\n          <Menu.Trigger asChild disabled={!menuItems?.length}>\n            <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />\n          </Menu.Trigger>\n          <Menu.Content items={menuItems} />\n        </Card.Toolbar>\n      </Menu.Root>\n      {open && (\n        <Card.Row>\n          <Json data={props.data} classNames='text-xs' />\n        </Card.Row>\n      )}\n    </Mosaic.Tile>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
+  "mappings": "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",
+  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "Schema", "Ref", "Type", "ObjectId", "TestItem", "Struct", "name", "String", "description", "optional", "label", "pipe", "Type", "object", "typename", "version", "TestColumn", "id", "ObjectId", "items", "mutable", "Array", "Ref", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "role", "icon", "React", "div", "className", "PopoverCardContainer", "IntrinsicCardContainer", "Popover", "Root", "open", "Trigger", "asChild", "Icon", "size", "Portal", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "defaultSize", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "useMemo", "useRef", "useState", "Obj", "Card", "Toolbar", "Menu", "createMenuAction", "Json", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "menuItems", "useMemo", "createMenuAction", "prev", "label", "icon", "React", "Mosaic", "Tile", "className", "Menu", "Root", "Card", "Toolbar", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Trigger", "asChild", "disabled", "length", "IconButton", "iconOnly", "variant", "Content", "items", "Row", "Json", "classNames", "displayName"]
 }

package/dist/types/src/components/Board/Board.d.ts

@@ -0,0 +1,81 @@
+import { type Atom } from '@effect-atom/atom-react';
+import React, { type PropsWithChildren, type ReactElement, type Ref as ReactRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type GetId, type MosaicEventHandler, type MosaicPlaceholderProps, type MosaicStackProps } from '../Mosaic';
+import { type BoardColumnProps, useBoardColumn } from './Column';
+import { type BoardItemProps } from './Item';
+export interface BoardModel<TColumn = any, TItem = any> {
+    getColumnId: GetId<TColumn>;
+    getItemId: GetId<TItem>;
+    isColumn: (obj: unknown) => obj is TColumn;
+    isItem: (obj: unknown) => obj is TItem;
+    columns: Atom.Atom<readonly TColumn[] | TColumn[]>;
+    items: (column: TColumn) => Atom.Atom<TItem[]>;
+    getColumns: () => TColumn[];
+    getItems: (column: TColumn) => TItem[];
+    onColumnCreate?: () => Promise<TColumn>;
+    onColumnDelete?: (column: TColumn) => void;
+    onItemCreate?: (column: TColumn) => Promise<TItem>;
+    onItemDelete?: (column: TColumn, item: TItem) => void;
+}
+type BoardContextValue<TColumn = any, TItem = any> = {
+    model: BoardModel<TColumn, TItem>;
+};
+/** Hook to read the board model from context (e.g. in custom column tiles). Pass TColumn and TItem for typed model. */
+declare function useBoard<TColumn = any, TItem = any>(displayName?: string): BoardContextValue<TColumn, TItem>;
+type BoardRootProps<TColumn = any, TItem = any> = PropsWithChildren<BoardContextValue<TColumn, TItem>>;
+type BoardContentProps<TColumn = any> = ThemedClassName<{
+    id: string;
+    debug?: boolean;
+    eventHandler?: MosaicEventHandler<TColumn>;
+    Tile?: MosaicStackProps<TColumn>['Tile'];
+}>;
+export declare const BoardDebug: React.ForwardRefExoticComponent<Omit<{}, "className"> & {
+    classNames?: import("@dxos/ui-types").ClassNameValue;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Board: {
+    Root: <TColumn = any, TItem = any>(props: BoardRootProps<TColumn, TItem>) => ReactElement;
+    Content: <TColumn = any>(props: BoardContentProps<TColumn> & {
+        ref?: ReactRef<HTMLDivElement>;
+    }) => ReactElement;
+    Column: {
+        Root: <TColumn = unknown>(props: (BoardColumnProps<TColumn> & {
+            children?: React.ReactNode | undefined;
+        } & {
+            dragHandleRef?: React.RefObject<HTMLButtonElement | null>;
+        }) & {
+            ref?: ReactRef<HTMLDivElement>;
+        }) => ReactElement;
+        Header: React.ForwardRefExoticComponent<Omit<{
+            label: string;
+            dragHandleRef: ReactRef<HTMLButtonElement>;
+        }, "className"> & {
+            classNames?: import("@dxos/ui-types").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Body: {
+            ({ data, eventHandler, Tile, debug }: Pick<BoardColumnProps<any>, "data"> & Pick<import("..").MosaicContainerProps, "debug" | "eventHandler"> & {
+                Tile?: MosaicStackProps<import("@dxos/echo/Obj").Unknown>["Tile"];
+            }): React.JSX.Element;
+            displayName: string;
+        };
+        Footer: React.ForwardRefExoticComponent<Omit<{}, "className"> & {
+            classNames?: import("@dxos/ui-types").ClassNameValue;
+        } & {
+            data?: any;
+            onAdd?: () => void;
+        } & React.RefAttributes<HTMLDivElement>>;
+    };
+    Item: <TItem extends import("@dxos/echo/Obj").Unknown = any>(props: BoardItemProps<TItem> & {
+        ref?: ReactRef<HTMLDivElement>;
+    }) => ReactElement;
+    Placeholder: {
+        (props: MosaicPlaceholderProps<number>): React.JSX.Element;
+        displayName: string;
+    };
+    Debug: React.ForwardRefExoticComponent<Omit<{}, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export { useBoard, useBoardColumn };
+export type { BoardRootProps, BoardContentProps, BoardColumnProps, BoardItemProps };
+//# sourceMappingURL=Board.d.ts.map

package/dist/types/src/components/Board/Board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.d.ts","sourceRoot":"","sources":["../../../../../src/components/Board/Board.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/{Mosaic/Mosaic.stories.d.ts → Board/Board.stories.d.ts}

@@ -2,6 +2,7 @@ import { type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 type StoryProps = {
     columns?: number;
+    items?: (column: number) => number;
     debug?: boolean;
 };
 declare const meta: {
@@ -10,6 +11,15 @@ declare const meta: {
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
+        translations: [{
+            readonly 'en-US': {
+                readonly "@dxos/react-ui-mosaic": {
+                    readonly 'action menu label': "Actions";
+                    readonly 'add item label': "Add item";
+                    readonly 'delete menu label': "Delete";
+                };
+            };
+        }];
     };
     argTypes: {
         columns: {
@@ -23,5 +33,9 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const SingleColumn: Story;
+export declare const Empty: Story;
+export declare const EmptyColumn: Story;
 export declare const Debug: Story;
-//# sourceMappingURL=Mosaic.stories.d.ts.map
+export declare const Spec: Story;
+//# sourceMappingURL=Board.stories.d.ts.map

package/dist/types/src/components/Board/Board.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Board/Board.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAA8B,MAAM,OAAO,CAAC;AA8CnD,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAsIF,QAAA,MAAM,IAAI;;wBAxB+B,UAAU;;;;;;;;;;;;;;;;;;;;;;CAqDd,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAU,CAAC;AAE/B,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC"}

package/dist/types/src/components/Board/Column.d.ts

@@ -0,0 +1,40 @@
+import React, { type PropsWithChildren, type ReactElement, type Ref as ReactRef, type RefObject } from 'react';
+import { Obj } from '@dxos/echo';
+import { type MosaicContainerProps, type MosaicStackProps, type MosaicTileProps } from '../Mosaic';
+export type BoardColumnContextValue<TColumn = unknown> = {
+    column: TColumn;
+};
+/** Returns the current column when rendered inside a board column (e.g., in column header or item tile). */
+export declare function useBoardColumn<TColumn = unknown>(): TColumn | undefined;
+type BoardColumnProps<TColumn = any> = Pick<MosaicTileProps<TColumn>, 'classNames' | 'location' | 'data' | 'debug'>;
+type BoardColumnRootProps<TColumn = any> = PropsWithChildren<BoardColumnProps<TColumn>> & {
+    dragHandleRef?: RefObject<HTMLButtonElement | null>;
+};
+type BoardColumnBodyProps = Pick<BoardColumnProps, 'data'> & Pick<MosaicContainerProps, 'eventHandler' | 'debug'> & {
+    Tile?: MosaicStackProps<Obj.Unknown>['Tile'];
+};
+declare const DefaultBoardColumn: React.ForwardRefExoticComponent<BoardColumnProps<any> & Pick<BoardColumnBodyProps, "Tile"> & React.RefAttributes<HTMLDivElement>>;
+export declare const BoardColumn: {
+    Root: <TColumn = unknown>(props: BoardColumnRootProps<TColumn> & {
+        ref?: ReactRef<HTMLDivElement>;
+    }) => ReactElement;
+    Header: React.ForwardRefExoticComponent<Omit<{
+        label: string;
+        dragHandleRef: ReactRef<HTMLButtonElement>;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Body: {
+        ({ data, eventHandler, Tile, debug }: BoardColumnBodyProps): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: React.ForwardRefExoticComponent<Omit<{}, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & {
+        data?: any;
+        onAdd?: () => void;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export { DefaultBoardColumn };
+export { type BoardColumnProps };
+//# sourceMappingURL=Column.d.ts.map

package/dist/types/src/components/Board/Column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../../src/components/Board/Column.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,GAAG,IAAI,QAAQ,EACpB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAO,MAAM,YAAY,CAAC;AAStC,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAW3G,MAAM,MAAM,uBAAuB,CAAC,OAAO,GAAG,OAAO,IAAI;IACvD,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,4GAA4G;AAC5G,wBAAgB,cAAc,CAAC,OAAO,GAAG,OAAO,KAAK,OAAO,GAAG,SAAS,CAGvE;AAED,KAAK,gBAAgB,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAQpH,KAAK,oBAAoB,CAAC,OAAO,GAAG,GAAG,IAAI,iBAAiB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG;IACxF,aAAa,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC;AAqGF,KAAK,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GACxD,IAAI,CAAC,oBAAoB,EAAE,cAAc,GAAG,OAAO,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAyEJ,QAAA,MAAM,kBAAkB,mIA2CvB,CAAC;AAQF,eAAO,MAAM,WAAW;WA9LyB,OAAO,mBAC/C,oBAAoB,CAAC,OAAO,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAA;KAAE,KACtE,YAAY;;eAQsC,MAAM;uBAAiB,QAAQ,CAAC,iBAAiB,CAAC;;;;;8CA0D/B,oBAAoB;;;;;;eAgCrF,GAAG;gBACF,MAAM,IAAI;;CA8FnB,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,OAAO,EAAE,KAAK,gBAAgB,EAAE,CAAC"}