@dxos/app-framework 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/moon.yml

@@ -5,6 +5,7 @@ tags:
   - ts-build
   - ts-test
   - typedoc
+  - storybook
 tasks:
   compile:
     args:
@@ -12,3 +13,6 @@ tasks:
       - '--entryPoint=src/testing/index.ts'
       - '--entryPoint=src/worker.ts'
       - '--preactSignalTracking'
+  test:
+    inputs:
+      - .storybook/*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-framework",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "description": "A framework for building applications from composible plugins.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,16 +10,19 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
     },
     "./worker": {
+      "source": "./src/worker.ts",
       "types": "./dist/types/src/worker.d.ts",
       "browser": "./dist/lib/browser/worker.mjs",
       "node": "./dist/lib/node-esm/worker.mjs"
@@ -37,43 +40,45 @@
     }
   },
   "dependencies": {
+    "@effect/ai": "0.29.1",
+    "@effect/experimental": "0.56.0",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
-    "@dxos/ai": "0.8.4-main.84f28bd",
-    "@dxos/app-graph": "0.8.4-main.84f28bd",
-    "@dxos/async": "0.8.4-main.84f28bd",
-    "@dxos/artifact": "0.8.4-main.84f28bd",
-    "@dxos/client-protocol": "0.8.4-main.84f28bd",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/keys": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/local-storage": "0.8.4-main.84f28bd",
-    "@dxos/react-hooks": "0.8.4-main.84f28bd",
-    "@dxos/schema": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@preact/signals-core": "^1.12.1",
+    "@dxos/app-graph": "0.8.4-main.a4bbb77",
+    "@dxos/ai": "0.8.4-main.a4bbb77",
+    "@dxos/blueprints": "0.8.4-main.a4bbb77",
+    "@dxos/debug": "0.8.4-main.a4bbb77",
+    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
+    "@dxos/client-protocol": "0.8.4-main.a4bbb77",
+    "@dxos/async": "0.8.4-main.a4bbb77",
+    "@dxos/functions": "0.8.4-main.a4bbb77",
+    "@dxos/invariant": "0.8.4-main.a4bbb77",
+    "@dxos/keys": "0.8.4-main.a4bbb77",
+    "@dxos/live-object": "0.8.4-main.a4bbb77",
+    "@dxos/local-storage": "0.8.4-main.a4bbb77",
+    "@dxos/log": "0.8.4-main.a4bbb77",
+    "@dxos/schema": "0.8.4-main.a4bbb77",
+    "@dxos/react-hooks": "0.8.4-main.a4bbb77",
+    "@dxos/util": "0.8.4-main.a4bbb77"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.88.0",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "effect": "3.16.13",
-    "react": "~18.2.0",
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.0",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
     "typedoc": "0.28.1",
-    "@dxos/echo-signals": "0.8.4-main.84f28bd",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.84f28bd"
+    "@dxos/echo-signals": "0.8.4-main.a4bbb77",
+    "@dxos/random": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.a4bbb77",
+    "@dxos/storybook-utils": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0"
+    "react": "^19.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/common/capabilities.ts

@@ -2,43 +2,75 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Tool, type Toolkit } from '@effect/ai';
 import { type Registry } from '@effect-rx/rx-react';
-import { type Schema } from 'effect';
+import { type Layer, type Schema } from 'effect';
 import { type FC, type PropsWithChildren } from 'react';
 
-import { type ExecutableTool } from '@dxos/ai';
-import { type GraphBuilder, type BuilderExtensions } from '@dxos/app-graph';
-import { type ArtifactDefinition } from '@dxos/artifact';
+import { type AiService, type AiServiceRouter } from '@dxos/ai';
+import { type BuilderExtensions, type GraphBuilder } from '@dxos/app-graph';
+import { type Blueprint } from '@dxos/blueprints';
 import { type Space } from '@dxos/client-protocol';
+import { type FunctionDefinition } from '@dxos/functions';
 import { type RootSettingsStore } from '@dxos/local-storage';
 import { type AnchoredTo } from '@dxos/schema';
 
+import { type PluginManager, defineCapability } from '../core';
+import { type AnyIntentResolver, type IntentContext } from '../plugin-intent';
+
 import { type FileInfo } from './file';
 import { type NodeSerializer } from './graph';
 import { type SurfaceDefinition } from './surface';
 import { type Resource } from './translations';
-import { type PluginManager, defineCapability } from '../core';
-import { type AnyIntentResolver, type IntentContext } from '../plugin-intent';
 
+// TODO(burdon): Sort.
 export namespace Capabilities {
-  export const PluginManager = defineCapability<PluginManager>('dxos.org/app-framework/capability/plugin-manager');
-
+  /**
+   * @category Capability
+   */
   export const Null = defineCapability<null>('dxos.org/app-framework/capability/null');
 
+  /**
+   * @category Capability
+   */
+  export const PluginManager = defineCapability<PluginManager>('dxos.org/app-framework/capability/plugin-manager');
+
+  /**
+   * @category Capability
+   */
   export const RxRegistry = defineCapability<Registry.Registry>('dxos.org/app-framework/capability/rx-registry');
 
   export type ReactContext = Readonly<{ id: string; dependsOn?: string[]; context: FC<PropsWithChildren> }>;
+
+  /**
+   * @category Capability
+   */
   export const ReactContext = defineCapability<ReactContext>('dxos.org/app-framework/capability/react-context');
 
   export type ReactRoot = Readonly<{ id: string; root: FC<PropsWithChildren> }>;
+
+  /**
+   * @category Capability
+   */
   export const ReactRoot = defineCapability<ReactRoot>('dxos.org/app-framework/capability/react-root');
 
   export type ReactSurface = SurfaceDefinition | readonly SurfaceDefinition[];
+
+  /**
+   * @category Capability
+   */
   export const ReactSurface = defineCapability<ReactSurface>('dxos.org/app-framework/common/react-surface');
 
   export type IntentResolver = AnyIntentResolver | readonly AnyIntentResolver[];
+
+  /**
+   * @category Capability
+   */
   export const IntentResolver = defineCapability<IntentResolver>('dxos.org/app-framework/capability/intent-resolver');
 
+  /**
+   * @category Capability
+   */
   export const IntentDispatcher = defineCapability<IntentContext>(
     'dxos.org/app-framework/capability/intent-dispatcher',
   );
@@ -65,23 +97,41 @@ export namespace Capabilities {
      */
     scrollIntoView: string | undefined;
   }>;
+
+  /**
+   * @category Capability
+   */
   export const Layout = defineCapability<Layout>('dxos.org/app-framework/capability/layout');
 
-  // TODO(burdon): Why array?
+  /**
+   * @category Capability
+   */
   export const Translations = defineCapability<Readonly<Resource[]>>('dxos.org/app-framework/capability/translations');
 
+  /**
+   * @category Capability
+   */
   export const AppGraph = defineCapability<Readonly<Pick<GraphBuilder, 'graph' | 'explore'>>>(
     'dxos.org/app-framework/capability/app-graph',
   );
 
+  /**
+   * @category Capability
+   */
   export const AppGraphBuilder = defineCapability<BuilderExtensions>(
     'dxos.org/app-framework/capability/app-graph-builder',
   );
 
+  /**
+   * @category Capability
+   */
   export const AppGraphSerializer = defineCapability<NodeSerializer[]>(
     'dxos.org/app-framework/capability/app-graph-serializer',
   );
 
+  /**
+   * @category Capability
+   */
   export const SettingsStore = defineCapability<RootSettingsStore>('dxos.org/app-framework/capability/settings-store');
 
   // TODO(wittjosiah): The generics caused type inference issues for schemas when contributing settings.
@@ -92,22 +142,73 @@ export namespace Capabilities {
     schema: Schema.Schema.All;
     value?: Record<string, any>;
   };
+
+  /**
+   * @category Capability
+   */
   export const Settings = defineCapability<Settings>('dxos.org/app-framework/capability/settings');
 
   export type Metadata = Readonly<{ id: string; metadata: Record<string, any> }>;
+
+  /**
+   * @category Capability
+   */
   export const Metadata = defineCapability<Metadata>('dxos.org/app-framework/capability/metadata');
 
-  export const Tools = defineCapability<ExecutableTool[]>('dxos.org/app-framework/capability/tools');
-  export const ArtifactDefinition = defineCapability<ArtifactDefinition>(
-    'dxos.org/app-framework/capability/artifact-definition',
+  // TODO(dmaretskyi): Consider combining Toolkit and ToolkitHandler for type-safe context.
+
+  /**
+   * @category Capability
+   */
+  export const Toolkit = defineCapability<Toolkit.Any>('dxos.org/app-framework/capability/ai-toolkit');
+
+  /**
+   * @category Capability
+   */
+  export const ToolkitHandler = defineCapability<Layer.Layer<Tool.Handler<any>, never, never>>(
+    'dxos.org/app-framework/capability/ai-toolkit-handler',
+  );
+
+  /**
+   * @category Capability
+   */
+  export const BlueprintDefinition = defineCapability<Blueprint.Blueprint>(
+    'dxos.org/app-framework/capability/blueprint-definition',
+  );
+
+  export type AiServiceLayer = Layer.Layer<AiService.AiService>;
+  export const AiServiceLayer = defineCapability<AiServiceLayer>(
+    'dxos.org/app-framework/capability/ai-service-factory',
+  );
+
+  /**
+   * Plugins can contribute them to provide model resolvers.
+   */
+  export const AiModelResolver = defineCapability<Layer.Layer<AiServiceRouter.AiModelResolver>>(
+    'dxos.org/app-framework/capability/ai-model-resolver',
+  );
+
+  /**
+   * @category Capability
+   */
+  export const Functions = defineCapability<FunctionDefinition<any, any>[]>(
+    'dxos.org/app-framework/capability/functions',
   );
 
   export type FileUploader = (file: File, space: Space) => Promise<FileInfo | undefined>;
+
+  /**
+   * @category Capability
+   */
   export const FileUploader = defineCapability<FileUploader>('dxos.org/app-framework/capability/file-uploader');
 
   type AnchorSort = {
     key: string;
     sort: (anchorA: AnchoredTo, anchorB: AnchoredTo) => number;
   };
+
+  /**
+   * @category Capability
+   */
   export const AnchorSort = defineCapability<AnchorSort>('dxos.org/app-framework/capability/anchor-sort');
 }

package/src/common/collaboration.ts

@@ -4,17 +4,14 @@
 
 import { Schema } from 'effect';
 
-import { Expando, Ref } from '@dxos/echo-schema';
+import { DataType } from '@dxos/schema';
 
 export namespace CollaborationActions {
-  export class InsertContent extends Schema.TaggedClass<InsertContent>()('assistant/intent-content', {
+  export class AcceptProposal extends Schema.TaggedClass<AcceptProposal>()('collaboration/accept-proposal', {
     input: Schema.Struct({
-      target: Expando,
-      object: Ref(Expando),
-      at: Schema.optional(Schema.String),
-      label: Schema.String.pipe(Schema.optional),
-    }).annotations({
-      description: 'Enables plugins to inject content blocks or references into a related entity.',
+      subject: Schema.Any,
+      anchor: Schema.String,
+      proposal: DataType.MessageBlock.Proposal,
     }),
     output: Schema.Void,
   }) {}

package/src/common/events.ts

@@ -2,9 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities } from './capabilities';
 import { defineEvent } from '../core';
 
+import { Capabilities } from './capabilities';
+
 export namespace Events {
   /**
    * Fired when the app is started.
@@ -48,6 +49,7 @@ export namespace Events {
   /**
    * Fired to load any newly available artifacts definitions.
    */
+  // TODO(burdon): Rename.
   export const SetupArtifactDefinition = defineEvent('dxos.org/app-framework/event/setup-artifact-definition');
 
   //

package/src/common/layout.ts

@@ -6,14 +6,13 @@ import { Schema } from 'effect';
 
 import { Label } from '../plugin-intent';
 
-export const LAYOUT_PLUGIN = 'dxos.org/plugin/layout';
-export const LAYOUT_ACTION = `${LAYOUT_PLUGIN}/action`;
+const LAYOUT_PLUGIN = 'dxos.org/plugin/layout';
 
 /**
  * Expected payload for layout actions.
  */
 export namespace LayoutAction {
-  export const UPDATE_LAYOUT = `${LAYOUT_ACTION}/update-layout`;
+  export const UPDATE_LAYOUT = `${LAYOUT_PLUGIN}/action/update-layout`;
 
   /**
    * Generic layout action.

package/src/common/surface.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type JSX, type ForwardedRef, type PropsWithChildren, type ReactNode } from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 
 import { type GuardedType, type MakeOptional, type Position } from '@dxos/util';
 
@@ -11,7 +11,7 @@ import { type ErrorBoundary } from '../react';
 /**
  * SurfaceProps are the props that are passed to the Surface component.
  */
-export type SurfaceProps<T extends Record<string, any> = Record<string, unknown>> = PropsWithChildren<{
+export type SurfaceProps<T extends Record<string, any> = Record<string, unknown>> = {
   /**
    * If specified, the Surface will be wrapped in an error boundary.
    * The fallback component will be rendered if an error occurs.
@@ -23,17 +23,16 @@ export type SurfaceProps<T extends Record<string, any> = Record<string, unknown>
    * The placeholder component will be rendered while the surface component is loading.
    */
   placeholder?: ReactNode;
-}> &
-  MakeOptional<CoreSurfaceProps<T>, 'id' | 'data'> & {
-    /**
-     * Additional props to pass to the component.
-     * These props are not used by Surface itself but may be used by components which resolve the surface.
-     */
-    [key: string]: unknown;
+} & MakeOptional<CoreSurfaceProps<T>, 'id' | 'data'> &
+  // Additional props to pass to the component.
+  // These props are not used by Surface itself but may be used by components which resolve the surface.
+  // Exclude known prop names to prevent overriding well-defined props.
+  {
+    [K in keyof Record<string, any>]: K extends keyof CoreSurfaceProps<T> | 'fallback' | 'placeholder' ? never : any;
   };
 
 // NOTE: If `[key: string]: unknown` is included in shared types, when re-used other fields become unknown as well.
-type CoreSurfaceProps<T extends Record<string, any> = Record<string, unknown>> = {
+type CoreSurfaceProps<T extends Record<string, any> = Record<string, unknown>> = PropsWithChildren<{
   /**
    * ID for debugging.
    */
@@ -53,19 +52,17 @@ type CoreSurfaceProps<T extends Record<string, any> = Record<string, unknown>> =
    * If more than one component is resolved, the limit determines how many are rendered.
    */
   limit?: number | undefined;
-};
+}>;
 
-type SurfaceComponentProps<T extends Record<string, any> = Record<string, unknown>> = PropsWithChildren<
-  CoreSurfaceProps<T> & { [key: string]: unknown }
->;
+type SurfaceComponentProps<T extends Record<string, any> = Record<string, unknown>> = CoreSurfaceProps<T> &
+  Record<string, any>;
 
 /**
  * React component used to render a surface once is has matched.
  */
-export type SurfaceComponent<T extends Record<string, any> = Record<string, unknown>> = (
-  props: SurfaceComponentProps<T>,
-  forwardedRef: ForwardedRef<HTMLElement>,
-) => JSX.Element | null;
+export type SurfaceComponent<T extends Record<string, any> = Record<string, unknown>> = ComponentType<
+  SurfaceComponentProps<T>
+>;
 
 /**
  * Definition of when a SurfaceComponent should be rendered.

package/src/components/App.stories.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { useApp } from './useApp';
+
+const DefaultStory = () => {
+  const App = useApp({
+    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/components/App.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Capabilities } from '../common';
+import { topologicalSort } from '../helpers';
+import { useCapabilities } from '../react';
+
+import { type UseAppOptions } from './useApp';
+import { LoadingState, useLoading } from './useLoading';
+
+export type AppProps = Pick<UseAppOptions, 'placeholder' | 'debounce'> & {
+  state: { ready: boolean; error: unknown };
+};
+
+export const App = ({ placeholder: Placeholder, state, debounce }: AppProps) => {
+  const reactContexts = useCapabilities(Capabilities.ReactContext);
+  const reactRoots = useCapabilities(Capabilities.ReactRoot);
+  const stage = useLoading(state, debounce);
+
+  if (state.error) {
+    // This triggers the error boundary to provide UI feedback for the startup error.
+    throw state.error;
+  }
+
+  // TODO(wittjosiah): Consider using Suspense instead.
+  if (stage < LoadingState.Done) {
+    if (!Placeholder) {
+      return null;
+    }
+
+    return <Placeholder stage={stage} />;
+  }
+
+  const ComposedContext = composeContexts(reactContexts);
+  return (
+    <ComposedContext>
+      {reactRoots.map(({ id, root: Component }) => (
+        <Component key={id} />
+      ))}
+    </ComposedContext>
+  );
+};
+
+const composeContexts = (contexts: Capabilities.ReactContext[]) => {
+  if (contexts.length === 0) {
+    return ({ children }: PropsWithChildren) => <>{children}</>;
+  }
+
+  return topologicalSort(contexts)
+    .map(({ context }) => context)
+    .reduce((Acc, Next) => ({ children }) => (
+      <Acc>
+        <Next>{children}</Next>
+      </Acc>
+    ));
+};

package/src/components/DefaultFallback.tsx

@@ -0,0 +1,26 @@
+//
+// 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/components/index.ts

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