@dxos/plugin-stack 0.7.4 → 0.7.5-main.9d26e3a

package/src/components/StackMain.tsx

@@ -3,16 +3,17 @@
 //
 
 import { Plus } from '@phosphor-icons/react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
+  createIntent,
   LayoutAction,
   NavigationAction,
   parseMetadataResolverPlugin,
   useIntentDispatcher,
   useResolvePlugin,
 } from '@dxos/app-framework';
-import { create, getType, fullyQualifiedId } from '@dxos/client/echo';
+import { create, getType, fullyQualifiedId, isReactiveObject, makeRef } from '@dxos/client/echo';
 import { useGraph } from '@dxos/plugin-graph';
 import { SpaceAction } from '@dxos/plugin-space';
 import { type CollectionType } from '@dxos/plugin-space/types';
@@ -21,7 +22,6 @@ import { AttentionProvider } from '@dxos/react-ui-attention';
 import { Stack } from '@dxos/react-ui-stack';
 import { nonNullable } from '@dxos/util';
 
-import { AddSection } from './AddSection';
 import { StackContext } from './StackContext';
 import { StackSection } from './StackSection';
 import { STACK_PLUGIN } from '../meta';
@@ -40,17 +40,17 @@ type StackMainProps = {
 };
 
 const StackMain = ({ id, collection }: StackMainProps) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useGraph();
   const { t } = useTranslation(STACK_PLUGIN);
   const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);
   const defaultStack = useMemo(() => create(StackViewType, { sections: {} }), [collection]);
-  const stack = (collection.views[StackViewType.typename] as StackViewType) ?? defaultStack;
+  const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;
   const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
 
   useEffect(() => {
     if (!collection.views[StackViewType.typename]) {
-      collection.views[StackViewType.typename] = stack;
+      collection.views[StackViewType.typename] = makeRef(stack);
     }
   }, [collection, stack]);
 
@@ -58,6 +58,7 @@ const StackMain = ({ id, collection }: StackMainProps) => {
     collection.objects
       // TODO(wittjosiah): Should the database handle this differently?
       // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?
+      .map((object) => object.target)
       .filter(nonNullable)
       .map((object) => {
         const metadata = metadataPlugin?.provides.metadata.resolver(
@@ -72,46 +73,53 @@ const StackMain = ({ id, collection }: StackMainProps) => {
         return { id: fullyQualifiedId(object), object, metadata, view } satisfies StackSectionItem;
       }) ?? [];
 
-  const handleDelete = async (id: string) => {
-    const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === id);
-    if (index >= 0) {
-      await dispatch({
-        action: SpaceAction.REMOVE_OBJECTS,
-        data: { objects: [collection.objects[index]], collection },
-      });
+  const handleDelete = useCallback(
+    async (id: string) => {
+      const index = collection.objects
+        .map((object) => object.target)
+        .filter(nonNullable)
+        .findIndex((section) => fullyQualifiedId(section) === id);
+      const object = collection.objects[index].target;
+      if (isReactiveObject(object)) {
+        await dispatch(createIntent(SpaceAction.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)];
-    }
-  };
-
-  const handleAdd = (id: string, position: AddSectionPosition) => {
-    void dispatch?.({
-      action: LayoutAction.SET_LAYOUT,
-      data: {
-        element: 'dialog',
-        component: `${STACK_PLUGIN}/AddSectionDialog`,
-        subject: { path: id, position, collection },
-      },
-    });
-  };
-
-  const handleNavigate = async (id: string) => {
-    await dispatch([
-      {
-        action: NavigationAction.OPEN,
-        data: { activeParts: { main: [id] } },
-      },
-      {
-        action: LayoutAction.SCROLL_INTO_VIEW,
-        data: { id },
-      },
-    ]);
-  };
-
-  const handleCollapse = (id: string, collapsed: boolean) => {
-    setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));
-  };
+        // 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, dispatch],
+  );
+
+  const handleAdd = useCallback(
+    async (id: string, position: AddSectionPosition) => {
+      await dispatch?.(
+        createIntent(LayoutAction.SetLayout, {
+          element: 'dialog',
+          component: `${STACK_PLUGIN}/AddSectionDialog`,
+          subject: { path: id, position, collection },
+        }),
+      );
+    },
+    [collection, dispatch],
+  );
+
+  const handleNavigate = useCallback(
+    async (id: string) => {
+      await dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [id] } }));
+      await dispatch(createIntent(LayoutAction.ScrollIntoView, { id }));
+    },
+    [dispatch],
+  );
+
+  const handleCollapse = useCallback(
+    (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
+    [],
+  );
+
+  const handleAddSection = useCallback(
+    () => dispatch?.(createIntent(SpaceAction.OpenCreateObject, { target: collection, navigable: false })),
+    [collection, dispatch],
+  );
 
   return (
     <AttentionProvider id={id}>
@@ -123,35 +131,18 @@ const StackMain = ({ id, collection }: StackMainProps) => {
           onAdd: handleAdd,
         }}
       >
-        <Stack orientation='vertical' size='intrinsic' separators={false} id={id} data-testid='main.stack'>
+        <Stack orientation='vertical' size='intrinsic' id={id} data-testid='main.stack'>
           {items.map((item) => (
             <StackSection key={item.id} {...item} />
           ))}
         </Stack>
 
-        {items.length === 0 ? (
-          <AddSection collection={collection} />
-        ) : (
-          <div role='none' className='flex mlb-2 pli-2 justify-center'>
-            <Button
-              data-testid='stack.createSection'
-              classNames='gap-2'
-              onClick={() =>
-                dispatch?.({
-                  action: LayoutAction.SET_LAYOUT,
-                  data: {
-                    element: 'dialog',
-                    component: 'dxos.org/plugin/stack/AddSectionDialog',
-                    subject: { position: 'afterAll', collection },
-                  },
-                })
-              }
-            >
-              <Plus />
-              <span className='sr-only'>{t('add section label')}</span>
-            </Button>
-          </div>
-        )}
+        <div role='none' className='flex mlb-2 pli-2 justify-center'>
+          <Button data-testid='stack.createSection' classNames='gap-2' onClick={handleAddSection}>
+            <Plus />
+            <span className='sr-only'>{t('add section label')}</span>
+          </Button>
+        </div>
       </StackContext.Provider>
     </AttentionProvider>
   );

package/src/components/StackSection.tsx

@@ -47,7 +47,7 @@ export const StackSection = ({
                 </StackItem.SigilButton>
               </DropdownMenu.Trigger>
               <DropdownMenu.Portal>
-                <DropdownMenu.Content style={{ zIndex: 70 }}>
+                <DropdownMenu.Content>
                   <DropdownMenu.Viewport>
                     {view.collapsed ? (
                       <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
@@ -83,7 +83,6 @@ export const StackSection = ({
               <CollapsiblePrimitive.Trigger asChild>
                 <IconButton
                   iconOnly
-                  tooltipZIndex='70'
                   variant='ghost'
                   label={t('expand label')}
                   icon='ph--caret-up-down--regular'
@@ -93,7 +92,6 @@ export const StackSection = ({
             ) : (
               <IconButton
                 iconOnly
-                tooltipZIndex='70'
                 variant='ghost'
                 onClick={() => onNavigate(id)}
                 label={t('navigate to section label')}
@@ -105,7 +103,7 @@ export const StackSection = ({
           </div>
         </StackItem.Heading>
         <CollapsiblePrimitive.Content>
-          <Surface role='section' data={{ object }} limit={1} placeholder={<></>} />
+          <Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
         </CollapsiblePrimitive.Content>
         {view.collapsed && (
           <StackItem.Content toolbar={false} classNames='attention-surface'>

package/src/components/index.ts

@@ -7,4 +7,3 @@ import { lazy } from 'react';
 export const StackMain = lazy(() => import('./StackMain'));
 
 export * from './StackSettings';
-export * from './AddSectionDialog';

package/src/types/types.ts

@@ -6,7 +6,6 @@ import { type IconProps } from '@phosphor-icons/react';
 import { type FC } from 'react';
 
 import type {
-  Intent,
   MetadataRecordsProvides,
   SettingsProvides,
   SurfaceProvides,
@@ -14,6 +13,7 @@ import type {
 } from '@dxos/app-framework';
 import { type SchemaProvides } from '@dxos/plugin-space';
 import { type CollectionType } from '@dxos/plugin-space/types';
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
 import { type Label } from '@dxos/react-ui';
 import { type StackItemSize } from '@dxos/react-ui-stack';
 
@@ -31,8 +31,6 @@ export type StackSectionView = {
   custom?: Record<string, any>;
 };
 
-// TODO(wittjosiah): Creators/choosers likely aren't stack-specific.
-//  Also distinct from graph actions though, output should be inserted into current view rather than navigated to.
 type StackSectionAction = {
   id: string;
   testId: string;
@@ -49,29 +47,15 @@ export type StackSectionMetadata = {
 
 export type StackSectionItem = {
   id: string;
-  object: CollectionType['objects'][number];
+  object: ReactiveEchoObject<any>;
   view: StackSectionView;
   metadata: StackSectionMetadata;
 };
 
-export type StackSectionCreator = StackSectionAction & {
-  intent: Intent | Intent[];
-};
-
-export type StackProvides = {
-  stack: {
-    creators?: StackSectionCreator[];
-  };
-};
-
-export type StackState = {
-  creators: StackSectionCreator[];
-};
-
 export type StackSettingsProps = { separation: boolean };
 
 export type StackPluginProvides = SurfaceProvides &
   MetadataRecordsProvides &
   SettingsProvides<StackSettingsProps> &
   TranslationsProvides &
-  SchemaProvides & { stack: StackState };
+  SchemaProvides;

package/dist/lib/browser/StackMain-4D4J4IRK.mjs

@@ -1,391 +0,0 @@
-import {
-  STACK_PLUGIN
-} from "./chunk-DS5KGEJG.mjs";
-import {
-  StackViewType
-} from "./chunk-L34RFJ2L.mjs";
-
-// packages/plugins/plugin-stack/src/components/StackMain.tsx
-import { Plus } from "@phosphor-icons/react";
-import React4, { useEffect, useMemo, useState as useState2 } from "react";
-import { LayoutAction, NavigationAction, parseMetadataResolverPlugin, useIntentDispatcher as useIntentDispatcher2, useResolvePlugin } from "@dxos/app-framework";
-import { create, getType, fullyQualifiedId } from "@dxos/client/echo";
-import { useGraph } from "@dxos/plugin-graph";
-import { SpaceAction } from "@dxos/plugin-space";
-import { Button, toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { AttentionProvider } from "@dxos/react-ui-attention";
-import { Stack } from "@dxos/react-ui-stack";
-import { nonNullable } from "@dxos/util";
-
-// packages/plugins/plugin-stack/src/components/AddSection.tsx
-import { useArrowNavigationGroup } from "@fluentui/react-tabster";
-import React, { useCallback } from "react";
-import { usePlugin, useIntentDispatcher } from "@dxos/app-framework";
-import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { getSize, mx } from "@dxos/react-ui-theme";
-var CreatorTile = ({ Icon: Icon2, label, testId, handleAdd }) => {
-  const onClick = useCallback((_) => handleAdd(), [
-    handleAdd
-  ]);
-  const onKeyDown = useCallback((event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      handleAdd();
-    }
-  }, [
-    handleAdd
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "button",
-    "aria-label": label,
-    tabIndex: 0,
-    className: mx("flex items-center w-[10rem] h-16 overflow-hidden", "border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer"),
-    onClick,
-    onKeyDown,
-    "data-testid": testId
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator"
-  }, /* @__PURE__ */ React.createElement(Icon2, {
-    weight: "thin",
-    className: getSize(6)
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "overflow-hidden items-center p-2 px-3"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "capitalize"
-  }, label)));
-};
-var AddSection = ({ collection }) => {
-  const domAttributes = useArrowNavigationGroup({
-    axis: "grid"
-  });
-  const dispatch = useIntentDispatcher();
-  const { t } = useTranslation(STACK_PLUGIN);
-  const stackPlugin = usePlugin(STACK_PLUGIN);
-  const stackCreators = stackPlugin?.provides?.stack.creators ?? [];
-  const handleAdd = useCallback(async (creator) => {
-    const { data: section } = await dispatch(creator.intent) ?? {};
-    collection.objects = [
-      section
-    ];
-    const stack = collection.views[StackViewType.typename];
-    if (stack) {
-      stack.sections[section.id] = {};
-    }
-  }, [
-    collection,
-    dispatch
-  ]);
-  if (stackCreators.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", {
-    ...domAttributes,
-    role: "none",
-    className: "flex flex-wrap items-center p-8 gap-4"
-  }, stackCreators.map((creator) => {
-    const { id, type, icon, testId } = creator;
-    return /* @__PURE__ */ React.createElement(CreatorTile, {
-      key: id,
-      label: toLocalizedString(type, t),
-      testId,
-      Icon: icon,
-      handleAdd: () => handleAdd(creator)
-    });
-  }));
-};
-
-// packages/plugins/plugin-stack/src/components/StackContext.tsx
-import { createContext, useContext } from "react";
-var StackContext = /* @__PURE__ */ createContext({
-  onCollapse: () => {
-  },
-  onNavigate: async () => {
-  },
-  onDelete: async () => {
-  },
-  onAdd: () => {
-  }
-});
-var useStack = () => useContext(StackContext);
-
-// packages/plugins/plugin-stack/src/components/StackSection.tsx
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import React3, { useState } from "react";
-import { Surface } from "@dxos/app-framework";
-import { DropdownMenu, Icon, useTranslation as useTranslation2, IconButton } from "@dxos/react-ui";
-import { useAttendableAttributes } from "@dxos/react-ui-attention";
-import { StackItem } from "@dxos/react-ui-stack";
-import { mx as mx2, getSize as getSize2, textBlockWidth } from "@dxos/react-ui-theme";
-
-// packages/plugins/plugin-stack/src/components/CaretDownUp.tsx
-import React2 from "react";
-var CaretDownUp = ({ children, ...props }) => {
-  return /* @__PURE__ */ React2.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 256 256",
-    ...props
-  }, /* @__PURE__ */ React2.createElement("rect", {
-    width: "256",
-    height: "256",
-    fill: "none"
-  }), /* @__PURE__ */ React2.createElement("polyline", {
-    points: "80 224 128 176 176 224",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "16"
-  }), /* @__PURE__ */ React2.createElement("polyline", {
-    points: "80 32 128 80 176 32",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "16"
-  }), children);
-};
-
-// packages/plugins/plugin-stack/src/components/StackSection.tsx
-var sectionActionDimensions = "m-1 p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
-var StackSection = ({ id, view, object, metadata: { icon = "ph--placeholder--regular" } }) => {
-  const { t } = useTranslation2(STACK_PLUGIN);
-  const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const attendableAttrs = useAttendableAttributes(id);
-  return /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Root, {
-    asChild: true,
-    open: !view.collapsed,
-    onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
-  }, /* @__PURE__ */ React3.createElement(StackItem.Root, {
-    item: {
-      id
-    },
-    role: "section",
-    ...attendableAttrs,
-    classNames: "border-be border-separator"
-  }, /* @__PURE__ */ React3.createElement(StackItem.Heading, {
-    classNames: "attention-surface border-ie !border-separator"
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, view.title), /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: "sticky -block-start-px bg-[--sticky-bg]"
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: setOptionsMenuOpen
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React3.createElement(Icon, {
-    icon,
-    size: 5,
-    classNames: "transition-opacity"
-  }))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
-    style: {
-      zIndex: 70
-    }
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, view.collapsed ? /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
-    onClick: () => onNavigate(id),
-    "data-testid": "section.navigate-to"
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon: "ph--arrow-square-out--regular",
-    size: 5
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "mis-2 grow"
-  }, t("navigate to section label"))) : /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React3.createElement(CaretDownUp, {
-    className: getSize2(5)
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "mis-2 grow"
-  }, t("collapse label")))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
-    onClick: () => onAdd(id, "before"),
-    "data-testid": "section.add-before"
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon: "ph--arrow-line-up--regular",
-    size: 5
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "mis-2 grow"
-  }, t("add section before label"))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
-    onClick: () => onAdd(id, "after"),
-    "data-testid": "section.add-after"
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon: "ph--arrow-line-down--regular",
-    size: 5
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "mis-2 grow"
-  }, t("add section after label"))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
-    onClick: () => onDelete(id),
-    "data-testid": "section.remove"
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon: "ph--trash--regular",
-    size: 5
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "mis-2 grow"
-  }, t("remove section label")))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(IconButton, {
-    iconOnly: true,
-    tooltipZIndex: "70",
-    variant: "ghost",
-    label: t("expand label"),
-    icon: "ph--caret-up-down--regular",
-    classNames: sectionActionDimensions
-  })) : /* @__PURE__ */ React3.createElement(IconButton, {
-    iconOnly: true,
-    tooltipZIndex: "70",
-    variant: "ghost",
-    onClick: () => onNavigate(id),
-    label: t("navigate to section label"),
-    icon: "ph--arrow-square-out--regular",
-    "data-testid": "section.navigate-to",
-    classNames: sectionActionDimensions
-  }))), /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React3.createElement(Surface, {
-    role: "section",
-    data: {
-      object
-    },
-    limit: 1,
-    placeholder: /* @__PURE__ */ React3.createElement(React3.Fragment, null)
-  })), view.collapsed && /* @__PURE__ */ React3.createElement(StackItem.Content, {
-    toolbar: false,
-    classNames: "attention-surface"
-  }, /* @__PURE__ */ React3.createElement("h2", {
-    className: mx2("flex items-center p-4 font-medium is-full", textBlockWidth)
-  }, view.title))));
-};
-
-// packages/plugins/plugin-stack/src/components/StackMain.tsx
-var StackMain = ({ id, collection }) => {
-  const dispatch = useIntentDispatcher2();
-  const { graph } = useGraph();
-  const { t } = useTranslation3(STACK_PLUGIN);
-  const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);
-  const defaultStack = useMemo(() => create(StackViewType, {
-    sections: {}
-  }), [
-    collection
-  ]);
-  const stack = collection.views[StackViewType.typename] ?? defaultStack;
-  const [collapsedSections, setCollapsedSections] = useState2({});
-  useEffect(() => {
-    if (!collection.views[StackViewType.typename]) {
-      collection.views[StackViewType.typename] = stack;
-    }
-  }, [
-    collection,
-    stack
-  ]);
-  const items = collection.objects.filter(nonNullable).map((object) => {
-    const metadata = metadataPlugin?.provides.metadata.resolver(getType(object)?.objectId ?? "never");
-    const view = {
-      ...stack.sections[object.id],
-      collapsed: collapsedSections[fullyQualifiedId(object)],
-      title: object?.title ?? toLocalizedString2(graph.findNode(fullyQualifiedId(object))?.properties.label, t)
-    };
-    return {
-      id: fullyQualifiedId(object),
-      object,
-      metadata,
-      view
-    };
-  }) ?? [];
-  const handleDelete = async (id2) => {
-    const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === id2);
-    if (index >= 0) {
-      await dispatch({
-        action: SpaceAction.REMOVE_OBJECTS,
-        data: {
-          objects: [
-            collection.objects[index]
-          ],
-          collection
-        }
-      });
-    }
-  };
-  const handleAdd = (id2, position) => {
-    void dispatch?.({
-      action: LayoutAction.SET_LAYOUT,
-      data: {
-        element: "dialog",
-        component: `${STACK_PLUGIN}/AddSectionDialog`,
-        subject: {
-          path: id2,
-          position,
-          collection
-        }
-      }
-    });
-  };
-  const handleNavigate = async (id2) => {
-    await dispatch([
-      {
-        action: NavigationAction.OPEN,
-        data: {
-          activeParts: {
-            main: [
-              id2
-            ]
-          }
-        }
-      },
-      {
-        action: LayoutAction.SCROLL_INTO_VIEW,
-        data: {
-          id: id2
-        }
-      }
-    ]);
-  };
-  const handleCollapse = (id2, collapsed) => {
-    setCollapsedSections((prev) => ({
-      ...prev,
-      [id2]: collapsed
-    }));
-  };
-  return /* @__PURE__ */ React4.createElement(AttentionProvider, {
-    id
-  }, /* @__PURE__ */ React4.createElement(StackContext.Provider, {
-    value: {
-      onCollapse: handleCollapse,
-      onNavigate: handleNavigate,
-      onDelete: handleDelete,
-      onAdd: handleAdd
-    }
-  }, /* @__PURE__ */ React4.createElement(Stack, {
-    orientation: "vertical",
-    size: "intrinsic",
-    separators: false,
-    id,
-    "data-testid": "main.stack"
-  }, items.map((item) => /* @__PURE__ */ React4.createElement(StackSection, {
-    key: item.id,
-    ...item
-  }))), items.length === 0 ? /* @__PURE__ */ React4.createElement(AddSection, {
-    collection
-  }) : /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: "flex mlb-2 pli-2 justify-center"
-  }, /* @__PURE__ */ React4.createElement(Button, {
-    "data-testid": "stack.createSection",
-    classNames: "gap-2",
-    onClick: () => dispatch?.({
-      action: LayoutAction.SET_LAYOUT,
-      data: {
-        element: "dialog",
-        component: "dxos.org/plugin/stack/AddSectionDialog",
-        subject: {
-          position: "afterAll",
-          collection
-        }
-      }
-    })
-  }, /* @__PURE__ */ React4.createElement(Plus, null), /* @__PURE__ */ React4.createElement("span", {
-    className: "sr-only"
-  }, t("add section label"))))));
-};
-var StackMain_default = StackMain;
-export {
-  StackMain_default as default
-};
-//# sourceMappingURL=StackMain-4D4J4IRK.mjs.map