@dxos/plugin-stack 0.8.3 → 0.8.4-main.1c7ec43d41

package/package.json

@@ -1,83 +1,97 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1c7ec43d41",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#meta": "./src/meta.ts",
+    "#translations": "./src/translations.ts",
+    "#types": "./src/types/index.ts"
+  },
   "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"
     },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.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"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-collapsible": "1.1.3",
-    "effect": "3.14.21",
+    "effect": "3.20.0",
     "node-fetch": "^2.6.0",
-    "react-is": "~18.2.0",
-    "@dxos/echo": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/client": "0.8.3",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/local-storage": "0.8.3",
-    "@dxos/plugin-client": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/plugin-deck": "0.8.3",
-    "@dxos/plugin-graph": "0.8.3",
-    "@dxos/plugin-space": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/react-ui-form": "0.8.3",
-    "@dxos/react-ui-searchlist": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/schema": "0.8.3"
+    "react-is": "~19.2.0",
+    "@dxos/app-framework": "0.8.4-main.1c7ec43d41",
+    "@dxos/app-toolkit": "0.8.4-main.1c7ec43d41",
+    "@dxos/async": "0.8.4-main.1c7ec43d41",
+    "@dxos/client": "0.8.4-main.1c7ec43d41",
+    "@dxos/echo": "0.8.4-main.1c7ec43d41",
+    "@dxos/echo-atom": "0.8.4-main.1c7ec43d41",
+    "@dxos/invariant": "0.8.4-main.1c7ec43d41",
+    "@dxos/plugin-client": "0.8.4-main.1c7ec43d41",
+    "@dxos/plugin-deck": "0.8.4-main.1c7ec43d41",
+    "@dxos/react-client": "0.8.4-main.1c7ec43d41",
+    "@dxos/operation": "0.8.4-main.1c7ec43d41",
+    "@dxos/plugin-graph": "0.8.4-main.1c7ec43d41",
+    "@dxos/react-ui-attention": "0.8.4-main.1c7ec43d41",
+    "@dxos/react-ui-form": "0.8.4-main.1c7ec43d41",
+    "@dxos/react-ui-list": "0.8.4-main.1c7ec43d41",
+    "@dxos/react-ui-stack": "0.8.4-main.1c7ec43d41",
+    "@dxos/schema": "0.8.4-main.1c7ec43d41",
+    "@dxos/plugin-space": "0.8.4-main.1c7ec43d41",
+    "@dxos/util": "0.8.4-main.1c7ec43d41",
+    "@dxos/types": "0.8.4-main.1c7ec43d41"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.1c7ec43d41",
+    "@dxos/react-ui": "0.8.4-main.1c7ec43d41",
+    "@dxos/storybook-utils": "0.8.4-main.1c7ec43d41",
+    "@dxos/ui-theme": "0.8.4-main.1c7ec43d41"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@effect-atom/atom-react": "^0.5.0",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1c7ec43d41",
+    "@dxos/ui-theme": "0.8.4-main.1c7ec43d41"
   },
   "publishConfig": {
     "access": "public"

package/src/StackPlugin.ts

@@ -2,51 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
-import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 
-import { ReactSurface } from './capabilities';
-import { meta, SECTION_IDENTIFIER } 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';
 
-export const StackPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () => [
-        contributes(Capabilities.Metadata, {
-          id: SECTION_IDENTIFIER,
-          metadata: {
-            parse: (section: { object: Obj.Any }, 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;
-              }
-            },
-          },
-        }),
-      ],
-    }),
-    defineModule({
-      id: `${meta.id}/module/schema`,
-      activatesOn: ClientEvents.SetupSchema,
-      activate: () => contributes(ClientCapabilities.Schema, [StackViewType]),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-  ]);
+export const StackPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addSchemaModule({ schema: [StackViewType] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);
+
+export default StackPlugin;

package/src/capabilities/index.ts

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

package/src/capabilities/react-surface.tsx

@@ -2,33 +2,27 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Collection } from '@dxos/echo';
 
-import { StackMain } from '../components';
-import { STACK_PLUGIN } from '../meta';
+import { StackContainer } from '#containers';
 
-export default () =>
-  contributes(
-    Capabilities.ReactSurface,
-    createSurface({
-      id: `${STACK_PLUGIN}/article`,
-      role: 'article',
-      filter: (data): data is { id?: string; subject: DataType.Collection } =>
-        Obj.instanceOf(DataType.Collection, data.subject),
-      component: ({ data }) => {
-        // This allows the id to be overridden by the surface for situations where the id of the collection
-        // is not the same as the id of what is being represented (e.g., a space with a root collection).
-        const id = typeof data.id === 'string' ? data.id : undefined;
-        return (
-          <div role='none' className='overflow-auto' style={{ contain: 'layout' }}>
-            <StackMain id={id ?? fullyQualifiedId(data.subject)} collection={data.subject} />
-          </div>
-        );
-      },
-    }),
-  );
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(
+      Capabilities.ReactSurface,
+      Surface.create({
+        id: 'article',
+        filter: AppSurface.object(AppSurface.Article, Collection.Collection),
+        component: ({ role, data }) => {
+          return <StackContainer attendableId={data.attendableId} role={role} subject={data.subject} />;
+        },
+      }),
+    ),
+  ),
+);

package/src/components/{StackContext.tsx → StackContext/StackContext.tsx}

@@ -4,9 +4,10 @@
 
 import { createContext, useContext } from 'react';
 
-import { type AddSectionPosition } from '../types';
+import { type AddSectionPosition } from '#types';
 
 export type StackContextValue = {
+  attendableId: string;
   onCollapse: (id: string, collapsed: boolean) => void;
   onNavigate: (id: string) => Promise<void>;
   onDelete: (id: string) => Promise<void>;
@@ -14,6 +15,7 @@ export type StackContextValue = {
 };
 
 export const StackContext = createContext<StackContextValue>({
+  attendableId: '',
   onCollapse: () => {},
   onNavigate: async () => {},
   onDelete: async () => {},

package/src/components/StackContext/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './StackContext';

package/src/components/{StackSection.tsx → StackSection/StackSection.tsx}

@@ -5,18 +5,20 @@
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import React, { useMemo, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework';
-import { DropdownMenu, Icon, useTranslation, IconButton } from '@dxos/react-ui';
+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 { mx, getSize, textBlockWidth } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/ui-theme';
 
+import { meta } from '#meta';
+import { type StackSectionItem } from '#types';
+
+import { useStack } from '../StackContext';
 import { CaretDownUp } from './CaretDownUp';
-import { useStack } from './StackContext';
-import { STACK_PLUGIN } from '../meta';
-import { type StackSectionItem } from '../types';
 
-const sectionActionDimensions = 'p-1 mlb-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';
+const sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';
 
 export type StackSectionProps = StackSectionItem;
 
@@ -26,16 +28,18 @@ export const StackSection = ({
   object,
   metadata: { icon = 'ph--placeholder--regular' },
 }: StackSectionProps) => {
-  const { t } = useTranslation(STACK_PLUGIN);
-  const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
+  const { t } = useTranslation(meta.id);
+  const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();
   const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const attentionAttrs = useAttentionAttributes(id);
+  const attendableId = `${parentAttendableId}/${object.id}`;
+  const attentionAttrs = useAttentionAttributes(attendableId);
   const stackItem = useMemo(() => ({ id }), [id]);
+  const data = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);
 
   return (
     <CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>
       <StackItem.Root item={stackItem} role='section' {...attentionAttrs}>
-        <StackItem.Heading classNames='attention-surface'>
+        <StackItem.Heading classNames='dx-attention-surface'>
           <span className='sr-only'>{view.title}</span>
           <StackItem.HeadingStickyContent>
             <DropdownMenu.Root
@@ -46,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>
@@ -54,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='mis-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='mis-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='mis-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='mis-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='mis-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 />
@@ -87,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}
                 />
@@ -97,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}
@@ -106,11 +110,11 @@ export const StackSection = ({
           </StackItem.HeadingStickyContent>
         </StackItem.Heading>
         <CollapsiblePrimitive.Content>
-          <Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
+          <Surface.Surface type={AppSurface.Section} data={data} limit={1} placeholder={<></>} />
         </CollapsiblePrimitive.Content>
         {view.collapsed && (
-          <StackItem.Content classNames='attention-surface'>
-            <h2 className={mx('flex items-center p-4 font-medium', textBlockWidth)}>{view.title}</h2>
+          <StackItem.Content classNames='dx-attention-surface'>
+            <h2 className={mx('flex items-center p-4 font-medium')}>{view.title}</h2>
           </StackItem.Content>
         )}
       </StackItem.Root>

package/src/components/StackSection/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './StackSection';

package/src/components/StackSettings/StackSettings.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Input, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { type StackSettingsProps } from '#types';
+
+export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <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/components/StackSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './StackSettings';

package/src/components/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export const StackMain = lazy(() => import('./StackMain'));
-
+export * from './StackContext';
+export * from './StackSection';
 export * from './StackSettings';