@dxos/react-ui-mosaic 0.10.0 → 0.11.1

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

@@ -1,137 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-import {
-  Focus,
-  Mosaic
-} from "../chunk-4IEMCMIV.mjs";
-
-// src/testing/decorator.tsx
-import React from "react";
-var withMosaic = () => {
-  return (Story) => /* @__PURE__ */ React.createElement(Mosaic.Root, null, /* @__PURE__ */ React.createElement(Story, null));
-};
-
-// src/testing/types.ts
-import * as Schema from "effect/Schema";
-import { DXN, Ref, Type } from "@dxos/echo";
-import { EntityId } from "@dxos/keys";
-var TestItem = class extends Type.makeObject(DXN.make("com.example.type.item", "0.1.0"))(Schema.Struct({
-  name: Schema.String,
-  description: Schema.optional(Schema.String),
-  label: Schema.optional(Schema.String)
-})) {
-};
-var TestColumn = class extends Type.makeObject(DXN.make("com.example.type.column", "0.1.0"))(Schema.Struct({
-  id: EntityId,
-  name: Schema.String,
-  items: Schema.mutable(Schema.Array(Ref.Ref(TestItem)))
-})) {
-};
-
-// src/testing/CardContainer.tsx
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-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, role, icon = "ph--arrow-line-down--regular" }) => {
-  switch (role) {
-    case "popover":
-      return /* @__PURE__ */ React2.createElement("div", {
-        className: "flex justify-center"
-      }, /* @__PURE__ */ React2.createElement(PopoverCardContainer, {
-        icon
-      }, children));
-    case "intrinsic":
-    default:
-      return /* @__PURE__ */ React2.createElement(IntrinsicCardContainer, null, children);
-  }
-};
-var PopoverCardContainer = ({ children, icon = "ph--arrow-line-down--regular" }) => {
-  return /* @__PURE__ */ React2.createElement(Popover.Root, {
-    open: true
-  }, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon
-  })), /* @__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({
-    prop: propSize,
-    defaultProp: defaultSize,
-    onChange: onSizeChange
-  });
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg",
-    style: sizeStyle(size, "horizontal"),
-    ...resizeAttributes
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "dx-container flex flex-col"
-  }, children), /* @__PURE__ */ React2.createElement(ResizeHandle, {
-    side: "inline-end",
-    fallbackSize: DEFAULT_BLOCK_SIZE,
-    minSize: MIN_BLOCK_SIZE,
-    size,
-    onSizeChange: setSize
-  }));
-};
-
-// src/testing/DefaultStackTile.tsx
-import React3, { useMemo, useRef, useState } from "react";
-import { Obj } from "@dxos/echo";
-import { Card, IconButton } from "@dxos/react-ui";
-import { Menu, createMenuAction } from "@dxos/react-ui-menu";
-import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
-var DefaultStackTile = (props) => {
-  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--circle-dashed--regular"
-    })
-  ], [
-    open
-  ]);
-  return /* @__PURE__ */ React3.createElement(Menu.Root, null, /* @__PURE__ */ React3.createElement(Mosaic.Tile, {
-    ...props,
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Focus.Item, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Card.Root, {
-    className: "dx-current dx-hover"
-  }, /* @__PURE__ */ React3.createElement(Card.Header, null, /* @__PURE__ */ React3.createElement(Card.DragHandle, {
-    ref: dragHandleRef
-  }), /* @__PURE__ */ React3.createElement(Card.Title, null, Obj.getLabel(props.data) ?? props.data.id), /* @__PURE__ */ React3.createElement(Card.Block, {
-    end: true
-  }, /* @__PURE__ */ React3.createElement(Menu.Trigger, {
-    asChild: true,
-    disabled: !menuItems?.length
-  }, /* @__PURE__ */ React3.createElement(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(JsonHighlighter, {
-    data: props.data,
-    classNames: "text-xs"
-  }))))));
-};
-DefaultStackTile.displayName = "DefaultStackTile";
-export {
-  CardContainer,
-  DefaultStackTile,
-  IntrinsicCardContainer,
-  PopoverCardContainer,
-  TestColumn,
-  TestItem,
-  withMosaic
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "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 { DXN, Ref, Type } from '@dxos/echo';\nimport { EntityId } from '@dxos/keys';\n\n//\n// Test Data\n//\n\nexport class TestItem extends Type.makeObject<TestItem>(DXN.make('com.example.type.item', '0.1.0'))(\n  Schema.Struct({\n    name: Schema.String,\n    description: Schema.optional(Schema.String),\n    label: Schema.optional(Schema.String),\n  }),\n) {}\n\nexport class TestColumn extends Type.makeObject<TestColumn>(DXN.make('com.example.type.column', '0.1.0'))(\n  Schema.Struct({\n    id: EntityId,\n    name: Schema.String,\n    items: Schema.mutable(Schema.Array(Ref.Ref(TestItem))),\n  }),\n) {}\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 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} />\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      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 className='dx-container flex flex-col'>{children}</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, IconButton } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Focus, 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--circle-dashed--regular',\n      }),\n    ],\n    [open],\n  );\n\n  return (\n    <Menu.Root>\n      {/*\n       * `Mosaic.Tile` sets `aria-current` from `props.current`, which the\n       * Slot composition propagates down to `Card.Root`'s div. That's what\n       * makes `dx-current` (an `aria-[current=true]:` utility) actually\n       * fire here. See `ui-theme/src/css/components/selected.md`.\n       */}\n      <Mosaic.Tile {...props} asChild>\n        <Focus.Item asChild>\n          <Card.Root className='dx-current dx-hover'>\n            <Card.Header>\n              <Card.DragHandle ref={dragHandleRef} />\n              <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n              <Card.Block end>\n                <Menu.Trigger asChild disabled={!menuItems?.length}>\n                  <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />\n                </Menu.Trigger>\n              </Card.Block>\n              <Menu.Content items={menuItems} />\n            </Card.Header>\n            {open && (\n              <Card.Row>\n                <JsonHighlighter data={props.data} classNames='text-xs' />\n              </Card.Row>\n            )}\n          </Card.Root>\n        </Focus.Item>\n      </Mosaic.Tile>\n    </Menu.Root>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
-  "mappings": ";;;;;;;AAKA,OAAOA,WAAW;AAIX,IAAMC,aAAa,MAAA;AACxB,SAAO,CAACC,UACN,sBAAA,cAACC,OAAOC,MAAI,MACV,sBAAA,cAACF,OAAAA,IAAAA,CAAAA;AAGP;;;ACXA,YAAYG,YAAY;AAExB,SAASC,KAAKC,KAAKC,YAAY;AAC/B,SAASC,gBAAgB;AAMlB,IAAMC,WAAN,cAAuBF,KAAKG,WAAqBL,IAAIM,KAAK,yBAAyB,OAAA,CAAA,EACjFC,cAAO;EACZC,MAAaC;EACbC,aAAoBC,gBAAgBF,aAAM;EAC1CG,OAAcD,gBAAgBF,aAAM;AACtC,CAAA,CAAA,EAAA;AACC;AAEI,IAAMI,aAAN,cAAyBX,KAAKG,WAAuBL,IAAIM,KAAK,2BAA2B,OAAA,CAAA,EACvFC,cAAO;EACZO,IAAIX;EACJK,MAAaC;EACbM,OAAcC,eAAeC,aAAMhB,IAAIA,IAAIG,QAAAA,CAAAA,CAAAA;AAC7C,CAAA,CAAA,EAAA;AACC;;;ACvBH,SAASc,4BAA4B;AACrC,OAAOC,YAAuC;AAE9C,SAASC,MAAMC,eAAe;AAC9B,SAASC,cAAyBC,kBAAkBC,iBAAiB;AAErE,IAAMC,qBAAqB;AAC3B,IAAMC,iBAAiB;AAQhB,IAAMC,gBAAgB,CAAC,EAAEC,UAAUC,MAAMC,OAAO,+BAA8B,MAAsB;AACzG,UAAQD,MAAAA;IACN,KAAK;AACH,aACE,gBAAAV,OAAA,cAACY,OAAAA;QAAIC,WAAU;SACb,gBAAAb,OAAA,cAACc,sBAAAA;QAAqBH;SAAaF,QAAAA,CAAAA;IAGzC,KAAK;IACL;AACE,aAAO,gBAAAT,OAAA,cAACe,wBAAAA,MAAwBN,QAAAA;EACpC;AACF;AAQO,IAAMK,uBAAuB,CAAC,EACnCL,UACAE,OAAO,+BAA8B,MACX;AAC1B,SACE,gBAAAX,OAAA,cAACE,QAAQc,MAAI;IAACC,MAAAA;KACZ,gBAAAjB,OAAA,cAACE,QAAQgB,SAAO;IAACC,SAAAA;KACf,gBAAAnB,OAAA,cAACC,MAAAA;IAAKU;OAER,gBAAAX,OAAA,cAACE,QAAQkB,QAAM,MACb,gBAAApB,OAAA,cAACE,QAAQmB,SAAO;IAACC,iBAAiB,CAACC,UAAiBA,MAAMC,eAAc;KACtE,gBAAAxB,OAAA,cAACE,QAAQuB,UAAQ;IAACC,YAAW;KAAmBjB,QAAAA,GAChD,gBAAAT,OAAA,cAACE,QAAQyB,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB;AAYO,IAAMZ,yBAAyB,CAAC,EACrCN,UACAmB,aACAC,MAAMC,UACNC,aAAY,MACgB;AAC5B,QAAM,CAACF,OAAOvB,oBAAoB0B,OAAAA,IAAWjC,qBAA2B;IACtEkC,MAAMH;IACNI,aAAaN;IACbO,UAAUJ;EACZ,CAAA;AAEA,SACE,gBAAA/B,OAAA,cAACY,OAAAA;IACCC,WAAU;IACVuB,OAAO/B,UAAUwB,MAAM,YAAA;IACtB,GAAGzB;KAEJ,gBAAAJ,OAAA,cAACY,OAAAA;IAAIC,WAAU;KAA8BJ,QAAAA,GAC7C,gBAAAT,OAAA,cAACG,cAAAA;IACCkC,MAAK;IACLC,cAAchC;IACdiC,SAAShC;IACTsB;IACAE,cAAcC;;AAItB;;;AC5FA,OAAOQ,UAASC,SAASC,QAAQC,gBAAgB;AAEjD,SAASC,WAAW;AACpB,SAASC,MAAMC,kBAAkB;AACjC,SAASC,MAAMC,wBAAwB;AACvC,SAASC,uBAAuB;AAIzB,IAAMC,mBAAsD,CAACC,UAAAA;AAClE,QAAMC,gBAAgBC,OAA0B,IAAA;AAChD,QAAM,CAACC,MAAMC,OAAAA,IAAWC,SAAS,KAAA;AACjC,QAAMC,YAAYC,QAChB,MAAM;IACJC,iBAAiB,kBAAkB,MAAMJ,QAAQ,CAACK,SAAS,CAACA,IAAAA,GAAO;MACjEC,OAAOP,OAAO,iBAAiB;MAC/BQ,MAAM;IACR,CAAA;KAEF;IAACR;GAAK;AAGR,SACE,gBAAAS,OAAA,cAACC,KAAKC,MAAI,MAOR,gBAAAF,OAAA,cAACG,OAAOC,MAAI;IAAE,GAAGhB;IAAOiB,SAAAA;KACtB,gBAAAL,OAAA,cAACM,MAAMC,MAAI;IAACF,SAAAA;KACV,gBAAAL,OAAA,cAACQ,KAAKN,MAAI;IAACO,WAAU;KACnB,gBAAAT,OAAA,cAACQ,KAAKE,QAAM,MACV,gBAAAV,OAAA,cAACQ,KAAKG,YAAU;IAACC,KAAKvB;MACtB,gBAAAW,OAAA,cAACQ,KAAKK,OAAK,MAAEC,IAAIC,SAAS3B,MAAM4B,IAAI,KAAK5B,MAAM4B,KAAKC,EAAE,GACtD,gBAAAjB,OAAA,cAACQ,KAAKU,OAAK;IAACC,KAAAA;KACV,gBAAAnB,OAAA,cAACC,KAAKmB,SAAO;IAACf,SAAAA;IAAQgB,UAAU,CAAC3B,WAAW4B;KAC1C,gBAAAtB,OAAA,cAACuB,YAAAA;IAAWC,UAAAA;IAASC,SAAQ;IAAQ1B,MAAK;IAAmCD,OAAM;QAGvF,gBAAAE,OAAA,cAACC,KAAKyB,SAAO;IAACC,OAAOjC;OAEtBH,QACC,gBAAAS,OAAA,cAACQ,KAAKoB,KAAG,MACP,gBAAA5B,OAAA,cAAC6B,iBAAAA;IAAgBb,MAAM5B,MAAM4B;IAAMc,YAAW;;AAQ9D;AAEA3C,iBAAiB4C,cAAc;",
-  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "Schema", "DXN", "Ref", "Type", "EntityId", "TestItem", "makeObject", "make", "Struct", "name", "String", "description", "optional", "label", "TestColumn", "id", "items", "mutable", "Array", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "role", "icon", "div", "className", "PopoverCardContainer", "IntrinsicCardContainer", "Root", "open", "Trigger", "asChild", "Portal", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "prop", "defaultProp", "onChange", "style", "side", "fallbackSize", "minSize", "React", "useMemo", "useRef", "useState", "Obj", "Card", "IconButton", "Menu", "createMenuAction", "JsonHighlighter", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "menuItems", "useMemo", "createMenuAction", "prev", "label", "icon", "React", "Menu", "Root", "Mosaic", "Tile", "asChild", "Focus", "Item", "Card", "className", "Header", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Block", "end", "Trigger", "disabled", "length", "IconButton", "iconOnly", "variant", "Content", "items", "Row", "JsonHighlighter", "classNames", "displayName"]
-}

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

@@ -1,20 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-
-// 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"
-      }
-    }
-  }
-];
-export {
-  translationKey,
-  translations
-};
-//# sourceMappingURL=translations.mjs.map

package/dist/lib/node-esm/translations.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-mosaic';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'action-menu.label': 'Actions',\n        'add-item.label': 'Add item',\n        'delete-menu.label': 'Delete',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
-  "mappings": ";;;AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,qBAAqB;QACrB,kBAAkB;QAClB,qBAAqB;MACvB;IACF;EACF;;",
-  "names": ["translationKey", "translations"]
-}

package/dist/types/src/components/Mosaic/Root.d.ts

@@ -1,35 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type MosaicData, type MosaicEventHandler, type MosaicTileData } from './types';
-type MosaicDraggingSource = {
-    data: MosaicTileData;
-    handler?: MosaicEventHandler;
-    container?: Element;
-};
-type MosaicDraggingTarget = {
-    data: MosaicData;
-    handler?: MosaicEventHandler;
-};
-type MosaicDraggingState = {
-    source: MosaicDraggingSource;
-    target?: MosaicDraggingTarget;
-};
-type MosaicRootContextValue = {
-    containers: Record<string, MosaicEventHandler>;
-    addContainer: (container: MosaicEventHandler) => void;
-    removeContainer: (id: string) => void;
-    dragging?: MosaicDraggingState;
-};
-declare const useMosaicRootContext: (consumerName: string) => MosaicRootContextValue;
-type MosaicRootProps = PropsWithChildren<{
-    asChild?: boolean;
-    debug?: boolean;
-}>;
-declare const MosaicRoot: React.ForwardRefExoticComponent<{
-    asChild?: boolean;
-    debug?: boolean;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { MosaicRoot, useMosaicRootContext };
-export type { MosaicDraggingState, MosaicRootProps };
-//# sourceMappingURL=Root.d.ts.map

package/dist/types/src/components/Mosaic/Root.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../../src/components/Mosaic/Root.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAI5G,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAMxF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC/C,YAAY,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAEF,QAAA,MAAkC,oBAAoB,kDAAuD,CAAC;AAW9G,KAAK,eAAe,GAAG,iBAAiB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC,CAAC;AAEH,QAAA,MAAM,UAAU;cAJJ,OAAO;YACT,OAAO;;;wCAgOf,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC;AAE5C,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,CAAC"}

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

@@ -1,86 +0,0 @@
-import { type ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-export type GetId<TData = any> = (data: TData) => string;
-/**
- * NOTE: Must implement value equivalence.
- */
-export type LocationType = string | number;
-/**
- * Get the source data from the drag payload.
- */
-export declare const getSourceData: <TData = any, TLocation = any>(source: ElementDragPayload) => MosaicTileData<TData, TLocation> | null;
-/**
- * Draggable item.
- * Tiles may contain arbitrary data (which may not be an ECHO object; e.g., search result).
- */
-export type MosaicTileData<TData = any, TLocation = any> = {
-    type: 'tile';
-    containerId: string;
-    id: string;
-    data: TData;
-    location: TLocation;
-    bounds?: DOMRect;
-};
-/**
- * Drop target placeholder.
- */
-export type MosaicPlaceholderData<TLocation = any> = {
-    type: 'placeholder';
-    containerId: string;
-    location: TLocation;
-};
-/**
- * Drop target container.
- */
-export type MosaicContainerData = {
-    type: 'container';
-    id: string;
-};
-export type MosaicData = MosaicTileData | MosaicPlaceholderData | MosaicContainerData;
-export type MosaicTargetData = MosaicTileData | MosaicPlaceholderData;
-/**
- * Handler implemented by drop containers.
- */
-export interface MosaicEventHandler<TData = any, TObject = any> {
-    /**
-     * Container identifier.
-     */
-    id: string;
-    /**
-     * Determine if the item can be dropped into this container.
-     * NOTE: This is continuously called while dragging (doesn't require mouse movement).
-     */
-    canDrop?: (props: {
-        source: MosaicTileData<TData>;
-    }) => boolean;
-    /**
-     * Called during drag for custom visualization.
-     */
-    onDrag?: (props: {
-        source: MosaicTileData<TData>;
-        position: {
-            x: number;
-            y: number;
-        };
-    }) => void;
-    /**
-     * Insert/rearrange the item at the given location.
-     */
-    onDrop?: (props: {
-        source: MosaicTileData<TData>;
-        target?: MosaicData;
-    }) => void;
-    /**
-     * Request the object to be dropped.
-     * This allows the source container to clone/mutate/swap the object before it is dropped.
-     * If the callback returns true, then the callback may decide to remove the item from the source container,
-     * completing the transfer.
-     */
-    onTake?: (props: {
-        source: MosaicTileData<TData>;
-    }, cb: (object: TObject) => Promise<boolean>) => void;
-    /**
-     * Dragging ended.
-     */
-    onCancel?: () => void;
-}
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Mosaic/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AAE5F,MAAM,MAAM,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,UAChD,kBAAkB,KACzB,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,IAErC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,IAAI;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,SAAS,GAAG,GAAG,IAAI;IACnD,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,CAAC;AAEtF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,qBAAqB,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG;IAC5D;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;QAAC,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAEhG;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;QAAC,MAAM,CAAC,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IAEjF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA;KAAE,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAEvG;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/src/components/Mosaic/Root.tsx

@@ -1,288 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { type ElementDragPayload, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { createContext } from '@radix-ui/react-context';
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import React, { type PropsWithChildren, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-
-import { log } from '@dxos/log';
-
-import { type MosaicData, type MosaicEventHandler, type MosaicTileData } from './types';
-
-//
-// Context
-//
-
-type MosaicDraggingSource = {
-  data: MosaicTileData;
-  handler?: MosaicEventHandler;
-  container?: Element;
-};
-
-type MosaicDraggingTarget = {
-  data: MosaicData;
-  handler?: MosaicEventHandler;
-};
-
-type MosaicDraggingState = {
-  source: MosaicDraggingSource;
-  target?: MosaicDraggingTarget;
-};
-
-type MosaicRootContextValue = {
-  containers: Record<string, MosaicEventHandler>;
-  addContainer: (container: MosaicEventHandler) => void;
-  removeContainer: (id: string) => void;
-  dragging?: MosaicDraggingState;
-};
-
-const [MosaicRootContextProvider, useMosaicRootContext] = createContext<MosaicRootContextValue>('MosaicRoot');
-
-//
-// Root
-//
-
-const MOSAIC_ROOT_NAME = 'Mosaic.Root';
-
-// State attribute: [&:has(>_[data-mosaic-debug=true])]
-const MOSAIC_ROOT_DEBUG_ATTR = 'mosaic-debug';
-
-type MosaicRootProps = PropsWithChildren<{
-  asChild?: boolean;
-  debug?: boolean;
-}>;
-
-const MosaicRoot = forwardRef<HTMLDivElement, MosaicRootProps>(({ children, asChild, debug }, forwardedRef) => {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
-  const Comp = asChild ? Slot : Primitive.div;
-
-  const [handlers, setHandlers] = useState<Record<string, MosaicEventHandler>>({});
-  const [dragging, setDragging] = useState<MosaicDraggingState | undefined>();
-
-  const getSourceHandler = useCallback(
-    (source: ElementDragPayload): { data: MosaicTileData; handler?: MosaicEventHandler } => {
-      const data = source.data as MosaicTileData;
-      return { data, handler: handlers[data.containerId] };
-    },
-    [handlers],
-  );
-
-  const getTargetHandler = useCallback(
-    (location: DragLocationHistory): { data?: MosaicData; handler?: MosaicEventHandler } => {
-      for (const target of location.current.dropTargets) {
-        const data = target.data as MosaicData;
-        let containerId: string;
-        switch (data.type) {
-          case 'tile':
-          case 'placeholder':
-            containerId = data.containerId;
-            break;
-          case 'container':
-            containerId = data.id;
-            break;
-        }
-
-        const handler = handlers[containerId];
-        if (handler) {
-          return { data, handler };
-        }
-      }
-
-      return {};
-    },
-    [handlers],
-  );
-
-  useEffect(() => {
-    const handleChange = ({ source, location }: { source: ElementDragPayload; location: DragLocationHistory }) => {
-      const { data: sourceData } = getSourceHandler(source);
-      const { data: targetData, handler } = getTargetHandler(location);
-      setDragging((dragging) => {
-        dragging?.target?.handler?.onCancel?.();
-        return {
-          source: {
-            data: sourceData,
-            handler: handlers[sourceData.containerId],
-            // TODO(burdon): Check id matches.
-            container: location.initial.dropTargets.find((target) => target.data.type === 'container')?.element,
-          },
-          target: targetData && {
-            data: targetData,
-            handler,
-          },
-        };
-      });
-    };
-
-    const handleCancel = () => {
-      setDragging((dragging) => {
-        requestAnimationFrame(() => {
-          dragging?.target?.handler?.onCancel?.();
-          dragging?.source?.container?.dispatchEvent(new CustomEvent('dnd:cancel', { bubbles: true }));
-        });
-
-        return undefined;
-      });
-    };
-
-    let noTargetTimeout: NodeJS.Timeout;
-
-    // Main controller.
-    return combine(
-      monitorForElements({
-        // Only monitor Mosaic tile drags; other pragmatic-dnd sources under this root are not ours to handle.
-        canMonitor: ({ source }) => source.data.type === 'tile',
-        /**
-         * Dragging started within any container.
-         */
-        onDragStart: ({ source, location }) => {
-          log('Root.onDragStart', {
-            source: source.data,
-            location: location.current.dropTargets.map((target) => target.data),
-          });
-
-          handleChange({ source, location });
-        },
-
-        /**
-         * Dragging entered a new container.
-         */
-        onDropTargetChange: ({ source, location }) => {
-          clearTimeout(noTargetTimeout);
-          log('Root.onDropTargetChange', {
-            source: source.data,
-            location: location.current.dropTargets.map((target) => target.data),
-          });
-
-          // Stop dragging if there are no drop targets (or we are cancelling).
-          if (location.current.dropTargets.length === 0) {
-            noTargetTimeout = setTimeout(() => setDragging(undefined), 1_000);
-          } else {
-            handleChange({ source, location });
-          }
-        },
-
-        /**
-         * Dragging within any container.
-         */
-        onDrag: ({ source, location }) => {
-          const { data } = getSourceHandler(source);
-          const { handler } = getTargetHandler(location);
-          if (handler) {
-            const { clientX: x, clientY: y } = location.current.input;
-            handler.onDrag?.({ source: data, position: { x, y } });
-          }
-        },
-
-        /**
-         * Dragging ended.
-         */
-        onDrop: ({ source, location }) => {
-          log.info('Root.onDrop', {
-            source: source.data,
-            location: location.current.dropTargets.map((target) => target.data),
-          });
-
-          // Get the source container.
-          const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
-          if (!sourceHandler) {
-            log.warn('invalid source', {
-              source: sourceData,
-              handlers: Object.keys(handlers),
-            });
-            return;
-          }
-
-          // NOTE: When dragging is cancelled (e.g., user presses ESC) onDrop is only called after a subsequent event.
-          // NOTE: pDND blocks ESC event propagation while dragging.
-          // - ESC only flips internal state.
-          // - Completion happens on the next processed input event.
-          // - This avoids reentrancy and keeps pointer/keyboard behavior consistent.
-          // - We set dragging to undefined in onDropTargetChange after a delay if there are no drop targets.
-          try {
-            if (location.current.dropTargets.length === 0) {
-              log.info('cancelled');
-            } else {
-              // Get the target container.
-              const { data: targetData, handler: targetHandler } = getTargetHandler(location);
-              if (!targetHandler) {
-                log.warn('invalid target', {
-                  source: sourceData,
-                  location,
-                  handlers: Object.keys(handlers),
-                });
-                return;
-              }
-
-              // TODO(burdon): Check object doesn't already exist in the collection.
-              if (sourceHandler === targetHandler) {
-                targetHandler.onDrop?.({
-                  source: sourceData,
-                  target: targetData,
-                });
-              } else {
-                if (!sourceHandler.onTake) {
-                  log.warn('invalid source', { source: sourceData });
-                  return;
-                }
-
-                sourceHandler.onTake?.({ source: sourceData }, async (object) => {
-                  targetHandler.onDrop?.({
-                    source: { ...sourceData, data: object },
-                    target: targetData,
-                  });
-
-                  return true;
-                });
-              }
-            }
-          } finally {
-            handleCancel();
-          }
-        },
-      }),
-    );
-  }, [handlers, getSourceHandler, getTargetHandler]);
-
-  return (
-    <MosaicRootContextProvider
-      containers={handlers}
-      addContainer={(container) =>
-        setHandlers((containers) => ({
-          ...containers,
-          [container.id]: container,
-        }))
-      }
-      removeContainer={(id) =>
-        setHandlers((containers) => {
-          delete containers[id];
-          return { ...containers };
-        })
-      }
-      dragging={dragging}
-    >
-      <Comp
-        className='contents group'
-        {...{
-          [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
-        }}
-        ref={composedRef}
-      >
-        {children}
-      </Comp>
-    </MosaicRootContextProvider>
-  );
-});
-
-MosaicRoot.displayName = MOSAIC_ROOT_NAME;
-
-export { MosaicRoot, useMosaicRootContext };
-
-export type { MosaicDraggingState, MosaicRootProps };