@dxos/plugin-registry 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -122,29 +122,29 @@
   "dependencies": {
     "@effect/atom-react": "4.0.0",
     "yaml": "^2.8.2",
-    "@dxos/app-framework": "0.13.0",
-    "@dxos/app-graph": "0.13.0",
-    "@dxos/app-toolkit": "0.13.0",
-    "@dxos/cli-util": "0.13.0",
-    "@dxos/client": "0.13.0",
-    "@dxos/client-protocol": "0.13.0",
-    "@dxos/compute": "0.13.0",
-    "@dxos/context": "0.13.0",
-    "@dxos/echo": "0.13.0",
-    "@dxos/edge-client": "0.13.0",
-    "@dxos/effect": "0.13.0",
-    "@dxos/errors": "0.13.0",
-    "@dxos/graph": "0.13.0",
-    "@dxos/keys": "0.13.0",
-    "@dxos/link": "0.13.0",
-    "@dxos/log": "0.13.0",
-    "@dxos/plugin-client": "0.13.0",
-    "@dxos/plugin-graph": "0.13.0",
-    "@dxos/plugin-observability": "0.13.0",
-    "@dxos/protocols": "0.13.0",
-    "@dxos/react-ui-form": "0.13.0",
-    "@dxos/react-ui-markdown": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@dxos/app-framework": "0.14.0",
+    "@dxos/app-graph": "0.14.0",
+    "@dxos/app-toolkit": "0.14.0",
+    "@dxos/cli-util": "0.14.0",
+    "@dxos/client": "0.14.0",
+    "@dxos/client-protocol": "0.14.0",
+    "@dxos/compute": "0.14.0",
+    "@dxos/context": "0.14.0",
+    "@dxos/echo": "0.14.0",
+    "@dxos/edge-client": "0.14.0",
+    "@dxos/effect": "0.14.0",
+    "@dxos/errors": "0.14.0",
+    "@dxos/graph": "0.14.0",
+    "@dxos/keys": "0.14.0",
+    "@dxos/link": "0.14.0",
+    "@dxos/log": "0.14.0",
+    "@dxos/plugin-client": "0.14.0",
+    "@dxos/plugin-graph": "0.14.0",
+    "@dxos/plugin-observability": "0.14.0",
+    "@dxos/protocols": "0.14.0",
+    "@dxos/react-ui-form": "0.14.0",
+    "@dxos/react-ui-markdown": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
     "@effect/atom-react": "4.0.0",
@@ -155,18 +155,18 @@
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.2.2",
-    "@dxos/plugin-testing": "0.13.0",
-    "@dxos/random": "0.13.0",
-    "@dxos/react-ui": "0.13.0",
-    "@dxos/ui-theme": "0.13.0"
+    "@dxos/plugin-testing": "0.14.0",
+    "@dxos/random": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/ui-theme": "0.14.0"
   },
   "peerDependencies": {
     "@effect/atom-react": "4.0.0",
     "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.13.0",
-    "@dxos/ui-theme": "^0.13.0"
+    "@dxos/react-ui": "^0.14.0",
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/RegistryCategoryArticle.tsx

@@ -29,6 +29,7 @@ const useCategoryPredicate = (category: string): PluginPredicate => {
 };
 
 export type RegistryCategoryArticleProps = {
+  contextId: string;
   category: string;
 };
 
@@ -37,7 +38,7 @@ export type RegistryCategoryArticleProps = {
  * `usePluginManager` + `useRegistryPlugins` + `useAutoTags` wiring shared by every category surface,
  * none of which can live in a surface's `props` mapper.
  */
-export const RegistryCategoryArticle = ({ category }: RegistryCategoryArticleProps) => {
+export const RegistryCategoryArticle = ({ contextId, category }: RegistryCategoryArticleProps) => {
   const manager = PluginManagerProvider.usePluginManager();
   const filter = useCategoryPredicate(category);
   const { entries } = useRegistryPlugins();
@@ -46,6 +47,11 @@ export const RegistryCategoryArticle = ({ category }: RegistryCategoryArticlePro
   const filtered = useMemo(() => manager.getPlugins().filter(filter), [manager, filter]);
 
   return (
-    <RegistryArticle id={category} plugins={filtered} extraTagsById={extraTagsById} deviceOnlyIds={deviceOnlyIds} />
+    <RegistryArticle
+      contextId={contextId}
+      plugins={filtered}
+      extraTagsById={extraTagsById}
+      deviceOnlyIds={deviceOnlyIds}
+    />
   );
 };

package/src/capabilities/react-surface.ts

@@ -26,7 +26,7 @@ export default Capability.makeModule(({ externalPlugins = true }: RegistryPlugin
           id: 'registry',
           filter: AppSurface.literal(AppSurface.Article, 'registry'),
           component: PublicRegistryArticle,
-          props: () => ({ id: 'registry' }),
+          props: ({ data: { attendableId } }) => ({ contextId: attendableId }),
         }),
         Surface.create({
           id: LOAD_PLUGIN_DIALOG,
@@ -48,25 +48,25 @@ export default Capability.makeModule(({ externalPlugins = true }: RegistryPlugin
         id: 'bundled',
         filter: AppSurface.literal(AppSurface.Article, 'bundled'),
         component: RegistryCategoryArticle,
-        props: () => ({ category: 'bundled' }),
+        props: ({ data: { attendableId } }) => ({ contextId: attendableId, category: 'bundled' }),
       }),
       Surface.create({
         id: 'installed',
         filter: AppSurface.literal(AppSurface.Article, 'installed'),
         component: RegistryCategoryArticle,
-        props: () => ({ category: 'installed' }),
+        props: ({ data: { attendableId } }) => ({ contextId: attendableId, category: 'installed' }),
       }),
       Surface.create({
         id: 'recommended',
         filter: AppSurface.literal(AppSurface.Article, 'recommended'),
         component: RegistryCategoryArticle,
-        props: () => ({ category: 'recommended' }),
+        props: ({ data: { attendableId } }) => ({ contextId: attendableId, category: 'recommended' }),
       }),
       Surface.create({
         id: 'labs',
         filter: AppSurface.literal(AppSurface.Article, 'labs'),
         component: RegistryCategoryArticle,
-        props: () => ({ category: 'labs' }),
+        props: ({ data: { attendableId } }) => ({ contextId: attendableId, category: 'labs' }),
       }),
       Surface.create({
         id: 'pluginDetails',

package/src/components/PluginDetail/PluginDetail.tsx

@@ -180,10 +180,10 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
             />
 
             <Layout.Grid cols={['fill', 'min']} classNames='row-start-1 col-start-2 col-span-2 gap-x-3 w-full pt-1'>
-              <div className='flex items-center gap-2'>
+              <Layout.Flex align='center' gap='sm'>
                 <h2 className='text-xl'>{name}</h2>
                 {failure && <PluginFailureBadge failure={failure} size='lg' />}
-              </div>
+              </Layout.Flex>
               {onInstall ? (
                 <Button.Root size='md' variant='primary' disabled={installing} onClick={onInstall}>
                   {installing ? t('installing.label') : t('install.label')}
@@ -197,14 +197,14 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
                   />
                 </Field.Root>
               )}
-              <div className='flex items-center gap-1 pt-0.5 text-sm text-fg-muted'>
+              <Layout.Flex align='center' gap='xs' classNames='pt-0.5 text-sm text-fg-muted'>
                 {slug}
                 {author && (
                   <span className='dx-tag dx-tag-inline' data-hue='info'>
                     {author}
                   </span>
                 )}
-              </div>
+              </Layout.Flex>
             </Layout.Grid>
 
             {scope && (
@@ -242,7 +242,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
             <Section.Root>
               <Section.Heading title={t('resources.label')} />
               <Section.Body>
-                <div className='flex gap-3 items-center'>
+                <Layout.Flex gap='md' align='center'>
                   {homePage && (
                     <Typography.Link href={homePage} classNames='text-sm text-fg-muted'>
                       {t('home-page.label')}
@@ -266,7 +266,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
                   )}
 
                   {onOpenSpec && <Chip id={slug} name={t('open-spec.label')} onClick={onOpenSpec} />}
-                </div>
+                </Layout.Flex>
               </Section.Body>
             </Section.Root>
 
@@ -274,7 +274,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
               <Section.Root>
                 <Section.Heading title={t('dependencies.label')} />
                 <Section.Body>
-                  <div className='flex flex-wrap gap-1'>
+                  <Layout.Flex wrap gap='xs'>
                     {dependencies.map((depId) => (
                       <Chip
                         key={depId}
@@ -283,7 +283,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
                         onClick={onNavigateToPlugin}
                       />
                     ))}
-                  </div>
+                  </Layout.Flex>
                 </Section.Body>
               </Section.Root>
             )}
@@ -292,7 +292,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
               <Section.Root>
                 <Section.Heading title={t('dependents.label')} />
                 <Section.Body>
-                  <div className='flex flex-wrap gap-1'>
+                  <Layout.Flex wrap gap='xs'>
                     {dependents.map((dependentId) => (
                       <Chip
                         key={dependentId}
@@ -301,7 +301,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
                         onClick={onNavigateToPlugin}
                       />
                     ))}
-                  </div>
+                  </Layout.Flex>
                 </Section.Body>
               </Section.Root>
             )}
@@ -310,7 +310,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
               <Section.Root>
                 <Section.Heading title={t('versions.label')} />
                 <Section.Body>
-                  <div className='flex gap-2 items-center'>
+                  <Layout.Flex gap='sm' align='center'>
                     <Select.Root
                       items={versionItems}
                       value={selectedVersionTag ? [selectedVersionTag] : []}
@@ -333,13 +333,13 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
                         {installing ? t('installing.label') : t('install-version.label')}
                       </Button.Root>
                     )}
-                  </div>
+                  </Layout.Flex>
                 </Section.Body>
               </Section.Root>
             )}
 
             {(onUninstall || (hasUpdate && onUpdate) || updating) && (
-              <div className='col-start-2 col-span-2 flex gap-2'>
+              <Layout.Flex gap='sm' classNames='col-start-2 col-span-2'>
                 {updating ? (
                   <Button.Root variant='primary' disabled>
                     {t('updating.label')}
@@ -350,7 +350,7 @@ export const PluginDetail = Util.composable<HTMLDivElement, PluginDetailProps>(
                   </Button.Root>
                 ) : null}
                 {onUninstall && <Button.Root onClick={onUninstall}>{t('uninstall.label')}</Button.Root>}
-              </div>
+              </Layout.Flex>
             )}
           </Layout.Grid>
         </ScrollArea.Viewport>
@@ -368,7 +368,9 @@ const SectionHeading = ({ title }: { title: string }) => (
 );
 
 const SectionBody = ({ classNames, children }: Util.ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('col-start-2 flex flex-col gap-2', classNames)}>{children}</div>
+  <Layout.Flex column gap='sm' classNames={['col-start-2', classNames]}>
+    {children}
+  </Layout.Flex>
 );
 
 const Section = {

package/src/components/PluginFailureBadge/PluginFailureBadge.tsx

@@ -7,6 +7,7 @@ import React, { type ComponentPropsWithoutRef } from 'react';
 import type * as PluginManager from '@dxos/app-framework/PluginManager';
 import * as Button from '@dxos/react-ui/Button';
 import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Layout from '@dxos/react-ui/Layout';
 import * as Popover from '@dxos/react-ui/Popover';
 
 import { meta } from '#meta';
@@ -43,7 +44,7 @@ export const PluginFailureBadge = ({ failure, size }: PluginFailureBadgeProps) =
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Body>
-          <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
+          <Layout.Flex column gap='xs' classNames='px-3 py-2 min-w-[18rem] max-w-[28rem]'>
             <p className='font-medium text-sm'>
               {t('failure-title.label', {
                 phase: failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label'),
@@ -52,7 +53,7 @@ export const PluginFailureBadge = ({ failure, size }: PluginFailureBadgeProps) =
               })}
             </p>
             <p className='text-fg-muted text-sm break-words'>{failure.error.message}</p>
-          </div>
+          </Layout.Flex>
         </Popover.Body>
       </Popover.Content>
     </Popover.Root>

package/src/components/PluginList/PluginItem.tsx

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { type MouseEvent, useCallback, useMemo } from 'react';
 
 import type * as Plugin from '@dxos/app-framework/Plugin';
 import type * as PluginManager from '@dxos/app-framework/PluginManager';
+import type * as ToolkitHooks from '@dxos/app-toolkit/Hooks';
 import * as Button from '@dxos/react-ui/Button';
 import * as Card from '@dxos/react-ui/Card';
 import * as Hooks from '@dxos/react-ui/Hooks';
@@ -34,7 +35,7 @@ export type PluginItemProps = {
   extraTags?: readonly string[];
   /** Whether this device's answer for this plugin differs from the account's. */
   deviceOnly?: boolean;
-  onClick?: (id: string) => void;
+  onClick?: (id: string, activation: ToolkitHooks.DetailActivation) => void;
   onChange?: (id: string, enabled: boolean) => void;
   /**
    * Install handler. When provided and the plugin is not installed, an Install button
@@ -101,7 +102,10 @@ export const PluginItem = ({
   const showUpdateButton = !!onUpdate && isInstalled && !!hasUpdate;
   const hasSettings = hasSettingsProp?.(id) ?? false;
   const titleId = `${id}-title`;
-  const handleClick = useCallback(() => onClick?.(id), [id, onClick]);
+  const handleClick = useCallback(
+    (event: MouseEvent) => onClick?.(id, { modified: event.metaKey || event.ctrlKey }),
+    [id, onClick],
+  );
   const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
   const handleInstall = useCallback(() => onInstall?.(id), [id, onInstall]);
   const handleUpdate = useCallback(() => onUpdate?.(id), [id, onUpdate]);

package/src/containers/BaseRegistryArticle/BaseRegistryArticle.tsx

@@ -12,7 +12,7 @@ import '@dxos/react-ui/theme.css';
 import type * as Plugin from '@dxos/app-framework/Plugin';
 import * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
+import * as ToolkitHooks from '@dxos/app-toolkit/Hooks';
 import * as SettingsOperation from '@dxos/app-toolkit/SettingsOperation';
 import * as EffectEx from '@dxos/effect/EffectEx';
 import * as ObservabilityOperation from '@dxos/plugin-observability/ObservabilityOperation';
@@ -36,8 +36,7 @@ const matchesFilter = (plugin: Plugin.Plugin, query: string) => {
 };
 
 export type BaseRegistryArticleProps = {
-  /** Article id used as the pivotId when opening a plugin's detail surface. */
-  id: string;
+  contextId: string;
   /** Plugins to display, pre-sorted by the caller. */
   plugins: readonly Plugin.Plugin[];
   /**
@@ -63,7 +62,7 @@ export type BaseRegistryArticleProps = {
 export const BaseRegistryArticle = Util.composable<HTMLDivElement, BaseRegistryArticleProps>(
   (
     {
-      id,
+      contextId,
       plugins,
       source,
       empty,
@@ -124,15 +123,7 @@ export const BaseRegistryArticle = Util.composable<HTMLDivElement, BaseRegistryA
       [dispatchToggle, requestDisable],
     );
 
-    const handleClick = useCallback(
-      (pluginId: string) =>
-        invokePromise(LayoutOperation.Open, {
-          subject: [getPluginPath(pluginId)],
-          pivotId: getPluginPath(id),
-          disposition: 'add',
-        }),
-      [invokePromise, id],
-    );
+    const handleClick = ToolkitHooks.useDetailNavigation({ contextId, getPath: getPluginPath });
 
     const hasSettings = useCallback(
       (pluginId: string) => allSettings.some((setting) => setting.prefix === pluginId),

package/src/containers/PluginArticle/PluginArticle.tsx

@@ -82,7 +82,7 @@ export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
       void invokePromise(LayoutOperation.Open, {
         subject: [getPluginPath(targetId)],
         pivotId: getPluginPath(pluginId),
-        disposition: 'add',
+        disposition: 'detail',
       });
     },
     [invokePromise, pluginId],

package/src/containers/PublicRegistryArticle/PublicRegistryArticle.tsx

@@ -52,11 +52,11 @@ const toDisplayPlugin = (plugin: Plugin.Meta): Plugin.Plugin =>
   }) as Plugin.Plugin;
 
 export type PublicRegistryArticleProps = {
-  id: string;
+  contextId: string;
 };
 
 export const PublicRegistryArticle = Util.composable<HTMLDivElement, PublicRegistryArticleProps>(
-  ({ id, ...props }, forwardedRef) => {
+  ({ contextId, ...props }, forwardedRef) => {
     const { t } = UiHooks.useTranslation(meta.profile.key);
     const manager = PluginManagerProvider.usePluginManager();
     const { invoke } = Hooks.useOperationInvoker();
@@ -187,7 +187,7 @@ export const PublicRegistryArticle = Util.composable<HTMLDivElement, PublicRegis
     return (
       <BaseRegistryArticle
         {...props}
-        id={id}
+        contextId={contextId}
         source='registry'
         plugins={items}
         installed={installedIds}

package/src/containers/RegistryArticle/RegistryArticle.tsx

@@ -16,7 +16,7 @@ const sortByPluginMeta = (a: Plugin.Plugin, b: Plugin.Plugin) =>
   (a.meta.profile.name ?? a.meta.profile.key).localeCompare(b.meta.profile.name ?? b.meta.profile.key);
 
 export type RegistryArticleProps = {
-  id: string;
+  contextId: string;
   plugins: Plugin.Plugin[];
   /**
    * Map from plugin id → display-only tags (e.g. `registry`, `local`) computed by the caller.
@@ -25,7 +25,7 @@ export type RegistryArticleProps = {
 };
 
 export const RegistryArticle = Util.composable<HTMLDivElement, RegistryArticleProps>(
-  ({ id, plugins: pluginsProp, extraTagsById, ...props }, forwardedRef) => {
+  ({ contextId, plugins: pluginsProp, extraTagsById, ...props }, forwardedRef) => {
     const manager = PluginManagerProvider.usePluginManager();
     const failed = useAtomValue(manager.failed);
     const plugins = useMemo(() => [...pluginsProp].sort(sortByPluginMeta), [pluginsProp]);
@@ -41,7 +41,7 @@ export const RegistryArticle = Util.composable<HTMLDivElement, RegistryArticlePr
     return (
       <BaseRegistryArticle
         {...props}
-        id={id}
+        contextId={contextId}
         plugins={plugins}
         extraTagsById={extraTagsById}
         failuresById={failuresById}

package/src/hooks/usePluginActions.ts

@@ -78,7 +78,7 @@ export const usePluginActions = ({
     void invokePromise(LayoutOperation.Open, {
       subject: [specPath],
       pivotId: getPluginPath(pluginId),
-      disposition: 'add',
+      disposition: 'detail',
     });
   }, [invokePromise, specPath, pluginId]);