@dxos/plugin-registry 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -59,52 +59,52 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/cli": "0.75.2",
     "yaml": "^2.8.2",
-    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
-    "@dxos/client": "0.9.1-main.c7dcc2e112",
-    "@dxos/client-protocol": "0.9.1-main.c7dcc2e112",
-    "@dxos/cli-util": "0.9.1-main.c7dcc2e112",
-    "@dxos/compute": "0.9.1-main.c7dcc2e112",
-    "@dxos/edge-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/protocols": "0.9.1-main.c7dcc2e112",
-    "@dxos/context": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-observability": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-stack": "0.9.1-main.c7dcc2e112",
-    "@dxos/types": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-markdown": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
+    "@dxos/cli-util": "0.9.1-staging.ee54ba693a",
+    "@dxos/client": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
+    "@dxos/client-protocol": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute": "0.9.1-staging.ee54ba693a",
+    "@dxos/context": "0.9.1-staging.ee54ba693a",
+    "@dxos/edge-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/protocols": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-observability": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-markdown": "0.9.1-staging.ee54ba693a",
+    "@dxos/types": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-mosaic": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "@types/react": "~19.2.7",
+    "@effect/platform": "0.96.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/plugin-testing": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112"
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

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

@@ -9,8 +9,9 @@ import { AppCapabilities, LayoutOperation, SettingsOperation } from '@dxos/app-t
 import { Operation } from '@dxos/compute';
 import { DXN } from '@dxos/keys';
 import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
+import { Position } from '@dxos/util';
 
-import { REGISTRY_ID, REGISTRY_KEY, registryCategoryId, meta } from '#meta';
+import { REGISTRY_ID, REGISTRY_KEY, meta, registryCategoryId } from '#meta';
 
 import { getCategoryPredicate, getRemotePluginIds } from '../categories';
 import { LOAD_PLUGIN_DIALOG } from '../containers';
@@ -82,7 +83,7 @@ export default Capability.makeModule(
                 label: ['plugin-registry.label', { ns: meta.profile.key }],
                 icon: 'ph--squares-four--regular',
                 disposition: 'pin-end',
-                position: 'first',
+                position: Position.first,
                 testId: 'treeView.pluginRegistry',
               },
               nodes: [

package/src/commands/registry/publish-package.ts

@@ -17,7 +17,7 @@ import { AUTH_OPTION_DESCRIPTIONS, NSID, putRecord, resolveSession } from './uti
 
 /**
  * `dx registry publish-package` — publishes both the mutable
- * `package.profile` (rkey = key) and a `package.release`
+ * `plugin.profile` (rkey = key) and a `plugin.release`
  * (rkey = `<key>:<version>`) record to the authenticated user's PDS.
  *
  * The two writes are independent `putRecord` (upsert) calls; if the second fails the
@@ -94,12 +94,12 @@ export const publishPackage = Command.make(
           createdAt,
         };
 
-        const profileResult = yield* putRecord(session, NSID.PackageProfile, options.key, profile);
+        const profileResult = yield* putRecord(session, NSID.PluginProfile, options.key, profile);
         yield* Console.log(`Profile  ${profileResult.uri}`);
 
         const manifestHash = Option.getOrUndefined(options.manifestHash);
-        const release: PluginRelease & { package: string; createdAt: string } = {
-          package: options.key,
+        const release: PluginRelease & { pluginKey: string; manifestHash?: string; createdAt: string } = {
+          pluginKey: options.key,
           version: options.version,
           moduleUrl: options.moduleUrl,
           createdAt,
@@ -108,7 +108,7 @@ export const publishPackage = Command.make(
 
         const releaseResult = yield* putRecord(
           session,
-          NSID.PackageRelease,
+          NSID.PluginRelease,
           `${options.key}:${options.version}`,
           release,
         );

package/src/commands/registry/publish.ts

@@ -43,8 +43,8 @@ const sha256Base64 = async (bytes: Uint8Array): Promise<string> => {
  * Reads the build/publish orchestration from `dx.config.ts`, runs the declared build command,
  * reads the emitted `manifest.json`, hosts the bundle (default: upload the build
  * output to the DXOS edge registry; override with `publish.assetBaseUrl` to point
- * at your own already-hosted directory), then writes the `package.profile` and
- * `package.release` records to the authenticated publisher's PDS. Release
+ * at your own already-hosted directory), then writes the `plugin.profile` and
+ * `plugin.release` records to the authenticated publisher's PDS. Release
  * integrity is anchored by `manifestHash` (sha256 of `manifest.json`) in the
  * signed release record.
  */
@@ -181,11 +181,11 @@ export const publish = Command.make(
           profile.spec = manifest.spec;
         }
 
-        const profileResult = yield* putRecord(session, NSID.PackageProfile, key, profile);
+        const profileResult = yield* putRecord(session, NSID.PluginProfile, key, profile);
         yield* Console.log(`Profile    ${profileResult.uri}`);
 
-        const releaseResult = yield* putRecord(session, NSID.PackageRelease, `${key}:${version}`, {
-          package: key,
+        const releaseResult = yield* putRecord(session, NSID.PluginRelease, `${key}:${version}`, {
+          pluginKey: key,
           version,
           moduleUrl,
           manifestHash,

package/src/commands/registry/records.ts

@@ -13,7 +13,7 @@ import * as Option from 'effect/Option';
 import { CommandConfig } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
 
-import { ALL_NSIDS, AUTH_OPTION_DESCRIPTIONS, listRecords, resolveSession, type ListRecordsEntry } from './util';
+import { ALL_NSIDS, AUTH_OPTION_DESCRIPTIONS, type ListRecordsEntry, listRecords, resolveSession } from './util';
 
 /**
  * `dx registry records` — lists all `org.dxos.experimental.*` records on the

package/src/commands/registry/unpublish.ts

@@ -17,8 +17,8 @@ import { AUTH_OPTION_DESCRIPTIONS, NSID, deleteRecord, listRecords, resolveSessi
 const rkeyOf = (uri: string): string => uri.split('/').pop() ?? '';
 
 /**
- * `dx registry unpublish` — removes a package from the authenticated user's PDS:
- * deletes the `package.profile` (rkey = key) and every `package.release`
+ * `dx registry unpublish` — removes a plugin from the authenticated user's PDS:
+ * deletes the `plugin.profile` (rkey = key) and every `plugin.release`
  * (rkey = `<key>:<version>`). The registry indexer unindexes on its next sweep.
  * Hosted bundles in edge R2 are immutable and are not removed.
  */
@@ -31,7 +31,7 @@ export const unpublish = Command.make(
       Options.optional,
     ),
     key: Options.text('key').pipe(
-      Options.withDescription('Package key (the profile rkey). Removes its profile and all releases.'),
+      Options.withDescription('Plugin key (the profile rkey). Removes its profile and all releases.'),
     ),
   },
   (options) =>
@@ -49,12 +49,12 @@ export const unpublish = Command.make(
         let cursor: string | undefined;
         let deletedReleases = 0;
         do {
-          const releases = yield* listRecords(session, NSID.PackageRelease, { limit: 100, cursor });
+          const releases = yield* listRecords(session, NSID.PluginRelease, { limit: 100, cursor });
           cursor = releases.cursor;
           for (const record of releases.records) {
             const rkey = rkeyOf(record.uri);
             if (rkey.startsWith(`${key}:`)) {
-              yield* deleteRecord(session, NSID.PackageRelease, rkey);
+              yield* deleteRecord(session, NSID.PluginRelease, rkey);
               yield* Console.log(`Deleted release ${rkey}`);
               deletedReleases += 1;
             }
@@ -62,7 +62,7 @@ export const unpublish = Command.make(
         } while (cursor !== undefined);
 
         // Delete the profile (rkey = key).
-        yield* deleteRecord(session, NSID.PackageProfile, key);
+        yield* deleteRecord(session, NSID.PluginProfile, key);
         yield* Console.log(`Deleted profile ${key} (${deletedReleases} release(s) removed)`);
       }),
       Effect.provide(FetchHttpClient.layer),

package/src/commands/registry/util.ts

@@ -32,7 +32,7 @@ export { ALL_NSIDS, NSID };
  */
 
 // `AccessToken.source` of the default atproto / login integration ("Atmosphere"). Mirrors
-// `ATMOSPHERE_SOURCE` in plugin-integration; inlined to avoid a plugin-registry -> plugin-integration
+// `ATMOSPHERE_SOURCE` in plugin-connector; inlined to avoid a plugin-registry -> plugin-connector
 // dependency.
 const ATMOSPHERE_SOURCE = 'atproto.local';
 

package/src/components/PluginDetail/PluginDetail.stories.tsx

@@ -13,6 +13,23 @@ import { translations } from '#translations';
 
 import { PluginDetail } from './PluginDetail';
 
+const plugin = Plugin.define(
+  Plugin.makeMeta({
+    key: DXN.make('com.example.plugin.test'),
+    name: 'Test Plugin',
+    author: 'DXOS',
+    description: random.lorem.paragraphs(2),
+    icon: { key: 'ph--bug--regular', hue: 'sky' },
+    homePage: 'https://example.com',
+    source: 'https://github.com/example/test-plugin',
+    screenshots: [
+      {
+        light: 'https://placehold.co/1728x990',
+      },
+    ],
+  }),
+);
+
 const meta = {
   title: 'plugins/plugin-registry/components/PluginDetail',
   component: PluginDetail,
@@ -29,22 +46,19 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    plugin: Plugin.define(
-      Plugin.makeMeta({
-        key: DXN.make('com.example.plugin.test'),
-        name: 'Test Plugin',
-        author: 'DXOS',
-        description: random.lorem.paragraphs(2),
-        icon: { key: 'ph--bug--regular', hue: 'sky' },
-        homePage: 'https://example.com',
-        source: 'https://github.com/example/test-plugin',
-        screenshots: [
-          {
-            light:
-              'https://media.gcflearnfree.org/content/55e073de7dd48174331f51b3_01_17_2014/getting_started_interactive2.png',
-          },
-        ],
-      }),
-    ).pipe(Plugin.make)(),
+    plugin: plugin.pipe(Plugin.make)(),
+  },
+};
+
+export const Failure: Story = {
+  args: {
+    plugin: plugin.pipe(Plugin.make)(),
+    failure: {
+      id: 'com.example.plugin.test',
+      phase: 'activation',
+      reason: 'error',
+      error: new Error(random.lorem.paragraph(2)),
+      timestamp: Date.now(),
+    },
   },
 };

package/src/components/PluginFailureBadge/PluginFailureBadge.tsx

@@ -15,8 +15,6 @@ type IconSize = 4 | 5 | 6 | 8;
 
 export type PluginFailureBadgeProps = {
   failure: PluginManager.PluginFailure;
-  /** Optional override for the trigger icon's tailwind classes. */
-  iconClassNames?: string;
   /** Visual size of the warning icon (passed through to react-ui `<Icon />`). */
   size?: IconSize;
 };
@@ -28,41 +26,40 @@ export type PluginFailureBadgeProps = {
  * message — enough for an operator to tell "remote host is offline" apart
  * from "the plugin crashed".
  */
-export const PluginFailureBadge = ({ failure, iconClassNames, size = 4 }: PluginFailureBadgeProps) => {
+export const PluginFailureBadge = ({ failure, size }: PluginFailureBadgeProps) => {
   const { t } = useTranslation(meta.profile.key);
 
-  const phaseLabel = failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label');
-  const reasonLabel =
-    failure.reason === 'timeout' ? t('failure-reason-timeout.label') : t('failure-reason-error.label');
-
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
         <IconButton
-          variant='ghost'
+          variant='destructive'
+          icon='ph--warning--bold'
           iconOnly
           noTooltip
-          icon='ph--warning--bold'
           size={size}
-          iconClassNames={iconClassNames}
           label={t('failure-badge.label')}
           data-testid={`pluginFailureBadge.${failure.id}`}
-          // Don't bubble up to row click handlers (e.g. the card's `onClick`
-          // that opens the details pane). The popover is the action here.
           onClick={(event) => event.stopPropagation()}
         />
       </Popover.Trigger>
-      <Popover.Content>
-        <Popover.Viewport>
-          <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
-            <p className='font-medium text-sm'>
-              {t('failure-title.label', { phase: phaseLabel, reason: reasonLabel })}
-            </p>
-            <p className='text-description text-sm break-words'>{failure.error.message}</p>
-          </div>
-        </Popover.Viewport>
-        <Popover.Arrow />
-      </Popover.Content>
+      <Popover.Portal>
+        <Popover.Content>
+          <Popover.Viewport>
+            <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
+              <p className='font-medium text-sm'>
+                {t('failure-title.label', {
+                  phase: failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label'),
+                  reason:
+                    failure.reason === 'timeout' ? t('failure-reason-timeout.label') : t('failure-reason-error.label'),
+                })}
+              </p>
+              <p className='text-description text-sm break-words'>{failure.error.message}</p>
+            </div>
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 };

package/src/components/PluginList/PluginItem.tsx

@@ -12,11 +12,11 @@ import {
   IconButton,
   Input,
   Link,
-  ListItem,
   type NeutralPalette,
   Tag,
   useTranslation,
 } from '@dxos/react-ui';
+import { Listbox } from '@dxos/react-ui-list';
 import { mx } from '@dxos/ui-theme';
 import { getStyles } from '@dxos/ui-theme';
 
@@ -99,7 +99,6 @@ export const PluginItem = ({
   const showInstallButton = !!onInstall && !isInstalled;
   const showUpdateButton = !!onUpdate && isInstalled && !!hasUpdate;
   const inputId = `${id}-input`;
-  const labelId = `${id}-label`;
   const descriptionId = `${id}-description`;
   const handleClick = useCallback(() => onClick?.(id), [id, onClick]);
 
@@ -134,12 +133,16 @@ export const PluginItem = ({
   const gridRows = 'grid grid-cols-1 grid-rows-[40px_1fr_min-content_40px]';
 
   return (
-    <ListItem.Root
-      key={id}
-      labelId={labelId}
+    <Listbox.Item
+      id={id}
       data-testid={`pluginList.${id}`}
       aria-describedby={descriptionId}
-      classNames={mx(gridCols, 'h-[14rem] w-full gap-3 pe-2 bg-modal-surface rounded-md overflow-hidden')}
+      classNames={mx(
+        gridCols,
+        // Override `Listbox.Item`'s default row chrome (flex/items-center/padding/cursor) so the
+        // bespoke card grid stretches both columns to full height and controls its own padding.
+        'items-stretch p-0 pe-2 cursor-default h-[14rem] w-full gap-3 bg-modal-surface rounded-md overflow-hidden',
+      )}
     >
       <div className={mx(gridRows, 'rounded-l-md', styles.surface)}>
         <div className='flex justify-center row-start-2 cursor-pointer' onClick={handleClick}>
@@ -159,7 +162,7 @@ export const PluginItem = ({
 
         <div className='flex -ms-0.5 overflow-x-auto scrollbar-none'>
           {displayTags.map((tag: string) => (
-            <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase'>
+            <Tag key={tag} hue={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase'>
               {tag}
             </Tag>
           ))}
@@ -209,7 +212,7 @@ export const PluginItem = ({
           </div>
         </div>
       </div>
-    </ListItem.Root>
+    </Listbox.Item>
   );
 };
 

package/src/components/PluginList/PluginList.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type Plugin, type PluginManager } from '@dxos/app-framework';
-import { List } from '@dxos/react-ui';
+import { Listbox } from '@dxos/react-ui-list';
 
 import { PluginItem, type PluginItemProps } from './PluginItem';
 
@@ -36,17 +36,22 @@ export const PluginList = ({
   ...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.profile.key}
-          plugin={plugin}
-          extraTags={extraTagsById?.[plugin.meta.profile.key]}
-          hasUpdate={updateAvailableIds?.has(plugin.meta.profile.key)}
-          failure={failuresById?.[plugin.meta.profile.key]}
-          {...props}
-        />
-      ))}
-    </List>
+    <Listbox.Root>
+      <Listbox.Content
+        aria-label='plugins'
+        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.profile.key}
+            plugin={plugin}
+            extraTags={extraTagsById?.[plugin.meta.profile.key]}
+            hasUpdate={updateAvailableIds?.has(plugin.meta.profile.key)}
+            failure={failuresById?.[plugin.meta.profile.key]}
+            {...props}
+          />
+        ))}
+      </Listbox.Content>
+    </Listbox.Root>
   );
 };

package/src/components/RegistrySettings/RegistrySettings.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { RegistrySettings } from './RegistrySettings';
+
+const meta = {
+  title: 'plugins/plugin-registry/components/RegistrySettings',
+  component: RegistrySettings,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof RegistrySettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: { devPluginUrl: 'http://localhost:3967', devPluginEnabled: false },
+    onSettingsChange: () => {},
+    activeDevPluginIds: [],
+    onEnableDev: async () => {},
+    onDisableDev: async () => {},
+  },
+};
+
+export const Enabled: Story = {
+  args: {
+    settings: { devPluginUrl: 'http://localhost:3967', devPluginEnabled: true },
+    onSettingsChange: () => {},
+    activeDevPluginIds: [],
+    onEnableDev: async () => {},
+    onDisableDev: async () => {},
+  },
+};

package/src/components/RegistrySettings/RegistrySettings.tsx

@@ -7,13 +7,13 @@ 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 { Form } from '@dxos/react-ui-form';
 
 import { meta } from '#meta';
 
-import { type RegistrySettings as RegistrySettingsType } from '../../types';
+import { RegistrySettingsSchema, type RegistrySettings as RegistrySettingsType } from '../../types';
 
-export type RegistrySettingsProps = AppSurface.SettingsArticleProps<
+export type RegistrySettingsProps = AppSurface.SettingsProps<
   RegistrySettingsType,
   {
     activeDevPluginIds: readonly string[];
@@ -29,6 +29,10 @@ export type RegistrySettingsProps = AppSurface.SettingsArticleProps<
  * 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).
+ *
+ * The URL input and toggle are rendered as `Form.Row` action rows (not schema
+ * fields): the input needs a dynamic disabled state and the toggle runs async
+ * enable/disable side effects, neither of which a plain schema field expresses.
  */
 export const RegistrySettings = ({
   settings,
@@ -87,34 +91,41 @@ export const RegistrySettings = ({
       : 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>
+    <Form.Root variant='settings' readonly={!onSettingsChange} schema={RegistrySettingsSchema} values={settings}>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('dev-plugin.section.title')}>
+            <Message.Root valence='neutral'>
+              <Message.Content>{t('dev-plugin.description')}</Message.Content>
+            </Message.Root>
+            <Form.Row label={t('dev-plugin.url.label')} description={t('dev-plugin.url.description')}>
+              <Input.Root>
+                <Input.TextInput
+                  disabled={!onSettingsChange || enabled || busy}
+                  value={url}
+                  onChange={(event) =>
+                    onSettingsChange?.((current) => ({ ...current, devPluginUrl: event.target.value }))
+                  }
+                />
+              </Input.Root>
+            </Form.Row>
+            <Form.Row label={t('dev-plugin.toggle.label')} description={t('dev-plugin.toggle.description')}>
+              <Button
+                variant={enabled ? undefined : 'primary'}
+                disabled={!onSettingsChange || busy || (!enabled && !trimmedUrl)}
+                onClick={() => void handleToggle()}
+              >
+                {buttonLabel}
+              </Button>
+            </Form.Row>
+            {enabled && !loadedDevId && !busy && (
+              <Message.Root valence='warning'>
+                <Message.Content>{t('dev-plugin.not-loaded.message')}</Message.Content>
+              </Message.Root>
+            )}
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };

package/src/containers/PublicRegistryArticle/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export { PublicRegistryArticle as default, PublicRegistryArticle } from './PublicRegistryArticle';
+export { PublicRegistryArticle, PublicRegistryArticle as default } from './PublicRegistryArticle';

package/src/containers/RegistryArticle/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { RegistryArticle as default, RegistryArticle } from './RegistryArticle';
+export { RegistryArticle, RegistryArticle as default } from './RegistryArticle';