@dxos/plugin-registry 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
@@ -24,41 +25,40 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@dxos/app-framework": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/echo": "0.8.4-main.84f28bd",
-    "@dxos/plugin-graph": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/plugin-observability": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-form": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-stack": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/echo": "0.8.4-main.a4bbb77",
+    "@dxos/app-framework": "0.8.4-main.a4bbb77",
+    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
+    "@dxos/invariant": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-graph": "0.8.4-main.a4bbb77",
+    "@dxos/live-object": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-form": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-observability": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-stack": "0.8.4-main.a4bbb77",
+    "@dxos/util": "0.8.4-main.a4bbb77"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.88.0",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "@types/react": "~19.2.0",
+    "@types/react-dom": "~19.2.0",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
+    "@dxos/storybook-utils": "0.8.4-main.a4bbb77"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
   },
   "publishConfig": {
     "access": "public"

package/src/RegistryPlugin.tsx

@@ -2,32 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 
 import { AppGraphBuilder, IntentResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
 
-export const RegistryPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-  ]);
+export const RegistryPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+]);

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

@@ -5,15 +5,15 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { Capabilities, contributes, createIntent, SettingsAction, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, SettingsAction, contributes, createIntent } from '@dxos/app-framework';
 import { createExtension } from '@dxos/plugin-graph';
 
-import { REGISTRY_ID, REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
+import { REGISTRY_ID, REGISTRY_KEY, meta } from '../meta';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: REGISTRY_PLUGIN,
+      id: meta.id,
       actions: (node) =>
         Rx.make((get) =>
           pipe(
@@ -21,13 +21,13 @@ export default (context: PluginContext) =>
             Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
             Option.map((node) => [
               {
-                id: REGISTRY_PLUGIN,
+                id: meta.id,
                 data: async () => {
                   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
                   await dispatch(createIntent(SettingsAction.OpenPluginRegistry));
                 },
                 properties: {
-                  label: ['open plugin registry label', { ns: REGISTRY_PLUGIN }],
+                  label: ['open plugin registry label', { ns: meta.id }],
                   icon: 'ph--squares-four--regular',
                   disposition: 'menu',
                 },
@@ -38,7 +38,7 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: REGISTRY_PLUGIN,
+      id: meta.id,
       connector: (node) =>
         Rx.make((get) =>
           pipe(
@@ -47,9 +47,9 @@ export default (context: PluginContext) =>
             Option.map((node) => [
               {
                 id: REGISTRY_ID,
-                type: REGISTRY_PLUGIN,
+                type: meta.id,
                 properties: {
-                  label: ['plugin registry label', { ns: REGISTRY_PLUGIN }],
+                  label: ['plugin registry label', { ns: meta.id }],
                   icon: 'ph--squares-four--regular',
                   disposition: 'pin-end',
                   testId: 'treeView.pluginRegistry',
@@ -60,7 +60,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+all`,
                     properties: {
-                      label: ['all plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['all plugins label', { ns: meta.id }],
                       icon: 'ph--squares-four--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.all',
@@ -71,7 +71,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+installed`,
                     properties: {
-                      label: ['installed plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['installed plugins label', { ns: meta.id }],
                       icon: 'ph--check--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.installed',
@@ -82,7 +82,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+recommended`,
                     properties: {
-                      label: ['recommended plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['recommended plugins label', { ns: meta.id }],
                       icon: 'ph--star--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.recommended',
@@ -93,7 +93,7 @@ export default (context: PluginContext) =>
                     type: 'category',
                     data: `${REGISTRY_KEY}+labs`,
                     properties: {
-                      label: ['labs plugins label', { ns: REGISTRY_PLUGIN }],
+                      label: ['labs plugins label', { ns: meta.id }],
                       icon: 'ph--flask--regular',
                       key: REGISTRY_KEY,
                       testId: 'pluginRegistry.labs',
@@ -107,7 +107,7 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${REGISTRY_PLUGIN}/actions`,
+      id: `${meta.id}/actions`,
       actions: (node) =>
         Rx.make((get) =>
           pipe(
@@ -115,10 +115,10 @@ export default (context: PluginContext) =>
             Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
             Option.map(() => [
               {
-                id: `${REGISTRY_PLUGIN}/load-by-url`,
+                id: `${meta.id}/load-by-url`,
                 data: async () => {},
                 properties: {
-                  label: ['load by url label', { ns: REGISTRY_PLUGIN }],
+                  label: ['load by url label', { ns: meta.id }],
                   icon: 'ph--cloud-arrow-down--regular',
                   disabled: true,
                 },
@@ -129,7 +129,7 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${REGISTRY_PLUGIN}/plugins`,
+      id: `${meta.id}/plugins`,
       connector: (node) =>
         Rx.make((get) =>
           pipe(

package/src/capabilities/intent-resolver.ts

@@ -3,12 +3,12 @@
 //
 
 import {
-  contributes,
-  SettingsAction,
-  createResolver,
-  LayoutAction,
   Capabilities,
+  LayoutAction,
+  SettingsAction,
+  contributes,
   createIntent,
+  createResolver,
 } from '@dxos/app-framework';
 
 import { REGISTRY_ID } from '../meta';

package/src/capabilities/react-surface.tsx

@@ -4,16 +4,15 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface, Plugin, usePluginManager } from '@dxos/app-framework';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Capabilities, Plugin, contributes, createSurface, usePluginManager } from '@dxos/app-framework';
 
 import { PluginDetail, RegistryContainer } from '../components';
-import { REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
+import { REGISTRY_KEY, meta } from '../meta';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${REGISTRY_PLUGIN}/all`,
+      id: `${meta.id}/all`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+all`,
       component: () => {
@@ -24,7 +23,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/installed`,
+      id: `${meta.id}/installed`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+installed`,
       component: () => {
@@ -41,7 +40,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/recommended`,
+      id: `${meta.id}/recommended`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+recommended`,
       component: () => {
@@ -58,7 +57,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/labs`,
+      id: `${meta.id}/labs`,
       role: 'article',
       filter: (data): data is any => data.subject === `${REGISTRY_KEY}+labs`,
       component: () => {
@@ -69,7 +68,7 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${REGISTRY_PLUGIN}/plugin-details`,
+      id: `${meta.id}/plugin-details`,
       role: 'article',
       filter: (data): data is { subject: Plugin } => data.subject instanceof Plugin,
       component: ({ data: { subject } }) => {
@@ -80,11 +79,7 @@ export default () =>
           [manager, subject.meta.id, enabled],
         );
 
-        return (
-          <StackItem.Content role='article'>
-            <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />
-          </StackItem.Content>
-        );
+        return <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />;
       },
     }),
   ]);

package/src/components/Icon.stories.tsx

@@ -2,12 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { IconBase, type IconWeight, GithubLogo, type IconProps } from '@phosphor-icons/react';
-import { type Meta } from '@storybook/react-vite';
-import React, { forwardRef, type SVGProps, type ReactElement } from 'react';
+import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type ReactElement, type SVGProps, forwardRef } from 'react';
 
+import { Icon } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
 /**
@@ -89,19 +89,22 @@ const DefaultStory = () => {
   return (
     <div className='flex gap-4 p-8 ring'>
       <CustomIcon weight={'regular'} className={mx(getSize(8))} />
-      <GithubLogo weight={'regular'} className={mx(getSize(8))} />
+      <Icon icon='ph--github-logo--regular' classNames={mx(getSize(8))} />
     </div>
   );
 };
 
-export const Default = {};
+export const Default: Story = {};
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-registry/Icon',
   render: DefaultStory,
+  decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof IconBase>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/components/PluginDetail.stories.tsx

@@ -2,28 +2,28 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { PluginDetail, type PluginDetailProps } from './PluginDetail';
 import { translations } from '../translations';
 
-const meta: Meta<PluginDetailProps> = {
+import { PluginDetail } from './PluginDetail';
+
+const meta = {
   title: 'plugins/plugin-registry/PluginDetail',
   component: PluginDetail,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'column',
     translations,
   },
-};
+} satisfies Meta<typeof PluginDetail>;
 
 export default meta;
 
-type Story = StoryObj<PluginDetailProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/PluginDetail.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
 import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type PluginDetailProps = {
   plugin: Plugin;
@@ -17,47 +17,49 @@ export type PluginDetailProps = {
 };
 
 export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { id, name, description, homePage, source, screenshots } = plugin.meta;
 
   return (
-    <DeprecatedFormContainer classNames='gap-6'>
-      <div role='none' className='flex justify-between items-center'>
-        <p>{id}</p>
-        <Input.Root>
-          <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
-        </Input.Root>
-      </div>
+    <StackItem.Content classNames='block overflow-y-auto'>
+      <div role='none' className='container-max-width p-4'>
+        <div role='none' className='flex justify-between items-center'>
+          <p>{id}</p>
+          <Input.Root>
+            <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
+          </Input.Root>
+        </div>
+
+        {screenshots && screenshots.length > 0 && (
+          <div role='none'>
+            <h1 className='text-lg mb-2'>Preview</h1>
+            <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+          </div>
+        )}
 
-      {screenshots && screenshots.length > 0 && (
         <div role='none'>
-          <h1 className='text-lg mb-2'>Preview</h1>
-          <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+          <p>{description}</p>
         </div>
-      )}
 
-      <div role='none'>
-        <p>{description}</p>
-      </div>
+        <div role='none'>
+          <h1 className='text-lg mb-2'>Resources</h1>
+          <div className='flex gap-2'>
+            {homePage && (
+              <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                {t('home page label')}
+                <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
+              </Link>
+            )}
 
-      <div role='none'>
-        <h1 className='text-lg mb-2'>Resources</h1>
-        <div className='flex gap-2'>
-          {homePage && (
-            <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
-              {t('home page label')}
-              <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-            </Link>
-          )}
-
-          {source && (
-            <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
-              {t('source label')}
-              <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-            </Link>
-          )}
+            {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>
-    </DeprecatedFormContainer>
+    </StackItem.Content>
   );
 };

package/src/components/PluginItem.tsx

@@ -8,7 +8,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type PluginItemProps = {
   plugin: Plugin;
@@ -28,7 +28,7 @@ export const PluginItem = ({
   hasSettings: _hasSettings,
   onSettings,
 }: PluginItemProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { id, name, description, tags, icon = 'ph--circle--regular' } = plugin.meta;
   const isEnabled = enabled.includes(id);
   const inputId = `${id}-input`;

package/src/components/PluginList.stories.tsx

@@ -2,20 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { definePlugin, type Plugin } from '@dxos/app-framework';
+import { type Plugin, definePlugin } from '@dxos/app-framework';
 import { faker } from '@dxos/random';
 import { type ThemedClassName } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/react-ui-theme';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { PluginList } from './PluginList';
 import { translations } from '../translations';
 
+import { PluginList } from './PluginList';
+
 faker.seed(1);
 
 const icons = [
@@ -30,21 +29,20 @@ const icons = [
 const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
   const [plugins] = useState<Plugin[]>(
     faker.helpers.multiple(
-      () =>
-        definePlugin(
-          {
-            id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
-            name: `${faker.commerce.productName()}`,
-            description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
-            tags: faker.datatype.boolean({ probability: 0.6 })
-              ? [faker.helpers.arrayElement(['labs', 'beta', 'alpha', 'stable', 'new', '新発売'])]
-              : undefined,
-            icon: faker.helpers.arrayElement(icons),
-            homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
-            source: faker.internet.url(),
-          },
-          [],
-        ),
+      definePlugin(
+        {
+          id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
+          name: `${faker.commerce.productName()}`,
+          description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
+          tags: faker.datatype.boolean({ probability: 0.6 })
+            ? [faker.helpers.arrayElement(['labs', 'beta', 'alpha', 'stable', 'new', '新発売'])]
+            : undefined,
+          icon: faker.helpers.arrayElement(icons),
+          homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
+          source: faker.internet.url(),
+        },
+        () => [],
+      ),
       { count: 16 },
     ),
   );
@@ -61,21 +59,24 @@ const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-registry/PluginList',
   component: PluginList,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'column',
     translations,
   },
-};
+} satisfies Meta<typeof PluginList>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
-export const Column = {
+export const Column: Story = {
   args: {
     classNames: 'w-[30rem]',
   },

package/src/components/RegistryContainer.tsx

@@ -6,10 +6,10 @@ import React, { useCallback, useMemo } from 'react';
 
 import {
   Capabilities,
-  createIntent,
   LayoutAction,
   type Plugin,
   SettingsAction,
+  createIntent,
   useCapability,
   useIntentDispatcher,
   usePluginManager,