@dxos/plugin-stack 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/containers/StackArticle/StackArticle.tsx

@@ -0,0 +1,168 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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, type AppSurface } from '@dxos/app-toolkit/ui';
+import { Annotation, type Collection, Obj, type Ref, Type } from '@dxos/echo';
+import { AtomObj } from '@dxos/echo-atom';
+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';
+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(AtomObj.make(collection));
+    return (
+      snapshot.objects
+        // TODO(wittjosiah): Why isn't this type inferred correctly?
+        .map((ref: Ref.Ref<Obj.Unknown>) => get(AtomObj.makeWithReactive(ref)))
+        .filter(isNonNullable)
+    );
+  }),
+);
+
+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 type = Obj.getType(object);
+    const iconAnnotation = type
+      ? Option.getOrUndefined(Annotation.IconAnnotation.get(Type.getSchema(type)))
+      : undefined;
+    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 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,
+        });
+
+        // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
+        // delete stack.sections[Path.last(path)];
+      }
+    },
+    [collection, invokePromise],
+  );
+
+  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,
+        },
+      });
+    },
+    [collection, invokePromise],
+  );
+
+  const handleNavigate = useCallback(
+    async (id: string) => {
+      await invokePromise(LayoutOperation.Open, { subject: [id] });
+    },
+    [invokePromise],
+  );
+
+  const handleCollapse = useCallback(
+    (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
+    [],
+  );
+
+  const handleAddSection = useCallback(
+    () =>
+      invokePromise(SpaceOperation.OpenCreateObject, {
+        target: collection,
+        navigable: false,
+      }),
+    [collection, invokePromise],
+  );
+
+  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'
+          id={Obj.getURI(collection)}
+          data-testid='main.stack'
+          classNames='overflow-y-auto'
+        >
+          {items.map((item) => (
+            <StackSection key={item.id} {...item} />
+          ))}
+        </Stack>
+      </StackContext.Provider>
+    </StackItem.Content>
+  );
+};

package/src/containers/StackArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { StackArticle as default } from './StackArticle';

package/src/containers/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const StackArticle: ComponentType<any> = lazy(() => import('./StackArticle'));

package/src/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './meta';
-export * from './StackPlugin';
+export * from './types';

package/src/meta.ts

@@ -2,16 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
+export const SECTION_IDENTIFIER = 'org.dxos.type.stackSection';
 
-export const meta: PluginMeta = {
-  id: 'dxos.org/plugin/stack',
+export const meta: Plugin.Meta = {
+  id: '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',
-  description: 'View collections of objects within the deck.',
+  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',
 };

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const StackPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/translations.ts

@@ -3,34 +3,35 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
-import { translations as stackTranslations } from '@dxos/react-ui-stack';
+import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
 export const translations = [
   {
     'en-US': {
       [meta.id]: {
-        'plugin name': 'Stacks',
-        'settings title': 'Stack plugin settings',
-        'settings separation label': 'Separate sections',
-        'add section beforeAll dialog title': 'Add a section to the start',
-        'add section afterAll dialog title': 'Add a section to the end',
-        'add section before dialog title': 'Add a section',
-        'add section after dialog title': 'Add a section',
-        'add section input placeholder': 'Find the type of section to add',
-        'upload file label': 'Add file',
-        'add section label': 'Add section',
-        'empty stack message': 'Drag items into the stack.',
-        'remove section label': 'Delete',
-        'navigate to section label': 'Navigate to item',
-        'untitled section title': 'Untitled section',
-        'add section before label': 'Add before',
-        'add section after label': 'Add after',
-        'expand label': 'Expand',
-        'collapse label': 'Collapse',
-        'open chat thread label': 'Open chat thread',
-        'drag handle label': 'Press space or enter to begin dragging this item.',
+        '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',
+        'add-section-afterAll-dialog.title': 'Add a section to the end',
+        'add-section-before-dialog.title': 'Add a section',
+        'add-section-after-dialog.title': 'Add a section',
+        'add-section-input.placeholder': 'Find the type of section to add',
+        'upload-file.label': 'Add file',
+        'add-section.label': 'Add section',
+        'empty-stack.message': 'Drag objects into the stack.',
+        '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',
+        'expand.label': 'Expand',
+        'collapse.label': 'Collapse',
+        'open-chat-thread.label': 'Open chat thread',
+        'drag-handle.label': 'Press space or enter to begin dragging this object.',
       },
     },
   },

package/src/types/stack.ts

@@ -4,7 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { TypedObject } from '@dxos/echo/internal';
+import { DXN, Type } from '@dxos/echo';
 
 // All section metadata needs to be optional/have defaults.
 // Any objects added to the collection will start with the section defaults.
@@ -19,9 +19,8 @@ export const SectionSchema = Schema.Struct({
 });
 
 // TODO(wittjosiah): This needs a relation to be connected to a stack.
-export class StackViewType extends TypedObject({
-  typename: 'dxos.org/type/StackView',
-  version: '0.1.0',
-})({
-  sections: Schema.mutable(Schema.Record({ key: Schema.String, value: SectionSchema })),
-}) {}
+export const StackViewType = Schema.Struct({
+  sections: Schema.Record({ key: Schema.String, value: SectionSchema }),
+}).pipe(Type.makeObject(DXN.make('org.dxos.type.stackView', '0.1.0')));
+
+export type StackViewType = Type.InstanceType<typeof StackViewType>;

package/src/types/types.ts

@@ -4,16 +4,15 @@
 
 import { type FC } from 'react';
 
-import { type Obj } from '@dxos/echo';
+import { type Collection, type Obj } from '@dxos/echo';
 import { type Label } from '@dxos/react-ui';
 import { type StackItemSize } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
 
 export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
 
 export type CollapsedSections = Record<string, boolean>;
 
-export type CollectionItem = DataType.Collection['objects'][number];
+export type CollectionItem = Collection.Collection['objects'][number];
 
 export type StackSectionView = {
   title?: string;
@@ -39,7 +38,7 @@ export type StackSectionMetadata = {
 
 export type StackSectionItem = {
   id: string;
-  object: Obj.Any;
+  object: Obj.Unknown;
   view: StackSectionView;
   metadata: StackSectionMetadata;
 };

package/dist/lib/browser/StackContainer-RFJDTQBT.mjs

@@ -1,297 +0,0 @@
-import {
-  meta
-} from "./chunk-MS4QSWEZ.mjs";
-
-// src/components/StackContainer.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import * as Option from "effect/Option";
-import React3, { useCallback, useState as useState2 } from "react";
-import { Capabilities, LayoutAction, createIntent, useAppGraph, useCapabilities, useIntentDispatcher } from "@dxos/app-framework";
-import { fullyQualifiedId, isLiveObject } from "@dxos/client/echo";
-import { Obj } from "@dxos/echo";
-import { SpaceAction } from "@dxos/plugin-space/types";
-import { Toolbar, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { AttentionProvider } from "@dxos/react-ui-attention";
-import { Stack, StackItem as StackItem2 } from "@dxos/react-ui-stack";
-import { isNonNullable } from "@dxos/util";
-
-// src/components/StackContext.tsx
-import { createContext, useContext } from "react";
-var StackContext = /* @__PURE__ */ createContext({
-  onCollapse: () => {
-  },
-  onNavigate: async () => {
-  },
-  onDelete: async () => {
-  },
-  onAdd: () => {
-  }
-});
-var useStack = () => useContext(StackContext);
-
-// src/components/StackSection.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import React2, { useMemo, useState } from "react";
-import { Surface } from "@dxos/app-framework";
-import { DropdownMenu, Icon, IconButton, useTranslation } from "@dxos/react-ui";
-import { useAttentionAttributes } from "@dxos/react-ui-attention";
-import { StackItem } from "@dxos/react-ui-stack";
-import { getSize, mx, textBlockWidth } from "@dxos/react-ui-theme";
-
-// src/components/CaretDownUp.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-var CaretDownUp = ({ children, ...props }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 256 256",
-      ...props
-    }, /* @__PURE__ */ React.createElement("rect", {
-      width: "256",
-      height: "256",
-      fill: "none"
-    }), /* @__PURE__ */ React.createElement("polyline", {
-      points: "80 224 128 176 176 224",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "16"
-    }), /* @__PURE__ */ React.createElement("polyline", {
-      points: "80 32 128 80 176 32",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "16"
-    }), children);
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/StackSection.tsx
-var sectionActionDimensions = "p-1 mlb-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
-var StackSection = ({ id, view, object, metadata: { icon = "ph--placeholder--regular" } }) => {
-  var _effect = _useSignals2();
-  try {
-    const { t } = useTranslation(meta.id);
-    const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
-    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-    const attentionAttrs = useAttentionAttributes(id);
-    const stackItem = useMemo(() => ({
-      id
-    }), [
-      id
-    ]);
-    return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
-      asChild: true,
-      open: !view.collapsed,
-      onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
-    }, /* @__PURE__ */ React2.createElement(StackItem.Root, {
-      item: stackItem,
-      role: "section",
-      ...attentionAttrs
-    }, /* @__PURE__ */ React2.createElement(StackItem.Heading, {
-      classNames: "attention-surface"
-    }, /* @__PURE__ */ React2.createElement("span", {
-      className: "sr-only"
-    }, view.title), /* @__PURE__ */ React2.createElement(StackItem.HeadingStickyContent, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
-      open: optionsMenuOpen,
-      onOpenChange: setOptionsMenuOpen
-    }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React2.createElement(Icon, {
-      icon,
-      size: 5,
-      classNames: "transition-opacity"
-    }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, view.collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-      onClick: () => onNavigate(id),
-      "data-testid": "section.navigate-to"
-    }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--arrow-right--regular",
-      size: 5
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "mis-2 grow"
-    }, t("navigate to section label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
-      className: getSize(5)
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "mis-2 grow"
-    }, t("collapse label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-      onClick: () => onAdd(id, "before"),
-      "data-testid": "section.add-before"
-    }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--arrow-line-up--regular",
-      size: 5
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "mis-2 grow"
-    }, t("add section before label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-      onClick: () => onAdd(id, "after"),
-      "data-testid": "section.add-after"
-    }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--arrow-line-down--regular",
-      size: 5
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "mis-2 grow"
-    }, t("add section after label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-      onClick: () => onDelete(id),
-      "data-testid": "section.remove"
-    }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--trash--regular",
-      size: 5
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "mis-2 grow"
-    }, t("remove section label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement(IconButton, {
-      iconOnly: true,
-      variant: "ghost",
-      label: t("expand label"),
-      icon: "ph--caret-up-down--regular",
-      classNames: sectionActionDimensions
-    })) : /* @__PURE__ */ React2.createElement(IconButton, {
-      iconOnly: true,
-      variant: "ghost",
-      onClick: () => onNavigate(id),
-      label: t("navigate to section label"),
-      icon: "ph--arrow-right--regular",
-      "data-testid": "section.navigate-to",
-      classNames: sectionActionDimensions
-    }))), /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React2.createElement(Surface, {
-      role: "section",
-      data: {
-        subject: object
-      },
-      limit: 1,
-      placeholder: /* @__PURE__ */ React2.createElement(React2.Fragment, null)
-    })), view.collapsed && /* @__PURE__ */ React2.createElement(StackItem.Content, {
-      classNames: "attention-surface"
-    }, /* @__PURE__ */ React2.createElement("h2", {
-      className: mx("flex items-center p-4 font-medium", textBlockWidth)
-    }, view.title))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/StackContainer.tsx
-var StackContainer = ({ id, collection }) => {
-  var _effect = _useSignals3();
-  try {
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
-    const { graph } = useAppGraph();
-    const { t } = useTranslation2(meta.id);
-    const allMetadata = useCapabilities(Capabilities.Metadata);
-    const [collapsedSections, setCollapsedSections] = useState2({});
-    const items = collection.objects.map((object) => object.target).filter(isNonNullable).map((object) => {
-      const metadata = allMetadata.find((m) => m.id === (Obj.getTypename(object) ?? "never"))?.metadata;
-      const view = {
-        // ...stack.sections[object.id],
-        collapsed: collapsedSections[fullyQualifiedId(object)],
-        title: object?.title ?? // TODO(wittjosiah): `getNode` is not reactive.
-        toLocalizedString(graph.getNode(fullyQualifiedId(object)).pipe(Option.getOrNull)?.properties.label, t)
-      };
-      return {
-        id: fullyQualifiedId(object),
-        object,
-        metadata,
-        view
-      };
-    }) ?? [];
-    const handleDelete = useCallback(async (id2) => {
-      const index = collection.objects.map((object2) => object2.target).filter(isNonNullable).findIndex((section) => fullyQualifiedId(section) === id2);
-      const object = collection.objects[index].target;
-      if (isLiveObject(object)) {
-        await dispatch(createIntent(SpaceAction.RemoveObjects, {
-          objects: [
-            object
-          ],
-          target: collection
-        }));
-      }
-    }, [
-      collection,
-      dispatch
-    ]);
-    const handleAdd = useCallback(async (id2, position) => {
-      await dispatch?.(
-        // TODO(wittjosiah): Use object creation dialog.
-        createIntent(LayoutAction.UpdateDialog, {
-          part: "dialog",
-          subject: `${meta.id}/AddSectionDialog`,
-          options: {
-            blockAlign: "start",
-            props: {
-              path: id2,
-              position,
-              collection
-            }
-          }
-        })
-      );
-    }, [
-      collection,
-      dispatch
-    ]);
-    const handleNavigate = useCallback(async (id2) => {
-      await dispatch(createIntent(LayoutAction.Open, {
-        part: "main",
-        subject: [
-          id2
-        ]
-      }));
-    }, [
-      dispatch
-    ]);
-    const handleCollapse = useCallback((id2, collapsed) => setCollapsedSections((prev) => ({
-      ...prev,
-      [id2]: collapsed
-    })), []);
-    const handleAddSection = useCallback(() => dispatch?.(createIntent(SpaceAction.OpenCreateObject, {
-      target: collection,
-      navigable: false
-    })), [
-      collection,
-      dispatch
-    ]);
-    return /* @__PURE__ */ React3.createElement(StackItem2.Content, {
-      toolbar: true,
-      classNames: "container-max-width overflow-hidden border-l border-r border-subduedSeparator"
-    }, /* @__PURE__ */ React3.createElement(Toolbar.Root, null, /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
-      icon: "ph--plus--regular",
-      iconOnly: true,
-      label: "Add section",
-      onClick: handleAddSection
-    })), /* @__PURE__ */ React3.createElement(AttentionProvider, {
-      id
-    }, /* @__PURE__ */ React3.createElement(StackContext.Provider, {
-      value: {
-        onCollapse: handleCollapse,
-        onNavigate: handleNavigate,
-        onDelete: handleDelete,
-        onAdd: handleAdd
-      }
-    }, /* @__PURE__ */ React3.createElement(Stack, {
-      orientation: "vertical",
-      size: "intrinsic",
-      id,
-      "data-testid": "main.stack",
-      classNames: "overflow-y-auto"
-    }, items.map((item) => /* @__PURE__ */ React3.createElement(StackSection, {
-      key: item.id,
-      ...item
-    }))))));
-  } finally {
-    _effect.f();
-  }
-};
-var StackContainer_default = StackContainer;
-export {
-  StackContainer_default as default
-};
-//# sourceMappingURL=StackContainer-RFJDTQBT.mjs.map