@dxos/plugin-stack 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.8.4-main.d05673bc65",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,63 +8,90 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#plugin": {
+      "source": "./src/StackPlugin.ts",
+      "types": "./dist/types/src/StackPlugin.d.ts",
+      "default": "./dist/lib/neutral/StackPlugin.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "default": "./dist/lib/neutral/index.mjs"
     },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/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"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-collapsible": "1.1.3",
-    "effect": "3.19.16",
-    "node-fetch": "^2.6.0",
-    "react-is": "~19.2.0",
-    "@dxos/app-framework": "0.8.4-main.d05673bc65",
-    "@dxos/app-toolkit": "0.8.4-main.d05673bc65",
-    "@dxos/async": "0.8.4-main.d05673bc65",
-    "@dxos/client": "0.8.4-main.d05673bc65",
-    "@dxos/echo-atom": "0.8.4-main.d05673bc65",
-    "@dxos/invariant": "0.8.4-main.d05673bc65",
-    "@dxos/echo": "0.8.4-main.d05673bc65",
-    "@dxos/operation": "0.8.4-main.d05673bc65",
-    "@dxos/plugin-client": "0.8.4-main.d05673bc65",
-    "@dxos/plugin-deck": "0.8.4-main.d05673bc65",
-    "@dxos/react-client": "0.8.4-main.d05673bc65",
-    "@dxos/plugin-graph": "0.8.4-main.d05673bc65",
-    "@dxos/plugin-space": "0.8.4-main.d05673bc65",
-    "@dxos/react-ui-attention": "0.8.4-main.d05673bc65",
-    "@dxos/react-ui-stack": "0.8.4-main.d05673bc65",
-    "@dxos/react-ui-form": "0.8.4-main.d05673bc65",
-    "@dxos/react-ui-searchlist": "0.8.4-main.d05673bc65",
-    "@dxos/schema": "0.8.4-main.d05673bc65",
-    "@dxos/types": "0.8.4-main.d05673bc65",
-    "@dxos/util": "0.8.4-main.d05673bc65"
+    "effect": "3.21.2",
+    "@dxos/app-framework": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-atom": "0.8.4-main.d9fc60f731",
+    "@dxos/app-toolkit": "0.8.4-main.d9fc60f731",
+    "@dxos/invariant": "0.8.4-main.d9fc60f731",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/keys": "0.8.4-main.d9fc60f731",
+    "@dxos/operation": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-client": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-deck": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-form": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-stack": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-space": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-attention": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-graph": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -72,18 +99,19 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/react-ui": "0.8.4-main.d05673bc65",
-    "@dxos/storybook-utils": "0.8.4-main.d05673bc65",
-    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
+    "vite": "^8.0.14",
+    "@dxos/plugin-testing": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "effect": "3.19.16",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.d05673bc65",
-    "@dxos/react-ui": "0.8.4-main.d05673bc65"
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

package/src/StackPlugin.ts

@@ -4,33 +4,23 @@
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
-import { type Obj } from '@dxos/echo';
 
-import { ReactSurface } from './capabilities';
-import { SECTION_IDENTIFIER, meta } from './meta';
-import { translations } from './translations';
-import { StackViewType } from './types';
+import { ReactSurface } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { StackViewType } from '#types';
+
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
 
 export const StackPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addMetadataModule({
-    metadata: {
-      id: SECTION_IDENTIFIER,
-      metadata: {
-        parse: (section: { object: Obj.Unknown }, type: string) => {
-          switch (type) {
-            case 'node':
-              return { id: section.object.id, label: (section.object as any).title, data: section.object };
-            case 'object':
-              return section.object;
-            case 'view-object':
-              return section;
-          }
-        },
-      },
-    },
-  }),
   AppPlugin.addSchemaModule({ schema: [StackViewType] }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+  }),
   Plugin.make,
 );
+
+export default StackPlugin;

package/src/capabilities/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './react-surface';
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

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

@@ -7,23 +7,20 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
-import { Obj } from '@dxos/echo';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Collection } from '@dxos/echo';
 
-import { StackContainer } from '../../containers';
-import { meta } from '../../meta';
+import { StackArticle } from '#containers';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(
       Capabilities.ReactSurface,
       Surface.create({
-        id: `${meta.id}.article`,
-        role: 'article',
-        filter: (data): data is { attendableId: string; subject: Collection.Collection } =>
-          typeof data.attendableId === 'string' && Obj.instanceOf(Collection.Collection, data.subject),
+        id: 'article',
+        filter: AppSurface.object(AppSurface.Article, Collection.Collection),
         component: ({ role, data }) => {
-          return <StackContainer attendableId={data.attendableId} role={role} subject={data.subject} />;
+          return <StackArticle attendableId={data.attendableId} role={role} subject={data.subject} />;
         },
       }),
     ),

package/src/components/StackContext/StackContext.tsx

@@ -4,7 +4,7 @@
 
 import { createContext, useContext } from 'react';
 
-import { type AddSectionPosition } from '../../types';
+import { type AddSectionPosition } from '#types';
 
 export type StackContextValue = {
   attendableId: string;

package/src/components/StackSection/StackSection.tsx

@@ -6,16 +6,17 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import React, { useMemo, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 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/ui-theme';
+import { getSize, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { type StackSectionItem } from '../../types';
+import { meta } from '#meta';
+import { type StackSectionItem } from '#types';
 
-import { CaretDownUp } from './CaretDownUp';
 import { useStack } from '../StackContext';
+import { CaretDownUp } from './CaretDownUp';
 
 const sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';
 
@@ -25,7 +26,7 @@ export const StackSection = ({
   id,
   view,
   object,
-  metadata: { icon = 'ph--placeholder--regular' },
+  metadata: { icon = 'ph--circle-dashed--regular' },
 }: StackSectionProps) => {
   const { t } = useTranslation(meta.id);
   const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();
@@ -49,7 +50,7 @@ export const StackSection = ({
             >
               <DropdownMenu.Trigger asChild>
                 <StackItem.SigilButton>
-                  <Icon icon={icon} size={5} classNames='transition-opacity' />
+                  <Icon icon={icon} classNames='transition-opacity' />
                 </StackItem.SigilButton>
               </DropdownMenu.Trigger>
               <DropdownMenu.Portal>
@@ -57,28 +58,28 @@ export const StackSection = ({
                   <DropdownMenu.Viewport>
                     {view.collapsed ? (
                       <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
-                        <Icon icon='ph--arrow-right--regular' size={5} />
-                        <span className='ms-2 grow'>{t('navigate to section label')}</span>
+                        <Icon icon='ph--arrow-right--regular' />
+                        <span className='ms-2 grow'>{t('navigate-to-section.label')}</span>
                       </DropdownMenu.Item>
                     ) : (
                       <CollapsiblePrimitive.Trigger asChild>
                         <DropdownMenu.Item>
                           <CaretDownUp className={getSize(5)} />
-                          <span className='ms-2 grow'>{t('collapse label')}</span>
+                          <span className='ms-2 grow'>{t('collapse.label')}</span>
                         </DropdownMenu.Item>
                       </CollapsiblePrimitive.Trigger>
                     )}
                     <DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>
-                      <Icon icon='ph--arrow-line-up--regular' size={5} />
-                      <span className='ms-2 grow'>{t('add section before label')}</span>
+                      <Icon icon='ph--arrow-line-up--regular' />
+                      <span className='ms-2 grow'>{t('add-section-before.label')}</span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>
-                      <Icon icon='ph--arrow-line-down--regular' size={5} />
-                      <span className='ms-2 grow'>{t('add section after label')}</span>
+                      <Icon icon='ph--arrow-line-down--regular' />
+                      <span className='ms-2 grow'>{t('add-section-after.label')}</span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>
-                      <Icon icon='ph--trash--regular' size={5} />
-                      <span className='ms-2 grow'>{t('remove section label')}</span>
+                      <Icon icon='ph--trash--regular' />
+                      <span className='ms-2 grow'>{t('remove-section.label')}</span>
                     </DropdownMenu.Item>
                   </DropdownMenu.Viewport>
                   <DropdownMenu.Arrow />
@@ -90,7 +91,7 @@ export const StackSection = ({
                 <IconButton
                   iconOnly
                   variant='ghost'
-                  label={t('expand label')}
+                  label={t('expand.label')}
                   icon='ph--caret-up-down--regular'
                   classNames={sectionActionDimensions}
                 />
@@ -100,7 +101,7 @@ export const StackSection = ({
                 iconOnly
                 variant='ghost'
                 onClick={() => onNavigate(id)}
-                label={t('navigate to section label')}
+                label={t('navigate-to-section.label')}
                 icon='ph--arrow-right--regular'
                 data-testid='section.navigate-to'
                 classNames={sectionActionDimensions}
@@ -109,11 +110,11 @@ export const StackSection = ({
           </StackItem.HeadingStickyContent>
         </StackItem.Heading>
         <CollapsiblePrimitive.Content>
-          <Surface.Surface role='section' data={data} limit={1} placeholder={<></>} />
+          <Surface.Surface type={AppSurface.Section} data={data} limit={1} placeholder={<></>} />
         </CollapsiblePrimitive.Content>
         {view.collapsed && (
           <StackItem.Content classNames='dx-attention-surface'>
-            <h2 className={mx('flex items-center p-4 font-medium', textBlockWidth)}>{view.title}</h2>
+            <h2 className={mx('flex items-center p-4 font-medium')}>{view.title}</h2>
           </StackItem.Content>
         )}
       </StackItem.Root>

package/src/components/StackSettings/StackSettings.tsx

@@ -5,26 +5,24 @@
 import React from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
-import { type StackSettingsProps } from '../../types';
+import { meta } from '#meta';
+import { type StackSettingsProps } from '#types';
 
 export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <Settings.Root>
-      <Settings.Section title={t('settings title', { ns: meta.id })}>
-        <Settings.Group>
-          <Settings.ItemInput title={t('settings separation label')}>
-            <Input.Switch
-              checked={settings.separation}
-              onCheckedChange={(checked) => (settings.separation = !!checked)}
-            />
-          </Settings.ItemInput>
-        </Settings.Group>
-      </Settings.Section>
-    </Settings.Root>
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+        <SettingsForm.Item title={t('settings.separation.label')} description={t('settings.separation.description')}>
+          <Input.Switch
+            checked={settings.separation}
+            onCheckedChange={(checked) => (settings.separation = !!checked)}
+          />
+        </SettingsForm.Item>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
   );
 };

package/src/containers/{StackContainer/StackContainer.tsx → StackArticle/StackArticle.tsx}

@@ -6,28 +6,26 @@ import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import * as Option from 'effect/Option';
 import React, { useCallback, useState } from 'react';
 
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Obj, type Ref } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
+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 { AtomObj } from '@dxos/echo-atom';
 import { Graph } from '@dxos/plugin-graph';
-import { SpaceOperation } from '@dxos/plugin-space/types';
+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 { StackContext, StackSection } from '#components';
+import { meta } from '#meta';
 import {
   type AddSectionPosition,
   type CollapsedSections,
   type StackSectionItem,
   type StackSectionMetadata,
   type StackSectionView,
-} from '../../types';
+} from '#types';
 
 const collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>
   Atom.make((get) => {
@@ -41,13 +39,12 @@ const collectionObjectsFamily = Atom.family((collection: Collection.Collection)
   }),
 );
 
-type StackContainerProps = SurfaceComponentProps<Collection.Collection>;
+type StackArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;
 
-export const StackContainer = ({ attendableId, subject: collection }: StackContainerProps) => {
+export const StackArticle = ({ attendableId, subject: collection }: StackArticleProps) => {
   const { invokePromise } = useOperationInvoker();
   const { graph } = useAppGraph();
   const { t } = useTranslation(meta.id);
-  const allMetadata = useCapabilities(AppCapabilities.Metadata);
   const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
 
   // TODO(wittjosiah): Re-implement stack views with relations.
@@ -61,20 +58,17 @@ export const StackContainer = ({ attendableId, subject: collection }: StackConta
 
   const collectionObjects = useAtomValue(collectionObjectsFamily(collection));
   const items = collectionObjects.map((object: Obj.Unknown) => {
-    const metadata = allMetadata.find((m) => m.id === (Obj.getTypename(object) ?? 'never'))
-      ?.metadata as StackSectionMetadata;
+    const iconAnnotation = Obj.getIcon(object);
+    const metadata: StackSectionMetadata = { icon: iconAnnotation?.icon };
     const view = {
       // ...stack.sections[object.id],
-      collapsed: collapsedSections[Obj.getDXN(object).toString()],
+      collapsed: collapsedSections[Obj.getURI(object)],
       title:
         (object as any)?.title ??
         // TODO(wittjosiah): `getNode` is not reactive.
-        toLocalizedString(
-          Graph.getNode(graph, Obj.getDXN(object).toString()).pipe(Option.getOrNull)?.properties.label,
-          t,
-        ),
+        toLocalizedString(Graph.getNode(graph, Obj.getURI(object)).pipe(Option.getOrNull)?.properties.label, t),
     } as StackSectionView;
-    return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
+    return { id: Obj.getURI(object), object, metadata, view } satisfies StackSectionItem;
   });
 
   const handleDelete = useCallback(
@@ -82,7 +76,7 @@ export const StackContainer = ({ attendableId, subject: collection }: StackConta
       const index = collection.objects
         .map((object) => object.target)
         .filter(isNonNullable)
-        .findIndex((section) => Obj.getDXN(section).toString() === id);
+        .findIndex((section) => Obj.getURI(section) === id);
       const object = collection.objects[index].target;
       if (Obj.isObject(object)) {
         await invokePromise(SpaceOperation.RemoveObjects, {
@@ -135,7 +129,7 @@ export const StackContainer = ({ attendableId, subject: collection }: StackConta
   );
 
   return (
-    <StackItem.Content toolbar classNames='dx-article overflow-hidden border-l border-r border-subdued-separator'>
+    <StackItem.Content toolbar classNames='dx-document'>
       <Toolbar.Root>
         <Toolbar.IconButton
           icon='ph--plus--regular'
@@ -147,7 +141,7 @@ export const StackContainer = ({ attendableId, subject: collection }: StackConta
       </Toolbar.Root>
       <StackContext.Provider
         value={{
-          attendableId: attendableId!,
+          attendableId,
           onCollapse: handleCollapse,
           onNavigate: handleNavigate,
           onDelete: handleDelete,
@@ -157,7 +151,7 @@ export const StackContainer = ({ attendableId, subject: collection }: StackConta
         <Stack
           orientation='vertical'
           size='intrinsic'
-          id={Obj.getDXN(collection).toString()}
+          id={Obj.getURI(collection)}
           data-testid='main.stack'
           classNames='overflow-y-auto'
         >

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

@@ -4,4 +4,4 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const StackContainer: ComponentType<any> = lazy(() => import('./StackContainer'));
+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,20 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
 import { trim } from '@dxos/util';
 
-export const SECTION_IDENTIFIER = 'org.dxos.type.stack-section';
+export const SECTION_IDENTIFIER = DXN.make('org.dxos.type.stackSection');
 
-export const meta: Plugin.Meta = {
-  id: 'org.dxos.plugin.stack',
+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`
-    Organize and view curated collections of workspace objects in customizable layouts.
-    Group related items together and manage collections with sections and filtering.
+    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'));