@owdproject/core 3.1.4 → 3.3.0

package/runtime/components/{Core/Window/CoreWindow.vue → Desktop/Window/DesktopWindow.vue}

@@ -2,14 +2,16 @@
 import { ref, provide } from 'vue'
 import { computed } from '@vue/reactivity'
 import { useAppConfig } from 'nuxt/app'
-import { useDesktopManager } from '@owdproject/core/runtime/composables/useDesktopManager'
 import { handleWindowControllerProps } from '@owdproject/core/runtime/utils/utilWindow'
+import { useDesktopWorkspaceStore } from '../../../stores/storeDesktopWorkspace'
 
 const props = defineProps<{
   window?: IWindowController
   content?: WindowContent
 }>()
 
+const desktopWorkspaceStore = useDesktopWorkspaceStore()
+
 const emit = defineEmits([
   'resize:start',
   'resize:move',
@@ -29,7 +31,6 @@ const emit = defineEmits([
 ])
 
 const appConfig = useAppConfig()
-const desktopManager = useDesktopManager() // used in <style v-bind>
 const windowController: IWindowController = handleWindowControllerProps(
   props.window,
 )
@@ -117,6 +118,36 @@ const classes = computed(() => {
 
   return list
 })
+
+/** While workspace overview is open, disable vue-resizable chrome drag and use native HTML5 drag to move windows between desktops. */
+const workspaceChromeDragSelector = computed(() => {
+  if (desktopWorkspaceStore.overview) {
+    return '.owd-window-overview-drag-none'
+  }
+  return windowController?.isDraggable
+    ? '.owd-window-nav__draggable'
+    : '.owd-window-nav__draggable-none'
+})
+
+function onOverviewNativeDragStart(e: DragEvent) {
+  if (!desktopWorkspaceStore.overview || !windowController) return
+  e.stopPropagation()
+  e.dataTransfer?.setData('text/plain', windowController.state.id)
+  e.dataTransfer!.effectAllowed = 'move'
+  try {
+    const img = new Image()
+    img.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+    e.dataTransfer?.setDragImage(img, 0, 0)
+  } catch {
+    /* noop */
+  }
+}
+
+/** `fit-parent` clamps drag/resize to the parent box — wrong for viewport-fixed shells (Win11, GNOME). */
+const shouldFitParent = computed(
+  () => appConfig.desktop.windows.position !== 'fixed',
+)
 </script>
 
 <template>
@@ -132,7 +163,7 @@ const classes = computed(() => {
     :left="windowController?.position?.x"
     :top="windowController?.position?.y"
     :active="windowController?.isResizable ? undefined : []"
-    fit-parent
+    :fit-parent="shouldFitParent"
     @drag:start="onWindowDragStart"
     @drag:move="onWindowDragMove"
     @drag:end="onWindowDragEnd"
@@ -140,18 +171,21 @@ const classes = computed(() => {
     @resize:move="onWindowResizeMove"
     @resize:end="onWindowResizeEnd"
     :style="{ zIndex: windowController?.position?.z }"
-    :drag-selector="
-      windowController?.isDraggable
-        ? '.owd-window-nav__draggable'
-        : '.owd-window-nav__draggable-none'
-    "
+    :drag-selector="workspaceChromeDragSelector"
+    :draggable="desktopWorkspaceStore.overview"
     @pointerdown="onWindowPointerDown"
+    @dragstart="onOverviewNativeDragStart"
   >
     <slot />
   </vue-resizable>
 </template>
 
 <style scoped lang="scss">
+/* vue-resizable sets `.resizable-component { position: relative }` — override so desktop geometry stays consistent */
+.owd-window.resizable-component {
+  position: v-bind('appConfig.desktop.windows.position') !important;
+}
+
 .owd-window {
   position: v-bind('appConfig.desktop.windows.position');
 

package/runtime/components/{Core/Window/CoreWindowNav.vue → Desktop/Window/DesktopWindowNav.vue}

@@ -14,10 +14,7 @@ const classes = computed(() => {
     list.push('owd-window-nav--active')
   }
 
-  if (
-    typeof windowController?.state.focused === 'undefined' ||
-    !!windowController?.state.focused
-  ) {
+  if (windowController?.state.focused) {
     list.push('owd-window-nav--focused')
   }
 
@@ -34,15 +31,36 @@ const classes = computed(() => {
 </template>
 
 <style lang="scss">
+/**
+ * Title/icon sit above the drag layer in DOM order; use pointer-events so
+ * mousedown reaches `.owd-window-nav__draggable` for vue-resizable. Window
+ * controls stay clickable.
+ */
 .owd-window-nav {
   position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: 0;
 
   &__draggable {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
+    inset: 0;
+    z-index: 1;
+  }
+
+  > :not(.owd-window-nav__draggable) {
+    position: relative;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  > .owd-window-nav__btn-group {
+    pointer-events: auto;
+  }
+
+  > .owd-window-nav__interactive {
+    pointer-events: auto;
   }
 }
 </style>

package/runtime/composables/useApplicationManager.ts

@@ -1,5 +1,5 @@
 import { reactive, markRaw, computed } from 'vue'
-import { ApplicationController } from '../core/controllers/ApplicationController'
+import { ApplicationController } from '../internal/controllers/ApplicationController'
 import { normalizeApplicationConfig } from '../utils/utilApp'
 import { debugLog } from '../utils/utilDebug'
 import * as shellwords from 'shellwords'
@@ -29,7 +29,7 @@ export function useApplicationManager() {
     const applicationController: IApplicationController = new ApplicationController(id, applicationConfig)
     await applicationController.initApplication()
 
-    apps.set(id, applicationController)
+    apps.set(id, markRaw(applicationController))
 
     return applicationController
   }
@@ -184,11 +184,18 @@ export function useApplicationManager() {
    * Array of opened windows for system bars, docks
    */
   const windowsOpened = computed(() => {
-    const windows: Map<string, IWindowController>[] = []
+    const windows = new Map<string, IWindowController>()
 
     for (const applicationController of apps.values()) {
-      if (applicationController.isRunning) {
-        windows.push(...applicationController.windows)
+      if (
+        !applicationController.isRunning &&
+        applicationController.openWindowCount.value === 0
+      ) {
+        continue
+      }
+
+      for (const [windowId, window] of applicationController.windows) {
+        windows.set(windowId, window)
       }
     }
 
@@ -202,7 +209,8 @@ export function useApplicationManager() {
     const runningApps: IApplicationController[] = []
 
     for (const applicationController of apps.values()) {
-      if (applicationController.isRunning) {
+      const openCount = applicationController.openWindowCount.value
+      if (applicationController.isRunning || openCount > 0) {
         runningApps.push(applicationController)
       }
     }
@@ -211,13 +219,10 @@ export function useApplicationManager() {
   })
 
   function getWindowOpenedId(windowId: string) {
-    const mapWindowFound = windowsOpened.value.find((window: any) => {
-      return window[1].state.id === windowId
-    })
-
-    if (mapWindowFound) {
-      // @ts-ignore
-      return mapWindowFound[1] as IWindowController
+    for (const window of windowsOpened.value.values()) {
+      if (window.state.id === windowId) {
+        return window
+      }
     }
   }
 
@@ -262,7 +267,6 @@ export function useApplicationManager() {
   })
 
   return {
-    apps,
     defineApp,
     isAppDefined,
     getAppById,
@@ -271,6 +275,7 @@ export function useApplicationManager() {
     execAppCommand,
     closeApp,
     getWindowOpenedId,
+    apps,
     appsEntries,
     appsRunning,
     windowsOpened,

package/runtime/composables/useDesktopManager.ts

@@ -1,25 +1,49 @@
-import { deepMerge } from '../utils/utilCommon'
+import { computed } from 'vue'
 import { useAppConfig } from 'nuxt/app'
+import { defu } from 'defu'
+import { useDesktopStore } from '../stores/storeDesktop'
+import { useDesktopDefaultAppsStore } from '../stores/storeDesktopDefaultApps'
 
 /**
- * Desktop Manager Composable (Singleton)
+ * Desktop Manager composable (singleton pattern via Pinia + app config).
+ * Agnostic of any theme: merges runtime shell config and exposes default-app routing.
  */
 export function useDesktopManager() {
+  const appConfig = useAppConfig()
+  const desktopStore = useDesktopStore()
+  const defaultAppsStore = useDesktopDefaultAppsStore()
+
   /**
-   * Merges and sets the desktop config at runtime
-   *
-   * @param newConfig
+   * Merges and sets the desktop config at runtime (shell geometry, feature flags, etc.).
    */
   function setConfig(newConfig: DesktopConfig) {
-    const appConfig = useAppConfig()
-
-    appConfig.desktop = deepMerge(
-      appConfig.desktop,
+    appConfig.desktop = defu(
       newConfig,
+      (appConfig.desktop ?? {}) as DesktopConfig,
     ) as DesktopConfig
   }
 
+  /** Map of feature name → default app handler (e.g. terminal, browser). */
+  const defaultApps = computed(
+    () => desktopStore.state.defaultApps,
+  )
+
+  function getDefaultApp(feature: string) {
+    return defaultAppsStore.getDefaultApp(feature)
+  }
+
+  function setDefaultApp(
+    feature: string,
+    application: IApplicationController,
+    entry: string,
+  ) {
+    defaultAppsStore.setDefaultApp(feature, application, entry)
+  }
+
   return {
     setConfig,
+    defaultApps,
+    getDefaultApp,
+    setDefaultApp,
   }
 }

package/runtime/composables/useWorkspaceManager.ts

@@ -0,0 +1,41 @@
+import { useEventListener } from '@vueuse/core'
+import { useApplicationManager } from './useApplicationManager'
+import { useDesktopWorkspaceStore } from '../stores/storeDesktopWorkspace'
+
+/**
+ * Keyboard + HTML5 drop handlers for workspace management (move windows between desktops).
+ */
+export function useWorkspaceManager() {
+  const applicationManager = useApplicationManager()
+  const desktopWorkspaceStore = useDesktopWorkspaceStore()
+
+  useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') return
+    if (!desktopWorkspaceStore.overview) return
+    desktopWorkspaceStore.setOverview(false)
+  })
+
+  function onWorkspaceDragOver(e: DragEvent) {
+    if (!desktopWorkspaceStore.overview) return
+    e.preventDefault()
+  }
+
+  function onWorkspaceDrop(e: DragEvent, workspaceId: string) {
+    e.preventDefault()
+    if (!desktopWorkspaceStore.overview) return
+
+    const raw =
+      e.dataTransfer?.getData('text/plain') ||
+      e.dataTransfer?.getData('text') ||
+      ''
+    if (!raw) return
+
+    const win = applicationManager.getWindowOpenedId(raw)
+    win?.actions.setWorkspace(workspaceId)
+  }
+
+  return {
+    onWorkspaceDragOver,
+    onWorkspaceDrop,
+  }
+}

package/runtime/{core → internal}/controllers/ApplicationController.ts

@@ -7,7 +7,9 @@ import { useTerminalManager } from '../../composables/useTerminalManager'
 import { debugLog, debugError } from '../../utils/utilDebug'
 import { useDesktopDefaultAppsStore } from '../../stores/storeDesktopDefaultApps'
 import { useDesktopWorkspaceStore } from '../../stores/storeDesktopWorkspace'
-import { reactive } from '@vue/reactivity'
+import { useDesktopWindowStore } from '../../stores/storeDesktopWindow'
+import { shallowRef } from 'vue'
+import { unref } from 'vue'
 
 export class ApplicationController implements IApplicationController {
   private readonly applicationManager: IApplicationManager
@@ -16,9 +18,24 @@ export class ApplicationController implements IApplicationController {
   public readonly id
   public readonly config
   public readonly storeWindows
-  public readonly storeMeta
 
-  public windows = reactive(new Map<string, IWindowController>())
+  private readonly _windows = shallowRef(new Map<string, IWindowController>())
+
+  /** Reactive window count for Vue (class getters are not tracked). */
+  public readonly openWindowCount = shallowRef(0)
+
+  get windows(): Map<string, IWindowController> {
+    return this._windows.value
+  }
+
+  private replaceWindows(
+    mutator: (next: Map<string, IWindowController>) => void,
+  ) {
+    const next = new Map(this._windows.value)
+    mutator(next)
+    this._windows.value = next
+    this.openWindowCount.value = next.size
+  }
 
   public isRunning = false
 
@@ -29,7 +46,11 @@ export class ApplicationController implements IApplicationController {
     this.id = id
     this.config = config
     this.storeWindows = useApplicationWindowsStore(id)
-    this.storeMeta = useApplicationMetaStore(id)
+  }
+
+  /** Lazy meta store — app modules should register state via `useApplicationMetaStore` before `defineDesktopApp`. */
+  get storeMeta() {
+    return useApplicationMetaStore(this.id)()
   }
 
   public async initApplication(): Promise<void> {
@@ -127,9 +148,32 @@ export class ApplicationController implements IApplicationController {
       }
     })
 
+    this.normalizeWindowFocus()
+
     debugLog('Windows have been restored', this.windows)
   }
 
+  /** Ensure a single focused window after restore or stale persisted state. */
+  private normalizeWindowFocus() {
+    if (this.windows.size === 0) {
+      return
+    }
+
+    let topWindow: IWindowController | undefined
+    let topZ = -Infinity
+
+    for (const window of this.windows.values()) {
+      window.setFocus(false)
+      const z = window.state.position?.z ?? 0
+      if (z >= topZ) {
+        topZ = z
+        topWindow = window
+      }
+    }
+
+    topWindow?.setFocus(true)
+  }
+
   public openWindow(
     model: string,
     windowStoredState: WindowStoredState | undefined,
@@ -142,6 +186,20 @@ export class ApplicationController implements IApplicationController {
       return
     }
 
+    if (!windowStoredState && this.config.singleton) {
+      const existing = this.getFirstWindowByModel(model)
+      if (existing) {
+        if (meta && typeof meta === 'object') {
+          Object.assign(existing.meta, meta)
+        }
+        if (!meta?.isRestoring) {
+          existing.actions.setActive(true)
+          existing.actions.bringToFront()
+        }
+        return existing
+      }
+    }
+
     let windowId: string
 
     if (!windowStoredState) {
@@ -151,32 +209,54 @@ export class ApplicationController implements IApplicationController {
         model
       ] as WindowConfig
       const screenHeight = window.innerHeight
-      const centerY = (screenHeight - Number(windowConfig.size.height)) / 2
+      const configHeight = windowConfig.size?.height
+      const layoutHeight =
+        typeof configHeight === 'number'
+          ? configHeight
+          : typeof configHeight === 'string' && /^\d+$/.test(configHeight)
+            ? Number(configHeight)
+            : 240
+      const centerY = (screenHeight - layoutHeight) / 2
       const positionY =
         windowConfig.position?.y !== undefined
           ? window.scrollY + windowConfig.position.y
           : window.scrollY + centerY
-
-      this.storeWindows.windows[windowId] = {
-        model,
-        state: {
-          id: windowId,
-          active: true,
-          focused: false,
-          position: {
-            x: windowConfig.position?.x,
-            y: positionY,
+      const cascadeStep = 40
+      const cascadeOffset = this.getWindowsByModel(model).length * cascadeStep
+      const baseX = windowConfig.position?.x ?? 100
+      const desktopWindowStore = useDesktopWindowStore()
+      const initialZ = desktopWindowStore.incrementPositionZ()
+
+      const nextWindows = {
+        ...this.storeWindows.windows,
+        [windowId]: {
+          model,
+          state: {
+            id: windowId,
+            active: true,
+            focused: false,
+            position: {
+              x: baseX + cascadeOffset,
+              y: positionY + cascadeOffset,
+              z: initialZ,
+            },
+            createdAt: +new Date(),
+            workspace: desktopWorkspaceStore.resolveActiveWorkspaceId(),
           },
-          createdAt: +new Date(),
-          workspace: desktopWorkspaceStore.active,
+          meta,
         },
-        meta,
       }
+      this.storeWindows.windows = nextWindows
 
       windowStoredState = this.storeWindows.windows[windowId]
     } else {
       // restore previous id if state is defined
-      windowId = windowStoredState.state.id
+      windowId =
+        windowStoredState.state?.id ??
+        Object.keys(this.storeWindows.windows).find(
+          (key) => this.storeWindows.windows[key] === windowStoredState,
+        ) ??
+        `${model}-restored`
     }
 
     const windowConfig = this.config.windows[model] as WindowConfig
@@ -192,7 +272,9 @@ export class ApplicationController implements IApplicationController {
       windowController.actions.bringToFront()
     }
 
-    this.windows.set(windowId, windowController)
+    this.replaceWindows((next) => {
+      next.set(windowId, windowController)
+    })
 
     this.setRunning(true)
 
@@ -200,17 +282,25 @@ export class ApplicationController implements IApplicationController {
   }
 
   public closeWindow(windowId: string) {
-    delete this.storeWindows.windows[windowId]
-    this.windows.delete(windowId)
+    if (this.storeWindows.windows[windowId]) {
+      const nextWindows = { ...this.storeWindows.windows }
+      delete nextWindows[windowId]
+      this.storeWindows.windows = nextWindows
+    }
 
-    if (this.windows.size === 0) {
+    this.replaceWindows((next) => {
+      next.delete(windowId)
+    })
+
+    if (this.openWindowCount.value === 0) {
       this.applicationManager.closeApp(this.id)
     }
   }
 
   public closeAllWindows() {
     this.storeWindows.windows = {}
-    this.windows.clear()
+    this._windows.value = new Map()
+    this.openWindowCount.value = 0
   }
 
   get windowsOpened() {

package/runtime/{core → internal}/controllers/WindowController.ts

@@ -202,18 +202,13 @@ export class WindowController implements IWindowController {
       this.state.position = { x: 0, y: 0, z: 0 }
     }
 
-    // already focused
-    if (this.state.focused) {
-      return
-    }
-
-    // set focus false on all other windows
-    for (const [windowId, window] of applicationManager.windowsOpened.value) {
-      window.actions.setFocus(false)
+    for (const window of applicationManager.windowsOpened.value.values()) {
+      if (window !== this) {
+        window.setFocus(false)
+      }
     }
 
     this.setFocus(true)
-
     this.state.position.z = desktopWindowStore.incrementPositionZ()
   }
 

package/runtime/plugins/02.desktop-register-desktop-apps.client.ts

@@ -0,0 +1,17 @@
+import { setActivePinia } from 'pinia'
+import { defineNuxtPlugin } from 'nuxt/app'
+import { flushPendingDesktopApps } from '../utils/utilDesktop'
+
+export default defineNuxtPlugin({
+  name: 'desktop-register-desktop-apps',
+  dependsOn: ['pinia'],
+  enforce: 'post',
+  setup(nuxtApp) {
+    nuxtApp.hook('app:created', async () => {
+      if (nuxtApp.$pinia) {
+        setActivePinia(nuxtApp.$pinia)
+      }
+      await flushPendingDesktopApps()
+    })
+  },
+})

package/runtime/stores/storeApplicationMeta.ts

@@ -1,15 +1,59 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-export const useApplicationMetaStore = (appId: string, states: any = {}) => {
-  return defineStore(
-    `owd/application/${appId}/meta`,
-    () => {
-      return states
-    },
-    {
-      persistedState: {
-        persist: true,
-      },
-    },
-  )
+const metaStoreRegistry = new Map<string, ReturnType<typeof defineStore>>()
+/** Store ids created by the generic fallback (only `meta`), replaceable when an app registers real state. */
+const fallbackMetaStoreIds = new Set<string>()
+
+type MetaStoreSetup = (() => Record<string, unknown>) | Record<string, unknown>
+
+function resolveSetup(states: MetaStoreSetup) {
+  return typeof states === 'function' ? states : () => states
+}
+
+/**
+ * Per-app Pinia meta store factory. The first registration for an app id wins so
+ * app modules should call this from their store module (imported in the app plugin
+ * before `defineDesktopApp`).
+ */
+export const useApplicationMetaStore = (
+  appId: string,
+  states?: MetaStoreSetup,
+) => {
+  const id = `owd/application/${appId}/meta`
+
+  if (
+    states !== undefined &&
+    (!metaStoreRegistry.has(id) || fallbackMetaStoreIds.has(id))
+  ) {
+    fallbackMetaStoreIds.delete(id)
+    metaStoreRegistry.set(
+      id,
+      defineStore(id, resolveSetup(states), {
+        persistedState: {
+          persist: true,
+        },
+      }),
+    )
+  }
+
+  if (!metaStoreRegistry.has(id)) {
+    fallbackMetaStoreIds.add(id)
+    metaStoreRegistry.set(
+      id,
+      defineStore(
+        id,
+        () => ({
+          meta: ref<Record<string, unknown>>({}),
+        }),
+        {
+          persistedState: {
+            persist: true,
+          },
+        },
+      ),
+    )
+  }
+
+  return metaStoreRegistry.get(id)!
 }