@dxos/plugin-stack 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/containers/StackArticle/StackArticle.tsx

@@ -3,121 +3,160 @@
 //
 
 import { Atom, useAtomValue } from '@effect-atom/atom-react';
-import * as Option from 'effect/Option';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { useAppGraph, type AppSurface } from '@dxos/app-toolkit/ui';
-import { type Collection, Obj, type Ref } from '@dxos/echo';
-import { Graph } from '@dxos/plugin-graph';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Collection, Obj } from '@dxos/echo';
 import { SpaceOperation } from '@dxos/plugin-space';
-import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { isNonNullable } from '@dxos/util';
+import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Menu, createMenuAction } from '@dxos/react-ui-menu';
+import { Mosaic, type MosaicEventHandler } from '@dxos/react-ui-mosaic';
+import { arrayMove, isNonNullable } from '@dxos/util';
 
-import { StackContext, StackSection } from '#components';
+import { Stack, type StackSectionItem } from '#components';
 import { meta } from '#meta';
-import {
-  type AddSectionPosition,
-  type CollapsedSections,
-  type StackSectionItem,
-  type StackSectionMetadata,
-  type StackSectionView,
-} from '#types';
-
-const collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>
-  Atom.make((get) => {
-    const snapshot = get(Obj.atom(collection));
-    return (
-      snapshot.objects
-        // TODO(wittjosiah): Why isn't this type inferred correctly?
-        .map((ref: Ref.Ref<Obj.Unknown>) => get(Obj.atomReactive(ref)))
-        .filter(isNonNullable)
-    );
-  }),
-);
 
-type StackArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;
+export type StackArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;
 
 export const StackArticle = ({ attendableId, subject: collection }: StackArticleProps) => {
   const { invokePromise } = useOperationInvoker();
-  const { graph } = useAppGraph();
-  const { t } = useTranslation(meta.id);
-  const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
-
-  // TODO(wittjosiah): Re-implement stack views with relations.
-  // const defaultStack = useMemo(() => Obj.make(StackViewType, { sections: {} }), [collection]);
-  // const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;
-  // useEffect(() => {
-  //   if (!collection.views[StackViewType.typename]) {
-  //     collection.views[StackViewType.typename] = Ref.make(stack);
-  //   }
-  // }, [collection, stack]);
-
-  const collectionObjects = useAtomValue(collectionObjectsFamily(collection));
-  const items = collectionObjects.map((object: Obj.Unknown) => {
-    const iconAnnotation = Obj.getIcon(object);
-    const metadata: StackSectionMetadata = { icon: iconAnnotation?.icon };
-    const view = {
-      // ...stack.sections[object.id],
-      collapsed: collapsedSections[Obj.getURI(object)],
-      title:
-        (object as any)?.title ??
-        // TODO(wittjosiah): `getNode` is not reactive.
-        toLocalizedString(Graph.getNode(graph, Obj.getURI(object)).pipe(Option.getOrNull)?.properties.label, t),
-    } as StackSectionView;
-    return { id: Obj.getURI(object), object, metadata, view } satisfies StackSectionItem;
-  });
+  const { t } = useTranslation(meta.profile.key);
+  const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
 
-  const handleDelete = useCallback(
-    async (id: string) => {
-      const index = collection.objects
-        .map((object) => object.target)
-        .filter(isNonNullable)
-        .findIndex((section) => Obj.getURI(section) === id);
-      const object = collection.objects[index].target;
-      if (Obj.isObject(object)) {
-        await invokePromise(SpaceOperation.RemoveObjects, {
-          objects: [object],
-          target: collection,
+  const collectionObjects = useAtomValue(createCollectionObjects(collection));
+  const items = useMemo<StackSectionItem[]>(
+    () => collectionObjects.map((object) => ({ id: Obj.getURI(object), object })),
+    [collectionObjects],
+  );
+
+  const collapsed = useMemo<ReadonlySet<string>>(
+    () => new Set(Object.keys(collapsedSections).filter((id) => collapsedSections[id])),
+    [collapsedSections],
+  );
+
+  // Index of a section within the collection by its object URI.
+  const findIndex = useCallback(
+    (id: string) => collection.objects.findIndex((ref) => ref.target != null && Obj.getURI(ref.target) === id),
+    [collection],
+  );
+
+  // 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>>(
+    () => ({
+      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, (collection) => {
+          const from = findIndex(source.id);
+          if (from !== -1) {
+            arrayMove(collection.objects, from, insert);
+          }
         });
+      },
+    }),
+    [collection, findIndex],
+  );
 
-        // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
-        // delete stack.sections[Path.last(path)];
+  const handleMoveUp = useCallback(
+    (id: string) => {
+      const index = findIndex(id);
+      if (index > 0) {
+        Obj.update(collection, (collection) => {
+          const [ref] = collection.objects.splice(index, 1);
+          collection.objects.splice(index - 1, 0, ref);
+        });
       }
     },
-    [collection, invokePromise],
+    [collection, findIndex],
   );
 
-  const handleAdd = useCallback(
-    async (id: string, position: AddSectionPosition) => {
-      // TODO(wittjosiah): Use object creation dialog.
-      await invokePromise(LayoutOperation.UpdateDialog, {
-        subject: `${meta.id}.AddSectionDialog`,
-        blockAlign: 'start',
-        props: {
-          path: id,
-          position,
-          collection,
-        },
-      });
+  const handleMoveDown = useCallback(
+    (id: string) => {
+      const index = findIndex(id);
+      if (index >= 0 && index < collection.objects.length - 1) {
+        Obj.update(collection, (collection) => {
+          const [ref] = collection.objects.splice(index, 1);
+          collection.objects.splice(index + 1, 0, ref);
+        });
+      }
     },
-    [collection, invokePromise],
+    [collection, findIndex],
   );
 
-  const handleNavigate = useCallback(
-    async (id: string) => {
-      await invokePromise(LayoutOperation.Open, { subject: [id] });
+  const handleDelete = useCallback(
+    (id: string) => {
+      const index = findIndex(id);
+      if (index >= 0) {
+        Obj.update(collection, (collection) => {
+          collection.objects.splice(index, 1);
+        });
+      }
     },
-    [invokePromise],
+    [collection, findIndex],
+  );
+
+  const handleAdd = useCallback(
+    (id: string) =>
+      invokePromise(SpaceOperation.OpenCreateObject, {
+        target: collection,
+        navigable: false,
+        // The created object is appended; move it to immediately after the originating section.
+        onCreateObject: (object: Obj.Unknown) => {
+          const from = findIndex(Obj.getURI(object));
+          const anchor = findIndex(id);
+          if (from >= 0 && anchor >= 0) {
+            Obj.update(collection, (collection) => {
+              const [ref] = collection.objects.splice(from, 1);
+              collection.objects.splice(anchor < from ? anchor + 1 : anchor, 0, ref);
+            });
+          }
+        },
+      }),
+    [collection, invokePromise, findIndex],
   );
 
   const handleCollapse = useCallback(
-    (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
+    (id: string, value: boolean) => 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, {
@@ -128,37 +167,60 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
   );
 
   return (
-    <StackItem.Content toolbar classNames='dx-document'>
-      <Toolbar.Root>
-        <Toolbar.IconButton
-          icon='ph--plus--regular'
-          iconOnly
-          label='Add section'
-          data-testid='stack.addSection'
-          onClick={handleAddSection}
-        />
-      </Toolbar.Root>
-      <StackContext.Provider
-        value={{
-          attendableId,
-          onCollapse: handleCollapse,
-          onNavigate: handleNavigate,
-          onDelete: handleDelete,
-          onAdd: handleAdd,
-        }}
-      >
-        <Stack
-          orientation='vertical'
-          size='intrinsic'
+    <Panel.Root>
+      <Panel.Toolbar classNames='bg-toolbar-surface'>
+        <Toolbar.Root classNames='dx-document'>
+          <Toolbar.IconButton
+            square
+            icon='ph--plus--regular'
+            iconOnly
+            label={t('add-section.label')}
+            data-testid='stack.addSection'
+            onClick={handleAddSection}
+          />
+          <Toolbar.Separator />
+          <Menu.Root>
+            <Menu.Trigger asChild>
+              <Toolbar.IconButton
+                square
+                icon='ph--dots-three-vertical--regular'
+                iconOnly
+                label={t('options.label')}
+                data-testid='stack.options'
+              />
+            </Menu.Trigger>
+            <Menu.Content items={optionsMenu} />
+          </Menu.Root>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <Stack.Root
           id={Obj.getURI(collection)}
-          data-testid='main.stack'
-          classNames='overflow-y-auto'
+          attendableId={attendableId}
+          collapsed={collapsed}
+          eventHandler={eventHandler}
+          onCollapse={handleCollapse}
+          onAdd={handleAdd}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+          onDelete={handleDelete}
         >
-          {items.map((item) => (
-            <StackSection key={item.id} {...item} />
-          ))}
-        </Stack>
-      </StackContext.Provider>
-    </StackItem.Content>
+          <Stack.Content centered padding data-testid='main.stack'>
+            <Stack.Viewport>
+              <Mosaic.Stack classNames='dx-document' items={items} getId={getId} Tile={Stack.Section} />
+            </Stack.Viewport>
+          </Stack.Content>
+        </Stack.Root>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
+
+const getId = (item: StackSectionItem) => item.id;
+
+const createCollectionObjects = Atom.family((collection: Collection.Collection) =>
+  Atom.make((get) => {
+    const snapshot = get(Obj.atom(collection));
+    return snapshot.objects.map((ref) => get(Obj.atomReactive(ref))).filter(isNonNullable);
+  }),
+);

package/src/meta.ts

@@ -4,32 +4,9 @@
 
 import { Plugin } from '@dxos/app-framework';
 import { DXN } from '@dxos/keys';
-import { trim } from '@dxos/util';
 
-export const SECTION_IDENTIFIER = DXN.make('org.dxos.type.stackSection');
-
-export const meta = Plugin.makeMeta({
-  key: DXN.make('org.dxos.plugin.stack'),
-  // TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
-  //   Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.
-  name: 'Collections',
-  author: 'DXOS',
-  spec: 'PLUGIN.mdl',
-  description: trim`
-    StackPlugin renders any Collection object as a vertically scrollable stack of collapsible sections in the
-    Composer article surface. Each section wraps an arbitrary ECHO object and delegates its content rendering
-    to the section surface role, enabling any other plugin to contribute its own section renderer.
+import config from '../dx.config';
 
-    Sections can be individually collapsed to show only their title, expanded to reveal full content, navigated
-    to directly, or removed from the collection. New sections can be inserted before or after any existing
-    section via a per-section dropdown menu, or appended via the toolbar Add button.
-
-    The plugin registers StackViewType with the ECHO schema module so that per-section view metadata
-    (height overrides, custom display data) can be stored and replicated alongside the collection.
+export const SECTION_IDENTIFIER = DXN.make('org.dxos.type.stackSection');
 
-    A settings panel exposes a separation toggle that controls whether visual dividers are rendered between
-    sections.
-  `,
-  icon: 'ph--stack-simple--regular',
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',
-});
+export const meta = Plugin.getMetaFromConfig(config);

package/src/translations.ts

@@ -3,16 +3,14 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
-import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
 
 import { meta } from '#meta';
 
 export const translations = [
   {
     'en-US': {
-      [meta.id]: {
+      [meta.profile.key]: {
         'plugin.name': 'Stacks',
-        'settings.title': 'Stack settings',
         'settings.separation.label': 'Separate sections',
         'settings.separation.description': 'Add visual dividers between sections in stacks.',
         'add-section-beforeAll-dialog.title': 'Add a section to the start',
@@ -26,14 +24,16 @@ export const translations = [
         'remove-section.label': 'Delete',
         'navigate-to-section.label': 'Navigate to object',
         'untitled-section.title': 'Untitled section',
-        'add-section-before.label': 'Add before',
-        'add-section-after.label': 'Add after',
+        'move-up.label': 'Move up',
+        'move-down.label': 'Move down',
         'expand.label': 'Expand',
         'collapse.label': 'Collapse',
+        'collapse-all.label': 'Collapse all',
+        'expand-all.label': 'Expand all',
+        'options.label': 'Options',
         'open-chat-thread.label': 'Open chat thread',
         'drag-handle.label': 'Press space or enter to begin dragging this object.',
       },
     },
   },
-  ...stackTranslations,
 ] as const satisfies Resource[];

package/src/types/Stack.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @import-as-namespace
+
+import * as Schema from 'effect/Schema';
+
+import { DXN, Type } from '@dxos/echo';
+
+// TODO(burdon): Placeholder.
+export class Stack extends Type.makeObject<Stack>(DXN.make('org.dxos.type.stack', '0.1.0'))(Schema.Struct({})) {}

package/src/types/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './stack';
-export type * from './types';
+export * as Stack from './Stack';

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

@@ -1,124 +0,0 @@
-// src/containers/StackArticle/StackArticle.tsx
-import { Atom, useAtomValue } from "@effect-atom/atom-react";
-import * as Option from "effect/Option";
-import React, { useCallback, useState } from "react";
-import { useOperationInvoker } from "@dxos/app-framework/ui";
-import { LayoutOperation } from "@dxos/app-toolkit";
-import { useAppGraph } from "@dxos/app-toolkit/ui";
-import { Obj } from "@dxos/echo";
-import { Graph } from "@dxos/plugin-graph";
-import { SpaceOperation } from "@dxos/plugin-space";
-import { Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { Stack, StackItem } from "@dxos/react-ui-stack";
-import { isNonNullable } from "@dxos/util";
-import { StackContext, StackSection } from "#components";
-import { meta } from "#meta";
-var collectionObjectsFamily = Atom.family((collection) => Atom.make((get) => {
-  const snapshot = get(Obj.atom(collection));
-  return snapshot.objects.map((ref) => get(Obj.atomReactive(ref))).filter(isNonNullable);
-}));
-var StackArticle = ({ attendableId, subject: collection }) => {
-  const { invokePromise } = useOperationInvoker();
-  const { graph } = useAppGraph();
-  const { t } = useTranslation(meta.id);
-  const [collapsedSections, setCollapsedSections] = useState({});
-  const collectionObjects = useAtomValue(collectionObjectsFamily(collection));
-  const items = collectionObjects.map((object) => {
-    const iconAnnotation = Obj.getIcon(object);
-    const metadata = {
-      icon: iconAnnotation?.icon
-    };
-    const view = {
-      // ...stack.sections[object.id],
-      collapsed: collapsedSections[Obj.getURI(object)],
-      title: object?.title ?? // TODO(wittjosiah): `getNode` is not reactive.
-      toLocalizedString(Graph.getNode(graph, Obj.getURI(object)).pipe(Option.getOrNull)?.properties.label, t)
-    };
-    return {
-      id: Obj.getURI(object),
-      object,
-      metadata,
-      view
-    };
-  });
-  const handleDelete = useCallback(async (id) => {
-    const index = collection.objects.map((object2) => object2.target).filter(isNonNullable).findIndex((section) => Obj.getURI(section) === id);
-    const object = collection.objects[index].target;
-    if (Obj.isObject(object)) {
-      await invokePromise(SpaceOperation.RemoveObjects, {
-        objects: [
-          object
-        ],
-        target: collection
-      });
-    }
-  }, [
-    collection,
-    invokePromise
-  ]);
-  const handleAdd = useCallback(async (id, position) => {
-    await invokePromise(LayoutOperation.UpdateDialog, {
-      subject: `${meta.id}.AddSectionDialog`,
-      blockAlign: "start",
-      props: {
-        path: id,
-        position,
-        collection
-      }
-    });
-  }, [
-    collection,
-    invokePromise
-  ]);
-  const handleNavigate = useCallback(async (id) => {
-    await invokePromise(LayoutOperation.Open, {
-      subject: [
-        id
-      ]
-    });
-  }, [
-    invokePromise
-  ]);
-  const handleCollapse = useCallback((id, collapsed) => setCollapsedSections((prev) => ({
-    ...prev,
-    [id]: collapsed
-  })), []);
-  const handleAddSection = useCallback(() => invokePromise(SpaceOperation.OpenCreateObject, {
-    target: collection,
-    navigable: false
-  }), [
-    collection,
-    invokePromise
-  ]);
-  return /* @__PURE__ */ React.createElement(StackItem.Content, {
-    toolbar: true,
-    classNames: "dx-document"
-  }, /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
-    icon: "ph--plus--regular",
-    iconOnly: true,
-    label: "Add section",
-    "data-testid": "stack.addSection",
-    onClick: handleAddSection
-  })), /* @__PURE__ */ React.createElement(StackContext.Provider, {
-    value: {
-      attendableId,
-      onCollapse: handleCollapse,
-      onNavigate: handleNavigate,
-      onDelete: handleDelete,
-      onAdd: handleAdd
-    }
-  }, /* @__PURE__ */ React.createElement(Stack, {
-    orientation: "vertical",
-    size: "intrinsic",
-    id: Obj.getURI(collection),
-    "data-testid": "main.stack",
-    classNames: "overflow-y-auto"
-  }, items.map((item) => /* @__PURE__ */ React.createElement(StackSection, {
-    key: item.id,
-    ...item
-  })))));
-};
-export {
-  StackArticle as default
-};
-//# sourceMappingURL=StackArticle-R7IS6TYR.mjs.map

package/dist/lib/neutral/StackArticle-R7IS6TYR.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/containers/StackArticle/StackArticle.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Atom, useAtomValue } from '@effect-atom/atom-react';\nimport * as Option from 'effect/Option';\nimport React, { useCallback, useState } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation } from '@dxos/app-toolkit';\nimport { useAppGraph, type AppSurface } from '@dxos/app-toolkit/ui';\nimport { type Collection, Obj, type Ref } from '@dxos/echo';\nimport { Graph } from '@dxos/plugin-graph';\nimport { SpaceOperation } from '@dxos/plugin-space';\nimport { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { Stack, StackItem } from '@dxos/react-ui-stack';\nimport { isNonNullable } from '@dxos/util';\n\nimport { StackContext, StackSection } from '#components';\nimport { meta } from '#meta';\nimport {\n  type AddSectionPosition,\n  type CollapsedSections,\n  type StackSectionItem,\n  type StackSectionMetadata,\n  type StackSectionView,\n} from '#types';\n\nconst collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>\n  Atom.make((get) => {\n    const snapshot = get(Obj.atom(collection));\n    return (\n      snapshot.objects\n        // TODO(wittjosiah): Why isn't this type inferred correctly?\n        .map((ref: Ref.Ref<Obj.Unknown>) => get(Obj.atomReactive(ref)))\n        .filter(isNonNullable)\n    );\n  }),\n);\n\ntype StackArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;\n\nexport const StackArticle = ({ attendableId, subject: collection }: StackArticleProps) => {\n  const { invokePromise } = useOperationInvoker();\n  const { graph } = useAppGraph();\n  const { t } = useTranslation(meta.id);\n  const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});\n\n  // TODO(wittjosiah): Re-implement stack views with relations.\n  // const defaultStack = useMemo(() => Obj.make(StackViewType, { sections: {} }), [collection]);\n  // const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;\n  // useEffect(() => {\n  //   if (!collection.views[StackViewType.typename]) {\n  //     collection.views[StackViewType.typename] = Ref.make(stack);\n  //   }\n  // }, [collection, stack]);\n\n  const collectionObjects = useAtomValue(collectionObjectsFamily(collection));\n  const items = collectionObjects.map((object: Obj.Unknown) => {\n    const iconAnnotation = Obj.getIcon(object);\n    const metadata: StackSectionMetadata = { icon: iconAnnotation?.icon };\n    const view = {\n      // ...stack.sections[object.id],\n      collapsed: collapsedSections[Obj.getURI(object)],\n      title:\n        (object as any)?.title ??\n        // TODO(wittjosiah): `getNode` is not reactive.\n        toLocalizedString(Graph.getNode(graph, Obj.getURI(object)).pipe(Option.getOrNull)?.properties.label, t),\n    } as StackSectionView;\n    return { id: Obj.getURI(object), object, metadata, view } satisfies StackSectionItem;\n  });\n\n  const handleDelete = useCallback(\n    async (id: string) => {\n      const index = collection.objects\n        .map((object) => object.target)\n        .filter(isNonNullable)\n        .findIndex((section) => Obj.getURI(section) === id);\n      const object = collection.objects[index].target;\n      if (Obj.isObject(object)) {\n        await invokePromise(SpaceOperation.RemoveObjects, {\n          objects: [object],\n          target: collection,\n        });\n\n        // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.\n        // delete stack.sections[Path.last(path)];\n      }\n    },\n    [collection, invokePromise],\n  );\n\n  const handleAdd = useCallback(\n    async (id: string, position: AddSectionPosition) => {\n      // TODO(wittjosiah): Use object creation dialog.\n      await invokePromise(LayoutOperation.UpdateDialog, {\n        subject: `${meta.id}.AddSectionDialog`,\n        blockAlign: 'start',\n        props: {\n          path: id,\n          position,\n          collection,\n        },\n      });\n    },\n    [collection, invokePromise],\n  );\n\n  const handleNavigate = useCallback(\n    async (id: string) => {\n      await invokePromise(LayoutOperation.Open, { subject: [id] });\n    },\n    [invokePromise],\n  );\n\n  const handleCollapse = useCallback(\n    (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),\n    [],\n  );\n\n  const handleAddSection = useCallback(\n    () =>\n      invokePromise(SpaceOperation.OpenCreateObject, {\n        target: collection,\n        navigable: false,\n      }),\n    [collection, invokePromise],\n  );\n\n  return (\n    <StackItem.Content toolbar classNames='dx-document'>\n      <Toolbar.Root>\n        <Toolbar.IconButton\n          icon='ph--plus--regular'\n          iconOnly\n          label='Add section'\n          data-testid='stack.addSection'\n          onClick={handleAddSection}\n        />\n      </Toolbar.Root>\n      <StackContext.Provider\n        value={{\n          attendableId,\n          onCollapse: handleCollapse,\n          onNavigate: handleNavigate,\n          onDelete: handleDelete,\n          onAdd: handleAdd,\n        }}\n      >\n        <Stack\n          orientation='vertical'\n          size='intrinsic'\n          id={Obj.getURI(collection)}\n          data-testid='main.stack'\n          classNames='overflow-y-auto'\n        >\n          {items.map((item) => (\n            <StackSection key={item.id} {...item} />\n          ))}\n        </Stack>\n      </StackContext.Provider>\n    </StackItem.Content>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["Atom", "useAtomValue", "Option", "React", "useCallback", "useState", "useOperationInvoker", "LayoutOperation", "useAppGraph", "Obj", "Graph", "SpaceOperation", "Toolbar", "toLocalizedString", "useTranslation", "Stack", "StackItem", "isNonNullable", "StackContext", "StackSection", "meta", "collectionObjectsFamily", "family", "collection", "make", "get", "snapshot", "atom", "objects", "map", "ref", "atomReactive", "filter", "StackArticle", "attendableId", "subject", "invokePromise", "graph", "t", "id", "collapsedSections", "setCollapsedSections", "collectionObjects", "items", "object", "iconAnnotation", "getIcon", "metadata", "icon", "view", "collapsed", "getURI", "title", "getNode", "pipe", "getOrNull", "properties", "label", "handleDelete", "index", "target", "findIndex", "section", "isObject", "RemoveObjects", "handleAdd", "position", "UpdateDialog", "blockAlign", "props", "path", "handleNavigate", "Open", "handleCollapse", "prev", "handleAddSection", "OpenCreateObject", "navigable", "Content", "toolbar", "classNames", "Root", "IconButton", "iconOnly", "data-testid", "onClick", "Provider", "value", "onCollapse", "onNavigate", "onDelete", "onAdd", "orientation", "size", "item", "key"]
-}

package/dist/lib/neutral/chunk-RGJSGQGF.mjs

@@ -1,36 +0,0 @@
-// src/meta.ts
-import { Plugin } from "@dxos/app-framework";
-import { DXN } from "@dxos/keys";
-import { trim } from "@dxos/util";
-var SECTION_IDENTIFIER = DXN.make("org.dxos.type.stackSection");
-var meta = Plugin.makeMeta({
-  key: DXN.make("org.dxos.plugin.stack"),
-  // TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
-  //   Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.
-  name: "Collections",
-  author: "DXOS",
-  spec: "PLUGIN.mdl",
-  description: trim`
-    StackPlugin renders any Collection object as a vertically scrollable stack of collapsible sections in the
-    Composer article surface. Each section wraps an arbitrary ECHO object and delegates its content rendering
-    to the section surface role, enabling any other plugin to contribute its own section renderer.
-
-    Sections can be individually collapsed to show only their title, expanded to reveal full content, navigated
-    to directly, or removed from the collection. New sections can be inserted before or after any existing
-    section via a per-section dropdown menu, or appended via the toolbar Add button.
-
-    The plugin registers StackViewType with the ECHO schema module so that per-section view metadata
-    (height overrides, custom display data) can be stored and replicated alongside the collection.
-
-    A settings panel exposes a separation toggle that controls whether visual dividers are rendered between
-    sections.
-  `,
-  icon: "ph--stack-simple--regular",
-  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack"
-});
-
-export {
-  SECTION_IDENTIFIER,
-  meta
-};
-//# sourceMappingURL=chunk-RGJSGQGF.mjs.map

package/dist/lib/neutral/chunk-RGJSGQGF.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { DXN } from '@dxos/keys';\nimport { trim } from '@dxos/util';\n\nexport const SECTION_IDENTIFIER = DXN.make('org.dxos.type.stackSection');\n\nexport const meta = Plugin.makeMeta({\n  key: DXN.make('org.dxos.plugin.stack'),\n  // TODO(wittjosiah): Prevents \"stacks\" language from being exposed to users in settings panel.\n  //   Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.\n  name: 'Collections',\n  author: 'DXOS',\n  spec: 'PLUGIN.mdl',\n  description: trim`\n    StackPlugin renders any Collection object as a vertically scrollable stack of collapsible sections in the\n    Composer article surface. Each section wraps an arbitrary ECHO object and delegates its content rendering\n    to the section surface role, enabling any other plugin to contribute its own section renderer.\n\n    Sections can be individually collapsed to show only their title, expanded to reveal full content, navigated\n    to directly, or removed from the collection. New sections can be inserted before or after any existing\n    section via a per-section dropdown menu, or appended via the toolbar Add button.\n\n    The plugin registers StackViewType with the ECHO schema module so that per-section view metadata\n    (height overrides, custom display data) can be stored and replicated alongside the collection.\n\n    A settings panel exposes a separation toggle that controls whether visual dividers are rendered between\n    sections.\n  `,\n  icon: 'ph--stack-simple--regular',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',\n});\n"],
-  "mappings": ";AAIA,SAASA,cAAc;AACvB,SAASC,WAAW;AACpB,SAASC,YAAY;AAEd,IAAMC,qBAAqBF,IAAIG,KAAK,4BAAA;AAEpC,IAAMC,OAAOL,OAAOM,SAAS;EAClCC,KAAKN,IAAIG,KAAK,uBAAA;;;EAGdI,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNC,aAAaT;;;;;;;;;;;;;;;EAebU,MAAM;EACNC,QAAQ;AACV,CAAA;",
-  "names": ["Plugin", "DXN", "trim", "SECTION_IDENTIFIER", "make", "meta", "makeMeta", "key", "name", "author", "spec", "description", "icon", "source"]
-}