@dxos/plugin-registry 0.7.5-main.9d2a38b → 0.7.5-main.ff8607b

package/src/capabilities/react-surface.tsx

@@ -2,23 +2,89 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface, Plugin, usePluginManager } from '@dxos/app-framework';
+import { StackItem } from '@dxos/react-ui-stack';
 
-import { PluginSettings } from '../components';
-import { meta, REGISTRY_PLUGIN } from '../meta';
-import { type RegistrySettings } from '../types';
+import { PluginDetail, RegistryContainer } from '../components';
+import { REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: meta.id,
-      role: 'settings',
-      filter: (data): data is any => data.subject === REGISTRY_PLUGIN,
+      id: `${REGISTRY_PLUGIN}/all`,
+      role: 'article',
+      filter: (data): data is any => data.subject === `${REGISTRY_KEY}:all`,
       component: () => {
-        const settings = useCapability(Capabilities.SettingsStore).getStore<RegistrySettings>(REGISTRY_PLUGIN)!.value;
-        return <PluginSettings settings={settings} />;
+        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?: readonly PluginMeta[];
-  installed?: readonly string[];
-  enabled?: readonly string[];
-  onChange?: (id: string, enabled: boolean) => void;
-  onReload?: () => void;
+export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
+  plugins?: readonly Plugin[];
 };
 
-export const PluginList = ({ plugins = [], installed = [], 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 isInstalled = installed.includes(id);
-        const reloadRequired = isEnabled !== isInstalled;
-        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>
   );
 };

package/src/components/RegistryContainer.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { createIntent, LayoutAction, type Plugin, useIntentDispatcher, usePluginManager } from '@dxos/app-framework';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { PluginList } from './PluginList';
+
+const sortByPluginMeta = ({ meta: { name: a = '' } }: Plugin, { meta: { name: b = '' } }: Plugin) => a.localeCompare(b);
+
+export const RegistryContainer = ({ id, plugins: _plugins }: { id: string; plugins: Plugin[] }) => {
+  const manager = usePluginManager();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const plugins = useMemo(() => _plugins.sort(sortByPluginMeta), [_plugins]);
+
+  // TODO(wittjosiah): Factor out to an intent?
+  const handleChange = async (id: string, enabled: boolean) => {
+    if (enabled) {
+      await manager.enable(id);
+    } else {
+      await manager.disable(id);
+    }
+
+    await dispatch(
+      createIntent(ObservabilityAction.SendEvent, {
+        name: 'plugins.toggle',
+        properties: { plugin: id, enabled },
+      }),
+    );
+  };
+
+  const handleClick = (pluginId: string) =>
+    dispatch(
+      createIntent(LayoutAction.Open, {
+        part: 'main',
+        // TODO(wittjosiah): `/` currently is not supported in ids.
+        subject: [pluginId.replaceAll('/', ':')],
+        options: { pivotId: id, positioning: 'end' },
+      }),
+    );
+
+  return (
+    <StackItem.Content toolbar={false} role='article' classNames='overflow-x-hidden overflow-y-auto'>
+      <PluginList plugins={plugins} enabled={manager.enabled} onClick={handleClick} onChange={handleChange} />
+    </StackItem.Content>
+  );
+};

package/src/components/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './PluginDetail';
 export * from './PluginList';
-export * from './PluginSettings';
+export * from './RegistryContainer';

package/src/meta.ts

@@ -6,6 +6,10 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const REGISTRY_PLUGIN = 'dxos.org/plugin/registry';
 
+// TODO(wittjosiah): Deck does not currently support `/` in ids.
+export const REGISTRY_ID = 'dxos:plugin-registry';
+export const REGISTRY_KEY = 'plugin-registry';
+
 export const meta = {
   id: REGISTRY_PLUGIN,
   name: 'Plugins',

package/src/translations.ts

@@ -11,11 +11,21 @@ export default [
         'plugin name': 'Registry',
         'reload required message': 'Reload required.',
         'settings show experimental label': 'Show experimental plugins',
-        'settings section installed label': 'Installed',
+        'settings section installed label': 'Enabled',
         'settings section recommended label': 'Recommended',
         'settings section experimental label': 'Experimental',
-        'home page label': 'Home page',
+        'details label': 'Details',
+        'home page label': 'Website',
         'source label': 'Source',
+        'plugin registry label': 'Plugin Registry',
+        'all plugins label': 'All',
+        'installed plugins label': 'Enabled',
+        'recommended plugins label': 'Recommended',
+        'experimental plugins label': 'Experimental',
+        'community plugins label': 'Community',
+        'load by url label': 'Load by URL (soon)',
+        'coming soon label': 'Coming soon!',
+        'open plugin registry label': 'Open plugin registry',
       },
     },
   },

package/dist/lib/browser/chunk-CMDU7LPH.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const REGISTRY_PLUGIN = 'dxos.org/plugin/registry';\n\nexport const meta = {\n  id: REGISTRY_PLUGIN,\n  name: 'Plugins',\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,kBAAkB;AAExB,IAAMC,OAAO;EAClBC,IAAIF;EACJG,MAAM;AACR;",
-  "names": ["REGISTRY_PLUGIN", "meta", "id", "name"]
-}