@dxos/app-framework 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

package/src/App.tsx

@@ -1,63 +1,168 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import { effect } from '@preact/signals-core';
+import React, { type PropsWithChildren, type ReactNode } from 'react';
 
 import { invariant } from '@dxos/invariant';
+import { create } from '@dxos/live-object';
 
-import { type HostPluginParams, Plugin, HostPlugin } from './plugins';
-import IntentMeta from './plugins/plugin-intent/meta';
-import SettingsMeta from './plugins/plugin-settings/meta';
-import SurfaceMeta from './plugins/plugin-surface/meta';
+import { Capabilities, Events } from './common';
+import { PluginManager, type PluginManagerOptions, type Plugin } from './core';
+import { topologicalSort } from './helpers';
+import { ErrorBoundary, PluginManagerProvider, useCapabilities } from './react';
+
+const ENABLED_KEY = 'dxos.org/app-framework/enabled';
+
+export type CreateAppOptions = {
+  pluginManager?: PluginManager;
+  pluginLoader?: PluginManagerOptions['pluginLoader'];
+  plugins?: Plugin[];
+  core?: string[];
+  defaults?: string[];
+  placeholder?: ReactNode;
+  fallback?: ErrorBoundary['props']['fallback'];
+  cacheEnabled?: boolean;
+};
 
 /**
  * Expected usage is for this to be the entrypoint of the application.
  * Initializes plugins and renders the root components.
  *
  * @example
- * const meta = [LayoutMeta, MyPluginMeta];
- * const plugins = {
- *  [LayoutMeta.id]: Plugin.lazy(() => import('./plugins/LayoutPlugin/plugin')),
- *  [MyPluginMeta.id]: Plugin.lazy(() => import('./plugins/MyPlugin/plugin')),
- * };
- * const core = [LayoutMeta.id];
- * const default = [MyPluginMeta.id];
+ * const plugins = [LayoutPlugin(), MyPlugin()];
+ * const core = [LayoutPluginId];
+ * const default = [MyPluginId];
  * const fallback = <div>Initializing Plugins...</div>;
- * const App = createApp({ order, plugins, core, default, fallback });
+ * const App = createApp({ plugins, core, default, fallback });
  * createRoot(document.getElementById('root')!).render(
  *   <StrictMode>
  *     <App />
  *   </StrictMode>,
  * );
  *
+ * @param params.pluginLoader A function which loads new plugins.
  * @param params.plugins All plugins available to the application.
- * @param params.meta All plugin metadata.
  * @param params.core Core plugins which will always be enabled.
  * @param params.defaults Default plugins are enabled by default but can be disabled by the user.
- * @param params.fallback Fallback component to render while plugins are initializing.
+ * @param params.placeholder Placeholder component to render during startup.
+ * @param params.fallback Fallback component to render if an error occurs during startup.
+ * @param params.cacheEnabled Whether to cache enabled plugins in localStorage.
  */
-export const createApp = ({ meta, plugins, core, ...params }: HostPluginParams) => {
-  const hostPlugin = HostPlugin({
-    plugins: {
-      ...plugins,
-      [IntentMeta.id]: Plugin.lazy(() => import('./plugins/plugin-intent')),
-      [SettingsMeta.id]: Plugin.lazy(() => import('./plugins/plugin-settings')),
-      [SurfaceMeta.id]: Plugin.lazy(() => import('./plugins/plugin-surface')),
-    },
-    meta: [IntentMeta, SettingsMeta, SurfaceMeta, ...meta],
-    core: [IntentMeta.id, SettingsMeta.id, SurfaceMeta.id, ...core],
-    ...params,
+export const createApp = ({
+  pluginManager,
+  pluginLoader: _pluginLoader,
+  plugins = [],
+  core = plugins.map(({ meta }) => meta.id),
+  defaults = [],
+  placeholder = null,
+  fallback = DefaultFallback,
+  cacheEnabled = false,
+}: CreateAppOptions) => {
+  // TODO(wittjosiah): Provide a custom plugin loader which supports loading via url.
+  const pluginLoader =
+    _pluginLoader ??
+    ((id: string) => {
+      const plugin = plugins.find((plugin) => plugin.meta.id === id);
+      invariant(plugin, `Plugin not found: ${id}`);
+      return plugin;
+    });
+
+  const state = create({ ready: false, error: null });
+  const cached: string[] = JSON.parse(localStorage.getItem(ENABLED_KEY) ?? '[]');
+  const enabled = cacheEnabled && cached.length > 0 ? cached : defaults;
+  const manager = pluginManager ?? new PluginManager({ pluginLoader, plugins, core, enabled });
+
+  manager.activation.on(({ event, state: _state, error }) => {
+    if (event === Events.Startup.id) {
+      state.ready = _state === 'activated';
+    }
+
+    if (error && !state.ready && !state.error) {
+      state.error = error;
+    }
+  });
+
+  effect(() => {
+    cacheEnabled && localStorage.setItem(ENABLED_KEY, JSON.stringify(manager.enabled));
+  });
+
+  manager.context.contributeCapability({
+    interface: Capabilities.PluginManager,
+    implementation: manager,
+    module: 'dxos.org/app-framework/plugin-manager',
   });
 
-  invariant(hostPlugin.provides);
-  const { context: Context, root: Root } = hostPlugin.provides;
-  invariant(Context);
-  invariant(Root);
+  setupDevtools(manager);
+
+  // TODO(wittjosiah): Factor out such that this could be called per surface role when attempting to render.
+  void manager.activate(Events.SetupSurfaces);
+  void manager.activate(Events.Startup);
 
   return () => (
-    <Context>
-      <Root />
-    </Context>
+    <ErrorBoundary fallback={fallback}>
+      <PluginManagerProvider value={manager}>
+        <App placeholder={placeholder} state={state} />
+      </PluginManagerProvider>
+    </ErrorBoundary>
   );
 };
+
+type AppProps = Required<Pick<CreateAppOptions, 'placeholder'>> & {
+  state: { ready: boolean; error: unknown };
+};
+
+const App = ({ placeholder, state }: AppProps) => {
+  const reactContexts = useCapabilities(Capabilities.ReactContext);
+  const reactRoots = useCapabilities(Capabilities.ReactRoot);
+
+  if (state.error) {
+    // This trigger the error boundary to provide UI feedback for the startup error.
+    throw state.error;
+  }
+
+  // TODO(wittjosiah): Consider using Suspense instead?
+  if (!state.ready) {
+    return <>{placeholder}</>;
+  }
+
+  const ComposedContext = composeContexts(reactContexts);
+  return (
+    <ComposedContext>
+      {reactRoots.map(({ id, root: Component }) => (
+        <Component key={id} />
+      ))}
+    </ComposedContext>
+  );
+};
+
+// Default fallback does not use tailwind or theme.
+const DefaultFallback = ({ error }: { error: Error }) => {
+  return (
+    <div style={{ padding: '1rem' }}>
+      {/* TODO(wittjosiah): Link to docs for replacing default. */}
+      <h1 style={{ fontSize: '1.2rem', fontWeight: 700, margin: '0.5rem 0' }}>{error.message}</h1>
+      <pre>{error.stack}</pre>
+    </div>
+  );
+};
+
+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>
+    ));
+};
+
+const setupDevtools = (manager: PluginManager) => {
+  (globalThis as any).composer ??= {};
+  (globalThis as any).composer.manager = manager;
+};

package/src/common/capabilities.ts

@@ -0,0 +1,91 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Schema as S } from '@effect/schema';
+import { type FC, type PropsWithChildren } from 'react';
+
+import { type GraphBuilder } from '@dxos/app-graph';
+import { type Space } from '@dxos/client-protocol';
+import { type RootSettingsStore } from '@dxos/local-storage';
+
+import { type FileInfo } from './file';
+import { type NodeSerializer } from './graph';
+import { type SurfaceDefinition } from './surface';
+import { type Resource } from './translations';
+import { defineCapability, type PluginManager } from '../core';
+import { type AnyIntentResolver, type IntentContext } from '../plugin-intent';
+
+export namespace Capabilities {
+  export const PluginManager = defineCapability<PluginManager>('dxos.org/app-framework/capability/plugin-manager');
+
+  export const Null = defineCapability<null>('dxos.org/app-framework/capability/null');
+
+  export type ReactContext = Readonly<{ id: string; dependsOn?: string[]; context: FC<PropsWithChildren> }>;
+  export const ReactContext = defineCapability<ReactContext>('dxos.org/app-framework/capability/react-context');
+
+  export type ReactRoot = Readonly<{ id: string; root: FC<PropsWithChildren> }>;
+  export const ReactRoot = defineCapability<ReactRoot>('dxos.org/app-framework/capability/react-root');
+
+  export type ReactSurface = SurfaceDefinition | readonly SurfaceDefinition[];
+  export const ReactSurface = defineCapability<ReactSurface>('dxos.org/app-framework/common/react-surface');
+
+  export type IntentResolver = AnyIntentResolver | readonly AnyIntentResolver[];
+  export const IntentResolver = defineCapability<IntentResolver>('dxos.org/app-framework/capability/intent-resolver');
+
+  export const IntentDispatcher = defineCapability<IntentContext>(
+    'dxos.org/app-framework/capability/intent-dispatcher',
+  );
+
+  export type Layout = Readonly<{
+    mode: string;
+    dialogOpen: boolean;
+    sidebarOpen: boolean;
+    complementarySidebarOpen: boolean;
+    /**
+     * Identifiers of items which are currently active in the application.
+     */
+    active: string[];
+    /**
+     * Identifiers of items which were previously active in the application.
+     */
+    inactive: string[];
+    /**
+     * Identifier of the item which should be scrolled into view.
+     */
+    scrollIntoView: string | undefined;
+  }>;
+  export const Layout = defineCapability<Layout>('dxos.org/app-framework/capability/layout');
+
+  export const Translations = defineCapability<Readonly<Resource[]>>('dxos.org/app-framework/capability/translations');
+
+  export const AppGraph = defineCapability<Readonly<Pick<GraphBuilder, 'graph' | 'explore'>>>(
+    'dxos.org/app-framework/capability/app-graph',
+  );
+
+  export const AppGraphBuilder = defineCapability<Parameters<GraphBuilder['addExtension']>[0]>(
+    'dxos.org/app-framework/capability/app-graph-builder',
+  );
+
+  export const AppGraphSerializer = defineCapability<NodeSerializer[]>(
+    'dxos.org/app-framework/capability/app-graph-serializer',
+  );
+
+  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.
+  // export type Settings = Parameters<RootSettingsStore['createStore']>[0];
+  // export type Settings<T extends SettingsValue = SettingsValue> = SettingsProps<T>;
+  export type Settings = {
+    schema: S.Schema.All;
+    prefix: string;
+    value?: Record<string, any>;
+  };
+  export const Settings = defineCapability<Settings>('dxos.org/app-framework/capability/settings');
+
+  export type Metadata = Readonly<{ id: string; metadata: Record<string, any> }>;
+  export const Metadata = defineCapability<Metadata>('dxos.org/app-framework/capability/metadata');
+
+  export type FileUploader = (file: File, space: Space) => Promise<FileInfo | undefined>;
+  export const FileUploader = defineCapability<FileUploader>('dxos.org/app-framework/capability/file-uploader');
+}

package/src/common/events.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities } from './capabilities';
+import { defineEvent } from '../core';
+
+export namespace Events {
+  /**
+   * Fired when the app is started.
+   */
+  export const Startup = defineEvent('dxos.org/app-framework/event/startup');
+
+  //
+  // Dependent Events
+  //
+
+  /**
+   * Fired to load any newly available surfaces.
+   */
+  export const SetupSurfaces = defineEvent('dxos.org/app-framework/event/setup-surfaces');
+
+  /**
+   * Fired to load any newly available metadata.
+   */
+  export const SetupMetadata = defineEvent('dxos.org/app-framework/event/setup-metadata');
+
+  /**
+   * Fired before the intent dispatcher is activated.
+   */
+  export const SetupIntents = defineEvent('dxos.org/app-framework/event/setup-intents');
+
+  /**
+   * Fired before the settings store is activated.
+   */
+  export const SetupSettings = defineEvent('dxos.org/app-framework/event/setup-settings');
+
+  /**
+   * Fired before the graph is created.
+   */
+  export const SetupAppGraph = defineEvent('dxos.org/app-framework/event/setup-graph');
+
+  /**
+   * Fired before the translations provider is created.
+   */
+  export const SetupTranslations = defineEvent('dxos.org/app-framework/event/setup-translations');
+
+  //
+  // Triggered Events
+  //
+
+  /**
+   * Fired after the intent dispatcher is ready.
+   */
+  export const DispatcherReady = defineEvent('dxos.org/app-framework/event/dispatcher-ready');
+
+  /**
+   * Fired after the settings store is ready.
+   */
+  export const SettingsReady = defineEvent('dxos.org/app-framework/event/settings-ready');
+
+  /**
+   * Fired when the graph is ready.
+   */
+  export const AppGraphReady = defineEvent('dxos.org/app-framework/event/graph-ready');
+
+  /**
+   * Fired when plugin state is ready.
+   */
+  export const createStateEvent = (specifier: string) => defineEvent('dxos.org/app-framework/event/state', specifier);
+  export const LayoutReady = createStateEvent(Capabilities.Layout.identifier);
+}

package/src/common/file.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Schema as S } from '@effect/schema';
+
+// TODO(burdon): See Accept attribute (uses MIME types).
+// E.g., 'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+export const defaultFileTypes = {
+  images: ['png', 'jpg', 'jpeg', 'gif'],
+  media: ['mp3', 'mp4', 'mov', 'avi'],
+  text: ['pdf', 'txt', 'md'],
+};
+
+export const FileInfoSchema = S.Struct({
+  name: S.String,
+  type: S.String,
+  url: S.optional(S.String),
+  cid: S.optional(S.String), // TODO(burdon): Meta key? Or other common properties with other file management system? (e.g., WNFS).
+});
+
+export type FileInfo = S.Schema.Type<typeof FileInfoSchema>;

package/src/common/graph.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { Node } from '@dxos/app-graph';
+import { type MaybePromise, type Position } from '@dxos/util';
+
+// TODO(wittjosiah): Factor out.
+export type SerializedNode = {
+  name: string;
+  data: string;
+  type?: string;
+};
+
+// TODO(wittjosiah): Factor out.
+export type NodeSerializer<T = any> = {
+  inputType: string;
+  outputType: string;
+  position?: Position;
+
+  /**
+   * Takes a node and serializes it into a format that can be stored.
+   */
+  serialize: (node: Node<T>) => MaybePromise<SerializedNode>;
+
+  /**
+   * Takes a serialized node and deserializes it into the application.
+   */
+  deserialize: (data: SerializedNode, ancestors: unknown[]) => MaybePromise<T>;
+};

package/src/{plugins/common → common}/index.ts

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './capabilities';
+export * from './events';
 export * from './file';
 export * from './graph';
 export * from './layout';
-export * from './metadata';
-export * from './navigation';
+export * from './surface';
 export * from './translations';

package/src/common/layout.ts

@@ -0,0 +1,225 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Schema as S } from '@effect/schema';
+
+import { Label } from '../plugin-intent';
+
+export const LAYOUT_PLUGIN = 'dxos.org/plugin/layout';
+export const LAYOUT_ACTION = `${LAYOUT_PLUGIN}/action`;
+
+/**
+ * Expected payload for layout actions.
+ */
+export namespace LayoutAction {
+  export const UPDATE_LAYOUT = `${LAYOUT_ACTION}/update-layout`;
+
+  /**
+   * Generic layout action.
+   */
+  export class UpdateLayout extends S.TaggedClass<UpdateLayout>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.String.annotations({ description: 'The part of the layout to mutate.' }),
+      subject: S.optional(S.Any.annotations({ description: 'The subject of the layout update.' })),
+      options: S.optional(
+        S.Record({ key: S.String, value: S.Any }).annotations({
+          description: 'Additional options for the layout action.',
+        }),
+      ),
+    }),
+    output: S.Void,
+  }) {}
+
+  //
+  // Common layout actions.
+  //
+
+  // NOTE: These are layout actions which are currently in common use.
+  //  They constrain the generic layout action types to provide additional type safety.
+  //  However, they all follow the same generic structure and intent id.
+  //  This allows for plugins to update the layout without depending on a specific layout plugin.
+  //  The expectation is that other norms other than these will emerge over time.
+
+  export class SetLayoutMode extends S.TaggedClass<SetLayoutMode>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('mode').annotations({ description: 'Setting the layout mode.' }),
+      subject: S.optional(S.String.annotations({ description: 'Item which is the subject of the new layout mode.' })),
+      options: S.Union(
+        S.Struct({ mode: S.String.annotations({ description: 'The new layout mode.' }) }),
+        S.Struct({ revert: S.Boolean.annotations({ description: 'Revert to the previous layout mode.' }) }),
+      ),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class UpdateSidebar extends S.TaggedClass<UpdateSidebar>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('sidebar').annotations({ description: 'Updating the sidebar.' }),
+      subject: S.optional(S.String.annotations({ description: 'URI of the component to display in the sidebar.' })),
+      options: S.optional(
+        S.Struct({
+          state: S.Literal('closed', 'collapsed', 'expanded').annotations({
+            description: 'Whether the sidebar is closed, collapsed, or expanded.',
+          }),
+        }),
+      ),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class UpdateComplementary extends S.TaggedClass<UpdateComplementary>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('complementary').annotations({ description: 'Updating the complementary sidebar.' }),
+      subject: S.optional(
+        S.String.annotations({ description: 'URI of the component to display in the complementary area.' }),
+      ),
+      options: S.optional(
+        S.Struct({
+          state: S.Literal('closed', 'collapsed', 'expanded').annotations({
+            description: 'Whether the complementary sidebar is closed, collapsed, or expanded.',
+          }),
+        }),
+      ),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class UpdateDialog extends S.TaggedClass<UpdateDialog>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('dialog').annotations({ description: 'Updating the dialog.' }),
+      subject: S.optional(S.String.annotations({ description: 'URI of the component to display in the dialog.' })),
+      options: S.Struct({
+        state: S.optional(S.Boolean.annotations({ description: 'Whether the dialog is open or closed.' })),
+        blockAlign: S.optional(
+          S.Literal('start', 'center').annotations({ description: 'The alignment of the dialog.' }),
+        ),
+        type: S.optional(S.Literal('default', 'alert').annotations({ description: 'The type of dialog.' })),
+        props: S.optional(
+          S.Record({ key: S.String, value: S.Any }).annotations({
+            description: 'Additional props for the dialog.',
+          }),
+        ),
+      }),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class UpdatePopover extends S.TaggedClass<UpdatePopover>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('popover').annotations({ description: 'Updating the popover.' }),
+      subject: S.optional(S.String.annotations({ description: 'URI of the component to display in the popover.' })),
+      options: S.Struct({
+        anchorId: S.String.annotations({ description: 'The id of the element to anchor the popover to.' }),
+        state: S.optional(S.Boolean.annotations({ description: 'Whether the popover is open or closed.' })),
+        props: S.optional(
+          S.Record({ key: S.String, value: S.Any }).annotations({
+            description: 'Additional props for the popover.',
+          }),
+        ),
+      }),
+    }),
+    output: S.Void,
+  }) {}
+
+  export const Toast = S.Struct({
+    id: S.String.annotations({ description: 'The id of the toast.' }),
+    title: S.optional(Label.annotations({ description: 'The title of the toast.' })),
+    description: S.optional(Label.annotations({ description: 'The description of the toast.' })),
+    icon: S.optional(S.String.annotations({ description: 'The icon of the toast.' })),
+    duration: S.optional(S.Number.annotations({ description: 'The duration of the toast.' })),
+    closeLabel: S.optional(Label.annotations({ description: 'The label of the close button.' })),
+    actionLabel: S.optional(Label.annotations({ description: 'The label of the action button.' })),
+    actionAlt: S.optional(Label.annotations({ description: 'The alt text of the action button.' })),
+    onAction: S.optional(
+      S.Any.annotations({ description: 'The action to perform when the action button is clicked.' }),
+    ),
+  });
+
+  export interface Toast extends Omit<S.Schema.Type<typeof Toast>, 'onAction'> {
+    onAction?: () => void;
+  }
+
+  export class AddToast extends S.TaggedClass<AddToast>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('toast').annotations({ description: 'Adding a toast.' }),
+      subject: Toast.annotations({ description: 'The toast to add.' }),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class SwitchWorkspace extends S.TaggedClass<SwitchWorkspace>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('workspace').annotations({ description: 'Switching the workspace.' }),
+      subject: S.String.annotations({ description: 'The id of the workspace to switch to.' }),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class Open extends S.TaggedClass<Open>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('main').annotations({ description: 'Opening an item in the main content area.' }),
+      subject: S.Array(S.String.annotations({ description: 'Ids of the items to open.' })),
+      options: S.optional(
+        S.Struct({
+          state: S.optional(S.Literal(true).annotations({ description: 'The items are being added.' })),
+          key: S.optional(
+            S.String.annotations({ description: 'If provided, will replace item with a matching key (id prefix).' }),
+          ),
+          scrollIntoView: S.optional(S.Boolean.annotations({ description: 'Scroll the items into view.' })),
+          pivotId: S.optional(S.String.annotations({ description: 'The id of the item to place new items next to.' })),
+          positioning: S.optional(
+            S.Union(
+              S.Literal('start').annotations({ description: 'The items are being added before the pivot item.' }),
+              S.Literal('end').annotations({ description: 'The items are being added after the pivot item.' }),
+            ),
+          ),
+        }),
+      ),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class Set extends S.TaggedClass<Set>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('main').annotations({ description: 'Setting items in the main content area.' }),
+      subject: S.Array(S.String.annotations({ description: 'Ids of the items to set.' })),
+      options: S.Struct({
+        override: S.Literal(true).annotations({ description: 'Override the current items in the main content area.' }),
+      }),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class Close extends S.TaggedClass<Close>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('main').annotations({ description: 'Closing items in the main content area.' }),
+      subject: S.Array(S.String.annotations({ description: 'Ids of the items to close.' })),
+      options: S.Struct({
+        state: S.Literal(false).annotations({ description: 'The items are being removed.' }),
+      }),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class ScrollIntoView extends S.TaggedClass<ScrollIntoView>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('current').annotations({ description: 'Setting the current item' }),
+      subject: S.optional(S.String.annotations({ description: 'The id of the item to set as current.' })),
+      options: S.optional(
+        S.Record({ key: S.String, value: S.Any }).annotations({
+          description: 'Additional options for the scroll into view.',
+        }),
+      ),
+    }),
+    output: S.Void,
+  }) {}
+
+  export class Expose extends S.TaggedClass<Expose>()(UPDATE_LAYOUT, {
+    input: S.Struct({
+      part: S.Literal('navigation').annotations({ description: 'Exposing an item in the navigation area.' }),
+      subject: S.String.annotations({ description: 'The id of the item to expose.' }),
+    }),
+    output: S.Void,
+  }) {}
+}