@dxos/plugin-space 0.6.12-main.f9d0246 → 0.6.12-staging.0b4bb48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-space",
-  "version": "0.6.12-main.f9d0246",
+  "version": "0.6.12-staging.0b4bb48",
   "description": "DXOS Surface plugin for DXOS ECHO Spaces",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,24 +10,21 @@
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "require": "./dist/lib/node/index.cjs",
-        "default": "./dist/lib/node-esm/index.mjs"
+        "default": "./dist/lib/node/index.cjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./meta": {
       "browser": "./dist/lib/browser/meta.mjs",
       "node": {
-        "require": "./dist/lib/node/meta.cjs",
-        "default": "./dist/lib/node-esm/meta.mjs"
+        "default": "./dist/lib/node/meta.cjs"
       },
       "types": "./dist/types/src/meta.d.ts"
     },
     "./types": {
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": {
-        "require": "./dist/lib/node/types/index.cjs",
-        "default": "./dist/lib/node-esm/types/index.mjs"
+        "default": "./dist/lib/node/types/index.cjs"
       },
       "types": "./dist/types/src/types/index.d.ts"
     }
@@ -54,32 +51,28 @@
     "lodash.get": "^4.4.2",
     "react-drag-drop-files": "^2.3.8",
     "react-is": "~18.2.0",
-    "@dxos/app-framework": "0.6.12-main.f9d0246",
-    "@dxos/automerge": "0.6.12-main.f9d0246",
-    "@dxos/client": "0.6.12-main.f9d0246",
-    "@dxos/async": "0.6.12-main.f9d0246",
-    "@dxos/context": "0.6.12-main.f9d0246",
-    "@dxos/display-name": "0.6.12-main.f9d0246",
-    "@dxos/invariant": "0.6.12-main.f9d0246",
-    "@dxos/echo-schema": "0.6.12-main.f9d0246",
-    "@dxos/keys": "0.6.12-main.f9d0246",
-    "@dxos/local-storage": "0.6.12-main.f9d0246",
-    "@dxos/log": "0.6.12-main.f9d0246",
-    "@dxos/plugin-attention": "0.6.12-main.f9d0246",
-    "@dxos/migrations": "0.6.12-main.f9d0246",
-    "@dxos/plugin-client": "0.6.12-main.f9d0246",
-    "@dxos/plugin-graph": "0.6.12-main.f9d0246",
-    "@dxos/plugin-metadata": "0.6.12-main.f9d0246",
-    "@dxos/plugin-observability": "0.6.12-main.f9d0246",
-    "@dxos/plugin-status-bar": "0.6.12-main.f9d0246",
-    "@dxos/plugin-settings": "0.6.12-main.f9d0246",
-    "@dxos/protocols": "0.6.12-main.f9d0246",
-    "@dxos/react-client": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-attention": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-editor": "0.6.12-main.f9d0246",
-    "@dxos/shell": "0.6.12-main.f9d0246",
-    "@dxos/util": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.f9d0246"
+    "@dxos/async": "0.6.12-staging.0b4bb48",
+    "@dxos/app-framework": "0.6.12-staging.0b4bb48",
+    "@dxos/client": "0.6.12-staging.0b4bb48",
+    "@dxos/automerge": "0.6.12-staging.0b4bb48",
+    "@dxos/display-name": "0.6.12-staging.0b4bb48",
+    "@dxos/echo-schema": "0.6.12-staging.0b4bb48",
+    "@dxos/invariant": "0.6.12-staging.0b4bb48",
+    "@dxos/local-storage": "0.6.12-staging.0b4bb48",
+    "@dxos/keys": "0.6.12-staging.0b4bb48",
+    "@dxos/log": "0.6.12-staging.0b4bb48",
+    "@dxos/migrations": "0.6.12-staging.0b4bb48",
+    "@dxos/plugin-attention": "0.6.12-staging.0b4bb48",
+    "@dxos/plugin-client": "0.6.12-staging.0b4bb48",
+    "@dxos/plugin-graph": "0.6.12-staging.0b4bb48",
+    "@dxos/plugin-metadata": "0.6.12-staging.0b4bb48",
+    "@dxos/plugin-observability": "0.6.12-staging.0b4bb48",
+    "@dxos/plugin-settings": "0.6.12-staging.0b4bb48",
+    "@dxos/react-ui-attention": "0.6.12-staging.0b4bb48",
+    "@dxos/react-client": "0.6.12-staging.0b4bb48",
+    "@dxos/shell": "0.6.12-staging.0b4bb48",
+    "@dxos/react-ui-editor": "0.6.12-staging.0b4bb48",
+    "@dxos/util": "0.6.12-staging.0b4bb48"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -89,18 +82,18 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.6.12-main.f9d0246",
-    "@dxos/storybook-utils": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-theme": "0.6.12-main.f9d0246"
+    "vite": "^5.3.4",
+    "@dxos/react-ui": "0.6.12-staging.0b4bb48",
+    "@dxos/react-ui-theme": "0.6.12-staging.0b4bb48",
+    "@dxos/storybook-utils": "0.6.12-staging.0b4bb48"
   },
   "optionalDependencies": {
     "@babel/core": "^7.18.13",
     "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-theme": "0.6.12-main.f9d0246"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.12-staging.0b4bb48",
+    "@dxos/react-ui-theme": "0.6.12-staging.0b4bb48"
   },
   "publishConfig": {
     "access": "public"

package/src/SpacePlugin.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type IconProps, Plus, SignIn, CardsThree, Warning } from '@phosphor-icons/react';
 import { effect, signal } from '@preact/signals-core';
 import React from 'react';
 
@@ -9,45 +10,45 @@ import {
   type IntentDispatcher,
   type IntentPluginProvides,
   LayoutAction,
+  Surface,
   type LocationProvides,
   NavigationAction,
   type Plugin,
   type PluginDefinition,
-  Surface,
-  firstIdInPart,
   openIds,
-  parseGraphPlugin,
+  firstIdInPart,
   parseIntentPlugin,
-  parseMetadataResolverPlugin,
   parseNavigationPlugin,
+  parseMetadataResolverPlugin,
   resolvePlugin,
+  parseGraphPlugin,
 } from '@dxos/app-framework';
 import { EventSubscriptions, type Trigger, type UnsubscribeCallback } from '@dxos/async';
-import { type EchoReactiveObject, type Identifiable, isReactiveObject } from '@dxos/echo-schema';
+import { type Identifiable, isReactiveObject, type EchoReactiveObject } from '@dxos/echo-schema';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { Migrations } from '@dxos/migrations';
 import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
 import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
-import { type Node, createExtension, isGraphNode, memoize, toSignal } from '@dxos/plugin-graph';
+import { createExtension, isGraphNode, memoize, type Node, toSignal } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { type Client, PublicKey } from '@dxos/react-client';
 import {
-  Expando,
-  Filter,
   type PropertiesTypeProps,
   type Space,
-  SpaceState,
   create,
+  Expando,
+  Filter,
   fullyQualifiedId,
   getSpace,
   getTypename,
   isEchoObject,
   isSpace,
   loadObjectReferences,
+  SpaceState,
 } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
-import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
+import { InvitationManager, type InvitationManagerProps, osTranslations, ClipboardProvider } from '@dxos/shell/react';
 import { ComplexMap, nonNullable, reduceGroupBy } from '@dxos/util';
 
 import {
@@ -60,17 +61,15 @@ import {
   MissingObject,
   PopoverRenameObject,
   PopoverRenameSpace,
-  SaveStatus,
   ShareSpaceButton,
   SmallPresence,
   SmallPresenceLive,
   SpacePresence,
   SpaceSettings,
-  SyncStatus,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
 import translations from './translations';
-import { CollectionType, type PluginState, type SpacePluginProvides, type SpaceSettingsProps } from './types';
+import { CollectionType, type SpacePluginProvides, type SpaceSettingsProps, type PluginState } from './types';
 import {
   COMPOSER_SPACE_LOCK,
   SHARED,
@@ -119,9 +118,7 @@ export const SpacePlugin = ({
   firstRun,
   onFirstRun,
 }: SpacePluginOptions = {}): PluginDefinition<SpacePluginProvides> => {
-  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN, {
-    onSpaceCreate: 'dxos.org/plugin/markdown/action/create',
-  });
+  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN);
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
@@ -343,7 +340,8 @@ export const SpacePlugin = ({
         records: {
           [CollectionType.typename]: {
             placeholder: ['unnamed collection label', { ns: SPACE_PLUGIN }],
-            icon: 'ph--cards-three--regular',
+            icon: (props: IconProps) => <CardsThree {...props} />,
+            iconSymbol: 'ph--cards-three--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (collection: CollectionType) =>
               loadObjectReferences(collection, (collection) => [
@@ -443,14 +441,6 @@ export const SpacePlugin = ({
               } else {
                 return <MenuFooter object={data.object} />;
               }
-            case 'status': {
-              return (
-                <>
-                  <SyncStatus />
-                  <SaveStatus />
-                </>
-              );
-            }
             default:
               return null;
           }
@@ -550,7 +540,8 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
-                    icon: 'ph--plus--regular',
+                    icon: (props: IconProps) => <Plus {...props} />,
+                    iconSymbol: 'ph--plus--regular',
                     disposition: 'toolbar',
                     testId: 'spacePlugin.createSpace',
                   },
@@ -570,7 +561,8 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
-                    icon: 'ph--sign-in--regular',
+                    icon: (props: IconProps) => <SignIn {...props} />,
+                    iconSymbol: 'ph--sign-in--regular',
                     testId: 'spacePlugin.joinSpace',
                   },
                 },
@@ -813,15 +805,6 @@ export const SpacePlugin = ({
                 data: { space, id: space.id, activeParts: { main: [space.id] } },
 
                 intents: [
-                  ...(settings.values.onSpaceCreate
-                    ? [
-                        [
-                          { action: settings.values.onSpaceCreate, data: { space } },
-                          { action: SpaceAction.ADD_OBJECT, data: { target: space } },
-                          { action: NavigationAction.EXPOSE },
-                        ],
-                      ]
-                    : []),
                   [
                     {
                       action: ObservabilityAction.SEND_EVENT,
@@ -1037,7 +1020,8 @@ export const SpacePlugin = ({
                             title: translations[0]['en-US'][SPACE_PLUGIN]['space limit label'],
                             description: translations[0]['en-US'][SPACE_PLUGIN]['space limit description'],
                             duration: 5_000,
-                            icon: 'ph--warning--regular',
+                            icon: (props: IconProps) => <Warning {...props} />,
+                            iconSymbol: 'ph--warning--regular',
                             actionLabel: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects label'],
                             actionAlt: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects alt'],
                             // TODO(wittjosiah): Use OS namespace.
@@ -1076,7 +1060,7 @@ export const SpacePlugin = ({
               }
 
               return {
-                data: { id: fullyQualifiedId(object), object, activeParts: { main: [fullyQualifiedId(object)] } },
+                data: { id: object.id, object, activeParts: { main: [fullyQualifiedId(object)] } },
                 intents: [
                   [
                     {
@@ -1131,6 +1115,7 @@ export const SpacePlugin = ({
                       activeParts: {
                         main: deletionData.wasActive,
                         sidebar: deletionData.wasActive,
+                        complementary: deletionData.wasActive,
                       },
                     },
                   });

package/src/components/MenuFooter.tsx

@@ -1,7 +1,6 @@
 //
 // Copyright 2024 DXOS.org
 //
-
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 

package/src/components/SpaceMain/SpaceMain.tsx

@@ -6,14 +6,35 @@ import { Command } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
+import { type Action } from '@dxos/plugin-graph';
 import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Main, useTranslation } from '@dxos/react-ui';
+import { Button, Main, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { getSize, mx, topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { ClipboardProvider } from '@dxos/shell/react';
 
 import { SpaceMembersSection } from './SpaceMembersSection';
 import { SPACE_PLUGIN } from '../../meta';
 
+const _InFlowSpaceActions = ({ actionsMap }: { actionsMap: Record<string, Action> }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  return (
+    <section className='mbe-4 col-start-2 col-end-4 md:col-end-7 grid gap-2 auto-rows-min grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]'>
+      {Object.entries(actionsMap)
+        .filter(([_, { properties }]) => properties?.mainAreaDisposition === 'in-flow')
+        .map(([actionId, { data: invoke, properties }]) => {
+          const Icon = properties?.icon;
+          const label = properties?.label;
+          return (
+            <Button key={actionId} classNames='block text-center plb-2 font-normal'>
+              {Icon && <Icon size={5} className='mli-auto' />}
+              <p>{toLocalizedString(label, t)}</p>
+            </Button>
+          );
+        })}
+    </section>
+  );
+};
+
 const KeyShortcuts = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   return (

package/src/components/SpaceSettings.tsx

@@ -4,17 +4,16 @@
 
 import React from 'react';
 
-import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework';
 import { SettingsValue } from '@dxos/plugin-settings';
-import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Input, useTranslation } from '@dxos/react-ui';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
+import { type SpaceSettingsProps } from '../types';
 
 export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
-  const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
@@ -30,34 +29,6 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
           }
         />
       </SettingsValue>
-
-      <SettingsValue label={t('default on space create label')}>
-        <Select.Root
-          value={settings.onSpaceCreate}
-          onValueChange={(value) => {
-            settings.onSpaceCreate = value;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {plugins.map(
-                  ({
-                    provides: {
-                      space: { onSpaceCreate },
-                    },
-                  }) => (
-                    <Select.Option key={onSpaceCreate.action} value={onSpaceCreate.action}>
-                      {toLocalizedString(onSpaceCreate.label, t)}
-                    </Select.Option>
-                  ),
-                )}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </SettingsValue>
     </>
   );
 };

package/src/components/index.ts

@@ -16,5 +16,3 @@ export * from './ShareSpaceButton';
 export * from './SpaceMain';
 export * from './SpacePresence';
 export * from './SpaceSettings';
-export * from './SaveStatus';
-export * from './SyncStatus';

package/src/translations.ts

@@ -86,8 +86,6 @@ export default [
         'remove deleted objects label': 'Cleanup',
         'remove deleted objects alt': 'Permanently remove deleted objects to free up space.',
         'copy link label': 'Copy link',
-        'default on space create label': 'On space create',
-        'sync status title': 'Sync status',
       },
     },
   },

package/src/types/thread.ts

@@ -34,18 +34,9 @@ export const ActorSchema = S.mutable(
 
 export type ActorType = S.Schema.Type<typeof ActorSchema>;
 
-export enum MessageState {
-  NONE = 0,
-  ARCHIVED = 1,
-  DELETED = 2,
-  SPAM = 3,
-}
-
 export class MessageType extends TypedObject({ typename: 'dxos.org/type/Message', version: '0.1.0' })({
   /** ISO date string when the message was sent. */
   timestamp: S.String,
-  /** Message state. */
-  state: S.optional(S.Enums(MessageState)),
   /** Identity of the message sender. */
   sender: ActorSchema,
   /** Text content of the message. */

package/src/types/types.ts

@@ -10,12 +10,10 @@ import type {
   SettingsProvides,
   SurfaceProvides,
   TranslationsProvides,
-  Plugin,
 } from '@dxos/app-framework';
 import { type Expando } from '@dxos/echo-schema';
 import { type SchemaProvides } from '@dxos/plugin-client';
 import { type PublicKey } from '@dxos/react-client';
-import { type Label } from '@dxos/react-ui';
 import { type ComplexMap } from '@dxos/util';
 
 export const SPACE_DIRECTORY_HANDLE = 'dxos.org/plugin/space/directory';
@@ -55,29 +53,7 @@ export type PluginState = {
   sdkMigrationRunning: Record<string, boolean>;
 };
 
-export type SpaceSettingsProps = {
-  /**
-   * Show closed spaces.
-   */
-  showHidden?: boolean;
-
-  /**
-   * Action to perform when a space is created.
-   */
-  onSpaceCreate?: string;
-};
-
-export type SpaceInitProvides = {
-  space: {
-    onSpaceCreate: {
-      label: Label;
-      action: string;
-    };
-  };
-};
-
-export const parseSpaceInitPlugin = (plugin: Plugin) =>
-  typeof (plugin.provides as any).space?.onSpaceCreate === 'object' ? (plugin as Plugin<SpaceInitProvides>) : undefined;
+export type SpaceSettingsProps = { showHidden?: boolean };
 
 export type SpacePluginProvides = SurfaceProvides &
   IntentResolverProvides &

package/src/util.tsx

@@ -2,6 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+import {
+  CardsThree,
+  Database,
+  PencilSimpleLine,
+  Planet,
+  Plus,
+  Trash,
+  Users,
+  X,
+  ClockCounterClockwise,
+  type IconProps,
+  LockSimpleOpen,
+  LockSimple,
+  Placeholder,
+  Link,
+} from '@phosphor-icons/react';
+import React from 'react';
+
 import { type MetadataResolver, NavigationAction, type IntentDispatcher } from '@dxos/app-framework';
 import {
   type EchoReactiveObject,
@@ -200,7 +218,8 @@ export const constructSpaceNode = ({
       ...partials,
       label: getSpaceDisplayName(space, { personal, namesCache }),
       description: space.state.get() === SpaceState.SPACE_READY && space.properties.description,
-      icon: 'ph--planet--regular',
+      icon: (props: IconProps) => <Planet {...props} />,
+      iconSymbol: 'ph--planet--regular',
       disabled: space.state.get() !== SpaceState.SPACE_READY || hasPendingMigration,
       testId: 'spacePlugin.space',
     },
@@ -224,7 +243,8 @@ export const constructSpaceActionGroups = ({ space, dispatch }: { space: Space;
       data: actionGroupSymbol,
       properties: {
         label: ['create object in space label', { ns: SPACE_PLUGIN }],
-        icon: 'ph--plus--regular',
+        icon: (props: IconProps) => <Plus {...props} />,
+        iconSymbol: 'ph--plus--regular',
         disposition: 'toolbar',
         // TODO(wittjosiah): This is currently a navtree feature. Address this with cmd+k integration.
         // mainAreaDisposition: 'in-flow',
@@ -248,7 +268,8 @@ export const constructSpaceActionGroups = ({ space, dispatch }: { space: Space;
             ]),
           properties: {
             label: ['create collection label', { ns: SPACE_PLUGIN }],
-            icon: 'ph--cards-three--regular',
+            icon: (props: IconProps) => <CardsThree {...props} />,
+            iconSymbol: 'ph--cards-three--regular',
             testId: 'spacePlugin.createCollection',
           },
         },
@@ -284,7 +305,8 @@ export const constructSpaceActions = ({
       },
       properties: {
         label: ['migrate space label', { ns: SPACE_PLUGIN }],
-        icon: 'ph--database--regular',
+        icon: (props: IconProps) => <Database {...props} />,
+        iconSymbol: 'ph--database--regular',
         disposition: 'toolbar',
         mainAreaDisposition: 'in-flow',
         disabled: migrating || Migrations.running(space),
@@ -306,7 +328,8 @@ export const constructSpaceActions = ({
         },
         properties: {
           label: ['share space label', { ns: SPACE_PLUGIN }],
-          icon: 'ph--users--regular',
+          icon: (props: IconProps) => <Users {...props} />,
+          iconSymbol: 'ph--users--regular',
           disabled: locked,
           keyBinding: {
             macos: 'meta+.',
@@ -327,7 +350,10 @@ export const constructSpaceActions = ({
         },
         properties: {
           label: [locked ? 'unlock space label' : 'lock space label', { ns: SPACE_PLUGIN }],
-          icon: locked ? 'ph--lock-simple-open--regular' : 'ph--lock-simple--regular',
+          icon: locked
+            ? (props: IconProps) => <LockSimpleOpen {...props} />
+            : (props: IconProps) => <LockSimple {...props} />,
+          iconSymbol: locked ? 'ph--lock-simple-open--regular' : 'ph--lock-simple--regular',
         },
       },
       {
@@ -338,7 +364,8 @@ export const constructSpaceActions = ({
         },
         properties: {
           label: ['rename space label', { ns: SPACE_PLUGIN }],
-          icon: 'ph--pencil-simple-line--regular',
+          icon: (props: IconProps) => <PencilSimpleLine {...props} />,
+          iconSymbol: 'ph--pencil-simple-line--regular',
           keyBinding: {
             macos: 'shift+F6',
             windows: 'shift+F6',
@@ -358,7 +385,8 @@ export const constructSpaceActions = ({
       },
       properties: {
         label: ['close space label', { ns: SPACE_PLUGIN }],
-        icon: 'ph--x--regular',
+        icon: (props: IconProps) => <X {...props} />,
+        iconSymbol: 'ph--x--regular',
         mainAreaDisposition: 'menu',
         disabled: personal,
       },
@@ -374,7 +402,8 @@ export const constructSpaceActions = ({
       },
       properties: {
         label: ['open space label', { ns: SPACE_PLUGIN }],
-        icon: 'ph--clock-counter-clockwise--regular',
+        icon: (props: IconProps) => <ClockCounterClockwise {...props} />,
+        iconSymbol: 'ph--clock-counter-clockwise--regular',
         disposition: 'toolbar',
         mainAreaDisposition: 'in-flow',
       },
@@ -417,7 +446,8 @@ export const createObjectNode = ({
       label: metadata.label?.(object) ||
         object.name ||
         metadata.placeholder || ['unnamed object label', { ns: SPACE_PLUGIN }],
-      icon: metadata.icon ?? 'ph--placeholder--regular',
+      icon: metadata.icon ?? (() => <Placeholder />),
+      iconSymbol: metadata.iconSymbol ?? 'ph--placeholder--regular',
       testId: 'spacePlugin.object',
       persistenceClass: 'echo',
       persistenceKey: space?.id,
@@ -445,7 +475,8 @@ export const constructObjectActionGroups = ({
       data: actionGroupSymbol,
       properties: {
         label: ['create object in collection label', { ns: SPACE_PLUGIN }],
-        icon: 'ph--plus--regular',
+        icon: (props: IconProps) => <Plus {...props} />,
+        iconSymbol: 'ph--plus--regular',
         disposition: 'toolbar',
         // TODO(wittjosiah): This is currently a navtree feature. Address this with cmd+k integration.
         // mainAreaDisposition: 'in-flow',
@@ -469,7 +500,8 @@ export const constructObjectActionGroups = ({
             ]),
           properties: {
             label: ['create collection label', { ns: SPACE_PLUGIN }],
-            icon: 'ph--cards-three--regular',
+            icon: (props: IconProps) => <CardsThree {...props} />,
+            iconSymbol: 'ph--cards-three--regular',
             testId: 'spacePlugin.createCollection',
           },
         },
@@ -504,7 +536,8 @@ export const constructObjectActions = ({
           object instanceof CollectionType ? 'rename collection label' : 'rename object label',
           { ns: SPACE_PLUGIN },
         ],
-        icon: 'ph--pencil-simple-line--regular',
+        icon: (props: IconProps) => <PencilSimpleLine {...props} />,
+        iconSymbol: 'ph--pencil-simple-line--regular',
         // TODO(wittjosiah): Doesn't work.
         // keyBinding: 'shift+F6',
         testId: 'spacePlugin.renameObject',
@@ -530,7 +563,8 @@ export const constructObjectActions = ({
           object instanceof CollectionType ? 'delete collection label' : 'delete object label',
           { ns: SPACE_PLUGIN },
         ],
-        icon: 'ph--trash--regular',
+        icon: (props: IconProps) => <Trash {...props} />,
+        iconSymbol: 'ph--trash--regular',
         keyBinding: object instanceof CollectionType ? undefined : 'shift+meta+Backspace',
         testId: 'spacePlugin.deleteObject',
       },
@@ -544,7 +578,8 @@ export const constructObjectActions = ({
       },
       properties: {
         label: ['copy link label', { ns: SPACE_PLUGIN }],
-        icon: 'ph--link--regular',
+        icon: (props: IconProps) => <Link {...props} />,
+        iconSymbol: 'ph--link--regular',
         testId: 'spacePlugin.copyLink',
       },
     },