@dxos/plugin-help 0.8.4-main.4a85c3132b → 0.8.4-main.51f1e5ca51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-help",
-  "version": "0.8.4-main.4a85c3132b",
+  "version": "0.8.4-main.51f1e5ca51",
   "description": "Help plugin.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,16 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#hooks": "./src/hooks/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#translations": "./src/translations.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -23,6 +33,17 @@
       "types": "./dist/types/src/meta.d.ts",
       "browser": "./dist/lib/browser/meta.mjs"
     },
+    "./operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "browser": "./dist/lib/browser/operations/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
@@ -30,16 +51,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -48,45 +59,45 @@
     "@effect-atom/atom": "^0.5.1",
     "@fluentui/react-tabster": "9.26.11",
     "react-joyride": "^2.7.2",
-    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
-    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
-    "@dxos/effect": "0.8.4-main.4a85c3132b",
-    "@dxos/debug": "0.8.4-main.4a85c3132b",
-    "@dxos/app-graph": "0.8.4-main.4a85c3132b",
-    "@dxos/echo": "0.8.4-main.4a85c3132b",
-    "@dxos/keyboard": "0.8.4-main.4a85c3132b",
-    "@dxos/operation": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
-    "@dxos/react-client": "0.8.4-main.4a85c3132b",
-    "@dxos/util": "0.8.4-main.4a85c3132b"
+    "@dxos/app-framework": "0.8.4-main.51f1e5ca51",
+    "@dxos/compute": "0.8.4-main.51f1e5ca51",
+    "@dxos/app-toolkit": "0.8.4-main.51f1e5ca51",
+    "@dxos/echo": "0.8.4-main.51f1e5ca51",
+    "@dxos/debug": "0.8.4-main.51f1e5ca51",
+    "@dxos/effect": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-client": "0.8.4-main.51f1e5ca51",
+    "@dxos/keyboard": "0.8.4-main.51f1e5ca51",
+    "@dxos/app-graph": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-client": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-space": "0.8.4-main.51f1e5ca51",
+    "@dxos/util": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-graph": "0.8.4-main.51f1e5ca51"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "react-floater": "0.7.9",
     "type-fest": "4.10.1",
-    "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.4a85c3132b",
-    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b",
-    "@dxos/random": "0.8.4-main.4a85c3132b"
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.51f1e5ca51",
+    "@dxos/random": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui": "0.8.4-main.51f1e5ca51",
+    "@dxos/storybook-utils": "0.8.4-main.51f1e5ca51",
+    "@dxos/ui-theme": "0.8.4-main.51f1e5ca51"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
+    "@dxos/react-ui": "0.8.4-main.51f1e5ca51",
+    "@dxos/ui-theme": "0.8.4-main.51f1e5ca51"
   },
   "publishConfig": {
     "access": "public"

package/src/HelpPlugin.tsx

@@ -5,16 +5,16 @@
 import { ActivationEvents, Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
 
-import { AppGraphBuilder, HelpState, OperationResolver, ReactRoot, ReactSurface } from './capabilities';
-import { meta } from './meta';
-import { translations } from './translations';
-import { type Step } from './types';
+import { AppGraphBuilder, HelpState, OperationHandler, ReactRoot, ReactSurface } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { type Step } from '#types';
 
 export type HelpPluginOptions = { steps?: Step[] };
 
 export const HelpPlugin = Plugin.define<HelpPluginOptions>(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({

package/src/capabilities/{app-graph-builder/app-graph-builder.ts → app-graph-builder.ts}

@@ -5,29 +5,31 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { GraphBuilder, NodeMatcher } from '@dxos/app-graph';
+import { GraphBuilder, Node, NodeMatcher } from '@dxos/app-graph';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 
-import { SHORTCUTS_DIALOG } from '../../constants';
-import { meta } from '../../meta';
-import { HelpCapabilities, HelpOperation } from '../../types';
+import { meta } from '#meta';
+import { HelpOperation } from '#operations';
+import { HelpCapabilities } from '#types';
+
+import { SHORTCUTS_DIALOG } from '../constants';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const extensions = yield* GraphBuilder.createExtension({
-      id: meta.id,
+      id: 'root',
       match: NodeMatcher.whenRoot,
       actions: () =>
         Effect.succeed([
-          {
+          Node.makeAction({
             id: HelpOperation.Start.meta.key,
             data: Effect.fnUntraced(function* () {
               yield* Capabilities.updateAtomValue(HelpCapabilities.State, (s) => ({ ...s, showHints: true }));
               yield* Operation.invoke(HelpOperation.Start);
             }),
             properties: {
-              label: ['open help tour', { ns: meta.id }],
+              label: ['open-help-tour.message', { ns: meta.id }],
               icon: 'ph--info--regular',
               keyBinding: {
                 macos: 'shift+meta+/',
@@ -36,9 +38,9 @@ export default Capability.makeModule(
               },
               testId: 'helpPlugin.openHelp',
             },
-          },
-          {
-            id: `${meta.id}/open-shortcuts`,
+          }),
+          Node.makeAction({
+            id: 'open-shortcuts',
             data: Effect.fnUntraced(function* () {
               yield* Capabilities.updateAtomValue(HelpCapabilities.State, (s) => ({ ...s, showHints: true }));
               yield* Operation.invoke(LayoutOperation.UpdateDialog, {
@@ -46,13 +48,13 @@ export default Capability.makeModule(
               });
             }),
             properties: {
-              label: ['open shortcuts label', { ns: meta.id }],
+              label: ['open-shortcuts.label', { ns: meta.id }],
               icon: 'ph--keyboard--regular',
               keyBinding: {
                 macos: 'meta+ctrl+/',
               },
             },
-          },
+          }),
         ]),
     });
 

package/src/capabilities/index.ts

@@ -2,8 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './operation-resolver';
-export * from './react-root';
-export * from './react-surface';
-export * from './state';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const HelpState = Capability.lazy('HelpState', () => import('./state'));

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { HelpOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, HelpOperationHandlerSet);
+  }),
+);

package/src/capabilities/{react-root/react-root.tsx → react-root.tsx}

@@ -8,9 +8,9 @@ import React from 'react';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { useAtomCapabilityState } from '@dxos/app-framework/ui';
 
-import { WelcomeTour } from '../../components';
-import { meta } from '../../meta';
-import { HelpCapabilities, type Step } from '../../types';
+import { WelcomeTour } from '#components';
+import { meta } from '#meta';
+import { HelpCapabilities, type Step } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* (steps?: Step[]) {

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -7,28 +7,28 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 
-import { SHORTCUTS_DIALOG } from '../../constants';
-import { ShortcutsDialogContent, ShortcutsHints, ShortcutsList } from '../../containers';
-import { meta } from '../../meta';
+import { ShortcutsDialogContent, ShortcutsHints, ShortcutsList } from '#containers';
+
+import { SHORTCUTS_DIALOG } from '../constants';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: `${meta.id}/hints`,
+        id: 'hints',
         role: 'hints',
         component: () => <ShortcutsHints />,
       }),
       Surface.create({
-        id: `${meta.id}/keyshortcuts`,
+        id: 'keyshortcuts',
         role: 'keyshortcuts',
         component: () => <ShortcutsList />,
       }),
       Surface.create({
         id: SHORTCUTS_DIALOG,
-        role: 'dialog',
-        filter: (data): data is { component: string } => data.component === SHORTCUTS_DIALOG,
+        filter: AppSurface.component(AppSurface.Dialog, SHORTCUTS_DIALOG),
         component: () => <ShortcutsDialogContent />,
       }),
     ]),

package/src/capabilities/{state/state.ts → state.ts}

@@ -7,8 +7,8 @@ import * as Effect from 'effect/Effect';
 import { Capability } from '@dxos/app-framework';
 import { createKvsStore } from '@dxos/effect';
 
-import { meta } from '../../meta';
-import { HelpCapabilities } from '../../types';
+import { meta } from '#meta';
+import { HelpCapabilities } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {

package/src/components/Shortcuts/ShortcutsList.tsx

@@ -8,7 +8,7 @@ import { Keyboard } from '@dxos/keyboard';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 import { Key } from './Key';
 

package/src/components/WelcomeTour/WelcomeTour.stories.tsx

@@ -7,19 +7,19 @@ import React, { useState } from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { StorybookPlugin } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Button, Icon } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { useHelp } from '../../hooks';
+import { useHelp } from '#hooks';
 
 import { WelcomeTour, type WelcomeTourProps } from './WelcomeTour';
 
 const App = () => {
   const { running, start } = useHelp();
-  const [items, setItems] = useState(() => Array.from({ length: 5 }).map(() => faker.lorem.sentence()));
+  const [items, setItems] = useState(() => Array.from({ length: 5 }).map(() => random.lorem.sentence()));
   const handleAdd = () => {
-    setItems((items) => [...items, faker.lorem.sentence()]);
+    setItems((items) => [...items, random.lorem.sentence()]);
   };
 
   return (
@@ -76,25 +76,25 @@ export const Default: StoryObj<typeof WelcomeTour> = {
       {
         target: '[data-joyride="basic/1"]',
         title: 'plugins/Step 1',
-        content: faker.lorem.paragraph(),
+        content: random.lorem.paragraph(),
         disableBeacon: true,
         placement: 'right',
       },
       {
         target: '[data-joyride="basic/2"]',
         title: 'plugins/Step 2',
-        content: faker.lorem.paragraph(),
+        content: random.lorem.paragraph(),
       },
       {
         target: '[data-joyride="basic/3"]',
         title: 'plugins/Step 3',
-        content: faker.lorem.paragraph(),
+        content: random.lorem.paragraph(),
         placement: 'right',
       },
       {
         target: '[data-joyride="basic/4"]',
         title: 'plugins/Step 4',
-        content: faker.lorem.paragraph(),
+        content: random.lorem.paragraph(),
         placement: 'top-end',
       },
     ],

package/src/components/WelcomeTour/WelcomeTour.tsx

@@ -9,7 +9,8 @@ import { usePluginManager } from '@dxos/app-framework/ui';
 import { useLayout } from '@dxos/app-toolkit/ui';
 import { useAsyncEffect } from '@dxos/react-ui';
 
-import { HelpContext, type Step } from '../../types';
+import { HelpContext, type Step } from '#types';
+
 import { Tooltip, floaterProps } from '../Tooltip';
 
 const addStepClass = (target: string | HTMLElement) => {
@@ -162,6 +163,7 @@ export const WelcomeTour = ({ steps: initialSteps, running: runningProp, onRunni
         callback={callback}
         floaterProps={floaterProps}
         tooltipComponent={Tooltip}
+        spotlightPadding={0}
       />
     </HelpContext.Provider>
   );

package/src/constants.ts

@@ -2,6 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
-export const SHORTCUTS_DIALOG = `${meta.id}/ShortcutsDialog`;
+export const SHORTCUTS_DIALOG = `${meta.id}.ShortcutsDialog`;

package/src/containers/ShortcutsDialogContent/ShortcutsDialogContent.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { ShortcutsDialogContent } from './ShortcutsDialogContent';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <ShortcutsDialogContent />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-help/containers/ShortcutsDialogContent',
+  component: ShortcutsDialogContent,
+  render: DefaultStory,
+  decorators: [withTheme(), withPluginManager()],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ShortcutsDialogContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/ShortcutsDialogContent/ShortcutsDialogContent.tsx

@@ -4,26 +4,25 @@
 
 import React from 'react';
 
-import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
+import { Dialog, useTranslation } from '@dxos/react-ui';
 
-import { ShortcutsList } from '../../components';
-import { meta } from '../../meta';
+import { ShortcutsList } from '#components';
+import { meta } from '#meta';
 
 export const ShortcutsDialogContent = () => {
   const { t } = useTranslation(meta.id);
 
   return (
     <Dialog.Content>
-      <div role='none' className='flex justify-between mb-1 pt-3 ps-2 pe-3 @md:pt-4 @md:ps-4 @md:pe-5'>
-        <Dialog.Title>{t('shortcuts dialog title')}</Dialog.Title>
+      <Dialog.Header>
+        <Dialog.Title>{t('shortcuts-dialog.title')}</Dialog.Title>
         <Dialog.Close asChild>
-          <IconButton icon='ph--x--bold' iconOnly size={3} label='Close' variant='ghost' autoFocus />
+          <Dialog.CloseIconButton />
         </Dialog.Close>
-      </div>
-
-      <div className='flex items-center justify-center'>
+      </Dialog.Header>
+      <Dialog.Body>
         <ShortcutsList />
-      </div>
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/containers/ShortcutsDialogContent/index.ts

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

package/src/containers/ShortcutsHints/index.ts

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

package/src/containers/ShortcutsList/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ShortcutsList } from './ShortcutsList';
-
-export default ShortcutsList;
+export { ShortcutsList as default } from './ShortcutsList';

package/src/hooks/useHelp.tsx

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { HelpContext } from '../types';
+import { HelpContext } from '#types';
 
 export const useHelp = () => {
   return useContext(HelpContext) ?? raise(new Error('Missing HelpContext'));

package/src/index.ts

@@ -5,7 +5,5 @@
 export { HelpCapabilities } from './types';
 export * from './components';
 export * from './constants';
-export * from './meta';
 export * from './HelpPlugin';
 export * from './hooks';
-export * from './types';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/help',
+  id: 'org.dxos.plugin.help',
   name: 'Help',
   description: trim`
     Built-in help system with documentation, tutorials, and contextual assistance.

package/src/operations/definitions.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+
+import { meta } from '#meta';
+
+const HELP_OPERATION = `${meta.id}.operation`;
+
+export const Start = Operation.make({
+  meta: { key: `${HELP_OPERATION}.start`, name: 'Start Help' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});

package/src/operations/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+export * as HelpOperation from './definitions';
+
+export const HelpOperationHandlerSet = OperationHandlerSet.lazy(() => import('./start'));

package/src/operations/start.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+
+import { HelpCapabilities } from '../types';
+import { Start } from './definitions';
+
+const handler: Operation.WithHandler<typeof Start> = Start.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      yield* Capabilities.updateAtomValue(HelpCapabilities.State, (state) => ({ ...state, running: true }));
+    }),
+  ),
+);
+
+export default handler;

package/src/translations.ts

@@ -4,16 +4,16 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
 export const translations = [
   {
     'en-US': {
       [meta.id]: {
-        'plugin name': 'Help',
-        'open help tour': 'Show welcome tour',
-        'open shortcuts label': 'Show shortcuts',
-        'shortcuts dialog title': 'Shortcuts',
+        'plugin.name': 'Help',
+        'open-help-tour.message': 'Show welcome tour',
+        'open-shortcuts.label': 'Show shortcuts',
+        'shortcuts-dialog.title': 'Shortcuts',
       },
     },
   },

package/src/types/capabilities.ts

@@ -7,7 +7,7 @@ import * as Schema from 'effect/Schema';
 
 import { Capability } from '@dxos/app-framework';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export namespace HelpCapabilities {
   export const StateSchema = Schema.mutable(
@@ -20,5 +20,5 @@ export namespace HelpCapabilities {
 
   export type State = Schema.Schema.Type<typeof StateSchema>;
 
-  export const State = Capability.make<Atom.Writable<State>>(`${meta.id}/capability/state`);
+  export const State = Capability.make<Atom.Writable<State>>(`${meta.id}.capability.state`);
 }