@dxos/plugin-stack 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
+  "version": "0.14.0",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,19 +10,21 @@
   },
   "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "imports": {
     "#capabilities": {
       "source": {
         "workerd": "./src/capabilities/gen/workerd.ts",
         "node": "./src/capabilities/gen/node.ts",
-        "default": "./src/capabilities/index.ts"
+        "tauri": "./src/capabilities/gen/tauri.ts",
+        "browser": "./src/capabilities/gen/browser.ts"
       },
       "types": "./dist/types/src/capabilities/index.d.ts",
       "workerd": "./dist/lib/capabilities.workerd.mjs",
       "node": "./dist/lib/capabilities.node.mjs",
-      "default": "./dist/lib/capabilities.mjs"
+      "tauri": "./dist/lib/capabilities.tauri.mjs",
+      "browser": "./dist/lib/capabilities.browser.mjs"
     },
     "#components": {
       "source": "./src/components/index.ts",
@@ -102,44 +104,44 @@
     "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@effect/atom-react": "4.0.0-rc.108",
-    "effect": "4.0.0-rc.108",
-    "@dxos/app-framework": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/app-toolkit": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/echo": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-space": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/keys": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-attention": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-menu": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-dnd": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-mosaic": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/util": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "@effect/atom-react": "4.0.0",
+    "effect": "4.0.0",
+    "@dxos/app-framework": "0.14.0",
+    "@dxos/app-toolkit": "0.14.0",
+    "@dxos/keys": "0.14.0",
+    "@dxos/echo": "0.14.0",
+    "@dxos/plugin-space": "0.14.0",
+    "@dxos/react-ui-attention": "0.14.0",
+    "@dxos/react-ui-dnd": "0.14.0",
+    "@dxos/react-ui-menu": "0.14.0",
+    "@dxos/react-ui-mosaic": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
-    "@storybook/react-vite": "^10.5.8",
+    "@storybook/react-vite": "^10.6.0",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.2.1",
-    "@dxos/echo-react": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-markdown": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-tldraw": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-client": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-client": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/random": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-testing": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-theme": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-illustrator": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "vite": "^8.2.2",
+    "@dxos/echo-react": "0.14.0",
+    "@dxos/plugin-client": "0.14.0",
+    "@dxos/plugin-markdown": "0.14.0",
+    "@dxos/plugin-testing": "0.14.0",
+    "@dxos/plugin-tldraw": "0.14.0",
+    "@dxos/react-client": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/ui-theme": "0.14.0",
+    "@dxos/random": "0.14.0",
+    "@dxos/plugin-illustrator": "0.14.0"
   },
   "peerDependencies": {
-    "@effect/atom-react": "4.0.0-rc.108",
-    "effect": "4.0.0-rc.108",
+    "@effect/atom-react": "4.0.0",
+    "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-theme": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "@dxos/react-ui": "^0.14.0",
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/gen/browser.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'browser' condition.
+
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.role.article'],
+});
+
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
+
+export const Translations = AppCapability.translations(translations);

package/src/capabilities/gen/node.ts

@@ -8,7 +8,7 @@ import * as AppCapability from '@dxos/app-toolkit/AppCapability';
 
 import { translations } from '#translations';
 
-export const Schema = AppCapability.schema(() => import('../schema'));
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
 
 export const Translations = AppCapability.translations(translations);
 

package/src/capabilities/gen/tauri.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'tauri' condition.
+
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.role.article'],
+});
+
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
+
+export const Translations = AppCapability.translations(translations);

package/src/capabilities/gen/workerd.ts

@@ -8,7 +8,7 @@ import * as AppCapability from '@dxos/app-toolkit/AppCapability';
 
 import { translations } from '#translations';
 
-export const Schema = AppCapability.schema(() => import('../schema'));
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
 
 export const Translations = AppCapability.translations(translations);
 

package/src/capabilities/index.ts

@@ -16,8 +16,8 @@ export const PluginAsset = AppCapability.pluginAsset({
   content: pluginSpec,
   mimeType: 'application/x-mdl',
 });
-export const ReactSurface = AppCapability.surface(() => import('./react-surface'), {
+export const ReactSurface = AppCapability.surface(() => import('./react-surface.ts'), {
   roles: ['org.dxos.role.article'],
 });
-export const Schema = AppCapability.schema(() => import('./schema'));
+export const Schema = AppCapability.schema(() => import('./schema.ts'));
 export const Translations = AppCapability.translations(translations);

package/src/capabilities/react-surface.ts

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { Collection } from '@dxos/echo';
 
 import { StackArticle } from '#containers';

package/src/components/Stack/Stack.tsx

@@ -12,25 +12,24 @@ import React, {
   useState,
 } from 'react';
 
-import { Surface } from '@dxos/app-framework/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
+import * as AttentionSigil from '@dxos/app-toolkit/AttentionSigil';
 import * as GraphPath from '@dxos/app-toolkit/GraphPath';
-import { AppSurface, AttentionSigilButton } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
-import {
-  DropdownMenu,
-  Icon,
-  ScrollArea,
-  ScrollAreaRootProps,
-  type ThemedClassName,
-  useTranslation,
-} from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as Menu from '@dxos/react-ui/Menu';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import type * as Util from '@dxos/react-ui/Util';
 
 import { meta } from '#meta';
 
-import { StackContext, useStack, useStackContext } from './StackContext';
+import { StackContext, useStack, useStackContext } from './StackContext.ts';
 
 //
 // Types
@@ -119,9 +118,7 @@ StackRoot.displayName = 'Stack.Root';
 // Content
 //
 
-type StackContentProps = ThemedClassName<
-  ComponentPropsWithoutRef<'div'> & Pick<ScrollAreaRootProps, 'centered' | 'thin' | 'padding'>
->;
+type StackContentProps = Util.ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 const StackContent = forwardRef<HTMLDivElement, StackContentProps>(({ children, ...props }, forwardedRef) => {
   const { eventHandler, viewport } = useStackContext('Stack.Content');
@@ -140,7 +137,7 @@ StackContent.displayName = 'Stack.Content';
 // Viewport
 //
 
-type StackViewportProps = ThemedClassName<PropsWithChildren>;
+type StackViewportProps = Util.ThemedClassName<PropsWithChildren>;
 
 const StackViewport = forwardRef<HTMLDivElement, StackViewportProps>(
   ({ classNames, children }, forwardedRef: ForwardedRef<HTMLDivElement>) => {
@@ -185,7 +182,7 @@ type StackSectionProps = MosaicTileProps<StackSectionItem>;
 // Inline grip glyph for the drag preview. The native drag image does not rasterize external SVG sprite
 // `<use>` icons (e.g. `@dxos/react-ui` `Icon`), so the preview uses plain inline SVG circles instead.
 const DragHandleGlyph = () => (
-  <svg width={10} height={16} viewBox='0 0 10 16' aria-hidden className='shrink-0 text-description'>
+  <svg width={10} height={16} viewBox='0 0 10 16' aria-hidden className='shrink-0 text-fg-muted'>
     {[3, 8, 13].flatMap((cy) =>
       [2.5, 7.5].map((cx) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.1} fill='currentColor' />),
     )}
@@ -194,7 +191,7 @@ const DragHandleGlyph = () => (
 
 const StackSection = ({ data, ...tileProps }: StackSectionProps) => {
   const { id, object } = data;
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const { attendableId: parentAttendableId, collapsed, onAdd, onMoveUp, onMoveDown, onCollapse, onDelete } = useStack();
   const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
   const attendableId = GraphPath.getCollectionObjectPath(parentAttendableId, object.id);
@@ -205,51 +202,60 @@ const StackSection = ({ data, ...tileProps }: StackSectionProps) => {
   const title = Obj.getLabel(object, { fallback: 'typename' }) ?? t('untitled-section.title');
 
   const rail = (
-    <div className='grid grid-rows-[min-content_1fr]'>
+    <Layout.Grid rows={['min', 'fill']}>
       <div className='p-1 dx-toolbar-surface'>
-        <DropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen}>
-          <DropdownMenu.Trigger asChild>
-            <AttentionSigilButton size='md' attendableId={attendableId}>
-              <Icon icon={icon} classNames='transition-opacity' />
-            </AttentionSigilButton>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content>
-              <DropdownMenu.Viewport>
-                {isCollapsed ? (
-                  <DropdownMenu.Item onClick={() => onCollapse(id, false)} data-testid='section.expand'>
-                    <Icon icon='ph--arrows-out-line-vertical--regular' />
-                    <span className='ms-2 grow'>{t('expand.label')}</span>
-                  </DropdownMenu.Item>
-                ) : (
-                  <DropdownMenu.Item onClick={() => onCollapse(id, true)} data-testid='section.collapse'>
-                    <Icon icon='ph--arrows-in-line-vertical--regular' />
-                    <span className='ms-2 grow'>{t('collapse.label')}</span>
-                  </DropdownMenu.Item>
-                )}
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item onClick={() => onAdd(id)} data-testid='section.add'>
-                  <Icon icon='ph--plus--regular' />
-                  <span className='ms-2 grow'>{t('add-section.label')}</span>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item onClick={() => onMoveUp(id)} data-testid='section.move-up'>
-                  <Icon icon='ph--arrow-line-up--regular' />
-                  <span className='ms-2 grow'>{t('move-up.label')}</span>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item onClick={() => onMoveDown(id)} data-testid='section.move-down'>
-                  <Icon icon='ph--arrow-line-down--regular' />
-                  <span className='ms-2 grow'>{t('move-down.label')}</span>
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>
-                  <Icon icon='ph--trash--regular' />
-                  <span className='ms-2 grow'>{t('remove-section.label')}</span>
-                </DropdownMenu.Item>
-              </DropdownMenu.Viewport>
-              <DropdownMenu.Arrow />
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
+        <Menu.Root open={optionsMenuOpen} onOpenChange={({ open }) => setOptionsMenuOpen(open)}>
+          <Menu.Trigger asChild>
+            <AttentionSigil.Button size='md' attendableId={attendableId}>
+              <Icon.Icon icon={icon} classNames='transition-opacity' />
+            </AttentionSigil.Button>
+          </Menu.Trigger>
+          <Menu.Content>
+            {isCollapsed ? (
+              <Menu.Item
+                item={{
+                  value: 'section.expand',
+                  label: t('expand.label'),
+                  icon: 'ph--arrows-out-line-vertical--regular',
+                }}
+                onClick={() => onCollapse(id, false)}
+                data-testid='section.expand'
+              />
+            ) : (
+              <Menu.Item
+                item={{
+                  value: 'section.collapse',
+                  label: t('collapse.label'),
+                  icon: 'ph--arrows-in-line-vertical--regular',
+                }}
+                onClick={() => onCollapse(id, true)}
+                data-testid='section.collapse'
+              />
+            )}
+            <Menu.Separator />
+            <Menu.Item
+              item={{ value: 'section.add', label: t('add-section.label'), icon: 'ph--plus--regular' }}
+              onClick={() => onAdd(id)}
+              data-testid='section.add'
+            />
+            <Menu.Item
+              item={{ value: 'section.move-up', label: t('move-up.label'), icon: 'ph--arrow-line-up--regular' }}
+              onClick={() => onMoveUp(id)}
+              data-testid='section.move-up'
+            />
+            <Menu.Item
+              item={{ value: 'section.move-down', label: t('move-down.label'), icon: 'ph--arrow-line-down--regular' }}
+              onClick={() => onMoveDown(id)}
+              data-testid='section.move-down'
+            />
+            <Menu.Separator />
+            <Menu.Item
+              item={{ value: 'section.remove', label: t('remove-section.label'), icon: 'ph--trash--regular' }}
+              onClick={() => onDelete(id)}
+              data-testid='section.remove'
+            />
+          </Menu.Content>
+        </Menu.Root>
       </div>
       <div className='p-1'>
         {/* Inline glyph (not a sprite `Icon`) so the handle stays visible in the tile's native drag image. */}
@@ -261,24 +267,26 @@ const StackSection = ({ data, ...tileProps }: StackSectionProps) => {
           <DragHandleGlyph />
         </Mosaic.DragHandle>
       </div>
-    </div>
+    </Layout.Grid>
   );
 
   return (
     <Mosaic.Tile
       {...tileProps}
       data={data}
-      classNames='grid grid-cols-[var(--dx-rail-action)_1fr] dx-attention-surface border border-subdued-separator'
+      classNames='grid grid-cols-[var(--dx-rail-action)_1fr] dx-attention-surface border border-separator-subtle'
     >
-      <div className='border-e border-subdued-separator'>
-        <div className='sticky top-0 flex flex-col items-center'>{rail}</div>
+      <div className='border-e border-separator-subtle'>
+        <Layout.Flex column align='center' classNames='sticky top-0'>
+          {rail}
+        </Layout.Flex>
       </div>
       <div {...attentionAttrs} className='min-w-0'>
         <span className='sr-only'>{title}</span>
         {isCollapsed ? (
-          <div className='h-(--dx-toolbar-size) flex p-1'>
+          <Layout.Flex classNames='h-(--dx-toolbar-size) p-1'>
             <h2 className='flex items-center font-medium'>{title}</h2>
-          </div>
+          </Layout.Flex>
         ) : (
           <Surface.Surface type={AppSurface.Section} data={surfaceData} limit={1} />
         )}

package/src/components/Stack/StackContext.ts

@@ -4,7 +4,7 @@
 
 import { createContext, useContext } from 'react';
 
-import { type StackContextType, type StackContextValue } from './Stack';
+import { type StackContextType, type StackContextValue } from './Stack.tsx';
 
 // Kept out of `Stack.tsx`: react-refresh only fast-refreshes a module whose exports are all
 // components, so a context and its hook exported beside them force a full page reload on every edit.

package/src/components/Stack/index.ts

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

package/src/components/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Stack';
+export * from './Stack/index.ts';

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

@@ -9,7 +9,7 @@ import React from 'react';
 import * as Capability from '@dxos/app-framework/Capability';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { Collection, Filter, Ref } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
@@ -18,7 +18,7 @@ import * as IllustratorPlugin from '@dxos/plugin-illustrator/IllustratorPlugin';
 import * as Markdown from '@dxos/plugin-markdown/Markdown';
 import { MarkdownPlugin } from '@dxos/plugin-markdown/testing';
 import { SpacePlugin } from '@dxos/plugin-space/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import * as StorybookPlugin from '@dxos/plugin-testing/StorybookPlugin';
 import * as Tldraw from '@dxos/plugin-tldraw/Tldraw';
 import * as TldrawModel from '@dxos/plugin-tldraw/TldrawModel';
@@ -30,7 +30,7 @@ import { Loading, withLayout } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { StackArticle, type StackArticleProps } from './StackArticle';
+import { StackArticle, type StackArticleProps } from './StackArticle.tsx';
 
 // A minimal sketch (tldraw `tldraw.com/2`) snapshot, used as a test image.
 const SKETCH_CONTENT = new TldrawModel.RecordBuilder()
@@ -60,7 +60,7 @@ const meta: Meta<typeof StackArticle> = {
     withPluginManager({
       capabilities: [Capability.contribute(AppCapabilities.Translations, translations)],
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         ClientPlugin.make({
           types: [Collection.Collection, Markdown.Document, Drawing.Drawing, Drawing.Canvas],
           onClientInitialized: ({ client }) =>

package/src/containers/StackArticle/StackArticle.tsx

@@ -3,17 +3,20 @@
 //
 
 import { useAtomValue } from '@effect/atom-react/Hooks';
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 import React, { useCallback, useId, useMemo, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { type Collection, Obj } from '@dxos/echo';
 import * as SpaceOperation from '@dxos/plugin-space/SpaceOperation';
-import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { type DndContainerHandler } from '@dxos/react-ui-dnd';
-import { Menu, createMenuAction } from '@dxos/react-ui-menu';
+import { ActionMenu, createMenuAction } from '@dxos/react-ui-menu';
 import { Mosaic } from '@dxos/react-ui-mosaic';
+import * as Button from '@dxos/react-ui/Button';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { arrayMove, isNonNullable } from '@dxos/util';
 
 import { Stack, type StackSectionItem } from '#components';
@@ -22,8 +25,8 @@ import { meta } from '#meta';
 export type StackArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;
 
 export const StackArticle = ({ attendableId, subject: collection }: StackArticleProps) => {
-  const { invokePromise } = useOperationInvoker();
-  const { t } = useTranslation(meta.profile.key);
+  const { invokePromise } = Hooks.useOperationInvoker();
+  const { t } = UiHooks.useTranslation(meta.profile.key);
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
 
   const collectionObjects = useAtomValue(createCollectionObjects(collection));
@@ -177,10 +180,9 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
 
   return (
     <Panel.Root>
-      <Panel.Toolbar classNames='dx-toolbar-surface'>
+      <Panel.Header classNames='dx-toolbar-surface'>
         <Toolbar.Root classNames='dx-document'>
-          <Toolbar.IconButton
-            square
+          <Button.Root
             icon='ph--plus--regular'
             iconOnly
             label={t('add-section.label')}
@@ -188,21 +190,17 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
             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>
+          <ActionMenu actions={optionsMenu}>
+            <Button.Root
+              icon='ph--dots-three-vertical--regular'
+              iconOnly
+              label={t('options.label')}
+              data-testid='stack.options'
+            />
+          </ActionMenu>
         </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content>
+      </Panel.Header>
+      <Panel.Body>
         <Stack.Root
           id={Obj.getURI(collection)}
           attendableId={attendableId}
@@ -214,13 +212,13 @@ export const StackArticle = ({ attendableId, subject: collection }: StackArticle
           onMoveDown={handleMoveDown}
           onDelete={handleDelete}
         >
-          <Stack.Content centered padding data-testid='main.stack'>
+          <Stack.Content 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.Body>
     </Panel.Root>
   );
 };

package/src/containers/StackArticle/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { StackArticle as default } from './StackArticle';
+export { StackArticle as default } from './StackArticle.tsx';

package/src/containers/index.ts

@@ -4,4 +4,4 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const StackArticle: ComponentType<any> = lazy(() => import('./StackArticle'));
+export const StackArticle: ComponentType<any> = lazy(() => import('./StackArticle/index.ts'));

package/src/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * as StackPlugin from './StackPlugin';
-export * from '#meta';
+export * as StackPlugin from './StackPlugin.ts';
 export * from '#types';

package/src/meta.ts

@@ -5,7 +5,7 @@
 import * as Plugin from '@dxos/app-framework/Plugin';
 import { DXN } from '@dxos/keys';
 
-import config from '../dx.config';
+import config from '../dx.config.ts';
 
 export const SECTION_IDENTIFIER = DXN.make('org.dxos.type.stackSection');
 

package/src/translations.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Resource } from '@dxos/react-ui';
+import type * as Theme from '@dxos/react-ui/Theme';
 
 import { meta } from '#meta';
 
@@ -36,4 +36,4 @@ export const translations = [
       },
     },
   },
-] as const satisfies Resource[];
+] as const satisfies Theme.Resource[];

package/src/types/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * as Stack from './Stack';
-export * as StackEvents from './StackEvents';
+export * as Stack from './Stack.ts';
+export * as StackEvents from './StackEvents.ts';