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

package/dist/lib/browser/testing/index.mjs

@@ -1,12 +1,6 @@
 import {
-  Card,
-  Focus,
-  Mosaic,
-  styles3 as styles,
-  useContainerDebug,
-  useEventHandlerAdapter,
-  useRootContext
-} from "../chunk-UMBPEG4F.mjs";
+  Mosaic
+} from "../chunk-7S4PIFKU.mjs";
 
 // src/testing/decorator.tsx
 import React from "react";
@@ -14,16 +8,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),
@@ -34,221 +22,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({
@@ -256,11 +70,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,
@@ -270,34 +88,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/browser/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"]
 }