@dxos/plugin-registry 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/{PluginList.stories.tsx → PluginList/PluginList.stories.tsx}

@@ -7,11 +7,12 @@ import React, { useState } from 'react';
 
 import { type Plugin, Plugin as PluginNS } from '@dxos/app-framework';
 import { faker } from '@dxos/random';
+import { ScrollArea } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { getHashHue } from '@dxos/ui-theme';
 
-import { translations } from '../translations';
-import { RegistryTagType } from '../types';
+import { translations } from '../../translations';
+import { RegistryTagType } from '../../types';
 
 import { PluginList } from './PluginList';
 
@@ -31,7 +32,7 @@ const DefaultStory = () => {
     faker.helpers.multiple(
       () =>
         PluginNS.define({
-          id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
+          id: `org.dxos.plugin.plugin-${faker.string.uuid()}`,
           name: `${faker.commerce.productName()}`,
           description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
           tags: faker.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
@@ -49,11 +50,17 @@ const DefaultStory = () => {
     setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
   };
 
-  return <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />;
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>
+        <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
 };
 
 const meta = {
-  title: 'plugins/plugin-registry/PluginList',
+  title: 'plugins/plugin-registry/components/PluginList',
   component: PluginList,
   render: DefaultStory,
   parameters: {
@@ -66,11 +73,11 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  decorators: [withTheme, withLayout({ layout: 'column', scroll: true })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 };
 
 export const FullScreen: Story = {
-  decorators: [withTheme, withLayout({ scroll: true })],
+  decorators: [withTheme(), withLayout({ scroll: true })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/PluginList/index.ts

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

package/src/components/index.ts

@@ -4,4 +4,3 @@
 
 export * from './PluginDetail';
 export * from './PluginList';
-export * from './RegistryContainer';

package/src/containers/PluginArticle/PluginArticle.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type Plugin } from '@dxos/app-framework';
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { runAndForwardErrors } from '@dxos/effect';
+
+import { PluginDetail } from '../../components';
+
+// TODO(burdon): Convert to ECHO type.
+export type PluginArticleProps = { subject: Plugin.Plugin };
+
+export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
+  const manager = usePluginManager();
+  const enabled = manager.getEnabled().includes(plugin.meta.id);
+  const handleEnableChange = useCallback(
+    (enabled: boolean) =>
+      enabled
+        ? runAndForwardErrors(manager.enable(plugin.meta.id))
+        : runAndForwardErrors(manager.disable(plugin.meta.id)),
+    [manager, plugin.meta.id],
+  );
+
+  return <PluginDetail plugin={plugin} enabled={enabled} onEnabledChange={handleEnableChange} />;
+};

package/src/containers/PluginArticle/index.ts

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

package/src/{components/RegistryContainer.tsx → containers/PluginRegistry/PluginRegistry.tsx}

@@ -6,28 +6,30 @@ import { useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import React, { useCallback, useMemo } from 'react';
 
-import { Common, type Plugin, SettingsOperation } from '@dxos/app-framework';
-import { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/react';
+import { type Plugin } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, SettingsOperation } from '@dxos/app-toolkit';
 import { runAndForwardErrors } from '@dxos/effect';
 import { ObservabilityOperation } from '@dxos/plugin-observability/types';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { ScrollArea } from '@dxos/react-ui';
 
-import { PluginList } from './PluginList';
+import { PluginList } from '../../components';
+import { getPluginPath } from '../../meta';
 
 const sortByPluginMeta = ({ meta: { name: a = '' } }: Plugin.Plugin, { meta: { name: b = '' } }: Plugin.Plugin) =>
   a.localeCompare(b);
 
-export type RegistryContainerProps = {
+export type PluginRegistryProps = {
   id: string;
   plugins: Plugin.Plugin[];
 };
 
-export const RegistryContainer = ({ id, plugins: pluginsProp }: RegistryContainerProps) => {
+export const PluginRegistry = ({ id, plugins: pluginsProp }: PluginRegistryProps) => {
   const manager = usePluginManager();
   const { invoke, invokePromise } = useOperationInvoker();
   const plugins = useMemo(() => pluginsProp.sort(sortByPluginMeta), [pluginsProp]);
   const enabled = useAtomValue(manager.enabled);
-  const allSettings = useCapabilities(Common.Capability.Settings);
+  const allSettings = useCapabilities(AppCapabilities.Settings);
 
   // TODO(wittjosiah): Factor out to an intent?
   const handleChange = useCallback(
@@ -52,9 +54,8 @@ export const RegistryContainer = ({ id, plugins: pluginsProp }: RegistryContaine
 
   const handleClick = useCallback(
     (pluginId: string) =>
-      invokePromise(Common.LayoutOperation.Open, {
-        // TODO(wittjosiah): `/` currently is not supported in ids.
-        subject: [pluginId.replaceAll('/', ':')],
+      invokePromise(LayoutOperation.Open, {
+        subject: [getPluginPath(pluginId)],
         pivotId: id,
         positioning: 'end',
       }),
@@ -69,15 +70,17 @@ export const RegistryContainer = ({ id, plugins: pluginsProp }: RegistryContaine
   );
 
   return (
-    <Layout.Container scrollable>
-      <PluginList
-        plugins={plugins}
-        enabled={enabled}
-        onClick={handleClick}
-        onChange={handleChange}
-        hasSettings={hasSettings}
-        onSettings={handleSettings}
-      />
-    </Layout.Container>
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>
+        <PluginList
+          plugins={plugins}
+          enabled={enabled}
+          onClick={handleClick}
+          onChange={handleChange}
+          hasSettings={hasSettings}
+          onSettings={handleSettings}
+        />
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
   );
 };

package/src/containers/PluginRegistry/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { PluginRegistry } from './PluginRegistry';
+
+export default PluginRegistry;

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const PluginArticle: ComponentType<any> = lazy(() => import('./PluginArticle'));
+export const PluginRegistry: ComponentType<any> = lazy(() => import('./PluginRegistry'));

package/src/meta.ts

@@ -5,14 +5,14 @@
 import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-// TODO(wittjosiah): Deck does not currently support `/` in ids.
-// TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
-//  Ideally this should be worked into the data model in a generic way.
 export const REGISTRY_ID = '!dxos:plugin-registry';
 export const REGISTRY_KEY = 'plugin-registry';
 
+/** Qualified graph path to a specific plugin node. */
+export const getPluginPath = (pluginId: string): string => `root/${REGISTRY_ID}/${pluginId}`;
+
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/registry',
+  id: 'org.dxos.plugin.registry',
   name: 'Plugins',
   description: trim`
     Plugin management system for discovering, installing, and configuring workspace extensions.

package/dist/lib/browser/app-graph-builder-P3ZGGFAR.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability, Common, SettingsOperation } from '@dxos/app-framework';\nimport { Operation } from '@dxos/operation';\nimport { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';\n\nimport { REGISTRY_ID, REGISTRY_KEY, meta } from '../../meta';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const capabilities = yield* Capability.Service;\n\n    const extensions = yield* Effect.all([\n      GraphBuilder.createExtension({\n        id: meta.id,\n        match: NodeMatcher.whenRoot,\n        actions: () =>\n          Effect.succeed([\n            {\n              id: meta.id,\n              data: () => Operation.invoke(SettingsOperation.OpenPluginRegistry),\n              properties: {\n                label: ['open plugin registry label', { ns: meta.id }],\n                icon: 'ph--squares-four--regular',\n                disposition: 'menu',\n              },\n            },\n          ]),\n      }),\n      GraphBuilder.createExtension({\n        id: meta.id,\n        match: NodeMatcher.whenRoot,\n        connector: () =>\n          Effect.succeed([\n            {\n              id: REGISTRY_ID,\n              type: meta.id,\n              properties: {\n                label: ['plugin registry label', { ns: meta.id }],\n                icon: 'ph--squares-four--regular',\n                disposition: 'pin-end',\n                testId: 'treeView.pluginRegistry',\n              },\n              nodes: [\n                {\n                  id: `${REGISTRY_KEY}+all`,\n                  type: 'category',\n                  data: `${REGISTRY_KEY}+all`,\n                  properties: {\n                    label: ['all plugins label', { ns: meta.id }],\n                    icon: 'ph--squares-four--regular',\n                    key: REGISTRY_KEY,\n                    testId: 'pluginRegistry.all',\n                  },\n                },\n                {\n                  id: `${REGISTRY_KEY}+installed`,\n                  type: 'category',\n                  data: `${REGISTRY_KEY}+installed`,\n                  properties: {\n                    label: ['installed plugins label', { ns: meta.id }],\n                    icon: 'ph--check--regular',\n                    key: REGISTRY_KEY,\n                    testId: 'pluginRegistry.installed',\n                  },\n                },\n                {\n                  id: `${REGISTRY_KEY}+recommended`,\n                  type: 'category',\n                  data: `${REGISTRY_KEY}+recommended`,\n                  properties: {\n                    label: ['recommended plugins label', { ns: meta.id }],\n                    icon: 'ph--star--regular',\n                    key: REGISTRY_KEY,\n                    testId: 'pluginRegistry.recommended',\n                  },\n                },\n                {\n                  id: `${REGISTRY_KEY}+labs`,\n                  type: 'category',\n                  data: `${REGISTRY_KEY}+labs`,\n                  properties: {\n                    label: ['labs plugins label', { ns: meta.id }],\n                    icon: 'ph--flask--regular',\n                    key: REGISTRY_KEY,\n                    testId: 'pluginRegistry.labs',\n                  },\n                },\n              ],\n            },\n          ]),\n      }),\n      GraphBuilder.createExtension({\n        id: `${meta.id}/actions`,\n        match: NodeMatcher.whenId(REGISTRY_ID),\n        actions: () =>\n          Effect.succeed([\n            {\n              id: `${meta.id}/load-by-url`,\n              data: Effect.fnUntraced(function* () {}),\n              properties: {\n                label: ['load by url label', { ns: meta.id }],\n                icon: 'ph--cloud-arrow-down--regular',\n                disabled: true,\n              },\n            },\n          ]),\n      }),\n      GraphBuilder.createExtension({\n        id: `${meta.id}/plugins`,\n        match: NodeMatcher.whenId(REGISTRY_ID),\n        connector: () => {\n          const manager = capabilities.get(Common.Capability.PluginManager);\n          return Effect.succeed(\n            manager.getPlugins().map((plugin) => ({\n              id: plugin.meta.id.replaceAll('/', ':'),\n              type: 'dxos.org/plugin',\n              data: plugin,\n              properties: {\n                label: plugin.meta.name ?? plugin.meta.id,\n                icon: plugin.meta.icon ?? 'ph--circle--regular',\n                disposition: 'hidden',\n              },\n            })),\n          );\n        },\n      }),\n    ]);\n\n    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);\n  }),\n);\n"],
-  "mappings": "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",
-  "names": ["Effect", "Capability", "Common", "SettingsOperation", "Operation", "GraphBuilder", "NodeMatcher", "Capability", "makeModule", "fnUntraced", "capabilities", "Service", "extensions", "all", "GraphBuilder", "createExtension", "id", "meta", "match", "NodeMatcher", "whenRoot", "actions", "succeed", "data", "Operation", "invoke", "SettingsOperation", "OpenPluginRegistry", "properties", "label", "ns", "icon", "disposition", "connector", "REGISTRY_ID", "type", "testId", "nodes", "REGISTRY_KEY", "key", "whenId", "disabled", "manager", "get", "Common", "PluginManager", "getPlugins", "map", "plugin", "replaceAll", "name", "contributes", "AppGraphBuilder"]
-}

package/dist/lib/browser/chunk-VOAOTNGS.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\n// TODO(wittjosiah): Deck does not currently support `/` in ids.\n// TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.\n//  Ideally this should be worked into the data model in a generic way.\nexport const REGISTRY_ID = '!dxos:plugin-registry';\nexport const REGISTRY_KEY = 'plugin-registry';\n\nexport const meta: Plugin.Meta = {\n  id: 'dxos.org/plugin/registry',\n  name: 'Plugins',\n  description: trim`\n    Plugin management system for discovering, installing, and configuring workspace extensions.\n    Browse available plugins and customize your workspace capabilities.\n  `,\n};\n"],
-  "mappings": ";AAKA,SAASA,YAAY;AAKd,IAAMC,cAAc;AACpB,IAAMC,eAAe;AAErB,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;AAIf;",
-  "names": ["trim", "REGISTRY_ID", "REGISTRY_KEY", "meta", "id", "name", "description", "trim"]
-}

package/dist/lib/browser/operation-resolver-P5PKLPRT.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/operation-resolver/operation-resolver.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability, Common, SettingsOperation } from '@dxos/app-framework';\nimport { Operation, OperationResolver } from '@dxos/operation';\n\nimport { REGISTRY_ID } from '../../meta';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    return Capability.contributes(Common.Capability.OperationResolver, [\n      OperationResolver.make({\n        operation: SettingsOperation.OpenPluginRegistry,\n        handler: Effect.fnUntraced(function* () {\n          yield* Operation.invoke(Common.LayoutOperation.SwitchWorkspace, { subject: REGISTRY_ID });\n        }),\n      }),\n    ]);\n  }),\n);\n"],
-  "mappings": ";;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,YAAYC,QAAQC,yBAAyB;AACtD,SAASC,WAAWC,yBAAyB;AAI7C,IAAA,6BAAeC,WAAWC,WACjBC,kBAAW,aAAA;AAChB,SAAOF,WAAWG,YAAYC,OAAOJ,WAAWK,mBAAmB;IACjEA,kBAAkBC,KAAK;MACrBC,WAAWC,kBAAkBC;MAC7BC,SAAgBR,kBAAW,aAAA;AACzB,eAAOS,UAAUC,OAAOR,OAAOS,gBAAgBC,iBAAiB;UAAEC,SAASC;QAAY,CAAA;MACzF,CAAA;IACF,CAAA;GACD;AACH,CAAA,CAAA;",
-  "names": ["Effect", "Capability", "Common", "SettingsOperation", "Operation", "OperationResolver", "Capability", "makeModule", "fnUntraced", "contributes", "Common", "OperationResolver", "make", "operation", "SettingsOperation", "OpenPluginRegistry", "handler", "Operation", "invoke", "LayoutOperation", "SwitchWorkspace", "subject", "REGISTRY_ID"]
-}

package/dist/lib/browser/react-surface-IIM6T7IA.mjs

@@ -1,337 +0,0 @@
-import {
-  REGISTRY_KEY,
-  meta
-} from "./chunk-VOAOTNGS.mjs";
-
-// src/capabilities/react-surface/react-surface.tsx
-import * as Effect2 from "effect/Effect";
-import React5, { useCallback as useCallback3, useMemo as useMemo2 } from "react";
-import { Capability, Common as Common2, Plugin } from "@dxos/app-framework";
-import { usePluginManager as usePluginManager2 } from "@dxos/app-framework/react";
-import { runAndForwardErrors as runAndForwardErrors2 } from "@dxos/effect";
-
-// src/components/PluginDetail.tsx
-import React from "react";
-import { Icon, Input, Link, useTranslation } from "@dxos/react-ui";
-import { Layout } from "@dxos/react-ui-mosaic";
-import { getStyles, mx } from "@dxos/ui-theme";
-var PluginDetail = ({ plugin, enabled, onEnabledChange }) => {
-  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 /* @__PURE__ */ React.createElement(Layout.Container, {
-    scrollable: true
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4"
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    classNames: mx("p-1 rounded", styles.bg, styles.icon),
-    icon,
-    size: 14
-  })), /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-6"
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "grid grid-cols-[1fr_min-content] gap-x-3 is-full pbs-1"
-  }, /* @__PURE__ */ React.createElement("h2", {
-    className: "text-xl"
-  }, name), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Switch, {
-    classNames: "self-center",
-    checked: enabled,
-    onCheckedChange: onEnabledChange
-  })), /* @__PURE__ */ React.createElement("p", {
-    className: "pbs-0.5 text-sm text-description"
-  }, id)), /* @__PURE__ */ React.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React.createElement("p", {
-    className: "text-description"
-  }, description)), screenshots && screenshots.length > 0 && /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-2"
-  }, /* @__PURE__ */ React.createElement("h2", null, "Preview"), /* @__PURE__ */ React.createElement("img", {
-    src: screenshots[0],
-    alt: name,
-    className: "aspect-video object-fit"
-  })), /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-2"
-  }, /* @__PURE__ */ React.createElement("h2", null, "Resources"), /* @__PURE__ */ React.createElement("div", {
-    className: "flex gap-2"
-  }, homePage && /* @__PURE__ */ React.createElement(Link, {
-    href: homePage,
-    target: "_blank",
-    rel: "noreferrer",
-    classNames: "text-sm text-description"
-  }, t("home page label"), /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--arrow-square-out--bold",
-    size: 3,
-    classNames: "inline-block leading-none mli-1"
-  })), source && /* @__PURE__ */ React.createElement(Link, {
-    href: source,
-    target: "_blank",
-    rel: "noreferrer",
-    classNames: "text-sm text-description"
-  }, t("source label"), /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--arrow-square-out--bold",
-    size: 3,
-    classNames: "inline-block leading-none mli-1"
-  })))))));
-};
-
-// src/components/PluginList.tsx
-import React3 from "react";
-import { List } from "@dxos/react-ui";
-
-// src/components/PluginItem.tsx
-import React2, { useCallback } from "react";
-import { Icon as Icon2, IconButton, Input as Input2, Link as Link2, ListItem, Tag, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { descriptionText, mx as mx2 } from "@dxos/ui-theme";
-import { getStyles as getStyles2 } from "@dxos/ui-theme";
-var PluginItem = ({ plugin, enabled = [], onClick, onChange, hasSettings: hasSettingsProp, onSettings }) => {
-  const { t } = useTranslation2(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`;
-  const descriptionId = `${id}-description`;
-  const handleClick = useCallback(() => onClick?.(id), [
-    id,
-    onClick
-  ]);
-  const handleChange = useCallback((event) => {
-    event.stopPropagation();
-    onChange?.(id, !isEnabled);
-  }, [
-    id,
-    isEnabled,
-    onChange
-  ]);
-  const hasSettings = hasSettingsProp?.(id) ?? false;
-  const handleSettings = useCallback(() => onSettings?.(id), [
-    id,
-    onSettings
-  ]);
-  const styles = getStyles2(iconHue);
-  const gridCols = "grid grid-cols-[5rem_1fr]";
-  const gridRows = "grid grid-rows-[40px_1fr_min-content_40px]";
-  return /* @__PURE__ */ React2.createElement(ListItem.Root, {
-    key: id,
-    labelId,
-    "data-testid": `pluginList.${id}`,
-    "aria-describedby": descriptionId,
-    classNames: mx2(gridCols, "bs-[12rem] is-full gap-3 pie-2 border border-separator rounded-md overflow-hidden")
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: mx2(gridRows, "justify-center rounded-l-md", styles.bg)
-  }, /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement(Icon2, {
-    classNames: mx2("cursor-pointer", styles.icon),
-    icon,
-    size: 14,
-    onClick: handleClick
-  })), /* @__PURE__ */ React2.createElement("div", {
-    className: mx2(gridRows)
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "flex items-center overflow-hidden cursor-pointer",
-    onClick: handleClick
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "text-lg truncate"
-  }, name ?? id)), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("p", {
-    className: mx2(descriptionText, "line-clamp-4 min-is-0")
-  }, description)), /* @__PURE__ */ React2.createElement("div", {
-    className: "flex -mis-0.5 overflow-x-auto scrollbar-none"
-  }, tags?.map((tag) => /* @__PURE__ */ React2.createElement(Tag, {
-    key: tag,
-    palette: tagColors[tag],
-    classNames: "text-xs uppercase font-thin"
-  }, tag))), /* @__PURE__ */ React2.createElement("div", {
-    className: "flex gap-2 items-center text-sm"
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
-    "aria-describedby": descriptionId,
-    classNames: "cursor-pointer",
-    icon: "ph--gear--regular",
-    label: t("settings label"),
-    iconOnly: true,
-    size: 4,
-    onClick: handleSettings,
-    disabled: !hasSettings
-  }), /* @__PURE__ */ React2.createElement(Link2, {
-    "aria-describedby": descriptionId,
-    classNames: "text-description cursor-pointer",
-    onClick: handleClick
-  }, t("details label")), /* @__PURE__ */ React2.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React2.createElement("div", {
-    className: "pie-1"
-  }, /* @__PURE__ */ React2.createElement(Input2.Root, {
-    id: inputId
-  }, /* @__PURE__ */ React2.createElement(Input2.Switch, {
-    classNames: "self-center",
-    checked: isEnabled,
-    onClick: handleChange
-  }))))));
-};
-var tagColors = {
-  new: "rose",
-  beta: "teal",
-  labs: "blue",
-  popular: "green",
-  featured: "pink",
-  experimental: "amber"
-};
-
-// src/components/PluginList.tsx
-var PluginList = ({ plugins = [], ...props }) => {
-  return /* @__PURE__ */ React3.createElement(List, {
-    classNames: "grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] auto-rows-[max-content] gap-4 p-4"
-  }, plugins.map((plugin) => /* @__PURE__ */ React3.createElement(PluginItem, {
-    key: plugin.meta.id,
-    plugin,
-    ...props
-  })));
-};
-
-// src/components/RegistryContainer.tsx
-import { useAtomValue } from "@effect-atom/atom-react";
-import * as Effect from "effect/Effect";
-import React4, { useCallback as useCallback2, useMemo } from "react";
-import { Common, SettingsOperation } from "@dxos/app-framework";
-import { useCapabilities, useOperationInvoker, usePluginManager } from "@dxos/app-framework/react";
-import { runAndForwardErrors } from "@dxos/effect";
-import { ObservabilityOperation } from "@dxos/plugin-observability/types";
-import { Layout as Layout2 } from "@dxos/react-ui-mosaic";
-var sortByPluginMeta = ({ meta: { name: a = "" } }, { meta: { name: b = "" } }) => a.localeCompare(b);
-var RegistryContainer = ({ id, plugins: pluginsProp }) => {
-  const manager = usePluginManager();
-  const { invoke, invokePromise } = useOperationInvoker();
-  const plugins = useMemo(() => pluginsProp.sort(sortByPluginMeta), [
-    pluginsProp
-  ]);
-  const enabled = useAtomValue(manager.enabled);
-  const allSettings = useCapabilities(Common.Capability.Settings);
-  const handleChange = useCallback2((id2, enabled2) => Effect.gen(function* () {
-    if (enabled2) {
-      yield* manager.enable(id2);
-    } else {
-      yield* manager.disable(id2);
-    }
-    yield* invoke(ObservabilityOperation.SendEvent, {
-      name: "plugins.toggle",
-      properties: {
-        plugin: id2,
-        enabled: enabled2
-      }
-    });
-  }).pipe(runAndForwardErrors), [
-    invoke,
-    manager
-  ]);
-  const handleClick = useCallback2((pluginId) => invokePromise(Common.LayoutOperation.Open, {
-    // TODO(wittjosiah): `/` currently is not supported in ids.
-    subject: [
-      pluginId.replaceAll("/", ":")
-    ],
-    pivotId: id,
-    positioning: "end"
-  }), [
-    invokePromise,
-    id
-  ]);
-  const hasSettings = useCallback2((pluginId) => allSettings.some((s) => s.prefix === pluginId), [
-    allSettings
-  ]);
-  const handleSettings = useCallback2((pluginId) => invokePromise(SettingsOperation.Open, {
-    plugin: pluginId
-  }), [
-    invokePromise
-  ]);
-  return /* @__PURE__ */ React4.createElement(Layout2.Container, {
-    scrollable: true
-  }, /* @__PURE__ */ React4.createElement(PluginList, {
-    plugins,
-    enabled,
-    onClick: handleClick,
-    onChange: handleChange,
-    hasSettings,
-    onSettings: handleSettings
-  }));
-};
-
-// src/capabilities/react-surface/react-surface.tsx
-var react_surface_default = Capability.makeModule(() => Effect2.succeed(Capability.contributes(Common2.Capability.ReactSurface, [
-  Common2.createSurface({
-    id: `${meta.id}/all`,
-    role: "article",
-    filter: (data) => data.subject === `${REGISTRY_KEY}+all`,
-    component: () => {
-      const manager = usePluginManager2();
-      const filtered = useMemo2(() => manager.getPlugins().filter(({ meta: meta2 }) => !manager.getCore().includes(meta2.id)), []);
-      return /* @__PURE__ */ React5.createElement(RegistryContainer, {
-        id: `${REGISTRY_KEY}+all`,
-        plugins: filtered
-      });
-    }
-  }),
-  Common2.createSurface({
-    id: `${meta.id}/installed`,
-    role: "article",
-    filter: (data) => data.subject === `${REGISTRY_KEY}+installed`,
-    component: () => {
-      const manager = usePluginManager2();
-      const filtered = useMemo2(() => manager.getPlugins().filter(({ meta: meta2 }) => !manager.getCore().includes(meta2.id)).filter(({ meta: meta2 }) => manager.getEnabled().includes(meta2.id)), []);
-      return /* @__PURE__ */ React5.createElement(RegistryContainer, {
-        id: `${REGISTRY_KEY}+installed`,
-        plugins: filtered
-      });
-    }
-  }),
-  Common2.createSurface({
-    id: `${meta.id}/recommended`,
-    role: "article",
-    filter: (data) => data.subject === `${REGISTRY_KEY}+recommended`,
-    component: () => {
-      const manager = usePluginManager2();
-      const filtered = useMemo2(() => manager.getPlugins().filter(({ meta: meta2 }) => !manager.getCore().includes(meta2.id)).filter(({ meta: meta2 }) => !meta2.tags?.includes("labs")), []);
-      return /* @__PURE__ */ React5.createElement(RegistryContainer, {
-        id: `${REGISTRY_KEY}+recommended`,
-        plugins: filtered
-      });
-    }
-  }),
-  Common2.createSurface({
-    id: `${meta.id}/labs`,
-    role: "article",
-    filter: (data) => data.subject === `${REGISTRY_KEY}+labs`,
-    component: () => {
-      const manager = usePluginManager2();
-      const filtered = useMemo2(() => manager.getPlugins().filter(({ meta: meta2 }) => meta2.tags?.includes("labs")), []);
-      return /* @__PURE__ */ React5.createElement(RegistryContainer, {
-        id: `${REGISTRY_KEY}+labs`,
-        plugins: filtered
-      });
-    }
-  }),
-  Common2.createSurface({
-    id: `${meta.id}/plugin-details`,
-    role: "article",
-    filter: (data) => Plugin.isPlugin(data.subject),
-    component: ({ data: { subject } }) => {
-      const manager = usePluginManager2();
-      const enabled = manager.getEnabled().includes(subject.meta.id);
-      const handleEnableChange = useCallback3((enabled2) => enabled2 ? runAndForwardErrors2(manager.enable(subject.meta.id)) : runAndForwardErrors2(manager.disable(subject.meta.id)), [
-        manager,
-        subject.meta.id
-      ]);
-      return /* @__PURE__ */ React5.createElement(PluginDetail, {
-        plugin: subject,
-        enabled,
-        onEnabledChange: handleEnableChange
-      });
-    }
-  })
-])));
-export {
-  react_surface_default as default
-};
-//# sourceMappingURL=react-surface-IIM6T7IA.mjs.map