@dxos/plugin-registry 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

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

@@ -0,0 +1,126 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createIntent, SettingsAction, type PluginsContext } from '@dxos/app-framework';
+import { createExtension, type Node } from '@dxos/plugin-graph';
+
+import { REGISTRY_ID, REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.AppGraphBuilder, [
+    createExtension({
+      id: REGISTRY_PLUGIN,
+      filter: (node): node is Node<null> => node.id === 'root',
+      actions: () => [
+        {
+          id: REGISTRY_PLUGIN,
+          data: async () => {
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            await dispatch(createIntent(SettingsAction.OpenPluginRegistry));
+          },
+          properties: {
+            label: ['open plugin registry label', { ns: REGISTRY_PLUGIN }],
+            icon: 'ph--squares-four--regular',
+          },
+        },
+      ],
+    }),
+    createExtension({
+      id: REGISTRY_PLUGIN,
+      filter: (node): node is Node<null> => node.id === 'root',
+      connector: () => [
+        {
+          id: REGISTRY_ID,
+          type: REGISTRY_PLUGIN,
+          properties: {
+            label: ['plugin registry label', { ns: REGISTRY_PLUGIN }],
+            icon: 'ph--squares-four--regular',
+            disposition: 'pin-end',
+            testId: 'treeView.pluginRegistry',
+          },
+          nodes: [
+            {
+              id: `${REGISTRY_KEY}:all`,
+              type: 'category',
+              data: `${REGISTRY_KEY}:all`,
+              properties: {
+                label: ['all plugins label', { ns: REGISTRY_PLUGIN }],
+                icon: 'ph--squares-four--regular',
+                key: REGISTRY_KEY,
+                testId: 'pluginRegistry.all',
+              },
+            },
+            {
+              id: `${REGISTRY_KEY}:installed`,
+              type: 'category',
+              data: `${REGISTRY_KEY}:installed`,
+              properties: {
+                label: ['installed plugins label', { ns: REGISTRY_PLUGIN }],
+                icon: 'ph--check--regular',
+                key: REGISTRY_KEY,
+                testId: 'pluginRegistry.installed',
+              },
+            },
+            {
+              id: `${REGISTRY_KEY}:recommended`,
+              type: 'category',
+              data: `${REGISTRY_KEY}:recommended`,
+              properties: {
+                label: ['recommended plugins label', { ns: REGISTRY_PLUGIN }],
+                icon: 'ph--star--regular',
+                key: REGISTRY_KEY,
+                testId: 'pluginRegistry.recommended',
+              },
+            },
+            {
+              id: `${REGISTRY_KEY}:experimental`,
+              type: 'category',
+              data: `${REGISTRY_KEY}:experimental`,
+              properties: {
+                label: ['experimental plugins label', { ns: REGISTRY_PLUGIN }],
+                icon: 'ph--flask--regular',
+                key: REGISTRY_KEY,
+                testId: 'pluginRegistry.experimental',
+              },
+            },
+          ],
+        },
+      ],
+    }),
+    createExtension({
+      id: `${REGISTRY_PLUGIN}/actions`,
+      filter: (node): node is Node<null> => node.id === REGISTRY_ID,
+      actions: () => [
+        {
+          id: `${REGISTRY_PLUGIN}/load-by-url`,
+          data: async () => {},
+          properties: {
+            label: ['load by url label', { ns: REGISTRY_PLUGIN }],
+            icon: 'ph--cloud-arrow-down--regular',
+            disabled: true,
+          },
+        },
+      ],
+    }),
+    createExtension({
+      id: `${REGISTRY_PLUGIN}/plugins`,
+      resolver: ({ id }) => {
+        const manager = context.requestCapability(Capabilities.PluginManager);
+        const plugin = manager.plugins.find((plugin) => plugin.meta.id === id.replaceAll(':', '/'));
+        if (!plugin) {
+          return;
+        }
+
+        return {
+          id,
+          type: 'dxos.org/plugin',
+          data: plugin,
+          properties: {
+            label: plugin.meta.name ?? plugin.meta.id,
+            icon: plugin.meta.icon ?? 'ph--circle--regular',
+          },
+        };
+      },
+    }),
+  ]);

package/src/capabilities/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  contributes,
+  SettingsAction,
+  createResolver,
+  LayoutAction,
+  Capabilities,
+  createIntent,
+} from '@dxos/app-framework';
+
+import { REGISTRY_ID } from '../meta';
+
+export default () =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver({
+      intent: SettingsAction.OpenPluginRegistry,
+      resolve: () => {
+        return {
+          intents: [createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: REGISTRY_ID })],
+        };
+      },
+    }),
+  );

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Capabilities, contributes, createSurface, Plugin, usePluginManager } from '@dxos/app-framework';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { PluginDetail, RegistryContainer } from '../components';
+import { REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${REGISTRY_PLUGIN}/all`,
+      role: 'article',
+      filter: (data): data is any => data.subject === `${REGISTRY_KEY}:all`,
+      component: () => {
+        const manager = usePluginManager();
+        const filtered = useMemo(() => manager.plugins.filter(({ meta }) => !manager.core.includes(meta.id)), []);
+
+        return <RegistryContainer id={`${REGISTRY_KEY}:all`} plugins={filtered} />;
+      },
+    }),
+    createSurface({
+      id: `${REGISTRY_PLUGIN}/installed`,
+      role: 'article',
+      filter: (data): data is any => data.subject === `${REGISTRY_KEY}:installed`,
+      component: () => {
+        const manager = usePluginManager();
+        const filtered = useMemo(
+          () =>
+            manager.plugins
+              .filter(({ meta }) => !manager.core.includes(meta.id))
+              .filter(({ meta }) => manager.enabled.includes(meta.id)),
+          [],
+        );
+
+        return <RegistryContainer id={`${REGISTRY_KEY}:installed`} plugins={filtered} />;
+      },
+    }),
+    createSurface({
+      id: `${REGISTRY_PLUGIN}/recommended`,
+      role: 'article',
+      filter: (data): data is any => data.subject === `${REGISTRY_KEY}:recommended`,
+      component: () => {
+        const manager = usePluginManager();
+        const filtered = useMemo(
+          () =>
+            manager.plugins
+              .filter(({ meta }) => !manager.core.includes(meta.id))
+              .filter(({ meta }) => !meta.tags?.includes('experimental')),
+          [],
+        );
+
+        return <RegistryContainer id={`${REGISTRY_KEY}:recommended`} plugins={filtered} />;
+      },
+    }),
+    createSurface({
+      id: `${REGISTRY_PLUGIN}/experimental`,
+      role: 'article',
+      filter: (data): data is any => data.subject === `${REGISTRY_KEY}:experimental`,
+      component: () => {
+        const manager = usePluginManager();
+        const filtered = useMemo(() => manager.plugins.filter(({ meta }) => meta.tags?.includes('experimental')), []);
+
+        return <RegistryContainer id={`${REGISTRY_KEY}:experimental`} plugins={filtered} />;
+      },
+    }),
+    createSurface({
+      id: `${REGISTRY_PLUGIN}/plugin-details`,
+      role: 'article',
+      filter: (data): data is { subject: Plugin } => data.subject instanceof Plugin,
+      component: ({ data: { subject } }) => {
+        const manager = usePluginManager();
+        const enabled = manager.enabled.includes(subject.meta.id);
+        const handleEnable = useCallback(
+          () => (enabled ? manager.disable(subject.meta.id) : manager.enable(subject.meta.id)),
+          [manager, subject.meta.id, enabled],
+        );
+
+        return (
+          <StackItem.Content role='article' toolbar={false}>
+            <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />
+          </StackItem.Content>
+        );
+      },
+    }),
+  ]);

package/src/components/PluginDetail.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { PluginDetail, type PluginDetailProps } from './PluginDetail';
+import translations from '../translations';
+
+const meta: Meta<PluginDetailProps> = {
+  title: 'plugins/plugin-registry/PluginDetail',
+  component: PluginDetail,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PluginDetailProps>;
+
+export const Default: Story = {
+  args: {
+    plugin: {
+      meta: {
+        id: 'example.com/plugin/test-plugin',
+        name: 'Test Plugin',
+        description: faker.lorem.paragraphs(2),
+        icon: 'ph--bug--regular',
+        homePage: 'https://example.com',
+        source: 'https://github.com/example/test-plugin',
+        screenshots: [
+          'https://media.gcflearnfree.org/content/55e073de7dd48174331f51b3_01_17_2014/getting_started_interactive2.png',
+        ],
+      },
+      modules: [],
+    },
+  },
+};

package/src/components/PluginDetail.tsx

@@ -0,0 +1,63 @@
+//
+// 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 { DeprecatedFormContainer } from '@dxos/react-ui-form';
+
+import { REGISTRY_PLUGIN } from '../meta';
+
+export type PluginDetailProps = {
+  plugin: Plugin;
+  enabled?: boolean;
+  onEnable?: () => void;
+};
+
+export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
+  const { t } = useTranslation(REGISTRY_PLUGIN);
+  const { id, name, description, homePage, source, screenshots } = plugin.meta;
+
+  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 && (
+        <div role='none'>
+          <h1 className='text-lg mb-2'>Preview</h1>
+          <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+        </div>
+      )}
+
+      <div role='none'>
+        <p>{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>
+          )}
+
+          {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>
+    </DeprecatedFormContainer>
+  );
+};

package/src/components/PluginItem.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type Plugin } from '@dxos/app-framework';
+import { Icon, Input, Link, ListItem, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { REGISTRY_PLUGIN } from '../meta';
+
+export type PluginItemProps = {
+  plugin: Plugin;
+  installed?: readonly string[];
+  enabled?: readonly string[];
+  onClick?: (id: string) => void;
+  onChange?: (id: string, enabled: boolean) => void;
+};
+
+export const PluginItem = ({ plugin, enabled = [], onClick, onChange }: PluginItemProps) => {
+  const { t } = useTranslation(REGISTRY_PLUGIN);
+  const { id, name, description, homePage, source, icon = 'ph--circle--regular' } = plugin.meta;
+  const isEnabled = enabled.includes(id);
+  const inputId = `${id}-input`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const handleClick = useCallback(() => onClick?.(id), [id, onClick]);
+  const handleChange = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onChange?.(id, !isEnabled);
+    },
+    [id, isEnabled, onChange],
+  );
+
+  return (
+    <ListItem.Root
+      key={id}
+      labelId={labelId}
+      data-testid={`pluginList.${id}`}
+      aria-describedby={descriptionId}
+      classNames='w-full h-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr] p-1 rounded-md border border-separator'
+    >
+      <div className='flex grow justify-center items-center'>
+        <Icon icon={icon} size={6} onClick={handleClick} classNames='text-subdued cursor-pointer' />
+      </div>
+      <div className='flex grow items-center truncate cursor-pointer' onClick={handleClick}>
+        {name ?? id}
+      </div>
+      <div className='flex grow justify-center items-center'>
+        <Input.Root id={inputId}>
+          <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
+        </Input.Root>
+      </div>
+
+      <div />
+      {(description || homePage || source) && (
+        <div id={descriptionId} className='col-span-2 flex flex-col w-full gap-2 pb-3 overflow-y-scroll'>
+          <div className='grow'>
+            <p className={mx(descriptionText, 'line-clamp-3 min-w-0 pie-4')}>{description}</p>
+          </div>
+
+          <div className='flex gap-2 items-center'>
+            <Link
+              aria-describedby={descriptionId}
+              classNames='text-sm text-description cursor-pointer'
+              onClick={handleClick}
+            >
+              {t('details label')}
+            </Link>
+
+            {homePage && (
+              <Link
+                href={homePage}
+                target='_blank'
+                rel='noreferrer'
+                aria-describedby={descriptionId}
+                classNames='text-sm text-description'
+                onClick={(ev) => ev.stopPropagation()}
+              >
+                {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'
+                aria-describedby={descriptionId}
+                classNames='text-sm text-description'
+                onClick={(ev) => ev.stopPropagation()}
+              >
+                {t('source label')}
+                <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
+              </Link>
+            )}
+          </div>
+        </div>
+      )}
+    </ListItem.Root>
+  );
+};

package/src/components/PluginList.stories.tsx

@@ -7,9 +7,11 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { definePlugin, type Plugin } from '@dxos/app-framework';
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/storybook-utils';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { PluginList } from './PluginList';
 
@@ -24,18 +26,22 @@ const icons = [
   'ph--github-logo--regular',
 ];
 
-const DefaultStory = () => {
-  const [plugins] = useState<PluginMeta[]>(
+const Render = ({ classNames }: ThemedClassName<{}>) => {
+  const [plugins] = useState<Plugin[]>(
     faker.helpers.multiple(
-      () => ({
-        id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
-        name: `${faker.lorem.sentence(3)}`,
-        description: faker.datatype.boolean() ? `${faker.lorem.sentences()}` : undefined,
-        tags: faker.datatype.boolean({ probability: 0.6 })
-          ? [faker.helpers.arrayElement(['experimental', 'beta', 'alpha', 'stable', 'new', '新発売'])]
-          : undefined,
-        icon: faker.helpers.arrayElement(icons),
-      }),
+      () =>
+        definePlugin(
+          {
+            id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
+            name: `${faker.commerce.productName()}`,
+            description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
+            tags: faker.datatype.boolean({ probability: 0.6 })
+              ? [faker.helpers.arrayElement(['experimental', 'beta', 'alpha', 'stable', 'new', '新発売'])]
+              : undefined,
+            icon: faker.helpers.arrayElement(icons),
+          },
+          [],
+        ),
       { count: 16 },
     ),
   );
@@ -46,22 +52,25 @@ const DefaultStory = () => {
   };
 
   return (
-    <div className={'flex w-[400px] overflow-hidden'}>
+    <div className={mx('flex overflow-hidden', classNames)}>
       <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} />
     </div>
   );
 };
 
-export const Default = {};
-
 const meta: Meta = {
   title: 'plugins/plugin-registry/PluginList',
   component: PluginList,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
 };
 
 export default meta;
+
+export const Default = {};
+
+export const Column = {
+  args: {
+    classNames: 'w-[400px]',
+  },
+};

package/src/components/PluginList.tsx

@@ -2,102 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { type PluginMeta } from '@dxos/app-framework';
-import { Button, Icon, Input, Link, List, ListItem, useTranslation } from '@dxos/react-ui';
-import { descriptionText, fineBlockSize, mx } from '@dxos/react-ui-theme';
+import { type Plugin } from '@dxos/app-framework';
+import { List } from '@dxos/react-ui';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { PluginItem, type PluginItemProps } from './PluginItem';
 
-export type PluginListProps = {
-  plugins?: PluginMeta[];
-  loaded?: string[];
-  enabled?: string[];
-  onChange?: (id: string, enabled: boolean) => void;
-  onReload?: () => void;
+export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
+  plugins?: readonly Plugin[];
 };
 
-export const PluginList = ({ plugins = [], loaded = [], enabled = [], onChange, onReload }: PluginListProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-
+export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
   return (
-    <List classNames='mb-4 select-none'>
-      {plugins.map(({ id, name, description, homePage, source, icon = 'ph--circle--regular' }) => {
-        const isEnabled = enabled.includes(id);
-        const isLoaded = loaded.includes(id);
-        const reloadRequired = isEnabled !== isLoaded;
-        const inputId = `${id}-input`;
-        const labelId = `${id}-label`;
-        const descriptionId = `${id}-description`;
-        const handleChange = useCallback(() => onChange?.(id, !isEnabled), [id, isEnabled, onChange]);
-
-        return (
-          <Input.Root key={id} id={inputId}>
-            <ListItem.Root
-              labelId={labelId}
-              data-testid={`pluginList.${id}`}
-              aria-describedby={descriptionId}
-              classNames='flex gap-2 plb-2 pli-2 -mli-2 rounded'
-            >
-              <Icon icon={icon} size={6} classNames='shrink-0 mbs-1' />
-              <div role='none' className={mx(fineBlockSize, 'grow pbs-1 pl-1')}>
-                <label htmlFor={inputId} id={labelId} className='truncate'>
-                  {name ?? id}
-                </label>
-                {(description || reloadRequired || homePage || source) && (
-                  <>
-                    <div id={descriptionId} className='space-b-1 pbs-1 pbe-1'>
-                      <p className={descriptionText}>{description}</p>
-                      {homePage && (
-                        <Link
-                          href={homePage}
-                          target='_blank'
-                          rel='noreferrer'
-                          aria-describedby={descriptionId}
-                          classNames='text-xs 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'
-                          aria-describedby={descriptionId}
-                          classNames='text-xs text-description'
-                        >
-                          {t('source label')}
-                          <Icon
-                            icon='ph--arrow-square-out--bold'
-                            size={3}
-                            classNames='inline-block leading-none mli-1'
-                          />
-                        </Link>
-                      )}
-                    </div>
-                    {reloadRequired && (
-                      <Button variant='ghost' classNames='p-0 gap-2' onClick={onReload}>
-                        <Icon size={4} icon='ph--arrow-clockwise--regular' />
-                        <p className='text-sm font-medium'>{t('reload required message')}</p>
-                      </Button>
-                    )}
-                  </>
-                )}
-              </div>
-              <div className='pbs-1'>
-                <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-              </div>
-            </ListItem.Root>
-          </Input.Root>
-        );
-      })}
+    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] auto-rows-[10rem] gap-3 p-3 overflow-y-auto scrollbar-thin'>
+      {plugins.map((plugin) => (
+        <div key={plugin.meta.id} className='flex'>
+          <PluginItem plugin={plugin} {...props} />
+        </div>
+      ))}
     </List>
   );
 };