@leavepulse/ui 0.77.2 → 0.78.0

package/dist/chunks/LpFileTree-BSx1kBoV.js

@@ -0,0 +1,735 @@
+import { defineComponent, ref, watch, shallowRef, computed, nextTick, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, withCtx, createElementVNode, normalizeClass, toHandlers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, h } from "vue";
+import { clamp } from "../composables/clamp.js";
+import { useLocale } from "../composables/useLocale.js";
+import { isElement } from "../composables/realm.js";
+import { withLoadedChildren, computeStats, formatSize, isFilterEmpty, filterTree, sortNodes, flattenVisible, rowWindow, renameProblem, nodeTrail, subtreeIds, rangeIds, topmostIds, canDrop, ancestorIds } from "../components/fileTree.js";
+import { _ as _sfc_main$4 } from "./LpBreadcrumbs-CIIBsygI.js";
+import { _ as _sfc_main$2 } from "./LpEmptyState-DurPF001.js";
+import { _ as _sfc_main$6 } from "./LpFileTreeNode-4dVmFHb3.js";
+import { _ as _sfc_main$3 } from "./LpInput-DL6HEJdi.js";
+import { _ as _sfc_main$5 } from "./LpScrollArea-ay4Xo_hg.js";
+import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
+import { usePersisted } from "../composables/usePersisted.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
+const _hoisted_1 = {
+  key: 2,
+  class: "flex h-full w-full min-w-0 flex-col"
+};
+const _hoisted_2 = ["aria-multiselectable"];
+const _hoisted_3 = {
+  key: 4,
+  class: "shrink-0 border-t border-line px-2 py-1.5 text-xs text-muted"
+};
+const __default__ = { inheritAttrs: false };
+const DEFAULT_ROW_HEIGHT = 28;
+const OVERSCAN_ROWS = 8;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpFileTree",
+  props: {
+    nodes: {},
+    selected: {},
+    expanded: {},
+    persist: {},
+    loadingIds: {},
+    checkable: { type: Boolean, default: false },
+    checked: {},
+    showSize: { type: Boolean, default: false },
+    showModified: { type: Boolean, default: false },
+    sort: { type: Boolean, default: true },
+    iconSize: { default: 15 },
+    loading: { type: Boolean, default: false },
+    skeletonRows: { default: 8 },
+    emptyLabel: {},
+    emptyDescription: {},
+    labels: {},
+    filter: {},
+    searchable: { type: Boolean },
+    query: {},
+    breadcrumb: { type: Boolean },
+    load: {},
+    multiple: { type: Boolean },
+    selection: {},
+    movable: { type: Boolean },
+    renamable: { type: Boolean },
+    virtual: { type: Boolean },
+    rowHeight: { default: DEFAULT_ROW_HEIGHT }
+  },
+  emits: ["update:selected", "update:expanded", "select", "open", "expand", "collapse", "update:checked", "summary", "update:query", "update:selection", "move", "rename", "load-error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const storedOpen = usePersisted(
+      () => props.expanded === void 0 && props.persist && `lp-file-tree:${props.persist}`,
+      null,
+      { validate: (value) => value === null || Array.isArray(value) && value.every((id) => typeof id === "string") }
+    );
+    const openIds = ref(new Set(props.expanded ?? storedOpen.value ?? []));
+    watch(
+      () => props.expanded,
+      (ids) => {
+        if (ids) openIds.value = new Set(ids);
+      }
+    );
+    watch(openIds, (ids) => {
+      if (props.expanded === void 0 && props.persist) storedOpen.value = [...ids];
+    });
+    const text = useLabels(
+      "fileTree",
+      {
+        empty: "No files",
+        emptyDescription: "This folder is empty.",
+        file: "file",
+        files: "files",
+        folder: "folder",
+        folders: "folders",
+        search: "Search files",
+        noMatches: "No matching files",
+        rename: "Rename",
+        path: "Path"
+      },
+      () => props.labels
+    );
+    const loadedChildren = shallowRef(/* @__PURE__ */ new Map());
+    const source = computed(() => withLoadedChildren(props.nodes, loadedChildren.value));
+    const ownLoading = ref(/* @__PURE__ */ new Set());
+    const loadingSet = computed(() => /* @__PURE__ */ new Set([...props.loadingIds ?? [], ...ownLoading.value]));
+    const checkedIds = ref(new Set(props.checked ?? []));
+    watch(
+      () => props.checked,
+      (ids) => {
+        if (ids) checkedIds.value = new Set(ids);
+      }
+    );
+    const index = computed(() => {
+      const byId2 = /* @__PURE__ */ new Map();
+      const parentOfId = /* @__PURE__ */ new Map();
+      function walk(list, parent) {
+        for (const node of list) {
+          byId2.set(node.id, node);
+          if (parent !== void 0) parentOfId.set(node.id, parent);
+          if (node.children) walk(node.children, node.id);
+        }
+      }
+      walk(source.value);
+      return { byId: byId2, parentOfId };
+    });
+    const byId = computed(() => index.value.byId);
+    const stats = computed(() => computeStats(source.value, checkedIds.value));
+    const locale = useLocale();
+    const summary = computed(() => {
+      let files = 0;
+      let dirs = 0;
+      let bytes = 0;
+      let sized = false;
+      function walk(list) {
+        for (const node of list) {
+          const stat = stats.value.get(node.id);
+          if (!stat || stat.state === "unchecked") continue;
+          if (node.kind === "file") {
+            files++;
+            if (node.size !== void 0) {
+              bytes += node.size;
+              sized = true;
+            }
+            continue;
+          }
+          dirs++;
+          if (stat.state === "checked" && stat.size !== void 0) {
+            bytes += stat.size;
+            sized = true;
+            files += stat.total;
+            countDirs(node.children ?? []);
+            continue;
+          }
+          walk(node.children ?? []);
+        }
+      }
+      function countDirs(list) {
+        for (const node of list) {
+          if (node.kind !== "dir") continue;
+          dirs++;
+          countDirs(node.children ?? []);
+        }
+      }
+      walk(source.value);
+      return {
+        files,
+        dirs,
+        bytes: sized ? bytes : void 0,
+        sizeLabel: sized ? formatSize(bytes, locale.value) : "—"
+      };
+    });
+    watch(summary, (value) => emit("summary", value), { immediate: true });
+    function setChecked(next) {
+      checkedIds.value = next;
+      emit("update:checked", [...next]);
+    }
+    function onCheck(node, value) {
+      if (node.disabled) return;
+      const next = new Set(checkedIds.value);
+      for (const id of subtreeIds(node)) {
+        const target = byId.value.get(id);
+        if (target?.disabled) continue;
+        if (value) next.add(id);
+        else next.delete(id);
+      }
+      let ancestorId = index.value.parentOfId.get(node.id);
+      while (ancestorId !== void 0) {
+        const ancestor = byId.value.get(ancestorId);
+        if (ancestor?.children?.length) {
+          const all = ancestor.children.every((c) => c.disabled || next.has(c.id));
+          if (all) next.add(ancestorId);
+          else next.delete(ancestorId);
+        }
+        ancestorId = index.value.parentOfId.get(ancestorId);
+      }
+      setChecked(next);
+    }
+    function checkAll() {
+      const next = /* @__PURE__ */ new Set();
+      for (const [id, node] of byId.value) if (!node.disabled) next.add(id);
+      setChecked(next);
+    }
+    function clearChecked() {
+      setChecked(/* @__PURE__ */ new Set());
+    }
+    const requested = /* @__PURE__ */ new Set();
+    const ownQuery = ref("");
+    const queryText = computed(() => props.query ?? ownQuery.value);
+    function setQuery(value) {
+      ownQuery.value = value;
+      emit("update:query", value);
+    }
+    const activeFilter = computed(() => ({ ...props.filter, query: queryText.value || props.filter?.query }));
+    const filtering = computed(() => !isFilterEmpty(activeFilter.value));
+    const filtered = computed(() => filterTree(source.value, activeFilter.value));
+    const closedWhileFiltering = ref(/* @__PURE__ */ new Set());
+    watch([() => props.filter, queryText], () => {
+      closedWhileFiltering.value = /* @__PURE__ */ new Set();
+    });
+    const shownOpen = computed(() => {
+      if (!filtering.value) return openIds.value;
+      const open = /* @__PURE__ */ new Set([...openIds.value, ...filtered.value.openIds]);
+      for (const id of closedWhileFiltering.value) open.delete(id);
+      return open;
+    });
+    const roots = computed(() => props.sort ? sortNodes(filtered.value.nodes) : filtered.value.nodes);
+    const rows = computed(() => flattenVisible(filtered.value.nodes, shownOpen.value, props.sort));
+    const visible = computed(() => rows.value.map((row) => row.node));
+    const root = ref(null);
+    const focusedId = ref(props.selected);
+    watch(
+      () => props.selected,
+      (id) => {
+        if (id) focusedId.value = id;
+      }
+    );
+    watch(
+      visible,
+      (rows2) => {
+        if (!rows2.length) {
+          focusedId.value = void 0;
+        } else if (!rows2.some((n) => n.id === focusedId.value)) {
+          const active = root.value?.ownerDocument.activeElement;
+          const hadFocus = isElement(active) && active.getAttribute("data-node-id") === focusedId.value;
+          focusedId.value = rows2[0].id;
+          if (hadFocus) void nextTick(() => focusRow(rows2[0].id));
+        }
+      },
+      { immediate: true }
+    );
+    function focusRowElement(id) {
+      const el = root.value?.querySelector(`[data-node-id="${CSS.escape(id)}"]`);
+      el?.focus();
+      el?.scrollIntoView({ block: "nearest" });
+    }
+    function focusRow(id) {
+      focusedId.value = id;
+      if (!props.virtual) {
+        focusRowElement(id);
+        return;
+      }
+      scrollToRow(id);
+      void nextTick(() => focusRowElement(id));
+    }
+    const scrollArea = ref(null);
+    const scrollTop = ref(0);
+    const viewportHeight = ref(0);
+    useResizeObserver(
+      () => props.virtual ? scrollArea.value?.viewportEl : null,
+      (_, el) => {
+        viewportHeight.value = el.clientHeight;
+      },
+      { immediate: true }
+    );
+    function onScroll(event) {
+      if (props.virtual) scrollTop.value = event.target.scrollTop;
+    }
+    function scrollToRow(id) {
+      const viewport = scrollArea.value?.viewportEl;
+      const at = rows.value.findIndex((row) => row.node.id === id);
+      if (!viewport || at < 0) return;
+      const top = at * props.rowHeight;
+      const bottom = top + props.rowHeight;
+      if (top < viewport.scrollTop) viewport.scrollTop = top;
+      else if (bottom > viewport.scrollTop + viewport.clientHeight) viewport.scrollTop = bottom - viewport.clientHeight;
+      scrollTop.value = viewport.scrollTop;
+    }
+    const mountedRows = computed(() => {
+      const { start, end } = rowWindow(scrollTop.value, viewportHeight.value, props.rowHeight, rows.value.length, OVERSCAN_ROWS);
+      const mounted = [];
+      for (let index2 = start; index2 < end; index2++) mounted.push({ row: rows.value[index2], index: index2 });
+      const focused = rows.value.findIndex((row) => row.node.id === focusedId.value);
+      if (focused >= 0 && (focused < start || focused >= end)) mounted.push({ row: rows.value[focused], index: focused });
+      return mounted;
+    });
+    function setExpanded(next) {
+      openIds.value = next;
+      emit("update:expanded", [...next]);
+    }
+    function expand(node) {
+      if (closedWhileFiltering.value.has(node.id)) {
+        const closed = new Set(closedWhileFiltering.value);
+        closed.delete(node.id);
+        closedWhileFiltering.value = closed;
+        if (filtered.value.openIds.has(node.id)) return;
+      }
+      if (node.kind !== "dir" || openIds.value.has(node.id)) return;
+      const next = new Set(openIds.value);
+      next.add(node.id);
+      setExpanded(next);
+      if (node.children === void 0 && !requested.has(node.id)) {
+        requested.add(node.id);
+        emit("expand", node);
+        void fetchChildren(node);
+      }
+    }
+    const fetches = /* @__PURE__ */ new Map();
+    function setFetching(id, on) {
+      const next = new Set(ownLoading.value);
+      if (on) next.add(id);
+      else next.delete(id);
+      ownLoading.value = next;
+    }
+    async function fetchChildren(node) {
+      if (!props.load) return;
+      const controller = new AbortController();
+      fetches.set(node.id, controller);
+      setFetching(node.id, true);
+      try {
+        const children = await props.load(node, controller.signal);
+        if (fetches.get(node.id) !== controller) return;
+        loadedChildren.value = new Map(loadedChildren.value).set(node.id, children);
+      } catch (error) {
+        if (fetches.get(node.id) !== controller) return;
+        requested.delete(node.id);
+        emit("load-error", node, error);
+      } finally {
+        if (fetches.get(node.id) === controller) {
+          fetches.delete(node.id);
+          setFetching(node.id, false);
+        }
+      }
+    }
+    function cancelFetch(id) {
+      const controller = fetches.get(id);
+      if (!controller) return;
+      fetches.delete(id);
+      controller.abort();
+      setFetching(id, false);
+      requested.delete(id);
+    }
+    onBeforeUnmount(() => {
+      for (const controller of fetches.values()) controller.abort();
+      fetches.clear();
+    });
+    function collapse(node) {
+      if (filtered.value.openIds.has(node.id)) {
+        closedWhileFiltering.value = new Set(closedWhileFiltering.value).add(node.id);
+      }
+      if (!openIds.value.has(node.id)) return;
+      cancelFetch(node.id);
+      if (node.children === void 0 && !loadingSet.value.has(node.id)) requested.delete(node.id);
+      const next = new Set(openIds.value);
+      next.delete(node.id);
+      setExpanded(next);
+      emit("collapse", node);
+    }
+    function onToggle(node) {
+      if (shownOpen.value.has(node.id)) collapse(node);
+      else expand(node);
+    }
+    function onSelect(node) {
+      if (node.disabled) return;
+      if (props.selected === node.id) {
+        emit("update:selected", "");
+        if (props.multiple) setPicked(/* @__PURE__ */ new Set());
+        return;
+      }
+      emit("update:selected", node.id);
+      if (props.multiple) {
+        pickAnchor = node.id;
+        setPicked(/* @__PURE__ */ new Set([node.id]));
+      }
+      emit("select", node);
+      if (node.kind === "file") emit("open", node);
+    }
+    const pickedIds = ref(new Set(props.selection ?? []));
+    watch(
+      () => props.selection,
+      (ids) => {
+        if (ids) pickedIds.value = new Set(ids);
+      }
+    );
+    let pickAnchor;
+    function setPicked(next) {
+      pickedIds.value = next;
+      emit("update:selection", [...next]);
+    }
+    function onPick(node, mode) {
+      const next = new Set(pickedIds.value);
+      if (mode === "range") {
+        for (const id of rangeIds(visible.value, pickAnchor, node.id)) next.add(id);
+      } else {
+        pickAnchor = node.id;
+        if (!next.delete(node.id)) next.add(node.id);
+      }
+      setPicked(next);
+    }
+    function extendPick(delta) {
+      pickAnchor ??= focusedId.value;
+      move(delta);
+      if (!focusedId.value) return;
+      const next = new Set(pickedIds.value);
+      for (const id of rangeIds(visible.value, pickAnchor, focusedId.value)) next.add(id);
+      setPicked(next);
+    }
+    let moving = [];
+    const dropTargetId = ref();
+    function onMoveStart(node) {
+      const ids = props.multiple && pickedIds.value.has(node.id) ? [...pickedIds.value] : [node.id];
+      moving = topmostIds(ids.filter((id) => byId.value.has(id)), index.value.parentOfId);
+    }
+    function onMoveOver(node, event) {
+      const allowed = canDrop(moving, node, index.value.parentOfId);
+      dropTargetId.value = allowed ? node.id : void 0;
+      if (!allowed) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    }
+    function onMoveLeave(node) {
+      if (dropTargetId.value === node.id) dropTargetId.value = void 0;
+    }
+    function onMoveEnd() {
+      moving = [];
+      dropTargetId.value = void 0;
+    }
+    function onMoveDrop(node) {
+      const target = byId.value.get(node.id);
+      if (target && canDrop(moving, target, index.value.parentOfId)) {
+        emit("move", { nodes: moving.flatMap((id) => byId.value.get(id) ?? []), target });
+      }
+      onMoveEnd();
+    }
+    const renaming = ref(null);
+    const siblingsOf = (node) => {
+      const parent = index.value.parentOfId.get(node.id);
+      return (parent === void 0 ? source.value : byId.value.get(parent)?.children) ?? [];
+    };
+    const renameInvalid = computed(() => {
+      const edit = renaming.value;
+      return !!edit && renameProblem(edit.value, edit.node, siblingsOf(edit.node)) !== null;
+    });
+    function startRename(id) {
+      const node = byId.value.get(id);
+      if (!props.renamable || !node || node.disabled) return;
+      focusedId.value = id;
+      renaming.value = { node, value: node.name };
+    }
+    function endRename(refocus) {
+      const id = renaming.value?.node.id;
+      renaming.value = null;
+      if (refocus && id) void nextTick(() => focusRow(id));
+    }
+    function commitRename(blurred = false) {
+      const edit = renaming.value;
+      if (!edit) return;
+      if (renameInvalid.value) {
+        if (blurred) endRename(false);
+        return;
+      }
+      const name = edit.value.trim();
+      if (name !== edit.node.name) emit("rename", edit.node, name);
+      endRename(!blurred);
+    }
+    function parentOf(id) {
+      const parentId = index.value.parentOfId.get(id);
+      return parentId ? visible.value.find((n) => n.id === parentId) : void 0;
+    }
+    function move(delta) {
+      const rows2 = visible.value;
+      if (!rows2.length) return;
+      const i = rows2.findIndex((n) => n.id === focusedId.value);
+      const next = rows2[clamp((i < 0 ? 0 : i) + delta, 0, rows2.length - 1)];
+      if (next) focusRow(next.id);
+    }
+    function current() {
+      return visible.value.find((n) => n.id === focusedId.value);
+    }
+    function onKeydown(e) {
+      const node = current();
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (props.multiple && e.shiftKey) extendPick(1);
+          else move(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (props.multiple && e.shiftKey) extendPick(-1);
+          else move(-1);
+          break;
+        case "F2":
+          if (!node || !props.renamable) return;
+          e.preventDefault();
+          startRename(node.id);
+          break;
+        case "a":
+          if (!props.multiple || !(e.ctrlKey || e.metaKey)) return;
+          e.preventDefault();
+          setPicked(/* @__PURE__ */ new Set([...pickedIds.value, ...visible.value.filter((row) => !row.disabled).map((row) => row.id)]));
+          break;
+        case "ArrowRight": {
+          if (!node) return;
+          e.preventDefault();
+          if (node.kind === "dir" && !shownOpen.value.has(node.id)) expand(node);
+          else if (node.kind === "dir" && node.children?.length) move(1);
+          break;
+        }
+        case "ArrowLeft": {
+          if (!node) return;
+          e.preventDefault();
+          if (node.kind === "dir" && shownOpen.value.has(node.id)) collapse(node);
+          else {
+            const parent = parentOf(node.id);
+            if (parent) focusRow(parent.id);
+          }
+          break;
+        }
+        case "Home":
+          e.preventDefault();
+          if (visible.value[0]) focusRow(visible.value[0].id);
+          break;
+        case "End": {
+          e.preventDefault();
+          const last = visible.value.at(-1);
+          if (last) focusRow(last.id);
+          break;
+        }
+        case " ": {
+          if (!node) return;
+          e.preventDefault();
+          if (props.checkable) {
+            onCheck(node, stats.value.get(node.id)?.state !== "checked");
+            break;
+          }
+          onSelect(node);
+          if (node.kind === "dir") onToggle(node);
+          break;
+        }
+        case "Enter": {
+          if (!node) return;
+          e.preventDefault();
+          onSelect(node);
+          if (node.kind === "dir") onToggle(node);
+          break;
+        }
+      }
+    }
+    function reveal(id) {
+      const next = new Set(openIds.value);
+      for (const ancestor of ancestorIds(source.value, id)) next.add(ancestor);
+      setExpanded(next);
+      emit("update:selected", id);
+      requestAnimationFrame(() => focusRow(id));
+    }
+    function expandAll() {
+      const next = new Set(openIds.value);
+      function walk(list) {
+        for (const node of list) {
+          if (node.kind === "dir" && node.children?.length) {
+            next.add(node.id);
+            walk(node.children);
+          }
+        }
+      }
+      walk(source.value);
+      setExpanded(next);
+    }
+    function collapseAll() {
+      setExpanded(/* @__PURE__ */ new Set());
+    }
+    function reload(id) {
+      const node = byId.value.get(id);
+      if (!node || !props.load) return;
+      cancelFetch(id);
+      void fetchChildren(node);
+    }
+    __expose({ reveal, expandAll, collapseAll, checkAll, clearChecked, summary, rename: startRename, reload });
+    const CrumbButton = (_, { slots }) => h("button", { type: "button" }, slots.default?.());
+    CrumbButton.props = ["to"];
+    const trail = computed(() => {
+      const id = props.selected || focusedId.value;
+      return props.breadcrumb && id ? nodeTrail(id, byId.value, index.value.parentOfId) : [];
+    });
+    const crumbs = computed(() => trail.value.map((node) => ({ label: node.name, to: node.id })));
+    const rowProps = computed(() => ({
+      expanded: shownOpen.value,
+      loading: loadingSet.value,
+      selectedId: props.selected,
+      focusedId: focusedId.value,
+      sort: props.sort,
+      iconSize: props.iconSize,
+      checkable: props.checkable,
+      checked: checkedIds.value,
+      stats: stats.value,
+      showSize: props.showSize,
+      showModified: props.showModified,
+      selectedIds: props.multiple ? pickedIds.value : void 0,
+      multiple: props.multiple,
+      movable: props.movable,
+      dropTargetId: dropTargetId.value,
+      renamingId: renaming.value?.node.id,
+      renameValue: renaming.value?.value,
+      renameInvalid: renameInvalid.value,
+      renameLabel: text.value.rename
+    }));
+    const rowEvents = {
+      select: onSelect,
+      toggle: onToggle,
+      focus: (node) => focusedId.value = node.id,
+      check: onCheck,
+      pick: onPick,
+      moveStart: onMoveStart,
+      moveOver: onMoveOver,
+      moveLeave: onMoveLeave,
+      moveDrop: onMoveDrop,
+      moveEnd: onMoveEnd,
+      renameInput: (value) => {
+        if (renaming.value) renaming.value = { ...renaming.value, value };
+      },
+      renameCommit: commitRename,
+      renameCancel: () => endRename(true)
+    };
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden"
+    );
+    return (_ctx, _cache) => {
+      return __props.loading ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        class: unref(rootClass)
+      }, unref(rest)), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.skeletonRows, (n) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: n,
+            class: "h-7 shrink-0",
+            style: normalizeStyle({ marginLeft: `${n % 3 * 14}px` })
+          }, null, 8, ["style"]);
+        }), 128))
+      ], 16)) : !roots.value.length && !filtering.value ? (openBlock(), createBlock(_sfc_main$2, {
+        key: 1,
+        icon: "lucide:folder-search",
+        title: __props.emptyLabel ?? unref(text).empty,
+        description: __props.emptyDescription ?? unref(text).emptyDescription
+      }, null, 8, ["title", "description"])) : (openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.searchable ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 0,
+          type: "search",
+          class: "mb-1 shrink-0",
+          "model-value": queryText.value,
+          placeholder: unref(text).search,
+          "aria-label": unref(text).search,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => setQuery($event ?? ""))
+        }, null, 8, ["model-value", "placeholder", "aria-label"])) : createCommentVNode("", true),
+        crumbs.value.length ? (openBlock(), createBlock(_sfc_main$4, {
+          key: 1,
+          class: "mb-1 shrink-0 text-xs",
+          items: crumbs.value,
+          as: CrumbButton,
+          labels: { nav: unref(text).path },
+          onNavigate: _cache[1] || (_cache[1] = (_, i) => reveal(trail.value[i].id))
+        }, null, 8, ["items", "labels"])) : createCommentVNode("", true),
+        !roots.value.length ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 2,
+          icon: "lucide:search-x",
+          title: unref(text).noMatches
+        }, null, 8, ["title"])) : (openBlock(), createBlock(_sfc_main$5, {
+          key: 3,
+          ref_key: "scrollArea",
+          ref: scrollArea,
+          class: "min-h-0 w-full min-w-0 flex-1",
+          onScroll
+        }, {
+          default: withCtx(() => [
+            createElementVNode("ul", {
+              ref_key: "root",
+              ref: root,
+              role: "tree",
+              "aria-multiselectable": __props.checkable || __props.multiple,
+              class: normalizeClass(["flex min-w-0 flex-col", __props.virtual ? "relative" : ""]),
+              style: normalizeStyle(__props.virtual ? { height: `${rows.value.length * __props.rowHeight}px` } : void 0),
+              onKeydown
+            }, [
+              __props.virtual ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(mountedRows.value, ({ row, index: at }) => {
+                return openBlock(), createBlock(_sfc_main$6, mergeProps({
+                  key: row.node.id,
+                  class: "absolute inset-x-0 top-0",
+                  style: { height: `${__props.rowHeight}px`, transform: `translateY(${at * __props.rowHeight}px)` },
+                  node: row.node,
+                  depth: row.depth,
+                  flat: "",
+                  "set-size": row.setSize,
+                  "pos-in-set": row.posInSet
+                }, { ref_for: true }, rowProps.value, toHandlers(rowEvents)), {
+                  row: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, slotProps))
+                  ]),
+                  _: 3
+                }, 16, ["style", "node", "depth", "set-size", "pos-in-set"]);
+              }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(roots.value, (node) => {
+                return openBlock(), createBlock(_sfc_main$6, mergeProps({
+                  key: node.id,
+                  node,
+                  depth: 0
+                }, { ref_for: true }, rowProps.value, toHandlers(rowEvents)), {
+                  row: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, slotProps))
+                  ]),
+                  _: 3
+                }, 16, ["node"]);
+              }), 128))
+            ], 46, _hoisted_2)
+          ]),
+          _: 3
+        }, 512)),
+        __props.checkable && (_ctx.$slots.summary || summary.value.files || summary.value.dirs) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps(summary.value)), () => [
+            createTextVNode(toDisplayString(summary.value.files) + " " + toDisplayString(summary.value.files === 1 ? unref(text).file : unref(text).files), 1),
+            summary.value.dirs ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createTextVNode(", " + toDisplayString(summary.value.dirs) + " " + toDisplayString(summary.value.dirs === 1 ? unref(text).folder : unref(text).folders), 1)
+            ], 64)) : createCommentVNode("", true),
+            summary.value.bytes !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(" · " + toDisplayString(summary.value.sizeLabel), 1)
+            ], 64)) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true)
+      ]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};