@owdproject/nuxt 0.0.0-stage → 4.0.0-alpha.3

package/dist/module.mjs

@@ -0,0 +1,681 @@
+import { existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { defineNuxtModule, createResolver, installModule, addComponentsDir, addPlugin, addImportsDir } from '@nuxt/kit';
+import { resolveDesktopConfigPath, warnLegacyDesktopConfig, assertValidDesktopUserConfig, warnDesktopConfigKeys, mergeDesktopConfig, installDesktopPackage } from '../dist/kit/authoring.js';
+export { defineDesktopConfig, defineDesktopModule, defineDesktopTheme, hasDesktopModule, mergeDesktopExtensionConfig, setDesktopExtensionConfig } from '../dist/kit/authoring.js';
+import { shallowRef, computed, getCurrentScope, onScopeDispose, reactive, markRaw, defineAsyncComponent } from 'vue';
+import { createDesktop, WindowManager, DesktopPointerSession, windowMachine, IframeGuard } from '@owdproject/core';
+export * from '@owdproject/core';
+import { createActor } from 'xstate';
+
+const version = "4.0.0-alpha.3";
+const pkg = {
+	version: version};
+
+function useDesktop(desktopOrOptions) {
+  const desktop = desktopOrOptions && "windows" in desktopOrOptions ? desktopOrOptions : createDesktop(desktopOrOptions);
+  const initial = desktop.getSnapshot();
+  const windows = shallowRef(initial.windows);
+  const applications = shallowRef(initial.applications);
+  const workspace = shallowRef(initial.workspace);
+  const commands = shallowRef(initial.commands);
+  const events = shallowRef(initial.events);
+  const unsubscribe = desktop.subscribe((snapshot) => {
+    windows.value = snapshot.windows;
+    applications.value = snapshot.applications;
+    workspace.value = snapshot.workspace;
+    commands.value = snapshot.commands;
+    events.value = snapshot.events;
+  });
+  const focusedWindow = computed(() => windows.value.find((w) => w.state.focused));
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      unsubscribe();
+    });
+  }
+  return {
+    desktop,
+    windows,
+    applications,
+    workspace,
+    commands,
+    events,
+    focusedWindow
+  };
+}
+
+function useWindowManager(manager = new WindowManager()) {
+  const windows = shallowRef(manager.getSnapshot());
+  const unsubscribe = manager.subscribe((snapshot) => {
+    windows.value = [...snapshot];
+  });
+  const focused = computed(() => windows.value.find((w) => w.state.focused));
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      unsubscribe();
+    });
+  }
+  return {
+    windows,
+    focused,
+    manager
+  };
+}
+const useVueWindowManager = useWindowManager;
+
+function useWindowInstance(instance) {
+  const state = shallowRef(instance.getSnapshot());
+  const unsubscribe = instance.subscribe((newSnapshot) => {
+    state.value = newSnapshot;
+  });
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      unsubscribe();
+    });
+  }
+  return {
+    state,
+    instance
+  };
+}
+
+function useDesktopDrag(options) {
+  function startDrag(event) {
+    return DesktopPointerSession.startDrag(event, {
+      initialBounds: options.getBounds(),
+      workarea: options.getWorkarea?.(),
+      onStart: options.onStart,
+      onMove: options.onMove,
+      onEnd: options.onEnd,
+      onCancel: options.onCancel
+    });
+  }
+  return {
+    startDrag
+  };
+}
+function useDesktopResize(options) {
+  function startResize(event, direction) {
+    return DesktopPointerSession.startResize(event, {
+      direction,
+      initialBounds: options.getBounds(),
+      minWidth: options.minWidth,
+      minHeight: options.minHeight,
+      maxWidth: options.maxWidth,
+      maxHeight: options.maxHeight,
+      onStart: options.onStart,
+      onMove: options.onMove,
+      onEnd: options.onEnd,
+      onCancel: options.onCancel
+    });
+  }
+  return {
+    startResize
+  };
+}
+
+function formatWindowSnapshotValue(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length > 0) {
+      const [k, v] = entries[0];
+      return `${k}.${formatWindowSnapshotValue(v)}`;
+    }
+  }
+  return "normal";
+}
+function deepClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  return JSON.parse(JSON.stringify(obj));
+}
+class WindowController {
+  application;
+  instanced = true;
+  model;
+  _stateValue = shallowRef("normal.focused.idle");
+  get stateValue() {
+    return this._stateValue.value;
+  }
+  config = {
+    title: "",
+    category: "",
+    component: void 0,
+    position: { x: 0, y: 0, z: 0 },
+    size: { width: void 0, height: void 0 },
+    minimizable: true,
+    maximized: false,
+    maximizable: true,
+    destroyable: true,
+    draggable: true,
+    resizable: true
+  };
+  override = reactive({});
+  storedState;
+  windowActor;
+  isDisposed = false;
+  actions;
+  constructor(application, model, windowConfig, windowStoredState, options) {
+    this.application = application;
+    this.model = model;
+    this.storedState = windowStoredState;
+    this.setConfig(windowConfig);
+    this.restoreState();
+    this.actions = Object.freeze({
+      setActive: this.setActive.bind(this),
+      setFocus: this.setFocus.bind(this),
+      bringToFront: this.focus.bind(this),
+      focus: this.focus.bind(this),
+      setPosition: this.setPosition.bind(this),
+      startDrag: this.startDrag.bind(this),
+      stopDrag: this.stopDrag.bind(this),
+      startResize: this.startResize.bind(this),
+      stopResize: this.stopResize.bind(this),
+      setSize: this.setSize.bind(this),
+      minimize: this.minimize.bind(this),
+      unminimize: this.unminimize.bind(this),
+      toggleMinimize: this.toggleMinimize.bind(this),
+      toggleMaximize: this.toggleMaximize.bind(this),
+      maximize: this.maximize.bind(this),
+      unmaximize: this.unmaximize.bind(this),
+      setLayout: this.setLayout.bind(this),
+      clearLayout: this.clearLayout.bind(this),
+      saveBoundsBeforeLayout: this.saveBoundsBeforeLayout.bind(this),
+      destroy: this.destroy.bind(this),
+      setWorkspace: this.setWorkspace.bind(this),
+      setTitleOverride: this.setTitleOverride.bind(this),
+      resetTitleOverride: this.resetTitleOverride.bind(this),
+      setWindowTitleOverride: this.setWindowTitleOverride.bind(this),
+      resetWindowTitleOverride: this.resetWindowTitleOverride.bind(this)
+    });
+    let initialValue = { normal: "unfocused" };
+    if (this.state.active === false) {
+      initialValue = "minimized";
+    } else if (this.state.maximized === true) {
+      initialValue = this.state.focused ? { maximized: "focused" } : { maximized: "unfocused" };
+    } else if (this.state.focused === true) {
+      initialValue = { normal: { focused: "idle" } };
+    }
+    this.windowActor = createActor(windowMachine, {
+      state: windowMachine.resolveState({
+        value: initialValue,
+        context: {
+          wasMaximized: !!this.state.maximized,
+          config: this.config
+        }
+      })
+    });
+    let wasLastMaximized = !!this.state.maximized;
+    this.windowActor.subscribe((snapshot) => {
+      if (this.isDisposed) return;
+      this._stateValue.value = formatWindowSnapshotValue(snapshot.value);
+      const isMinimized = snapshot.matches("minimized");
+      const isMaximized = snapshot.matches("maximized");
+      const isFocused = snapshot.matches("normal.focused") || snapshot.matches("maximized.focused");
+      const isDragging = snapshot.matches("normal.focused.dragging");
+      const isResizing = snapshot.matches("normal.focused.resizing");
+      if (this.state.active !== !isMinimized) this.state.active = !isMinimized;
+      if (this.state.maximized !== isMaximized) this.state.maximized = isMaximized;
+      if (this.state.focused !== isFocused) this.state.focused = isFocused;
+      if (this.state.dragging !== isDragging) this.state.dragging = isDragging;
+      if (this.state.resizing !== isResizing) this.state.resizing = isResizing;
+      if (isMaximized && !wasLastMaximized) {
+        this.saveBoundsBeforeLayout();
+        this.state.layout = "maximize";
+        const workarea = options?.getWorkarea?.();
+        if (workarea && workarea.width > 0 && workarea.height > 0) {
+          this.setPosition({ x: workarea.x, y: workarea.y });
+          this.setSize({ width: workarea.width, height: workarea.height });
+        }
+      } else if (!isMaximized && wasLastMaximized) {
+        if (this.state.layout === "maximize") {
+          this.clearLayout();
+        }
+      }
+      wasLastMaximized = isMaximized;
+    });
+    this.windowActor.start();
+  }
+  setConfig(config) {
+    if (config.component) {
+      this.config.component = markRaw(
+        typeof config.component === "function" ? defineAsyncComponent(config.component) : config.component
+      );
+    }
+    if (config.title) this.config.title = config.title;
+    if (config.icon) this.config.icon = config.icon;
+    if (!this.config.position) this.config.position = { x: 0, y: 0, z: 0 };
+    if (config.position?.x !== void 0) this.config.position.x = config.position.x;
+    if (config.position?.y !== void 0) this.config.position.y = config.position.y;
+    if (config.position?.z !== void 0) this.config.position.z = config.position.z;
+    if (config.size?.width !== void 0) this.config.size.width = config.size.width;
+    if (config.size?.height !== void 0) this.config.size.height = config.size.height;
+    if (config.size?.minWidth !== void 0) this.config.size.minWidth = config.size.minWidth;
+    if (config.size?.minHeight !== void 0) this.config.size.minHeight = config.size.minHeight;
+    if (config.size?.maxWidth !== void 0) this.config.size.maxWidth = config.size.maxWidth;
+    if (config.size?.maxHeight !== void 0) this.config.size.maxHeight = config.size.maxHeight;
+    if (typeof config.resizable !== "undefined") this.config.resizable = config.resizable;
+    if (typeof config.minimizable !== "undefined") this.config.minimizable = config.minimizable;
+    if (typeof config.maximizable !== "undefined") {
+      this.config.maximizable = config.maximizable;
+    } else {
+      this.config.maximizable = this.config.resizable !== false;
+    }
+    if (typeof config.maximized !== "undefined") this.config.maximized = config.maximized;
+    if (typeof config.draggable !== "undefined") this.config.draggable = config.draggable;
+    if (typeof config.destroyable !== "undefined") this.config.destroyable = config.destroyable;
+    const DEFAULT_OVERRIDABLE = {
+      draggable: true,
+      resizable: false,
+      position: false,
+      size: false,
+      maximized: false,
+      destroyable: false,
+      minimizable: false,
+      maximizable: false
+    };
+    DEFAULT_OVERRIDABLE.position = DEFAULT_OVERRIDABLE.draggable;
+    DEFAULT_OVERRIDABLE.size = DEFAULT_OVERRIDABLE.resizable;
+    DEFAULT_OVERRIDABLE.maximized = DEFAULT_OVERRIDABLE.maximizable;
+    this.config.overridable = {
+      ...DEFAULT_OVERRIDABLE,
+      ...config.overridable || {}
+    };
+  }
+  get state() {
+    return this.storedState.state;
+  }
+  restoreState() {
+    const overridable = this.config.overridable || {};
+    for (const key in overridable) {
+      if (overridable[key]) {
+        const stateKey = key;
+        if (typeof this.state[stateKey] === "undefined") {
+          if (typeof this.config[stateKey] === "object") {
+            this.state[stateKey] = deepClone(this.config[stateKey]);
+          } else {
+            this.state[stateKey] = !!this.config[stateKey];
+          }
+        }
+      }
+    }
+  }
+  get meta() {
+    return this.storedState.meta;
+  }
+  setPosition(data) {
+    if (!this.state.position) {
+      this.state.position = { x: 0, y: 0 };
+    }
+    this.state.position.x = Math.round(data.x);
+    this.state.position.y = Math.round(data.y);
+  }
+  setActive(value) {
+    if (this.isDisposed) return;
+    if (value) {
+      this.windowActor.send({ type: "RESTORE" });
+    } else {
+      this.windowActor.send({ type: "MINIMIZE" });
+    }
+  }
+  setFocus(value) {
+    if (this.isDisposed) return;
+    if (value) {
+      if (!this.state.focused) {
+        this.windowActor.send({ type: "FOCUS" });
+      }
+    } else {
+      if (this.state.focused) {
+        this.windowActor.send({ type: "BLUR" });
+      }
+    }
+  }
+  focus() {
+    if (this.isDisposed) return;
+    if (!this.state.position) {
+      this.state.position = { x: 0, y: 0, z: 0 };
+    }
+    if (this.application?.focusWindow) {
+      this.application.focusWindow(this);
+    } else {
+      this.setFocus(true);
+    }
+  }
+  get title() {
+    if (typeof this.override.title !== "undefined") return this.override.title;
+    if (this.config.title) return this.config.title;
+    return this.application?.config?.title ?? "";
+  }
+  get windowTitle() {
+    if (typeof this.override.windowTitle !== "undefined") return this.override.windowTitle;
+    return this.title;
+  }
+  get icon() {
+    if (typeof this.override.icon !== "undefined") return this.override.icon;
+    if (this.config.icon) return this.config.icon;
+    return this.application?.config?.icon;
+  }
+  get position() {
+    return this.state.position ?? this.config.position;
+  }
+  get size() {
+    const stateSize = this.state.size || {};
+    const configSize = this.config.size || {};
+    return {
+      width: stateSize.width !== void 0 ? stateSize.width : configSize.width,
+      height: stateSize.height !== void 0 ? stateSize.height : configSize.height,
+      minWidth: stateSize.minWidth !== void 0 ? stateSize.minWidth : configSize.minWidth,
+      maxWidth: stateSize.maxWidth !== void 0 ? stateSize.maxWidth : configSize.maxWidth,
+      minHeight: stateSize.minHeight !== void 0 ? stateSize.minHeight : configSize.minHeight,
+      maxHeight: stateSize.maxHeight !== void 0 ? stateSize.maxHeight : configSize.maxHeight
+    };
+  }
+  setSize(data) {
+    if (!this.state.size) {
+      this.state.size = { width: void 0, height: void 0 };
+    }
+    this.state.size.width = Math.round(data.width);
+    this.state.size.height = Math.round(data.height);
+  }
+  get isMinimizable() {
+    return this.config.overridable?.minimizable ? !!this.state.minimizable : !!this.config.minimizable;
+  }
+  minimize() {
+    if (this.isDisposed || !this.isMinimizable) return false;
+    this.windowActor.send({ type: "MINIMIZE" });
+    return true;
+  }
+  unminimize() {
+    if (this.isDisposed) return false;
+    this.windowActor.send({ type: "RESTORE" });
+    return true;
+  }
+  toggleMinimize() {
+    if (this.isDisposed) return;
+    if (this.windowActor.getSnapshot().matches("minimized")) {
+      this.unminimize();
+      this.focus();
+    } else if (this.state.focused) {
+      this.minimize();
+    } else {
+      this.focus();
+    }
+  }
+  get isMaximizable() {
+    return this.state.maximizable !== void 0 ? !!this.state.maximizable : !!this.config.maximizable;
+  }
+  get isMaximized() {
+    if (this.state.layout === "maximize") return true;
+    return this.config.overridable?.maximized ? !!this.state.maximized : !!this.config.maximized;
+  }
+  parseSizeValue(value, fallback) {
+    if (typeof value === "number") return value;
+    if (typeof value === "string") {
+      const parsed = Number.parseFloat(value);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+    return fallback;
+  }
+  saveBoundsBeforeLayout() {
+    if (this.state.layout && this.state.layout !== "normal") return;
+    const pos = this.position;
+    const size = this.size;
+    this.state.boundsBeforeLayout = {
+      x: pos?.x ?? 0,
+      y: pos?.y ?? 0,
+      width: this.parseSizeValue(size.width, 420),
+      height: this.parseSizeValue(size.height, 320)
+    };
+  }
+  setLayout(layout) {
+    if (this.isDisposed) return false;
+    if (layout === "normal") {
+      this.windowActor.send({ type: "RESTORE" });
+      this.clearLayout();
+      return true;
+    }
+    if (!this.isMaximizable) return false;
+    if (layout === "maximize") {
+      this.windowActor.send({ type: "MAXIMIZE" });
+    } else {
+      this.windowActor.send({ type: "RESTORE" });
+      this.saveBoundsBeforeLayout();
+      this.state.layout = layout;
+    }
+    return true;
+  }
+  clearLayout() {
+    const bounds = this.state.boundsBeforeLayout;
+    if (bounds) {
+      this.setPosition({ x: bounds.x, y: bounds.y });
+      this.setSize({ width: bounds.width, height: bounds.height });
+      delete this.state.boundsBeforeLayout;
+    }
+    this.state.layout = "normal";
+    this.state.maximized = false;
+    return true;
+  }
+  toggleMaximize() {
+    if (this.isDisposed || !this.isMaximizable) return false;
+    if (this.isMaximized) {
+      this.windowActor.send({ type: "RESTORE" });
+    } else {
+      this.windowActor.send({ type: "MAXIMIZE" });
+    }
+    return true;
+  }
+  maximize() {
+    if (this.isDisposed || !this.isMaximizable) return false;
+    this.windowActor.send({ type: "MAXIMIZE" });
+    return true;
+  }
+  unmaximize() {
+    if (this.isDisposed || !this.isMaximizable) return false;
+    this.windowActor.send({ type: "RESTORE" });
+    return true;
+  }
+  get isDestroyable() {
+    return this.config.overridable?.destroyable ? !!this.state.destroyable : !!this.config.destroyable;
+  }
+  dispose() {
+    if (this.isDisposed) return;
+    this.isDisposed = true;
+    try {
+      this.windowActor.stop();
+    } catch {
+    }
+  }
+  destroy() {
+    if (!this.isDestroyable) return false;
+    if (!this.isDisposed) {
+      this.windowActor.send({ type: "DESTROY" });
+    }
+    this.application?.closeWindow?.(this.state.id);
+    return true;
+  }
+  get isDraggable() {
+    return this.config.overridable?.draggable ? !!this.state.draggable : !!this.config.draggable;
+  }
+  get isResizable() {
+    return this.config.overridable?.resizable ? !!this.state.resizable : !!this.config.resizable;
+  }
+  setWorkspace(workspaceId) {
+    this.state.workspace = workspaceId;
+  }
+  startDrag() {
+    if (!this.isDisposed) {
+      IframeGuard.enable();
+      this.windowActor.send({ type: "DRAG_START" });
+    }
+  }
+  stopDrag() {
+    if (!this.isDisposed) {
+      IframeGuard.disable();
+      this.windowActor.send({ type: "DRAG_END" });
+    }
+  }
+  startResize() {
+    if (!this.isDisposed) {
+      IframeGuard.enable();
+      this.windowActor.send({ type: "RESIZE_START" });
+    }
+  }
+  stopResize() {
+    if (!this.isDisposed) {
+      IframeGuard.disable();
+      this.windowActor.send({ type: "RESIZE_END" });
+    }
+  }
+  setTitleOverride(value) {
+    this.override.title = value;
+  }
+  resetTitleOverride() {
+    this.override.title = void 0;
+  }
+  setWindowTitleOverride(value) {
+    this.override.windowTitle = value;
+  }
+  resetWindowTitleOverride() {
+    this.override.windowTitle = void 0;
+  }
+  menu = [];
+  setMenu(menu) {
+    this.menu = menu;
+  }
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@owdproject/nuxt",
+    configKey: "desktop",
+    compatibility: {
+      nuxt: ">=3.0.0 || >=4.0.0"
+    }
+  },
+  defaults: {
+    theme: void 0,
+    apps: [],
+    modules: []
+  },
+  async setup(options, _nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const require = createRequire(import.meta.url);
+    await installModule(require.resolve("@pinia/nuxt"));
+    await installModule(require.resolve("@nuxt/fonts"));
+    await installModule(require.resolve("@nuxt/icon"), {
+      clientBundle: {
+        scan: true,
+        sizeLimitKb: 256
+      }
+    });
+    await installModule(require.resolve("@vueuse/nuxt"));
+    await installModule(require.resolve("@nuxtjs/i18n"));
+    const kitExt = existsSync(resolve("./kit/authoring.js")) ? ".js" : existsSync(resolve("./kit/authoring.ts")) ? ".ts" : "";
+    _nuxt.options.alias["@owdproject/nuxt/kit/defineDesktopApp"] = resolve(`./kit/defineDesktopApp${kitExt}`);
+    _nuxt.options.alias["@owdproject/nuxt/kit/defineDesktopPlugin"] = resolve(`./kit/defineDesktopPlugin${kitExt}`);
+    _nuxt.options.alias["@owdproject/nuxt/kit/defineDesktopTheme"] = resolve(`./kit/authoring${kitExt}`);
+    _nuxt.options.alias["@owdproject/nuxt/kit/defineDesktopConfig"] = resolve(`./kit/authoring${kitExt}`);
+    _nuxt.options.alias["@owdproject/nuxt/kit"] = resolve(`./kit/authoring${kitExt}`);
+    _nuxt.options.alias["@owdproject/nuxt/runtime"] = resolve("./runtime");
+    _nuxt.options.alias["@owdproject/nuxt"] = resolve("./module");
+    _nuxt.options.experimental = {
+      ..._nuxt.options.experimental,
+      viteEnvironmentApi: _nuxt.options.experimental?.viteEnvironmentApi ?? true
+    };
+    _nuxt.options.runtimeConfig.public.desktop = {};
+    let clientConfig = {
+      theme: void 0,
+      apps: [],
+      modules: []
+    };
+    const resolvedConfig = resolveDesktopConfigPath(_nuxt.options.rootDir);
+    if (resolvedConfig) {
+      warnLegacyDesktopConfig(resolvedConfig);
+      _nuxt.options.watch ??= [];
+      _nuxt.options.watch.push(resolvedConfig.path);
+      try {
+        clientConfig = (await import(resolvedConfig.path)).default;
+      } catch (e) {
+        const hint = "Export default defineDesktopConfig({ theme, apps, modules }) from desktop.config.ts.";
+        throw new Error(
+          `[@owdproject/nuxt] Cannot load ${resolvedConfig.file}. ${hint}`,
+          { cause: e }
+        );
+      }
+      assertValidDesktopUserConfig(clientConfig, resolvedConfig.file);
+      const configRecord = clientConfig;
+      warnDesktopConfigKeys(configRecord, resolvedConfig.file);
+    }
+    const desktop = mergeDesktopConfig(options, clientConfig, pkg.version);
+    _nuxt.options.runtimeConfig.public.desktop = desktop;
+    {
+      if (desktop.theme) {
+        try {
+          await installDesktopPackage(_nuxt, desktop.theme, desktop);
+        } catch (e) {
+          const msg = e instanceof Error ? e.message : String(e);
+          throw new Error(`[@owdproject/nuxt] Could not load theme "${desktop.theme}". Details: ${msg}`);
+        }
+      }
+      if (Array.isArray(desktop.modules)) {
+        for (const modulePath of desktop.modules) {
+          try {
+            await installDesktopPackage(_nuxt, modulePath, desktop);
+          } catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            throw new Error(`[@owdproject/nuxt] Could not load module "${modulePath}". Details: ${msg}`);
+          }
+        }
+      }
+      if (Array.isArray(desktop.apps)) {
+        for (const appPath of desktop.apps) {
+          try {
+            await installDesktopPackage(_nuxt, appPath, desktop);
+          } catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            throw new Error(`[@owdproject/nuxt] Could not load app "${appPath}". Details: ${msg}`);
+          }
+        }
+      }
+    }
+    _nuxt.options.appConfig.desktop = _nuxt.options.runtimeConfig.public.desktop;
+    {
+      _nuxt.hook("vite:extendConfig", (viteConfig) => {
+        viteConfig.css = viteConfig.css || {};
+        viteConfig.css.preprocessorOptions = viteConfig.css.preprocessorOptions || {};
+        viteConfig.css.preprocessorOptions.scss = {
+          api: "modern-compiler"
+        };
+      });
+    }
+    {
+      try {
+        _nuxt.options.css.push(require.resolve("sanitize.css"));
+      } catch {
+        _nuxt.options.css.push("sanitize.css");
+      }
+    }
+    {
+      addComponentsDir({
+        path: resolve("./runtime/components"),
+        prefix: "Desktop",
+        pathPrefix: false,
+        global: true
+      });
+    }
+    {
+      addPlugin(
+        resolve("./runtime/plugins/01.desktop-shell-init.client")
+      );
+      addPlugin(
+        resolve("./runtime/plugins/02.desktop-register-desktop-apps.client")
+      );
+      addImportsDir(resolve("./runtime/composables"));
+      addImportsDir(resolve("./runtime/stores"));
+      addImportsDir(resolve("./runtime/utils"));
+      addImportsDir(resolve("./runtime/constants"));
+    }
+  }
+});
+
+export { WindowController, module$1 as default, useDesktop, useDesktopDrag, useDesktopResize, useVueWindowManager, useWindowInstance, useWindowManager };

package/dist/runtime/components/Application/DesktopCoreApplicationRender.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    workspaceFilter?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Application/DesktopCoreApplicationRender.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { useDesktop } from "../../composables/useDesktop";
+defineProps({
+  workspaceFilter: { type: String, required: false }
+});
+const { applications } = useDesktop();
+const runningApps = applications.running;
+</script>
+
+<template>
+  <DesktopCoreApplicationWindowsRender
+    v-for="app of runningApps"
+    :key="app.id"
+    :workspace-filter="workspaceFilter"
+    :windows="app.windowsOpened"
+    :window-revision="app.openWindowCount.value"
+  />
+</template>