@dxos/app-framework 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/playground/layout/plugin.ts

@@ -1,18 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Common from '../../common';
-import { Capability, Plugin } from '../../core';
-
-const Layout = Capability.lazy('Layout', () => import('./Layout'));
-
-const meta = { id: 'dxos.org/test/layout', name: 'Layout' };
-
-export const LayoutPlugin = Plugin.define(meta).pipe(
-  Plugin.addModule({
-    activatesOn: Common.ActivationEvent.Startup,
-    activate: Layout,
-  }),
-  Plugin.make,
-);

package/src/playground/logger/Toolbar.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import React, { useCallback } from 'react';
-
-import { Button } from '@dxos/react-ui';
-
-import * as Common from '../../common';
-import { Capability } from '../../core';
-import { useOperationInvoker } from '../../react';
-
-import { LogOperation } from './schema';
-
-export const Logger = () => {
-  const { invokePromise } = useOperationInvoker();
-  const handleClick = useCallback(() => invokePromise(LogOperation, { message: 'Hello, world!' }), []);
-  return <Button onClick={handleClick}>Log</Button>;
-};
-
-export default Capability.makeModule(() =>
-  Effect.succeed(
-    Capability.contributes(
-      Common.Capability.ReactSurface,
-      Common.createSurface({
-        id: 'dxos.org/test/logger/action',
-        role: 'toolbar',
-        component: Logger,
-      }),
-    ),
-  ),
-);

package/src/playground/logger/index.ts

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

package/src/playground/logger/plugin.ts

@@ -1,42 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { log } from '@dxos/log';
-import { OperationResolver } from '@dxos/operation';
-
-import * as Common from '../../common';
-import { Capability, Plugin } from '../../core';
-
-import { LogOperation } from './schema';
-
-const Toolbar = Capability.lazy('Toolbar', () => import('./Toolbar'));
-
-const meta = {
-  id: 'dxos.org/test/logger',
-  name: 'Logger',
-};
-
-export const LoggerPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addOperationResolverModule({
-    activate: () =>
-      Effect.succeed(
-        Capability.contributes(Common.Capability.OperationResolver, [
-          OperationResolver.make({
-            operation: LogOperation,
-            handler: ({ message }) =>
-              Effect.sync(() => {
-                log.info(message);
-              }),
-          }),
-        ]),
-      ),
-  }),
-  Plugin.addModule({
-    activatesOn: Common.ActivationEvent.Startup,
-    activate: Toolbar,
-  }),
-  Plugin.make,
-);

package/src/playground/logger/schema.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Operation } from '@dxos/operation';
-
-export class Log extends Schema.TaggedClass<Log>()('dxos.org/test/logger/log', {
-  input: Schema.Struct({
-    message: Schema.String,
-  }),
-  output: Schema.Void,
-}) {}
-
-export const LogOperation = Operation.make({
-  meta: { key: 'dxos.org/test/logger/log', name: 'Log' },
-  schema: {
-    input: Schema.Struct({ message: Schema.String }),
-    output: Schema.Void,
-  },
-});

package/src/playground/playground.stories.tsx

@@ -1,54 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Effect from 'effect/Effect';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { OperationPlugin } from '../plugin-operation';
-import { useApp } from '../react';
-
-import { DebugPlugin } from './debug';
-import { GeneratorPlugin, createNumberPlugin } from './generator';
-import { LayoutPlugin } from './layout';
-import { LoggerPlugin } from './logger';
-
-const plugins = [
-  // prettier-ignore
-  OperationPlugin(),
-  LayoutPlugin(),
-  DebugPlugin(),
-  LoggerPlugin(),
-  GeneratorPlugin(),
-];
-const core = plugins.map((plugin) => plugin.meta.id);
-
-const Placeholder = () => {
-  return <div>Loading...</div>;
-};
-
-const DefaultStory = () => {
-  const App = useApp({
-    pluginLoader: (id: string) => Effect.sync(() => createNumberPlugin(id)),
-    plugins,
-    core,
-    placeholder: Placeholder,
-  });
-
-  return <App />;
-};
-
-const meta = {
-  title: 'sdk/app-framework/playground',
-  render: DefaultStory,
-  decorators: [withTheme],
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};

package/src/plugin-settings/SettingsPlugin.ts

@@ -1,19 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Common from '../common';
-import { Capability, Plugin } from '../core';
-
-import { meta } from './meta';
-import { translations } from './translations';
-
-const SettingsOperationResolver = Capability.lazy('SettingsOperationResolver', () => import('./operation-resolver'));
-const SettingsAppGraphBuilder = Capability.lazy('SettingsAppGraphBuilder', () => import('./app-graph-builder'));
-
-export const SettingsPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addOperationResolverModule({ activate: SettingsOperationResolver }),
-  Common.Plugin.addAppGraphModule({ activate: SettingsAppGraphBuilder }),
-  Plugin.make,
-);

package/src/plugin-settings/actions.ts

@@ -1,64 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Operation } from '@dxos/operation';
-
-import { Capability } from '../core';
-
-import { meta } from './meta';
-
-// TODO(burdon): Document.
-export const SETTINGS_ID = '!dxos:settings';
-export const SETTINGS_KEY = 'settings';
-
-export namespace SettingsAction {
-  export class Open extends Schema.TaggedClass<Open>()(`${meta.id}/open`, {
-    input: Schema.Struct({
-      plugin: Schema.optional(Schema.String),
-    }),
-    output: Schema.Void,
-  }) {}
-
-  export class OpenPluginRegistry extends Schema.TaggedClass<OpenPluginRegistry>()(`${meta.id}/open-plugin-registry`, {
-    input: Schema.Void,
-    output: Schema.Void,
-  }) {}
-}
-
-const SETTINGS_OPERATION = `${meta.id}/operation`;
-
-/**
- * Operations for the Settings plugin.
- */
-export namespace SettingsOperation {
-  export const Open = Operation.make({
-    meta: {
-      key: `${SETTINGS_OPERATION}/open`,
-      name: 'Open Settings',
-      description: 'Open the settings panel.',
-    },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.Struct({
-        plugin: Schema.optional(Schema.String.annotations({ description: 'The plugin to open settings for.' })),
-      }),
-      output: Schema.Void,
-    },
-  });
-
-  export const OpenPluginRegistry = Operation.make({
-    meta: {
-      key: `${SETTINGS_OPERATION}/open-plugin-registry`,
-      name: 'Open Plugin Registry',
-      description: 'Open the plugin registry.',
-    },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.Void,
-      output: Schema.Void,
-    },
-  });
-}

package/src/plugin-settings/app-graph-builder.ts

@@ -1,140 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { GraphBuilder, NodeMatcher } from '@dxos/app-graph';
-import { Operation } from '@dxos/operation';
-import { isNonNullable } from '@dxos/util';
-
-import * as Common from '../common';
-import { Capability, type Plugin } from '../core';
-
-import { SETTINGS_ID, SETTINGS_KEY, SettingsOperation } from './actions';
-import { meta } from './meta';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    // Get context for lazy capability access in callbacks.
-    const capabilities = yield* Capability.Service;
-    const managerAtom = capabilities.atom(Common.Capability.PluginManager);
-    const settingsAtom = capabilities.atom(Common.Capability.Settings);
-
-    const extensions = yield* Effect.all([
-      GraphBuilder.createExtension({
-        id: `${meta.id}/action`,
-        match: NodeMatcher.whenRoot,
-        actions: () =>
-          Effect.succeed([
-            {
-              id: meta.id,
-              data: () => Operation.invoke(SettingsOperation.Open, {}),
-              properties: {
-                label: ['open settings label', { ns: meta.id }],
-                icon: 'ph--gear--regular',
-                disposition: 'menu',
-                keyBinding: {
-                  macos: 'meta+,',
-                  windows: 'alt+,',
-                },
-              },
-            },
-          ]),
-      }),
-      GraphBuilder.createExtension({
-        id: `${meta.id}/core`,
-        match: NodeMatcher.whenRoot,
-        connector: () =>
-          Effect.succeed([
-            {
-              id: SETTINGS_ID,
-              type: meta.id,
-              properties: {
-                label: ['app settings label', { ns: meta.id }],
-                icon: 'ph--gear--regular',
-                disposition: 'pin-end',
-                position: 'hoist',
-                testId: 'treeView.appSettings',
-              },
-            },
-          ]),
-      }),
-      GraphBuilder.createExtension({
-        id: `${meta.id}/core-plugins`,
-        match: NodeMatcher.whenId(SETTINGS_ID),
-        connector: (node, get) => {
-          const [manager] = get(managerAtom);
-          const allSettings = get(settingsAtom);
-          return Effect.succeed([
-            ...manager
-              .getPlugins()
-              .filter((plugin: Plugin.Plugin) => manager.getCore().includes(plugin.meta.id))
-              .map((plugin: Plugin.Plugin): [Plugin.Meta, Common.Capability.Settings] | null => {
-                const settings = allSettings.find((s) => s.prefix === plugin.meta.id);
-                if (!settings) {
-                  return null;
-                }
-
-                return [plugin.meta, settings];
-              })
-              .filter(isNonNullable)
-              .map(([meta, settings]: [Plugin.Meta, Common.Capability.Settings]) => ({
-                id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
-                type: 'category',
-                data: settings,
-                properties: {
-                  label: meta.name ?? meta.id,
-                  icon: meta.icon ?? 'ph--circle--regular',
-                },
-              })),
-
-            {
-              id: `${SETTINGS_KEY}:custom-plugins`,
-              type: 'category',
-              properties: {
-                label: ['custom plugins label', { ns: meta.id }],
-                icon: 'ph--squares-four--regular',
-                role: 'branch',
-                disposition: 'collection',
-              },
-            },
-          ]);
-        },
-      }),
-      GraphBuilder.createExtension({
-        id: `${meta.id}/custom-plugins`,
-        match: NodeMatcher.whenId(`${SETTINGS_KEY}:custom-plugins`),
-        connector: (node, get) => {
-          const [manager] = get(managerAtom);
-          const allSettings = get(settingsAtom);
-          return Effect.succeed(
-            manager
-              .getPlugins()
-              .filter((plugin: Plugin.Plugin) => !manager.getCore().includes(plugin.meta.id))
-              .map((plugin: Plugin.Plugin): [Plugin.Meta, Common.Capability.Settings] | null => {
-                const settings = allSettings.find((s) => s.prefix === plugin.meta.id);
-                if (!settings) {
-                  return null;
-                }
-
-                return [plugin.meta, settings];
-              })
-              .filter(isNonNullable)
-              .map(([meta, settings]: [Plugin.Meta, Common.Capability.Settings]) => ({
-                id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
-                type: 'category',
-                data: settings,
-                properties: {
-                  label: meta.name ?? meta.id,
-                  icon: meta.icon ?? 'ph--circle--regular',
-                },
-              })),
-          );
-        },
-      }),
-    ]);
-
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
-  }),
-);

package/src/plugin-settings/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './actions';
-export * from './SettingsPlugin';

package/src/plugin-settings/meta.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Plugin } from '@dxos/app-framework';
-
-export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/settings',
-  name: 'Settings',
-};

package/src/plugin-settings/operation-resolver.ts

@@ -1,55 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { OperationResolver } from '@dxos/operation';
-
-import * as Common from '../common';
-import { Capability } from '../core';
-
-import { SETTINGS_ID, SETTINGS_KEY, SettingsOperation } from './actions';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    return Capability.contributes(Common.Capability.OperationResolver, [
-      //
-      // Open Settings
-      //
-      OperationResolver.make({
-        operation: SettingsOperation.Open,
-        handler: (input) =>
-          Effect.gen(function* () {
-            const { invoke } = yield* Capability.get(Common.Capability.OperationInvoker);
-            yield* invoke(Common.LayoutOperation.SwitchWorkspace, { subject: SETTINGS_ID });
-            if (input.plugin) {
-              // Fire and forget the open operation.
-              yield* Effect.fork(
-                invoke(Common.LayoutOperation.Open, {
-                  subject: [`${SETTINGS_KEY}:${input.plugin.replaceAll('/', ':')}`],
-                }),
-              );
-            }
-          }),
-      }),
-
-      //
-      // Open Plugin Registry
-      //
-      OperationResolver.make({
-        operation: SettingsOperation.OpenPluginRegistry,
-        handler: () =>
-          Effect.gen(function* () {
-            const { invoke } = yield* Capability.get(Common.Capability.OperationInvoker);
-            yield* invoke(Common.LayoutOperation.SwitchWorkspace, { subject: SETTINGS_ID });
-            yield* Effect.fork(
-              invoke(Common.LayoutOperation.Open, {
-                subject: [`${SETTINGS_KEY}:plugins`],
-              }),
-            );
-          }),
-      }),
-    ]);
-  }),
-);

package/src/plugin-settings/translations.ts

@@ -1,19 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Resource } from '../common';
-
-import { meta } from './meta';
-
-export const translations = [
-  {
-    'en-US': {
-      [meta.id]: {
-        'open settings label': 'Open settings',
-        'app settings label': 'Settings',
-        'custom plugins label': 'Plugins',
-      },
-    },
-  },
-] as const satisfies Resource[];

package/src/react/App.stories.tsx

@@ -1,63 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Effect from 'effect/Effect';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import * as Common from '../common';
-import { Capability, Plugin } from '../core';
-
-import { useApp } from './useApp';
-
-// Minimal plugin that contributes a ReactRoot.
-const TestPlugin = Plugin.define({
-  id: 'dxos.org/plugin/test',
-  name: 'Test Plugin',
-}).pipe(
-  Plugin.addModule({
-    id: 'TestMain',
-    activatesOn: Common.ActivationEvent.Startup,
-    activate: () =>
-      Effect.succeed([
-        Capability.contributes(Common.Capability.ReactRoot, {
-          id: 'dxos.org/plugin/test/root',
-          root: () => (
-            <div className='fixed inset-0 flex items-center justify-center text-2xl'>App Started Successfully!</div>
-          ),
-        }),
-      ]),
-  }),
-  Plugin.make,
-);
-
-const plugins = [TestPlugin()];
-const core = [TestPlugin.meta.id];
-
-const DefaultStory = () => {
-  const App = useApp({
-    plugins,
-    core,
-    placeholder: () => <div className='fixed inset-0 flex items-center justify-center'>Loading...</div>,
-  });
-
-  return <App />;
-};
-
-const meta = {
-  title: 'sdk/app-framework/App',
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/react/DefaultFallback.tsx

@@ -1,26 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-/**
- * NOTE: Default fallback should not use tailwind or theme.
- */
-export const DefaultFallback = ({ error }: { error: Error }) => {
-  return (
-    <div
-      style={{
-        margin: '1rem',
-        padding: '1rem',
-        overflow: 'hidden',
-        border: '4px solid teal',
-        borderRadius: '1rem',
-      }}
-    >
-      {/* TODO(wittjosiah): Link to docs for replacing default. */}
-      <h1 style={{ margin: '0.5rem 0', fontSize: '1.2rem' }}>ERROR: {error.message}</h1>
-      <pre style={{ overflow: 'auto', fontSize: '1rem', whiteSpace: 'pre-wrap', color: '#888888' }}>{error.stack}</pre>
-    </div>
-  );
-};

package/src/react/ErrorBoundary.tsx

@@ -1,56 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { Component, type FC, type PropsWithChildren, type ReactNode } from 'react';
-
-type State = {
-  error: Error | undefined;
-};
-
-export type ErrorBoundaryProps = PropsWithChildren<{
-  data?: any;
-  fallback?: FC<{ data?: any; error: Error }>;
-}>;
-
-/**
- * Surface error boundary.
- * For basic usage prefer providing a fallback component to `Surface`.
- *
- * Ref: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
- */
-export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
-  static getDerivedStateFromError(error: Error): { error: Error } {
-    return { error };
-  }
-
-  override state = { error: undefined };
-
-  override componentDidUpdate(prevProps: ErrorBoundaryProps): void {
-    if (prevProps.data !== this.props.data) {
-      this.resetError();
-    }
-  }
-
-  override render(): ReactNode {
-    if (this.state.error) {
-      const Fallback = this.props.fallback ?? DefaultFallback;
-      return <Fallback data={this.props.data} error={this.state.error} />;
-    }
-
-    return this.props.children;
-  }
-
-  private resetError(): void {
-    this.setState({ error: undefined });
-  }
-}
-
-const DefaultFallback: NonNullable<ErrorBoundaryProps['fallback']> = ({ data, error }) => {
-  return (
-    <div className='flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm'>
-      <h1 className='p-2'>ERROR: {error.message}</h1>
-      <pre className='p-2 overflow-y-auto text-sm text-subdued'>{JSON.stringify(data, null, 2)}</pre>
-    </div>
-  );
-};

package/src/react/index.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './common';
-export * from './types';
-
-export * from './ErrorBoundary';
-export * from './PluginManagerProvider';
-export * from './Surface';
-
-export * from './useApp';
-export * from './useCapabilities';
-export * from './useOperationResolver';