@dxos/plugin-stack 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.8.4-main.69d29f4",
+  "version": "0.8.4-main.6fa680abb7",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,29 +39,32 @@
     "src"
   ],
   "dependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-collapsible": "1.1.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "node-fetch": "^2.6.0",
     "react-is": "~19.2.0",
-    "@dxos/app-framework": "0.8.4-main.69d29f4",
-    "@dxos/async": "0.8.4-main.69d29f4",
-    "@dxos/echo": "0.8.4-main.69d29f4",
-    "@dxos/client": "0.8.4-main.69d29f4",
-    "@dxos/invariant": "0.8.4-main.69d29f4",
-    "@dxos/operation": "0.8.4-main.69d29f4",
-    "@dxos/plugin-client": "0.8.4-main.69d29f4",
-    "@dxos/plugin-deck": "0.8.4-main.69d29f4",
-    "@dxos/plugin-graph": "0.8.4-main.69d29f4",
-    "@dxos/plugin-space": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-attention": "0.8.4-main.69d29f4",
-    "@dxos/react-client": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-form": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-searchlist": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-stack": "0.8.4-main.69d29f4",
-    "@dxos/schema": "0.8.4-main.69d29f4",
-    "@dxos/types": "0.8.4-main.69d29f4",
-    "@dxos/util": "0.8.4-main.69d29f4"
+    "@dxos/async": "0.8.4-main.6fa680abb7",
+    "@dxos/app-framework": "0.8.4-main.6fa680abb7",
+    "@dxos/client": "0.8.4-main.6fa680abb7",
+    "@dxos/echo": "0.8.4-main.6fa680abb7",
+    "@dxos/echo-atom": "0.8.4-main.6fa680abb7",
+    "@dxos/invariant": "0.8.4-main.6fa680abb7",
+    "@dxos/operation": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-deck": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-client": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-graph": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-space": "0.8.4-main.6fa680abb7",
+    "@dxos/react-client": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-form": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-searchlist": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-attention": "0.8.4-main.6fa680abb7",
+    "@dxos/schema": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-stack": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7",
+    "@dxos/types": "0.8.4-main.6fa680abb7",
+    "@dxos/app-toolkit": "0.8.4-main.6fa680abb7"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -69,17 +72,18 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/storybook-utils": "0.8.4-main.69d29f4",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "vite": "^7.1.11",
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4",
-    "@dxos/react-ui": "0.8.4-main.69d29f4"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

package/src/StackPlugin.ts

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { type Obj } from '@dxos/echo';
 
 import { ReactSurface } from './capabilities';
@@ -11,8 +12,7 @@ import { translations } from './translations';
 import { StackViewType } from './types';
 
 export const StackPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addMetadataModule({
     metadata: {
       id: SECTION_IDENTIFIER,
       metadata: {
@@ -29,7 +29,8 @@ export const StackPlugin = Plugin.define(meta).pipe(
       },
     },
   }),
-  Common.Plugin.addSchemaModule({ schema: [StackViewType] }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addSchemaModule({ schema: [StackViewType] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.make,
 );

package/src/capabilities/react-surface/react-surface.tsx

@@ -5,27 +5,25 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
-import { Collection } from '@dxos/schema';
+import { Collection } from '@dxos/echo';
 
-import { StackContainer } from '../../components';
+import { StackContainer } from '../../containers';
 import { meta } from '../../meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(
-      Common.Capability.ReactSurface,
-      Common.createSurface({
-        id: `${meta.id}/article`,
+      Capabilities.ReactSurface,
+      Surface.create({
+        id: `${meta.id}.article`,
         role: 'article',
-        filter: (data): data is { id?: string; subject: Collection.Collection } =>
-          Obj.instanceOf(Collection.Collection, data.subject),
+        filter: (data): data is { attendableId: string; subject: Collection.Collection } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Collection.Collection, data.subject),
         component: ({ role, 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 <StackContainer id={id ?? Obj.getDXN(data.subject).toString()} role={role} subject={data.subject} />;
+          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,19 +5,19 @@
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import React, { useMemo, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/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 { 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 { useStack } from '../StackContext';
 
-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;
 
@@ -28,15 +28,17 @@ export const StackSection = ({
   metadata: { icon = 'ph--placeholder--regular' },
 }: StackSectionProps) => {
   const { t } = useTranslation(meta.id);
-  const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
+  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
@@ -56,27 +58,27 @@ export const StackSection = ({
                     {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>
+                        <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>
+                      <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>
+                      <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>
+                      <span className='ms-2 grow'>{t('remove section label')}</span>
                     </DropdownMenu.Item>
                   </DropdownMenu.Viewport>
                   <DropdownMenu.Arrow />
@@ -107,10 +109,10 @@ export const StackSection = ({
           </StackItem.HeadingStickyContent>
         </StackItem.Heading>
         <CollapsiblePrimitive.Content>
-          <Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
+          <Surface.Surface role='section' data={data} limit={1} placeholder={<></>} />
         </CollapsiblePrimitive.Content>
         {view.collapsed && (
-          <StackItem.Content classNames='attention-surface'>
+          <StackItem.Content classNames='dx-attention-surface'>
             <h2 className={mx('flex items-center p-4 font-medium', textBlockWidth)}>{view.title}</h2>
           </StackItem.Content>
         )}

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,30 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Input, useTranslation } from '@dxos/react-ui';
+import { Settings } 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 (
+    <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>
+  );
+};

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 StackContainer = lazy(() => import('./StackContainer'));
-
+export * from './StackContext';
+export * from './StackSection';
 export * from './StackSettings';

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

@@ -2,42 +2,52 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import * as Option from 'effect/Option';
 import React, { useCallback, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
+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 { AtomObj } from '@dxos/echo-atom';
 import { Graph } from '@dxos/plugin-graph';
 import { SpaceOperation } from '@dxos/plugin-space/types';
 import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { AttentionProvider } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { type Collection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-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';
-
-import { StackContext } from './StackContext';
-import { StackSection } from './StackSection';
+} from '../../types';
+
+const collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>
+  Atom.make((get) => {
+    const snapshot = get(AtomObj.make(collection));
+    return (
+      snapshot.objects
+        // TODO(wittjosiah): Why isn't this type inferred correctly?
+        .map((ref: Ref.Ref<Obj.Unknown>) => get(AtomObj.makeWithReactive(ref)))
+        .filter(isNonNullable)
+    );
+  }),
+);
 
-type StackContainerProps = SurfaceComponentProps<Collection.Collection> & {
-  id: string;
-};
+type StackContainerProps = SurfaceComponentProps<Collection.Collection>;
 
-const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
+export const StackContainer = ({ attendableId, subject: collection }: StackContainerProps) => {
   const { invokePromise } = useOperationInvoker();
   const { graph } = useAppGraph();
   const { t } = useTranslation(meta.id);
-  const allMetadata = useCapabilities(Common.Capability.Metadata);
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
   const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
 
   // TODO(wittjosiah): Re-implement stack views with relations.
@@ -49,28 +59,23 @@ const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
   //   }
   // }, [collection, stack]);
 
-  const items =
-    collection.objects
-      // TODO(wittjosiah): Should the database handle this differently?
-      // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?
-      .map((object) => object.target)
-      .filter(isNonNullable)
-      .map((object) => {
-        const metadata = allMetadata.find((m) => m.id === (Obj.getTypename(object) ?? 'never'))
-          ?.metadata as StackSectionMetadata;
-        const view = {
-          // ...stack.sections[object.id],
-          collapsed: collapsedSections[Obj.getDXN(object).toString()],
-          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,
-            ),
-        } as StackSectionView;
-        return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
-      }) ?? [];
+  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 view = {
+      // ...stack.sections[object.id],
+      collapsed: collapsedSections[Obj.getDXN(object).toString()],
+      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,
+        ),
+    } as StackSectionView;
+    return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
+  });
 
   const handleDelete = useCallback(
     async (id: string) => {
@@ -95,8 +100,8 @@ const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
   const handleAdd = useCallback(
     async (id: string, position: AddSectionPosition) => {
       // TODO(wittjosiah): Use object creation dialog.
-      await invokePromise(Common.LayoutOperation.UpdateDialog, {
-        subject: `${meta.id}/AddSectionDialog`,
+      await invokePromise(LayoutOperation.UpdateDialog, {
+        subject: `${meta.id}.AddSectionDialog`,
         blockAlign: 'start',
         props: {
           path: id,
@@ -110,7 +115,7 @@ const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
 
   const handleNavigate = useCallback(
     async (id: string) => {
-      await invokePromise(Common.LayoutOperation.Open, { subject: [id] });
+      await invokePromise(LayoutOperation.Open, { subject: [id] });
     },
     [invokePromise],
   );
@@ -130,10 +135,7 @@ const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
   );
 
   return (
-    <StackItem.Content
-      toolbar
-      classNames='container-max-width overflow-hidden border-l border-r border-subduedSeparator'
-    >
+    <StackItem.Content toolbar classNames='dx-article overflow-hidden border-l border-r border-subdued-separator'>
       <Toolbar.Root>
         <Toolbar.IconButton
           icon='ph--plus--regular'
@@ -143,24 +145,27 @@ const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
           onClick={handleAddSection}
         />
       </Toolbar.Root>
-      <AttentionProvider id={id}>
-        <StackContext.Provider
-          value={{
-            onCollapse: handleCollapse,
-            onNavigate: handleNavigate,
-            onDelete: handleDelete,
-            onAdd: handleAdd,
-          }}
+      <StackContext.Provider
+        value={{
+          attendableId: attendableId!,
+          onCollapse: handleCollapse,
+          onNavigate: handleNavigate,
+          onDelete: handleDelete,
+          onAdd: handleAdd,
+        }}
+      >
+        <Stack
+          orientation='vertical'
+          size='intrinsic'
+          id={Obj.getDXN(collection).toString()}
+          data-testid='main.stack'
+          classNames='overflow-y-auto'
         >
-          <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>
+          {items.map((item) => (
+            <StackSection key={item.id} {...item} />
+          ))}
+        </Stack>
+      </StackContext.Provider>
     </StackItem.Content>
   );
 };
-
-export default StackContainer;

package/src/containers/StackContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StackContainer } from './StackContainer';
+
+export default StackContainer;

package/src/containers/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const StackContainer: ComponentType<any> = lazy(() => import('./StackContainer'));

package/src/meta.ts

@@ -5,10 +5,10 @@
 import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
+export const SECTION_IDENTIFIER = 'org.dxos.type.stack-section';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/stack',
+  id: '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',

package/src/types/stack.ts

@@ -23,7 +23,7 @@ export const StackViewType = Schema.Struct({
   sections: Schema.Record({ key: Schema.String, value: SectionSchema }),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/StackView',
+    typename: 'org.dxos.type.stack-view',
     version: '0.1.0',
   }),
 );

package/src/types/types.ts

@@ -5,9 +5,9 @@
 import { type FC } from 'react';
 
 import { type Obj } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
 import { type Label } from '@dxos/react-ui';
 import { type StackItemSize } from '@dxos/react-ui-stack';
-import { type Collection } from '@dxos/schema';
 
 export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';