@dxos/plugin-registry 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.ae835ea",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
@@ -24,41 +25,38 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@dxos/app-framework": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/echo": "0.8.4-main.84f28bd",
-    "@dxos/plugin-graph": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/plugin-observability": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-form": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-stack": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/echo": "0.8.4-main.ae835ea",
+    "@dxos/live-object": "0.8.4-main.ae835ea",
+    "@dxos/app-framework": "0.8.4-main.ae835ea",
+    "@dxos/plugin-observability": "0.8.4-main.ae835ea",
+    "@dxos/plugin-graph": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
+    "@dxos/invariant": "0.8.4-main.ae835ea",
+    "@dxos/util": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-form": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.88.0",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/random": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
+    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
   },
   "publishConfig": {
     "access": "public"

package/src/RegistryPlugin.tsx

@@ -2,32 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 
 import { AppGraphBuilder, IntentResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
 
-export const RegistryPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-  ]);
+export const RegistryPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+]);

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

@@ -3,31 +3,32 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
-import { Capabilities, contributes, createIntent, SettingsAction, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, SettingsAction, contributes, createIntent } from '@dxos/app-framework';
 import { createExtension } from '@dxos/plugin-graph';
 
-import { REGISTRY_ID, REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
+import { REGISTRY_ID, REGISTRY_KEY, meta } from '../meta';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: REGISTRY_PLUGIN,
+      id: meta.id,
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
             Option.map((node) => [
               {
-                id: REGISTRY_PLUGIN,
+                id: meta.id,
                 data: async () => {
                   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
                   await dispatch(createIntent(SettingsAction.OpenPluginRegistry));
                 },
                 properties: {
-                  label: ['open plugin registry label', { ns: REGISTRY_PLUGIN }],
+                  label: ['open plugin registry label', { ns: meta.id }],
                   icon: 'ph--squares-four--regular',
                   disposition: 'menu',
                 },
@@ -38,18 +39,18 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: REGISTRY_PLUGIN,
+      id: meta.id,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
             Option.map((node) => [
               {
                 id: REGISTRY_ID,
-                type: REGISTRY_PLUGIN,
+                type: meta.id,
                 properties: {
-                  label: ['plugin registry label', { ns: REGISTRY_PLUGIN }],
+                  label: ['plugin registry label', { ns: meta.id }],
                   icon: 'ph--squares-four--regular',
                   disposition: 'pin-end',
                   testId: 'treeView.pluginRegistry',
@@ -60,7 +61,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+all`,
                     properties: {
-                      label: ['all plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['all plugins label', { ns: meta.id }],
                       icon: 'ph--squares-four--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.all',
@@ -71,7 +72,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+installed`,
                     properties: {
-                      label: ['installed plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['installed plugins label', { ns: meta.id }],
                       icon: 'ph--check--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.installed',
@@ -82,7 +83,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+recommended`,
                     properties: {
-                      label: ['recommended plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['recommended plugins label', { ns: meta.id }],
                       icon: 'ph--star--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.recommended',
@@ -93,7 +94,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+labs`,
                     properties: {
-                      label: ['labs plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['labs plugins label', { ns: meta.id }],
                       icon: 'ph--flask--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.labs',
@@ -107,18 +108,18 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${REGISTRY_PLUGIN}/actions`,
+      id: `${meta.id}/actions`,
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
             Option.map(() => [
               {
-                id: `${REGISTRY_PLUGIN}/load-by-url`,
+                id: `${meta.id}/load-by-url`,
                 data: async () => {},
                 properties: {
-                  label: ['load by url label', { ns: REGISTRY_PLUGIN }],
+                  label: ['load by url label', { ns: meta.id }],
                   icon: 'ph--cloud-arrow-down--regular',
                   disabled: true,
                 },
@@ -129,10 +130,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${REGISTRY_PLUGIN}/plugins`,
+      id: `${meta.id}/plugins`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
             Option.map(() => {

package/src/capabilities/intent-resolver.ts

@@ -3,12 +3,12 @@
 //
 
 import {
-  contributes,
-  SettingsAction,
-  createResolver,
-  LayoutAction,
   Capabilities,
+  LayoutAction,
+  SettingsAction,
+  contributes,
   createIntent,
+  createResolver,
 } from '@dxos/app-framework';
 
 import { REGISTRY_ID } from '../meta';

package/src/capabilities/react-surface.tsx

@@ -4,16 +4,15 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface, Plugin, usePluginManager } from '@dxos/app-framework';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Capabilities, Plugin, contributes, createSurface, usePluginManager } from '@dxos/app-framework';
 
 import { PluginDetail, RegistryContainer } from '../components';
-import { REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
+import { REGISTRY_KEY, meta } from '../meta';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${REGISTRY_PLUGIN}/all`,
+      id: `${meta.id}/all`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+all`,
       component: () => {
@@ -24,7 +23,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/installed`,
+      id: `${meta.id}/installed`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+installed`,
       component: () => {
@@ -41,7 +40,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/recommended`,
+      id: `${meta.id}/recommended`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+recommended`,
       component: () => {
@@ -58,7 +57,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/labs`,
+      id: `${meta.id}/labs`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+labs`,
       component: () => {
@@ -69,7 +68,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/plugin-details`,
+      id: `${meta.id}/plugin-details`,
       role: 'article',
       filter: (data): data is { subject: Plugin } => data.subject instanceof Plugin,
       component: ({ data: { subject } }) => {
@@ -80,11 +79,7 @@ export default () =>
           [manager, subject.meta.id, enabled],
         );
 
-        return (
-          <StackItem.Content role='article'>
-            <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />
-          </StackItem.Content>
-        );
+        return <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />;
       },
     }),
   ]);

package/src/components/PluginDetail.stories.tsx

@@ -2,28 +2,27 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { PluginDetail, type PluginDetailProps } from './PluginDetail';
 import { translations } from '../translations';
 
-const meta: Meta<PluginDetailProps> = {
+import { PluginDetail } from './PluginDetail';
+
+const meta = {
   title: 'plugins/plugin-registry/PluginDetail',
   component: PluginDetail,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  decorators: [withTheme, withLayout({ container: 'column' })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof PluginDetail>;
 
 export default meta;
 
-type Story = StoryObj<PluginDetailProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
@@ -33,6 +32,7 @@ export const Default: Story = {
         name: 'Test Plugin',
         description: faker.lorem.paragraphs(2),
         icon: 'ph--bug--regular',
+        iconHue: 'sky',
         homePage: 'https://example.com',
         source: 'https://github.com/example/test-plugin',
         screenshots: [

package/src/components/PluginDetail.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
 import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { getStyles, mx } from '@dxos/react-ui-theme';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type PluginDetailProps = {
   plugin: Plugin;
@@ -17,47 +18,65 @@ export type PluginDetailProps = {
 };
 
 export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, homePage, source, screenshots } = plugin.meta;
+  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 (
-    <DeprecatedFormContainer classNames='gap-6'>
-      <div role='none' className='flex justify-between items-center'>
-        <p>{id}</p>
-        <Input.Root>
-          <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
-        </Input.Root>
-      </div>
-
-      {screenshots && screenshots.length > 0 && (
+    <StackItem.Content scrollable>
+      <div role='none' className='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
         <div role='none'>
-          <h1 className='text-lg mb-2'>Preview</h1>
-          <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+          <Icon classNames={mx('p-1 rounded', styles.bg, styles.icon)} 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 is-full pbs-1'>
+            <h2 className='text-xl'>{name}</h2>
+            <Input.Root>
+              <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
+            </Input.Root>
+            <p className='pbs-0.5 text-sm text-description'>{id}</p>
+          </div>
 
-      <div role='none'>
-        <p>{description}</p>
-      </div>
+          <div role='none'>
+            <p className='text-description'>{description}</p>
+          </div>
 
-      <div role='none'>
-        <h1 className='text-lg mb-2'>Resources</h1>
-        <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 mli-1' />
-            </Link>
+          {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>
           )}
 
-          {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 mli-1' />
-            </Link>
-          )}
+          <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 mli-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 mli-1' />
+                </Link>
+              )}
+            </div>
+          </div>
         </div>
       </div>
-    </DeprecatedFormContainer>
+    </StackItem.Content>
   );
 };