@owdproject/core 3.1.4-beta.0 → 3.2.0

package/runtime/components/Core/Window/CoreWindow.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { ref, provide } from 'vue'
 import { computed } from '@vue/reactivity'
-import { useDesktopManager } from '@owdproject/core/runtime/composables/useDesktopManager'
+import { useAppConfig } from 'nuxt/app'
 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',
@@ -27,7 +30,7 @@ const emit = defineEmits([
   'toggle-maximize',
 ])
 
-const desktopManager = useDesktopManager() // used in <style v-bind>
+const appConfig = useAppConfig()
 const windowController: IWindowController = handleWindowControllerProps(
   props.window,
 )
@@ -115,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>
@@ -130,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"
@@ -138,20 +171,23 @@ 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('desktopManager.config.windows.position');
+  position: v-bind('appConfig.desktop.windows.position');
 
   &--dragging,
   &--resizing {

package/runtime/components/Core/Window/CoreWindowNav.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/useApplicationEntries.ts

@@ -21,7 +21,7 @@ export function useApplicationEntries() {
     visibility: Visibility = 'primary',
   ): Ref<ApplicationEntryWithInherited[]> {
     return computed(() => {
-      const currentEntries = [...applicationManager.appsEntries]
+      const currentEntries = [...applicationManager.appsEntries.value]
 
       // filtering
       const filtered =

package/runtime/composables/useApplicationManager.ts

@@ -1,7 +1,285 @@
-import { ApplicationManager } from '../core/managers/ApplicationManager'
+import { reactive, markRaw, computed } from 'vue'
+import { ApplicationController } from '../core/controllers/ApplicationController'
+import { normalizeApplicationConfig } from '../utils/utilApp'
+import { debugLog } from '../utils/utilDebug'
+import * as shellwords from 'shellwords'
+import getopts from "getopts"
 
-const applicationManager = new ApplicationManager()
+const apps = reactive(new Map<string, IApplicationController>())
 
-export function useApplicationManager(): IApplicationManager {
-  return applicationManager
+/**
+ * Application Manager Composable (Singleton)
+ */
+export function useApplicationManager() {
+  /**
+   * Define new application
+   *
+   * @param id
+   * @param config
+   */
+  async function defineApp(id: string, config: ApplicationConfig) {
+    if (isAppDefined(id)) {
+      debugLog(`App "${id}" is already defined`)
+      return getAppById(id)!
+    }
+
+    const normalizedConfig = normalizeApplicationConfig(config)
+    const applicationConfig = markRaw(normalizedConfig)
+
+    const applicationController: IApplicationController = new ApplicationController(id, applicationConfig)
+    await applicationController.initApplication()
+
+    apps.set(id, markRaw(applicationController))
+
+    return applicationController
+  }
+
+  /**
+   * Check if app has been defined
+   *
+   * @param {string} id
+   */
+  function isAppDefined(id: string) {
+    return getAppById(id)
+  }
+
+  /**
+   * Retrieves an app instance by its unique identifier
+   *
+   * @param {string} id
+   */
+  function getAppById(id: string) {
+    return apps.get(id)
+  }
+
+  /**
+   * Check if app is running
+   *
+   * @param {string} id
+   */
+  function isAppRunning(id: string) {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+    return applicationController.isRunning
+  }
+
+  /**
+   * Launch app entry
+   *
+   * @param id
+   * @param entryKey
+   * @param argument
+   */
+  async function launchAppEntry(
+    id: string,
+    entryKey: string,
+    argument: string = ''
+  ): Promise<IApplicationController | undefined | void> {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+
+    if (
+      applicationController.config.entries &&
+      !applicationController.config.entries.hasOwnProperty(entryKey)
+    ) {
+      throw Error(`App entry "${entryKey}" is not defined in ${id} application`)
+    }
+
+    const entry: ApplicationEntry = applicationController.config.entries[entryKey]!
+
+    if (argument) argument = ` ${argument}`
+
+    await execAppCommand(applicationController.id, entry.command + argument)
+  }
+
+  /**
+   * Run app command
+   *
+   * @param id
+   * @param rawCommand
+   */
+  async function execAppCommand(
+    id: string,
+    rawCommand: string,
+  ): Promise<CommandOutput> {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+
+    const args = shellwords.split(rawCommand)
+    const parsed = getopts(args)
+    const command: string = parsed._[0]
+
+    if (
+      applicationController.config.commands &&
+      !applicationController.config.commands.hasOwnProperty(command)
+    ) {
+      throw Error(
+        `App command "${command}" is not defined in ${id} application`,
+      )
+    }
+
+    const commandFn: any = applicationController.config.commands![command]
+
+    const commandOutput = await commandFn(applicationController, parsed)
+
+    applicationController.setRunning(true)
+
+    return commandOutput
+  }
+
+  /**
+   * Close application
+   *
+   * @param id
+   */
+  function closeApp(id: string) {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+
+    applicationController.closeAllWindows()
+    applicationController.setRunning(false)
+  }
+
+  /**
+   * Array of available menu entries for system bars, docks
+   */
+  const appsEntries = computed(() => {
+    const entries: ApplicationEntryWithInherited[] = []
+
+    for (const applicationController of apps.values()) {
+      if (!applicationController.config.entries) {
+        continue
+      }
+
+      for (const entryKey of Object.keys(applicationController.config.entries)) {
+        const entry = applicationController.config.entries[entryKey]!
+
+        entries.push({
+          application: applicationController,
+          title: entry.title ?? applicationController.config.title,
+          icon: entry.icon ?? applicationController.config.icon,
+          category: entry.category ?? applicationController.config.category,
+          visibility: entry.visibility ?? 'primary',
+          command: entry.command,
+        })
+      }
+    }
+
+    return entries
+  })
+
+  /**
+   * Array of opened windows for system bars, docks
+   */
+  const windowsOpened = computed(() => {
+    const windows = new Map<string, IWindowController>()
+
+    for (const applicationController of apps.values()) {
+      if (
+        !applicationController.isRunning &&
+        applicationController.openWindowCount.value === 0
+      ) {
+        continue
+      }
+
+      for (const [windowId, window] of applicationController.windows) {
+        windows.set(windowId, window)
+      }
+    }
+
+    return windows
+  })
+
+  /**
+   * Array of running applications
+   */
+  const appsRunning = computed(() => {
+    const runningApps: IApplicationController[] = []
+
+    for (const applicationController of apps.values()) {
+      const openCount = applicationController.openWindowCount.value
+      if (applicationController.isRunning || openCount > 0) {
+        runningApps.push(applicationController)
+      }
+    }
+
+    return runningApps
+  })
+
+  function getWindowOpenedId(windowId: string) {
+    for (const window of windowsOpened.value.values()) {
+      if (window.state.id === windowId) {
+        return window
+      }
+    }
+  }
+
+  /**
+   * Gets all unique categories from the installed apps
+   */
+  const appCategories = computed(() => {
+    const categories = new Set<string>()
+
+    for (const applicationController of apps.values()) {
+      if (applicationController.config.category) {
+        categories.add(applicationController.config.category)
+      }
+    }
+
+    return Array.from(categories).sort()
+  })
+
+  /**
+   * Gets the apps ordered by category
+   */
+  const appsByCategory = computed(() => {
+    const categorizedApps: {
+      [category: string]: IApplicationController[]
+    } = {}
+
+    for (const applicationController of apps.values()) {
+      const category = applicationController.config.category || 'other'
+      if (!categorizedApps[category]) {
+        categorizedApps[category] = []
+      }
+      categorizedApps[category].push(applicationController)
+    }
+
+    for (const category in categorizedApps) {
+      categorizedApps[category].sort((a, b) =>
+        a.config.title.localeCompare(b.config.title),
+      )
+    }
+
+    return categorizedApps
+  })
+
+  return {
+    defineApp,
+    isAppDefined,
+    getAppById,
+    isAppRunning,
+    launchAppEntry,
+    execAppCommand,
+    closeApp,
+    getWindowOpenedId,
+    apps,
+    appsEntries,
+    appsRunning,
+    windowsOpened,
+    appCategories,
+    appsByCategory,
+  }
 }

package/runtime/composables/useDesktopManager.ts

@@ -1,7 +1,49 @@
-import { DesktopManager } from '../core/managers/DesktopManager'
-
-const desktopManager = new DesktopManager()
+import { computed } from 'vue'
+import { useAppConfig } from 'nuxt/app'
+import { deepMerge } from '../utils/utilCommon'
+import { useDesktopStore } from '../stores/storeDesktop'
+import { useDesktopDefaultAppsStore } from '../stores/storeDesktopDefaultApps'
 
+/**
+ * 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() {
-  return desktopManager
+  const appConfig = useAppConfig()
+  const desktopStore = useDesktopStore()
+  const defaultAppsStore = useDesktopDefaultAppsStore()
+
+  /**
+   * Merges and sets the desktop config at runtime (shell geometry, feature flags, etc.).
+   */
+  function setConfig(newConfig: DesktopConfig) {
+    appConfig.desktop = deepMerge(
+      appConfig.desktop,
+      newConfig,
+    ) 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/useOwdDialogs.ts

@@ -0,0 +1,13 @@
+import { inject } from 'vue'
+import {
+  OWD_DIALOG_PROVIDER_KEY,
+  createBrowserFallbackDialogProvider,
+  type OwdDialogProvider,
+} from '../dialogs/owdDialogProvider'
+
+/**
+ * Returns the active desktop dialog provider (theme) or a documented browser fallback.
+ */
+export function useOwdDialogs(): OwdDialogProvider {
+  return inject(OWD_DIALOG_PROVIDER_KEY, null) ?? createBrowserFallbackDialogProvider()
+}

package/runtime/composables/useTerminalManager.ts

@@ -1,7 +1,66 @@
-import { TerminalManager } from '../core/managers/TerminalManager'
+import { useApplicationManager } from './useApplicationManager'
+import { debugLog } from '../utils/utilDebug'
 
-const terminalManager = new TerminalManager()
+const commands = new Map<string, TerminalCommand>()
 
+/**
+ * Terminal Manager Composable (Singleton)
+ */
 export function useTerminalManager() {
-  return terminalManager
+  /**
+   * Add a new terminal command
+   *
+   * @param command
+   */
+  const addCommand = (command: TerminalCommand) => {
+    for (const existingCommand of commands.keys()) {
+      if (
+        existingCommand.startsWith(command.name) ||
+        command.name.startsWith(existingCommand)
+      ) {
+        throw new Error(`Command prefix conflict with "${existingCommand}"`)
+      }
+    }
+
+    commands.set(command.name, command)
+    debugLog(`Registered terminal command: ${command.name} → ${command.applicationId}`)
+  }
+
+  /**
+   * List all registered command names
+   */
+  const listCommands = (): string[] => {
+    return Array.from(commands.keys())
+  }
+
+  /**
+   * Execute a terminal command
+   *
+   * @param input
+   */
+  const execCommand = async (input: string): Promise<CommandOutput | void> => {
+    const applicationManager = useApplicationManager()
+
+    const [name, ...args] = input.trim().split(/\s+/)
+
+    if (!name) {
+      return
+    }
+
+    if (!commands.has(name)) {
+      return {
+        message: `Command "${name}" not found`,
+      }
+    }
+
+    const application = commands.get(name)!
+
+    return applicationManager.execAppCommand(application.applicationId, input)
+  }
+
+  return {
+    addCommand,
+    listCommands,
+    execCommand,
+  }
 }

package/runtime/composables/useWorkspaceOverview.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 overview (move windows between desktops).
+ */
+export function useWorkspaceOverview() {
+  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,
+  }
+}