@dxos/plugin-space 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/src/capabilities/react-surface.tsx

@@ -5,15 +5,15 @@
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 import React, { type ComponentProps, useCallback } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface, useAtomCapability, useOperationInvoker, useSettingsState } from '@dxos/app-framework/ui';
 import { AppSurface, useActiveSpace, useTypeOptions } from '@dxos/app-toolkit/ui';
-import { Database, Obj, type Ref } from '@dxos/echo';
-import { Collection, type View } from '@dxos/echo';
+import { Collection, Database, Obj } from '@dxos/echo';
 import { findAnnotation } from '@dxos/effect';
-import { type Space, SpaceState, getSpace, isSpace, useSpace, useSpaces } from '@dxos/react-client/echo';
+import { type Space, SpaceState, getSpace, isSpace, useSpaces } from '@dxos/react-client/echo';
 import { Input } from '@dxos/react-ui';
 import { type FormFieldComponentProps, SelectField } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
@@ -25,6 +25,7 @@ import {
   CollectionSection,
   CreateObjectDialog,
   CreateSpaceDialog,
+  ImportSpaceDialog,
   InlineSyncStatus,
   JoinDialog,
   MembersContainer,
@@ -56,6 +57,7 @@ import {
 import {
   CREATE_OBJECT_DIALOG,
   CREATE_SPACE_DIALOG,
+  IMPORT_SPACE_DIALOG,
   JOIN_DIALOG,
   OBJECT_RENAME_POPOVER,
   SPACE_RENAME_POPOVER,
@@ -153,29 +155,34 @@ export default Capability.makeModule(
       Surface.create({
         id: 'selected-objects',
         role: 'article',
-        filter: (
-          data,
-        ): data is { companionTo: Obj.OfShape<{ view: Ref.Ref<View.View> }>; subject: 'selected-objects' } => {
+        filter: (data): data is { companionTo: Obj.Unknown; subject: 'selected-objects' } => {
           if (data.subject !== 'selected-objects' || !Obj.isObject(data.companionTo)) {
             return false;
           }
 
-          // TODO(burdon): Check companionTo.view.target is valid.
           const schema = Obj.getSchema(data.companionTo);
-          return Option.fromNullable(schema).pipe(
-            Option.flatMap((schema) => ViewAnnotation.get(schema)),
-            Option.getOrElse(() => false),
-          );
+          const path = schema ? Option.getOrElse(ViewAnnotation.get(schema), () => [] as readonly string[]) : [];
+          const viewTarget = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.companionTo, path) : undefined;
+          return !!viewTarget;
         },
         // TODO(burdon): Replace with mosaic.
-        component: ({ data, ref }) => (
-          <ObjectCardStack
-            key={Obj.getDXN(data.companionTo).toString()}
-            objectId={Obj.getDXN(data.companionTo).toString()}
-            view={data.companionTo.view.target!}
-            ref={ref}
-          />
-        ),
+        component: ({ data, ref }) => {
+          const schema = Obj.getSchema(data.companionTo);
+          const path = schema ? Option.getOrElse(ViewAnnotation.get(schema), () => [] as readonly string[]) : [];
+          const view = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.companionTo, path) : undefined;
+          if (!view) {
+            return null;
+          }
+
+          return (
+            <ObjectCardStack
+              key={Obj.getDXN(data.companionTo).toString()}
+              objectId={Obj.getDXN(data.companionTo).toString()}
+              view={view}
+              ref={ref}
+            />
+          );
+        },
       }),
       Surface.create({
         id: JOIN_DIALOG,
@@ -187,6 +194,11 @@ export default Capability.makeModule(
         filter: AppSurface.component(AppSurface.Dialog, CREATE_SPACE_DIALOG),
         component: () => <CreateSpaceDialog />,
       }),
+      Surface.create({
+        id: IMPORT_SPACE_DIALOG,
+        filter: AppSurface.component(AppSurface.Dialog, IMPORT_SPACE_DIALOG),
+        component: () => <ImportSpaceDialog />,
+      }),
       Surface.create({
         id: CREATE_OBJECT_DIALOG,
         filter: AppSurface.component<ComponentProps<typeof CreateObjectDialog>>(
@@ -198,14 +210,19 @@ export default Capability.makeModule(
       Surface.create({
         id: 'create-initial-space-form-[hue]',
         role: 'form-input',
-        filter: (data): data is { prop: string; schema: Schema.Schema<any> } => {
+        filter: (data): data is { prop: string; schema: Schema.Schema<any>; fieldPropertyAst?: SchemaAST.AST } => {
           const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, HueAnnotationId);
           return !!annotation;
         },
-        component: ({ data: _, ...inputProps }) => {
-          const { label, readonly, type, getValue, onValueChange } = inputProps as any as FormFieldComponentProps;
-          const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange]);
-          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange]);
+        component: ({ data, ...inputProps }) => {
+          const ast = data.fieldPropertyAst;
+          if (!ast) {
+            return null;
+          }
+
+          const { label, readonly, getValue, onValueChange } = inputProps as any as FormFieldComponentProps;
+          const handleChange = useCallback((nextHue: string) => onValueChange(ast, nextHue), [ast, onValueChange]);
+          const handleReset = useCallback(() => onValueChange(ast, undefined), [ast, onValueChange]);
           return (
             <Input.Root>
               <Input.Label>{label}</Input.Label>
@@ -217,14 +234,19 @@ export default Capability.makeModule(
       Surface.create({
         id: 'create-initial-space-form-[icon]',
         role: 'form-input',
-        filter: (data): data is { prop: string; schema: Schema.Schema<any> } => {
+        filter: (data): data is { prop: string; schema: Schema.Schema<any>; fieldPropertyAst?: SchemaAST.AST } => {
           const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, IconAnnotationId);
           return !!annotation;
         },
-        component: ({ data: _, ...inputProps }) => {
-          const { label, readonly, type, getValue, onValueChange } = inputProps as any as FormFieldComponentProps;
-          const handleChange = useCallback((nextIcon: string) => onValueChange(type, nextIcon), [onValueChange]);
-          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange]);
+        component: ({ data, ...inputProps }) => {
+          const ast = data.fieldPropertyAst;
+          if (!ast) {
+            return null;
+          }
+
+          const { label, readonly, getValue, onValueChange } = inputProps as any as FormFieldComponentProps;
+          const handleChange = useCallback((nextIcon: string) => onValueChange(ast, nextIcon), [ast, onValueChange]);
+          const handleReset = useCallback(() => onValueChange(ast, undefined), [ast, onValueChange]);
           return (
             <Input.Root>
               <Input.Label>{label}</Input.Label>
@@ -247,6 +269,7 @@ export default Capability.makeModule(
           prop: string;
           schema: Schema.Schema.Any;
           target: Database.Database | Collection.Collection | undefined;
+          fieldPropertyAst?: SchemaAST.AST;
         } => {
           if (data.prop !== 'typename') {
             return false;
@@ -255,12 +278,16 @@ export default Capability.makeModule(
           const annotation = findAnnotation((data.schema as Schema.Schema.All).ast, TypeInputOptionsAnnotationId);
           return !!annotation;
         },
-        component: ({ data: { schema, target }, ...inputProps }) => {
-          const props = inputProps as any as FormFieldComponentProps;
+        component: ({ data: { schema, target, fieldPropertyAst }, ...inputProps }) => {
+          const ast = fieldPropertyAst;
+          if (!ast) {
+            return null;
+          }
+
+          const props = { ...inputProps, type: ast } as any as FormFieldComponentProps;
           const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
-          const space = useSpace(db?.spaceId);
           const annotation = findAnnotation<TypeInputOptions>(schema.ast, TypeInputOptionsAnnotationId)!;
-          const options = useTypeOptions({ space, annotation });
+          const options = useTypeOptions({ db, annotation });
 
           return <SelectField {...props} options={options} />;
         },
@@ -268,19 +295,21 @@ export default Capability.makeModule(
       Surface.create({
         id: 'object-properties',
         role: 'object-properties',
-        filter: (data): data is { subject: { view: Ref.Ref<View.View> } } => {
+        filter: (data): data is { subject: Obj.Unknown } => {
           if (!Obj.isObject(data.subject)) {
             return false;
           }
 
           const schema = Obj.getSchema(data.subject);
-          return Option.fromNullable(schema).pipe(
-            Option.flatMap((schema) => ViewAnnotation.get(schema)),
-            Option.getOrElse(() => false),
-          );
+          const path = schema ? Option.getOrElse(ViewAnnotation.get(schema), () => [] as readonly string[]) : [];
+          const viewTarget = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.subject, path) : undefined;
+          return !!viewTarget;
         },
         component: ({ data }) => {
-          const view = data.subject.view.target;
+          const schema = Obj.getSchema(data.subject);
+          const path = schema ? Option.getOrElse(ViewAnnotation.get(schema), () => [] as readonly string[]) : [];
+          const view = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.subject, path) : undefined;
+
           if (!view) {
             return null;
           }

package/src/capabilities/repair.ts

@@ -33,7 +33,7 @@ const removeQueryCollections = async (space: Space) => {
     return;
   }
 
-  Obj.change(rootCollection, (rootCollection) => {
+  Obj.update(rootCollection, (rootCollection) => {
     rootCollection.objects = objects
       .filter((object) => Obj.getTypename(object) !== 'org.dxos.type.queryCollection')
       .map((object) => Ref.make(object));

package/src/capabilities/spaces-ready.ts

@@ -15,13 +15,14 @@ import {
 } from '@dxos/app-toolkit';
 import { SubscriptionList } from '@dxos/async';
 import { Filter, Obj } from '@dxos/echo';
+import { SPACE_ID_LENGTH, parseId } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { AttentionCapabilities } from '@dxos/plugin-attention/types';
-import { ClientCapabilities } from '@dxos/plugin-client/types';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { ClientCapabilities } from '@dxos/plugin-client';
 import { Graph } from '@dxos/plugin-graph';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { PublicKey } from '@dxos/react-client';
-import { type Space, SPACE_ID_LENGTH, SpaceState, parseId } from '@dxos/react-client/echo';
+import { type Space, SpaceState } from '@dxos/react-client/echo';
 import { Expando } from '@dxos/schema';
 import { ComplexMap, reduceGroupBy } from '@dxos/util';
 

package/src/capabilities/state.ts

@@ -44,7 +44,7 @@ export default Capability.makeModule(
     const updateNavigableCollections = () => {
       const enabled =
         manager.getEnabled().includes('org.dxos.plugin.stack') ||
-        manager.getEnabled().includes('org.dxos.plugin.simple-layout');
+        manager.getEnabled().includes('org.dxos.plugin.simpleLayout');
       const current = registry.get(ephemeralAtom);
       if (enabled !== current.navigableCollections) {
         registry.update(ephemeralAtom, (c) => ({ ...c, navigableCollections: enabled }));

package/src/capabilities/undo-mappings.ts

@@ -39,7 +39,6 @@ export default Capability.makeModule(
             objects: output.objects,
             parentCollection: output.parentCollection,
             indices: output.indices,
-            nestedObjectsList: output.nestedObjectsList,
             wasActive: output.wasActive,
           }),
           message: (input, _output) => {

package/src/{cli/commands → commands}/database/add.ts

@@ -8,28 +8,21 @@ import * as Prompt from '@effect/cli/Prompt';
 import * as Console from 'effect/Console';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
-import type * as Schema from 'effect/Schema';
 
 // eslint-disable-next-line unused-imports/no-unused-imports
 import { type Capability, Plugin } from '@dxos/app-framework';
-import { AppActivationEvents, AppCapabilities } from '@dxos/app-toolkit';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 import { CommandConfig, Common, flushAndSync, print, spaceLayer } from '@dxos/cli-util';
 import { SpaceProperties } from '@dxos/client/echo';
-import { Database, Filter, Obj, Type } from '@dxos/echo';
-import { Collection } from '@dxos/echo';
-import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
 // eslint-disable-next-line unused-imports/no-unused-imports
-import type { Operation } from '@dxos/operation';
+import type { Operation } from '@dxos/compute';
+import { Collection, Database, Filter, Obj, Type } from '@dxos/echo';
+import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
 
-import { type CreateObject } from '#types';
+import { SpaceCapabilities } from '#types';
 
 import { printObject } from './util';
 
-export type Metadata = {
-  createObject: CreateObject;
-  inputSchema?: Schema.Schema.AnyNoContext;
-};
-
 export const add = Command.make(
   'add',
   {
@@ -42,13 +35,13 @@ export const add = Command.make(
       const manager = yield* Plugin.Service;
       const { db } = yield* Database.Service;
 
-      yield* manager.activate(AppActivationEvents.SetupMetadata);
+      yield* manager.activate(AppActivationEvents.SetupSchema);
 
       const resolve = (typename: string) => {
-        const metadata = manager.capabilities
-          .getAll(AppCapabilities.Metadata)
-          .find(({ id }) => id === typename)?.metadata;
-        return metadata?.createObject ? (metadata as Metadata) : undefined;
+        const entry = manager.capabilities
+          .getAll(SpaceCapabilities.CreateObjectEntry)
+          .find(({ id }) => id === typename);
+        return entry ?? undefined;
       };
 
       const [properties] = yield* Database.runQuery(Filter.type(SpaceProperties));
@@ -85,7 +78,9 @@ export const add = Command.make(
 /**
  * Prompts for typename selection if not provided.
  */
-const selectTypename = Effect.fn(function* (resolve: (typename: string) => Metadata | undefined) {
+const selectTypename = Effect.fn(function* (
+  resolve: (typename: string) => SpaceCapabilities.CreateObjectEntry | undefined,
+) {
   const schemas = yield* Database.runSchemaQuery({
     location: ['database', 'runtime'],
     includeSystem: false,

package/src/{cli/commands → commands}/database/stats.ts

@@ -11,8 +11,7 @@ import * as Function from 'effect/Function';
 import * as Record from 'effect/Record';
 
 import { CommandConfig, Common, printList, spaceLayer } from '@dxos/cli-util';
-import { Obj } from '@dxos/echo';
-import { Database, Filter, Query } from '@dxos/echo';
+import { Database, Filter, Obj, Query } from '@dxos/echo';
 
 import { printStats } from './util';
 

package/src/{cli/commands → commands}/queue/query.ts

@@ -10,8 +10,7 @@ import * as Schema from 'effect/Schema';
 
 import { CommandConfig, printList } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
-import { type Queue } from '@dxos/client/echo';
-import { DXN } from '@dxos/keys';
+import { DXN, type SpaceId } from '@dxos/keys';
 
 import { printQueueObject } from './util';
 
@@ -31,14 +30,24 @@ export const query = Command.make(
   Effect.fnUntraced(function* ({ dxn }) {
     const { json } = yield* CommandConfig;
     const client = yield* ClientService;
-    const queue = (yield* Effect.promise(() => client.graph.createRefResolver({}).resolve(dxn))) as Queue<any>;
-    const objects = yield* Effect.promise(() => queue.queryObjects());
+    const parts = dxn.asQueueDXN();
+    if (!parts) {
+      yield* Console.error(`Not a queue DXN: ${dxn.toString()}`);
+      return;
+    }
+    const space = client.spaces.get(parts.spaceId as SpaceId);
+    if (!space) {
+      yield* Console.error(`Space not found: ${parts.spaceId}`);
+      return;
+    }
+    // CLI works at the raw queue layer to inspect any queue by DXN.
+    const objects = (yield* Effect.promise(() => space.queues.get(dxn).queryObjects())) ?? [];
 
     if (json) {
       yield* Console.log(JSON.stringify(objects, null, 2));
     } else {
       // TODO(wittjosiah): Interactive table of results.
-      const formatted = objects.map(printQueueObject);
+      const formatted = objects.map((obj) => printQueueObject(obj as any));
       yield* Console.log(printList(formatted));
     }
   }),

package/src/{cli/commands → commands}/space/create/create.ts

@@ -22,7 +22,7 @@ export const handler = Effect.fn(function* ({ name }: { name: Option.Option<stri
   yield* Effect.tryPromise(() => space.waitUntilReady());
 
   if (Option.isSome(name)) {
-    Obj.change(space.properties, (obj) => {
+    Obj.update(space.properties, (obj) => {
       obj.name = Option.getOrUndefined(name);
     });
   }

package/src/{cli/commands → commands}/space/list/list.test.ts

@@ -32,6 +32,6 @@ describe('spaces list', () => {
       const logs = logger.logs;
       expect(logs).toHaveLength(1);
       const formattedSpaces = TestConsole.parseJson(logs[0]);
-      expect(formattedSpaces).toHaveLength(2);
+      expect(formattedSpaces).toHaveLength(1);
     }).pipe(Effect.provide(TestLayer), Effect.scoped, runAndForwardErrors));
 });

package/src/components/AwaitingObject/AwaitingObject.tsx

@@ -7,9 +7,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { useLayout } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
+import { Filter, Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/react-client/echo';
 import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,13 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Obj } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
+import { type Collection, type Database, Obj } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
-import { type Space, type SpaceId } from '@dxos/react-client/echo';
+import { type SpaceId } from '@dxos/keys';
+import { type Space } from '@dxos/react-client/echo';
 import { toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { Form, omitId } from '@dxos/react-ui-form';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
@@ -16,7 +15,7 @@ import { type MaybePromise } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '#hooks';
 import { meta } from '#meta';
-import { type CreateObject } from '#types';
+import { type SpaceCapabilities } from '#types';
 
 import { getSpaceDisplayName } from '../../util';
 
@@ -27,11 +26,7 @@ export type CreateObjectOption = {
   icon?: string;
 };
 
-export type Metadata = {
-  createObject: CreateObject;
-  inputSchema?: Schema.Schema.AnyNoContext;
-  icon?: string;
-};
+export type Metadata = SpaceCapabilities.CreateObjectEntry;
 
 export type CreateObjectPanelProps = {
   options: CreateObjectOption[];
@@ -76,7 +71,7 @@ export const CreateObjectPanel = ({
   const handleSelectOption = useCallback(
     async (id: string) => {
       const metadata = resolve?.(id);
-      if (metadata && !metadata.inputSchema) {
+      if (metadata && !metadata.inputSchema && !metadata.customPanel) {
         await onCreateObject?.({ metadata });
       } else {
         onTypenameChange?.(id);
@@ -91,16 +86,27 @@ export const CreateObjectPanel = ({
   );
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
-  // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
+  // TODO(wittjosiah): Extends and use react-ui-form to handle variants.
+
   if (!metadata) {
     return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
   }
 
-  // TODO(burdon): Remove.
   if (!target) {
     return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
   }
 
+  if (metadata.customPanel) {
+    const CustomPanel = metadata.customPanel;
+    return (
+      <CustomPanel
+        target={target}
+        initialFormValues={initialFormValues}
+        onCreateObject={(data) => handleCreateObject(data)}
+      />
+    );
+  }
+
   if (metadata.inputSchema) {
     return (
       <Form.Root

package/src/components/SpaceSettings/SpaceSettings.stories.tsx

@@ -6,7 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { SpaceSettings } from './SpaceSettings';
 
 const meta = {

package/src/components/SyncStatus/save-tracker.ts

@@ -4,8 +4,9 @@
 
 import { type CleanupFn } from '@dxos/async';
 import { type Client } from '@dxos/client';
-import { type Space, type SpaceId } from '@dxos/client/echo';
+import { type Space } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
+import { type SpaceId } from '@dxos/keys';
 
 export const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
   const CleanupFns: Record<SpaceId, CleanupFn> = {};

package/src/constants.ts

@@ -6,6 +6,7 @@ import { meta } from '#meta';
 
 export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
 export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
+export const IMPORT_SPACE_DIALOG = `${meta.id}.ImportSpaceDialog`;
 export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
 export const OBJECT_RENAME_POPOVER = `${meta.id}.ObjectRenamePopover`;
 export const SPACE_RENAME_POPOVER = `${meta.id}.SpaceRenamePopover`;

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Option from 'effect/Option';
 import React, { useCallback, useMemo } from 'react';
 
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
+import { Annotation, type Collection, Obj } from '@dxos/echo';
 import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui';
 import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
@@ -17,21 +17,12 @@ import { getStyles } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-/**
- * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
- */
-const useMetadataResolver = () => {
-  const allMetadata = useCapabilities(AppCapabilities.Metadata);
-  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
-};
-
 /**
  * Article view for collections.
  */
 export const CollectionArticle = ({ subject, attendableId }: AppSurface.ObjectArticleProps<Collection.Collection>) => {
   const { t } = useTranslation(meta.id);
-  const resolveMetadata = useMetadataResolver();
-  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata, attendableId);
+  const { items, handleSearch } = useCollectionItems(subject, attendableId);
 
   return (
     <SearchPanel onSearch={handleSearch}>
@@ -83,7 +74,7 @@ const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
           label={label}
           icon={item.icon}
           iconOnly
-          iconClassNames={styles?.surfaceText}
+          iconClassNames={styles?.foreground}
         />
         <Card.Title>{label}</Card.Title>
         <Card.Menu />
@@ -92,16 +83,10 @@ const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
   );
 };
 
-type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
-
 /**
  * Combined hook to get collection items with search/filter support.
  */
-const useCollectionItems = (
-  collection: Collection.Collection,
-  resolveMetadata: MetadataResolver,
-  attendableId?: string,
-) => {
+const useCollectionItems = (collection: Collection.Collection, attendableId?: string) => {
   const objects = useMemo(
     () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
     [collection.objects],
@@ -110,19 +95,19 @@ const useCollectionItems = (
   const items = useMemo(
     () =>
       objects.map((obj) => {
-        const typename = Obj.getTypename(obj);
-        const metadata = typename ? resolveMetadata(typename) : {};
+        const schema = Obj.getSchema(obj);
+        const iconAnnotation = schema ? Option.getOrUndefined(Annotation.IconAnnotation.get(schema)) : undefined;
         const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
 
         return {
           id: Obj.getDXN(obj).toString(),
           object: obj,
           targetPath,
-          icon: metadata.icon ?? 'ph--placeholder--regular',
-          iconHue: metadata.iconHue,
+          icon: iconAnnotation?.icon ?? 'ph--placeholder--regular',
+          iconHue: iconAnnotation?.hue,
         } satisfies ObjectItem;
       }),
-    [objects, resolveMetadata, attendableId],
+    [objects, attendableId],
   );
 
   const { results, handleSearch } = useSearchListResults({

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -14,8 +14,7 @@ import { Dialog } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
-
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 const mockOptions: CreateObjectOption[] = [
   { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
@@ -60,9 +59,9 @@ const mockInputSchema = Schema.Struct({
 });
 
 const mockMetadata: Metadata = {
+  id: 'org.dxos.type.document',
   createObject: () => Effect.succeed({ id: 'mock-id', subject: [], object: {} as any }),
   inputSchema: mockInputSchema,
-  icon: 'ph--file-text--regular',
 };
 
 const meta = {