@netless/window-manager 0.3.17 → 0.4.0-canary.10

package/src/{MainView.ts → View/MainView.ts}

@@ -1,27 +1,29 @@
-import { AnimationMode, reaction, ViewVisionMode } from "white-web-sdk";
-import { Base } from "./Base";
-import { callbacks, emitter } from "./index";
+import { AnimationMode, reaction } from "white-web-sdk";
+import { Base } from "../Base";
+import { callbacks, emitter } from "../index";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
-import { Fields } from "./AttributesDelegate";
-import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./Utils/Common";
+import { Fields } from "../AttributesDelegate";
+import { setViewFocusScenePath } from "../Utils/Common";
+import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+import type { AppManager } from "../AppManager";
 
 export class MainViewProxy extends Base {
     private scale?: number;
-    private cameraStore = this.manager.cameraStore;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private viewId = "mainView";
 
+    private sideEffectManager = new SideEffectManager();
+
     constructor(manager: AppManager) {
         super(manager);
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
-        this.cameraStore.register(this.viewId, this.mainView);
         emitter.once("mainViewMounted").then(() => {
+            this.addMainViewListener();
             setTimeout(() => {
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
@@ -29,8 +31,12 @@ export class MainViewProxy extends Base {
                 }
             }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
         });
-        emitter.on("playgroundSizeChange", () => {
+        const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
+        };
+        this.sideEffectManager.add(() => {
+            emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+            return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
         });
     }
 
@@ -75,7 +81,7 @@ export class MainViewProxy extends Base {
         );
     };
 
-    private sizeChangeHandler =  debounce((size: Size) => {
+    private sizeChangeHandler = debounce((size: Size) => {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
@@ -96,15 +102,12 @@ export class MainViewProxy extends Base {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        if (!this.store.focus) {
-            this.switchViewModeToWriter();
-        }
         return mainView;
     }
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.context.uid });
-        if (!isEqual(this.mainViewSize, {...this.mainView.size, id: this.context.uid})) {
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.context.uid })) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -131,7 +134,6 @@ export class MainViewProxy extends Base {
 
     public async mainViewClickHandler(): Promise<void> {
         if (!this.manager.canOperate) return;
-        if (this.view.mode === ViewVisionMode.Writable) return;
         this.store.cleanFocus();
         this.context.blurFocusBox();
     }
@@ -156,17 +158,6 @@ export class MainViewProxy extends Base {
         callbacks.emit("cameraStateChange", this.cameraState);
     };
 
-    public switchViewModeToWriter(): void {
-        if (!this.manager.canOperate) return;
-        if (this.view) {
-            if (this.view.mode === ViewVisionMode.Writable) return;
-            this.cameraStore.switchView(this.viewId, this.mainView, () => {
-                notifyMainViewModeChange(callbacks, ViewVisionMode.Writable);
-                setViewMode(this.view, ViewVisionMode.Writable);
-            });
-        }
-    }
-
     public moveCameraToContian(size: Size): void {
         if (!isEmpty(size)) {
             this.view.moveCameraToContain({
@@ -195,6 +186,7 @@ export class MainViewProxy extends Base {
     }
 
     public stop() {
+        this.removeMainViewListener();
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
@@ -203,6 +195,6 @@ export class MainViewProxy extends Base {
 
     public destroy() {
         this.stop();
-        this.cameraStore.unregister(this.viewId, this.mainView);
+        this.sideEffectManager.flushAll();
     }
 }

package/src/View/ViewManager.ts

@@ -0,0 +1,53 @@
+import type { View , Displayer} from "white-web-sdk";
+
+export class ViewManager {
+    public views: Map<string, View> = new Map();
+
+    constructor(private displayer: Displayer) {}
+
+    public createView(id: string): View {
+        const view = createView(this.displayer);
+        this.views.set(id, view);
+        return view;
+    }
+
+    public getView(id: string): View | undefined {
+        return this.views.get(id);
+    }
+
+    public destroyView(id: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.release();
+            this.views.delete(id);
+        }
+    }
+
+    public setViewScenePath(id: string, scenePath: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.focusScenePath = scenePath;
+        }
+    }
+
+    public destroy() {
+        this.views.forEach(view => {
+            view.release();
+        });
+        this.views.clear();
+    }
+}
+
+
+export const createView = (displayer: Displayer): View => {
+    const view = displayer.views.createView();
+    setDefaultCameraBound(view);
+    return view;
+};
+
+export const setDefaultCameraBound = (view: View) => {
+    view.setCameraBound({
+        maxContentMode: () => 10,
+        minContentMode: () => 0.1,
+    });
+};

package/src/constants.ts

@@ -10,6 +10,7 @@ export enum Events {
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
+    MoveCameraToContain = "MoveCameraToContain"
 }
 
 export const MagixEventName = "__WindowManger";
@@ -36,13 +37,11 @@ export enum CursorState {
     Normal = "normal",
 }
 
-export const REQUIRE_VERSION = "2.13.16";
+export const REQUIRE_VERSION = "2.16.0";
 
 export const MIN_WIDTH = 340 / 720;
 export const MIN_HEIGHT = 340 / 720;
 
 export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 
-export const DEFAULT_COLLECTOR_STYLE = { right: "10px", bottom: "15px", position: "absolute" };
-
 export const DEFAULT_CONTAINER_RATIO = 9 / 16;

package/src/index.ts

@@ -1,18 +1,19 @@
-import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
 import Emittery from "emittery";
 import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
+import { ContainerResizeObserver } from "./ContainerResizeObserver";
+import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
-import { DEFAULT_CONTAINER_RATIO, REQUIRE_VERSION } from "./constants";
+import { DEFAULT_CONTAINER_RATIO, Events, REQUIRE_VERSION } from "./constants";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { isNull, isObject } from "lodash";
 import { log } from "./Utils/log";
+import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
-import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import { setupWrapper } from "./ViewManager";
+import { setupBuiltin } from "./BuiltinApps";
+import { setupWrapper } from "./Helper";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
 import {
@@ -22,7 +23,7 @@ import {
     isValidScenePath,
     wait,
 } from "./Utils/Common";
-import type { TELE_BOX_STATE } from "./BoxManager";
+import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import {
     AppCreateError,
     AppManagerNotInitError,
@@ -58,8 +59,6 @@ import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./AppProxy";
 
-const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
-
 export type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
@@ -80,14 +79,14 @@ export type AddAppOptions = {
 
 export type setAppOptions = AddAppOptions & { appOptions?: any };
 
-export type AddAppParams = {
+export type AddAppParams<TAttributes = any> = {
     kind: string;
     // app 地址(本地 app 不需要传)
     src?: string;
     // 窗口配置
     options?: AddAppOptions;
     // 初始化 attributes
-    attributes?: any;
+    attributes?: TAttributes;
 };
 
 export type BaseInsertParams = {
@@ -108,6 +107,7 @@ export type AppSyncAttributes = {
     state?: any;
     isDynamicPPT?: boolean;
     fullPath?: string;
+    createdAt?: number;
 };
 
 export type AppInitState = {
@@ -137,9 +137,11 @@ export type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
+    onReconnected: void;
 };
 
-export const emitter: Emittery<EmitterEvent> = new Emittery();
+export type EmitterType = Emittery<EmitterEvent>;
+export const emitter: EmitterType = new Emittery();
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -147,11 +149,13 @@ export type PublicEvent = {
     darkModeChange: boolean;
     prefersColorSchemeChange: TeleBoxColorScheme;
     cameraStateChange: CameraState;
+    mainViewScenePathChange: string;
+    mainViewSceneIndexChange: number;
 };
 
 export type MountParams = {
     room: Room;
-    container: HTMLElement;
+    container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
     /** 显示 PS 透明背景，默认 true */
@@ -165,7 +169,10 @@ export type MountParams = {
     prefersColorScheme?: TeleBoxColorScheme;
 };
 
-export const callbacks: Emittery<PublicEvent> = new Emittery();
+export type CallbacksType = Emittery<PublicEvent>;
+export const callbacks: CallbacksType = new Emittery();
+
+export const reconnectRefresher = new ReconnectRefresher({ emitter });
 
 export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static kind = "WindowManager";
@@ -177,7 +184,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.3.17";
+    public version = __APP_VERSION__;
 
     public appListeners?: AppListeners;
 
@@ -188,93 +195,40 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public viewMode = ViewMode.Broadcaster;
     public isReplay = isPlayer(this.displayer);
 
+    private boxManager?: BoxManager;
+    private static params?: MountParams;
+
+    private containerResizeObserver?: ContainerResizeObserver;
+
     constructor(context: InvisiblePluginContext) {
         super(context);
+        WindowManager.displayer = context.displayer;
     }
 
-    /**
-     * 挂载 WindowManager
-     * @deprecated
-     */
-    public static async mount(
-        room: Room,
-        container: HTMLElement,
-        collectorContainer?: HTMLElement,
-        options?: {
-            chessboard: boolean;
-            containerSizeRatio: number;
-            collectorStyles?: Partial<CSSStyleDeclaration>;
-            debug?: boolean;
-            overwriteStyles?: string;
-        }
-    ): Promise<WindowManager>;
-
-    public static async mount(params: MountParams): Promise<WindowManager>;
-
-    public static async mount(
-        params: MountParams | Room,
-        container?: HTMLElement,
-        collectorContainer?: HTMLElement,
-        options?: {
-            chessboard?: boolean;
-            containerSizeRatio: number;
-            collectorStyles?: Partial<CSSStyleDeclaration>;
-            debug?: boolean;
-            overwriteStyles?: string;
-            disableCameraTransform?: boolean;
-        }
-    ): Promise<WindowManager> {
-        let room: Room;
-        let containerSizeRatio: number | undefined;
-        let collectorStyles: Partial<CSSStyleDeclaration> | undefined;
-        let debug: boolean | undefined;
-        let chessboard = true;
-        let overwriteStyles: string | undefined;
-        let cursor: boolean | undefined;
-        let disableCameraTransform = false;
-        let prefersColorScheme: TeleBoxColorScheme | undefined = "light";
-        if ("room" in params) {
-            room = params.room;
-            container = params.container;
-            collectorContainer = params.collectorContainer;
-            containerSizeRatio = params.containerSizeRatio;
-            collectorStyles = params.collectorStyles;
-            debug = params.debug;
-            if (params.chessboard != null) {
-                chessboard = params.chessboard;
-            }
-            overwriteStyles = params.overwriteStyles;
-            cursor = params.cursor;
-            disableCameraTransform = Boolean(params?.disableCameraTransform);
-            prefersColorScheme = params.prefersColorScheme;
-        } else {
-            room = params;
-            containerSizeRatio = options?.containerSizeRatio;
-            collectorStyles = options?.collectorStyles;
-            debug = options?.debug;
-            if (options?.chessboard != null) {
-                chessboard = options.chessboard;
-            }
-            overwriteStyles = options?.overwriteStyles;
-        }
+    public static async mount(params: MountParams): Promise<WindowManager> {
+        const room = params.room;
+        WindowManager.container = params.container;
+        const containerSizeRatio = params.containerSizeRatio;
+        const debug = params.debug;
+
+        const cursor = params.cursor;
+        WindowManager.params = params;
 
         this.checkVersion();
         if (isRoom(room)) {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
             }
-        }
-        if (!container) {
-            throw new Error("[WindowManager]: Container must provide");
+            if (room.phase === RoomPhase.Connected) {
+                // redo undo 需要设置这个属性
+                room.disableSerialization = false;
+            }
         }
         if (WindowManager.isCreated) {
             throw new Error("[WindowManager]: Already created cannot be created again");
         }
         let manager = await this.initManager(room);
         this.debug = Boolean(debug);
-        if (this.debug) {
-            setOptions({ verbose: true });
-        }
         log("Already insert room", manager);
 
         if (isRoom(this.displayer)) {
@@ -297,29 +251,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         if (containerSizeRatio) {
             WindowManager.containerSizeRatio = containerSizeRatio;
         }
-        WindowManager.container = container;
-        const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
-        WindowManager.playground = playground;
-        if (chessboard) {
-            sizer.classList.add("netless-window-manager-chess-sizer");
-        }
-        if (overwriteStyles) {
-            const style = document.createElement("style");
-            style.textContent = overwriteStyles;
-            playground.appendChild(style);
-        }
         await manager.ensureAttributes();
-        manager.appManager = new AppManager(manager, {
-            collectorContainer: collectorContainer,
-            collectorStyles: collectorStyles,
-            prefersColorScheme: prefersColorScheme,
-        });
-        manager.observePlaygroundSize(playground, sizer, wrapper);
+
+        manager.appManager = new AppManager(manager);
+
         if (cursor) {
             manager.cursorManager = new CursorManager(manager.appManager);
         }
-        manager.bindMainView(mainViewElement, disableCameraTransform);
-        replaceRoomFunction(room, manager.appManager);
+
+        if (params.container) {
+            manager.bindContainer(params.container);
+        }
+
+        replaceRoomFunction(room, manager);
         emitter.emit("onCreated");
         WindowManager.isCreated = true;
         try {
@@ -359,6 +303,79 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return manager;
     }
 
+    private static initContainer(
+        manager: WindowManager,
+        container: HTMLElement,
+        chessboard: boolean | undefined,
+        overwriteStyles: string | undefined
+    ) {
+        if (!WindowManager.container) {
+            WindowManager.container = container;
+        }
+        const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
+        WindowManager.playground = playground;
+        if (chessboard) {
+            sizer.classList.add("netless-window-manager-chess-sizer");
+        }
+        if (overwriteStyles) {
+            const style = document.createElement("style");
+            style.textContent = overwriteStyles;
+            playground.appendChild(style);
+        }
+        manager.containerResizeObserver = ContainerResizeObserver.create(
+            playground,
+            sizer,
+            wrapper,
+            emitter
+        );
+        WindowManager.wrapper = wrapper;
+        return mainViewElement;
+    }
+
+    public bindContainer(container: HTMLElement) {
+        if (WindowManager.isCreated && WindowManager.container) {
+            if (WindowManager.container.firstChild) {
+                container.appendChild(WindowManager.container.firstChild);
+            }
+        } else {
+            if (WindowManager.params) {
+                const params = WindowManager.params;
+                const mainViewElement = WindowManager.initContainer(
+                    this,
+                    container,
+                    params.chessboard,
+                    params.overwriteStyles
+                );
+                const boxManager = createBoxManager(this, callbacks, emitter, {
+                    collectorContainer: params.collectorContainer,
+                    collectorStyles: params.collectorStyles,
+                    prefersColorScheme: params.prefersColorScheme,
+                });
+                this.boxManager = boxManager;
+                this.appManager?.setBoxManager(boxManager);
+                this.bindMainView(mainViewElement, params.disableCameraTransform);
+                if (WindowManager.wrapper) {
+                    this.cursorManager?.setupWrapper(WindowManager.wrapper);
+                }
+            }
+        }
+        this.boxManager?.updateManagerRect();
+        this.appManager?.refresh();
+        this.appManager?.resetMaximized();
+        this.appManager?.resetMinimized();
+        WindowManager.container = container;
+    }
+
+    public bindCollectorContainer(container: HTMLElement) {
+        if (WindowManager.isCreated && this.boxManager) {
+            this.boxManager.setCollectorContainer(container);
+        } else {
+            if (WindowManager.params) {
+                WindowManager.params.collectorContainer = container;
+            }
+        }
+    }
+
     /**
      * 注册插件
      */
@@ -371,7 +388,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     /**
      * 创建一个 app 至白板
      */
-    public async addApp(params: AddAppParams): Promise<string | undefined> {
+    public async addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
         if (this.appManager) {
             if (!params.kind || typeof params.kind !== "string") {
                 throw new ParamsInvalidError();
@@ -468,10 +485,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 设置所有 app 的 readonly 模式
      */
     public setReadonly(readonly: boolean): void {
-        if (this.room?.isWritable) {
-            this.readonly = readonly;
-            this.appManager?.boxManager.setReadonly(readonly);
-        }
+        this.readonly = readonly;
+        this.boxManager?.setReadonly(readonly);
     }
 
     /**
@@ -531,26 +546,30 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.appManager?.store.apps();
     }
 
-    public get boxState(): TeleBoxState {
+    public get boxState(): TeleBoxState | undefined {
         if (this.appManager) {
-            return this.appManager.boxManager.boxState;
+            return this.appManager.boxManager?.boxState;
         } else {
             throw new AppManagerNotInitError();
         }
     }
 
     public get darkMode(): boolean {
-        return Boolean(this.appManager?.boxManager.darkMode);
+        return Boolean(this.appManager?.boxManager?.darkMode);
     }
 
-    public get prefersColorScheme(): TeleBoxColorScheme {
+    public get prefersColorScheme(): TeleBoxColorScheme | undefined {
         if (this.appManager) {
-            return this.appManager.boxManager.prefersColorScheme;
+            return this.appManager.boxManager?.prefersColorScheme;
         } else {
             throw new AppManagerNotInitError();
         }
     }
 
+    public get focused(): string | undefined {
+        return this.attributes.focus;
+    }
+
     /**
      * 查询所有的 App
      */
@@ -585,6 +604,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }>
     ): void {
         this.mainView.moveCameraToContain(rectangle);
+        this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+        setTimeout(() => {
+            this.appManager?.mainViewProxy.setCameraAndSize();
+        }, 1000);
     }
 
     public convertToPointInWorld(point: Point): Point {
@@ -613,12 +636,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         if (WindowManager.playground) {
             WindowManager.playground.parentNode?.removeChild(WindowManager.playground);
         }
+        WindowManager.params = undefined;
         log("Destroyed");
     }
 
-    private bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
+    private bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean | undefined) {
         if (this.appManager) {
-            this.appManager.bindMainView(divElement, disableCameraTransform);
+            this.appManager.bindMainView(divElement, Boolean(disableCameraTransform));
             this.cursorManager?.setMainViewDivElement(divElement);
         }
     }
@@ -651,7 +675,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     }
 
     public setPrefersColorScheme(scheme: TeleBoxColorScheme): void {
-        this.appManager?.boxManager.setPrefersColorScheme(scheme);
+        this.appManager?.boxManager?.setPrefersColorScheme(scheme);
     }
 
     private isDynamicPPT(scenes: SceneDefinition[]) {
@@ -686,62 +710,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }
         }
     }
-
-    private containerResizeObserver?: ResizeObserver;
-
-    private observePlaygroundSize(
-        container: HTMLElement,
-        sizer: HTMLElement,
-        wrapper: HTMLDivElement
-    ) {
-        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
-
-        this.containerResizeObserver = new ResizeObserver(entries => {
-            const containerRect = entries[0]?.contentRect;
-            if (containerRect) {
-                this.updateSizer(containerRect, sizer, wrapper);
-                this.cursorManager?.updateContainerRect();
-                this.appManager?.boxManager.updateManagerRect();
-                emitter.emit("playgroundSizeChange", containerRect);
-            }
-        });
-
-        this.containerResizeObserver.observe(container);
-    }
-
-    private updateSizer(
-        { width, height }: DOMRectReadOnly,
-        sizer: HTMLElement,
-        wrapper: HTMLDivElement
-    ) {
-        if (width && height) {
-            if (height / width > WindowManager.containerSizeRatio) {
-                height = width * WindowManager.containerSizeRatio;
-                sizer.classList.toggle("netless-window-manager-sizer-horizontal", true);
-            } else {
-                width = height / WindowManager.containerSizeRatio;
-                sizer.classList.toggle("netless-window-manager-sizer-horizontal", false);
-            }
-            wrapper.style.width = `${width}px`;
-            wrapper.style.height = `${height}px`;
-        }
-    }
 }
 
-WindowManager.register({
-    kind: AppDocsViewer.kind,
-    src: AppDocsViewer,
-});
-WindowManager.register({
-    kind: AppMediaPlayer.kind,
-    src: AppMediaPlayer,
-});
-
-export const BuiltinApps = {
-    DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: AppMediaPlayer.kind as string,
-};
+setupBuiltin();
 
 export * from "./typings";
 
-export { WhiteWindowSDK } from "./sdk";
+export { BuiltinApps } from "./BuiltinApps";