@dxos/plugin-registry 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/components/PluginList/PluginList.stories.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { type Plugin, Plugin as PluginNS } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
+import { random } from '@dxos/random';
+import { ScrollArea } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { getHashHue } from '@dxos/ui-theme';
+
+import { translations } from '#translations';
+import { RegistryTagType } from '#types';
+
+import { PluginList } from './PluginList';
+
+random.seed(1);
+
+const icons = [
+  'ph--bug--regular',
+  'ph--compass--regular',
+  'ph--kanban--regular',
+  'ph--table--regular',
+  'ph--gear--regular',
+  'ph--github-logo--regular',
+];
+
+const DefaultStory = () => {
+  const [plugins] = useState<Plugin.Plugin[]>(
+    random.helpers.multiple(
+      () =>
+        PluginNS.define(
+          PluginNS.makeMeta({
+            key: DXN.make('org.dxos.plugin.test'),
+            name: `${random.commerce.productName()}`,
+            description: random.lorem.sentences(Math.ceil(Math.random() * 3)),
+            tags: random.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
+            icon: random.helpers.arrayElement(icons),
+            iconHue: getHashHue(random.string.uuid()),
+            homePage: random.datatype.boolean({ probability: 0.5 }) ? random.internet.url() : undefined,
+            source: random.internet.url(),
+          }),
+        ).pipe(PluginNS.make)(),
+      { count: 32 },
+    ),
+  );
+  const [enabled, setEnabled] = useState<string[]>([]);
+
+  const handleChange = (id: string, enabled: boolean) => {
+    setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
+  };
+
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>
+        <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-registry/components/PluginList',
+  component: PluginList,
+  render: DefaultStory,
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof PluginList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'bg-deck-surface' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const FullScreen: Story = {
+  decorators: [withTheme(), withLayout({ scroll: true })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

package/src/components/PluginList/PluginList.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Plugin, type PluginManager } from '@dxos/app-framework';
+import { List } from '@dxos/react-ui';
+
+import { PluginItem, type PluginItemProps } from './PluginItem';
+
+export type PluginListProps = Omit<PluginItemProps, 'plugin' | 'extraTags' | 'hasUpdate' | 'failure'> & {
+  plugins?: readonly Plugin.Plugin[];
+  /**
+   * Map from plugin id → extra tags to display (e.g. `registry`, `local`).
+   * Computed by the container; not persisted to plugin meta.
+   */
+  extraTagsById?: Record<string, readonly string[]>;
+  /**
+   * Set of plugin ids for which a newer version is available in the catalog.
+   * Causes each matching item to render an Update button instead of the enable switch.
+   */
+  updateAvailableIds?: ReadonlySet<string>;
+  /**
+   * Map from plugin id → most recent failure record. Used to render a warning
+   * badge next to the plugin name. Sourced from `PluginManager.failed`.
+   */
+  failuresById?: Record<string, PluginManager.PluginFailure>;
+};
+
+export const PluginList = ({
+  plugins = [],
+  extraTagsById,
+  updateAvailableIds,
+  failuresById,
+  ...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}
+          extraTags={extraTagsById?.[plugin.meta.id]}
+          hasUpdate={updateAvailableIds?.has(plugin.meta.id)}
+          failure={failuresById?.[plugin.meta.id]}
+          {...props}
+        />
+      ))}
+    </List>
+  );
+};

package/src/components/PluginList/index.ts

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

package/src/components/RegistrySettings/RegistrySettings.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { log } from '@dxos/log';
+import { Button, Input, Message, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+
+import { type RegistrySettings as RegistrySettingsType } from '../../types';
+
+export type RegistrySettingsProps = AppSurface.SettingsArticleProps<
+  RegistrySettingsType,
+  {
+    activeDevPluginIds: readonly string[];
+    onEnableDev: (url: string) => Promise<void>;
+    onDisableDev: (id: string) => Promise<void>;
+  }
+>;
+
+/**
+ * Settings panel for `@dxos/plugin-registry`. The dev-plugin section lets a
+ * plugin author point Composer at a local Vite dev server (defaults to
+ * `localhost:3967`) and toggle the dev plugin on/off persistently — boot will
+ * re-attach it on the next reload, surviving HMR-triggered reloads. If the
+ * dev server is offline at boot, the toggle stays on and a warning is logged
+ * (the manager's `failed` atom also surfaces a badge on the plugin list).
+ */
+export const RegistrySettings = ({
+  settings,
+  onSettingsChange,
+  activeDevPluginIds,
+  onEnableDev,
+  onDisableDev,
+}: RegistrySettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const [busy, setBusy] = useState(false);
+  const enabled = !!settings.devPluginEnabled;
+  const url = settings.devPluginUrl ?? '';
+  const trimmedUrl = url.trim();
+  const loadedDevId = activeDevPluginIds[0];
+
+  const handleToggle = useCallback(async () => {
+    if (busy || !onSettingsChange) {
+      return;
+    }
+    setBusy(true);
+    try {
+      if (enabled && loadedDevId) {
+        await onDisableDev(loadedDevId);
+        onSettingsChange((current) => ({ ...current, devPluginEnabled: false }));
+      } else if (enabled) {
+        // Toggle is on but no dev plugin is currently loaded (boot-time load
+        // failed or hasn't finished). Treat the click as "turn it off."
+        onSettingsChange((current) => ({ ...current, devPluginEnabled: false }));
+      } else {
+        if (!trimmedUrl) {
+          return;
+        }
+        // Optimistically persist intent so the next reload retries even if
+        // the page closes mid-load.
+        onSettingsChange((current) => ({ ...current, devPluginEnabled: true }));
+        try {
+          await onEnableDev(trimmedUrl);
+        } catch (error) {
+          // Per product direction: leave the intent on, log the failure. The
+          // user explicitly turns it off if they're done iterating.
+          log.warn('dev plugin enable failed', { url: trimmedUrl, error });
+        }
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [busy, enabled, loadedDevId, onSettingsChange, onDisableDev, onEnableDev, trimmedUrl]);
+
+  // Button label tracks the persisted intent, not the current load state, so
+  // a transient "intent on but not loaded" combination still reads as
+  // "Disable Dev Plugin" — clicking it turns the intent off cleanly.
+  const buttonLabel = busy
+    ? t('dev-plugin.busy.label')
+    : enabled
+      ? t('dev-plugin.disable.label')
+      : t('dev-plugin.enable.label');
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('dev-plugin.section.title')}>
+        <Message.Root valence='neutral'>
+          <Message.Content>{t('dev-plugin.description')}</Message.Content>
+        </Message.Root>
+        <SettingsForm.Item title={t('dev-plugin.url.label')} description={t('dev-plugin.url.description')}>
+          <Input.TextInput
+            classNames='ms-2'
+            disabled={!onSettingsChange || enabled || busy}
+            value={url}
+            onChange={(event) => onSettingsChange?.((current) => ({ ...current, devPluginUrl: event.target.value }))}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item title={t('dev-plugin.toggle.label')} description={t('dev-plugin.toggle.description')}>
+          <Button
+            variant={enabled ? undefined : 'primary'}
+            disabled={busy || (!enabled && !trimmedUrl)}
+            onClick={() => void handleToggle()}
+          >
+            {buttonLabel}
+          </Button>
+        </SettingsForm.Item>
+        {enabled && !loadedDevId && !busy && (
+          <Message.Root valence='warning'>
+            <Message.Content>{t('dev-plugin.not-loaded.message')}</Message.Content>
+          </Message.Root>
+        )}
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};

package/src/components/RegistrySettings/index.ts

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

package/src/components/index.ts

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './DisableDependentsAlert';
 export * from './PluginDetail';
+export * from './PluginFailureBadge';
 export * from './PluginList';
-export * from './RegistryContainer';
+export * from './RegistrySettings';

package/src/containers/BaseRegistryArticle/BaseRegistryArticle.tsx

@@ -0,0 +1,178 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
+
+import { type Plugin } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, SettingsOperation } from '@dxos/app-toolkit';
+import { EffectEx } from '@dxos/effect';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
+import { Input, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
+
+import { PluginList, type PluginListProps } from '#components';
+import { getPluginPath, meta } from '#meta';
+
+import { useDisableConfirmation } from '../../hooks';
+
+const matchesFilter = (plugin: Plugin.Plugin, query: string) => {
+  const haystack = `${plugin.meta.name ?? ''} ${plugin.meta.id}`.toLowerCase();
+  return haystack.includes(query);
+};
+
+export type BaseRegistryArticleProps = {
+  /** Article id used as the pivotId when opening a plugin's detail surface. */
+  id: string;
+  /** Plugins to display, pre-sorted by the caller. */
+  plugins: readonly Plugin.Plugin[];
+  /**
+   * Distinguishes the source of toggle events for observability
+   * (e.g. `'registry'` for the public registry surface).
+   */
+  source?: string;
+  /** Rendered in place of the list when no plugins match the current filter. */
+  empty?: ReactNode;
+} & Pick<
+  PluginListProps,
+  | 'installed'
+  | 'installing'
+  | 'updating'
+  | 'updateAvailableIds'
+  | 'extraTagsById'
+  | 'failuresById'
+  | 'onInstall'
+  | 'onUpdate'
+>;
+
+export const BaseRegistryArticle = composable<HTMLDivElement, BaseRegistryArticleProps>(
+  (
+    {
+      id,
+      plugins,
+      source,
+      empty,
+      installed,
+      installing,
+      updating,
+      updateAvailableIds,
+      extraTagsById,
+      failuresById,
+      onInstall,
+      onUpdate,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const manager = usePluginManager();
+    const { invoke, invokePromise } = useOperationInvoker();
+    const allSettings = useCapabilities(AppCapabilities.Settings);
+    const enabled = useAtomValue(manager.enabled);
+    const [filter, setFilter] = useState('');
+
+    const filtered = useMemo(() => {
+      const query = filter.trim().toLowerCase();
+      return query.length === 0 ? plugins : plugins.filter((plugin) => matchesFilter(plugin, query));
+    }, [plugins, filter]);
+
+    const dispatchToggle = useCallback(
+      (pluginId: string, nextEnabled: boolean) =>
+        Effect.gen(function* () {
+          if (nextEnabled) {
+            yield* manager.enable(pluginId);
+          } else {
+            yield* manager.disable(pluginId);
+          }
+          yield* invoke(ObservabilityOperation.SendEvent, {
+            name: 'plugins.toggle',
+            properties: source
+              ? { plugin: pluginId, enabled: nextEnabled, source }
+              : { plugin: pluginId, enabled: nextEnabled },
+          });
+        }).pipe(EffectEx.runAndForwardErrors),
+      [invoke, manager, source],
+    );
+
+    const requestDisable = useDisableConfirmation(manager, (id) => void dispatchToggle(id, false));
+
+    const handleChange = useCallback(
+      (pluginId: string, nextEnabled: boolean) => {
+        if (nextEnabled) {
+          void dispatchToggle(pluginId, true);
+          return;
+        }
+        requestDisable(pluginId);
+      },
+      [dispatchToggle, requestDisable],
+    );
+
+    const handleClick = useCallback(
+      (pluginId: string) =>
+        invokePromise(LayoutOperation.Open, {
+          subject: [getPluginPath(pluginId)],
+          pivotId: id,
+          positioning: 'end',
+        }),
+      [invokePromise, id],
+    );
+
+    const hasSettings = useCallback(
+      (pluginId: string) => allSettings.some((setting) => setting.prefix === pluginId),
+      [allSettings],
+    );
+
+    const handleSettings = useCallback(
+      (pluginId: string) => invokePromise(SettingsOperation.Open, { plugin: pluginId }),
+      [invokePromise],
+    );
+
+    return (
+      <Panel.Root {...composableProps(props)} ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <Input.Root>
+              <Input.Label srOnly>{t('filter.label')}</Input.Label>
+              <Input.TextInput
+                placeholder={t('filter.placeholder')}
+                value={filter}
+                onChange={(event) => setFilter(event.target.value)}
+              />
+            </Input.Root>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root orientation='vertical'>
+            <ScrollArea.Viewport>
+              {filtered.length > 0 ? (
+                <PluginList
+                  plugins={filtered}
+                  enabled={enabled}
+                  installed={installed}
+                  installing={installing}
+                  updating={updating}
+                  updateAvailableIds={updateAvailableIds}
+                  extraTagsById={extraTagsById}
+                  failuresById={failuresById}
+                  onClick={handleClick}
+                  onChange={handleChange}
+                  onInstall={onInstall}
+                  onUpdate={onUpdate}
+                  hasSettings={hasSettings}
+                  onSettings={handleSettings}
+                />
+              ) : (
+                empty
+              )}
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);
+
+BaseRegistryArticle.displayName = 'BaseRegistryArticle';

package/src/containers/BaseRegistryArticle/index.ts

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

package/src/containers/LoadPluginDialog/LoadPluginDialog.tsx

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { EffectEx } from '@dxos/effect';
+import { DXN } from '@dxos/keys';
+import { Button, Dialog, Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export const LOAD_PLUGIN_DIALOG = DXN.make(`${meta.id}.loadPluginDialog`);
+
+export const LoadPluginDialog = () => {
+  const manager = usePluginManager();
+  const { t } = useTranslation(meta.id);
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleLoad = useCallback(() => {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    void Effect.gen(function* () {
+      const plugin = yield* manager.add(trimmed);
+      yield* manager.enable(plugin.meta.id);
+      closeRef.current?.click();
+    }).pipe(
+      Effect.catchAll((err) =>
+        Effect.sync(() => {
+          setError(String(err));
+        }),
+      ),
+      Effect.tap(() => Effect.sync(() => setLoading(false))),
+      EffectEx.runAndForwardErrors,
+    );
+  }, [url, manager]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('load-by-url-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        {/* TODO(burdon): Form section. */}
+        <div className='flex flex-col gap-4'>
+          <Input.Root validationValence={error ? 'error' : undefined}>
+            <Input.Label>{t('plugin-url.label')}</Input.Label>
+            <Input.TextInput
+              placeholder='https://example.com/manifest.json'
+              value={url}
+              onChange={(event) => {
+                setUrl(event.target.value);
+                setError(null);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleLoad();
+                }
+              }}
+              disabled={loading}
+              autoFocus
+            />
+            {error && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+          </Input.Root>
+          <div className='flex justify-end'>
+            <Button variant='primary' disabled={!url.trim() || loading} onClick={handleLoad}>
+              {loading ? t('loading.label') : t('load-plugin.label')}
+            </Button>
+          </div>
+        </div>
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/LoadPluginDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { LoadPluginDialog as default } from './LoadPluginDialog';

package/src/containers/PluginArticle/PluginArticle.tsx

@@ -0,0 +1,117 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { type Plugin } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+
+import { PluginDetail } from '#components';
+import { getPluginPath } from '#meta';
+
+import {
+  useCatalogEntry,
+  useInstalledVersionTag,
+  usePluginActions,
+  useRegistryPluginProvider,
+  useRemotePluginIds,
+  useVersionPicker,
+} from '../../hooks';
+
+export type PluginArticleProps = { subject: Plugin.Plugin };
+
+export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
+  const pluginId = plugin.meta.id;
+  const manager = usePluginManager();
+  const plugins = useAtomValue(manager.plugins);
+  const remotePluginIds = useRemotePluginIds();
+  const provider = useRegistryPluginProvider();
+  const { invokePromise } = useOperationInvoker();
+
+  const { catalogEntry, moduleUrl, repo } = useCatalogEntry(pluginId);
+  const { installedVersionTag, syncInstalledVersion } = useInstalledVersionTag(pluginId, plugins);
+  const { pickerVersions, selectedVersionTag, setSelectedVersionTag } = useVersionPicker({
+    provider,
+    pluginId,
+    repo,
+    moduleUrl,
+    installedVersionTag,
+  });
+
+  const enabled = manager.getEnabled().includes(pluginId);
+  const failed = useAtomValue(manager.failed);
+  const failure = useMemo(() => failed.find((entry) => entry.id === pluginId), [failed, pluginId]);
+  const isInstalled = useMemo(() => plugins.some((candidate) => candidate.meta.id === pluginId), [plugins, pluginId]);
+  const isCore = manager.getCore().includes(pluginId);
+  const canUninstall = isInstalled && !isCore && remotePluginIds.has(pluginId);
+  const hasUpdate =
+    isInstalled && !!catalogEntry && !!installedVersionTag && installedVersionTag !== catalogEntry.version;
+
+  // Recompute graph slices whenever the plugin list changes, so installs /
+  // removals through other surfaces (or this article's own actions) keep the
+  // detail view in sync.
+  const dependencies = useMemo(
+    () => manager.getDependencies(pluginId, { transitive: false }),
+    [manager, pluginId, plugins],
+  );
+  const dependents = useMemo(
+    () => manager.getDependents(pluginId, { transitive: false }),
+    [manager, pluginId, plugins],
+  );
+
+  // Resolves a plugin id to its display name. A plugin's translations are
+  // only loaded when it is activated, so the always-available `meta.name`
+  // from the registered plugin set is the right source for chip labels.
+  const handleResolvePluginName = useCallback(
+    (id: string): string => plugins.find((candidate) => candidate.meta.id === id)?.meta.name ?? id,
+    [plugins],
+  );
+
+  const handleNavigateToPlugin = useCallback(
+    (targetId: string) => {
+      void invokePromise(LayoutOperation.Open, {
+        subject: [getPluginPath(targetId)],
+      });
+    },
+    [invokePromise],
+  );
+
+  const actions = usePluginActions({
+    manager,
+    pluginId,
+    isInstalled,
+    moduleUrl,
+    catalogEntry,
+    pickerVersions,
+    selectedVersionTag,
+    syncInstalledVersion,
+  });
+
+  return (
+    <PluginDetail
+      plugin={plugin}
+      enabled={enabled}
+      installing={actions.installing}
+      updating={actions.updating}
+      hasUpdate={hasUpdate}
+      installedVersionTag={installedVersionTag}
+      selectedVersionTag={selectedVersionTag}
+      versions={pickerVersions}
+      dependencies={dependencies}
+      dependents={dependents}
+      failure={failure}
+      onOpenSpec={actions.handleOpenSpec}
+      onEnabledChange={actions.handleEnableChange}
+      onInstall={!isInstalled && moduleUrl ? actions.handleInstall : undefined}
+      onInstallVersion={pickerVersions.length > 0 ? actions.handleInstallVersion : undefined}
+      onNavigateToPlugin={handleNavigateToPlugin}
+      onResolvePluginName={handleResolvePluginName}
+      onUninstall={canUninstall ? actions.handleUninstall : undefined}
+      onUpdate={hasUpdate ? actions.handleUpdate : undefined}
+      onVersionChange={setSelectedVersionTag}
+    />
+  );
+};

package/src/containers/PluginArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { PluginArticle as default } from './PluginArticle';