@dxos/app-framework 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/src/ui/components/Placeholder/Placeholder.stories.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+import { expect, within } from 'storybook/test';
+
+import { Composer } from '@dxos/brand';
+import { Input, Panel, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Placeholder } from './Placeholder';
+
+/**
+ * The story renders the brand-agnostic `Placeholder` from `@dxos/app-framework/ui`
+ * with the Composer brand icon as its `logo`, so the storybook mirrors what
+ * composer-app actually mounts in production. The render function form lets
+ * the SVG accept the placeholder's animation `className` directly.
+ */
+const meta = {
+  title: 'sdk/app-framework/components/Placeholder',
+  component: Placeholder,
+  render: () => {
+    const [stage, setStage] = useState(0);
+    const [auto, setAuto] = useState(false);
+    useEffect(() => {
+      if (!auto) {
+        return;
+      }
+
+      const interval = setInterval(() => {
+        setStage((prev) => {
+          return prev >= 2 ? 0 : prev + 1;
+        });
+      }, 3_000);
+
+      return () => clearInterval(interval);
+    }, [auto]);
+
+    return (
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root classNames='gap-2'>
+            <Input.Root>
+              <Input.Checkbox checked={auto} onCheckedChange={(checked) => setAuto(checked === true)} />
+              <Input.Label>Auto</Input.Label>
+            </Input.Root>
+            <Toolbar.Button onClick={() => setStage((prev) => (prev < 2 ? prev + 1 : 0))}>Next</Toolbar.Button>
+            <Toolbar.Text>{stage}</Toolbar.Text>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content>
+          <Placeholder stage={stage} logo={(logoProps) => <Composer {...logoProps} />} />
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  tags: ['test'],
+} satisfies Meta<typeof Placeholder>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    stage: 0,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Smoke test: the toolbar's `Next` button is rendered alongside the
+    // placeholder, so the story mounted without throwing.
+    await expect(canvas.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+  },
+};

package/src/ui/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,155 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type ReactNode, useEffect, useLayoutEffect, useRef } from 'react';
+
+import { ThemeProvider } from '@dxos/react-ui';
+import { defaultTx, mx } from '@dxos/ui-theme';
+
+import { type PlaceholderProps as PlaceholderSlotProps } from '../../hooks';
+
+declare global {
+  interface Window {
+    /**
+     * Driver injected by `@dxos/app-framework/vite-plugin`'s `bootLoaderPlugin`.
+     * Declared here so the {@link Placeholder} can dismiss the native-DOM
+     * loader once the React placeholder commits without each host having to
+     * re-declare the type.
+     */
+    __bootLoader?: {
+      status: (payload: {
+        event?: string;
+        module?: string;
+        humanized: string;
+        /**
+         * Optional `(index/total)` tick. When present, the loader replaces the
+         * current line in place ("Loading plugins (12/80)") instead of
+         * appending a new entry — keeps the visible log compact during long
+         * counted phases like plugin chunk-loading or module activation.
+         */
+        range?: { index: number; total: number };
+      }) => void;
+      progress: (fraction?: number) => void;
+      dismiss: () => void;
+    };
+  }
+}
+
+export type PlaceholderComponentProps = PlaceholderSlotProps & {
+  /**
+   * Brand mark rendered while the React tree settles. Pass either a static
+   * `ReactNode` (the framework wraps it in a sizing/animation div) or a
+   * render function that receives the precomputed `className` so the host
+   * can apply it directly to its logo (e.g. an SVG that accepts `className`
+   * — `composer-app` passes `(p) => <Composer {...p} />` from `@dxos/brand`).
+   */
+  logo?: ReactNode | ((props: { className: string }) => ReactNode);
+};
+
+/**
+ * React placeholder. The native-DOM boot loader is the visible UI through
+ * stages 0 (Loading) and 1 (FadeIn): we render `null` until `stage >= 2`
+ * (FadeOut) and instead feed activation progress + status into the still-
+ * alive boot loader. At stage 2 the loader dismisses and the React mark
+ * appears for the cross-fade to the real shell:
+ *
+ *   - composer-app fills `0 → 50%` from `getPlugins`'s per-chunk counter.
+ *   - this component fills `50 → 100%` from `useApp`'s
+ *     `startupProgress.progress` (`activated / total` modules) and pushes
+ *     the per-module status text to the loader's status line.
+ *   - at `stage >= 2` the boot loader is dismissed and the React mark
+ *     starts its `FadeOut → Done` shrink-and-fade.
+ *
+ * Stage progression (driven by `useApp`):
+ *   - `0` — Loading: native-DOM boot loader visible. Placeholder renders nothing.
+ *   - `1` — FadeIn: same — boot loader still owns the screen.
+ *   - `2` — FadeOut: boot loader dismissed, React mark visible at full opacity then shrinks.
+ */
+export const Placeholder = ({ stage = 1, progress, logo }: PlaceholderComponentProps) => {
+  // Used in tests to exercise the error boundary & reset dialog.
+  if (location.search === '?throw') {
+    throw new Error('Test error');
+  }
+
+  // Phase B: feed activation progress + status to the still-visible boot
+  // loader. Maps `[0, 1]` activation → `[0.5, 1]` of the ring; forwards
+  // the raw activation source (`event` / `module`) plus the pre-humanised
+  // label to `__bootLoader.status` so the loader gets to decide how to
+  // render and trace each transition (current default policy: "Activating
+  // <humanizedName>"; trace mode and timings track the structured fields).
+  // No-op once the loader has been dismissed (its `status()` early-returns
+  // when the boot DOM is gone). Skipping `stage >= 2` lets the dismissal
+  // run uncontended.
+  useEffect(() => {
+    if (stage >= 2) {
+      return;
+    }
+    const fraction = progress?.progress ?? 0;
+    window.__bootLoader?.progress(0.5 + fraction * 0.5);
+    if (progress?.humanizedName) {
+      window.__bootLoader?.status({
+        event: progress.event,
+        module: progress.module,
+        humanized: `Activating ${progress.humanizedName}`,
+      });
+    }
+  }, [stage, progress?.progress, progress?.event, progress?.module, progress?.humanizedName]);
+
+  // Hand off from the native-DOM boot loader once the placeholder starts
+  // fading out — keeping the loader visible through `stage 0` and `stage 1`
+  // means the ring stays the visible source of truth for activation
+  // progress. `useLayoutEffect` runs before the next paint so the loader
+  // DOM is removed in the same frame the cross-fade begins.
+  useLayoutEffect(() => {
+    if (stage >= 2) {
+      window.__bootLoader?.dismiss();
+    }
+  }, [stage]);
+
+  // Backstop for the fast-load path where `useLoading` can skip straight
+  // from stage 0 to `Done` (ready=true at the first debounce tick) — the
+  // stage-driven effect above never sees `stage >= 2`, so dismiss on
+  // unmount instead. The `stageRef` guard is what keeps StrictMode's
+  // synthetic mount → cleanup → remount cycle from prematurely dismissing
+  // the loader: the synthetic cleanup runs while `stageRef.current === 0`,
+  // skips the dismiss, and the real unmount (later, at stage `Done`)
+  // performs it.
+  const stageRef = useRef(stage);
+  stageRef.current = stage;
+  useEffect(() => {
+    return () => {
+      if (stageRef.current >= 3 /* Done */) {
+        window.__bootLoader?.dismiss();
+      }
+    };
+  }, []);
+
+  // Defer rendering anything until the FadeOut stage. The boot loader owns
+  // the screen during stages 0 and 1, so any DOM we render here would just
+  // sit invisibly behind it — and rendering null avoids paint cost during
+  // the longest part of the loading sequence (plugin activation).
+  if (stage < 2) {
+    return null;
+  }
+
+  const logoClassName = mx(
+    'h-[300px] w-[300px] scale-600 transition-all duration-500 ease-in-out filter grayscale opacity-0',
+    stage >= 1 && 'scale-100 grayscale-0 opacity-70',
+    stage >= 2 && 'scale-50 opacity-0',
+  );
+
+  return (
+    <ThemeProvider tx={defaultTx}>
+      <div className='relative dx-container h-dvh flex flex-col'>
+        <div className='flex flex-col grow justify-center items-center'>
+          {typeof logo === 'function' ? (
+            logo({ className: logoClassName })
+          ) : logo ? (
+            <div className={logoClassName}>{logo}</div>
+          ) : null}
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+};

package/src/ui/components/Placeholder/index.ts

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

package/src/ui/components/PluginManager/PluginManagerContext.stories.tsx

@@ -0,0 +1,185 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { useWebComponentContext } from '@dxos/web-context-react';
+
+import { ActivationEvents, Capabilities } from '../../../common';
+import { PluginManagerContext } from '../../../context';
+import { Capability, Plugin } from '../../../core';
+import { useApp } from '../../hooks';
+
+// Define the Counter capability
+const Counter = Capability.make<{ count: number; increment: () => void }>('example/counter');
+
+const CountStatus = () => {
+  const manager = useWebComponentContext(PluginManagerContext);
+  const capabilitiesAtom = useMemo(
+    () => manager?.capabilities.atom(Counter) ?? Atom.make<{ count: number; increment: () => void }[]>([]),
+    [manager],
+  );
+  const capabilities = useAtomValue(capabilitiesAtom);
+  const counter = (capabilities as any)[0];
+  const [count, setCount] = useState(counter?.count ?? 0);
+
+  useEffect(() => {
+    if (!counter) {
+      return;
+    }
+    setCount(counter.count);
+    if ('subscribe' in counter && typeof counter.subscribe === 'function') {
+      return counter.subscribe(() => setCount(counter.count));
+    }
+  }, [counter]);
+
+  if (!manager) {
+    return null;
+  }
+
+  const isEven = count % 2 === 0;
+
+  return (
+    <div
+      className={`mt-4 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+        isEven
+          ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400'
+          : 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400'
+      }`}
+    >
+      Status: {isEven ? 'Even' : 'Odd'}
+    </div>
+  );
+};
+
+// A component that consumes the PluginManager via web context
+const CounterComponent = () => {
+  // Use the web-context hook to get the PluginManager
+  const manager = useWebComponentContext(PluginManagerContext);
+  const capabilitiesAtom = useMemo(
+    () => manager?.capabilities.atom(Counter) ?? Atom.make<{ count: number; increment: () => void }[]>([]),
+    [manager],
+  );
+  const capabilities = useAtomValue(capabilitiesAtom);
+  const counter = (capabilities as any)[0];
+  const [count, setCount] = useState(counter?.count ?? 0);
+
+  useEffect(() => {
+    if (!counter) {
+      return;
+    }
+    setCount(counter.count);
+    if ('subscribe' in counter && typeof counter.subscribe === 'function') {
+      return counter.subscribe(() => setCount(counter.count));
+    }
+  }, [counter]);
+
+  if (!manager) {
+    return <div className='p-4 text-error-text'>Error: Context not found</div>;
+  }
+
+  return (
+    <div className='flex flex-col items-center justify-center h-screen bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-white'>
+      <div className='p-8 bg-white dark:bg-neutral-800 rounded-lg shadow-xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full'>
+        <h2 className='text-2xl font-bold mb-6 text-center text-primary-600 dark:text-primary-400'>
+          Web Context Counter
+        </h2>
+
+        <div className='flex flex-col items-center gap-6'>
+          <div className='text-6xl font-mono font-bold tabular-nums tracking-tighter'>{count}</div>
+
+          <button
+            className='px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-full transition-colors shadow-md active:transform active:scale-95'
+            onClick={() => {
+              const counter = manager.capabilities.get(Counter);
+              counter.increment();
+            }}
+          >
+            Increment
+          </button>
+
+          <CountStatus />
+        </div>
+
+        <div className='mt-8 pt-4 border-t border-neutral-200 dark:border-neutral-700 text-center'>
+          <p className='text-sm text-neutral-500 dark:text-neutral-400'>
+            This component accesses the <code>PluginManager</code> via <code>useWebComponentContext</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Plugin that provides the Counter capability and renders the UI
+const CounterPlugin = Plugin.define({
+  id: 'org.dxos.plugin.counter',
+  name: 'Counter Plugin',
+}).pipe(
+  Plugin.addModule({
+    id: 'CounterMain',
+    activatesOn: ActivationEvents.Startup,
+    activate: () => {
+      const listeners = new Set<() => void>();
+      const counter = {
+        count: 0,
+        increment: () => {
+          counter.count++;
+          listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener: () => void) => {
+          listeners.add(listener);
+          return () => listeners.delete(listener);
+        },
+      };
+
+      return Effect.succeed([
+        // Contribute the state/logic
+        Capability.contributes(Counter, counter),
+
+        // Contribute the UI
+        Capability.contributes(Capabilities.ReactRoot, {
+          id: 'org.dxos.plugin.counter.root',
+          root: CounterComponent,
+        }),
+      ]);
+    },
+  }),
+  Plugin.make,
+)();
+
+const plugins = [CounterPlugin];
+const core = ['org.dxos.plugin.counter'];
+const placeholder = () => (
+  <div className='flex h-screen items-center justify-center p-4 text-lg text-neutral-500'>
+    Initializing Application...
+  </div>
+);
+
+const DefaultStory = () => {
+  const App = useApp({
+    plugins,
+    core,
+    placeholder,
+  });
+
+  return <App />;
+};
+
+const meta = {
+  title: 'sdk/app-framework/components/PluginManagerContext',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};

package/src/{react → ui/components/PluginManager}/PluginManagerProvider.ts

@@ -6,14 +6,14 @@ import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { type PluginManager } from '../core';
+import { type PluginManager } from '../../../core';
 
-const PluginManagerContext = createContext<PluginManager | undefined>(undefined);
+const PluginManagerContext = createContext<PluginManager.PluginManager | undefined>(undefined);
 
 /**
  * Get the plugin manager.
  */
-export const usePluginManager = (): PluginManager =>
+export const usePluginManager = (): PluginManager.PluginManager =>
   useContext(PluginManagerContext) ?? raise(new Error('Missing PluginManagerContext'));
 
 /**

package/src/ui/components/PluginManager/index.ts

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

package/src/ui/components/Surface/SurfaceComponent.stories.tsx

@@ -0,0 +1,144 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { random } from '@dxos/random';
+import { List, ListItem, Panel, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ColorStyles, getHashStyles, mx } from '@dxos/ui-theme';
+
+import { Capabilities } from '../../../common';
+import { withPluginManager } from '../../../testing';
+import { usePluginManager } from '../PluginManager';
+import { SurfaceComponent, useSurfaces } from './SurfaceComponent';
+import { create } from './types';
+
+type TestComponentProps = {
+  id: string;
+  styles: ColorStyles;
+};
+
+const TestComponent = forwardRef<HTMLDivElement, TestComponentProps>(({ styles, id }, forwardedRef) => {
+  return (
+    <div
+      className={mx('flex justify-center items-center border rounded-sm', styles.surface, styles.border)}
+      ref={forwardedRef}
+    >
+      <span className={mx('dx-tag font-mono text-lg', styles.text)}>{id}</span>
+    </div>
+  );
+});
+
+const DefaultStory = () => {
+  const manager = usePluginManager();
+  const surfaces = useSurfaces();
+  const [selected, setSelected] = useState<string | undefined>();
+
+  const handleAdd = useCallback(() => {
+    const id = `test-${random.number.int({ min: 0, max: 1_000 })}`;
+    const styles = getHashStyles(id);
+
+    manager.capabilities.contribute({
+      module: 'test',
+      interface: Capabilities.ReactSurface,
+      implementation: create({
+        id,
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === id,
+        component: ({ ref }) => <TestComponent id={id} styles={styles} ref={ref} />,
+      }),
+    });
+
+    setSelected(id);
+  }, [manager]);
+
+  const handleSelect = useCallback(() => {
+    setSelected(random.helpers.arrayElement(surfaces)?.id);
+  }, [surfaces]);
+
+  const handleError = useCallback(() => {
+    manager.capabilities.contribute({
+      module: 'error',
+      interface: Capabilities.ReactSurface,
+      implementation: create({
+        id: 'error',
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === 'error',
+        component: () => {
+          const [count, setCount] = useState(3);
+          useEffect(() => {
+            const interval = setInterval(() => {
+              setCount((count) => {
+                if (count <= 1) {
+                  clearInterval(interval);
+                }
+
+                return count - 1;
+              });
+            }, 1_000);
+            return () => clearInterval(interval);
+          }, []);
+
+          if (count <= 0) {
+            throw new Error('BANG!');
+          }
+
+          return (
+            <div className='flex justify-center items-center border border-rose-fill rounded-sm'>
+              <span className='font-mono'>Ticking... {count}</span>
+            </div>
+          );
+        },
+      }),
+    });
+
+    setSelected('error');
+  }, [manager]);
+
+  const ref = useRef<HTMLElement>(null);
+  useEffect(() => {
+    console.log(ref.current);
+  }, [ref]);
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={handleAdd}>Add</Toolbar.Button>
+          <Toolbar.Button onClick={handleSelect}>Pick</Toolbar.Button>
+          <Toolbar.Button onClick={handleError}>Error</Toolbar.Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content className='grid grid-cols-2 h-full gap-4 overflow-hidden'>
+        <SurfaceComponent role='item' data={selected ? { id: selected } : undefined} limit={1} ref={ref} />
+        <div className='overflow-y-auto h-full'>
+          <List>
+            {surfaces.map((surface) => (
+              <ListItem.Root key={surface.id} id={surface.id}>
+                <ListItem.Heading classNames='flex items-center'>{surface.id}</ListItem.Heading>
+              </ListItem.Root>
+            ))}
+          </List>
+        </div>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'sdk/app-framework/components/Surface',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withPluginManager({ capabilities: [] })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};