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

package/dist/runtime/components/explorer/FileEntry.d.vue.ts

@@ -0,0 +1,109 @@
+declare var __VLS_1: {
+    fileName: string;
+    isDirectory: boolean;
+    layout: string;
+}, __VLS_8: {
+    fileName: string;
+    isDirectory: boolean;
+    layout: string;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    basePath: {
+        type: StringConstructor;
+        required: true;
+    };
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+    selected: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    cutted: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    window: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    contextMenuComponent: {
+        type: null;
+        required: false;
+    };
+    openPathInNewTab: {
+        type: FunctionConstructor;
+        required: false;
+    };
+    dragEnabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    rename: (...args: any[]) => void;
+    openDirectory: (...args: any[]) => void;
+    openFile: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    basePath: {
+        type: StringConstructor;
+        required: true;
+    };
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+    selected: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    cutted: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    window: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    contextMenuComponent: {
+        type: null;
+        required: false;
+    };
+    openPathInNewTab: {
+        type: FunctionConstructor;
+        required: false;
+    };
+    dragEnabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>> & Readonly<{
+    onRename?: ((...args: any[]) => any) | undefined;
+    onOpenDirectory?: ((...args: any[]) => any) | undefined;
+    onOpenFile?: ((...args: any[]) => any) | undefined;
+}>, {
+    selected: boolean;
+    cutted: boolean;
+    dragEnabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,263 @@
+<script setup>
+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(null);
+const isDirectory = ref(false);
+const isFile = ref();
+const fileContent = ref(null);
+const contextMenuRef = ref();
+function fetchStatsAndContent(currentPath) {
+  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) {
+  contextMenuRef.value?.show(event);
+}
+function onAuxClick(event) {
+  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) {
+  if (!Number.isFinite(n) || n < 0) return "\u2014";
+  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) {
+  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 "\u2014";
+  return d.toLocaleString(void 0, {
+    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 "\u2014";
+  if (typeof pathStats.value.isFile === "function" && !pathStats.value.isFile()) return "\u2014";
+  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 = [
+    "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/dist/runtime/components/explorer/FileEntry.vue.d.ts

@@ -0,0 +1,109 @@
+declare var __VLS_1: {
+    fileName: string;
+    isDirectory: boolean;
+    layout: string;
+}, __VLS_8: {
+    fileName: string;
+    isDirectory: boolean;
+    layout: string;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    basePath: {
+        type: StringConstructor;
+        required: true;
+    };
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+    selected: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    cutted: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    window: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    contextMenuComponent: {
+        type: null;
+        required: false;
+    };
+    openPathInNewTab: {
+        type: FunctionConstructor;
+        required: false;
+    };
+    dragEnabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    rename: (...args: any[]) => void;
+    openDirectory: (...args: any[]) => void;
+    openFile: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    basePath: {
+        type: StringConstructor;
+        required: true;
+    };
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+    selected: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    cutted: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    window: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    contextMenuComponent: {
+        type: null;
+        required: false;
+    };
+    openPathInNewTab: {
+        type: FunctionConstructor;
+        required: false;
+    };
+    dragEnabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>> & Readonly<{
+    onRename?: ((...args: any[]) => any) | undefined;
+    onOpenDirectory?: ((...args: any[]) => any) | undefined;
+    onOpenFile?: ((...args: any[]) => any) | undefined;
+}>, {
+    selected: boolean;
+    cutted: boolean;
+    dragEnabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/explorer/FileIcon.d.vue.ts

@@ -0,0 +1,29 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    isDirectory: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    isDirectory: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,41 @@
+<script setup>
+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 = {
+  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) => 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/dist/runtime/components/explorer/FileIcon.vue.d.ts

@@ -0,0 +1,29 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    isDirectory: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    fileName: {
+        type: StringConstructor;
+        required: true;
+    };
+    isDirectory: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    layout: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/explorer/FilePane.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/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/dist/runtime/components/explorer/FilePane.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};