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

package/src/runtime/apps/notepad/components/Window/WindowNotepad.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  window: any
+}>()
+
+const text = ref('')
+
+function clear() {
+  text.value = ''
+}
+</script>
+
+<template>
+  <DesktopWindow :window="window">
+    <div class="flex h-full min-h-0 flex-col bg-white dark:bg-gray-950">
+      <!-- Toolbar -->
+      <div
+        class="flex flex-shrink-0 items-center gap-2 border-b border-gray-200 bg-gray-50 p-2 dark:border-gray-800 dark:bg-gray-900"
+      >
+        <UButton
+          icon="i-heroicons-document"
+          label="New"
+          color="gray"
+          variant="ghost"
+          size="xs"
+          class="gap-2"
+          @click="clear"
+        />
+        <UButton
+          icon="i-heroicons-trash"
+          label="Clear"
+          color="red"
+          variant="ghost"
+          size="xs"
+          class="gap-2"
+          @click="clear"
+        />
+      </div>
+
+      <!-- Text area -->
+      <textarea
+        v-model="text"
+        class="w-full flex-1 min-h-0 resize-none border-0 bg-transparent p-4 font-mono text-sm text-gray-800 outline-none dark:text-gray-200"
+        placeholder="Type here..."
+      />
+    </div>
+  </DesktopWindow>
+</template>

package/src/runtime/apps/notepad/plugin.ts

@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import { defineDesktopApp } from '@owdproject/nuxt/kit/defineDesktopApp'
+import configAppNotepad from './app.config'
+
+export default defineNuxtPlugin({
+  name: 'desktop-theme-nuxt-notepad',
+  dependsOn: ['pinia', 'desktop-shell-init'],
+  async setup() {
+    if (import.meta.server) return
+    await defineDesktopApp(configAppNotepad)
+  },
+})

package/src/runtime/apps/registry.ts

@@ -0,0 +1,21 @@
+import type { Nuxt } from '@nuxt/schema'
+
+export type NuxtThemeBuiltInApp = {
+  name: string
+  autoload: boolean
+  when?: (nuxt: Nuxt) => boolean
+}
+
+export function hasModuleFs(nuxt: Nuxt): boolean {
+  const desktop = nuxt.options.runtimeConfig.public.desktop as {
+    modules?: string[]
+  }
+  const modules = desktop?.modules ?? []
+  return modules.some((m) => String(m).includes('nuxt-fs'))
+}
+
+export const NUXT_THEME_BUILTIN_APPS: NuxtThemeBuiltInApp[] = [
+  { name: 'explorer', autoload: true },
+  { name: 'calculator', autoload: true },
+  { name: 'notepad', autoload: true },
+]

package/src/runtime/components/Background/DesktopBackground.vue

@@ -0,0 +1,3 @@
+<template>
+  <DesktopCoreBackground />
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useAppConfig } from "nuxt/app";
+import { computed } from "vue";
+
+const appConfig = useAppConfig() as any;
+const classes = computed(() => {
+  const list = ["owd-desktop__content"];
+  const pos = appConfig.desktop?.systemBar?.position;
+  if (pos) {
+    list.push(`owd-desktop__content--system-bar-position-${pos}`);
+  }
+  return list;
+});
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.owd-desktop__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.owd-desktop__content--system-bar-position-top {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.owd-desktop__content--system-bar-position-bottom {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>

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

@@ -0,0 +1,136 @@
+<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 />
+
+    <!--
+      `isolate` keeps every window's z-index inside this stacking context, so the
+      system bar and the launcher (siblings) always stay above open windows
+      instead of losing to the window manager's 100+ z-index values.
+    -->
+    <div ref="shellStageRef" class="flex-1 min-h-0 relative flex flex-col isolate">
+      <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: 60px;
+}
+
+/* Desktop shell: no document scrollbars — scroll only inside windows/apps */
+.owd-desktop--nuxt,
+.owd-has-nuxt-shell {
+  overscroll-behavior: none;
+}
+
+/*
+ * Window content layout. The core renders the `desktop-window__content` element
+ * and adds `--centered` / `--padded` when a window is opened with
+ * `:content="{ centered: true, padded: true }"`. These rules must be global
+ * (the element is the child component root, so scoped `:deep` does not match).
+ */
+.owd-desktop--nuxt .desktop-window__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.owd-desktop--nuxt .desktop-window__content--centered {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.owd-desktop--nuxt .desktop-window__content--centered > * {
+  max-width: 100%;
+}
+
+.owd-desktop--nuxt .desktop-window__content--padded {
+  padding: 12px;
+}
+
+/* Thin, unobtrusive scrollbars inside windows and the launcher */
+.owd-desktop--nuxt .desktop-window__content,
+.owd-desktop--nuxt .owd-desktop__scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(0 0 0 / 0.18) transparent;
+}
+
+.owd-desktop--nuxt .desktop-window__content::-webkit-scrollbar,
+.owd-desktop--nuxt .owd-desktop__scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.owd-desktop--nuxt .desktop-window__content::-webkit-scrollbar-track,
+.owd-desktop--nuxt .owd-desktop__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.owd-desktop--nuxt .desktop-window__content::-webkit-scrollbar-thumb,
+.owd-desktop--nuxt .owd-desktop__scroll::-webkit-scrollbar-thumb {
+  background-color: rgb(0 0 0 / 0.18);
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  border-radius: 9999px;
+}
+
+.owd-desktop--nuxt .desktop-window__content::-webkit-scrollbar-thumb:hover,
+.owd-desktop--nuxt .owd-desktop__scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(0 0 0 / 0.3);
+}
+
+.owd-desktop--nuxt.dark .desktop-window__content,
+.owd-desktop--nuxt.dark .owd-desktop__scroll,
+.dark .owd-desktop--nuxt .desktop-window__content,
+.dark .owd-desktop--nuxt .owd-desktop__scroll {
+  scrollbar-color: rgb(255 255 255 / 0.22) transparent;
+}
+
+.dark .owd-desktop--nuxt .desktop-window__content::-webkit-scrollbar-thumb,
+.dark .owd-desktop--nuxt .owd-desktop__scroll::-webkit-scrollbar-thumb {
+  background-color: rgb(255 255 255 / 0.22);
+}
+</style>

package/src/runtime/components/NuxtLauncherOverlay.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { useNuxtStartMenu } from '../composables/useNuxtStartMenu'
+
+const { open, searchQuery, filteredEntries, close, launchEntry } =
+  useNuxtStartMenu()
+
+const searchInput = ref<HTMLInputElement | null>(null)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    // Wait for the panel to be mounted before focusing the field.
+    setTimeout(() => searchInput.value?.focus(), 50)
+  }
+})
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && open.value) {
+    close()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition duration-150 ease-out"
+    enter-from-class="opacity-0 -translate-y-1"
+    leave-active-class="transition duration-100 ease-in"
+    leave-to-class="opacity-0 -translate-y-1"
+  >
+    <div
+      v-if="open"
+      class="fixed inset-0 z-40 flex items-start justify-center pt-24"
+      @click="close"
+    >
+      <!-- Overlay scrim -->
+      <div class="absolute inset-0 bg-gray-950/10 dark:bg-black/40" />
+
+      <!-- Command palette -->
+      <div
+        class="relative w-full max-w-xl mx-4 flex flex-col bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-gray-200 dark:border-gray-800 rounded-xl shadow-2xl overflow-hidden"
+        @click.stop
+      >
+        <!-- Search -->
+        <div class="p-3 border-b border-gray-200 dark:border-gray-800">
+          <div
+            class="flex items-center gap-2.5 h-11 px-3.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/60 ring-1 ring-inset ring-transparent focus-within:ring-primary-500/60 focus-within:bg-white dark:focus-within:bg-gray-900 transition"
+          >
+            <UIcon
+              name="i-heroicons-magnifying-glass"
+              class="w-4 h-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
+            />
+            <input
+              ref="searchInput"
+              v-model="searchQuery"
+              type="text"
+              placeholder="Search apps..."
+              autocomplete="off"
+              spellcheck="false"
+              class="flex-1 min-w-0 h-full bg-transparent border-0 outline-none focus:outline-none focus:ring-0 text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
+            />
+          </div>
+        </div>
+
+        <!-- Results -->
+        <div class="flex-1 overflow-y-auto owd-desktop__scroll 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-0.5">
+            <button
+              v-for="entry in filteredEntries"
+              :key="entry.application.id"
+              class="group flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-100/70 dark:hover:bg-gray-800/60 focus:bg-gray-100/70 dark:focus:bg-gray-800/60 focus:outline-none transition-colors text-left"
+              @click="launchEntry(entry)"
+            >
+              <div
+                class="flex-shrink-0 flex items-center justify-center w-9 h-9 bg-gray-100 dark:bg-gray-800 rounded-md group-hover:bg-white dark:group-hover:bg-gray-900 transition-colors"
+              >
+                <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 truncate"
+                >
+                  {{ entry.title }}
+                </span>
+                <span
+                  v-if="entry.description"
+                  class="text-xs text-gray-500 dark:text-gray-400 truncate"
+                >
+                  {{ entry.description }}
+                </span>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</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 Desktop</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,5 @@
+<template>
+  <DesktopCoreWindowContent>
+    <slot />
+  </DesktopCoreWindowContent>
+</template>

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>