@owdproject/core 3.4.0 → 4.0.0-alpha.3

package/module.ts

@@ -1,203 +0,0 @@
-import {
-  defineNuxtModule,
-  createResolver,
-  addComponentsDir,
-  addImportsDir,
-  installModule,
-  addPlugin,
-  resolvePath
-} from '@nuxt/kit'
-import { defu } from 'defu'
-import {
-  assertValidDesktopUserConfig,
-  installDesktopPackage,
-  resolveDesktopConfigPath,
-  warnDesktopConfigKeys,
-  warnLegacyDesktopConfig,
-} from './kit/authoring'
-import pkg from './package.json'
-
-export default defineNuxtModule({
-  meta: {
-    name: 'desktop',
-    configKey: 'desktop',
-  },
-  defaults: {
-    theme: '@owdproject/theme-nova',
-    apps: [],
-    modules: [],
-  },
-  moduleDependencies: {
-    '@pinia/nuxt': {},
-    '@nuxt/fonts': {},
-    '@nuxt/icon': {
-      defaults: {
-        clientBundle: {
-          scan: true,
-          sizeLimitKb: 256,
-        },
-      },
-    },
-    '@vueuse/nuxt': {},
-    '@nuxtjs/i18n': {},
-  },
-  async setup(_options, _nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-
-    let resolvedNanoid: string | null = null
-    try {
-      resolvedNanoid = await resolvePath('nanoid', { url: import.meta.url })
-    } catch (e) {
-      // ignore
-    }
-
-    // Required for Nuxt 4 dev (playgrounds, module graphs): avoids
-    // "Vite Node IPC socket path not configured" when using @nuxt/kit pipelines.
-    _nuxt.options.experimental = {
-      ..._nuxt.options.experimental,
-      viteEnvironmentApi:
-        _nuxt.options.experimental?.viteEnvironmentApi ?? true,
-    }
-
-    _nuxt.options.runtimeConfig.public.desktop = {}
-
-    // get open web desktop config (desktop.config.ts; owd.config.ts legacy)
-
-    let clientConfig
-
-    const resolvedConfig = resolveDesktopConfigPath(_nuxt.options.rootDir)
-
-    if (!resolvedConfig) {
-      const hint =
-        'Create desktop.config.ts next to your Nuxt root (e.g. desktop/desktop.config.ts), export default defineDesktopConfig({ theme, apps, modules }).'
-      throw new Error(`[@owdproject/core] Cannot find desktop.config.ts in ${_nuxt.options.rootDir}. ${hint}`)
-    }
-
-    warnLegacyDesktopConfig(resolvedConfig)
-
-    // Nuxt dev restart + ℹ log (same as nuxt.config.ts); avoid builder:watch + restart (silent / double).
-    _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/core] Cannot load ${resolvedConfig.file}. ${hint}`,
-        { cause: e },
-      )
-    }
-
-    assertValidDesktopUserConfig(clientConfig, resolvedConfig.file)
-
-    if (!clientConfig.theme) {
-      clientConfig.theme = '@owdproject/theme-nova'
-    }
-
-    const configRecord = clientConfig as Record<string, unknown>
-    warnDesktopConfigKeys(configRecord, resolvedConfig.file)
-
-    const desktop = defu(configRecord, { coreVersion: pkg.version }) as Record<
-      string,
-      unknown
-    > & {
-      theme?: string
-      apps?: string[]
-      modules?: string[]
-    }
-
-    _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)
-          console.warn(`[@owdproject/core] Warning: 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)
-            console.warn(`[@owdproject/core] Warning: 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)
-            console.warn(`[@owdproject/core] Warning: Could not load app "${appPath}". Details: ${msg}`)
-          }
-        }
-      }
-    }
-
-    // assign runtimeConfig desktop prop to appConfig
-    // to make it overwritable by components later
-    // via useDesktopManager
-    _nuxt.options.appConfig.desktop = _nuxt.options.runtimeConfig.public.desktop
-
-    {
-      // configure scss for vite
-
-      _nuxt.hook('vite:extendConfig', (viteConfig) => {
-        viteConfig.css = viteConfig.css || {}
-        viteConfig.css.preprocessorOptions =
-          viteConfig.css.preprocessorOptions || {}
-        viteConfig.css.preprocessorOptions.scss = {
-          api: 'modern-compiler'
-        }
-
-        viteConfig.optimizeDeps = viteConfig.optimizeDeps || {}
-        viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || []
-        if (resolvedNanoid && !viteConfig.optimizeDeps.include.includes(resolvedNanoid)) {
-          viteConfig.optimizeDeps.include.push(resolvedNanoid)
-        }
-      })
-    }
-
-    {
-      // add css
-
-      _nuxt.options.css.push('sanitize.css')
-    }
-
-    {
-      // add components
-
-      addComponentsDir({
-        path: resolve('./runtime/components'),
-        prefix: 'Desktop',
-        pathPrefix: false,
-        global: true
-      })
-    }
-
-    {
-      addPlugin(resolve('./runtime/plugins/resize.client.ts'))
-      addPlugin(
-        resolve('./runtime/plugins/01.desktop-shell-init.client.ts'),
-      )
-      addPlugin(
-        resolve('./runtime/plugins/02.desktop-register-desktop-apps.client.ts'),
-      )
-
-      // add other files
-
-      addImportsDir(resolve('./runtime/composables'))
-      addImportsDir(resolve('./runtime/stores'))
-      addImportsDir(resolve('./runtime/utils'))
-    }
-  }
-})

package/runtime/components/Application/DesktopCoreApplicationRender.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { useApplicationManager } from '../../composables/useApplicationManager'
-
-defineProps<{
-  workspaceFilter?: string
-}>()
-
-const applicationManager = useApplicationManager()
-const runningApps = applicationManager.appsRunning
-</script>
-
-<template>
-  <DesktopCoreApplicationWindowsRender
-    v-for="app of runningApps"
-    :key="app.id"
-    :workspace-filter="workspaceFilter"
-    :windows="app.windowsOpened"
-    :window-revision="app.openWindowCount.value"
-  />
-</template>

package/runtime/components/Application/DesktopCoreApplicationWindowsRender.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useDesktopWorkspaceStore } from '../../stores/storeDesktopWorkspace'
-
-const props = defineProps<{
-  workspaceFilter?: string
-  windows: Map<string, IWindowController>
-  /** Tracks ApplicationController.openWindowCount so Vue re-renders when the map is replaced. */
-  windowRevision?: number
-}>()
-
-const desktopWorkspaceStore = useDesktopWorkspaceStore()
-
-const windowEntries = computed(() => {
-  void props.windowRevision
-  return Array.from(props.windows.entries())
-})
-
-function matchesWorkspace(window: IWindowController): boolean {
-  const filter = props.workspaceFilter
-  if (!filter) return true
-
-  const ws = window.state.workspace
-  if (!ws) {
-    return filter === desktopWorkspaceStore.active
-  }
-
-  return ws === filter
-}
-</script>
-
-<template>
-  <template v-for="[windowId, window] in windowEntries" :key="windowId">
-    <Suspense v-if="matchesWorkspace(window)">
-      <component :window="window" :is="window.config.component" />
-    </Suspense>
-  </template>
-</template>

package/runtime/components/background/DesktopCoreBackground.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="owd-background">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.owd-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--owd-background-color);
-}
-</style>

package/runtime/components/core/DesktopCore.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { useAttrs, computed } from 'vue'
-import { useAppConfig } from 'nuxt/app'
-
-defineOptions({ inheritAttrs: false })
-
-defineProps<{
-  windows?: DesktopWindowsConfig
-  systemBar?: DesktopSystemBarConfig
-  dockBar?: DesktopDockBarConfig
-  workspaces?: DesktopWorkspacesConfig
-}>()
-
-const appConfig = useAppConfig()
-const attrs = useAttrs()
-
-const classes = computed(() => {
-  const list = ['owd-desktop']
-
-  if (appConfig.desktop?.name) {
-    list.push(`owd-desktop--${appConfig.desktop.name}`)
-  }
-
-  return list
-})
-
-const rootClass = computed(() => [classes.value, attrs.class])
-const rootStyle = computed(() => attrs.style)
-</script>
-
-<template>
-  <div :class="rootClass" :style="rootStyle">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.owd-desktop {
-  width: 100vw;
-  height: 100dvh;
-  user-select: none;
-}
-</style>

package/runtime/components/time/DesktopCoreTime.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { computed } from '@vue/reactivity'
-import { useI18n } from 'vue-i18n'
-
-const date: Ref<Date> = ref(new Date())
-const { locale } = useI18n()
-
-let minuteTimeout: any
-
-onMounted(() => {
-  function scheduleNextMinute() {
-    const now = new Date()
-    const millisecondsToNextMinute =
-      (60 - now.getSeconds()) * 1000 - now.getMilliseconds()
-    minuteTimeout = setTimeout(() => {
-      date.value = new Date()
-      scheduleNextMinute()
-    }, millisecondsToNextMinute)
-  }
-  scheduleNextMinute()
-})
-
-onUnmounted(() => {
-  clearTimeout(minuteTimeout)
-})
-
-const time = computed(() => {
-  if (!date.value) {
-    return ''
-  }
-
-  let hours = date.value.getHours()
-  let minutes: string = date.value.getMinutes().toString()
-  let period = 'AM'
-
-  if (locale.value !== 'it') {
-    if (hours >= 12) {
-      period = 'PM'
-      if (hours > 12) hours -= 12
-    } else if (hours === 0) {
-      hours = 12
-    }
-  }
-
-  if (minutes.length === 1) minutes = `0${minutes}`
-
-  return locale.value === 'it'
-    ? `${hours}:${minutes}`
-    : `${hours}:${minutes} ${period}`
-})
-</script>
-
-<template>
-  <time class="owd-time" v-text="time" />
-</template>

package/runtime/components/window/DesktopCoreWindow.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { ref, provide, onMounted } from 'vue'
-import { computed } from '@vue/reactivity'
-import { useAppConfig } from 'nuxt/app'
-import { handleWindowControllerProps } from '../../utils/utilWindowControllerAdapter'
-import { useDesktopWorkspaceStore } from '../../stores/storeDesktopWorkspace'
-
-const props = defineProps<{
-  window?: IWindowController
-  content?: WindowContent
-}>()
-
-const desktopWorkspaceStore = useDesktopWorkspaceStore()
-
-const emit = defineEmits([
-  'resize:start',
-  'resize:move',
-  'resize:end',
-  'drag:start',
-  'drag:move',
-  'drag:end',
-  'close',
-  'open',
-  'blur',
-  'focus',
-  'minimize',
-  'restore',
-  'maximize',
-  'unmaximize',
-  'toggle-maximize',
-])
-
-const appConfig = useAppConfig()
-const windowController: IWindowController = handleWindowControllerProps(
-  props.window,
-)
-
-provide<IWindowController>('windowController', windowController)
-provide<WindowContent>('windowContent', props.content ?? {})
-
-const isDragging = ref(false)
-const isResizing = ref(false)
-
-onMounted(() => {
-  if (windowController?.state?.focused) {
-    windowController.actions.bringToFront()
-  }
-})
-
-function onWindowPointerDown() {
-  windowController?.actions?.setActive(true)
-  windowController?.actions?.bringToFront()
-}
-
-function onWindowDragStart(data: any) {
-  isDragging.value = true
-
-  emit('drag:start', data)
-}
-
-function onWindowDragMove(data: any) {
-  emit('drag:move', data)
-}
-
-function onWindowDragEnd(data: { left: number; top: number }) {
-  windowController?.actions?.setPosition({
-    x: data.left,
-    y: data.top,
-  })
-
-  isDragging.value = false
-
-  emit('drag:end', data)
-}
-
-function onWindowResizeStart(data: any) {
-  isResizing.value = true
-
-  emit('resize:start', data)
-}
-
-function onWindowResizeMove(data: any) {
-  emit('resize:move', data)
-}
-
-/**
- * Window end resize event
- */
-function onWindowResizeEnd(data: {
-  left: number
-  top: number
-  width: number
-  height: number
-}) {
-  isResizing.value = false
-
-  windowController?.actions?.setPosition({
-    x: data.left,
-    y: data.top,
-  })
-
-  windowController?.actions?.setSize({
-    width: data.width,
-    height: data.height,
-  })
-
-  emit('resize:end', data)
-}
-
-const classes = computed(() => {
-  const list = ['owd-window']
-
-  if (windowController?.state.focused) {
-    list.push('owd-window--focused')
-  }
-
-  if (isDragging.value) {
-    list.push('owd-window--dragging')
-  }
-
-  if (isResizing.value) {
-    list.push('owd-window--resizing')
-  }
-
-  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 */
-  }
-}
-
-const windowPositionMode = computed(
-  () => appConfig.desktop?.windows?.position ?? 'fixed',
-)
-
-/** `fit-parent` clamps drag/resize to the parent box — wrong for viewport-fixed shells (Win11, GNOME). */
-const shouldFitParent = computed(
-  () => windowPositionMode.value !== 'fixed',
-)
-</script>
-
-<template>
-  <vue-resizable
-    ref="windowResizableController"
-    :class="classes"
-    :width="windowController?.size.width"
-    :height="windowController?.size.height"
-    :min-width="windowController?.size.minWidth"
-    :min-height="windowController?.size.minHeight"
-    :max-width="windowController?.size.maxWidth"
-    :max-height="windowController?.size.maxHeight"
-    :left="windowController?.position?.x"
-    :top="windowController?.position?.y"
-    :active="windowController?.isResizable ? undefined : []"
-    :fit-parent="shouldFitParent"
-    @drag:start="onWindowDragStart"
-    @drag:move="onWindowDragMove"
-    @drag:end="onWindowDragEnd"
-    @resize:start="onWindowResizeStart"
-    @resize:move="onWindowResizeMove"
-    @resize:end="onWindowResizeEnd"
-    :style="{ zIndex: windowController?.position?.z }"
-    :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('windowPositionMode') !important;
-}
-
-.owd-window {
-  position: v-bind('windowPositionMode');
-
-  &--dragging,
-  &--resizing {
-    :deep(.owd-window__content) {
-      pointer-events: none;
-    }
-  }
-
-  :deep(.owd-window__content) {
-    overflow-y: auto;
-    height: 100%;
-    min-height: 0;
-  }
-}
-</style>

package/runtime/components/window/DesktopCoreWindowContent.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-import { computed } from '@vue/reactivity'
-
-const windowContent = inject<WindowContent>('windowContent')
-
-const classes = computed(() => {
-  const list = ['owd-window__content']
-
-  if (windowContent?.centered) {
-    list.push('owd-window__content--centered')
-  }
-
-  if (windowContent?.padded) {
-    list.push('owd-window__content--padded')
-  }
-
-  return list
-})
-</script>
-
-<template>
-  <div :class="classes">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss"></style>

package/runtime/components/window/DesktopCoreWindowNav.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-import { computed } from '@vue/reactivity'
-
-const windowController = inject<IWindowController>('windowController')
-
-const classes = computed(() => {
-  const list = ['owd-window-nav']
-
-  if (
-    typeof windowController?.state.active === 'undefined' ||
-    !!windowController?.state.active
-  ) {
-    list.push('owd-window-nav--active')
-  }
-
-  if (windowController?.state.focused) {
-    list.push('owd-window-nav--focused')
-  }
-
-  return list
-})
-</script>
-
-<template>
-  <div :class="classes">
-    <div class="owd-window-nav__draggable" />
-
-    <slot />
-  </div>
-</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;
-    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>