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

package/src/runtime/components/Desktop.client.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { useDesktopWorkArea } from "@owdproject/nuxt/runtime/composables/useDesktopWorkArea";
+import Background from "./Background/DesktopBackground.vue";
+import DesktopContent from "./Desktop/DesktopContent.vue";
+import NuxtTopBar from "./NuxtTopBar.vue";
+import NuxtLauncherOverlay from "./NuxtLauncherOverlay.vue";
+
+defineProps({
+  systemBar: { type: null, required: false },
+});
+
+const shellStageRef = ref(null);
+useDesktopWorkArea(shellStageRef);
+
+const BODY_SHELL_CLASS = "owd-has-nuxt-shell";
+
+onMounted(() => {
+  document.body.classList.add(BODY_SHELL_CLASS);
+});
+
+onUnmounted(() => {
+  document.body.classList.remove(BODY_SHELL_CLASS);
+});
+</script>
+
+<template>
+  <DesktopCore
+    v-bind="$props"
+    class="owd-desktop--nuxt flex flex-col h-screen overflow-hidden select-none bg-gray-50 dark:bg-gray-950"
+  >
+    <NuxtTopBar />
+
+    <div ref="shellStageRef" class="flex-1 min-h-0 relative flex flex-col">
+      <Background />
+
+      <DesktopContent>
+        <slot />
+      </DesktopContent>
+      <DesktopCoreApplicationRender />
+    </div>
+
+    <NuxtLauncherOverlay />
+
+    <!-- Supports programmatically opened Nuxt UI modals -->
+    <UModals />
+  </DesktopCore>
+</template>
+
+<style>
+/* Custom style rules for desktop shell */
+.owd-desktop--nuxt {
+  --owd-system-bar-height: 48px;
+}
+</style>

package/src/runtime/components/NuxtLauncherOverlay.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useNuxtStartMenu } from '../composables/useNuxtStartMenu'
+import { watch, ref } from 'vue'
+
+const { open, searchQuery, filteredEntries, close, launchEntry } = useNuxtStartMenu()
+const searchInput = ref<any>(null)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    setTimeout(() => {
+      searchInput.value?.$el?.querySelector('input')?.focus()
+    }, 100)
+  }
+})
+</script>
+
+<template>
+  <div v-if="open" class="fixed inset-0 z-40 flex items-start justify-center pt-24" @click="close">
+    <!-- Overlay/Command Palette -->
+    <div 
+      class="w-full max-w-xl mx-4 flex flex-col bg-white/75 dark:bg-gray-900/75 backdrop-blur-xl border border-gray-200 dark:border-gray-800 rounded-xl shadow-2xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800"
+      @click.stop
+    >
+      <div class="p-4 border-b border-gray-200 dark:border-gray-800">
+        <UInput
+          ref="searchInput"
+          v-model="searchQuery"
+          icon="i-heroicons-magnifying-glass"
+          size="lg"
+          color="gray"
+          variant="none"
+          placeholder="Search apps..."
+          class="w-full text-lg"
+          :ui="{ wrapper: 'shadow-none', icon: { base: 'text-gray-400 dark:text-gray-500' } }"
+        />
+      </div>
+
+      <div class="flex-1 overflow-y-auto max-h-[50vh] p-2">
+        <div v-if="filteredEntries.length === 0" class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">
+          No apps found.
+        </div>
+        
+        <div class="grid grid-cols-1 gap-1">
+          <button
+            v-for="entry in filteredEntries"
+            :key="entry.application.id"
+            class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-800/50 focus:bg-gray-100/50 dark:focus:bg-gray-800/50 transition-colors text-left outline-none"
+            @click="launchEntry(entry)"
+          >
+            <div class="flex-shrink-0 p-2 bg-gray-100 dark:bg-gray-800 rounded-md">
+              <UIcon
+                v-if="entry.icon"
+                :name="entry.icon"
+                class="w-5 h-5 text-gray-700 dark:text-gray-300"
+              />
+              <UIcon
+                v-else
+                name="i-heroicons-window"
+                class="w-5 h-5 text-gray-700 dark:text-gray-300"
+              />
+            </div>
+            <div class="flex flex-col min-w-0">
+              <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ entry.title }}</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400 truncate" v-if="entry.description">{{ entry.description }}</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/runtime/components/NuxtTopBar.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useColorMode } from '#imports'
+import { useNuxtStartMenu } from '../composables/useNuxtStartMenu'
+
+const { toggle: toggleStart, open: startOpen } = useNuxtStartMenu()
+
+const time = ref('')
+const dateLabel = ref('')
+let timer: any
+
+onMounted(() => {
+  const update = () => {
+    const d = new Date()
+    time.value = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    dateLabel.value = d.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })
+  }
+  update()
+  timer = setInterval(update, 1000)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+
+const colorMode = useColorMode()
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <header class="h-[60px] w-full flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white/75 dark:bg-gray-900/75 backdrop-blur border-b border-gray-200 dark:border-gray-800 flex-shrink-0 select-none z-50">
+    <!-- Left Section: Logo/Start Button -->
+    <div class="flex items-center gap-4">
+      <button 
+        @click="toggleStart"
+        class="flex items-center gap-2 hover:opacity-80 transition-opacity"
+        aria-label="Toggle Start Menu"
+      >
+        <UIcon name="i-heroicons-cube-transparent" class="w-6 h-6 text-green-500" />
+        <span class="font-bold text-gray-900 dark:text-white text-lg tracking-tight hidden sm:block">Nuxt OS</span>
+      </button>
+    </div>
+
+    <!-- Center Section: Title/Clock -->
+    <div class="flex flex-col items-center justify-center">
+      <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ time }}</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">{{ dateLabel }}</span>
+    </div>
+
+    <!-- Right Section: Quick controls -->
+    <div class="flex items-center gap-3">
+      <UButton
+        :icon="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
+        color="gray"
+        variant="ghost"
+        class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        @click="isDark = !isDark"
+      />
+    </div>
+  </header>
+</template>

package/src/runtime/components/Window/DesktopWindow.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useWindowDragHandlers } from "@owdproject/nuxt/runtime/composables/useWindowDragHandlers"
+const props = defineProps({
+  config: { type: null, required: false },
+  window: { type: null, required: false },
+  content: { type: null, required: false }
+})
+const { onDragStart, onDragEnd } = useWindowDragHandlers(
+  () => props.window
+)
+</script>
+
+<template>
+  <DesktopCoreWindow
+    v-bind="$props"
+    v-show="window?.state?.active !== false"
+    @drag:start="onDragStart"
+    @drag:end="onDragEnd"
+  >
+    <div class="flex flex-col h-full bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg shadow-xl overflow-hidden">
+      <DesktopWindowNav>
+        <template #prepend>
+          <slot name="nav-prepend" />
+        </template>
+        <template #append>
+          <slot name="nav-append" />
+        </template>
+      </DesktopWindowNav>
+      <div class="flex-1 min-h-0 relative">
+        <DesktopWindowContent>
+          <slot />
+        </DesktopWindowContent>
+      </div>
+    </div>
+  </DesktopCoreWindow>
+</template>
+
+<style scoped>
+.owd-window {
+  box-sizing: border-box;
+  min-width: 160px;
+  min-height: 160px;
+}
+</style>

package/src/runtime/components/Window/DesktopWindowContent.vue

@@ -0,0 +1,17 @@
+<template>
+  <DesktopCoreWindowContent>
+    <slot />
+  </DesktopCoreWindowContent>
+</template>
+
+<style scoped>
+.owd-window__content--centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.owd-window__content--padded {
+  padding: 12px;
+}
+</style>

package/src/runtime/components/Window/DesktopWindowIframe.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps({
+  config: { type: null, required: false },
+  window: { type: null, required: false },
+  src: { type: String, required: true }
+});
+</script>
+
+<template>
+  <DesktopWindow v-bind="$props">
+    <iframe :src="src" class="w-full h-full border-0" />
+  </DesktopWindow>
+</template>

package/src/runtime/components/Window/DesktopWindowNav.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { inject, computed } from "vue"
+import { useToggleWindowMaximize } from "@owdproject/nuxt/runtime/composables/useToggleWindowMaximize"
+
+const windowController = inject<any>("windowController")
+const toggleWindowMaximize = useToggleWindowMaximize()
+
+function onWindowMinimize() {
+  if (!windowController?.instanced) return
+  windowController.actions.minimize()
+}
+
+function onWindowMaximize() {
+  toggleWindowMaximize(windowController)
+}
+
+function onWindowNavDestroy() {
+  if (!windowController?.instanced) return
+  windowController.actions.destroy()
+}
+
+const dropdownItems = computed(() => [
+  [
+    {
+      label: 'Minimize',
+      icon: 'i-heroicons-minus',
+      click: onWindowMinimize
+    },
+    {
+      label: windowController?.state?.maximized ? 'Restore' : 'Maximize',
+      icon: 'i-heroicons-squares-2x2',
+      click: onWindowMaximize
+    }
+  ],
+  [
+    {
+      label: 'Close',
+      icon: 'i-heroicons-x-mark',
+      click: onWindowNavDestroy
+    }
+  ]
+])
+</script>
+
+<template>
+  <DesktopCoreWindowNav
+    class="flex items-center justify-between px-3 py-1.5 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 select-none cursor-default"
+    @dblclick="onWindowMaximize"
+  >
+    <div class="flex items-center space-x-2 min-w-0">
+      <UDropdown :items="dropdownItems" :popper="{ placement: 'bottom-start' }">
+        <UButton
+          v-if="windowController?.icon"
+          :icon="windowController.icon"
+          color="gray"
+          variant="ghost"
+          size="2xs"
+          class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        />
+        <UButton
+          v-else
+          icon="i-heroicons-cog-6-tooth"
+          color="gray"
+          variant="ghost"
+          size="2xs"
+          class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        />
+      </UDropdown>
+
+      <div
+        v-if="windowController?.title"
+        class="text-xs font-semibold text-gray-700 dark:text-gray-300 truncate"
+        v-text="windowController?.title"
+      />
+    </div>
+
+    <div class="flex items-center space-x-1 flex-shrink-0">
+      <UButton
+        v-if="!windowController?.instanced || windowController?.isMinimizable"
+        icon="i-heroicons-minus"
+        size="2xs"
+        color="gray"
+        variant="ghost"
+        class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        @mousedown.stop
+        @click.stop="onWindowMinimize"
+      />
+      <UButton
+        v-if="windowController?.isMaximizable"
+        icon="i-heroicons-squares-2x2"
+        size="2xs"
+        color="gray"
+        variant="ghost"
+        class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        @mousedown.stop
+        @click.stop="onWindowMaximize"
+      />
+      <UButton
+        v-if="!windowController?.instanced || windowController?.isDestroyable"
+        icon="i-heroicons-x-mark"
+        size="2xs"
+        color="red"
+        variant="ghost"
+        class="h-5 w-5 p-0 flex items-center justify-center rounded hover:bg-red-500 hover:text-white"
+        @mousedown.stop
+        @click.stop="onWindowNavDestroy"
+      />
+    </div>
+  </DesktopCoreWindowNav>
+</template>

package/src/runtime/composables/useNuxtStartMenu.ts

@@ -0,0 +1,72 @@
+import { ref, computed } from 'vue'
+import { useScrollLock } from '@vueuse/core'
+import { useApplicationManager } from '@owdproject/nuxt/runtime/composables/useApplicationManager'
+import { useApplicationEntries } from '@owdproject/nuxt/runtime/composables/useApplicationEntries'
+
+const open = ref(false)
+const searchQuery = ref('')
+
+function isValidEntry(
+  entry: any
+): entry is any {
+  return Boolean(entry?.application?.id && entry.command)
+}
+
+export function useNuxtStartMenu() {
+  const applicationManager = useApplicationManager()
+  const applicationEntries = useApplicationEntries()
+
+  const bodyScrollLock = useScrollLock(
+    typeof document !== 'undefined' ? document.body : null,
+  )
+
+  const allEntries = computed(() => {
+    return (applicationEntries as any)
+      .sortedAppEntries('title', 'primary')
+      .value.filter(isValidEntry)
+  })
+
+  const filteredEntries = computed(() => {
+    const q = searchQuery.value.trim().toLowerCase()
+    const entries = allEntries.value
+    if (!q) return entries
+    return entries.filter((entry: any) =>
+      (entry.title ?? '').toLowerCase().includes(q),
+    )
+  })
+
+  function syncScrollLock() {
+    bodyScrollLock.value = open.value
+  }
+
+  function toggle() {
+    open.value = !open.value
+    searchQuery.value = ''
+    syncScrollLock()
+  }
+
+  function close() {
+    open.value = false
+    searchQuery.value = ''
+    bodyScrollLock.value = false
+  }
+
+  async function launchEntry(entry: any) {
+    if (!isValidEntry(entry)) return
+    await applicationManager.execAppCommand(
+      entry.application.id,
+      entry.command,
+    )
+    close()
+  }
+
+  return {
+    open,
+    searchQuery,
+    allEntries,
+    filteredEntries,
+    toggle,
+    close,
+    launchEntry,
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.