@dxos/plugin-registry 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/dist/types/src/components/PluginDetail.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type Plugin } from '@dxos/app-framework';
-export type PluginDetailProps = {
-    plugin: Plugin.Plugin;
-    enabled?: boolean;
-    onEnabledChange?: (enabled: boolean) => void;
-};
-export declare const PluginDetail: ({ plugin, enabled, onEnabledChange }: PluginDetailProps) => React.JSX.Element;
-//# sourceMappingURL=PluginDetail.d.ts.map

package/dist/types/src/components/PluginDetail.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginDetail.d.ts","sourceRoot":"","sources":["../../../../src/components/PluginDetail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,sCAAsC,iBAAiB,sBA6DnF,CAAC"}

package/dist/types/src/components/PluginDetail.stories.d.ts

@@ -1,33 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    title: string;
-    component: ({ plugin, enabled, onEnabledChange }: import("./PluginDetail").PluginDetailProps) => import("react").JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-        translations: [{
-            readonly 'en-US': {
-                readonly [meta.id]: {
-                    readonly 'plugin name': "Registry";
-                    readonly 'details label': "Details";
-                    readonly 'home page label': "Website";
-                    readonly 'source label': "Source";
-                    readonly 'plugin registry label': "Plugin Registry";
-                    readonly 'all plugins label': "All";
-                    readonly 'installed plugins label': "Enabled";
-                    readonly 'recommended plugins label': "Recommended";
-                    readonly 'labs plugins label': "Labs";
-                    readonly 'community plugins label': "Community";
-                    readonly 'load by url label': "Load by URL (soon)";
-                    readonly 'coming soon label': "Coming soon!";
-                    readonly 'open plugin registry label': "Open plugin registry";
-                    readonly 'settings label': "Settings";
-                };
-            };
-        }];
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=PluginDetail.stories.d.ts.map

package/dist/types/src/components/PluginDetail.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginDetail.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/PluginDetail.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAUjE,QAAA,MAAM,IAAI;;;;;;;;yBAPO,CAAO,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAeK,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC"}

package/dist/types/src/components/PluginItem.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { type Plugin } from '@dxos/app-framework';
-export type PluginItemProps = {
-    plugin: Plugin.Plugin;
-    installed?: readonly string[];
-    enabled?: readonly string[];
-    onClick?: (id: string) => void;
-    onChange?: (id: string, enabled: boolean) => void;
-    hasSettings?: (id: string) => boolean;
-    onSettings?: (id: string) => void;
-};
-export declare const PluginItem: ({ plugin, enabled, onClick, onChange, hasSettings: hasSettingsProp, onSettings, }: PluginItemProps) => React.JSX.Element;
-//# sourceMappingURL=PluginItem.d.ts.map

package/dist/types/src/components/PluginItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginItem.d.ts","sourceRoot":"","sources":["../../../../src/components/PluginItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAQlD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,mFAOxB,eAAe,sBA+EjB,CAAC"}

package/dist/types/src/components/PluginList.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type Plugin } from '@dxos/app-framework';
-import { type PluginItemProps } from './PluginItem';
-export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
-    plugins?: readonly Plugin.Plugin[];
-};
-export declare const PluginList: ({ plugins, ...props }: PluginListProps) => React.JSX.Element;
-//# sourceMappingURL=PluginList.d.ts.map

package/dist/types/src/components/PluginList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginList.d.ts","sourceRoot":"","sources":["../../../../src/components/PluginList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG;IAC9D,OAAO,CAAC,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,uBAA4B,eAAe,sBAQrE,CAAC"}

package/dist/types/src/components/PluginList.stories.d.ts

@@ -1,34 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: {
-    title: string;
-    component: ({ plugins, ...props }: import("./PluginList").PluginListProps) => React.JSX.Element;
-    render: () => React.JSX.Element;
-    parameters: {
-        translations: [{
-            readonly 'en-US': {
-                readonly [meta.id]: {
-                    readonly 'plugin name': "Registry";
-                    readonly 'details label': "Details";
-                    readonly 'home page label': "Website";
-                    readonly 'source label': "Source";
-                    readonly 'plugin registry label': "Plugin Registry";
-                    readonly 'all plugins label': "All";
-                    readonly 'installed plugins label': "Enabled";
-                    readonly 'recommended plugins label': "Recommended";
-                    readonly 'labs plugins label': "Labs";
-                    readonly 'community plugins label': "Community";
-                    readonly 'load by url label': "Load by URL (soon)";
-                    readonly 'coming soon label': "Coming soon!";
-                    readonly 'open plugin registry label': "Open plugin registry";
-                    readonly 'settings label': "Settings";
-                };
-            };
-        }];
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const FullScreen: Story;
-//# sourceMappingURL=PluginList.stories.d.ts.map

package/dist/types/src/components/PluginList.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginList.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/PluginList.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAwDxC,QAAA,MAAM,IAAI;;;;;;;yBAtDY,CAAO,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CA6DF,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}

package/dist/types/src/components/RegistryContainer.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type Plugin } from '@dxos/app-framework';
-export type RegistryContainerProps = {
-    id: string;
-    plugins: Plugin.Plugin[];
-};
-export declare const RegistryContainer: ({ id, plugins: pluginsProp }: RegistryContainerProps) => React.JSX.Element;
-//# sourceMappingURL=RegistryContainer.d.ts.map

package/dist/types/src/components/RegistryContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RegistryContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/RegistryContainer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAYlD,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,sBA4DrF,CAAC"}

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

@@ -1,137 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-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';
-
-import { REGISTRY_ID, REGISTRY_KEY, meta } from '../../meta';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    const capabilities = yield* Capability.Service;
-
-    const extensions = yield* Effect.all([
-      GraphBuilder.createExtension({
-        id: meta.id,
-        match: NodeMatcher.whenRoot,
-        actions: () =>
-          Effect.succeed([
-            {
-              id: meta.id,
-              data: () => Operation.invoke(SettingsOperation.OpenPluginRegistry),
-              properties: {
-                label: ['open plugin registry label', { ns: meta.id }],
-                icon: 'ph--squares-four--regular',
-                disposition: 'menu',
-              },
-            },
-          ]),
-      }),
-      GraphBuilder.createExtension({
-        id: meta.id,
-        match: NodeMatcher.whenRoot,
-        connector: () =>
-          Effect.succeed([
-            {
-              id: REGISTRY_ID,
-              type: meta.id,
-              properties: {
-                label: ['plugin registry label', { ns: meta.id }],
-                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: meta.id }],
-                    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: meta.id }],
-                    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: meta.id }],
-                    icon: 'ph--star--regular',
-                    key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.recommended',
-                  },
-                },
-                {
-                  id: `${REGISTRY_KEY}+labs`,
-                  type: 'category',
-                  data: `${REGISTRY_KEY}+labs`,
-                  properties: {
-                    label: ['labs plugins label', { ns: meta.id }],
-                    icon: 'ph--flask--regular',
-                    key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.labs',
-                  },
-                },
-              ],
-            },
-          ]),
-      }),
-      GraphBuilder.createExtension({
-        id: `${meta.id}/actions`,
-        match: NodeMatcher.whenId(REGISTRY_ID),
-        actions: () =>
-          Effect.succeed([
-            {
-              id: `${meta.id}/load-by-url`,
-              data: Effect.fnUntraced(function* () {}),
-              properties: {
-                label: ['load by url label', { ns: meta.id }],
-                icon: 'ph--cloud-arrow-down--regular',
-                disabled: true,
-              },
-            },
-          ]),
-      }),
-      GraphBuilder.createExtension({
-        id: `${meta.id}/plugins`,
-        match: NodeMatcher.whenId(REGISTRY_ID),
-        connector: () => {
-          const manager = capabilities.get(Capabilities.PluginManager);
-          return Effect.succeed(
-            manager.getPlugins().map((plugin) => ({
-              id: plugin.meta.id.replaceAll('/', ':'),
-              type: 'dxos.org/plugin',
-              data: plugin,
-              properties: {
-                label: plugin.meta.name ?? plugin.meta.id,
-                icon: plugin.meta.icon ?? 'ph--circle--regular',
-                disposition: 'hidden',
-              },
-            })),
-          );
-        },
-      }),
-    ]);
-
-    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
-  }),
-);

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

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));

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

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const OperationResolver = Capability.lazy('OperationResolver', () => import('./operation-resolver'));

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

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-import { LayoutOperation, SettingsOperation } 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(Capabilities.OperationResolver, [
-      OperationResolver.make({
-        operation: SettingsOperation.OpenPluginRegistry,
-        handler: Effect.fnUntraced(function* () {
-          yield* Operation.invoke(LayoutOperation.SwitchWorkspace, { subject: REGISTRY_ID });
-        }),
-      }),
-    ]);
-  }),
-);

package/src/capabilities/react-surface/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

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

@@ -1,99 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import React, { useCallback, useMemo } from 'react';
-
-import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
-import { Surface, usePluginManager } from '@dxos/app-framework/ui';
-import { runAndForwardErrors } from '@dxos/effect';
-
-import { PluginDetail, RegistryContainer } from '../../components';
-import { REGISTRY_KEY, meta } from '../../meta';
-
-export default Capability.makeModule(() =>
-  Effect.succeed(
-    Capability.contributes(Capabilities.ReactSurface, [
-      Surface.create({
-        id: `${meta.id}/all`,
-        role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+all`,
-        component: () => {
-          const manager = usePluginManager();
-          const filtered = useMemo(
-            () => manager.getPlugins().filter(({ meta }) => !manager.getCore().includes(meta.id)),
-            [],
-          );
-
-          return <RegistryContainer id={`${REGISTRY_KEY}+all`} plugins={filtered} />;
-        },
-      }),
-      Surface.create({
-        id: `${meta.id}/installed`,
-        role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+installed`,
-        component: () => {
-          const manager = usePluginManager();
-          const filtered = useMemo(
-            () =>
-              manager
-                .getPlugins()
-                .filter(({ meta }) => !manager.getCore().includes(meta.id))
-                .filter(({ meta }) => manager.getEnabled().includes(meta.id)),
-            [],
-          );
-
-          return <RegistryContainer id={`${REGISTRY_KEY}+installed`} plugins={filtered} />;
-        },
-      }),
-      Surface.create({
-        id: `${meta.id}/recommended`,
-        role: 'article',
-        filter: (data): data is any => data.subject === `${REGISTRY_KEY}+recommended`,
-        component: () => {
-          const manager = usePluginManager();
-          const filtered = useMemo(
-            () =>
-              manager
-                .getPlugins()
-                .filter(({ meta }) => !manager.getCore().includes(meta.id))
-                .filter(({ meta }) => !meta.tags?.includes('labs')),
-            [],
-          );
-
-          return <RegistryContainer id={`${REGISTRY_KEY}+recommended`} plugins={filtered} />;
-        },
-      }),
-      Surface.create({
-        id: `${meta.id}/labs`,
-        role: 'article',
-        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} />;
-        },
-      }),
-      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} />;
-        },
-      }),
-    ]),
-  ),
-);

package/src/cli/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './plugin';
-export * from './storage';

package/src/components/PluginDetail.tsx

@@ -1,81 +0,0 @@
-//
-// 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='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
-          <div role='none'>
-            <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} onCheckedChange={onEnabledChange} />
-              </Input.Root>
-              <p className='pbs-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 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>
-      </ScrollArea.Viewport>
-    </ScrollArea.Root>
-  );
-};

package/src/components/PluginItem.tsx

@@ -1,120 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-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 { getStyles } from '@dxos/ui-theme';
-
-import { meta } from '../meta';
-import { type RegistryTagType } from '../types';
-
-export type PluginItemProps = {
-  plugin: Plugin.Plugin;
-  installed?: readonly string[];
-  enabled?: readonly string[];
-  onClick?: (id: string) => void;
-  onChange?: (id: string, enabled: boolean) => void;
-  hasSettings?: (id: string) => boolean;
-  onSettings?: (id: string) => void;
-};
-
-export const PluginItem = ({
-  plugin,
-  enabled = [],
-  onClick,
-  onChange,
-  hasSettings: hasSettingsProp,
-  onSettings,
-}: PluginItemProps) => {
-  const { t } = useTranslation(meta.id);
-  const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = 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: MouseEvent) => {
-      event.stopPropagation();
-      onChange?.(id, !isEnabled);
-    },
-    [id, isEnabled, onChange],
-  );
-
-  const hasSettings = hasSettingsProp?.(id) ?? false;
-  const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
-  const styles = getStyles(iconHue);
-  const gridCols = 'grid grid-cols-[5rem_1fr]';
-  const gridRows = 'grid grid-rows-[40px_1fr_min-content_40px]';
-
-  return (
-    <ListItem.Root
-      key={id}
-      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')}
-    >
-      <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>
-
-      <div className={mx(gridRows)}>
-        <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
-          <span className='text-lg truncate'>{name ?? id}</span>
-        </div>
-
-        <div>
-          <p className={mx(descriptionText, 'line-clamp-4 min-is-0')}>{description}</p>
-        </div>
-
-        <div className='flex -mis-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}
-            </Tag>
-          ))}
-        </div>
-
-        <div className='flex gap-2 items-center text-sm'>
-          <IconButton
-            aria-describedby={descriptionId}
-            classNames='cursor-pointer'
-            icon='ph--gear--regular'
-            label={t('settings label')}
-            iconOnly
-            size={4}
-            onClick={handleSettings}
-            disabled={!hasSettings}
-          />
-
-          <Link aria-describedby={descriptionId} classNames='text-description cursor-pointer' onClick={handleClick}>
-            {t('details label')}
-          </Link>
-
-          <div className='grow' />
-          <div className='pie-1'>
-            <Input.Root id={inputId}>
-              <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-            </Input.Root>
-          </div>
-        </div>
-      </div>
-    </ListItem.Root>
-  );
-};
-
-const tagColors: Record<RegistryTagType, ChromaticPalette> = {
-  new: 'rose',
-  beta: 'teal',
-  labs: 'blue',
-  popular: 'green',
-  featured: 'pink',
-  experimental: 'amber',
-};

package/src/components/PluginList.tsx

@@ -1,24 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type Plugin } from '@dxos/app-framework';
-import { List } from '@dxos/react-ui';
-
-import { PluginItem, type PluginItemProps } from './PluginItem';
-
-export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
-  plugins?: readonly Plugin.Plugin[];
-};
-
-export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
-  return (
-    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] auto-rows-[max-content] gap-4 p-4'>
-      {plugins.map((plugin) => (
-        <PluginItem key={plugin.meta.id} plugin={plugin} {...props} />
-      ))}
-    </List>
-  );
-};