@dxos/plugin-stack 0.10.0 → 0.11.0

package/dx.config.ts

@@ -28,5 +28,6 @@ export default Config2.make({
     source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',
     icon: { key: 'ph--stack-simple--regular' },
     spec: 'PLUGIN.mdl',
+    tags: ['alpha'],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,55 +16,55 @@
     "#capabilities": {
       "source": "./src/capabilities/index.ts",
       "types": "./dist/types/src/capabilities/index.d.ts",
-      "default": "./dist/lib/neutral/capabilities/index.mjs"
+      "default": "./dist/lib/capabilities.mjs"
     },
     "#components": {
       "source": "./src/components/index.ts",
       "types": "./dist/types/src/components/index.d.ts",
-      "default": "./dist/lib/neutral/components/index.mjs"
+      "default": "./dist/lib/components.mjs"
     },
     "#containers": {
       "source": "./src/containers/index.ts",
       "types": "./dist/types/src/containers/index.d.ts",
-      "default": "./dist/lib/neutral/containers/index.mjs"
+      "default": "./dist/lib/containers.mjs"
     },
     "#meta": {
       "source": "./src/meta.ts",
       "types": "./dist/types/src/meta.d.ts",
-      "default": "./dist/lib/neutral/meta.mjs"
+      "default": "./dist/lib/meta.mjs"
     },
     "#plugin": {
       "source": "./src/StackPlugin.ts",
       "types": "./dist/types/src/StackPlugin.d.ts",
-      "default": "./dist/lib/neutral/StackPlugin.mjs"
+      "default": "./dist/lib/StackPlugin.mjs"
     },
     "#translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "default": "./dist/lib/translations.mjs"
     },
     "#types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "default": "./dist/lib/types.mjs"
     }
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "default": "./dist/lib/neutral/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
     "./plugin": {
       "source": "./src/plugin.ts",
       "types": "./dist/types/src/plugin.d.ts",
-      "default": "./dist/lib/neutral/plugin.mjs"
+      "import": "./dist/lib/plugin.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -78,21 +78,23 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-collapsible": "1.1.3",
     "effect": "3.21.4",
-    "@dxos/app-framework": "0.10.0",
-    "@dxos/app-toolkit": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/operation": "0.10.0",
-    "@dxos/plugin-client": "0.10.0",
-    "@dxos/plugin-graph": "0.10.0",
-    "@dxos/plugin-deck": "0.10.0",
-    "@dxos/plugin-space": "0.10.0",
-    "@dxos/react-ui-attention": "0.10.0",
-    "@dxos/react-ui-menu": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/react-ui-mosaic": "0.10.0"
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/app-toolkit": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/operation": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/plugin-deck": "0.11.0",
+    "@dxos/plugin-graph": "0.11.0",
+    "@dxos/plugin-client": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/plugin-space": "0.11.0",
+    "@dxos/react-ui-form": "0.11.0",
+    "@dxos/react-ui-menu": "0.11.0",
+    "@dxos/react-ui-dnd": "0.11.0",
+    "@dxos/react-ui-mosaic": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -100,23 +102,24 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/plugin-markdown": "0.10.0",
-    "@dxos/plugin-testing": "0.10.0",
-    "@dxos/plugin-sketch": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/react-ui": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/plugin-markdown": "0.11.0",
+    "@dxos/plugin-testing": "0.11.0",
+    "@dxos/plugin-illustrator": "0.11.0",
+    "@dxos/plugin-tldraw": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/{react-surface.tsx → react-surface.ts}

@@ -3,7 +3,6 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
@@ -19,9 +18,8 @@ export default Capability.makeModule(() =>
       Surface.create({
         id: 'article',
         filter: AppSurface.object(AppSurface.Article, Collection.Collection),
-        component: ({ role, data }) => {
-          return <StackArticle attendableId={data.attendableId} role={role} subject={data.subject} />;
-        },
+        component: StackArticle,
+        props: ({ role, data: { subject, attendableId } }) => ({ role, subject, attendableId }),
       }),
     ),
   ),

package/src/components/Stack/Stack.tsx

@@ -6,16 +6,14 @@ import React, {
   type ComponentPropsWithoutRef,
   type ForwardedRef,
   type PropsWithChildren,
-  createContext,
   forwardRef,
   useCallback,
-  useContext,
   useMemo,
   useState,
 } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { Paths } from '@dxos/app-toolkit';
+import { GraphPath } from '@dxos/app-toolkit';
 import { AppSurface, AttentionSigilButton } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import {
@@ -27,10 +25,13 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { Mosaic, type MosaicEventHandler, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import { type DndContainerHandler } from '@dxos/react-ui-dnd';
+import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
 
 import { meta } from '#meta';
 
+import { StackContext, useStack, useStackContext } from './StackContext';
+
 //
 // Types
 //
@@ -57,28 +58,15 @@ export type StackContextValue = {
   onDelete: (id: string) => void;
 };
 
-type StackContextType = StackContextValue & {
+export type StackContextType = StackContextValue & {
   /** Container id used to scope Mosaic drag/drop. */
   id: string;
-  eventHandler: MosaicEventHandler;
+  eventHandler: DndContainerHandler;
   /** Scroll viewport element; threaded to the Mosaic container for autoscroll. */
   viewport: HTMLElement | null;
   setViewport: (element: HTMLElement | null) => void;
 };
 
-const StackContext = createContext<StackContextType | undefined>(undefined);
-
-const useStackContext = (consumer: string): StackContextType => {
-  const context = useContext(StackContext);
-  if (!context) {
-    throw new Error(`\`${consumer}\` must be used within \`Stack.Root\`.`);
-  }
-  return context;
-};
-
-/** Section-level callbacks consumed by stack sections. */
-export const useStack = (): StackContextValue => useStackContext('useStack');
-
 //
 // Root
 //
@@ -88,7 +76,7 @@ type StackRootProps = PropsWithChildren<
     /** Container id used to scope Mosaic drag/drop. */
     id: string;
     /** Drag/drop event handler; defaults to a read-only (no-drop) handler. */
-    eventHandler?: MosaicEventHandler;
+    eventHandler?: DndContainerHandler;
   }
 >;
 
@@ -122,11 +110,7 @@ const StackRoot = ({
     [id, eventHandler, viewport, attendableId, collapsed, onCollapse, onAdd, onMoveUp, onMoveDown, onDelete],
   );
 
-  return (
-    <StackContext.Provider value={value}>
-      <Mosaic.Root>{children}</Mosaic.Root>
-    </StackContext.Provider>
-  );
+  return <StackContext.Provider value={value}>{children}</StackContext.Provider>;
 };
 
 StackRoot.displayName = 'Stack.Root';
@@ -213,7 +197,7 @@ const StackSection = ({ data, ...tileProps }: StackSectionProps) => {
   const { t } = useTranslation(meta.profile.key);
   const { attendableId: parentAttendableId, collapsed, onAdd, onMoveUp, onMoveDown, onCollapse, onDelete } = useStack();
   const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const attendableId = Paths.getCollectionObjectPath(parentAttendableId, object.id);
+  const attendableId = GraphPath.getCollectionObjectPath(parentAttendableId, object.id);
   const attentionAttrs = useAttentionAttributes(attendableId);
   const surfaceData = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);
   const isCollapsed = collapsed.has(id);
@@ -222,7 +206,7 @@ const StackSection = ({ data, ...tileProps }: StackSectionProps) => {
 
   const rail = (
     <div className='grid grid-rows-[min-content_1fr]'>
-      <div className='p-1 bg-toolbar-surface'>
+      <div className='p-1 dx-toolbar-surface'>
         <DropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen}>
           <DropdownMenu.Trigger asChild>
             <AttentionSigilButton size='md' attendableId={attendableId}>

package/src/components/Stack/StackContext.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { type StackContextType, type StackContextValue } from './Stack';
+
+// Kept out of `Stack.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export const StackContext = createContext<StackContextType | undefined>(undefined);
+
+export const useStackContext = (consumer: string): StackContextType => {
+  const context = useContext(StackContext);
+  if (!context) {
+    throw new Error(`\`${consumer}\` must be used within \`Stack.Root\`.`);
+  }
+  return context;
+};
+
+/** Section-level callbacks consumed by stack sections. */
+export const useStack = (): StackContextValue => useStackContext('useStack');

package/src/components/Stack/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export { useStack } from './StackContext';
+
 export * from './Stack';

package/src/containers/StackArticle/StackArticle.stories.tsx

@@ -11,17 +11,20 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppActivationEvents, AppCapabilities } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Collection, Filter, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import { Drawing } from '@dxos/plugin-illustrator';
+import { IllustratorPlugin } from '@dxos/plugin-illustrator/plugin';
 import { Markdown, MarkdownEvents } from '@dxos/plugin-markdown';
 import { MarkdownPlugin } from '@dxos/plugin-markdown/testing';
-import { Sketch } from '@dxos/plugin-sketch';
-import { SketchPlugin } from '@dxos/plugin-sketch/plugin';
-import { SketchBuilder } from '@dxos/plugin-sketch/testing';
 import { SpacePlugin } from '@dxos/plugin-space/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { TldrawModel } from '@dxos/plugin-tldraw';
+import { Tldraw } from '@dxos/plugin-tldraw';
+import { TldrawPlugin } from '@dxos/plugin-tldraw/plugin';
 import { random } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { useQuery } from '@dxos/react-client/echo';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
@@ -29,7 +32,7 @@ import { translations } from '#translations';
 import { StackArticle, type StackArticleProps } from './StackArticle';
 
 // A minimal sketch (tldraw `tldraw.com/2`) snapshot, used as a test image.
-const SKETCH_CONTENT = new SketchBuilder()
+const SKETCH_CONTENT = new TldrawModel.RecordBuilder()
   .rectangle({ id: 'rect', x: 0, y: 0, text: 'DXOS', color: 'blue', fill: 'solid', size: 'l' })
   .ellipse({ id: 'echo', x: 320, y: 0, text: 'ECHO', color: 'green' })
   .arrow({ from: 'rect', to: 'echo' })
@@ -51,6 +54,7 @@ const meta: Meta<typeof StackArticle> = {
   component: StackArticle,
   render: DefaultStory,
   decorators: [
+    withMosaic(),
     withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       setupEvents: [AppActivationEvents.SetupSettings, MarkdownEvents.SetupExtensions],
@@ -58,7 +62,7 @@ const meta: Meta<typeof StackArticle> = {
       plugins: [
         ...corePlugins(),
         ClientPlugin({
-          types: [Collection.Collection, Markdown.Document, Sketch.Sketch, Sketch.Canvas],
+          types: [Collection.Collection, Markdown.Document, Drawing.Drawing, Drawing.Canvas],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               const { personalSpace: space } = yield* initializeIdentity(client);
@@ -83,11 +87,9 @@ const meta: Meta<typeof StackArticle> = {
               const sketches = [
                 Ref.make(
                   space.db.add(
-                    Sketch.make({
+                    Drawing.make({
                       name: random.lorem.sentence(2),
-                      canvas: {
-                        content: SKETCH_CONTENT,
-                      },
+                      canvas: Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA, content: SKETCH_CONTENT }),
                     }),
                   ),
                 ),
@@ -103,7 +105,8 @@ const meta: Meta<typeof StackArticle> = {
             }),
         }),
         MarkdownPlugin(),
-        SketchPlugin(),
+        IllustratorPlugin(),
+        TldrawPlugin(),
         SpacePlugin({}),
         StorybookPlugin({}),
       ],

package/src/containers/StackArticle/StackArticle.tsx

@@ -3,15 +3,16 @@
 //
 
 import { Atom, useAtomValue } from '@effect-atom/atom-react';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useId, useMemo, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Collection, Obj } from '@dxos/echo';
 import { SpaceOperation } from '@dxos/plugin-space';
 import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
-import { Mosaic, type MosaicEventHandler } from '@dxos/react-ui-mosaic';
+import { Mosaic } from '@dxos/react-ui-mosaic';
 import { arrayMove, isNonNullable } from '@dxos/util';
 
 import { Stack, type StackSectionItem } from '#components';
@@ -41,11 +42,14 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
     [collection],
   );
 
+  // Per-instance discriminator so the same collection opened in two planks doesn't collide in the Mosaic registry.
+  const instanceId = useId();
+
   // Reorder sections in place. Placeholder/tile drop locations are 1-based with half-step placeholders
   // between tiles, so the floor of the drop location is the destination array index (see Mosaic.Stack).
-  const eventHandler = useMemo<MosaicEventHandler<StackSectionItem>>(
+  const eventHandler = useMemo<DndContainerHandler<StackSectionItem>>(
     () => ({
-      id: Obj.getURI(collection),
+      id: `${Obj.getURI(collection)}:${instanceId}`,
       canDrop: ({ source }) =>
         collection.objects.some((ref) => ref.target != null && Obj.getURI(ref.target) === source.id),
       onDrop: ({ source, target }) => {
@@ -68,7 +72,7 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
         });
       },
     }),
-    [collection, findIndex],
+    [collection, findIndex, instanceId],
   );
 
   const handleMoveUp = useCallback(
@@ -168,7 +172,7 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
 
   return (
     <Panel.Root>
-      <Panel.Toolbar classNames='bg-toolbar-surface'>
+      <Panel.Toolbar classNames='dx-toolbar-surface'>
         <Toolbar.Root classNames='dx-document'>
           <Toolbar.IconButton
             square
@@ -224,3 +228,5 @@ const createCollectionObjects = Atom.family((collection: Collection.Collection)
     return snapshot.objects.map((ref) => get(Obj.atomReactive(ref))).filter(isNonNullable);
   }),
 );
+
+StackArticle.displayName = 'StackArticle';

package/dist/lib/neutral/StackArticle-DDKRSUE7.mjs

@@ -1,199 +0,0 @@
-import "./chunk-J5LGTIGS.mjs";
-
-// src/containers/StackArticle/StackArticle.tsx
-import { Atom, useAtomValue } from "@effect-atom/atom-react";
-import React, { useCallback, useMemo, useState } from "react";
-import { useOperationInvoker } from "@dxos/app-framework/ui";
-import { Obj } from "@dxos/echo";
-import { SpaceOperation } from "@dxos/plugin-space";
-import { Panel, Toolbar, useTranslation } from "@dxos/react-ui";
-import { Menu, createMenuAction } from "@dxos/react-ui-menu";
-import { Mosaic } from "@dxos/react-ui-mosaic";
-import { arrayMove, isNonNullable } from "@dxos/util";
-import { Stack } from "#components";
-import { meta } from "#meta";
-var StackArticle = ({ attendableId, subject: collection }) => {
-  const { invokePromise } = useOperationInvoker();
-  const { t } = useTranslation(meta.profile.key);
-  const [collapsedSections, setCollapsedSections] = useState({});
-  const collectionObjects = useAtomValue(createCollectionObjects(collection));
-  const items = useMemo(() => collectionObjects.map((object) => ({
-    id: Obj.getURI(object),
-    object
-  })), [
-    collectionObjects
-  ]);
-  const collapsed = useMemo(() => new Set(Object.keys(collapsedSections).filter((id) => collapsedSections[id])), [
-    collapsedSections
-  ]);
-  const findIndex = useCallback((id) => collection.objects.findIndex((ref) => ref.target != null && Obj.getURI(ref.target) === id), [
-    collection
-  ]);
-  const eventHandler = useMemo(() => ({
-    id: Obj.getURI(collection),
-    canDrop: ({ source }) => collection.objects.some((ref) => ref.target != null && Obj.getURI(ref.target) === source.id),
-    onDrop: ({ source, target }) => {
-      const to = target?.type === "tile" || target?.type === "placeholder" ? target.location : target?.type === "container" ? collection.objects.length : -1;
-      const insert = typeof to === "number" && to >= 0 ? Math.floor(to) : -1;
-      if (insert < 0) {
-        return;
-      }
-      Obj.update(collection, (collection2) => {
-        const from = findIndex(source.id);
-        if (from !== -1) {
-          arrayMove(collection2.objects, from, insert);
-        }
-      });
-    }
-  }), [
-    collection,
-    findIndex
-  ]);
-  const handleMoveUp = useCallback((id) => {
-    const index = findIndex(id);
-    if (index > 0) {
-      Obj.update(collection, (collection2) => {
-        const [ref] = collection2.objects.splice(index, 1);
-        collection2.objects.splice(index - 1, 0, ref);
-      });
-    }
-  }, [
-    collection,
-    findIndex
-  ]);
-  const handleMoveDown = useCallback((id) => {
-    const index = findIndex(id);
-    if (index >= 0 && index < collection.objects.length - 1) {
-      Obj.update(collection, (collection2) => {
-        const [ref] = collection2.objects.splice(index, 1);
-        collection2.objects.splice(index + 1, 0, ref);
-      });
-    }
-  }, [
-    collection,
-    findIndex
-  ]);
-  const handleDelete = useCallback((id) => {
-    const index = findIndex(id);
-    if (index >= 0) {
-      Obj.update(collection, (collection2) => {
-        collection2.objects.splice(index, 1);
-      });
-    }
-  }, [
-    collection,
-    findIndex
-  ]);
-  const handleAdd = useCallback((id) => invokePromise(SpaceOperation.OpenCreateObject, {
-    target: collection,
-    navigable: false,
-    // The created object is appended; move it to immediately after the originating section.
-    onCreateObject: (object) => {
-      const from = findIndex(Obj.getURI(object));
-      const anchor = findIndex(id);
-      if (from >= 0 && anchor >= 0) {
-        Obj.update(collection, (collection2) => {
-          const [ref] = collection2.objects.splice(from, 1);
-          collection2.objects.splice(anchor < from ? anchor + 1 : anchor, 0, ref);
-        });
-      }
-    }
-  }), [
-    collection,
-    invokePromise,
-    findIndex
-  ]);
-  const handleCollapse = useCallback((id, value) => setCollapsedSections((prev) => ({
-    ...prev,
-    [id]: value
-  })), []);
-  const handleCollapseAll = useCallback(() => setCollapsedSections(Object.fromEntries(collectionObjects.map((object) => [
-    Obj.getURI(object),
-    true
-  ]))), [
-    collectionObjects
-  ]);
-  const handleExpandAll = useCallback(() => setCollapsedSections({}), []);
-  const optionsMenu = useMemo(() => [
-    createMenuAction("collapse-all", handleCollapseAll, {
-      label: [
-        "collapse-all.label",
-        {
-          ns: meta.profile.key
-        }
-      ],
-      icon: "ph--arrows-in-line-vertical--regular",
-      testId: "stack.collapse-all"
-    }),
-    createMenuAction("expand-all", handleExpandAll, {
-      label: [
-        "expand-all.label",
-        {
-          ns: meta.profile.key
-        }
-      ],
-      icon: "ph--arrows-out-line-vertical--regular",
-      testId: "stack.expand-all"
-    })
-  ], [
-    handleCollapseAll,
-    handleExpandAll
-  ]);
-  const handleAddSection = useCallback(() => invokePromise(SpaceOperation.OpenCreateObject, {
-    target: collection,
-    navigable: false
-  }), [
-    collection,
-    invokePromise
-  ]);
-  return /* @__PURE__ */ React.createElement(Panel.Root, null, /* @__PURE__ */ React.createElement(Panel.Toolbar, {
-    classNames: "bg-toolbar-surface"
-  }, /* @__PURE__ */ React.createElement(Toolbar.Root, {
-    classNames: "dx-document"
-  }, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
-    square: true,
-    icon: "ph--plus--regular",
-    iconOnly: true,
-    label: t("add-section.label"),
-    "data-testid": "stack.addSection",
-    onClick: handleAddSection
-  }), /* @__PURE__ */ React.createElement(Toolbar.Separator, null), /* @__PURE__ */ React.createElement(Menu.Root, null, /* @__PURE__ */ React.createElement(Menu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
-    square: true,
-    icon: "ph--dots-three-vertical--regular",
-    iconOnly: true,
-    label: t("options.label"),
-    "data-testid": "stack.options"
-  })), /* @__PURE__ */ React.createElement(Menu.Content, {
-    items: optionsMenu
-  })))), /* @__PURE__ */ React.createElement(Panel.Content, null, /* @__PURE__ */ React.createElement(Stack.Root, {
-    id: Obj.getURI(collection),
-    attendableId,
-    collapsed,
-    eventHandler,
-    onCollapse: handleCollapse,
-    onAdd: handleAdd,
-    onMoveUp: handleMoveUp,
-    onMoveDown: handleMoveDown,
-    onDelete: handleDelete
-  }, /* @__PURE__ */ React.createElement(Stack.Content, {
-    centered: true,
-    padding: true,
-    "data-testid": "main.stack"
-  }, /* @__PURE__ */ React.createElement(Stack.Viewport, null, /* @__PURE__ */ React.createElement(Mosaic.Stack, {
-    classNames: "dx-document",
-    items,
-    getId,
-    Tile: Stack.Section
-  }))))));
-};
-var getId = (item) => item.id;
-var createCollectionObjects = Atom.family((collection) => Atom.make((get) => {
-  const snapshot = get(Obj.atom(collection));
-  return snapshot.objects.map((ref) => get(Obj.atomReactive(ref))).filter(isNonNullable);
-}));
-export {
-  StackArticle as default
-};
-//# sourceMappingURL=StackArticle-DDKRSUE7.mjs.map