@dxos/app-framework 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/testing/harness.ts

@@ -0,0 +1,247 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Registry } from '@effect-atom/atom-react';
+import * as Duration from 'effect/Duration';
+import * as Effect from 'effect/Effect';
+import * as PubSub from 'effect/PubSub';
+import * as Queue from 'effect/Queue';
+
+import { type Operation } from '@dxos/compute';
+import { EffectEx } from '@dxos/effect';
+import { invariant } from '@dxos/invariant';
+
+import { ActivationEvents, Capabilities } from '../common';
+import { ActivationEvent, type Capability, type CapabilityManager, type Plugin, PluginManager } from '../core';
+
+export type TestAppOptions = {
+  /**
+   * Plugins to register. Plugins whose `meta.tags` includes `'system'` are treated as core
+   * (force-enabled). For test convenience, plugins without a `'system'` tag are enabled by
+   * default unless `enabled` is provided.
+   */
+  plugins: Plugin.Plugin[];
+  /** Plugin ids that are enabled by default in addition to core. Defaults to all non-system plugin ids. */
+  enabled?: string[];
+  /** Additional activation events fired alongside SetupReactSurface. */
+  setupEvents?: ActivationEvent.ActivationEvent[];
+  /**
+   * Whether to automatically fire SetupReactSurface + Startup during setup.
+   * Defaults to true.
+   */
+  autoStart?: boolean;
+  /**
+   * Whether to register the PluginManager + AtomRegistry framework capabilities.
+   * Defaults to true.
+   */
+  registerFrameworkCapabilities?: boolean;
+};
+
+/**
+ * A running plugin manager plus helpers for driving it in tests.
+ */
+export interface TestHarness {
+  readonly manager: PluginManager.PluginManager;
+  readonly capabilities: CapabilityManager.CapabilityManager;
+  readonly registry: Registry.Registry;
+
+  /** Activate the given event. Equivalent to `manager.activate(event)`. */
+  fire(event: ActivationEvent.ActivationEvent | string): Promise<boolean>;
+  /** Re-activate all modules that were activated by the given event. */
+  reset(event: ActivationEvent.ActivationEvent | string): Promise<boolean>;
+
+  /** Returns the first contributed capability for the given interface. Throws if none are present. */
+  get<T>(iface: Capability.InterfaceDef<T>): T;
+  /** Returns all contributed capabilities for the given interface. */
+  getAll<T>(iface: Capability.InterfaceDef<T>): T[];
+  /** Waits until at least one capability is contributed for the given interface. */
+  waitForCapability<T>(iface: Capability.InterfaceDef<T>, opts?: { timeout?: number }): Promise<T>;
+  /** Waits until the given activation event has completed. */
+  waitForEvent(event: ActivationEvent.ActivationEvent | string, opts?: { timeout?: number }): Promise<void>;
+
+  /** Invokes an operation through the `Capabilities.OperationInvoker` capability. */
+  invoke<I, O>(op: Operation.Definition<I, O>, ...args: void extends I ? [input?: I] : [input: I]): Promise<O>;
+
+  /**
+   * Waits for `Capabilities.ProcessManagerRuntime` and runs the given effect on it.
+   * Convenience around `waitForCapability(ProcessManagerRuntime).runPromise(effect)`.
+   */
+  runPromise<A, E>(
+    effect: Effect.Effect<A, E, Capabilities.ProcessManagerRuntimeServices>,
+    options?: { readonly timeout?: number; readonly signal?: AbortSignal },
+  ): Promise<A>;
+
+  enable(id: string): Promise<boolean>;
+  disable(id: string): Promise<boolean>;
+
+  /** Shuts down the underlying plugin manager. */
+  dispose(): Promise<void>;
+
+  /** Async-disposable support so tests can use `await using harness = ...`. */
+  [Symbol.asyncDispose](): Promise<void>;
+}
+
+const DEFAULT_TIMEOUT_MS = 5_000;
+
+/**
+ * Creates a TestHarness with the same bootstrap sequence that `useApp` performs,
+ * minus the React provider tree.
+ *
+ * For Node-only tests, this is enough to fire activation events, read
+ * capabilities, and invoke operations.
+ *
+ * For React tests, pass the returned harness to `render` or `renderSurface`
+ * from `@dxos/app-framework/testing-react`.
+ */
+export const createTestApp = async (opts: TestAppOptions): Promise<TestHarness> => {
+  const {
+    plugins,
+    enabled = plugins.filter(({ meta }) => !meta.tags?.includes('system')).map((plugin) => plugin.meta.id),
+    setupEvents = [],
+    autoStart = true,
+    registerFrameworkCapabilities = true,
+  } = opts;
+
+  const pluginLoader = (id: string) =>
+    Effect.sync(() => {
+      const plugin = plugins.find((plugin) => plugin.meta.id === id);
+      invariant(plugin, `Plugin not found: ${id}`);
+      return { plugin };
+    });
+
+  const manager = PluginManager.make({ pluginLoader, plugins, enabled });
+
+  if (registerFrameworkCapabilities) {
+    manager.capabilities.contribute({
+      interface: Capabilities.PluginManager,
+      implementation: manager,
+      module: 'org.dxos.app-framework.plugin-manager',
+    });
+    manager.capabilities.contribute({
+      interface: Capabilities.AtomRegistry,
+      implementation: manager.registry,
+      module: 'org.dxos.app-framework.atom-registry',
+    });
+  }
+
+  if (autoStart) {
+    try {
+      await EffectEx.runAndForwardErrors(
+        Effect.all([
+          ...setupEvents.map((event) => manager.activate(event)),
+          manager.activate(ActivationEvents.SetupReactSurface),
+          manager.activate(ActivationEvents.Startup),
+        ]),
+      );
+    } catch (err) {
+      await EffectEx.runAndForwardErrors(manager.shutdown()).catch(() => undefined);
+      throw err;
+    }
+  }
+
+  return new TestHarnessImpl(manager);
+};
+
+class TestHarnessImpl implements TestHarness {
+  constructor(readonly manager: PluginManager.PluginManager) {}
+
+  get capabilities(): CapabilityManager.CapabilityManager {
+    return this.manager.capabilities;
+  }
+
+  get registry(): Registry.Registry {
+    return this.manager.registry;
+  }
+
+  fire(event: ActivationEvent.ActivationEvent | string): Promise<boolean> {
+    return EffectEx.runAndForwardErrors(this.manager.activate(event));
+  }
+
+  reset(event: ActivationEvent.ActivationEvent | string): Promise<boolean> {
+    return EffectEx.runAndForwardErrors(this.manager.reset(event));
+  }
+
+  get<T>(iface: Capability.InterfaceDef<T>): T {
+    return this.manager.capabilities.get(iface);
+  }
+
+  getAll<T>(iface: Capability.InterfaceDef<T>): T[] {
+    return this.manager.capabilities.getAll(iface);
+  }
+
+  waitForCapability<T>(iface: Capability.InterfaceDef<T>, opts?: { timeout?: number }): Promise<T> {
+    const timeout = opts?.timeout ?? DEFAULT_TIMEOUT_MS;
+    return EffectEx.runAndForwardErrors(
+      this.manager.capabilities.waitFor(iface).pipe(
+        Effect.timeoutFail({
+          duration: Duration.millis(timeout),
+          onTimeout: () => timeoutError(iface.identifier),
+        }),
+      ),
+    );
+  }
+
+  waitForEvent(event: ActivationEvent.ActivationEvent | string, opts?: { timeout?: number }): Promise<void> {
+    const key = typeof event === 'string' ? event : ActivationEvent.eventKey(event);
+    const timeout = opts?.timeout ?? DEFAULT_TIMEOUT_MS;
+
+    const program = Effect.gen(this, function* () {
+      const queue = yield* PubSub.subscribe(this.manager.activation);
+      // Re-check after subscribing to avoid a race where the event fires
+      // between the caller invoking this and the subscription being installed.
+      if (this.manager.getEventsFired().includes(key)) {
+        return;
+      }
+      while (true) {
+        const message = yield* Queue.take(queue);
+        if (message.event === key && message.state === 'activated') {
+          return;
+        }
+      }
+    }).pipe(
+      Effect.scoped,
+      Effect.timeoutFail({
+        duration: Duration.millis(timeout),
+        onTimeout: () => timeoutError(key),
+      }),
+    );
+
+    return EffectEx.runAndForwardErrors(program);
+  }
+
+  async invoke<I, O>(op: Operation.Definition<I, O>, ...args: [input?: I]): Promise<O> {
+    const invoker = await this.waitForCapability(Capabilities.OperationInvoker);
+    const result = await invoker.invokePromise(op as any, ...(args as [any]));
+    if (result.error) {
+      throw result.error;
+    }
+    return result.data as O;
+  }
+
+  async runPromise<A, E>(
+    effect: Effect.Effect<A, E, Capabilities.ProcessManagerRuntimeServices>,
+    options?: { readonly timeout?: number; readonly signal?: AbortSignal },
+  ): Promise<A> {
+    const runtime = await this.waitForCapability(Capabilities.ProcessManagerRuntime, { timeout: options?.timeout });
+    return runtime.runPromise(effect, options?.signal ? { signal: options.signal } : undefined);
+  }
+
+  enable(id: string): Promise<boolean> {
+    return EffectEx.runAndForwardErrors(this.manager.enable(id));
+  }
+
+  disable(id: string): Promise<boolean> {
+    return EffectEx.runAndForwardErrors(this.manager.disable(id));
+  }
+
+  async dispose(): Promise<void> {
+    await EffectEx.runAndForwardErrors(this.manager.shutdown());
+  }
+
+  [Symbol.asyncDispose](): Promise<void> {
+    return this.dispose();
+  }
+}
+
+const timeoutError = (id: string) => new Error(`Timed out waiting for ${id}`);

package/src/testing/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './harness';
+export * from './operationCapture';
+export * from './service';
 export * from './withPluginManager';

package/src/testing/operationCapture.ts

@@ -0,0 +1,144 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { type Operation } from '@dxos/compute';
+
+import { Capabilities } from '../common';
+import { Capability } from '../core';
+
+export type CapturedCall<I = unknown> = {
+  /** The DXN key string of the invoked operation. */
+  operationKey: string;
+  /** The input passed to the operation. */
+  input: I;
+};
+
+type CapabilityManagerLike = {
+  get: (cap: Capability.InterfaceDef<Capabilities.OperationInvoker>) => Capabilities.OperationInvoker;
+  getAll: (cap: Capability.InterfaceDef<Capabilities.OperationInvoker>) => Capabilities.OperationInvoker[];
+};
+
+export type OperationCapture = {
+  /**
+   * Wraps the real OperationInvoker from the given manager. Pass to
+   * `withPluginManager({ capabilities: (m) => capture.wrap(m) })`.
+   */
+  wrap(manager: CapabilityManagerLike): Capability.Any[];
+  /** Returns all recorded calls (mocked or real) for the given operation. */
+  getCalls<I, O>(op: Operation.Definition<I, O>): CapturedCall<I>[];
+  /** Clears all recorded calls (useful between play function steps). */
+  reset(): void;
+};
+
+/**
+ * Creates a capture that wraps the real `Capabilities.OperationInvoker`:
+ *
+ * - **Mocked operations** (declared in `mockedOperations`) are intercepted: the call is recorded
+ *   and returns `{ data: undefined }` without executing. Use this for side-effecting operations
+ *   you don't want to run in tests, such as `LayoutOperation.Open` (navigation).
+ *
+ * - **All other operations** are forwarded to the real invoker and still execute normally. The
+ *   call is still recorded so you can assert it was triggered even though it ran for real.
+ *
+ * Pass a `spyFn` wrapper (e.g. `fn` from `storybook/test`) to get Storybook Actions panel
+ * integration and vi-style matchers on the recording.
+ *
+ * @example
+ * ```ts
+ * import { fn } from 'storybook/test';
+ *
+ * const capture = makeOperationCapture(
+ *   // These ops are mocked: captured but not executed.
+ *   [AssistantOperation.RunPromptInNewChat, LayoutOperation.Open],
+ *   fn,
+ * );
+ *
+ * // Wire into withPluginManager:
+ * capabilities: (manager) => capture.wrap(manager)
+ *
+ * // Assert in a play function:
+ * const calls = capture.getCalls(AssistantOperation.RunPromptInNewChat);
+ * expect(calls).toHaveLength(1);
+ * expect(calls[0].input.prompt).toBe('Draft a new document');
+ * ```
+ *
+ * @idiom org.dxos.app-framework.testing.operationCapture
+ *   applies: Storybook play-function tests for components that call plugin operations
+ *   instead-of: Loading every plugin whose operations the component triggers
+ *   uses: {@link makeOperationCapture}, {@link withPluginManager}
+ */
+export const makeOperationCapture = (
+  mockedOperations: readonly Operation.Definition.Any[],
+  spyFn?: (impl: (...args: any[]) => any) => any,
+): OperationCapture => {
+  const calls: CapturedCall[] = [];
+
+  const mockedKeys = new Set(mockedOperations.map((op) => String(op.meta.key)));
+
+  const record = (op: Operation.Definition<any, any>, input?: unknown) => {
+    calls.push({ operationKey: String(op.meta.key), input: input ?? {} });
+  };
+
+  const recordFn = spyFn ? spyFn(record) : record;
+
+  return {
+    wrap(manager) {
+      // Use getAll to find the real invoker that was registered before our wrapper. manager.get
+      // returns the last contribution (ours, once added), but getAll returns them all in order.
+      // On first invocation (when activation is complete) we find the non-wrapper contribution.
+      let real: Capabilities.OperationInvoker | undefined;
+      const delegate = () => {
+        if (!real) {
+          const all = manager.getAll(Capabilities.OperationInvoker);
+          real = all.find((inv) => inv !== wrapped);
+        }
+        return real;
+      };
+
+      const wrapped: Capabilities.OperationInvoker = {
+        get invocations() {
+          return delegate()!.invocations;
+        },
+        get pendingFollowups() {
+          return delegate()!.pendingFollowups;
+        },
+        get awaitFollowups() {
+          return delegate()!.awaitFollowups;
+        },
+        invoke: (op: Operation.Definition<any, any>, input?: unknown, ...rest: any[]) => {
+          recordFn(op, input);
+          if (mockedKeys.has(String(op.meta.key))) {
+            return Effect.succeed(undefined as any);
+          }
+          return (delegate()!.invoke as any)(op, input, ...rest);
+        },
+        invokePromise: async (op: Operation.Definition<any, any>, input?: unknown, ...rest: any[]) => {
+          recordFn(op, input);
+          if (mockedKeys.has(String(op.meta.key))) {
+            return { data: undefined };
+          }
+          return (delegate()!.invokePromise as any)(op, input, ...rest);
+        },
+        schedule: (op: Operation.Definition<any, any>, input?: unknown, ...rest: any[]) => {
+          recordFn(op, input);
+          if (mockedKeys.has(String(op.meta.key))) {
+            return Effect.succeed(undefined);
+          }
+          return (delegate()!.schedule as any)(op, input, ...rest);
+        },
+      };
+
+      return [Capability.contributes(Capabilities.OperationInvoker, wrapped)];
+    },
+    getCalls<I, O>(op: Operation.Definition<I, O>): CapturedCall<I>[] {
+      const key = String(op.meta.key);
+      return calls.filter((c) => c.operationKey === key) as CapturedCall<I>[];
+    },
+    reset() {
+      calls.length = 0;
+    },
+  };
+};

package/src/testing/react.test.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+import { describe, test } from 'vitest';
+
+import { DXN } from '@dxos/keys';
+
+import { ActivationEvents, Capabilities } from '../common';
+import { Capability, Plugin } from '../core';
+import { Surface } from '../ui';
+import { createTestApp } from './harness';
+import { render, renderSurface } from './react';
+
+const testMeta = Plugin.makeMeta({ key: DXN.make('org.dxos.plugin.test.reactHarness'), name: 'ReactHarnessTest' });
+
+const TestPlugin = Plugin.define(testMeta).pipe(
+  Plugin.addModule({
+    id: 'surfaces',
+    activatesOn: ActivationEvents.SetupReactSurface,
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(Capabilities.ReactSurface, [
+          Surface.create<{ message: string }>({
+            id: 'greeting',
+            role: 'greeting',
+            component: ({ data }) => <span data-testid='greeting'>hello {data.message}</span>,
+          }),
+        ]),
+      ),
+  }),
+  Plugin.make,
+);
+
+describe('testing/react', () => {
+  test('render wraps ui in the harness provider tree', async ({ expect }) => {
+    await using harness = await createTestApp({ plugins: [TestPlugin()] });
+    const view = render(harness, <span data-testid='hello'>world</span>);
+    expect(view.getByTestId('hello').textContent).toBe('world');
+  });
+
+  test('renderSurface mounts a surface registered by a plugin', async ({ expect }) => {
+    await using harness = await createTestApp({ plugins: [TestPlugin()] });
+    const view = renderSurface(harness, { role: 'greeting', data: { message: 'plugins' } });
+    const node = await view.findByTestId('greeting');
+    expect(node.textContent).toBe('hello plugins');
+  });
+});

package/src/testing/react.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { RegistryContext } from '@effect-atom/atom-react';
+import { render as rtlRender, type RenderOptions, type RenderResult } from '@testing-library/react';
+import React, { type FC, Fragment, type PropsWithChildren, type ReactNode } from 'react';
+
+import { ContextProtocolProvider } from '@dxos/web-context-react';
+
+import { Capabilities } from '../common';
+import { PluginManagerContext } from '../context';
+import { topologicalSort } from '../helpers';
+import { PluginManagerProvider } from '../ui/components/PluginManager/PluginManagerProvider';
+import { SurfaceComponent } from '../ui/components/Surface/SurfaceComponent';
+import { type TestHarness } from './harness';
+
+export type HarnessRenderOptions = Omit<RenderOptions, 'wrapper'> & {
+  /** Additional providers to wrap around the harness tree (applied innermost first). */
+  reactContexts?: FC<PropsWithChildren>[];
+};
+
+/**
+ * Renders `ui` wrapped in the same provider tree as `useApp` plus every contributed
+ * `Capabilities.ReactContext`.
+ */
+export const render = (harness: TestHarness, ui: ReactNode, options?: HarnessRenderOptions): RenderResult => {
+  const { reactContexts = [], ...rest } = options ?? {};
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <HarnessProviders harness={harness} extra={reactContexts}>
+      {children}
+    </HarnessProviders>
+  );
+  return rtlRender(<>{ui}</>, { ...rest, wrapper: Wrapper });
+};
+
+export type RenderSurfaceProps = {
+  role: string;
+  data?: unknown;
+  limit?: number;
+  fallback?: FC<{ error: Error; data?: any }>;
+  placeholder?: ReactNode;
+};
+
+/**
+ * Renders a `Surface` with the given role/data inside the harness provider tree.
+ */
+export const renderSurface = (
+  harness: TestHarness,
+  props: RenderSurfaceProps,
+  options?: HarnessRenderOptions,
+): RenderResult => {
+  const { role, data, limit, fallback, placeholder } = props;
+  return render(
+    harness,
+    <SurfaceComponent role={role} data={data as any} limit={limit} fallback={fallback} placeholder={placeholder} />,
+    options,
+  );
+};
+
+type HarnessProvidersProps = PropsWithChildren<{
+  harness: TestHarness;
+  extra: FC<PropsWithChildren>[];
+}>;
+
+const HarnessProviders = ({ harness, extra, children }: HarnessProvidersProps) => {
+  const contributed = harness.getAll(Capabilities.ReactContext);
+  const ContributedContext = composeContexts(contributed);
+  const ExtraContext = composeExtra(extra);
+  return (
+    <PluginManagerProvider value={harness.manager}>
+      <ContextProtocolProvider value={harness.manager} context={PluginManagerContext}>
+        <RegistryContext.Provider value={harness.registry}>
+          <ContributedContext>
+            <ExtraContext>{children}</ExtraContext>
+          </ContributedContext>
+        </RegistryContext.Provider>
+      </ContextProtocolProvider>
+    </PluginManagerProvider>
+  );
+};
+
+const composeContexts = (contexts: Capabilities.ReactContext[]): FC<PropsWithChildren> => {
+  if (contexts.length === 0) {
+    return Passthrough;
+  }
+  return topologicalSort(contexts)
+    .map(({ context }) => context)
+    .reduce((Acc, Next) => ({ children }: PropsWithChildren) => (
+      <Acc>
+        <Next>{children}</Next>
+      </Acc>
+    ));
+};
+
+// Composes in innermost-first order: the first context in the array wraps
+// `children` directly; subsequent contexts wrap the accumulator.
+const composeExtra = (contexts: FC<PropsWithChildren>[]): FC<PropsWithChildren> => {
+  if (contexts.length === 0) {
+    return Passthrough;
+  }
+  return contexts.reduce<FC<PropsWithChildren>>(
+    (Acc, Next) =>
+      ({ children }: PropsWithChildren) => (
+        <Next>
+          <Acc>{children}</Acc>
+        </Next>
+      ),
+    Passthrough,
+  );
+};
+
+const Passthrough: FC<PropsWithChildren> = ({ children }) => <Fragment>{children}</Fragment>;

package/src/testing/service.ts

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+
+import { invariant } from '@dxos/invariant';
+
+import { ActivationEvents, Capabilities } from '../common';
+import { Plugin, PluginManager } from '../core';
+
+/**
+ * Creates a Plugin.Service layer from a list of plugins.
+ * This is primarily used for testing.
+ */
+export const fromPlugins = (plugins: Plugin.Plugin[]) =>
+  Layer.effect(
+    Plugin.Service,
+    Effect.gen(function* () {
+      // TODO(wittjosiah): Try to dedupe logic between here, createCliApp and useApp.
+
+      const pluginLoader = (id: string) =>
+        Effect.sync(() => {
+          const plugin = plugins.find((plugin) => plugin.meta.id === id);
+          invariant(plugin, `Plugin not found: ${id}`);
+          return { plugin };
+        });
+
+      const manager = PluginManager.make({
+        pluginLoader,
+        plugins,
+        enabled: plugins.map((plugin) => plugin.meta.id),
+      });
+
+      manager.capabilities.contribute({
+        interface: Capabilities.PluginManager,
+        implementation: manager,
+        module: 'org.dxos.app-framework.plugin-manager',
+      });
+
+      manager.capabilities.contribute({
+        interface: Capabilities.AtomRegistry,
+        implementation: manager.registry,
+        module: 'org.dxos.app-framework.atom-registry',
+      });
+
+      yield* manager.activate(ActivationEvents.Startup);
+
+      return manager;
+    }),
+  );

package/src/testing/withPluginManager.stories.tsx

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type Meta, withTheme } from '@dxos/storybook-utils';
-
-import { Capabilities, createSurface } from '../common';
-import { contributes } from '../core';
-import { Surface } from '../react';
+import { withTheme } from '@dxos/react-ui/testing';
 
+import { Capabilities } from '../common';
+import { Capability } from '../core';
+import { Surface } from '../ui';
 import { withPluginManager } from './withPluginManager';
 
 const DefaultStory = () => {
@@ -17,21 +17,21 @@ const DefaultStory = () => {
   return (
     <div>
       <div>Hello</div>
-      <Surface role='main' />
+      <Surface.Surface role='main' />
     </div>
   );
 };
 
-const meta: Meta = {
-  title: 'sdk/app-framework/withPluginManager',
+const meta = {
+  title: 'sdk/app-framework/testing/withPluginManager',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       capabilities: [
-        contributes(
+        Capability.contributes(
           Capabilities.ReactSurface,
-          createSurface({
+          Surface.create({
             id: 'test',
             role: 'main',
             component: ({ role }) => <span>{JSON.stringify({ role })}</span>,
@@ -40,8 +40,10 @@ const meta: Meta = {
       ],
     }),
   ],
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};