@dxos/plugin-registry 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,40 +25,38 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@dxos/app-framework": "0.8.4-main.fd6878d",
-    "@dxos/echo": "0.8.4-main.fd6878d",
-    "@dxos/echo-schema": "0.8.4-main.fd6878d",
-    "@dxos/live-object": "0.8.4-main.fd6878d",
-    "@dxos/invariant": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-stack": "0.8.4-main.fd6878d",
-    "@dxos/plugin-observability": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-form": "0.8.4-main.fd6878d",
-    "@dxos/plugin-graph": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/app-framework": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/live-object": "0.8.4-main.fffef41",
+    "@dxos/echo": "0.8.4-main.fffef41",
+    "@dxos/plugin-graph": "0.8.4-main.fffef41",
+    "@dxos/react-ui-form": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41",
+    "@dxos/plugin-observability": "0.8.4-main.fffef41",
+    "@dxos/react-ui-stack": "0.8.4-main.fffef41"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@effect-atom/atom-react": "^0.3.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/RegistryPlugin.tsx

@@ -8,26 +8,25 @@ 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

@@ -2,32 +2,33 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 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(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             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,18 +39,18 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: REGISTRY_PLUGIN,
+      id: meta.id,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
             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 +61,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 +72,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 +83,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 +94,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,18 +108,18 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${REGISTRY_PLUGIN}/actions`,
+      id: `${meta.id}/actions`,
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             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,10 +130,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${REGISTRY_PLUGIN}/plugins`,
+      id: `${meta.id}/plugins`,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
             Option.map(() => {

package/src/capabilities/react-surface.tsx

@@ -4,16 +4,16 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Capabilities, Plugin, contributes, createSurface, usePluginManager } from '@dxos/app-framework';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Capabilities, Plugin, contributes, createSurface } from '@dxos/app-framework';
+import { usePluginManager } from '@dxos/app-framework/react';
 
 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 +24,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 +41,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 +58,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 +69,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 +80,7 @@ export default () =>
           [manager, subject.meta.id, enabled],
         );
 
-        return (
-          <StackItem.Content>
-            <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />
-          </StackItem.Content>
-        );
+        return <PluginDetail plugin={subject} enabled={enabled} onEnable={handleEnable} />;
       },
     }),
   ]);

package/src/components/PluginDetail.stories.tsx

@@ -2,29 +2,27 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../translations';
 
-import { PluginDetail, type PluginDetailProps } from './PluginDetail';
+import { PluginDetail } from './PluginDetail';
 
-const meta: Meta<PluginDetailProps> = {
+const meta = {
   title: 'plugins/plugin-registry/PluginDetail',
   component: PluginDetail,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  decorators: [withTheme, withLayout({ container: 'column' })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof PluginDetail>;
 
 export default meta;
 
-type Story = StoryObj<PluginDetailProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
@@ -34,6 +32,7 @@ export const Default: Story = {
         name: 'Test Plugin',
         description: faker.lorem.paragraphs(2),
         icon: 'ph--bug--regular',
+        iconHue: 'sky',
         homePage: 'https://example.com',
         source: 'https://github.com/example/test-plugin',
         screenshots: [

package/src/components/PluginDetail.tsx

@@ -6,9 +6,10 @@ 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 { getStyles, mx } from '@dxos/react-ui-theme';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type PluginDetailProps = {
   plugin: Plugin;
@@ -17,47 +18,65 @@ export type PluginDetailProps = {
 };
 
 export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, homePage, source, screenshots } = plugin.meta;
+  const { t } = useTranslation(meta.id);
+  const {
+    id,
+    name,
+    description,
+    homePage,
+    source,
+    screenshots,
+    icon = 'ph--circle--regular',
+    iconHue = 'neutral',
+  } = plugin.meta;
+  const styles = getStyles(iconHue);
 
   return (
-    <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>
-
-      {screenshots && screenshots.length > 0 && (
+    <StackItem.Content scrollable>
+      <div role='none' className='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
         <div role='none'>
-          <h1 className='text-lg mb-2'>Preview</h1>
-          <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+          <Icon classNames={mx('p-1 rounded', styles.bg, styles.icon)} icon={icon} size={14} />
         </div>
-      )}
+        <div role='none' className='flex flex-col gap-6'>
+          <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 is-full pbs-1'>
+            <h2 className='text-xl'>{name}</h2>
+            <Input.Root>
+              <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
+            </Input.Root>
+            <p className='pbs-0.5 text-sm text-description'>{id}</p>
+          </div>
 
-      <div role='none'>
-        <p>{description}</p>
-      </div>
+          <div role='none'>
+            <p className='text-description'>{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>
+          {screenshots && screenshots.length > 0 && (
+            <div role='none' className='flex flex-col gap-2'>
+              <h2>Preview</h2>
+              <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+            </div>
           )}
 
-          {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 role='none' className='flex flex-col gap-2'>
+            <h2>Resources</h2>
+            <div className='flex gap-2'>
+              {homePage && (
+                <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                  {t('home page label')}
+                  <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
+                </Link>
+              )}
+
+              {source && (
+                <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                  {t('source label')}
+                  <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
+                </Link>
+              )}
+            </div>
+          </div>
         </div>
       </div>
-    </DeprecatedFormContainer>
+    </StackItem.Content>
   );
 };

package/src/components/PluginItem.tsx

@@ -5,10 +5,12 @@
 import React, { type MouseEvent, useCallback } from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
-import { Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
+import { type ChromaticPalette, Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { getStyles } from '@dxos/react-ui-theme';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
+import { type RegistryTagType } from '../types';
 
 export type PluginItemProps = {
   plugin: Plugin;
@@ -25,11 +27,11 @@ export const PluginItem = ({
   enabled = [],
   onClick,
   onChange,
-  hasSettings: _hasSettings,
+  hasSettings: hasSettingsParam,
   onSettings,
 }: PluginItemProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, tags, icon = 'ph--circle--regular' } = plugin.meta;
+  const { t } = useTranslation(meta.id);
+  const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
   const isEnabled = enabled.includes(id);
   const inputId = `${id}-input`;
   const labelId = `${id}-label`;
@@ -44,8 +46,11 @@ export const PluginItem = ({
     [id, isEnabled, onChange],
   );
 
-  const hasSettings = _hasSettings?.(id) ?? false;
+  const hasSettings = hasSettingsParam?.(id) ?? false;
   const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
+  const styles = getStyles(iconHue);
+  const gridCols = 'grid grid-cols-[5rem_1fr]';
+  const gridRows = 'grid grid-rows-[40px_1fr_min-content_40px]';
 
   return (
     <ListItem.Root
@@ -53,67 +58,63 @@ export const PluginItem = ({
       labelId={labelId}
       data-testid={`pluginList.${id}`}
       aria-describedby={descriptionId}
-      // TODO(burdon): Use Rail vars.
-      classNames='is-full bs-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr_32px] p-1 border border-separator rounded-md'
+      classNames={mx(gridCols, 'bs-[12rem] is-full gap-3 pie-2 border border-separator rounded-md overflow-hidden')}
     >
-      {/* Header. */}
-      <div className='flex flex-col grow justify-center items-center'>
-        <Icon icon={icon} size={6} onClick={handleClick} classNames='text-subdued cursor-pointer' />
-      </div>
-      <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
-        <span className='truncate'>{name ?? id}</span>
-      </div>
-      <div className='flex justify-center items-center'>
-        <Input.Root id={inputId}>
-          <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-        </Input.Root>
+      <div className={mx(gridRows, 'justify-center rounded-l-md', styles.bg)}>
+        <div />
+        <Icon classNames={mx('cursor-pointer', styles.icon)} icon={icon} size={14} onClick={handleClick} />
       </div>
 
-      {/* Body. */}
-      <div />
-      {(description || tags) && (
-        <div id={descriptionId} className='col-span-2 flex flex-col w-full justify-between gap-2 pb-2'>
-          <div className='grow'>
-            <p className={mx(descriptionText, 'line-clamp-3 min-w-0 pie-2')}>{description}</p>
-          </div>
-          {tags && tags.length > 0 && (
-            <div>
-              {tags.map((tag) => (
-                <Tag key={tag} palette={'indigo'} classNames='text-xs capitalize'>
-                  {tag}
-                </Tag>
-              ))}
-            </div>
-          )}
+      <div className={mx(gridRows)}>
+        <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
+          <span className='text-lg truncate'>{name ?? id}</span>
         </div>
-      )}
 
-      {/* Footer. */}
-      <div />
-      <div className='flex gap-2 items-center pie-1'>
-        <Link
-          aria-describedby={descriptionId}
-          classNames='text-sm text-description cursor-pointer'
-          onClick={handleClick}
-        >
-          {t('details label')}
-        </Link>
+        <div>
+          <p className={mx(descriptionText, 'line-clamp-4 min-is-0')}>{description}</p>
+        </div>
 
-        <div className='flex-1' />
-      </div>
-      <div className='flex justify-center items-center'>
-        {hasSettings && (
+        <div className='flex -mis-0.5 overflow-x-auto scrollbar-none'>
+          {tags?.map((tag) => (
+            <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
+              {tag}
+            </Tag>
+          ))}
+        </div>
+
+        <div className='flex gap-2 items-center text-sm'>
           <IconButton
             aria-describedby={descriptionId}
-            classNames='text-sm text-description cursor-pointer'
+            classNames='cursor-pointer'
             icon='ph--gear--regular'
             label={t('settings label')}
             iconOnly
             size={4}
             onClick={handleSettings}
+            disabled={!hasSettings}
           />
-        )}
+
+          <Link aria-describedby={descriptionId} classNames='text-description cursor-pointer' onClick={handleClick}>
+            {t('details label')}
+          </Link>
+
+          <div className='grow' />
+          <div className='pie-1'>
+            <Input.Root id={inputId}>
+              <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
+            </Input.Root>
+          </div>
+        </div>
       </div>
     </ListItem.Root>
   );
 };
+
+const tagColors: Record<RegistryTagType, ChromaticPalette> = {
+  new: 'rose',
+  beta: 'teal',
+  labs: 'blue',
+  popular: 'green',
+  featured: 'pink',
+  experimental: 'amber',
+};