@dxos/plugin-registry 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/lib/browser/{app-graph-builder-YN3N2KW4.mjs → app-graph-builder-AOIN4N2Q.mjs} +8 -7
  2. package/dist/lib/browser/app-graph-builder-AOIN4N2Q.mjs.map +7 -0
  3. package/dist/lib/browser/chunk-XPEFEID2.mjs +19 -0
  4. package/dist/lib/browser/chunk-XPEFEID2.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +4 -4
  6. package/dist/lib/browser/{intent-resolver-RUD6WFGT.mjs → intent-resolver-LKNUYBTN.mjs} +2 -2
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/{react-surface-3CDFJHV3.mjs → react-surface-KP3NX4UD.mjs} +90 -68
  9. package/dist/lib/browser/react-surface-KP3NX4UD.mjs.map +7 -0
  10. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  11. package/dist/types/src/components/PluginDetail.d.ts.map +1 -1
  12. package/dist/types/src/components/PluginDetail.stories.d.ts +0 -1
  13. package/dist/types/src/components/PluginDetail.stories.d.ts.map +1 -1
  14. package/dist/types/src/components/PluginItem.d.ts +1 -1
  15. package/dist/types/src/components/PluginItem.d.ts.map +1 -1
  16. package/dist/types/src/components/PluginList.d.ts.map +1 -1
  17. package/dist/types/src/components/PluginList.stories.d.ts +2 -5
  18. package/dist/types/src/components/PluginList.stories.d.ts.map +1 -1
  19. package/dist/types/src/meta.d.ts.map +1 -1
  20. package/dist/types/src/types.d.ts +3 -1
  21. package/dist/types/src/types.d.ts.map +1 -1
  22. package/dist/types/tsconfig.tsbuildinfo +1 -1
  23. package/package.json +18 -20
  24. package/src/capabilities/app-graph-builder.ts +6 -5
  25. package/src/components/PluginDetail.stories.tsx +3 -3
  26. package/src/components/PluginDetail.tsx +47 -30
  27. package/src/components/PluginItem.tsx +51 -50
  28. package/src/components/PluginList.stories.tsx +27 -30
  29. package/src/components/PluginList.tsx +2 -4
  30. package/src/components/RegistryContainer.tsx +1 -1
  31. package/src/meta.ts +5 -0
  32. package/src/types.ts +5 -1
  33. package/dist/lib/browser/app-graph-builder-YN3N2KW4.mjs.map +0 -7
  34. package/dist/lib/browser/chunk-MWZPWWWF.mjs +0 -14
  35. package/dist/lib/browser/chunk-MWZPWWWF.mjs.map +0 -7
  36. package/dist/lib/browser/react-surface-3CDFJHV3.mjs.map +0 -7
  37. package/dist/types/src/components/Icon.stories.d.ts +0 -14
  38. package/dist/types/src/components/Icon.stories.d.ts.map +0 -1
  39. package/src/components/Icon.stories.tsx +0 -110
  40. /package/dist/lib/browser/{intent-resolver-RUD6WFGT.mjs.map → intent-resolver-LKNUYBTN.mjs.map} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/plugin-registry",
3
- "version": "0.8.4-main.a4bbb77",
3
+ "version": "0.8.4-main.ae835ea",
4
4
  "description": "Braneframe plugin gallery",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,31 +25,29 @@
25
25
  ],
26
26
  "dependencies": {
27
27
  "@preact-signals/safe-react": "^0.9.0",
28
- "@dxos/echo": "0.8.4-main.a4bbb77",
29
- "@dxos/app-framework": "0.8.4-main.a4bbb77",
30
- "@dxos/echo-schema": "0.8.4-main.a4bbb77",
31
- "@dxos/invariant": "0.8.4-main.a4bbb77",
32
- "@dxos/plugin-graph": "0.8.4-main.a4bbb77",
33
- "@dxos/live-object": "0.8.4-main.a4bbb77",
34
- "@dxos/react-ui-form": "0.8.4-main.a4bbb77",
35
- "@dxos/plugin-observability": "0.8.4-main.a4bbb77",
36
- "@dxos/react-ui-stack": "0.8.4-main.a4bbb77",
37
- "@dxos/util": "0.8.4-main.a4bbb77"
28
+ "@dxos/echo": "0.8.4-main.ae835ea",
29
+ "@dxos/live-object": "0.8.4-main.ae835ea",
30
+ "@dxos/app-framework": "0.8.4-main.ae835ea",
31
+ "@dxos/plugin-observability": "0.8.4-main.ae835ea",
32
+ "@dxos/plugin-graph": "0.8.4-main.ae835ea",
33
+ "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
34
+ "@dxos/invariant": "0.8.4-main.ae835ea",
35
+ "@dxos/util": "0.8.4-main.ae835ea",
36
+ "@dxos/react-ui-form": "0.8.4-main.ae835ea"
38
37
  },
39
38
  "devDependencies": {
40
39
  "@effect-rx/rx-react": "0.42.4",
41
40
  "@effect/platform": "0.92.1",
42
- "@phosphor-icons/react": "^2.1.10",
43
- "@types/react": "~19.2.0",
44
- "@types/react-dom": "~19.2.0",
41
+ "@types/react": "~19.2.2",
42
+ "@types/react-dom": "~19.2.2",
45
43
  "effect": "3.18.3",
46
44
  "react": "~19.2.0",
47
45
  "react-dom": "~19.2.0",
48
46
  "vite": "7.1.9",
49
- "@dxos/random": "0.8.4-main.a4bbb77",
50
- "@dxos/react-ui": "0.8.4-main.a4bbb77",
51
- "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
52
- "@dxos/storybook-utils": "0.8.4-main.a4bbb77"
47
+ "@dxos/react-ui": "0.8.4-main.ae835ea",
48
+ "@dxos/random": "0.8.4-main.ae835ea",
49
+ "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
50
+ "@dxos/storybook-utils": "0.8.4-main.ae835ea"
53
51
  },
54
52
  "peerDependencies": {
55
53
  "@effect-rx/rx-react": "^0.34.1",
@@ -57,8 +55,8 @@
57
55
  "effect": "^3.13.3",
58
56
  "react": "^19.0.0",
59
57
  "react-dom": "^19.0.0",
60
- "@dxos/react-ui": "0.8.4-main.a4bbb77",
61
- "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
58
+ "@dxos/react-ui": "0.8.4-main.ae835ea",
59
+ "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
62
60
  },
63
61
  "publishConfig": {
64
62
  "access": "public"
@@ -3,7 +3,8 @@
3
3
  //
4
4
 
5
5
  import { Rx } from '@effect-rx/rx-react';
6
- import { Option, pipe } from 'effect';
6
+ import * as Function from 'effect/Function';
7
+ import * as Option from 'effect/Option';
7
8
 
8
9
  import { Capabilities, type PluginContext, SettingsAction, contributes, createIntent } from '@dxos/app-framework';
9
10
  import { createExtension } from '@dxos/plugin-graph';
@@ -16,7 +17,7 @@ export default (context: PluginContext) =>
16
17
  id: meta.id,
17
18
  actions: (node) =>
18
19
  Rx.make((get) =>
19
- pipe(
20
+ Function.pipe(
20
21
  get(node),
21
22
  Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
22
23
  Option.map((node) => [
@@ -41,7 +42,7 @@ export default (context: PluginContext) =>
41
42
  id: meta.id,
42
43
  connector: (node) =>
43
44
  Rx.make((get) =>
44
- pipe(
45
+ Function.pipe(
45
46
  get(node),
46
47
  Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
47
48
  Option.map((node) => [
@@ -110,7 +111,7 @@ export default (context: PluginContext) =>
110
111
  id: `${meta.id}/actions`,
111
112
  actions: (node) =>
112
113
  Rx.make((get) =>
113
- pipe(
114
+ Function.pipe(
114
115
  get(node),
115
116
  Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
116
117
  Option.map(() => [
@@ -132,7 +133,7 @@ export default (context: PluginContext) =>
132
133
  id: `${meta.id}/plugins`,
133
134
  connector: (node) =>
134
135
  Rx.make((get) =>
135
- pipe(
136
+ Function.pipe(
136
137
  get(node),
137
138
  Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
138
139
  Option.map(() => {
@@ -5,7 +5,7 @@
5
5
  import { type Meta, type StoryObj } from '@storybook/react-vite';
6
6
 
7
7
  import { faker } from '@dxos/random';
8
- import { withTheme } from '@dxos/react-ui/testing';
8
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
9
9
 
10
10
  import { translations } from '../translations';
11
11
 
@@ -14,9 +14,8 @@ import { PluginDetail } from './PluginDetail';
14
14
  const meta = {
15
15
  title: 'plugins/plugin-registry/PluginDetail',
16
16
  component: PluginDetail,
17
- decorators: [withTheme],
17
+ decorators: [withTheme, withLayout({ container: 'column' })],
18
18
  parameters: {
19
- layout: 'column',
20
19
  translations,
21
20
  },
22
21
  } satisfies Meta<typeof PluginDetail>;
@@ -33,6 +32,7 @@ export const Default: Story = {
33
32
  name: 'Test Plugin',
34
33
  description: faker.lorem.paragraphs(2),
35
34
  icon: 'ph--bug--regular',
35
+ iconHue: 'sky',
36
36
  homePage: 'https://example.com',
37
37
  source: 'https://github.com/example/test-plugin',
38
38
  screenshots: [
@@ -7,6 +7,7 @@ import React from 'react';
7
7
  import { type Plugin } from '@dxos/app-framework';
8
8
  import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
9
9
  import { StackItem } from '@dxos/react-ui-stack';
10
+ import { getStyles, mx } from '@dxos/react-ui-theme';
10
11
 
11
12
  import { meta } from '../meta';
12
13
 
@@ -18,45 +19,61 @@ export type PluginDetailProps = {
18
19
 
19
20
  export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
20
21
  const { t } = useTranslation(meta.id);
21
- const { id, name, description, homePage, source, screenshots } = plugin.meta;
22
+ const {
23
+ id,
24
+ name,
25
+ description,
26
+ homePage,
27
+ source,
28
+ screenshots,
29
+ icon = 'ph--circle--regular',
30
+ iconHue = 'neutral',
31
+ } = plugin.meta;
32
+ const styles = getStyles(iconHue);
22
33
 
23
34
  return (
24
- <StackItem.Content classNames='block overflow-y-auto'>
25
- <div role='none' className='container-max-width p-4'>
26
- <div role='none' className='flex justify-between items-center'>
27
- <p>{id}</p>
28
- <Input.Root>
29
- <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
30
- </Input.Root>
35
+ <StackItem.Content scrollable>
36
+ <div role='none' className='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
37
+ <div role='none'>
38
+ <Icon classNames={mx('p-1 rounded', styles.bg, styles.icon)} icon={icon} size={14} />
31
39
  </div>
40
+ <div role='none' className='flex flex-col gap-6'>
41
+ <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 is-full pbs-1'>
42
+ <h2 className='text-xl'>{name}</h2>
43
+ <Input.Root>
44
+ <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
45
+ </Input.Root>
46
+ <p className='pbs-0.5 text-sm text-description'>{id}</p>
47
+ </div>
32
48
 
33
- {screenshots && screenshots.length > 0 && (
34
49
  <div role='none'>
35
- <h1 className='text-lg mb-2'>Preview</h1>
36
- <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
50
+ <p className='text-description'>{description}</p>
37
51
  </div>
38
- )}
39
52
 
40
- <div role='none'>
41
- <p>{description}</p>
42
- </div>
53
+ {screenshots && screenshots.length > 0 && (
54
+ <div role='none' className='flex flex-col gap-2'>
55
+ <h2>Preview</h2>
56
+ <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
57
+ </div>
58
+ )}
43
59
 
44
- <div role='none'>
45
- <h1 className='text-lg mb-2'>Resources</h1>
46
- <div className='flex gap-2'>
47
- {homePage && (
48
- <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
49
- {t('home page label')}
50
- <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
51
- </Link>
52
- )}
60
+ <div role='none' className='flex flex-col gap-2'>
61
+ <h2>Resources</h2>
62
+ <div className='flex gap-2'>
63
+ {homePage && (
64
+ <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
65
+ {t('home page label')}
66
+ <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
67
+ </Link>
68
+ )}
53
69
 
54
- {source && (
55
- <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
56
- {t('source label')}
57
- <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
58
- </Link>
59
- )}
70
+ {source && (
71
+ <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
72
+ {t('source label')}
73
+ <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
74
+ </Link>
75
+ )}
76
+ </div>
60
77
  </div>
61
78
  </div>
62
79
  </div>
@@ -5,10 +5,12 @@
5
5
  import React, { type MouseEvent, useCallback } from 'react';
6
6
 
7
7
  import { type Plugin } from '@dxos/app-framework';
8
- import { Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
8
+ import { type ChromaticPalette, Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
9
9
  import { descriptionText, mx } from '@dxos/react-ui-theme';
10
+ import { getStyles } from '@dxos/react-ui-theme';
10
11
 
11
12
  import { meta } from '../meta';
13
+ import { type RegistryTagType } from '../types';
12
14
 
13
15
  export type PluginItemProps = {
14
16
  plugin: Plugin;
@@ -25,11 +27,11 @@ export const PluginItem = ({
25
27
  enabled = [],
26
28
  onClick,
27
29
  onChange,
28
- hasSettings: _hasSettings,
30
+ hasSettings: hasSettingsParam,
29
31
  onSettings,
30
32
  }: PluginItemProps) => {
31
33
  const { t } = useTranslation(meta.id);
32
- const { id, name, description, tags, icon = 'ph--circle--regular' } = plugin.meta;
34
+ const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
33
35
  const isEnabled = enabled.includes(id);
34
36
  const inputId = `${id}-input`;
35
37
  const labelId = `${id}-label`;
@@ -44,8 +46,11 @@ export const PluginItem = ({
44
46
  [id, isEnabled, onChange],
45
47
  );
46
48
 
47
- const hasSettings = _hasSettings?.(id) ?? false;
49
+ const hasSettings = hasSettingsParam?.(id) ?? false;
48
50
  const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
51
+ const styles = getStyles(iconHue);
52
+ const gridCols = 'grid grid-cols-[5rem_1fr]';
53
+ const gridRows = 'grid grid-rows-[40px_1fr_min-content_40px]';
49
54
 
50
55
  return (
51
56
  <ListItem.Root
@@ -53,67 +58,63 @@ export const PluginItem = ({
53
58
  labelId={labelId}
54
59
  data-testid={`pluginList.${id}`}
55
60
  aria-describedby={descriptionId}
56
- // TODO(burdon): Use Rail vars.
57
- classNames='is-full bs-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr_32px] p-1 border border-separator rounded-md'
61
+ classNames={mx(gridCols, 'bs-[12rem] is-full gap-3 pie-2 border border-separator rounded-md overflow-hidden')}
58
62
  >
59
- {/* Header. */}
60
- <div className='flex flex-col grow justify-center items-center'>
61
- <Icon icon={icon} size={6} onClick={handleClick} classNames='text-subdued cursor-pointer' />
62
- </div>
63
- <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
64
- <span className='truncate'>{name ?? id}</span>
65
- </div>
66
- <div className='flex justify-center items-center'>
67
- <Input.Root id={inputId}>
68
- <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
69
- </Input.Root>
63
+ <div className={mx(gridRows, 'justify-center rounded-l-md', styles.bg)}>
64
+ <div />
65
+ <Icon classNames={mx('cursor-pointer', styles.icon)} icon={icon} size={14} onClick={handleClick} />
70
66
  </div>
71
67
 
72
- {/* Body. */}
73
- <div />
74
- {(description || tags) && (
75
- <div id={descriptionId} className='col-span-2 flex flex-col w-full justify-between gap-2 pb-2'>
76
- <div className='grow'>
77
- <p className={mx(descriptionText, 'line-clamp-3 min-w-0 pie-2')}>{description}</p>
78
- </div>
79
- {tags && tags.length > 0 && (
80
- <div>
81
- {tags.map((tag) => (
82
- <Tag key={tag} palette={'indigo'} classNames='text-xs capitalize'>
83
- {tag}
84
- </Tag>
85
- ))}
86
- </div>
87
- )}
68
+ <div className={mx(gridRows)}>
69
+ <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
70
+ <span className='text-lg truncate'>{name ?? id}</span>
88
71
  </div>
89
- )}
90
72
 
91
- {/* Footer. */}
92
- <div />
93
- <div className='flex gap-2 items-center pie-1'>
94
- <Link
95
- aria-describedby={descriptionId}
96
- classNames='text-sm text-description cursor-pointer'
97
- onClick={handleClick}
98
- >
99
- {t('details label')}
100
- </Link>
73
+ <div>
74
+ <p className={mx(descriptionText, 'line-clamp-4 min-is-0')}>{description}</p>
75
+ </div>
101
76
 
102
- <div className='flex-1' />
103
- </div>
104
- <div className='flex justify-center items-center'>
105
- {hasSettings && (
77
+ <div className='flex -mis-0.5 overflow-x-auto scrollbar-none'>
78
+ {tags?.map((tag) => (
79
+ <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
80
+ {tag}
81
+ </Tag>
82
+ ))}
83
+ </div>
84
+
85
+ <div className='flex gap-2 items-center text-sm'>
106
86
  <IconButton
107
87
  aria-describedby={descriptionId}
108
- classNames='text-sm text-description cursor-pointer'
88
+ classNames='cursor-pointer'
109
89
  icon='ph--gear--regular'
110
90
  label={t('settings label')}
111
91
  iconOnly
112
92
  size={4}
113
93
  onClick={handleSettings}
94
+ disabled={!hasSettings}
114
95
  />
115
- )}
96
+
97
+ <Link aria-describedby={descriptionId} classNames='text-description cursor-pointer' onClick={handleClick}>
98
+ {t('details label')}
99
+ </Link>
100
+
101
+ <div className='grow' />
102
+ <div className='pie-1'>
103
+ <Input.Root id={inputId}>
104
+ <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
105
+ </Input.Root>
106
+ </div>
107
+ </div>
116
108
  </div>
117
109
  </ListItem.Root>
118
110
  );
119
111
  };
112
+
113
+ const tagColors: Record<RegistryTagType, ChromaticPalette> = {
114
+ new: 'rose',
115
+ beta: 'teal',
116
+ labs: 'blue',
117
+ popular: 'green',
118
+ featured: 'pink',
119
+ experimental: 'amber',
120
+ };
@@ -7,11 +7,11 @@ import React, { useState } from 'react';
7
7
 
8
8
  import { type Plugin, definePlugin } from '@dxos/app-framework';
9
9
  import { faker } from '@dxos/random';
10
- import { type ThemedClassName } from '@dxos/react-ui';
11
- import { withTheme } from '@dxos/react-ui/testing';
12
- import { mx } from '@dxos/react-ui-theme';
10
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
11
+ import { getHashHue } from '@dxos/react-ui-theme';
13
12
 
14
13
  import { translations } from '../translations';
14
+ import { RegistryTagType } from '../types';
15
15
 
16
16
  import { PluginList } from './PluginList';
17
17
 
@@ -26,24 +26,24 @@ const icons = [
26
26
  'ph--github-logo--regular',
27
27
  ];
28
28
 
29
- const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
29
+ const DefaultStory = () => {
30
30
  const [plugins] = useState<Plugin[]>(
31
31
  faker.helpers.multiple(
32
- definePlugin(
33
- {
34
- id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
35
- name: `${faker.commerce.productName()}`,
36
- description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
37
- tags: faker.datatype.boolean({ probability: 0.6 })
38
- ? [faker.helpers.arrayElement(['labs', 'beta', 'alpha', 'stable', 'new', '新発売'])]
39
- : undefined,
40
- icon: faker.helpers.arrayElement(icons),
41
- homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
42
- source: faker.internet.url(),
43
- },
44
- () => [],
45
- ),
46
- { count: 16 },
32
+ () =>
33
+ definePlugin(
34
+ {
35
+ id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
36
+ name: `${faker.commerce.productName()}`,
37
+ description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
38
+ tags: faker.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
39
+ icon: faker.helpers.arrayElement(icons),
40
+ iconHue: getHashHue(faker.string.uuid()),
41
+ homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
42
+ source: faker.internet.url(),
43
+ },
44
+ () => [],
45
+ )(),
46
+ { count: 32 },
47
47
  ),
48
48
  );
49
49
  const [enabled, setEnabled] = useState<string[]>([]);
@@ -52,20 +52,14 @@ const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
52
52
  setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
53
53
  };
54
54
 
55
- return (
56
- <div className={mx('flex overflow-hidden', classNames)}>
57
- <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
58
- </div>
59
- );
55
+ return <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />;
60
56
  };
61
57
 
62
58
  const meta = {
63
59
  title: 'plugins/plugin-registry/PluginList',
64
60
  component: PluginList,
65
61
  render: DefaultStory,
66
- decorators: [withTheme],
67
62
  parameters: {
68
- layout: 'column',
69
63
  translations,
70
64
  },
71
65
  } satisfies Meta<typeof PluginList>;
@@ -74,10 +68,13 @@ export default meta;
74
68
 
75
69
  type Story = StoryObj<typeof meta>;
76
70
 
77
- export const Default: Story = {};
71
+ export const Default: Story = {
72
+ decorators: [withTheme, withLayout({ container: 'column', scroll: true })],
73
+ };
78
74
 
79
- export const Column: Story = {
80
- args: {
81
- classNames: 'w-[30rem]',
75
+ export const FullScreen: Story = {
76
+ decorators: [withTheme, withLayout({ scroll: true })],
77
+ parameters: {
78
+ layout: 'fullscreen',
82
79
  },
83
80
  };
@@ -15,11 +15,9 @@ export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
15
15
 
16
16
  export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
17
17
  return (
18
- <List classNames='grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] auto-rows-[12rem] gap-3 p-3'>
18
+ <List classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] gap-4 p-4'>
19
19
  {plugins.map((plugin) => (
20
- <div key={plugin.meta.id} className='flex'>
21
- <PluginItem plugin={plugin} {...props} />
22
- </div>
20
+ <PluginItem key={plugin.meta.id} plugin={plugin} {...props} />
23
21
  ))}
24
22
  </List>
25
23
  );
@@ -70,7 +70,7 @@ export const RegistryContainer = ({ id, plugins: _plugins }: { id: string; plugi
70
70
  );
71
71
 
72
72
  return (
73
- <StackItem.Content classNames='min-bs-0 overflow-y-auto scrollbar-thin contain-layout'>
73
+ <StackItem.Content scrollable>
74
74
  <PluginList
75
75
  plugins={plugins}
76
76
  enabled={manager.enabled}
package/src/meta.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  //
4
4
 
5
5
  import { type PluginMeta } from '@dxos/app-framework';
6
+ import { trim } from '@dxos/util';
6
7
 
7
8
  // TODO(wittjosiah): Deck does not currently support `/` in ids.
8
9
  // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
@@ -13,4 +14,8 @@ export const REGISTRY_KEY = 'plugin-registry';
13
14
  export const meta: PluginMeta = {
14
15
  id: 'dxos.org/plugin/registry',
15
16
  name: 'Plugins',
17
+ description: trim`
18
+ Plugin management system for discovering, installing, and configuring workspace extensions.
19
+ Browse available plugins and customize your workspace capabilities.
20
+ `,
16
21
  };
package/src/types.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { Schema } from 'effect';
5
+ import * as Schema from 'effect/Schema';
6
6
 
7
7
  export const RegistrySettingsSchema = Schema.mutable(
8
8
  Schema.Struct({
@@ -11,3 +11,7 @@ export const RegistrySettingsSchema = Schema.mutable(
11
11
  );
12
12
 
13
13
  export type RegistrySettings = Schema.Schema.Type<typeof RegistrySettingsSchema>;
14
+
15
+ export const RegistryTagType = Schema.Literal('new', 'beta', 'labs', 'popular', 'featured', 'experimental');
16
+
17
+ export type RegistryTagType = Schema.Schema.Type<typeof RegistryTagType>;
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/capabilities/app-graph-builder.ts"],
4
- "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, type PluginContext, SettingsAction, contributes, createIntent } from '@dxos/app-framework';\nimport { createExtension } from '@dxos/plugin-graph';\n\nimport { REGISTRY_ID, REGISTRY_KEY, meta } from '../meta';\n\nexport default (context: PluginContext) =>\n contributes(Capabilities.AppGraphBuilder, [\n createExtension({\n id: meta.id,\n actions: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),\n Option.map((node) => [\n {\n id: meta.id,\n data: async () => {\n const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n await dispatch(createIntent(SettingsAction.OpenPluginRegistry));\n },\n properties: {\n label: ['open plugin registry label', { ns: meta.id }],\n icon: 'ph--squares-four--regular',\n disposition: 'menu',\n },\n },\n ]),\n Option.getOrElse(() => []),\n ),\n ),\n }),\n createExtension({\n id: meta.id,\n connector: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),\n Option.map((node) => [\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 Option.getOrElse(() => []),\n ),\n ),\n }),\n createExtension({\n id: `${meta.id}/actions`,\n actions: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),\n Option.map(() => [\n {\n id: `${meta.id}/load-by-url`,\n data: async () => {},\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 Option.getOrElse(() => []),\n ),\n ),\n }),\n createExtension({\n id: `${meta.id}/plugins`,\n connector: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),\n Option.map(() => {\n const manager = context.getCapability(Capabilities.PluginManager);\n return manager.plugins.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 Option.getOrElse(() => []),\n ),\n ),\n }),\n ]);\n"],
5
- "mappings": "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",
6
- "names": ["Rx", "Option", "pipe", "Capabilities", "SettingsAction", "contributes", "createIntent", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "some", "none", "map", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "SettingsAction", "OpenPluginRegistry", "properties", "label", "ns", "icon", "disposition", "getOrElse", "connector", "REGISTRY_ID", "type", "testId", "nodes", "REGISTRY_KEY", "key", "disabled", "manager", "PluginManager", "plugins", "plugin", "replaceAll", "name"]
7
- }
@@ -1,14 +0,0 @@
1
- // src/meta.ts
2
- var REGISTRY_ID = "!dxos:plugin-registry";
3
- var REGISTRY_KEY = "plugin-registry";
4
- var meta = {
5
- id: "dxos.org/plugin/registry",
6
- name: "Plugins"
7
- };
8
-
9
- export {
10
- REGISTRY_ID,
11
- REGISTRY_KEY,
12
- meta
13
- };
14
- //# sourceMappingURL=chunk-MWZPWWWF.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/meta.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\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: PluginMeta = {\n id: 'dxos.org/plugin/registry',\n name: 'Plugins',\n};\n"],
5
- "mappings": ";AASO,IAAMA,cAAc;AACpB,IAAMC,eAAe;AAErB,IAAMC,OAAmB;EAC9BC,IAAI;EACJC,MAAM;AACR;",
6
- "names": ["REGISTRY_ID", "REGISTRY_KEY", "meta", "id", "name"]
7
- }