@dxos/plugin-crx 0.0.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-crx",
-  "version": "0.0.0",
+  "version": "0.14.0",
   "description": "Composer plugin for coordinating with the composer-crx browser extension.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,19 +10,21 @@
   },
   "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "imports": {
     "#capabilities": {
       "source": {
         "workerd": "./src/capabilities/gen/workerd.ts",
         "node": "./src/capabilities/gen/node.ts",
-        "default": "./src/capabilities/index.ts"
+        "tauri": "./src/capabilities/gen/tauri.ts",
+        "browser": "./src/capabilities/gen/browser.ts"
       },
       "types": "./dist/types/src/capabilities/index.d.ts",
       "workerd": "./dist/lib/capabilities.workerd.mjs",
       "node": "./dist/lib/capabilities.node.mjs",
-      "default": "./dist/lib/capabilities.mjs"
+      "tauri": "./dist/lib/capabilities.tauri.mjs",
+      "browser": "./dist/lib/capabilities.browser.mjs"
     },
     "#containers": {
       "source": "./src/containers/index.ts",
@@ -126,35 +128,35 @@
     "PLUGIN.mdl"
   ],
   "dependencies": {
-    "effect": "4.0.0-rc.117",
-    "@dxos/app-framework": "0.11.1",
-    "@dxos/compute": "0.11.1",
-    "@dxos/app-toolkit": "0.11.1",
-    "@dxos/crx-protocol": "0.0.0",
-    "@dxos/echo": "0.11.1",
-    "@dxos/effect": "0.11.1",
-    "@dxos/plugin-client": "0.11.1",
-    "@dxos/keys": "0.11.1",
-    "@dxos/log": "0.11.1",
-    "@dxos/plugin-space": "0.11.1",
-    "@dxos/react-ui": "0.11.1",
-    "@dxos/react-ui-form": "0.11.1",
-    "@dxos/plugin-markdown": "0.11.1",
-    "@dxos/util": "0.11.1",
-    "@dxos/types": "0.11.1"
+    "effect": "4.0.0",
+    "@dxos/app-framework": "0.14.0",
+    "@dxos/app-toolkit": "0.14.0",
+    "@dxos/compute": "0.14.0",
+    "@dxos/crx-protocol": "0.14.0",
+    "@dxos/echo": "0.14.0",
+    "@dxos/effect": "0.14.0",
+    "@dxos/keys": "0.14.0",
+    "@dxos/log": "0.14.0",
+    "@dxos/plugin-client": "0.14.0",
+    "@dxos/plugin-markdown": "0.14.0",
+    "@dxos/plugin-space": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/react-ui-form": "0.14.0",
+    "@dxos/types": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
-    "@effect/atom-react": "4.0.0-rc.117",
-    "@storybook/react-vite": "^10.5.8",
+    "@effect/atom-react": "4.0.0",
+    "@storybook/react-vite": "^10.6.0",
     "@types/react": "~19.2.17",
     "react": "~19.2.7",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vitest": "4.1.10",
-    "@dxos/random": "0.11.1"
+    "@dxos/random": "0.14.0"
   },
   "peerDependencies": {
     "react": "~19.2.7",
-    "@dxos/react-ui": "^0.11.1"
+    "@dxos/react-ui": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/gen/browser.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'browser' condition.
+
+import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
+import * as Capabilities from '@dxos/app-framework/Capabilities';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { CrxCapabilities, CrxEvents } from '#types';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+export const CrxSettings = AppCapability.settings(() => import('../settings.ts'), {
+  activatesOn: ActivationEvents.Idle,
+  provides: [CrxCapabilities.Settings],
+});
+
+export const InstallPageActions = Capability.lazyModule(
+  'InstallPageActions',
+  {
+    requires: [Capabilities.OperationInvoker, Capabilities.AtomRegistry, CrxCapabilities.Settings],
+    provides: [],
+    activatesOn: CrxEvents.Start,
+  },
+  () => import('../install-page-actions.ts'),
+);
+
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
+  activatesOn: ActivationEvents.Idle,
+});
+
+export const PageActionProvider = Capability.lazyModule(
+  'PageActionProvider',
+  { provides: [CrxCapabilities.PageAction], activatesOn: CrxEvents.Start },
+  () => import('../page-action-provider.ts'),
+);
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.role.article'],
+});
+
+export const Translations = AppCapability.translations(translations);

package/src/capabilities/gen/tauri.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'tauri' condition.
+
+import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
+import * as Capabilities from '@dxos/app-framework/Capabilities';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { CrxCapabilities, CrxEvents } from '#types';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+export const CrxSettings = AppCapability.settings(() => import('../settings.ts'), {
+  activatesOn: ActivationEvents.Idle,
+  provides: [CrxCapabilities.Settings],
+});
+
+export const InstallPageActions = Capability.lazyModule(
+  'InstallPageActions',
+  {
+    requires: [Capabilities.OperationInvoker, Capabilities.AtomRegistry, CrxCapabilities.Settings],
+    provides: [],
+    activatesOn: CrxEvents.Start,
+  },
+  () => import('../install-page-actions.ts'),
+);
+
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
+  activatesOn: ActivationEvents.Idle,
+});
+
+export const PageActionProvider = Capability.lazyModule(
+  'PageActionProvider',
+  { provides: [CrxCapabilities.PageAction], activatesOn: CrxEvents.Start },
+  () => import('../page-action-provider.ts'),
+);
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.role.article'],
+});
+
+export const Translations = AppCapability.translations(translations);

package/src/capabilities/react-surface.ts

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 
 import { CrxSettings } from '#containers';
 import { meta } from '#meta';

package/src/capabilities/settings.ts

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import * as Capability from '@dxos/app-framework/Capability';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { createKvsStore } from '@dxos/effect';
+import * as KvsStore from '@dxos/effect/KvsStore';
 
 import { meta } from '#meta';
 import { CrxCapabilities, Settings } from '#types';
@@ -18,7 +18,7 @@ import { CrxCapabilities, Settings } from '#types';
  */
 export default Capability.makeModule(() =>
   Effect.sync(() => {
-    const settingsAtom = createKvsStore({
+    const settingsAtom = KvsStore.make({
       key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => Settings.defaults,

package/src/containers/CrxSettings/CrxSettings.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 import React, { useEffect, useMemo } from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';

package/src/containers/CrxSettings/CrxSettings.tsx

@@ -4,10 +4,13 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { useSettingsState } from '@dxos/app-framework/ui';
-import { type AppSurface, SettingsScope } from '@dxos/app-toolkit/ui';
-import { Flex, IconButton, useTranslation } from '@dxos/react-ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
+import * as SettingsScope from '@dxos/app-toolkit/SettingsScope';
 import { Form } from '@dxos/react-ui-form';
+import * as Button from '@dxos/react-ui/Button';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as Layout from '@dxos/react-ui/Layout';
 
 import { meta } from '#meta';
 import { Settings } from '#types';
@@ -27,8 +30,8 @@ export type CrxSettingsProps = AppSurface.SettingsData<{ readonly?: boolean }>;
  * round-trip connection test against the extension's content relay.
  */
 export const CrxSettings = ({ subject, readonly }: CrxSettingsProps) => {
-  const { t } = useTranslation(meta.profile.key);
-  const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+  const { t } = UiHooks.useTranslation(meta.profile.key);
+  const { settings, updateSettings } = Hooks.useSettingsState<Settings.Settings>(subject.atom);
   const [test, setTest] = useState<TestState>({ kind: 'idle' });
 
   // Round-trip a ping to the extension and report its identity (or why it failed).
@@ -58,14 +61,14 @@ export const CrxSettings = ({ subject, readonly }: CrxSettingsProps) => {
           <Form.FieldSet
             label={meta.profile.name ?? meta.profile.key}
             description={t('settings.description')}
-            actions={readonly ? undefined : <SettingsScope prefix={subject.prefix} />}
+            actions={readonly ? undefined : <SettingsScope.Root prefix={subject.prefix} />}
           >
             <Form.Fields />
           </Form.FieldSet>
 
           <Form.FieldSet label={t('test.title')}>
-            <Flex gap='sm'>
-              <IconButton
+            <Layout.Flex gap='sm'>
+              <Button.Root
                 disabled={test.kind === 'pending'}
                 icon='ph--plug--regular'
                 label={t('test.button.label')}
@@ -73,7 +76,7 @@ export const CrxSettings = ({ subject, readonly }: CrxSettingsProps) => {
               />
 
               {/* role=status + aria-live so screen readers announce the async outcome. */}
-              <Flex align='center'>
+              <Layout.Flex align='center'>
                 <span
                   role='status'
                   aria-live='polite'
@@ -82,14 +85,14 @@ export const CrxSettings = ({ subject, readonly }: CrxSettingsProps) => {
                       ? 'text-sm text-success-text'
                       : test.kind === 'error'
                         ? 'text-sm text-error-text'
-                        : 'text-sm text-description'
+                        : 'text-sm text-fg-muted'
                   }
                 >
                   {test.kind === 'ok' || test.kind === 'error' ? test.message : ''}
                   {test.kind === 'pending' ? t('test.pending.message') : ''}
                 </span>
-              </Flex>
-            </Flex>
+              </Layout.Flex>
+            </Layout.Flex>
           </Form.FieldSet>
         </Form.Content>
       </Form.Viewport>

package/src/index.ts

@@ -3,5 +3,4 @@
 //
 
 export * as CrxPlugin from './CrxPlugin.ts';
-export * from '#meta';
 export * from '#types';

package/src/stories/Testbench.stories.tsx

@@ -6,7 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
 import { random } from '@dxos/random';
-import { Image, ScrollArea } from '@dxos/react-ui';
+import * as Media from '@dxos/react-ui/Media';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 const DefaultStory = () => {
@@ -20,10 +21,10 @@ const DefaultStory = () => {
   );
 
   return (
-    <ScrollArea.Root centered padding>
+    <ScrollArea.Root>
       <ScrollArea.Viewport classNames='flex flex-col gap-2 py-3'>
         <h1 className='text-2xl'>{title}</h1>
-        <Image src={image} alt={title} fit='cover' />
+        <Media.Image src={image} alt={title} fit='cover' />
         {paragraphs.map((paragraph, index) => (
           <p key={index}>{paragraph}</p>
         ))}

package/src/translations.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import { type Resource } from '@dxos/react-ui';
+import type * as Theme from '@dxos/react-ui/Theme';
 
 import { meta } from '#meta';
 
@@ -28,4 +28,4 @@ export const translations = [
       },
     },
   },
-] as const satisfies Resource[];
+] as const satisfies Theme.Resource[];

package/src/types/CrxCapabilities.ts

@@ -4,7 +4,7 @@
 
 // @import-as-namespace
 
-import type * as Atom from 'effect/unstable/reactivity/Atom';
+import type * as Atom from 'effect/reactivity/Atom';
 
 import * as Capability from '@dxos/app-framework/Capability';