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

package/src/runtime/components/explorer/FileEntry.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { explorerEntryAbsolutePath } from "@owdproject/nuxt-module-fs/runtime/utils/utilExplorerEntryPath";
+import { fetchExplorerEntryMetadata } from "@owdproject/nuxt-module-fs/runtime/utils/utilExplorerEntryMetadata";
+import { ref, computed, watch } from "vue";
+import FileContextMenu from "./FileContextMenu.vue";
+import FileIcon from "./FileIcon.vue";
+import { useExplorerInternalDrag } from "@owdproject/nuxt-module-fs/runtime/composables/useExplorerInternalDrag";
+import { useExplorerFolderDropTarget } from "@owdproject/nuxt-module-fs/runtime/composables/useExplorerFolderDropTarget";
+
+const props = defineProps({
+  basePath: { type: String, required: true },
+  fileName: { type: String, required: true },
+  layout: { type: String, required: true },
+  selected: { type: Boolean, required: false },
+  cutted: { type: Boolean, required: false },
+  window: { type: Object, required: true },
+  contextMenuComponent: { type: null, required: false },
+  openPathInNewTab: { type: Function, required: false },
+  dragEnabled: { type: Boolean, required: false }
+});
+
+const menuImpl = computed(
+  () => props.contextMenuComponent ?? FileContextMenu
+);
+
+const emit = defineEmits([
+  "openDirectory",
+  "openFile",
+  "rename"
+]);
+
+const path = computed(
+  () => explorerEntryAbsolutePath(props.basePath, props.fileName)
+);
+
+const pathStats = ref<any>(null);
+const isDirectory = ref(false);
+const isFile = ref();
+const fileContent = ref(null);
+const contextMenuRef = ref<any>();
+
+function fetchStatsAndContent(currentPath: string) {
+  fetchExplorerEntryMetadata(currentPath, (meta) => {
+    pathStats.value = meta.stats;
+    isFile.value = meta.isFile;
+    isDirectory.value = meta.isDirectory;
+    fileContent.value = meta.fileContent;
+  });
+}
+
+function onFileOpen() {
+  if (isDirectory.value) {
+    props.window.fsExplorer.openDirectory(props.fileName);
+  } else {
+    props.window.fsExplorer.openFile(props.fileName);
+  }
+}
+
+function onRightClick(event: MouseEvent) {
+  contextMenuRef.value?.show(event);
+}
+
+function onAuxClick(event: MouseEvent) {
+  if (event.button !== 1) return;
+  if (!isDirectory.value || !props.openPathInNewTab) return;
+  event.preventDefault();
+  event.stopPropagation();
+  props.openPathInNewTab(path.value);
+}
+
+watch(
+  path,
+  (p) => {
+    fetchStatsAndContent(p);
+  },
+  { immediate: true }
+);
+
+const isRenaming = ref(false);
+const editableName = ref(props.fileName);
+
+function renameCommit() {
+  const newName = editableName.value.trim();
+  if (newName && newName !== props.fileName) {
+    emit("rename", { oldName: props.fileName, newName });
+  }
+  isRenaming.value = false;
+}
+
+function renameStart() {
+  editableName.value = props.fileName;
+  isRenaming.value = true;
+}
+
+function renameCancel() {
+  editableName.value = props.fileName;
+  isRenaming.value = false;
+}
+
+const isRowLayout = computed(
+  () => props.layout === "list" || props.layout === "details"
+);
+
+function formatBytes(n: number) {
+  if (!Number.isFinite(n) || n < 0) return "—";
+  if (n < 1024) return `${n} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let v = n / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  const rounded = v < 10 && i > 0 ? v.toFixed(1) : String(Math.round(v));
+  return `${rounded} ${units[i]}`;
+}
+
+function statToDate(stats: any) {
+  if (!stats) return null;
+  const m = stats.mtime;
+  if (m instanceof Date) return m;
+  if (typeof m === "number") return new Date(m);
+  return null;
+}
+
+const modifiedLabel = computed(() => {
+  const d = statToDate(pathStats.value);
+  if (!d || Number.isNaN(d.getTime())) return "—";
+  return d.toLocaleString(undefined, {
+    dateStyle: "short",
+    timeStyle: "short"
+  });
+});
+
+const typeLabel = computed(() => {
+  if (isDirectory.value) return "File folder";
+  const parts = props.fileName.split(".");
+  if (parts.length < 2) return "File";
+  return `${parts.pop()?.toUpperCase()} file`;
+});
+
+const sizeLabel = computed(() => {
+  if (!pathStats.value || isDirectory.value) return "—";
+  if (typeof pathStats.value.isFile === 'function' && !pathStats.value.isFile()) return "—";
+  return formatBytes(pathStats.value.size);
+});
+
+const dragEnabledValue = computed(() => props.dragEnabled ?? true);
+const { onDragStart } = useExplorerInternalDrag({
+  entryPath: () => path.value,
+  selectedFiles: () => props.window.fsExplorer?.selectedFiles.value ?? [],
+  dragEnabled: () => dragEnabledValue.value
+});
+
+const folderDrop = useExplorerFolderDropTarget({
+  fsExplorer: props.window.fsExplorer,
+  folderPath: () => path.value,
+  enabled: () => dragEnabledValue.value && isDirectory.value
+});
+
+const classes = computed(() => {
+  const list: any[] = [
+    "owd-file select-none rounded-lg transition-all cursor-pointer p-1.5 flex flex-col items-center",
+    isRowLayout.value ? "w-full text-left" : "w-[90px] text-center"
+  ];
+  if (props.selected) {
+    list.push("bg-primary-50 dark:bg-primary-950/30 ring-1 ring-primary-500/50");
+  } else {
+    list.push("hover:bg-gray-100 dark:hover:bg-gray-800/50");
+  }
+  if (props.cutted) {
+    list.push("opacity-50");
+  }
+  if (folderDrop.isDragOver.value) {
+    list.push("bg-blue-100/50 dark:bg-blue-900/30 ring-2 ring-dashed ring-blue-500");
+  }
+  return list;
+});
+</script>
+
+<template>
+  <div
+    :class="classes"
+    :title="fileName"
+    :draggable="dragEnabledValue"
+    @dragstart.stop="onDragStart"
+    @dragenter="folderDrop.onDragEnter"
+    @dragover="folderDrop.onDragOver"
+    @dragleave="folderDrop.onDragLeave"
+    @drop="folderDrop.onDrop"
+    @dblclick="onFileOpen"
+    @contextmenu.prevent="onRightClick"
+    @auxclick.prevent="onAuxClick"
+  >
+    <template v-if="isRowLayout">
+      <div class="flex items-center w-full space-x-3">
+        <div class="w-8 flex-shrink-0 flex items-center justify-center">
+          <slot
+            name="icon"
+            :file-name="fileName"
+            :is-directory="isDirectory"
+            :layout="layout"
+          >
+            <FileIcon
+              :file-name="fileName"
+              :is-directory="isDirectory"
+              :layout="layout"
+            />
+          </slot>
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <span
+            v-if="!isRenaming"
+            @dblclick.stop="renameStart"
+            class="text-sm truncate block font-medium text-gray-700 dark:text-gray-200"
+            v-text="fileName"
+          />
+
+          <input
+            v-else
+            v-model="editableName"
+            class="text-sm truncate border border-primary-500 rounded px-1 w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 outline-none"
+            @blur="renameCommit"
+            @keyup.enter="renameCommit"
+            @keyup.esc="renameCancel"
+            autofocus
+          />
+        </div>
+
+        <template v-if="layout === 'details'">
+          <div class="text-xs text-gray-400 w-32 text-right truncate tabular-nums">{{ modifiedLabel }}</div>
+          <div class="text-xs text-gray-400 w-24 truncate" :title="typeLabel">{{ typeLabel }}</div>
+          <div class="text-xs text-gray-400 w-20 text-right truncate tabular-nums">{{ sizeLabel }}</div>
+        </template>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="p-1 rounded flex items-center justify-center mb-1">
+        <slot
+          name="icon"
+          :file-name="fileName"
+          :is-directory="isDirectory"
+          :layout="layout"
+        >
+          <FileIcon
+            :file-name="fileName"
+            :is-directory="isDirectory"
+            :layout="layout"
+          />
+        </slot>
+      </div>
+
+      <div class="w-full text-center">
+        <span
+          v-if="!isRenaming"
+          @dblclick.stop="renameStart"
+          class="text-xs block truncate font-medium text-gray-700 dark:text-gray-200 px-1"
+          v-text="fileName"
+        />
+
+        <input
+          v-else
+          v-model="editableName"
+          class="text-xs truncate border border-primary-500 rounded px-1 w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 outline-none text-center"
+          @blur="renameCommit"
+          @keyup.enter="renameCommit"
+          @keyup.esc="renameCancel"
+          autofocus
+        />
+      </div>
+    </template>
+
+    <component
+      :is="menuImpl"
+      ref="contextMenuRef"
+      :file-name="fileName"
+      :window="window"
+      :is-directory="!!isDirectory"
+      :open-path-in-new-tab="openPathInNewTab"
+      @open="onFileOpen"
+      @rename="renameStart"
+    />
+  </div>
+</template>

package/src/runtime/components/explorer/FileIcon.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+const props = defineProps({
+  fileName: { type: String, required: true },
+  isDirectory: { type: Boolean, required: true },
+  layout: { type: String, required: true }
+});
+const imageIcon = "data:image/x-icon;base64,AAABAAIAICAQAAEABADoAgAAJgAAABAQEAABAAQAKAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAACHd3d3d3d3d3d3d3AAAAAAj/////////////9wAAAAAI//////////////cAAAAACP/////////////3AAAAAAj/////////////9wAAAAAI//////////////cAAAAACP/wAP/wAP/wAA/3AAAAAAj/83MAC3sAA3MP9wAAAAAI//O3t7e3t7ezD/cAAAAACP//O3MzMzM7MP/3AAAAAAj///Ow////Nw//9wAAAAAI///zcP///zsP//cAAAAACP//M7D/AAAAMP/3AAAAAAj//ztw8CKnAAD/9wAAAAAI//8zsKqvL3AA//cAAAAACP//83Cqr/KIAP/3AAAAAAj///OwqqqvOPsP9wAAAAAI//87cKqq/zuPsAcAAAAACP/zN7AAAAA3OPkQAAAAAAj/83t7e3t7e3MdmQAAAAAI//OzMzOzMzOzAdmQAAAACP/zM//zM//zMw8dmQAAAAj/////////////8dmQAAAI//////////////cdmQAACP//////////gAAAAdmQAAj//////////4/3gAAdmQAI//////////+PeAAAAdmQCP//////////h4AAAAAdmQj//////////4gAAAAAAdkI//////////+AAAAAAAARCIiIiIiIiIiIgAAAAAAAAAAAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAAfwAAAD8AAAAfAAAADwAAAAcAAAGDAAADwQAAB+AAAA/wAAAf+AAAP/8oAAAAEAAAACAAAAABAAQAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAh3d3d3d3AACP//////cAAI/wAAAA9wAAj/c3NzD3AACP8w//MPcAAI/3DyIA9wAAj/MCd4cHAACP9wqqOAEAAI/zCqowmRAAj/cAADD5kQCP83NzMPeZEI/////wAAmRj/////f4AJGP////94AAAIiIiIiIAAAAAAeIiAAH//8AB///AAf//wAHAKAAB70AAAe9AAAHIgAABwAAAAcACAAD/CIAAYgAAAAAAAAMAAAAH2b2AD8AAA==";
+const audioIcon = "data:image/x-icon;base64,AAABAAIAICAQAAEABADoAgAAJgAAABAQEAABAAQAKAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAIACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvwAAvwAAAL+/AL8AAAC/AL8Av78AAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHd3d3d3d3d3dwAAAAAAAAj///////////cAAAAAAAAI///////////3AAAAAAAACP//d///////9wAAAAAAAAj/93d///////cAAAAAAAAI/wB3d//////3AAAAAAAACPAwh3f//4//9wAAAAAAAAgDB3h3/4j///cAAAAAAABwOI/4d4j////3AAAAAAAHA7B/+Hj/////9wAAAAAAADvwf/h3//////cAAAAAADi/sA/4d//////3AAAAAAO3+/CA+HiIiP//9wAAAAADt7+wcPh3//////cAAAAAA/f78A/4d//////3AAAAAAAzv7B/+Hj/////9wAAAAAAADvwf/h/iP////cAAAAAAAADuIf4f/+I///3AAAAAAAACDsHd////4//9wAAAAAAAAjzgI////////cAAAAAAAAI/wD////////3AAAAAAAACP////////gAAAAAAAAAAAj////////4/4AAAAAAAAAI////////+PgAAAAAAAAACP////////iAAAAAAAAAAAj////////4AAAAAAAAAAAIiIiIiIiIiAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////AAAP/wAAD/8AAA//AAAP/wAAD/8AAA//AAAP/wAAD/8AAA/+AAAP/AAAD/gAAA/wAAAP8AAAD/AAAA/wAAAP+AAAD/4AAA//AAAP/wAAD/8AAA//AAAP/wAAD/8AAB//AAA//wAAf/8AAP//AAH///////////8oAAAAEAAAACAAAAABAAQAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvwAAvwAAAL+/AL8AAAC/AL8Av78AAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAACHd3d3d3AAAI//////cAAAgAD///9wAAADMI/4/3AAgDsPj4//cAADsH+P//9wC4vwD4+Ij3A/e/CPj///cAM/sH+Pj/9wADP4D4/4/3AAAD8Hj///cAAAg4D//wAAAACP////f4AAAI////94AAAAiIiIiIAA8AAAAPAAAADwAAAA8AAAAPAAAADAAAAAgAAAAAAAAAAAAAAAgAAAAMAAAADwAAAA8AAAAPABAADwAwAA8AcAAA==";
+const videoIcon = "data:image/x-icon;base64,AAABAAIAICAQAAEABADoAgAAJgAAABAQEAABAAQAKAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAIACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvwAAvwAAAL+/AL8AAAC/AL8Av78AAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHd3d3d3d3d3dwAAAAAAAAj///////////cAAAAAAAB4d3d3d3d3d//3AAAAAAAHeHd3d3d3d3f/9wAAAAAAAAAAAAAAAAB3//cAAAAACIiIiIiIiIiAd//3AAAAAAj/////////gHf/9wAAAAAI//n/zM/y/4B3//cAAAAACP+fn8//8v+Ad//3AAAAAAj/+f/8//L/gHf/9wAAAAAI/5+fz88i/4B3//cAAAAACP/5//z/8v+Ad//3AAAAAAj/////////gHf/9wAAAAAAAP8A/wD/AIB///cAAAAAAz8A/wD/AP8A///3AAAAAI/4CACIAIgAiP//9wAAAACLuAB3d/////////cAAAAACID/AHd3///////3AAAAAAAIAP8Ad3f/////9wAAAAAAAAgA/wB3d/////cAAAAAAAAI+AD/AHd3///3AAAAAAAACP/4AP8Af/gAAAAAAAAAAAj///gA/w/4/4AAAAAAAAAI////+ACP+PgAAAAAAAAACP/////4//iAAAAAAAAAAAj////////4AAAAAAAAAAAIiIiIiIiIiAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////AAAP/wAAD/8AAA/+AAAP/AAAD/gAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP4AAAD+AAAA/wAAAP/AAAD/8AAA//AAAP/wAAD/8AAB//AAA//wAAf/8AAP//AAH///////////8oAAAAEAAAACAAAAABAAQAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvwAAvwAAAL+/AL8AAAC/AL8Av78AAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAACHd3d3d3AAAI//////cAAAAAAAD/9wiIiIiIgP/3CP////+A//cI+Z/PL4D/9wj/////gP/3CPDw8PCA//cACAgICA//9wiwAP/////3CIj/AA////cAAIiP8P/wAAAACPiP//f4AAAI////94AAAAiIiIiIAA8AAAAPAAAADwAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAAPABAADwAwAA8AcAAA==";
+const iconMap: Record<string, string> = {
+  mp4: videoIcon,
+  webm: videoIcon,
+  mp3: audioIcon,
+  wav: audioIcon,
+  iso: "data:image/x-icon;base64,AAABAAEAICAQAAEABADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAId3d3d3d3d3d3AAAAAAAACP//////////9wAAAAAAAAj///////////cAAAAAAAAI///////////3AAAAAAAACP/3d3f/////9wAAAAAAAAj3d3d3f/////cAAAAAAAAIiAAHd3f////3AAAAAAAAiHd6oAd3f///9wAAAAAACHd3equwd3f///cAAAAAAI93d3q77gd3///3AAAAAACH93d6vucHd///9wAAAAAId393+r53cHf///cAAAAACHd3+Ajnd3B3///3AAAAAAh3d6Dwd3dwd///9wAAAAAId3roCHd3cHf///cAAAAACHeq63f3d3B////3AAAAAACKrrt3f3cHf///9wAAAAAAiu67d3f3D/////cAAAAAAAjru3d3cP/////3AAAAAAAAiLt3cA//////9wAAAAAAAAiIiI////////cAAAAAAAAI////////+AAAAAAAAAAACP////////j/gAAAAAAAAAj////////4+AAAAAAAAAAI////////+IAAAAAAAAAACP////////gAAAAAAAAAAAiIiIiIiIiIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////8AAA//AAAP/wAAD/8AAA//AAAP/wAAD/8AAA//AAAP/gAAD/wAAA/4AAAP+AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP+AAAD/gAAA/8AAAP/gAAD/8AAA//AAAP/wAAH/8AAD//AAB//wAA//8AAf///////////w==",
+  webp: imageIcon,
+  gif: imageIcon,
+  jpg: imageIcon,
+  png: imageIcon,
+  txt: "data:image/x-icon;base64,AAABAAIAICAQAAEABADoAgAAJgAAABAQEAABAAQAKAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAIACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvwAAvwAAAL+/AL8AAAC/AL8Av78AAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAACHd3d3d3d3d3d3dwcAAAAI//////////////9wcAAACP//////////////cHAAAAj/AAAA/////////3BwAAAI//////////////9wcAAACP8AAAD/////////cHAAAAj//////////////3BwAAAI//////////////9wcAAACP8AAAAAAAAAAAD/cHAAAAj//////////////3BwAAAI/wAAAAAAAAAAAP9wcAAACP//////////////cHAAAAj/AAAAAAAAAAAA/3BwAAAI//////////////9wcAAACP8AAAAAAAAAAAD/cHAAAAj//////////////3BwAAAI//////////////9wcAAACP8AAAD/////////cHAAAAj//////////////3BwAAAI//////////////9wcAAACP//////////////cHAAAAj/AAAA/////////3BwAAAI//////////////9wcAAACP8AAAD////w8AD/cHAAAAj//////////////3BwAAAI//////////////9wcAAACP//////////////cHAAAAjw/w/w/w/w/w/w/4BwAAAI8P8P8P8P8P8P8P+AcAAAAI+I+I+I+I+I+I+I+AAAAAAAAAAAAAAAAAAAAAAAAA8AAAH+AAAA/AAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAB8AAAAfAAAAH4AAAD/JJJL8oAAAAEAAAACAAAAABAAQAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvwAAvwAAAL+/AL8AAAC/AL8Av78AAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAh3d3d3d3AACP//////cAAI//////9wAAj/AAAA/3AACP//////cAAI/wAAAP9wAAj//////3AACP8AAAD/cAAI//////9wAAj/AA8A/3AACP//////cAAI//////9wAAjw8PDw8PAAAA+Pj4+PAAAAAAAAAAAAAAgA8AAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAACADwAA1V8AAA==",
+  pdf: "/icons/pdf.ico",
+  default: "data:image/x-icon;base64,AAABAAEAICAQAAEABADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAHd3d3d3d3d3d3d3dwAAAAAAAAAAAAAAAAAAAAcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////////wcAAAAA//////////////8HAAAAAP//////////////BwAAAAD//////////wAAAAAAAAAA//////////8P+HAAAAAAAP//////////D4cAAAAAAAD//////////whwAAAAAAAA//////////8HAAAAAAAAAP//////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAD4AAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAB/AAAAfwAAAH8AAAD/AAAB/wAAA/8AAAf/AAAP/wAAH/8AAD/w=="
+};
+const directoryIcon = "data:image/x-icon;base64,AAABAAIAICAQAAEABADoAgAAJgAAABAQEAABAAQAKAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACDMzMzMzMzMzMzMzMzMzMwj7e3t7e3t7e3t7e3t7e3wCHd3d3d3d3d4iIiIiIiIgACPt7e3t7e3gAAAAAAAAAAACPt7e3t7eAAAAAAAAAAAAACP/////4AAAAAAAAAAAAAACIiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////gAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGAAP//wAH//+AD///wB/////////////8oAAAAEAAAACAAAAABAAQAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAMDAwACAgIAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIiIiIiIiIgAj7e3t7e3uACPe3t7e3t4AI+3t7e3t7gAj3t7e3t7eACPt7e3t7e4AI97e3t7e3gAj7e3t7e3uACP///////4AIe3t7eIiIgACHt7eAAAAAAAiIiAAAAAAAAAAAAAAAAA//8AAP//AACAAQCgAAHOAAABzgAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAMAAID/AADB/wAA//8AAA==";
+
+const getFileExtension = (name: string) => name.split(".").pop()?.toLowerCase() ?? "";
+
+const iconSrc = computed(() => {
+  if (props.isDirectory) return directoryIcon;
+  const ext = getFileExtension(props.fileName);
+  return iconMap[ext] || iconMap.default;
+});
+</script>
+
+<template>
+  <img
+    :src="iconSrc"
+    draggable="false"
+    alt=""
+    class="mx-auto"
+  />
+</template>

package/src/runtime/components/explorer/FilePane.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex-1 min-h-0 relative flex overflow-auto">
+    <slot />
+  </div>
+</template>

package/src/runtime/components/explorer/Frame.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useSlots, computed, useAttrs } from 'vue'
+import Nav from './Nav.vue'
+
+const props = defineProps({
+  window: { type: Object, required: false },
+  content: { type: null, required: false },
+  chromePadding: { type: Boolean, required: false, default: true },
+  frameClass: { type: String, required: false },
+})
+
+defineEmits([
+  'drag:start',
+  'drag:move',
+  'drag:end',
+  'resize:start',
+  'resize:move',
+  'resize:end',
+])
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const windowRootClass = computed(
+  () => [attrs.class as string, props.frameClass].filter(Boolean),
+)
+const slots = useSlots()
+const hasHeaderBelowNavSlot = computed(
+  () => typeof slots['header-below-nav'] === 'function',
+)
+const hasNavSlot = computed(() => typeof slots.nav === 'function')
+</script>
+
+<template>
+  <DesktopCoreWindow
+    :class="windowRootClass"
+    :window="props.window"
+    :content="props.content"
+    v-show="props.window?.state?.active ?? true"
+    @drag:start="$emit('drag:start', $event)"
+    @drag:move="$emit('drag:move', $event)"
+    @drag:end="$emit('drag:end', $event)"
+    @resize:start="$emit('resize:start', $event)"
+    @resize:move="$emit('resize:move', $event)"
+    @resize:end="$emit('resize:end', $event)"
+  >
+    <div :class="['flex flex-col h-full bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg overflow-hidden', props.chromePadding === false ? '' : 'p-2']">
+      <div class="desktop-explorer-frame__header-stack">
+        <slot v-if="hasNavSlot" name="nav" />
+        <Nav v-else>
+          <template #prepend>
+            <slot name="nav-prepend" />
+          </template>
+          <template v-slot:title v-if="$slots['nav-title']">
+            <slot name="nav-title" />
+          </template>
+          <template #append>
+            <slot name="nav-append" />
+          </template>
+        </Nav>
+        <div
+          v-if="hasHeaderBelowNavSlot"
+          class="desktop-explorer-frame__header-below-nav"
+        >
+          <slot name="header-below-nav" />
+        </div>
+      </div>
+      <div class="flex-1 min-h-0 flex flex-col">
+        <slot />
+      </div>
+    </div>
+  </DesktopCoreWindow>
+</template>
+
+<style scoped>
+.desktop-explorer-frame__header-stack {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.desktop-explorer-frame__header-below-nav {
+  min-width: 0;
+}
+
+.owd-window.resizable-component {
+  box-sizing: border-box;
+  display: inline-block;
+  min-width: 160px;
+  min-height: 160px;
+  text-align: left;
+  cursor: default;
+}
+@media (max-width: 599px) {
+  .owd-window.resizable-component {
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    max-width: 100vw;
+    max-height: 100vh;
+    height: 100vh !important;
+    z-index: 9999999999 !important;
+  }
+}
+</style>

package/src/runtime/components/explorer/Nav.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { inject, useSlots, computed } from "vue"
+import { useToggleWindowMaximize } from "@owdproject/nuxt/runtime/composables/useToggleWindowMaximize"
+
+const windowController = inject<any>("windowController")
+const toggleWindowMaximize = useToggleWindowMaximize()
+const slots = useSlots()
+const hasCustomTitle = computed(() => typeof slots.title === "function")
+
+function onWindowMinimize() {
+  if (!windowController?.instanced) return
+  windowController.actions.minimize()
+}
+
+function onWindowMaximize() {
+  toggleWindowMaximize(windowController)
+}
+
+function onWindowNavDestroy() {
+  if (!windowController?.instanced) return
+  windowController.actions.destroy()
+}
+</script>
+
+<template>
+  <DesktopCoreWindowNav 
+    class="flex items-center justify-between px-3 py-1.5 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 select-none cursor-default"
+    @dblclick="onWindowMaximize"
+  >
+    <div class="flex items-center space-x-2 min-w-0">
+      <slot name="prepend" />
+
+      <slot v-if="hasCustomTitle" name="title" />
+
+      <template v-else>
+        <UIcon
+          v-if="windowController?.icon"
+          :name="windowController.icon"
+          class="w-4 h-4 text-gray-500 dark:text-gray-400 flex-shrink-0"
+        />
+
+        <span 
+          v-if="windowController?.title" 
+          class="text-xs font-semibold text-gray-700 dark:text-gray-300 truncate"
+          v-text="windowController?.title"
+        />
+      </template>
+    </div>
+
+    <div class="flex items-center space-x-1 flex-shrink-0">
+      <slot name="append" />
+
+      <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-slot:default
+        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-slot:default
+        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/components/explorer/SelectableArea.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref, onMounted, useTemplateRef, computed, watch } from 'vue'
+import { VueSelecto } from 'vue3-selecto'
+import { useExplorerExternalDrop } from '@owdproject/nuxt-module-fs/runtime/composables/useExplorerExternalDrop'
+import { explorerEntryAbsolutePath } from '@owdproject/nuxt-module-fs/runtime/utils/utilExplorerEntryPath'
+
+const props = defineProps({
+  fsExplorer: { type: Object, required: true },
+  dropEnabled: { type: Boolean, required: false },
+})
+
+const dropEnabled = computed(() => props.dropEnabled ?? true)
+const { isDragOver, onDragEnter, onDragOver, onDragLeave, onDrop } =
+  useExplorerExternalDrop(props.fsExplorer, {
+    enabled: () => dropEnabled.value,
+  })
+
+const selectoContainer = useTemplateRef('selectoContainer')
+const windowContentContainer = ref<any>()
+const container = typeof document !== 'undefined' ? document.body : undefined
+const files = ref<string[]>([])
+
+watch(
+  () => props.fsExplorer.selectedFiles.value,
+  (newSelected) => {
+    files.value = newSelected ? [...newSelected] : []
+  },
+  { deep: true, immediate: true }
+)
+
+function resolveEntryPath(fileName: string) {
+  return explorerEntryAbsolutePath(props.fsExplorer.basePath.value, fileName)
+}
+
+function onSelect(e: any) {
+  e.added.forEach((el: any) => {
+    const name = el.getAttribute('data-filename')
+    if (!name) return
+    const path = resolveEntryPath(name)
+    if (!files.value.includes(path)) {
+      files.value.push(path)
+    }
+    props.fsExplorer.selectFiles(files.value)
+  })
+
+  e.removed.forEach((el: any) => {
+    const name = el.getAttribute('data-filename')
+    if (!name) return
+    const path = resolveEntryPath(name)
+    const fileIndex = files.value.indexOf(path)
+    if (fileIndex > -1) {
+      files.value.splice(fileIndex, 1)
+    }
+    props.fsExplorer.selectFiles(files.value)
+  })
+}
+
+onMounted(() => {
+  const root = selectoContainer.value
+  if (root) {
+    windowContentContainer.value =
+      root.closest('.owd-window__content') ?? undefined
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="selectoContainer"
+    class="desktop-explorer-dropzone flex-1 flex flex-wrap p-4 select-none min-h-full items-start content-start"
+    :class="{ 'desktop-explorer-dropzone--active bg-blue-50/30 dark:bg-blue-900/10': isDragOver }"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <VueSelecto
+      v-if="container && windowContentContainer"
+      :rootContainer="windowContentContainer"
+      :dragContainer="windowContentContainer"
+      :selectableTargets='[".owd-file"]'
+      :selectByClick="true"
+      :selectFromInside="true"
+      :continueSelect="false"
+      toggleContinueSelect="ctrl"
+      :keyContainer="container"
+      :hitRate="60"
+      @select="onSelect"
+    />
+
+    <slot />
+  </div>
+</template>