@dxos/plugin-stack 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.8.4-main.f9ba587",
+  "version": "0.8.4-main.fffef41",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "type": "module",
   "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"
     },
     "./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"
@@ -35,49 +37,47 @@
   "dependencies": {
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-collapsible": "1.1.3",
-    "effect": "3.16.13",
+    "effect": "3.18.3",
     "node-fetch": "^2.6.0",
-    "react-is": "~18.2.0",
-    "@dxos/app-framework": "0.8.4-main.f9ba587",
-    "@dxos/async": "0.8.4-main.f9ba587",
-    "@dxos/client": "0.8.4-main.f9ba587",
-    "@dxos/echo": "0.8.4-main.f9ba587",
-    "@dxos/echo-schema": "0.8.4-main.f9ba587",
-    "@dxos/invariant": "0.8.4-main.f9ba587",
-    "@dxos/local-storage": "0.8.4-main.f9ba587",
-    "@dxos/plugin-deck": "0.8.4-main.f9ba587",
-    "@dxos/plugin-client": "0.8.4-main.f9ba587",
-    "@dxos/plugin-graph": "0.8.4-main.f9ba587",
-    "@dxos/plugin-space": "0.8.4-main.f9ba587",
-    "@dxos/react-client": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-form": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-attention": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-searchlist": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-stack": "0.8.4-main.f9ba587",
-    "@dxos/schema": "0.8.4-main.f9ba587",
-    "@dxos/util": "0.8.4-main.f9ba587"
+    "react-is": "~19.2.0",
+    "@dxos/app-framework": "0.8.4-main.fffef41",
+    "@dxos/async": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/client": "0.8.4-main.fffef41",
+    "@dxos/echo": "0.8.4-main.fffef41",
+    "@dxos/local-storage": "0.8.4-main.fffef41",
+    "@dxos/plugin-deck": "0.8.4-main.fffef41",
+    "@dxos/plugin-graph": "0.8.4-main.fffef41",
+    "@dxos/plugin-space": "0.8.4-main.fffef41",
+    "@dxos/react-client": "0.8.4-main.fffef41",
+    "@dxos/react-ui-attention": "0.8.4-main.fffef41",
+    "@dxos/plugin-client": "0.8.4-main.fffef41",
+    "@dxos/react-ui-form": "0.8.4-main.fffef41",
+    "@dxos/react-ui-stack": "0.8.4-main.fffef41",
+    "@dxos/react-ui-searchlist": "0.8.4-main.fffef41",
+    "@dxos/schema": "0.8.4-main.fffef41",
+    "@dxos/types": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41"
   },
   "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.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
-    "@dxos/storybook-utils": "0.8.4-main.f9ba587"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41"
   },
   "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.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/StackPlugin.ts

@@ -2,51 +2,50 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 import { type Obj } from '@dxos/echo';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
 import { ReactSurface } from './capabilities';
-import { meta, SECTION_IDENTIFIER } from './meta';
+import { SECTION_IDENTIFIER, 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;
-              }
-            },
+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,
-    }),
-  ]);
+        },
+      }),
+    ],
+  }),
+  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,
+  }),
+]);

package/src/capabilities/react-surface.tsx

@@ -6,29 +6,24 @@ 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 { Collection } from '@dxos/schema';
 
-import { StackMain } from '../components';
-import { STACK_PLUGIN } from '../meta';
+import { StackContainer } from '../components';
+import { meta } from '../meta';
 
 export default () =>
   contributes(
     Capabilities.ReactSurface,
     createSurface({
-      id: `${STACK_PLUGIN}/article`,
+      id: `${meta.id}/article`,
       role: 'article',
-      filter: (data): data is { id?: string; subject: DataType.Collection } =>
-        Obj.instanceOf(DataType.Collection, data.subject),
+      filter: (data): data is { id?: string; subject: Collection.Collection } =>
+        Obj.instanceOf(Collection.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>
-        );
+        return <StackContainer id={id ?? Obj.getDXN(data.subject).toString()} collection={data.subject} />;
       },
     }),
   );

package/src/components/{StackMain.tsx → StackContainer.tsx}

@@ -2,30 +2,21 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Plus } from '@phosphor-icons/react';
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { useCallback, useState } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  createIntent,
-  useAppGraph,
-  useCapabilities,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { fullyQualifiedId, isLiveObject } from '@dxos/client/echo';
+import { Capabilities, LayoutAction, createIntent } from '@dxos/app-framework';
+import { useAppGraph, useCapabilities, useIntentDispatcher } from '@dxos/app-framework/react';
+import { isLiveObject } from '@dxos/client/echo';
 import { Obj } from '@dxos/echo';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { AttentionProvider } from '@dxos/react-ui-attention';
-import { Stack } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { Stack, StackItem } from '@dxos/react-ui-stack';
+import { type Collection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { StackContext } from './StackContext';
-import { StackSection } from './StackSection';
-import { STACK_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import {
   type AddSectionPosition,
   type CollapsedSections,
@@ -34,15 +25,18 @@ import {
   type StackSectionView,
 } from '../types';
 
-type StackMainProps = {
+import { StackContext } from './StackContext';
+import { StackSection } from './StackSection';
+
+type StackContainerProps = {
   id: string;
-  collection: DataType.Collection;
+  collection: Collection.Collection;
 };
 
-const StackMain = ({ id, collection }: StackMainProps) => {
+const StackContainer = ({ id, collection }: StackContainerProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
-  const { t } = useTranslation(STACK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const allMetadata = useCapabilities(Capabilities.Metadata);
   const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
 
@@ -66,13 +60,13 @@ const StackMain = ({ id, collection }: StackMainProps) => {
           ?.metadata as StackSectionMetadata;
         const view = {
           // ...stack.sections[object.id],
-          collapsed: collapsedSections[fullyQualifiedId(object)],
+          collapsed: collapsedSections[Obj.getDXN(object).toString()],
           title:
             (object as any)?.title ??
             // TODO(wittjosiah): `getNode` is not reactive.
-            toLocalizedString(graph.getNode(fullyQualifiedId(object)).pipe(Option.getOrNull)?.properties.label, t),
+            toLocalizedString(graph.getNode(Obj.getDXN(object).toString()).pipe(Option.getOrNull)?.properties.label, t),
         } as StackSectionView;
-        return { id: fullyQualifiedId(object), object, metadata, view } satisfies StackSectionItem;
+        return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
       }) ?? [];
 
   const handleDelete = useCallback(
@@ -80,10 +74,15 @@ const StackMain = ({ id, collection }: StackMainProps) => {
       const index = collection.objects
         .map((object) => object.target)
         .filter(isNonNullable)
-        .findIndex((section) => fullyQualifiedId(section) === id);
+        .findIndex((section) => Obj.getDXN(section).toString() === id);
       const object = collection.objects[index].target;
       if (isLiveObject(object)) {
-        await dispatch(createIntent(SpaceAction.RemoveObjects, { objects: [object], target: collection }));
+        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)];
@@ -98,7 +97,7 @@ const StackMain = ({ id, collection }: StackMainProps) => {
         // TODO(wittjosiah): Use object creation dialog.
         createIntent(LayoutAction.UpdateDialog, {
           part: 'dialog',
-          subject: `${STACK_PLUGIN}/AddSectionDialog`,
+          subject: `${meta.id}/AddSectionDialog`,
           options: {
             blockAlign: 'start',
             props: {
@@ -126,35 +125,48 @@ const StackMain = ({ id, collection }: StackMainProps) => {
   );
 
   const handleAddSection = useCallback(
-    () => dispatch?.(createIntent(SpaceAction.OpenCreateObject, { target: collection, navigable: false })),
+    () =>
+      dispatch?.(
+        createIntent(SpaceAction.OpenCreateObject, {
+          target: collection,
+          navigable: false,
+        }),
+      ),
     [collection, dispatch],
   );
 
   return (
-    <AttentionProvider id={id}>
-      <StackContext.Provider
-        value={{
-          onCollapse: handleCollapse,
-          onNavigate: handleNavigate,
-          onDelete: handleDelete,
-          onAdd: handleAdd,
-        }}
-      >
-        <Stack orientation='vertical' size='intrinsic' id={id} data-testid='main.stack'>
-          {items.map((item) => (
-            <StackSection key={item.id} {...item} />
-          ))}
-        </Stack>
-
-        <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>
+    <StackItem.Content
+      toolbar
+      classNames='container-max-width overflow-hidden border-l border-r border-subduedSeparator'
+    >
+      <Toolbar.Root>
+        <Toolbar.IconButton
+          icon='ph--plus--regular'
+          iconOnly
+          label='Add section'
+          data-testid='stack.addSection'
+          onClick={handleAddSection}
+        />
+      </Toolbar.Root>
+      <AttentionProvider id={id}>
+        <StackContext.Provider
+          value={{
+            onCollapse: handleCollapse,
+            onNavigate: handleNavigate,
+            onDelete: handleDelete,
+            onAdd: handleAdd,
+          }}
+        >
+          <Stack orientation='vertical' size='intrinsic' id={id} data-testid='main.stack' classNames='overflow-y-auto'>
+            {items.map((item) => (
+              <StackSection key={item.id} {...item} />
+            ))}
+          </Stack>
+        </StackContext.Provider>
+      </AttentionProvider>
+    </StackItem.Content>
   );
 };
 
-export default StackMain;
+export default StackContainer;

package/src/components/StackSection.tsx

@@ -5,16 +5,17 @@
 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/react';
+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, textBlockWidth } from '@dxos/react-ui-theme';
+
+import { meta } from '../meta';
+import { type StackSectionItem } from '../types';
 
 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';
 
@@ -26,7 +27,7 @@ export const StackSection = ({
   object,
   metadata: { icon = 'ph--placeholder--regular' },
 }: StackSectionProps) => {
-  const { t } = useTranslation(STACK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
   const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
   const attentionAttrs = useAttentionAttributes(id);

package/src/components/StackSettings.tsx

@@ -5,19 +5,26 @@
 import React from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { STACK_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type StackSettingsProps } from '../types';
 
 export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
-  const { t } = useTranslation(STACK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings separation label')}>
-        <Input.Switch checked={settings.separation} onCheckedChange={(checked) => (settings.separation = !!checked)} />
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('settings separation label')}>
+            <Input.Switch
+              checked={settings.separation}
+              onCheckedChange={(checked) => (settings.separation = !!checked)}
+            />
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/index.ts

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

package/src/meta.ts

@@ -3,16 +3,19 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const STACK_PLUGIN = 'dxos.org/plugin/stack';
 export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
 
 export const meta: PluginMeta = {
-  id: STACK_PLUGIN,
+  id: 'dxos.org/plugin/stack',
   // TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
   //   Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.
   name: 'Collections',
-  description: 'View collections of objects within the deck.',
+  description: trim`
+    Organize and view curated collections of workspace objects in customizable layouts.
+    Group related items together and manage collections with sections and filtering.
+  `,
   icon: 'ph--stack-simple--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',
 };

package/src/translations.ts

@@ -12,6 +12,7 @@ export const translations = [
     'en-US': {
       [meta.id]: {
         'plugin name': 'Stacks',
+        'settings title': 'Stack plugin settings',
         'settings separation label': 'Separate sections',
         'add section beforeAll dialog title': 'Add a section to the start',
         'add section afterAll dialog title': 'Add a section to the end',

package/src/types/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './stack';
-export * from './types';
+export type * from './types';

package/src/types/stack.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo/internal';
 
 // All section metadata needs to be optional/have defaults.
 // Any objects added to the collection will start with the section defaults.

package/src/types/types.ts

@@ -2,19 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps } from '@phosphor-icons/react';
 import { type FC } from 'react';
 
 import { type Obj } from '@dxos/echo';
 import { type Label } from '@dxos/react-ui';
 import { type StackItemSize } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
 export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
 
 export type CollapsedSections = Record<string, boolean>;
 
-export type CollectionItem = DataType.Collection['objects'][number];
+export type CollectionItem = Collection.Collection['objects'][number];
 
 export type StackSectionView = {
   title?: string;
@@ -29,7 +28,7 @@ type StackSectionAction = {
   testId: string;
   type: string | [string, { ns: string }];
   label: string | [string, { ns: string }];
-  icon: FC<IconProps>;
+  icon: FC<{ className?: string; size?: number }>;
 };
 
 export type StackSectionMetadata = {