@dxos/plugin-registry 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c351d160a8",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,15 +14,15 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     },
     "./cli": {
+      "source": "./src/cli/index.ts",
       "browser": "./dist/lib/browser/cli/index.mjs",
       "node": "./dist/lib/node-esm/cli/index.mjs",
-      "source": "./src/cli/index.ts",
       "types": "./dist/types/src/cli/index.d.ts"
     }
   },
@@ -35,44 +35,46 @@
     "src"
   ],
   "dependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/cli": "0.72.1",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/client-protocol": "0.8.4-main.bc674ce",
-    "@dxos/cli-util": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/plugin-observability": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-form": "0.8.4-main.bc674ce",
-    "@dxos/effect": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/cli": "0.73.2",
+    "yaml": "^2.7.0",
+    "@dxos/app-toolkit": "0.8.4-main.c351d160a8",
+    "@dxos/app-framework": "0.8.4-main.c351d160a8",
+    "@dxos/client-protocol": "0.8.4-main.c351d160a8",
+    "@dxos/echo": "0.8.4-main.c351d160a8",
+    "@dxos/effect": "0.8.4-main.c351d160a8",
+    "@dxos/invariant": "0.8.4-main.c351d160a8",
+    "@dxos/cli-util": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-graph": "0.8.4-main.c351d160a8",
+    "@dxos/operation": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-observability": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-form": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-stack": "0.8.4-main.c351d160a8",
+    "@dxos/util": "0.8.4-main.c351d160a8"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8",
+    "@dxos/storybook-utils": "0.8.4-main.c351d160a8"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "publishConfig": {
     "access": "public"

package/src/RegistryPlugin.tsx

@@ -2,16 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 
 import { AppGraphBuilder, OperationResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
 
 export const RegistryPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Common.Plugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.make,
 );

package/src/capabilities/app-graph-builder/app-graph-builder.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, SettingsOperation } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities, SettingsOperation } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/operation';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 
@@ -47,9 +48,9 @@ export default Capability.makeModule(
               },
               nodes: [
                 {
-                  id: `${REGISTRY_KEY}+all`,
-                  type: 'category',
-                  data: `${REGISTRY_KEY}+all`,
+                  id: `${REGISTRY_KEY}>all`,
+                  type: 'category' as const,
+                  data: `${REGISTRY_KEY}>all`,
                   properties: {
                     label: ['all plugins label', { ns: meta.id }],
                     icon: 'ph--squares-four--regular',
@@ -58,9 +59,9 @@ export default Capability.makeModule(
                   },
                 },
                 {
-                  id: `${REGISTRY_KEY}+installed`,
-                  type: 'category',
-                  data: `${REGISTRY_KEY}+installed`,
+                  id: `${REGISTRY_KEY}>installed`,
+                  type: 'category' as const,
+                  data: `${REGISTRY_KEY}>installed`,
                   properties: {
                     label: ['installed plugins label', { ns: meta.id }],
                     icon: 'ph--check--regular',
@@ -69,9 +70,9 @@ export default Capability.makeModule(
                   },
                 },
                 {
-                  id: `${REGISTRY_KEY}+recommended`,
-                  type: 'category',
-                  data: `${REGISTRY_KEY}+recommended`,
+                  id: `${REGISTRY_KEY}>recommended`,
+                  type: 'category' as const,
+                  data: `${REGISTRY_KEY}>recommended`,
                   properties: {
                     label: ['recommended plugins label', { ns: meta.id }],
                     icon: 'ph--star--regular',
@@ -80,9 +81,9 @@ export default Capability.makeModule(
                   },
                 },
                 {
-                  id: `${REGISTRY_KEY}+labs`,
-                  type: 'category',
-                  data: `${REGISTRY_KEY}+labs`,
+                  id: `${REGISTRY_KEY}>labs`,
+                  type: 'category' as const,
+                  data: `${REGISTRY_KEY}>labs`,
                   properties: {
                     label: ['labs plugins label', { ns: meta.id }],
                     icon: 'ph--flask--regular',
@@ -95,12 +96,12 @@ export default Capability.makeModule(
           ]),
       }),
       GraphBuilder.createExtension({
-        id: `${meta.id}/actions`,
-        match: NodeMatcher.whenId(REGISTRY_ID),
+        id: `${meta.id}.actions`,
+        match: NodeMatcher.whenId(`root/${REGISTRY_ID}`),
         actions: () =>
           Effect.succeed([
             {
-              id: `${meta.id}/load-by-url`,
+              id: `${meta.id}.load-by-url`,
               data: Effect.fnUntraced(function* () {}),
               properties: {
                 label: ['load by url label', { ns: meta.id }],
@@ -111,14 +112,14 @@ export default Capability.makeModule(
           ]),
       }),
       GraphBuilder.createExtension({
-        id: `${meta.id}/plugins`,
-        match: NodeMatcher.whenId(REGISTRY_ID),
+        id: `${meta.id}.plugins`,
+        match: NodeMatcher.whenId(`root/${REGISTRY_ID}`),
         connector: () => {
-          const manager = capabilities.get(Common.Capability.PluginManager);
+          const manager = capabilities.get(Capabilities.PluginManager);
           return Effect.succeed(
             manager.getPlugins().map((plugin) => ({
-              id: plugin.meta.id.replaceAll('/', ':'),
-              type: 'dxos.org/plugin',
+              id: plugin.meta.id,
+              type: 'org.dxos.plugin',
               data: plugin,
               properties: {
                 label: plugin.meta.name ?? plugin.meta.id,
@@ -131,6 +132,6 @@ export default Capability.makeModule(
       }),
     ]);
 
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -4,18 +4,19 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, SettingsOperation } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { LayoutOperation, SettingsOperation, getSpacePath } from '@dxos/app-toolkit';
 import { Operation, OperationResolver } from '@dxos/operation';
 
 import { REGISTRY_ID } from '../../meta';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    return Capability.contributes(Common.Capability.OperationResolver, [
+    return Capability.contributes(Capabilities.OperationResolver, [
       OperationResolver.make({
         operation: SettingsOperation.OpenPluginRegistry,
         handler: Effect.fnUntraced(function* () {
-          yield* Operation.invoke(Common.LayoutOperation.SwitchWorkspace, { subject: REGISTRY_ID });
+          yield* Operation.invoke(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(REGISTRY_ID) });
         }),
       }),
     ]);

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

@@ -3,22 +3,21 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
-import { usePluginManager } from '@dxos/app-framework/react';
-import { runAndForwardErrors } from '@dxos/effect';
+import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { Surface, usePluginManager } from '@dxos/app-framework/ui';
 
-import { PluginDetail, RegistryContainer } from '../../components';
+import { PluginArticle, PluginRegistry } from '../../containers';
 import { REGISTRY_KEY, meta } from '../../meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
-        id: `${meta.id}/all`,
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.all`,
         role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+all`,
+        filter: (data): data is any => data.subject === `${REGISTRY_KEY}>all`,
         component: () => {
           const manager = usePluginManager();
           const filtered = useMemo(
@@ -26,13 +25,13 @@ export default Capability.makeModule(() =>
             [],
           );
 
-          return <RegistryContainer id={`${REGISTRY_KEY}+all`} plugins={filtered} />;
+          return <PluginRegistry id={`${REGISTRY_KEY}>all`} plugins={filtered} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/installed`,
+      Surface.create({
+        id: `${meta.id}.installed`,
         role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+installed`,
+        filter: (data): data is any => data.subject === `${REGISTRY_KEY}>installed`,
         component: () => {
           const manager = usePluginManager();
           const filtered = useMemo(
@@ -44,13 +43,13 @@ export default Capability.makeModule(() =>
             [],
           );
 
-          return <RegistryContainer id={`${REGISTRY_KEY}+installed`} plugins={filtered} />;
+          return <PluginRegistry id={`${REGISTRY_KEY}>installed`} plugins={filtered} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/recommended`,
+      Surface.create({
+        id: `${meta.id}.recommended`,
         role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+recommended`,
+        filter: (data): data is any => data.subject === `${REGISTRY_KEY}>recommended`,
         component: () => {
           const manager = usePluginManager();
           const filtered = useMemo(
@@ -62,36 +61,26 @@ export default Capability.makeModule(() =>
             [],
           );
 
-          return <RegistryContainer id={`${REGISTRY_KEY}+recommended`} plugins={filtered} />;
+          return <PluginRegistry id={`${REGISTRY_KEY}>recommended`} plugins={filtered} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/labs`,
+      Surface.create({
+        id: `${meta.id}.labs`,
         role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+labs`,
+        filter: (data): data is any => data.subject === `${REGISTRY_KEY}>labs`,
         component: () => {
           const manager = usePluginManager();
           const filtered = useMemo(() => manager.getPlugins().filter(({ meta }) => meta.tags?.includes('labs')), []);
 
-          return <RegistryContainer id={`${REGISTRY_KEY}+labs`} plugins={filtered} />;
+          return <PluginRegistry id={`${REGISTRY_KEY}>labs`} plugins={filtered} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/plugin-details`,
+      Surface.create({
+        id: `${meta.id}.plugin-details`,
         role: 'article',
         filter: (data): data is { subject: Plugin.Plugin } => Plugin.isPlugin(data.subject),
         component: ({ data: { subject } }) => {
-          const manager = usePluginManager();
-          const enabled = manager.getEnabled().includes(subject.meta.id);
-          const handleEnableChange = useCallback(
-            (enabled: boolean) =>
-              enabled
-                ? runAndForwardErrors(manager.enable(subject.meta.id))
-                : runAndForwardErrors(manager.disable(subject.meta.id)),
-            [manager, subject.meta.id],
-          );
-
-          return <PluginDetail plugin={subject} enabled={enabled} onEnabledChange={handleEnableChange} />;
+          return <PluginArticle subject={subject} />;
         },
       }),
     ]),

package/src/cli/plugin.ts

@@ -2,14 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 
 import { meta } from '../meta';
 
 import { plugin } from './commands';
 
 export const RegistryPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addCommandModule({
+  AppPlugin.addCommandModule({
     commands: [plugin],
   }),
   Plugin.make,

package/src/cli/storage.ts

@@ -6,37 +6,31 @@ import * as FileSystem from '@effect/platform/FileSystem';
 import * as Path from '@effect/platform/Path';
 import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
+import * as Yaml from 'yaml';
 
-import { DX_CONFIG, getProfilePath } from '@dxos/client-protocol';
+import { DX_CONFIG } from '@dxos/client-protocol';
 
 // TODO(wittjosiah): Factor out to app-framework?
 
-const PLUGINS_FILE = 'plugins.json';
-
 const PluginsSchema = Schema.Array(Schema.String);
 
-/**
- * Get the path to the plugins configuration file for a profile.
- */
-const getPluginsPath = (profile: string): Effect.Effect<string, never, Path.Path> =>
-  Effect.gen(function* () {
-    const path = yield* Path.Path;
-    return path.join(getProfilePath(DX_CONFIG, profile), PLUGINS_FILE);
-  });
+/** CLI-only: path to plugins/<profile>.yml (sibling to profile/). */
+const getPluginsConfigPath = (profile: string) => `${DX_CONFIG}/plugins/${profile}.yml`;
 
 /**
- * Load enabled plugins from profile storage.
+ * Load enabled plugins from plugins/<profile>.yml (sibling to profile/).
  * Returns the list of enabled plugin IDs, or an empty array if the file doesn't exist.
  */
 export const loadEnabledPlugins = Effect.fn(function* ({ profile }: { profile: string }) {
   const fs = yield* FileSystem.FileSystem;
-  const pluginsPath = yield* getPluginsPath(profile);
+  const pluginsPath = getPluginsConfigPath(profile);
 
   const content = yield* fs
     .readFileString(pluginsPath)
     .pipe(Effect.catchTag('SystemError', () => Effect.succeed('[]')));
 
-  const parsed = yield* Schema.decodeUnknown(Schema.parseJson(PluginsSchema))(content).pipe(
+  const raw = Yaml.parse(content);
+  const parsed = yield* Schema.decodeUnknown(PluginsSchema)(raw ?? []).pipe(
     Effect.catchAll(() => Effect.succeed([] as string[])),
   );
 
@@ -44,14 +38,13 @@ export const loadEnabledPlugins = Effect.fn(function* ({ profile }: { profile: s
 });
 
 /**
- * Save enabled plugins to profile storage.
+ * Save enabled plugins to plugins/<profile>.yml.
  */
 export const saveEnabledPlugins = Effect.fn(function* ({ profile, enabled }: { profile: string; enabled: string[] }) {
   const fs = yield* FileSystem.FileSystem;
-  const pluginsPath = yield* getPluginsPath(profile);
-  const profileDir = getProfilePath(DX_CONFIG, profile);
-
-  yield* fs.makeDirectory(profileDir, { recursive: true });
-  const encoded = Schema.encodeSync(Schema.parseJson(PluginsSchema))(enabled);
-  yield* fs.writeFileString(pluginsPath, encoded + '\n');
+  const path = yield* Path.Path;
+  const pluginsPath = getPluginsConfigPath(profile);
+  yield* fs.makeDirectory(path.dirname(pluginsPath), { recursive: true });
+  const encoded = Yaml.stringify(enabled);
+  yield* fs.writeFileString(pluginsPath, encoded);
 });

package/src/components/{PluginDetail.stories.tsx → PluginDetail/PluginDetail.stories.tsx}

@@ -8,15 +8,16 @@ import { Plugin } from '@dxos/app-framework';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
 import { PluginDetail } from './PluginDetail';
 
 const meta = {
-  title: 'plugins/plugin-registry/PluginDetail',
+  title: 'plugins/plugin-registry/components/PluginDetail',
   component: PluginDetail,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof PluginDetail>;

package/src/components/PluginDetail/PluginDetail.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Plugin } from '@dxos/app-framework';
+import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
+import { ScrollArea } from '@dxos/react-ui';
+import { getStyles, mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+
+export type PluginDetailProps = {
+  plugin: Plugin.Plugin;
+  enabled?: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
+};
+
+export const PluginDetail = ({ plugin, enabled, onEnabledChange }: PluginDetailProps) => {
+  const { t } = useTranslation(meta.id);
+  const {
+    id,
+    name,
+    description,
+    homePage,
+    source,
+    screenshots,
+    icon = 'ph--circle--regular',
+    iconHue = 'neutral',
+  } = plugin.meta;
+  const styles = getStyles(iconHue);
+
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>
+        <div role='none' className='dx-document grid grid-cols-[min-content_1fr] gap-4 p-4'>
+          <div role='none'>
+            <Icon classNames={mx('p-1 rounded-md', styles.fill, styles.surfaceText)} icon={icon} size={14} />
+          </div>
+          <div role='none' className='flex flex-col gap-6'>
+            <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 w-full pt-1'>
+              <h2 className='text-xl'>{name}</h2>
+              <Input.Root>
+                <Input.Switch classNames='self-center' checked={enabled} onCheckedChange={onEnabledChange} />
+              </Input.Root>
+              <p className='pt-0.5 text-sm text-description'>{id}</p>
+            </div>
+            <div role='none'>
+              <p className='text-description'>{description}</p>
+            </div>
+            {screenshots && screenshots.length > 0 && (
+              <div role='none' className='flex flex-col gap-2'>
+                <h2>Preview</h2>
+                <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+              </div>
+            )}
+            <div role='none' className='flex flex-col gap-2'>
+              <h2>Resources</h2>
+              <div className='flex gap-2'>
+                {homePage && (
+                  <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                    {t('home page label')}
+                    <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mx-1' />
+                  </Link>
+                )}
+
+                {source && (
+                  <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                    {t('source label')}
+                    <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mx-1' />
+                  </Link>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};

package/src/components/PluginDetail/index.ts

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

package/src/components/{PluginItem.tsx → PluginList/PluginItem.tsx}

@@ -6,11 +6,11 @@ import React, { type MouseEvent, useCallback } from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
 import { type ChromaticPalette, Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { getStyles } from '@dxos/ui-theme';
 
-import { meta } from '../meta';
-import { type RegistryTagType } from '../types';
+import { meta } from '../../meta';
+import { type RegistryTagType } from '../../types';
 
 export type PluginItemProps = {
   plugin: Plugin.Plugin;
@@ -58,11 +58,15 @@ export const PluginItem = ({
       labelId={labelId}
       data-testid={`pluginList.${id}`}
       aria-describedby={descriptionId}
-      classNames={mx(gridCols, 'bs-[12rem] is-full gap-3 pie-2 border border-separator rounded-md overflow-hidden')}
+      classNames={mx(gridCols, 'h-[12rem] w-full gap-3 pe-2 bg-modal-surface rounded-md overflow-hidden')}
     >
-      <div className={mx(gridRows, 'justify-center rounded-l-md', styles.bg)}>
-        <div />
-        <Icon classNames={mx('cursor-pointer', styles.icon)} icon={icon} size={14} onClick={handleClick} />
+      <div className={mx(gridRows, 'justify-center rounded-l-md', styles.surface)}>
+        <Icon
+          classNames={mx('row-start-2 cursor-pointer', styles.surfaceText)}
+          icon={icon}
+          size={14}
+          onClick={handleClick}
+        />
       </div>
 
       <div className={mx(gridRows)}>
@@ -71,10 +75,10 @@ export const PluginItem = ({
         </div>
 
         <div>
-          <p className={mx(descriptionText, 'line-clamp-4 min-is-0')}>{description}</p>
+          <p className={mx('text-description', 'line-clamp-4 min-w-0')}>{description}</p>
         </div>
 
-        <div className='flex -mis-0.5 overflow-x-auto scrollbar-none'>
+        <div className='flex -ms-0.5 overflow-x-auto scrollbar-none'>
           {tags?.map((tag) => (
             <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
               {tag}
@@ -99,7 +103,7 @@ export const PluginItem = ({
           </Link>
 
           <div className='grow' />
-          <div className='pie-1'>
+          <div className='pe-1'>
             <Input.Root id={inputId}>
               <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
             </Input.Root>