@owdproject/core 3.3.0 → 3.4.0

package/runtime/composables/useWorkspaceOverviewCapture.ts

@@ -0,0 +1,92 @@
+import { useDebounceFn } from '@vueuse/core'
+import { nextTick, ref, shallowRef, watch } from 'vue'
+import { useDesktopWorkspaceStore } from '@owdproject/core/runtime/stores/storeDesktopWorkspace'
+import { captureElementToCanvas } from '../utils/utilCaptureElementToCanvas'
+
+export type WorkspaceRootResolver = (
+  workspaceId: string,
+) => HTMLElement | null | undefined
+
+export type UseWorkspaceOverviewCaptureOptions = {
+  /** Delay before capturing after overview opens (ms). Default 150. */
+  debounceMs?: number
+  /** JPEG quality for thumbnail data URLs (0–1). Default 0.7. */
+  jpegQuality?: number
+  /** Passed through to html2canvas. */
+  captureOptions?: Record<string, unknown>
+}
+
+/**
+ * Captures workspace desktop roots as JPEG data URLs while workspace overview is open.
+ * Themes supply a resolver that maps each workspace id to its DOM root (e.g. a layer wrapping
+ * {@link DesktopApplicationRender} with `workspace-filter`).
+ */
+export function useWorkspaceOverviewCapture(
+  resolveWorkspaceRoot: WorkspaceRootResolver,
+  options: UseWorkspaceOverviewCaptureOptions = {},
+) {
+  const desktopWorkspaceStore = useDesktopWorkspaceStore()
+  const thumbnails = shallowRef(new Map<string, string>())
+  const isCapturing = ref(false)
+
+  const debounceMs = options.debounceMs ?? 150
+  const jpegQuality = options.jpegQuality ?? 0.7
+
+  async function captureWorkspace(workspaceId: string): Promise<string | null> {
+    const element = resolveWorkspaceRoot(workspaceId)
+    const canvas = await captureElementToCanvas(element, options.captureOptions)
+    if (!canvas) return null
+    return canvas.toDataURL('image/jpeg', jpegQuality)
+  }
+
+  async function refreshThumbnails() {
+    if (!desktopWorkspaceStore.overview) return
+
+    isCapturing.value = true
+    const next = new Map<string, string>()
+
+    try {
+      await nextTick()
+      const ids = [...desktopWorkspaceStore.list]
+      await Promise.all(
+        ids.map(async (id) => {
+          const dataUrl = await captureWorkspace(id)
+          if (dataUrl) next.set(id, dataUrl)
+        }),
+      )
+      thumbnails.value = next
+    } finally {
+      isCapturing.value = false
+    }
+  }
+
+  const scheduleRefresh = useDebounceFn(() => {
+    void refreshThumbnails()
+  }, debounceMs)
+
+  watch(
+    () => desktopWorkspaceStore.overview,
+    (open) => {
+      if (open) scheduleRefresh()
+      else thumbnails.value = new Map()
+    },
+  )
+
+  watch(
+    () => desktopWorkspaceStore.list.join('\0'),
+    () => {
+      if (desktopWorkspaceStore.overview) scheduleRefresh()
+    },
+  )
+
+  function thumbnailFor(workspaceId: string): string | undefined {
+    return thumbnails.value.get(workspaceId)
+  }
+
+  return {
+    thumbnails,
+    isCapturing,
+    refreshThumbnails,
+    thumbnailFor,
+  }
+}

package/runtime/composables/useWorkspaceOverviewLiveScale.ts

@@ -0,0 +1,151 @@
+import type { CSSProperties, Ref } from 'vue'
+import {
+  nextTick,
+  onScopeDispose,
+  readonly,
+  shallowRef,
+  watch,
+} from 'vue'
+import { useDesktopWorkspaceStore } from '@owdproject/core/runtime/stores/storeDesktopWorkspace'
+
+export type WorkspaceStageSize = {
+  width: number
+  height: number
+}
+
+export type WorkspaceOverviewLiveScaleOptions = {
+  /** Upper bound for scale (default 1). */
+  maxScale?: number
+}
+
+export type WorkspaceOverviewInnerStyleOptions =
+  WorkspaceOverviewLiveScaleOptions & {
+    transformOrigin?: string
+  }
+
+/**
+ * Fit factor to show a 1:1 shell stage inside a panel viewport without clipping.
+ */
+export function computeScaleToFit(
+  panelWidth: number,
+  panelHeight: number,
+  stageWidth: number,
+  stageHeight: number,
+  options?: WorkspaceOverviewLiveScaleOptions,
+): number {
+  if (
+    panelWidth <= 0 ||
+    panelHeight <= 0 ||
+    stageWidth <= 0 ||
+    stageHeight <= 0
+  ) {
+    return 1
+  }
+
+  const scale = Math.min(panelWidth / stageWidth, panelHeight / stageHeight)
+  const maxScale = options?.maxScale ?? 1
+  return Math.min(scale, maxScale)
+}
+
+/**
+ * Live DOM workspace overview: measure shell stage, scale desktop roots to fit cards.
+ */
+export function useWorkspaceOverviewLiveScale(
+  shellStageRef: Ref<HTMLElement | null | undefined>,
+) {
+  const desktopWorkspaceStore = useDesktopWorkspaceStore()
+  const stageSize = shallowRef<WorkspaceStageSize>({ width: 0, height: 0 })
+
+  let resizeObserver: ResizeObserver | null = null
+
+  function readStageSize() {
+    const el = shellStageRef.value
+    if (!el) {
+      stageSize.value = { width: 0, height: 0 }
+      return
+    }
+    stageSize.value = {
+      width: el.clientWidth,
+      height: el.clientHeight,
+    }
+  }
+
+  function stopObserving() {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+  }
+
+  function startObserving() {
+    stopObserving()
+    const el = shellStageRef.value
+    if (!el || typeof ResizeObserver === 'undefined') return
+
+    readStageSize()
+    resizeObserver = new ResizeObserver(() => readStageSize())
+    resizeObserver.observe(el)
+  }
+
+  watch(
+    () => desktopWorkspaceStore.overview,
+    (open) => {
+      if (open) {
+        void nextTick(() => startObserving())
+      } else {
+        stopObserving()
+        stageSize.value = { width: 0, height: 0 }
+      }
+    },
+  )
+
+  watch(shellStageRef, (el) => {
+    if (desktopWorkspaceStore.overview && el) {
+      void nextTick(() => startObserving())
+    }
+  })
+
+  onScopeDispose(stopObserving)
+
+  function scaleToFit(
+    panelEl: HTMLElement | null | undefined,
+    options?: WorkspaceOverviewLiveScaleOptions,
+  ): number {
+    if (!panelEl) return 1
+    const { width: stageWidth, height: stageHeight } = stageSize.value
+    if (stageWidth <= 0 || stageHeight <= 0) return 1
+
+    return computeScaleToFit(
+      panelEl.clientWidth,
+      panelEl.clientHeight,
+      stageWidth,
+      stageHeight,
+      options,
+    )
+  }
+
+  function innerOverviewStyle(
+    panelEl: HTMLElement | null | undefined,
+    options?: WorkspaceOverviewInnerStyleOptions,
+  ): CSSProperties | undefined {
+    if (!desktopWorkspaceStore.overview) return undefined
+
+    const { width: stageWidth, height: stageHeight } = stageSize.value
+    if (stageWidth <= 0 || stageHeight <= 0) return undefined
+
+    const scale = scaleToFit(panelEl, options)
+    const transformOrigin = options?.transformOrigin ?? 'top left'
+
+    return {
+      width: `${stageWidth}px`,
+      height: `${stageHeight}px`,
+      transform: `scale(${scale})`,
+      transformOrigin,
+    }
+  }
+
+  return {
+    stageSize: readonly(stageSize),
+    scaleToFit,
+    innerOverviewStyle,
+    refreshStageSize: readStageSize,
+  }
+}

package/runtime/constants/desktopShellKeys.ts

@@ -0,0 +1,12 @@
+import type { InjectionKey } from 'vue'
+import type { DesktopDialogProvider } from '../dialogs/desktopDialogProvider'
+
+export type DesktopToggleWindowMaximizeFn = (
+  win: IWindowController | undefined,
+) => boolean
+
+export const DESKTOP_DIALOG_PROVIDER_KEY: InjectionKey<DesktopDialogProvider> =
+  Symbol('desktop-dialog-provider')
+
+export const DESKTOP_TOGGLE_WINDOW_MAXIMIZE_KEY: InjectionKey<DesktopToggleWindowMaximizeFn> =
+  Symbol('desktop-toggle-window-maximize')

package/runtime/constants/shellLayout.ts

@@ -0,0 +1,5 @@
+/** Viewport band (px) where a window drag targets the adjacent workspace. */
+export const WORKSPACE_EDGE_DROP_PX = 72
+
+/** Viewport band (px) where a window drag targets a snap zone. */
+export const WINDOW_SNAP_EDGE_PX = 14

package/runtime/dialogs/desktopDialogProvider.ts

@@ -0,0 +1,73 @@
+/** Options for a yes/no confirmation (theme renders labels and chrome). */
+export interface DesktopConfirmDialogOptions {
+  title?: string
+  message: string
+  danger?: boolean
+  acceptLabel?: string
+  rejectLabel?: string
+  /**
+   * Theme-specific payload (e.g. delete dialog passes `toTrash` for slot templates).
+   */
+  extras?: Record<string, unknown>
+}
+
+/**
+ * Cross-theme dialog API. Themes implement with PrimeVue, native dialogs, etc.
+ * Callers pass user-facing strings (usually from i18n); implementations only render.
+ */
+export interface DesktopDialogProvider {
+  confirm(options: DesktopConfirmDialogOptions): Promise<boolean>
+  alert(message: string, options?: { title?: string }): Promise<void>
+  prompt(message: string, defaultValue?: string): Promise<string | null>
+}
+
+function browserGlobals(): {
+  confirm: (message?: string) => boolean
+  alert: (message?: string) => void
+  prompt: (message?: string, defaultText?: string) => string | null
+} | null {
+  const g = globalThis as typeof globalThis & {
+    confirm?: (message?: string) => boolean
+    alert?: (message?: string) => void
+    prompt?: (message?: string, defaultText?: string) => string | null
+  }
+  if (typeof g.confirm !== 'function') return null
+  return {
+    confirm: g.confirm.bind(g),
+    alert:
+      typeof g.alert === 'function'
+        ? g.alert.bind(g)
+        : (m?: string) => {
+            void m
+          },
+    prompt:
+      typeof g.prompt === 'function'
+        ? g.prompt.bind(g)
+        : () => null,
+  }
+}
+
+export function createBrowserFallbackDialogProvider(): DesktopDialogProvider {
+  return {
+    async confirm(opts) {
+      if (import.meta.server) return false
+      const w = browserGlobals()
+      if (!w) return false
+      const text = [opts.title, opts.message].filter(Boolean).join('\n\n')
+      return w.confirm(text)
+    },
+    async alert(message, opts) {
+      if (import.meta.server) return
+      const w = browserGlobals()
+      if (!w) return
+      w.alert([opts?.title, message].filter(Boolean).join('\n\n'))
+    },
+    async prompt(message, defaultValue = '') {
+      if (import.meta.server) return null
+      const w = browserGlobals()
+      if (!w) return null
+      const v = w.prompt(message, defaultValue)
+      return v === null ? null : v
+    },
+  }
+}

package/runtime/internal/controllers/ApplicationController.ts

@@ -82,9 +82,11 @@ export class ApplicationController implements IApplicationController {
 
     if (this.config.commands) {
       for (const commandKey of Object.keys(this.config.commands)) {
+        const meta = this.config.terminal?.[commandKey] ?? {}
         this.terminalManager.addCommand({
           applicationId: this.id,
           name: commandKey,
+          ...meta,
         })
       }
     }
@@ -155,14 +157,18 @@ export class ApplicationController implements IApplicationController {
 
   /** Ensure a single focused window after restore or stale persisted state. */
   private normalizeWindowFocus() {
-    if (this.windows.size === 0) {
+    const allWindows = this.applicationManager?.windowsOpened?.value
+      ? Array.from(this.applicationManager.windowsOpened.value.values())
+      : Array.from(this.windows.values())
+
+    if (allWindows.length === 0) {
       return
     }
 
     let topWindow: IWindowController | undefined
     let topZ = -Infinity
 
-    for (const window of this.windows.values()) {
+    for (const window of allWindows) {
       window.setFocus(false)
       const z = window.state.position?.z ?? 0
       if (z >= topZ) {

package/runtime/internal/controllers/WindowController.ts

@@ -1,7 +1,7 @@
 import { useApplicationManager } from '../../composables/useApplicationManager'
 import { useDesktopWindowStore } from '../../stores/storeDesktopWindow'
 import { deepClone } from '../../utils/utilCommon'
-import { markRaw } from '@vue/reactivity'
+import { markRaw, reactive } from '@vue/reactivity'
 import { defineAsyncComponent } from 'vue'
 
 export class WindowController implements IWindowController {
@@ -46,7 +46,7 @@ export class WindowController implements IWindowController {
     resizable: true,
   }
 
-  public override: WindowOverride = {}
+  public override: WindowOverride = reactive({})
 
   private storedState: WindowStoredState
 
@@ -226,6 +226,14 @@ export class WindowController implements IWindowController {
     return this.application.config.title
   }
 
+  get windowTitle(): string {
+    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
@@ -331,6 +339,10 @@ export class WindowController implements IWindowController {
   }
 
   get isMaximized() {
+    if (this.state.layout === 'maximize') {
+      return true
+    }
+
     if (this.config.overridable?.maximized) {
       return !!this.state.maximized
     }
@@ -338,22 +350,81 @@ export class WindowController implements IWindowController {
     return !!this.config.maximized
   }
 
-  public toggleMaximize() {
+  private parseSizeValue(value: WindowSizeValue | undefined, fallback: number): number {
+    if (typeof value === 'number') {
+      return value
+    }
+    if (typeof value === 'string') {
+      const parsed = Number.parseFloat(value)
+      if (!Number.isNaN(parsed)) {
+        return parsed
+      }
+    }
+    return fallback
+  }
+
+  public 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, 400),
+      height: this.parseSizeValue(size.height, 300),
+    }
+  }
+
+  public setLayout(layout: WindowLayout) {
+    if (layout === 'normal') {
+      return this.clearLayout()
+    }
+
     if (!this.isMaximizable) {
       return false
     }
 
-    this.state.maximized = !this.state.maximized
+    this.saveBoundsBeforeLayout()
+    this.state.layout = layout
+    this.state.maximized = layout === 'maximize'
     return true
   }
 
+  public 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
+  }
+
+  public toggleMaximize() {
+    if (!this.isMaximizable) {
+      return false
+    }
+
+    if (this.isMaximized) {
+      return this.clearLayout()
+    }
+
+    return this.setLayout('maximize')
+  }
+
   public maximize() {
     if (!this.isMaximizable) {
       return false
     }
 
-    this.state.maximized = true
-    return true
+    return this.setLayout('maximize')
   }
 
   public unmaximize() {
@@ -361,8 +432,7 @@ export class WindowController implements IWindowController {
       return false
     }
 
-    this.state.maximized = false
-    return true
+    return this.clearLayout()
   }
 
   // destroy
@@ -418,6 +488,14 @@ export class WindowController implements IWindowController {
     this.override.title = undefined
   }
 
+  public setWindowTitleOverride(value: undefined | string) {
+    this.override.windowTitle = value
+  }
+
+  public resetWindowTitleOverride() {
+    this.override.windowTitle = undefined
+  }
+
   // menu
 
   public menu: any[] = []
@@ -448,6 +526,11 @@ export class WindowController implements IWindowController {
       maximize: this.maximize.bind(this),
       unmaximize: this.unmaximize.bind(this),
 
+      // layout
+      setLayout: this.setLayout.bind(this),
+      clearLayout: this.clearLayout.bind(this),
+      saveBoundsBeforeLayout: this.saveBoundsBeforeLayout.bind(this),
+
       // destroy
       destroy: this.destroy.bind(this),
 
@@ -457,6 +540,8 @@ export class WindowController implements IWindowController {
       // override
       setTitleOverride: this.setTitleOverride.bind(this),
       resetTitleOverride: this.resetTitleOverride.bind(this),
+      setWindowTitleOverride: this.setWindowTitleOverride.bind(this),
+      resetWindowTitleOverride: this.resetWindowTitleOverride.bind(this),
     }
   }
 }

package/runtime/plugins/01.desktop-shell-init.client.ts

@@ -0,0 +1,28 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import {
+  bindDesktopPinia,
+  initDesktopShell,
+  syncDesktopShellAppConfig,
+} from '../utils/initDesktopShell'
+import { migratePersistedStoreIds } from '../utils/migratePersistedStoreIds'
+
+export default defineNuxtPlugin({
+  name: 'desktop-shell-init',
+  dependsOn: ['pinia'],
+  enforce: 'pre',
+  setup(nuxtApp) {
+    migratePersistedStoreIds()
+    bindDesktopPinia(nuxtApp.$pinia)
+    initDesktopShell()
+
+    nuxtApp.hook('app:created', () => {
+      syncDesktopShellAppConfig()
+    })
+
+    return {
+      provide: {
+        desktopShellReady: true,
+      },
+    }
+  },
+})

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

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

package/runtime/stores/storeApplicationMeta.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { applicationMetaStoreId } from './storeIds'
 
 const metaStoreRegistry = new Map<string, ReturnType<typeof defineStore>>()
 /** Store ids created by the generic fallback (only `meta`), replaceable when an app registers real state. */
@@ -20,7 +21,7 @@ export const useApplicationMetaStore = (
   appId: string,
   states?: MetaStoreSetup,
 ) => {
-  const id = `owd/application/${appId}/meta`
+  const id = applicationMetaStoreId(appId)
 
   if (
     states !== undefined &&

package/runtime/stores/storeApplicationWindows.ts

@@ -1,9 +1,10 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { applicationWindowsStoreId } from './storeIds'
 
 export const useApplicationWindowsStore = (appId: string) => {
   return defineStore(
-    `owd/application/${appId}/windows`,
+    applicationWindowsStoreId(appId),
     () => {
       const windows: Ref<{ [windowId: string]: WindowStoredState }> = ref({})