@aiquants/directory-tree 2.3.0 → 3.0.0

package/dist/index.js

@@ -1,655 +1,749 @@
-import et, { memo as Ye, useRef as fe, useCallback as C, useEffect as oe, useState as ie, useMemo as ee, Fragment as tt, useTransition as rt } from "react";
-import { VirtualScroll as nt } from "@aiquants/virtualscroll";
-import { FolderIcon as ot, DocumentTextIcon as st, ChevronDownIcon as at, ChevronRightIcon as lt } from "@heroicons/react/24/solid";
-import { FileIcon as it } from "@phosphor-icons/react";
-import { twMerge as Y } from "tailwind-merge";
-var xe = { exports: {} }, me = {};
-var $e;
-function ct() {
-  if ($e) return me;
-  $e = 1;
-  var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
-  function a(n, o, l) {
-    var s = null;
-    if (l !== void 0 && (s = "" + l), o.key !== void 0 && (s = "" + o.key), "key" in o) {
+import Ot, { useRef as he, useEffect as ae, useCallback as F, memo as We, useState as ne, useMemo as X, Fragment as Dt, useTransition as Lt } from "react";
+import { VirtualScroll as Ht, ScrollBar as $t } from "@aiquants/virtualscroll";
+import { twMerge as P } from "tailwind-merge";
+import { FolderIcon as Wt, DocumentTextIcon as Ft, ChevronDownIcon as Bt, ChevronRightIcon as Yt } from "@heroicons/react/24/solid";
+import { FileIcon as Gt } from "@phosphor-icons/react";
+var Te = { exports: {} }, ge = {};
+var mt;
+function Ut() {
+  if (mt) return ge;
+  mt = 1;
+  var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
+  function o(n, s, l) {
+    var a = null;
+    if (l !== void 0 && (a = "" + l), s.key !== void 0 && (a = "" + s.key), "key" in s) {
       l = {};
-      for (var m in o)
-        m !== "key" && (l[m] = o[m]);
-    } else l = o;
-    return o = l.ref, {
+      for (var m in s)
+        m !== "key" && (l[m] = s[m]);
+    } else l = s;
+    return s = l.ref, {
       $$typeof: e,
       type: n,
-      key: s,
-      ref: o !== void 0 ? o : null,
+      key: a,
+      ref: s !== void 0 ? s : null,
       props: l
     };
   }
-  return me.Fragment = r, me.jsx = a, me.jsxs = a, me;
+  return ge.Fragment = t, ge.jsx = o, ge.jsxs = o, ge;
 }
-var he = {};
-var De;
-function ut() {
-  return De || (De = 1, process.env.NODE_ENV !== "production" && (function() {
-    function e(t) {
-      if (t == null) return null;
-      if (typeof t == "function")
-        return t.$$typeof === q ? null : t.displayName || t.name || null;
-      if (typeof t == "string") return t;
-      switch (t) {
-        case u:
+var xe = {};
+var ft;
+function Vt() {
+  return ft || (ft = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(r) {
+      if (r == null) return null;
+      if (typeof r == "function")
+        return r.$$typeof === W ? null : r.displayName || r.name || null;
+      if (typeof r == "string") return r;
+      switch (r) {
+        case d:
           return "Fragment";
-        case j:
+        case O:
           return "Profiler";
-        case p:
+        case b:
           return "StrictMode";
-        case P:
+        case R:
           return "Suspense";
-        case T:
+        case $:
           return "SuspenseList";
-        case U:
+        case G:
           return "Activity";
       }
-      if (typeof t == "object")
-        switch (typeof t.tag == "number" && console.error(
+      if (typeof r == "object")
+        switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), t.$$typeof) {
-          case i:
+        ), r.$$typeof) {
+          case c:
             return "Portal";
-          case g:
-            return t.displayName || "Context";
-          case v:
-            return (t._context.displayName || "Context") + ".Consumer";
-          case d:
-            var f = t.render;
-            return t = t.displayName, t || (t = f.displayName || f.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
-          case A:
-            return f = t.displayName || null, f !== null ? f : e(t.type) || "Memo";
-          case X:
-            f = t._payload, t = t._init;
+          case S:
+            return r.displayName || "Context";
+          case x:
+            return (r._context.displayName || "Context") + ".Consumer";
+          case h:
+            var p = r.render;
+            return r = r.displayName, r || (r = p.displayName || p.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case D:
+            return p = r.displayName || null, p !== null ? p : e(r.type) || "Memo";
+          case k:
+            p = r._payload, r = r._init;
             try {
-              return e(t(f));
+              return e(r(p));
             } catch {
             }
         }
       return null;
     }
-    function r(t) {
-      return "" + t;
+    function t(r) {
+      return "" + r;
     }
-    function a(t) {
+    function o(r) {
       try {
-        r(t);
-        var f = !1;
+        t(r);
+        var p = !1;
       } catch {
-        f = !0;
+        p = !0;
       }
-      if (f) {
-        f = console;
-        var x = f.error, k = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
-        return x.call(
-          f,
+      if (p) {
+        p = console;
+        var T = p.error, _ = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return T.call(
+          p,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          k
-        ), r(t);
+          _
+        ), t(r);
       }
     }
-    function n(t) {
-      if (t === u) return "<>";
-      if (typeof t == "object" && t !== null && t.$$typeof === X)
+    function n(r) {
+      if (r === d) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === k)
         return "<...>";
       try {
-        var f = e(t);
-        return f ? "<" + f + ">" : "<...>";
+        var p = e(r);
+        return p ? "<" + p + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
-      var t = $.A;
-      return t === null ? null : t.getOwner();
+    function s() {
+      var r = L.A;
+      return r === null ? null : r.getOwner();
     }
     function l() {
       return Error("react-stack-top-frame");
     }
-    function s(t) {
-      if (V.call(t, "key")) {
-        var f = Object.getOwnPropertyDescriptor(t, "key").get;
-        if (f && f.isReactWarning) return !1;
+    function a(r) {
+      if (ee.call(r, "key")) {
+        var p = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (p && p.isReactWarning) return !1;
       }
-      return t.key !== void 0;
+      return r.key !== void 0;
     }
-    function m(t, f) {
-      function x() {
-        se || (se = !0, console.error(
+    function m(r, p) {
+      function T() {
+        C || (C = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          f
+          p
         ));
       }
-      x.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: x,
+      T.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: T,
         configurable: !0
       });
     }
-    function R() {
-      var t = e(this.type);
-      return S[t] || (S[t] = !0, console.error(
+    function E() {
+      var r = e(this.type);
+      return U[r] || (U[r] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), t = this.props.ref, t !== void 0 ? t : null;
+      )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function w(t, f, x, k, te, Q) {
-      var _ = x.ref;
-      return t = {
+    function v(r, p, T, _, q, Z) {
+      var j = T.ref;
+      return r = {
         $$typeof: I,
-        type: t,
-        key: f,
-        props: x,
-        _owner: k
-      }, (_ !== void 0 ? _ : null) !== null ? Object.defineProperty(t, "ref", {
+        type: r,
+        key: p,
+        props: T,
+        _owner: _
+      }, (j !== void 0 ? j : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: R
-      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        get: E
+      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(t, "_debugInfo", {
+      }), Object.defineProperty(r, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(t, "_debugStack", {
+      }), Object.defineProperty(r, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: te
-      }), Object.defineProperty(t, "_debugTask", {
+        value: q
+      }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Q
-      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+        value: Z
+      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function c(t, f, x, k, te, Q) {
-      var _ = f.children;
-      if (_ !== void 0)
-        if (k)
-          if (Z(_)) {
-            for (k = 0; k < _.length; k++)
-              h(_[k]);
-            Object.freeze && Object.freeze(_);
+    function i(r, p, T, _, q, Z) {
+      var j = p.children;
+      if (j !== void 0)
+        if (_)
+          if (z(j)) {
+            for (_ = 0; _ < j.length; _++)
+              f(j[_]);
+            Object.freeze && Object.freeze(j);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else h(_);
-      if (V.call(f, "key")) {
-        _ = e(t);
-        var J = Object.keys(f).filter(function(ce) {
-          return ce !== "key";
+        else f(j);
+      if (ee.call(p, "key")) {
+        j = e(r);
+        var Q = Object.keys(p).filter(function(me) {
+          return me !== "key";
         });
-        k = 0 < J.length ? "{key: someKey, " + J.join(": ..., ") + ": ...}" : "{key: someKey}", O[_ + k] || (J = 0 < J.length ? "{" + J.join(": ..., ") + ": ...}" : "{}", console.error(
+        _ = 0 < Q.length ? "{key: someKey, " + Q.join(": ..., ") + ": ...}" : "{key: someKey}", se[j + _] || (Q = 0 < Q.length ? "{" + Q.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          k,
           _,
-          J,
-          _
-        ), O[_ + k] = !0);
+          j,
+          Q,
+          j
+        ), se[j + _] = !0);
       }
-      if (_ = null, x !== void 0 && (a(x), _ = "" + x), s(f) && (a(f.key), _ = "" + f.key), "key" in f) {
-        x = {};
-        for (var re in f)
-          re !== "key" && (x[re] = f[re]);
-      } else x = f;
-      return _ && m(
-        x,
-        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
-      ), w(
-        t,
-        _,
-        x,
-        o(),
-        te,
-        Q
+      if (j = null, T !== void 0 && (o(T), j = "" + T), a(p) && (o(p.key), j = "" + p.key), "key" in p) {
+        T = {};
+        for (var B in p)
+          B !== "key" && (T[B] = p[B]);
+      } else T = p;
+      return j && m(
+        T,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      ), v(
+        r,
+        j,
+        T,
+        s(),
+        q,
+        Z
       );
     }
-    function h(t) {
-      y(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === X && (t._payload.status === "fulfilled" ? y(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
+    function f(r) {
+      g(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === k && (r._payload.status === "fulfilled" ? g(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
     }
-    function y(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === I;
+    function g(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === I;
     }
-    var E = et, I = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.portal"), u = /* @__PURE__ */ Symbol.for("react.fragment"), p = /* @__PURE__ */ Symbol.for("react.strict_mode"), j = /* @__PURE__ */ Symbol.for("react.profiler"), v = /* @__PURE__ */ Symbol.for("react.consumer"), g = /* @__PURE__ */ Symbol.for("react.context"), d = /* @__PURE__ */ Symbol.for("react.forward_ref"), P = /* @__PURE__ */ Symbol.for("react.suspense"), T = /* @__PURE__ */ Symbol.for("react.suspense_list"), A = /* @__PURE__ */ Symbol.for("react.memo"), X = /* @__PURE__ */ Symbol.for("react.lazy"), U = /* @__PURE__ */ Symbol.for("react.activity"), q = /* @__PURE__ */ Symbol.for("react.client.reference"), $ = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, Z = Array.isArray, G = console.createTask ? console.createTask : function() {
+    var w = Ot, I = /* @__PURE__ */ Symbol.for("react.transitional.element"), c = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), b = /* @__PURE__ */ Symbol.for("react.strict_mode"), O = /* @__PURE__ */ Symbol.for("react.profiler"), x = /* @__PURE__ */ Symbol.for("react.consumer"), S = /* @__PURE__ */ Symbol.for("react.context"), h = /* @__PURE__ */ Symbol.for("react.forward_ref"), R = /* @__PURE__ */ Symbol.for("react.suspense"), $ = /* @__PURE__ */ Symbol.for("react.suspense_list"), D = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), G = /* @__PURE__ */ Symbol.for("react.activity"), W = /* @__PURE__ */ Symbol.for("react.client.reference"), L = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, z = Array.isArray, J = console.createTask ? console.createTask : function() {
       return null;
     };
-    E = {
-      react_stack_bottom_frame: function(t) {
-        return t();
+    w = {
+      react_stack_bottom_frame: function(r) {
+        return r();
       }
     };
-    var se, S = {}, D = E.react_stack_bottom_frame.bind(
-      E,
+    var C, U = {}, N = w.react_stack_bottom_frame.bind(
+      w,
       l
-    )(), L = G(n(l)), O = {};
-    he.Fragment = u, he.jsx = function(t, f, x) {
-      var k = 1e4 > $.recentlyCreatedOwnerStacks++;
-      return c(
-        t,
-        f,
-        x,
+    )(), H = J(n(l)), se = {};
+    xe.Fragment = d, xe.jsx = function(r, p, T) {
+      var _ = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return i(
+        r,
+        p,
+        T,
         !1,
-        k ? Error("react-stack-top-frame") : D,
-        k ? G(n(t)) : L
+        _ ? Error("react-stack-top-frame") : N,
+        _ ? J(n(r)) : H
       );
-    }, he.jsxs = function(t, f, x) {
-      var k = 1e4 > $.recentlyCreatedOwnerStacks++;
-      return c(
-        t,
-        f,
-        x,
+    }, xe.jsxs = function(r, p, T) {
+      var _ = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return i(
+        r,
+        p,
+        T,
         !0,
-        k ? Error("react-stack-top-frame") : D,
-        k ? G(n(t)) : L
+        _ ? Error("react-stack-top-frame") : N,
+        _ ? J(n(r)) : H
       );
     };
-  })()), he;
+  })()), xe;
 }
-var Le;
-function dt() {
-  return Le || (Le = 1, process.env.NODE_ENV === "production" ? xe.exports = ct() : xe.exports = ut()), xe.exports;
+var ht;
+function zt() {
+  return ht || (ht = 1, process.env.NODE_ENV === "production" ? Te.exports = Ut() : Te.exports = Vt()), Te.exports;
 }
-var N = dt();
-const ft = (e, r, a) => {
+var y = zt();
+const Re = 20, be = 16, yt = 12, A = {
+  container: "directory-tree-container relative h-full transition-opacity duration-300 overflow-y-hidden pb-[5px] pr-[3px]",
+  containerPending: "opacity-70",
+  entry: "directory-tree-entry flex items-center cursor-pointer relative select-none",
+  // ホバー時のスタイル（ライト/ダークモード対応）
+  entryHover: P("directory-tree-entry--hover hover:bg-gray-400/15", "dark:hover:bg-gray-200/10"),
+  // 選択時のスタイル（ライト/ダークモード対応）
+  entrySelected: P("directory-tree-entry--selected bg-blue-400/10", "dark:bg-blue-400/15"),
+  // アイテム選択時のスタイル（ライト/ダークモード対応）
+  entryItemSelected: P("directory-tree-entry--item-selected bg-blue-400/20 shadow-[0_0_0_1px_rgba(59,130,246,0.3)]", "dark:bg-blue-400/25 dark:shadow-[0_0_0_1px_rgba(96,165,250,0.4)]"),
+  // アイコンのスタイル
+  expandIcon: P("directory-tree-expand-icon w-5 h-5 flex-shrink-0 flex items-center justify-center", "text-gray-500", "dark:text-gray-400"),
+  expandIconSelected: P("directory-tree-expand-icon--selected text-blue-700", "dark:text-blue-400"),
+  typeIcon: P("directory-tree-type-icon w-5 h-5 flex-shrink-0 flex items-center justify-center", "text-gray-500", "dark:text-gray-400"),
+  typeIconSelected: P("directory-tree-type-icon--selected text-blue-700", "dark:text-blue-400"),
+  // テキストのスタイル
+  name: P("directory-tree-name overflow-hidden text-ellipsis whitespace-nowrap ml-1", "text-gray-700", "dark:text-gray-200"),
+  nameDirectory: "directory-tree-name--directory",
+  nameSelected: P("directory-tree-name--selected text-blue-800 font-medium", "dark:text-blue-300")
+}, gt = (e) => e.slice((e.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase(), xt = ({ isDirectory: e, isExpanded: t, showExpandIcons: o, useCanvasExpandIcons: n, expandIconSize: s }) => {
+  const l = s ? { width: s, height: s } : void 0, a = s ? "" : "h-4 w-4";
+  return !(o && e) || n ? /* @__PURE__ */ y.jsx("span", { className: a, style: l, "aria-hidden": "true" }) : t ? /* @__PURE__ */ y.jsx(Bt, { className: a, style: l }) : /* @__PURE__ */ y.jsx(Yt, { className: a, style: l });
+}, He = (e, t) => {
+  if (e == null || typeof e == "boolean") return null;
+  if (typeof e == "function")
+    return console.warn(`[DirectoryTree] Function returned by renderer for "${t}". Return a node.`), null;
+  if (typeof e == "object") {
+    if ("then" in e)
+      return console.warn(`[DirectoryTree] Promise returned for "${t}". Not supported.`), null;
+    if (Array.isArray(e)) {
+      const n = e.map((s) => He(s, t)).filter(Boolean);
+      return n.length ? n : null;
+    }
+    const o = e.type;
+    if (o && o.$$typeof === /* @__PURE__ */ Symbol.for("react.lazy"))
+      return console.warn(`[DirectoryTree] Lazy component for "${t}". Not supported.`), null;
+  }
+  return e;
+}, Et = (e, t) => {
+  const { entry: o, isDirectory: n, isExpanded: s, extension: l } = e;
+  let a;
+  return o.icon !== void 0 ? a = o.icon : n ? a = s && t?.directoryExpanded || t?.directory || /* @__PURE__ */ y.jsx(Wt, { className: "h-4 w-4" }) : l && t?.fileByExtension?.[l] ? a = t.fileByExtension[l] : a = t?.file || (l === "md" ? /* @__PURE__ */ y.jsx(Ft, { className: "h-4 w-4" }) : /* @__PURE__ */ y.jsx(Gt, { className: "h-4 w-4" })), He(typeof a == "function" ? a(e) : a, o.absolutePath);
+}, Xt = 500, wt = ({ entry: e, isDirectory: t, isExpanded: o, isItemSelected: n, selectionMode: s, onSelectionChange: l, onEntryClick: a, toggleDirectory: m, onToggleDirectoryRecursive: E }) => {
+  const v = he(null);
+  return ae(
+    () => () => {
+      v.current && window.clearTimeout(v.current);
+    },
+    []
+  ), F(
+    (i) => {
+      i.stopPropagation(), s !== "none" && !t && l && l(e, !n);
+      let f = !1;
+      a({
+        entry: e,
+        isDirectory: t,
+        isExpanded: o,
+        preventDefault: () => {
+          f = !0;
+        }
+      }), !(!t || f) && (v.current ? (window.clearTimeout(v.current), v.current = null, E(e)) : v.current = window.setTimeout(() => {
+        m(e.absolutePath), v.current = null;
+      }, Xt));
+    },
+    [t, e, o, E, m, a, s, l, n]
+  );
+}, St = (e) => e === "right" ? "dt-grid-cell--right" : e === "center" ? "dt-grid-cell--center" : "", pt = (e, t) => e.children !== void 0 && t(e.absolutePath), Nt = (e, t) => ({
+  width: e,
+  gridTemplateColumns: t
+}), It = We(
+  ({
+    entry: e,
+    indentLevel: t,
+    rowHeight: o,
+    isDirOpen: n,
+    columns: s,
+    numericTemplate: l,
+    numericTotal: a,
+    nameWidth: m,
+    rowClassName: E,
+    selection: { onEntryClick: v, selectedPath: i, mode: f = "none", selectedItems: g, onSelectionChange: w },
+    expansion: { toggleDirectory: I, onToggleDirectoryRecursive: c },
+    visual: { iconOverrides: d, showExpandIcons: b = !0, showDirectoryIcons: O = !0, showFileIcons: x = !0, useCanvasExpandIcons: S = !1, expandIconSize: h, highlightStyles: R }
+  }) => {
+    const [$, D] = ne(!1), k = e.children !== void 0, G = k && n(e.absolutePath), W = e.absolutePath === i, L = !k && !!g?.has(e.absolutePath), ee = k ? void 0 : gt(e.name), z = wt({ entry: e, isDirectory: k, isExpanded: G, isItemSelected: L, selectionMode: f, onSelectionChange: w, onEntryClick: v, toggleDirectory: I, onToggleDirectoryRecursive: c }), J = $ ? R?.hoverClassName !== void 0 ? R.hoverClassName : A.entryHover : "", C = (() => {
+      if (k) {
+        if (W) return R?.directorySelectedClassName !== void 0 ? R.directorySelectedClassName : A.entrySelected;
+      } else if (W || L)
+        return R?.itemSelectedClassName !== void 0 ? R.itemSelectedClassName : P(W && A.entrySelected, L && A.entryItemSelected);
+      return "";
+    })(), U = typeof E == "function" ? E(e) : E, N = P("dt-grid-row cursor-pointer select-none", J, C, U, e.className), H = P(A.expandIcon, (W || L) && A.expandIconSelected), se = P(A.typeIcon, (W || L) && A.typeIconSelected), r = P("dt-grid-name-label ml-1", "text-gray-700 dark:text-gray-200", k && A.nameDirectory, (W || L) && A.nameSelected), p = xt({ isDirectory: k, isExpanded: G, showExpandIcons: b, useCanvasExpandIcons: S, expandIconSize: h }), T = (k ? O : x) ? Et({ entry: e, isDirectory: k, isExpanded: G, isSelected: W, isItemSelected: L, extension: ee }, d) : null, _ = { indentLevel: t, isDirectory: k, isExpanded: G }, [q, ...Z] = s, j = q?.render ? q.render(e, _) : e.label ?? e.name, Q = {
+      ...$ ? R?.hoverStyle : {},
+      ...k && W ? R?.directorySelectedStyle : {},
+      ...!k && (W || L) ? R?.itemSelectedStyle : {}
+    };
+    return /* @__PURE__ */ y.jsxs(
+      "div",
+      {
+        className: N,
+        style: { height: o, ...Q, ...e.style },
+        role: "row",
+        "aria-expanded": k ? G : void 0,
+        "aria-level": t + 1,
+        "data-entry-type": k ? "directory" : "file",
+        "data-entry-expanded": k ? String(G) : void 0,
+        "data-entry-selected": W ? "true" : void 0,
+        "data-entry-item-selected": L ? "true" : void 0,
+        onClick: z,
+        onMouseEnter: () => D(!0),
+        onMouseLeave: () => D(!1),
+        onKeyDown: (B) => B.key === "Enter" && z(B),
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ y.jsxs("div", { className: P("dt-grid-name-cell", q?.className), role: "gridcell", style: { width: m, paddingLeft: Math.max(0, t * be) }, children: [
+            (b || S) && /* @__PURE__ */ y.jsx("span", { className: H, children: p }),
+            (k ? O : x) && /* @__PURE__ */ y.jsx("span", { className: se, children: T }),
+            /* @__PURE__ */ y.jsx("span", { className: r, children: j })
+          ] }),
+          Z.length > 0 && /* @__PURE__ */ y.jsx("div", { className: "dt-grid-numeric-viewport", children: /* @__PURE__ */ y.jsx("div", { className: "dt-grid-numeric-track", style: Nt(a, l), children: Z.map((B) => /* @__PURE__ */ y.jsx("div", { className: P("dt-grid-cell", St(B.align), B.className), role: "gridcell", children: B.render ? B.render(e, _) : null }, B.key)) }) })
+        ]
+      }
+    );
+  },
+  (e, t) => {
+    if (e.entry !== t.entry) return !1;
+    const o = pt(e.entry, e.isDirOpen), n = pt(t.entry, t.isDirOpen);
+    return e.indentLevel === t.indentLevel && e.rowHeight === t.rowHeight && o === n && e.columns === t.columns && e.numericTemplate === t.numericTemplate && e.numericTotal === t.numericTotal && e.nameWidth === t.nameWidth && e.rowClassName === t.rowClassName && e.selection.selectedPath === t.selection.selectedPath && e.selection.mode === t.selection.mode && e.selection.selectedItems === t.selection.selectedItems && e.visual === t.visual;
+  }
+);
+It.displayName = "DirectoryTreeGridRow";
+const kt = ({
+  kind: e,
+  columns: t,
+  numericTemplate: o,
+  numericTotal: n,
+  nameWidth: s,
+  scrollBarWidth: l,
+  className: a,
+  nameContent: m,
+  renderCell: E
+}) => {
+  const [, ...v] = t, i = e === "header" ? "dt-grid-name-header" : "dt-grid-name-footer", f = e === "header" ? "dt-grid-header" : "dt-grid-footer", g = e === "header" ? "columnheader" : "gridcell";
+  return /* @__PURE__ */ y.jsxs("div", { className: P(f, "text-gray-600 dark:text-gray-300", a), role: "row", children: [
+    /* @__PURE__ */ y.jsx("div", { className: P(i, "px-1"), role: g, style: { width: s }, children: m }),
+    v.length > 0 && /* @__PURE__ */ y.jsx("div", { className: "dt-grid-numeric-viewport", children: /* @__PURE__ */ y.jsx("div", { className: "dt-grid-numeric-track", style: Nt(n, o), children: v.map((w) => /* @__PURE__ */ y.jsx("div", { className: P("dt-grid-cell", St(w.align), w.className), role: g, children: E(w) }, w.key)) }) }),
+    /* @__PURE__ */ y.jsx("div", { className: "dt-grid-scrollbar-spacer", style: { width: l }, "aria-hidden": "true" })
+  ] });
+}, Jt = ({ columns: e, className: t, ...o }) => /* @__PURE__ */ y.jsx(kt, { kind: "header", columns: e, className: t, nameContent: e[0]?.header ?? null, renderCell: (n) => n.header ?? null, ...o }), vt = (e, t) => typeof e == "function" ? e(t) : e ?? null, qt = ({ columns: e, allEntries: t, className: o, ...n }) => /* @__PURE__ */ y.jsx(kt, { kind: "footer", columns: e, className: o, nameContent: vt(e[0]?.footer, t), renderCell: (s) => vt(s.footer, t), ...n }), Zt = 240, Tt = 96, Rt = 12, $e = (e, t) => {
+  const o = e?.width;
+  return typeof o == "number" && Number.isFinite(o) && o > 0 ? o : t;
+}, Qt = (e) => e.slice(1).map((t) => `${$e(t, Tt)}px`).join(" "), Kt = ({ measuredWidth: e, columns: t, scrollBarWidth: o = Rt }) => {
+  const n = $e(t[0], Zt), s = t.slice(1).reduce((E, v) => E + $e(v, Tt), 0), l = Number.isFinite(e) && e > 0 ? e : 0, a = Math.max(0, l - n - Math.max(0, o)), m = Math.max(0, s - a);
+  return { nameWidth: n, numericTotal: s, numericVisible: a, maxHScroll: m };
+}, Le = (e, t) => !Number.isFinite(e) || e < 0 ? 0 : e > t ? t : e, er = (e) => {
+  const t = [], o = (n) => {
+    for (const s of n)
+      t.push(s), s.children && s.children.length > 0 && o(s.children);
+  };
+  return o(e), t;
+}, tr = (e, t, o) => {
   const n = [];
-  for (let o = r; o < a; o++) {
-    const l = e[o];
+  for (let s = t; s < o; s++) {
+    const l = e[s];
     if (!(!l || l.length === 0))
-      for (const s of l)
-        n.push(s);
+      for (const a of l)
+        n.push(a);
   }
   return n;
-}, mt = (e, r, a) => {
+}, rr = (e, t, o) => {
   const n = [];
-  for (let o = r; o < a; o++) {
-    const l = e[o];
+  for (let s = t; s < o; s++) {
+    const l = e[s];
     if (!(!l || l.length === 0))
-      for (const s of l)
-        n.push(s);
+      for (const a of l)
+        n.push(a);
   }
   return n;
-}, ht = (e, r, a, n) => {
-  const o = Math.max(1, Math.floor(r * n)), l = Math.max(1, Math.floor(a * n));
-  (e.width !== o || e.height !== l) && (e.width = o, e.height = l);
-  const s = e.style;
-  s.width !== `${r}px` && (s.width = `${r}px`), s.height !== `${a}px` && (s.height = `${a}px`);
-}, yt = (e, r, a) => {
-  e.lineWidth = a, e.beginPath();
-  for (const n of r)
+}, nr = (e, t, o, n) => {
+  const s = Math.max(1, Math.floor(t * n)), l = Math.max(1, Math.floor(o * n));
+  (e.width !== s || e.height !== l) && (e.width = s, e.height = l);
+  const a = e.style;
+  a.width !== `${t}px` && (a.width = `${t}px`), a.height !== `${o}px` && (a.height = `${o}px`);
+}, sr = (e, t, o) => {
+  e.lineWidth = o, e.beginPath();
+  for (const n of t)
     e.moveTo(n.x1, n.y1), e.lineTo(n.x2, n.y2);
   e.stroke();
-}, pt = (e, r) => {
-  const a = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
-  if (!a)
+}, or = (e, t) => {
+  const o = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+  if (!o)
     return null;
-  let n = a[1];
+  let n = o[1];
   n.length === 3 && (n = n.split("").map((m) => m + m).join(""));
-  const o = Number.parseInt(n.slice(0, 2), 16), l = Number.parseInt(n.slice(2, 4), 16), s = Number.parseInt(n.slice(4, 6), 16);
-  return `rgba(${o}, ${l}, ${s}, ${r})`;
-}, bt = (e, r, a, n) => {
-  if (r.length === 0)
+  const s = Number.parseInt(n.slice(0, 2), 16), l = Number.parseInt(n.slice(2, 4), 16), a = Number.parseInt(n.slice(4, 6), 16);
+  return `rgba(${s}, ${l}, ${a}, ${t})`;
+}, ar = (e, t, o, n) => {
+  if (t.length === 0)
     return;
-  const o = pt(a, 0.14), l = e.strokeStyle, s = e.fillStyle, m = e.lineWidth, R = e.lineCap, w = e.lineJoin;
-  e.strokeStyle = a, e.lineCap = "round", e.lineJoin = "round";
-  for (const c of r) {
-    const h = n ?? c.size, y = Math.max(0, h / 2), E = Math.max(1, Math.round(h * 0.08)), I = Math.max(1, Math.round(h * 0.14)), i = Math.max(0, y - E * 0.8), u = Math.max(0, i * 0.55);
-    o && (e.fillStyle = o, e.beginPath(), e.arc(c.centerX, c.centerY, i, 0, Math.PI * 2), e.fill()), e.lineWidth = E, e.beginPath(), e.arc(c.centerX, c.centerY, Math.max(0, y - E * 0.3), 0, Math.PI * 2), e.stroke(), e.lineWidth = I, e.beginPath(), e.moveTo(c.centerX - u, c.centerY), e.lineTo(c.centerX + u, c.centerY), e.stroke(), c.isExpanded || (e.beginPath(), e.moveTo(c.centerX, c.centerY - u), e.lineTo(c.centerX, c.centerY + u), e.stroke());
+  const s = or(o, 0.14), l = e.strokeStyle, a = e.fillStyle, m = e.lineWidth, E = e.lineCap, v = e.lineJoin;
+  e.strokeStyle = o, e.lineCap = "round", e.lineJoin = "round";
+  for (const i of t) {
+    const f = n ?? i.size, g = Math.max(0, f / 2), w = Math.max(1, Math.round(f * 0.08)), I = Math.max(1, Math.round(f * 0.14)), c = Math.max(0, g - w * 0.8), d = Math.max(0, c * 0.55);
+    s && (e.fillStyle = s, e.beginPath(), e.arc(i.centerX, i.centerY, c, 0, Math.PI * 2), e.fill()), e.lineWidth = w, e.beginPath(), e.arc(i.centerX, i.centerY, Math.max(0, g - w * 0.3), 0, Math.PI * 2), e.stroke(), e.lineWidth = I, e.beginPath(), e.moveTo(i.centerX - d, i.centerY), e.lineTo(i.centerX + d, i.centerY), e.stroke(), i.isExpanded || (e.beginPath(), e.moveTo(i.centerX, i.centerY - d), e.lineTo(i.centerX, i.centerY + d), e.stroke());
   }
-  e.strokeStyle = l, e.fillStyle = s, e.lineWidth = m, e.lineCap = R, e.lineJoin = w;
-}, Be = Ye(({ segmentsByItem: e, glyphsByItem: r, itemHeight: a, width: n, viewportHeight: o, scrollPosition: l, color: s = "#a0aec0", strokeWidth: m = 1, renderStartIndex: R, renderEndIndex: w, lookaheadEndIndex: c, devicePixelRatio: h, expandGlyphColor: y, expandGlyphSize: E }) => {
-  const I = fe(null), i = fe(null), u = fe({
+  e.strokeStyle = l, e.fillStyle = a, e.lineWidth = m, e.lineCap = E, e.lineJoin = v;
+}, Ct = We(({ segmentsByItem: e, glyphsByItem: t, itemHeight: o, width: n, viewportHeight: s, scrollPosition: l, color: a = "#a0aec0", strokeWidth: m = 1, renderStartIndex: E, renderEndIndex: v, lookaheadEndIndex: i, devicePixelRatio: f, expandGlyphColor: g, expandGlyphSize: w }) => {
+  const I = he(null), c = he(null), d = he({
     segmentsByItem: e,
-    glyphsByItem: r,
-    itemHeight: a,
+    glyphsByItem: t,
+    itemHeight: o,
     width: n,
-    viewportHeight: o,
+    viewportHeight: s,
     scrollPosition: l,
-    color: s,
+    color: a,
     strokeWidth: m,
-    renderStartIndex: R,
-    renderEndIndex: w,
-    lookaheadEndIndex: c,
-    devicePixelRatio: h,
-    expandGlyphColor: y,
-    expandGlyphSize: E
-  }), p = C(() => {
-    i.current = null;
-    const v = I.current;
-    if (!v)
+    renderStartIndex: E,
+    renderEndIndex: v,
+    lookaheadEndIndex: i,
+    devicePixelRatio: f,
+    expandGlyphColor: g,
+    expandGlyphSize: w
+  }), b = F(() => {
+    c.current = null;
+    const x = I.current;
+    if (!x)
       return;
-    const g = v.getContext("2d");
-    if (!g)
+    const S = x.getContext("2d");
+    if (!S)
       return;
-    const d = u.current;
-    if (d.width <= 0 || d.viewportHeight <= 0) {
-      g.clearRect(0, 0, v.width, v.height);
+    const h = d.current;
+    if (h.width <= 0 || h.viewportHeight <= 0) {
+      S.clearRect(0, 0, x.width, x.height);
       return;
     }
-    const P = Number.isFinite(d.devicePixelRatio ?? NaN) ? d.devicePixelRatio : typeof window < "u" && window.devicePixelRatio || 1;
-    ht(v, d.width, d.viewportHeight, P);
-    const T = d.segmentsByItem.length, A = typeof d.renderStartIndex == "number" && Number.isFinite(d.renderStartIndex) ? Math.max(0, Math.floor(d.renderStartIndex)) : Math.max(0, Math.floor(d.scrollPosition / d.itemHeight)), X = Math.min(T, Math.ceil((d.scrollPosition + d.viewportHeight) / d.itemHeight)), U = (() => {
-      if (typeof d.renderEndIndex == "number" && Number.isFinite(d.renderEndIndex)) {
-        const Z = Math.floor(d.renderEndIndex);
-        return Math.max(Math.min(T, Z + 1), A);
+    const R = Number.isFinite(h.devicePixelRatio ?? NaN) ? h.devicePixelRatio : typeof window < "u" && window.devicePixelRatio || 1;
+    nr(x, h.width, h.viewportHeight, R);
+    const $ = h.segmentsByItem.length, D = typeof h.renderStartIndex == "number" && Number.isFinite(h.renderStartIndex) ? Math.max(0, Math.floor(h.renderStartIndex)) : Math.max(0, Math.floor(h.scrollPosition / h.itemHeight)), k = Math.min($, Math.ceil((h.scrollPosition + h.viewportHeight) / h.itemHeight)), G = (() => {
+      if (typeof h.renderEndIndex == "number" && Number.isFinite(h.renderEndIndex)) {
+        const z = Math.floor(h.renderEndIndex);
+        return Math.max(Math.min($, z + 1), D);
       }
-      return Math.max(X, A);
-    })(), q = (() => {
-      if (typeof d.lookaheadEndIndex == "number" && Number.isFinite(d.lookaheadEndIndex)) {
-        const Z = Math.floor(d.lookaheadEndIndex), G = Math.min(T, Z + 1);
-        return Math.max(G, U);
+      return Math.max(k, D);
+    })(), W = (() => {
+      if (typeof h.lookaheadEndIndex == "number" && Number.isFinite(h.lookaheadEndIndex)) {
+        const z = Math.floor(h.lookaheadEndIndex), J = Math.min($, z + 1);
+        return Math.max(J, G);
       }
-      return Math.max(X, U);
-    })(), $ = ft(d.segmentsByItem, A, q), V = mt(d.glyphsByItem, A, q);
-    g.save(), g.scale(P, P), g.clearRect(0, 0, d.width, d.viewportHeight), g.translate(0, -d.scrollPosition), g.strokeStyle = d.color, yt(g, $, d.strokeWidth), bt(g, V, d.expandGlyphColor ?? d.color, d.expandGlyphSize), g.restore();
-  }, []), j = C(() => {
-    i.current === null && (i.current = window.requestAnimationFrame(p));
-  }, [p]);
-  return oe(() => {
-    u.current = {
+      return Math.max(k, G);
+    })(), L = tr(h.segmentsByItem, D, W), ee = rr(h.glyphsByItem, D, W);
+    S.save(), S.scale(R, R), S.clearRect(0, 0, h.width, h.viewportHeight), S.translate(0, -h.scrollPosition), S.strokeStyle = h.color, sr(S, L, h.strokeWidth), ar(S, ee, h.expandGlyphColor ?? h.color, h.expandGlyphSize), S.restore();
+  }, []), O = F(() => {
+    c.current === null && (c.current = window.requestAnimationFrame(b));
+  }, [b]);
+  return ae(() => {
+    d.current = {
       segmentsByItem: e,
-      glyphsByItem: r,
-      itemHeight: a,
+      glyphsByItem: t,
+      itemHeight: o,
       width: n,
-      viewportHeight: o,
+      viewportHeight: s,
       scrollPosition: l,
-      color: s,
+      color: a,
       strokeWidth: m,
-      renderStartIndex: R,
-      renderEndIndex: w,
-      lookaheadEndIndex: c,
-      devicePixelRatio: h,
-      expandGlyphColor: y,
-      expandGlyphSize: E
-    }, j();
-  }, [e, r, a, n, o, l, s, m, R, w, c, h, y, E, j]), oe(() => () => {
-    i.current !== null && (window.cancelAnimationFrame(i.current), i.current = null);
-  }, []), /* @__PURE__ */ N.jsx("canvas", { ref: I, className: "pointer-events-none absolute top-0 left-0 z-0" });
+      renderStartIndex: E,
+      renderEndIndex: v,
+      lookaheadEndIndex: i,
+      devicePixelRatio: f,
+      expandGlyphColor: g,
+      expandGlyphSize: w
+    }, O();
+  }, [e, t, o, n, s, l, a, m, E, v, i, f, g, w, O]), ae(() => () => {
+    c.current !== null && (window.cancelAnimationFrame(c.current), c.current = null);
+  }, []), /* @__PURE__ */ y.jsx("canvas", { ref: I, className: "pointer-events-none absolute top-0 left-0 z-0" });
 });
-Be.displayName = "TreeLineCanvas";
-const W = {
-  container: "directory-tree-container relative h-full transition-opacity duration-300 overflow-y-hidden pb-[5px] pr-[3px]",
-  containerPending: "opacity-70",
-  entry: "directory-tree-entry flex items-center cursor-pointer relative select-none",
-  // ホバー時のスタイル（ライト/ダークモード対応）
-  entryHover: Y("directory-tree-entry--hover hover:bg-gray-400/15", "dark:hover:bg-gray-200/10"),
-  // 選択時のスタイル（ライト/ダークモード対応）
-  entrySelected: Y("directory-tree-entry--selected bg-blue-400/10", "dark:bg-blue-400/15"),
-  // アイテム選択時のスタイル（ライト/ダークモード対応）
-  entryItemSelected: Y("directory-tree-entry--item-selected bg-blue-400/20 shadow-[0_0_0_1px_rgba(59,130,246,0.3)]", "dark:bg-blue-400/25 dark:shadow-[0_0_0_1px_rgba(96,165,250,0.4)]"),
-  // アイコンのスタイル
-  expandIcon: Y("directory-tree-expand-icon w-5 h-5 flex-shrink-0 flex items-center justify-center", "text-gray-500", "dark:text-gray-400"),
-  expandIconSelected: Y("directory-tree-expand-icon--selected text-blue-700", "dark:text-blue-400"),
-  typeIcon: Y("directory-tree-type-icon w-5 h-5 flex-shrink-0 flex items-center justify-center", "text-gray-500", "dark:text-gray-400"),
-  typeIconSelected: Y("directory-tree-type-icon--selected text-blue-700", "dark:text-blue-400"),
-  // テキストのスタイル
-  name: Y("directory-tree-name overflow-hidden text-ellipsis whitespace-nowrap ml-1", "text-gray-700", "dark:text-gray-200"),
-  nameDirectory: "directory-tree-name--directory",
-  nameSelected: Y("directory-tree-name--selected text-blue-800 font-medium", "dark:text-blue-300")
-}, vt = {
+Ct.displayName = "TreeLineCanvas";
+const lr = {
   msOverflowStyle: "none",
   scrollbarWidth: "none"
-}, gt = () => {
+}, ir = () => {
   let e = document.getElementById("directory-tree-webkit-scrollbar-hide");
   e || (e = document.createElement("style"), e.id = "directory-tree-webkit-scrollbar-hide", e.textContent = ".directory-tree-container::-webkit-scrollbar { display: none; }", document.head.appendChild(e));
-}, xt = (e, r, a, n) => {
-  const o = [], l = [];
-  let s = 0;
-  const m = (R, w, c) => {
-    for (let h = 0; h < R.length; h++) {
-      const y = R[h], E = h === R.length - 1, I = [...c, E], i = y.children !== void 0, u = i && r(y.absolutePath, y.relativePath);
-      let p = w, j = I, v = c;
-      n && (p = w - 1, j = I.slice(1), v = c.slice(1)), o.push({ entry: y, indentLevel: p, parentIsLast: j }), a && (p > s && (s = p), l.push({
-        id: y.absolutePath,
-        name: y.name,
-        absolutePath: y.absolutePath,
-        indentLevel: p,
-        isLastChild: E,
-        isDirectory: i,
-        isExpanded: u,
-        ancestorIsLast: [...v],
-        hideLines: n && w === 0
-      })), i && u && y.children && m(y.children, w + 1, I);
+}, cr = (e, t, o, n) => {
+  const s = [], l = [];
+  let a = 0;
+  const m = (E, v, i) => {
+    for (let f = 0; f < E.length; f++) {
+      const g = E[f], w = f === E.length - 1, I = [...i, w], c = g.children !== void 0, d = c && t(g.absolutePath, g.relativePath);
+      let b = v, O = I, x = i;
+      n && (b = v - 1, O = I.slice(1), x = i.slice(1)), s.push({ entry: g, indentLevel: b, parentIsLast: O }), o && (b > a && (a = b), l.push({
+        id: g.absolutePath,
+        name: g.name,
+        absolutePath: g.absolutePath,
+        indentLevel: b,
+        isLastChild: w,
+        isDirectory: c,
+        isExpanded: d,
+        ancestorIsLast: [...x],
+        hideLines: n && v === 0
+      })), c && d && g.children && m(g.children, v + 1, I);
     }
   };
-  return m(e, 0, []), { flatItems: o, lineItems: l, maxIndent: s };
-}, Fe = (e, r) => {
-  const a = e.length - 1;
-  if (a <= 0) return 0;
-  let n = 0, o = a - 1, l = 0;
-  for (; n <= o; ) {
-    const s = n + o >>> 1;
-    e[s] <= r ? (l = s, n = s + 1) : o = s - 1;
+  return m(e, 0, []), { flatItems: s, lineItems: l, maxIndent: a };
+}, bt = (e, t) => {
+  const o = e.length - 1;
+  if (o <= 0) return 0;
+  let n = 0, s = o - 1, l = 0;
+  for (; n <= s; ) {
+    const a = n + s >>> 1;
+    e[a] <= t ? (l = a, n = a + 1) : s = a - 1;
   }
   return l;
-}, Et = (e, r, a, n, o, l) => {
-  const s = n?.renderStart ?? Math.max(0, Fe(l, o)), m = r > 0 ? Fe(l, o + r) + a : s + a, R = e > 0 ? Math.min(e - 1, Math.max(s, m)) : s, w = n?.renderEnd ?? R, c = e > 0 ? Math.min(e - 1, w + a) : w;
-  return { renderStart: s, renderEnd: w, lookaheadEnd: c };
-}, It = ({ isDirectory: e, isExpanded: r, showExpandIcons: a, useCanvasExpandIcons: n, expandIconSize: o }) => {
-  const l = o ? { width: o, height: o } : void 0, s = o ? "" : "h-4 w-4";
-  return !(a && e) || n ? /* @__PURE__ */ N.jsx("span", { className: s, style: l, "aria-hidden": "true" }) : r ? /* @__PURE__ */ N.jsx(at, { className: s, style: l }) : /* @__PURE__ */ N.jsx(lt, { className: s, style: l });
-}, St = (e) => e.slice((e.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase(), wt = (e, r, a, n, o, l) => {
+}, dr = (e, t, o, n, s, l) => {
+  const a = n?.renderStart ?? Math.max(0, bt(l, s)), m = t > 0 ? bt(l, s + t) + o : a + o, E = e > 0 ? Math.min(e - 1, Math.max(a, m)) : a, v = n?.renderEnd ?? E, i = e > 0 ? Math.min(e - 1, v + o) : v;
+  return { renderStart: a, renderEnd: v, lookaheadEnd: i };
+}, ur = (e, t, o, n, s, l) => {
   if (e.length === 0)
     return { segmentsByItem: [], glyphsByItem: [] };
-  const s = Array.from({ length: e.length }, () => []), m = Array.from({ length: e.length }, () => []), R = (c) => o ? typeof l == "number" && Number.isFinite(l) && l > 0 ? l : Math.max(8, Math.min(n * 0.9, c * 0.7)) : 0, w = 3;
-  for (let c = 0; c < e.length; c++) {
-    const h = e[c];
-    if (h.hideLines)
+  const a = Array.from({ length: e.length }, () => []), m = Array.from({ length: e.length }, () => []), E = (i) => s ? typeof l == "number" && Number.isFinite(l) && l > 0 ? l : Math.max(8, Math.min(n * 0.9, i * 0.7)) : 0, v = 3;
+  for (let i = 0; i < e.length; i++) {
+    const f = e[i];
+    if (f.hideLines)
       continue;
-    const y = [], E = r[c] ?? 0, I = a[c] ?? 0, i = I + E / 2, u = R(E), p = u > 0 ? u / 2 + 2 : n / 1.5;
-    for (let g = 0; g < h.indentLevel; g++) {
-      if (h.ancestorIsLast[g] ?? !1)
+    const g = [], w = t[i] ?? 0, I = o[i] ?? 0, c = I + w / 2, d = E(w), b = d > 0 ? d / 2 + 2 : n / 1.5;
+    for (let S = 0; S < f.indentLevel; S++) {
+      if (f.ancestorIsLast[S] ?? !1)
         continue;
-      let P = !1;
-      for (let T = c; T < e.length; T++) {
-        const A = e[T];
-        if (A.indentLevel > g && A.ancestorIsLast.length > g && !A.ancestorIsLast[g]) {
-          P = !0;
+      let R = !1;
+      for (let $ = i; $ < e.length; $++) {
+        const D = e[$];
+        if (D.indentLevel > S && D.ancestorIsLast.length > S && !D.ancestorIsLast[S]) {
+          R = !0;
           break;
         }
-        if (T > c && A.indentLevel === g)
+        if ($ > i && D.indentLevel === S)
           break;
       }
-      if (P) {
-        const T = g * n + n / 2 + w;
-        y.push({
-          key: `${h.id}-ancestor-${g}`,
-          x1: T,
+      if (R) {
+        const $ = S * n + n / 2 + v;
+        g.push({
+          key: `${f.id}-ancestor-${S}`,
+          x1: $,
           y1: I,
-          x2: T,
-          y2: I + E,
-          itemIndex: c
+          x2: $,
+          y2: I + w,
+          itemIndex: i
         });
       }
     }
-    const j = h.indentLevel * n, v = j + n / 2 + w;
-    if (h.isDirectory ? y.push({
-      key: `${h.id}-connector-top`,
-      x1: v,
+    const O = f.indentLevel * n, x = O + n / 2 + v;
+    if (f.isDirectory ? g.push({
+      key: `${f.id}-connector-top`,
+      x1: x,
       y1: I,
-      x2: v,
-      y2: i - p,
-      itemIndex: c
-    }) : y.push({
-      key: `${h.id}-connector-top`,
-      x1: v,
+      x2: x,
+      y2: c - b,
+      itemIndex: i
+    }) : g.push({
+      key: `${f.id}-connector-top`,
+      x1: x,
       y1: I,
-      x2: v,
-      y2: i,
-      itemIndex: c
-    }), !h.isDirectory && h.isLastChild && y.push({
-      key: `${h.id}-connector-horizontal`,
-      x1: v,
-      y1: i,
-      x2: j + n + w,
-      y2: i,
-      itemIndex: c
-    }), h.isLastChild || (h.isDirectory ? y.push({
-      key: `${h.id}-connector-bottom`,
-      x1: v,
-      y1: i + p,
-      x2: v,
-      y2: I + E,
-      itemIndex: c
-    }) : y.push({
-      key: `${h.id}-connector-bottom`,
-      x1: v,
-      y1: i,
-      x2: v,
-      y2: I + E,
-      itemIndex: c
-    })), s[c] = y, o && h.isDirectory) {
-      const g = u, d = v, P = i;
-      m[c] = [
+      x2: x,
+      y2: c,
+      itemIndex: i
+    }), !f.isDirectory && f.isLastChild && g.push({
+      key: `${f.id}-connector-horizontal`,
+      x1: x,
+      y1: c,
+      x2: O + n + v,
+      y2: c,
+      itemIndex: i
+    }), f.isLastChild || (f.isDirectory ? g.push({
+      key: `${f.id}-connector-bottom`,
+      x1: x,
+      y1: c + b,
+      x2: x,
+      y2: I + w,
+      itemIndex: i
+    }) : g.push({
+      key: `${f.id}-connector-bottom`,
+      x1: x,
+      y1: c,
+      x2: x,
+      y2: I + w,
+      itemIndex: i
+    })), a[i] = g, s && f.isDirectory) {
+      const S = d, h = x, R = c;
+      m[i] = [
         {
-          key: `${h.id}-glyph`,
-          itemIndex: c,
-          centerX: d,
-          centerY: P,
-          size: g,
-          isExpanded: h.isExpanded
+          key: `${f.id}-glyph`,
+          itemIndex: i,
+          centerX: h,
+          centerY: R,
+          size: S,
+          isExpanded: f.isExpanded
         }
       ];
     }
   }
-  return { segmentsByItem: s, glyphsByItem: m };
-}, Re = (e, r) => {
-  if (e == null || typeof e == "boolean") return null;
-  if (typeof e == "function")
-    return console.warn(`[DirectoryTree] Function returned by renderer for "${r}". Return a node.`), null;
-  if (typeof e == "object") {
-    if ("then" in e)
-      return console.warn(`[DirectoryTree] Promise returned for "${r}". Not supported.`), null;
-    if (Array.isArray(e)) {
-      const n = e.map((o) => Re(o, r)).filter(Boolean);
-      return n.length ? n : null;
-    }
-    const a = e.type;
-    if (a && a.$$typeof === /* @__PURE__ */ Symbol.for("react.lazy"))
-      return console.warn(`[DirectoryTree] Lazy component for "${r}". Not supported.`), null;
-  }
-  return e;
-}, kt = (e, r) => {
-  const { entry: a, isDirectory: n, isExpanded: o, extension: l } = e;
-  let s;
-  return a.icon !== void 0 ? s = a.icon : n ? s = o && r?.directoryExpanded || r?.directory || /* @__PURE__ */ N.jsx(ot, { className: "h-4 w-4" }) : l && r?.fileByExtension?.[l] ? s = r.fileByExtension[l] : s = r?.file || (l === "md" ? /* @__PURE__ */ N.jsx(st, { className: "h-4 w-4" }) : /* @__PURE__ */ N.jsx(it, { className: "h-4 w-4" })), Re(typeof s == "function" ? s(e) : s, a.absolutePath);
-}, _e = Ye(
+  return { segmentsByItem: a, glyphsByItem: m };
+}, Fe = We(
   ({
     entry: e,
-    indentLevel: r,
-    rowHeight: a,
+    indentLevel: t,
+    rowHeight: o,
     isDirOpen: n,
-    parentIsLast: o,
+    parentIsLast: s,
     renderChildren: l = !0,
-    expansion: { toggleDirectory: s, onToggleDirectoryRecursive: m },
-    selection: { onEntryClick: R, selectedPath: w, mode: c = "none", selectedItems: h, onSelectionChange: y },
+    expansion: { toggleDirectory: a, onToggleDirectoryRecursive: m },
+    selection: { onEntryClick: E, selectedPath: v, mode: i = "none", selectedItems: f, onSelectionChange: g },
     visual: {
-      iconOverrides: E,
+      iconOverrides: w,
       showExpandIcons: I = !0,
-      showDirectoryIcons: i = !0,
-      showFileIcons: u = !0,
-      useCanvasExpandIcons: p = !1,
-      expandIconSize: j,
-      highlightStyles: v,
-      entryClassName: g,
-      entryStyle: d,
-      nameClassName: P,
-      nameStyle: T,
-      directoryNameClassName: A,
-      directoryNameStyle: X,
-      fileNameClassName: U,
-      fileNameStyle: q
+      showDirectoryIcons: c = !0,
+      showFileIcons: d = !0,
+      useCanvasExpandIcons: b = !1,
+      expandIconSize: O,
+      highlightStyles: x,
+      entryClassName: S,
+      entryStyle: h,
+      nameClassName: R,
+      nameStyle: $,
+      directoryNameClassName: D,
+      directoryNameStyle: k,
+      fileNameClassName: G,
+      fileNameStyle: W
     }
   }) => {
-    const $ = fe(null), [V, Z] = ie(null), [G, se] = ie(!1);
-    oe(
-      () => () => {
-        $.current && window.clearTimeout($.current);
-      },
-      []
-    );
-    const S = e.children !== void 0, D = S && n(e.absolutePath), L = e.absolutePath === w, O = !S && h?.has(e.absolutePath), t = S ? void 0 : St(e.name);
-    oe(() => {
-      Z(D && e.children ? e.children : null);
-    }, [D, e.children]);
-    const f = C(
-      (B) => {
-        B.stopPropagation(), c !== "none" && !S && y && y(e, !O);
-        let ue = !1;
-        R({
-          entry: e,
-          isDirectory: S,
-          isExpanded: D,
-          preventDefault: () => {
-            ue = !0;
-          }
-        }), !(!S || ue) && ($.current ? (window.clearTimeout($.current), $.current = null, m(e)) : $.current = window.setTimeout(() => {
-          s(e.absolutePath), $.current = null;
-        }, 500));
-      },
-      [S, e, D, m, s, R, c, y, O]
-    ), x = G ? v?.hoverClassName !== void 0 ? v.hoverClassName : W.entryHover : "", k = (() => {
-      if (S) {
-        if (L)
-          return v?.directorySelectedClassName !== void 0 ? v.directorySelectedClassName : W.entrySelected;
-      } else if (L || O)
-        return v?.itemSelectedClassName !== void 0 ? v.itemSelectedClassName : Y(L && W.entrySelected, O && W.entryItemSelected);
+    const [L, ee] = ne(null), [z, J] = ne(!1), C = e.children !== void 0, U = C && n(e.absolutePath), N = e.absolutePath === v, H = !C && f?.has(e.absolutePath), se = C ? void 0 : gt(e.name);
+    ae(() => {
+      ee(U && e.children ? e.children : null);
+    }, [U, e.children]);
+    const r = wt({ entry: e, isDirectory: C, isExpanded: U, isItemSelected: !!H, selectionMode: i, onSelectionChange: g, onEntryClick: E, toggleDirectory: a, onToggleDirectoryRecursive: m }), p = z ? x?.hoverClassName !== void 0 ? x.hoverClassName : A.entryHover : "", T = (() => {
+      if (C) {
+        if (N)
+          return x?.directorySelectedClassName !== void 0 ? x.directorySelectedClassName : A.entrySelected;
+      } else if (N || H)
+        return x?.itemSelectedClassName !== void 0 ? x.itemSelectedClassName : P(N && A.entrySelected, H && A.entryItemSelected);
       return "";
-    })(), te = Y(W.entry, x, k, g, e.className), Q = Y(W.expandIcon, (L || O) && W.expandIconSelected), _ = Y(W.typeIcon, (L || O) && W.typeIconSelected), J = Y(W.name, P, S && W.nameDirectory, S && A, !S && U, (L || O) && W.nameSelected), re = It({ isDirectory: S, isExpanded: D, showExpandIcons: I, useCanvasExpandIcons: p, expandIconSize: j }), ce = (S ? i : u) ? kt({ entry: e, isDirectory: S, isExpanded: D, isSelected: L, isItemSelected: !!O, extension: t }, E) : null, Ie = {
-      ...G ? v?.hoverStyle : {},
-      ...S && L ? v?.directorySelectedStyle : {},
-      ...!S && (L || O) ? v?.itemSelectedStyle : {}
+    })(), _ = P(A.entry, p, T, S, e.className), q = P(A.expandIcon, (N || H) && A.expandIconSelected), Z = P(A.typeIcon, (N || H) && A.typeIconSelected), j = P(A.name, R, C && A.nameDirectory, C && D, !C && G, (N || H) && A.nameSelected), Q = xt({ isDirectory: C, isExpanded: U, showExpandIcons: I, useCanvasExpandIcons: b, expandIconSize: O }), B = (C ? c : d) ? Et({ entry: e, isDirectory: C, isExpanded: U, isSelected: N, isItemSelected: !!H, extension: se }, w) : null, me = {
+      ...z ? x?.hoverStyle : {},
+      ...C && N ? x?.directorySelectedStyle : {},
+      ...!C && (N || H) ? x?.itemSelectedStyle : {}
     };
-    return /* @__PURE__ */ N.jsxs(tt, { children: [
-      /* @__PURE__ */ N.jsxs(
+    return /* @__PURE__ */ y.jsxs(Dt, { children: [
+      /* @__PURE__ */ y.jsxs(
         "div",
         {
-          className: te,
+          className: _,
           style: {
-            paddingLeft: `${Math.max(0, r * ye)}px`,
-            transform: r < 0 ? `translateX(${r * ye}px)` : void 0,
-            width: r < 0 ? `calc(100% + ${Math.abs(r * ye)}px)` : void 0,
-            height: `${a}px`,
-            ...Ie,
-            ...d,
+            paddingLeft: `${Math.max(0, t * be)}px`,
+            transform: t < 0 ? `translateX(${t * be}px)` : void 0,
+            width: t < 0 ? `calc(100% + ${Math.abs(t * be)}px)` : void 0,
+            height: `${o}px`,
+            ...me,
+            ...h,
             ...e.style
           },
-          "data-entry-type": S ? "directory" : "file",
-          "data-entry-expanded": S ? String(D) : void 0,
-          "data-entry-selected": L ? "true" : void 0,
-          "data-entry-item-selected": O ? "true" : void 0,
-          onClick: f,
-          onMouseEnter: () => se(!0),
-          onMouseLeave: () => se(!1),
-          onKeyDown: (B) => B.key === "Enter" && f(B),
+          "data-entry-type": C ? "directory" : "file",
+          "data-entry-expanded": C ? String(U) : void 0,
+          "data-entry-selected": N ? "true" : void 0,
+          "data-entry-item-selected": H ? "true" : void 0,
+          onClick: r,
+          onMouseEnter: () => J(!0),
+          onMouseLeave: () => J(!1),
+          onKeyDown: (le) => le.key === "Enter" && r(le),
           tabIndex: 0,
           role: "treeitem",
-          "aria-expanded": S ? D : void 0,
-          "aria-label": `${e.name} (${S ? "directory" : "file"})`,
+          "aria-expanded": C ? U : void 0,
+          "aria-label": `${e.name} (${C ? "directory" : "file"})`,
           children: [
-            (I || p) && /* @__PURE__ */ N.jsx("span", { className: Q, children: re }),
-            (S ? i : u) && /* @__PURE__ */ N.jsx("span", { className: _, children: ce }),
-            /* @__PURE__ */ N.jsx(
+            (I || b) && /* @__PURE__ */ y.jsx("span", { className: q, children: Q }),
+            (C ? c : d) && /* @__PURE__ */ y.jsx("span", { className: Z, children: B }),
+            /* @__PURE__ */ y.jsx(
               "span",
               {
-                className: J,
+                className: j,
                 style: {
-                  ...T,
-                  ...S ? X : q
+                  ...$,
+                  ...C ? k : W
                 },
-                "data-entry-type": S ? "directory" : "file",
+                "data-entry-type": C ? "directory" : "file",
                 "data-entry-role": "name",
                 children: e.label ?? e.name
               }
@@ -657,324 +751,429 @@ const W = {
           ]
         }
       ),
-      D && V && l && /* @__PURE__ */ N.jsx("fieldset", { children: V.map((B, ue) => /* @__PURE__ */ N.jsx(
-        _e,
+      U && L && l && /* @__PURE__ */ y.jsx("fieldset", { children: L.map((le, Ce) => /* @__PURE__ */ y.jsx(
+        Fe,
         {
-          entry: B,
-          indentLevel: r + 1,
-          rowHeight: a,
+          entry: le,
+          indentLevel: t + 1,
+          rowHeight: o,
           isDirOpen: n,
-          parentIsLast: [...o, ue === V.length - 1],
-          expansion: { toggleDirectory: s, onToggleDirectoryRecursive: m },
-          selection: { onEntryClick: R, selectedPath: w, mode: c, selectedItems: h, onSelectionChange: y },
+          parentIsLast: [...s, Ce === L.length - 1],
+          expansion: { toggleDirectory: a, onToggleDirectoryRecursive: m },
+          selection: { onEntryClick: E, selectedPath: v, mode: i, selectedItems: f, onSelectionChange: g },
           visual: {
-            iconOverrides: E,
+            iconOverrides: w,
             showExpandIcons: I,
-            showDirectoryIcons: i,
-            showFileIcons: u,
-            useCanvasExpandIcons: p,
-            expandIconSize: j,
-            highlightStyles: v,
-            entryClassName: g,
-            entryStyle: d,
-            nameClassName: P,
-            nameStyle: T,
-            directoryNameClassName: A,
-            directoryNameStyle: X,
-            fileNameClassName: U,
-            fileNameStyle: q
+            showDirectoryIcons: c,
+            showFileIcons: d,
+            useCanvasExpandIcons: b,
+            expandIconSize: O,
+            highlightStyles: x,
+            entryClassName: S,
+            entryStyle: h,
+            nameClassName: R,
+            nameStyle: $,
+            directoryNameClassName: D,
+            directoryNameStyle: k,
+            fileNameClassName: G,
+            fileNameStyle: W
           }
         },
-        B.absolutePath
+        le.absolutePath
       )) })
     ] }, e.absolutePath);
   },
-  (e, r) => {
-    if (e.entry !== r.entry) return !1;
-    const a = e.entry.children !== void 0, n = r.entry.children !== void 0, o = a && e.isDirOpen(e.entry.absolutePath), l = n && r.isDirOpen(r.entry.absolutePath);
-    return e.indentLevel === r.indentLevel && e.rowHeight === r.rowHeight && o === l && e.selection.selectedPath === r.selection.selectedPath && e.selection.mode === r.selection.mode && e.selection.selectedItems === r.selection.selectedItems && e.visual.iconOverrides === r.visual.iconOverrides && e.visual.showExpandIcons === r.visual.showExpandIcons && e.visual.showDirectoryIcons === r.visual.showDirectoryIcons && e.visual.showFileIcons === r.visual.showFileIcons && e.visual.useCanvasExpandIcons === r.visual.useCanvasExpandIcons && e.visual.expandIconSize === r.visual.expandIconSize && e.visual.highlightStyles === r.visual.highlightStyles && e.visual.entryClassName === r.visual.entryClassName && e.visual.entryStyle === r.visual.entryStyle && e.visual.nameClassName === r.visual.nameClassName && e.visual.nameStyle === r.visual.nameStyle && e.visual.directoryNameClassName === r.visual.directoryNameClassName && e.visual.directoryNameStyle === r.visual.directoryNameStyle && e.visual.fileNameClassName === r.visual.fileNameClassName && e.visual.fileNameStyle === r.visual.fileNameStyle && e.parentIsLast.length === r.parentIsLast.length && e.parentIsLast.every((s, m) => s === r.parentIsLast[m]);
+  (e, t) => {
+    if (e.entry !== t.entry) return !1;
+    const o = e.entry.children !== void 0, n = t.entry.children !== void 0, s = o && e.isDirOpen(e.entry.absolutePath), l = n && t.isDirOpen(t.entry.absolutePath);
+    return e.indentLevel === t.indentLevel && e.rowHeight === t.rowHeight && s === l && e.selection.selectedPath === t.selection.selectedPath && e.selection.mode === t.selection.mode && e.selection.selectedItems === t.selection.selectedItems && e.visual.iconOverrides === t.visual.iconOverrides && e.visual.showExpandIcons === t.visual.showExpandIcons && e.visual.showDirectoryIcons === t.visual.showDirectoryIcons && e.visual.showFileIcons === t.visual.showFileIcons && e.visual.useCanvasExpandIcons === t.visual.useCanvasExpandIcons && e.visual.expandIconSize === t.visual.expandIconSize && e.visual.highlightStyles === t.visual.highlightStyles && e.visual.entryClassName === t.visual.entryClassName && e.visual.entryStyle === t.visual.entryStyle && e.visual.nameClassName === t.visual.nameClassName && e.visual.nameStyle === t.visual.nameStyle && e.visual.directoryNameClassName === t.visual.directoryNameClassName && e.visual.directoryNameStyle === t.visual.directoryNameStyle && e.visual.fileNameClassName === t.visual.fileNameClassName && e.visual.fileNameStyle === t.visual.fileNameStyle && e.parentIsLast.length === t.parentIsLast.length && e.parentIsLast.every((a, m) => a === t.parentIsLast[m]);
   }
 );
-_e.displayName = "DirectoryEntryItem";
-const Ee = 20, ye = 16, He = 12, We = (e) => {
-  const r = [];
+Fe.displayName = "DirectoryEntryItem";
+const _t = (e) => {
+  const t = [];
   if (e.children)
-    for (const a of e.children)
-      a.type === "directory" && (r.push(a.absolutePath), r.push(...We(a)));
-  return r;
-}, Ct = ({
+    for (const o of e.children)
+      o.type === "directory" && (t.push(o.absolutePath), t.push(..._t(o)));
+  return t;
+}, vr = ({
   entries: e,
-  expansion: { toggle: r, isExpanded: a, expandMultiple: n, collapseMultiple: o, isPending: l, alwaysExpanded: s = !1, doubleClickAction: m = "recursive" },
-  selection: { onEntryClick: R, selectedPath: w, mode: c = "none", selectedItems: h, onSelectionChange: y },
+  expansion: { toggle: t, isExpanded: o, expandMultiple: n, collapseMultiple: s, isPending: l, alwaysExpanded: a = !1, doubleClickAction: m = "recursive" },
+  selection: { onEntryClick: E, selectedPath: v, mode: i = "none", selectedItems: f, onSelectionChange: g },
   visual: {
-    className: E,
+    className: w,
     style: I,
-    lineColor: i = "#A0AEC0",
-    showTreeLines: u = !0,
-    showExpandIcons: p = !0,
-    showDirectoryIcons: j = !0,
-    showFileIcons: v = !0,
-    iconOverrides: g,
-    expandIconSize: d,
-    itemHeight: P = Ee,
-    removeRootIndent: T = !1,
-    highlightStyles: A,
-    entryClassName: X,
-    entryStyle: U,
-    nameClassName: q,
-    nameStyle: $,
-    directoryNameClassName: V,
-    directoryNameStyle: Z,
-    fileNameClassName: G,
-    fileNameStyle: se
+    lineColor: c = "#A0AEC0",
+    showTreeLines: d = !0,
+    showExpandIcons: b = !0,
+    showDirectoryIcons: O = !0,
+    showFileIcons: x = !0,
+    iconOverrides: S,
+    expandIconSize: h,
+    itemHeight: R = Re,
+    removeRootIndent: $ = !1,
+    highlightStyles: D,
+    entryClassName: k,
+    entryStyle: G,
+    nameClassName: W,
+    nameStyle: L,
+    directoryNameClassName: ee,
+    directoryNameStyle: z,
+    fileNameClassName: J,
+    fileNameStyle: C
   } = {},
-  virtualScroll: S
+  virtualScroll: U,
+  grid: N
 }) => {
-  const [D, L] = ie(!1), O = fe(null), t = fe(null), [f, x] = ie(0), [k, te] = ie(null), {
-    overscanCount: Q = 15,
-    className: _,
-    background: J,
-    onScroll: re,
-    onRangeChange: ce,
-    initialScrollIndex: Ie,
-    initialScrollOffset: B,
-    callbackThrottleMs: ue = 5,
+  const H = N !== void 0, [se, r] = ne(!1), p = he(null), T = he(null), _ = he(null), [q, Z] = ne(0), [j, Q] = ne(0), [B, me] = ne(0), [le, Ce] = ne(null), {
+    overscanCount: Ee = 15,
+    className: Be,
+    background: Ye,
+    onScroll: Ge,
+    onRangeChange: Ue,
+    initialScrollIndex: Ve,
+    initialScrollOffset: fe,
+    callbackThrottleMs: ze = 5,
     contentInsets: Xe,
-    onItemFocus: Ve,
-    viewportHeightOverride: z,
-    scrollBarOptions: Ge,
-    behaviorOptions: Je
-  } = S ?? {}, [pe, Ne] = ie(typeof B == "number" ? B : 0), ze = C(
-    (b, F) => {
-      Ne(b), re?.(b, F);
+    onItemFocus: Je,
+    viewportHeightOverride: te,
+    scrollBarOptions: _e,
+    behaviorOptions: qe
+  } = U ?? {}, [we, Ze] = ne(typeof fe == "number" ? fe : 0), Qe = F(
+    (u, M) => {
+      Ze(u), Ge?.(u, M);
     },
-    [re]
-  ), Ue = C(
-    (b) => {
-      const { renderingStartIndex: F, renderingEndIndex: H } = b;
-      te((M) => M && M.renderStart === F && M.renderEnd === H ? M : { renderStart: F, renderEnd: H }), ce?.(b);
+    [Ge]
+  ), Ke = F(
+    (u) => {
+      const { renderingStartIndex: M, renderingEndIndex: Y } = u;
+      Ce((K) => K && K.renderStart === M && K.renderEnd === Y ? K : { renderStart: M, renderEnd: Y }), Ue?.(u);
     },
-    [ce]
+    [Ue]
   );
-  oe(() => {
-    typeof B == "number" && Ne(B);
-  }, [B]), oe(() => {
-    L(!0), gt();
-  }, []), oe(() => {
-    if (typeof z == "number") {
-      x((M) => Math.abs(M - z) > 1 ? z : M);
-      return;
-    }
-    const b = O.current;
-    if (!b) return x(0);
-    (() => {
-      const M = b.clientHeight;
-      x((le) => Math.abs(le - M) > 1 ? M : le);
-    })();
-    const H = new ResizeObserver((M) => {
-      for (const le of M)
-        le.target === b && x((we) => Math.abs(we - le.contentRect.height) > 1 ? le.contentRect.height : we);
-    });
-    return H.observe(b), () => H.disconnect();
-  }, [z]);
-  const ae = typeof z == "number" ? z : f, de = C((b) => s || (D ? a(b) : !1), [D, a, s]), Te = Y(W.container, l && W.containerPending, E), Pe = ee(
+  ae(() => {
+    typeof fe == "number" && Ze(fe);
+  }, [fe]), ae(() => {
+    r(!0), ir();
+  }, []), ae(() => {
+    const u = p.current, M = H ? T.current : u, Y = () => {
+      if (u) {
+        const oe = u.clientWidth;
+        Q((ve) => Math.abs(ve - oe) > 1 ? oe : ve);
+      }
+      if (typeof te == "number")
+        Z((oe) => Math.abs(oe - te) > 1 ? te : oe);
+      else if (M) {
+        const oe = M.clientHeight;
+        Z((ve) => Math.abs(ve - oe) > 1 ? oe : ve);
+      }
+    };
+    if (!(u || M)) return Z(0);
+    Y();
+    const K = new ResizeObserver(Y);
+    return u && K.observe(u), M && M !== u && K.observe(M), () => K.disconnect();
+  }, [te, H]);
+  const ie = typeof te == "number" ? te : q, ce = F((u) => a || (se ? o(u) : !1), [se, o, a]), je = P(A.container, l && A.containerPending, w), Pe = X(
     () => ({
-      ...vt,
+      ...lr,
       ...I ?? {},
-      ...typeof z == "number" ? { height: z, minHeight: z } : {}
+      ...typeof te == "number" ? { height: te, minHeight: te } : {}
     }),
-    [I, z]
-  ), qe = C(
-    (b, F) => {
-      const H = [b.absolutePath, ...We(b)], M = F || m;
-      if (H.every((ke) => de(ke))) return o(H);
-      if (H.every((ke) => !de(ke)) || M === "recursive") return n(H);
-      if (M === "toggle") return o(H);
-      console.warn(`[DirectoryTree] Unknown double click action: ${M}. No action taken.`);
+    [I, te]
+  ), Me = F(
+    (u, M) => {
+      const Y = [u.absolutePath, ..._t(u)], K = M || m;
+      if (Y.every((De) => ce(De))) return s(Y);
+      if (Y.every((De) => !ce(De)) || K === "recursive") return n(Y);
+      if (K === "toggle") return s(Y);
+      console.warn(`[DirectoryTree] Unknown double click action: ${K}. No action taken.`);
     },
-    [de, n, o, m]
-  ), { flatItems: Ce, lineItems: Se, maxIndent: je } = ee(() => xt(e, de, u, T), [e, de, u, T]), K = ee(
-    () => Ce.map((b, F) => {
-      const H = typeof P == "function" ? P(b.entry, F) : P;
-      return { ...b, rowHeight: Number.isFinite(H) && H > 0 ? H : Ee };
+    [ce, n, s, m]
+  ), et = H ? !1 : $, { flatItems: tt, lineItems: Ae, maxIndent: rt } = X(() => cr(e, ce, d, et), [e, ce, d, et]), re = X(
+    () => tt.map((u, M) => {
+      const Y = typeof R == "function" ? R(u.entry, M) : R;
+      return { ...u, rowHeight: Number.isFinite(Y) && Y > 0 ? Y : Re };
     }),
-    [Ce, P]
-  ), ne = ee(() => K.map((b) => b.rowHeight), [K]), be = ee(() => {
-    const b = new Array(ne.length + 1);
-    b[0] = 0;
-    for (let F = 0; F < ne.length; F++)
-      b[F + 1] = b[F] + ne[F];
-    return b;
-  }, [ne]), Ze = C((b) => K[b]?.rowHeight ?? Ee, [K]), ve = ee(
-    () => !u || Se.length === 0 ? { segmentsByItem: [], glyphsByItem: [] } : wt(Se, ne, be, ye, u, d ?? He),
-    [Se, ne, be, u, d]
-  ), ge = ee(() => !u || e.length === 0 ? 0 : (je + 2) * ye, [e.length, je, u]), { renderStart: Ae, renderEnd: Oe, lookaheadEnd: Me } = ee(
-    () => Et(K.length, ae, Q, k, pe, be),
-    [K.length, ae, Q, k, pe, be]
-  ), Qe = ee(() => !u || ge <= 0 || ae <= 0 || ve.segmentsByItem.length === 0 ? null : /* @__PURE__ */ N.jsx("div", { className: "pointer-events-none absolute inset-0 z-0", "aria-hidden": "true", children: /* @__PURE__ */ N.jsx("div", { className: "absolute top-0 left-0", style: { width: ge, height: ae }, children: /* @__PURE__ */ N.jsx(
-    Be,
+    [tt, R]
+  ), de = X(() => re.map((u) => u.rowHeight), [re]), Se = X(() => {
+    const u = new Array(de.length + 1);
+    u[0] = 0;
+    for (let M = 0; M < de.length; M++)
+      u[M + 1] = u[M] + de[M];
+    return u;
+  }, [de]), nt = F((u) => re[u]?.rowHeight ?? Re, [re]), Ne = X(
+    () => !d || Ae.length === 0 ? { segmentsByItem: [], glyphsByItem: [] } : ur(Ae, de, Se, be, d, h ?? yt),
+    [Ae, de, Se, d, h]
+  ), Ie = X(() => !d || e.length === 0 ? 0 : (rt + 2) * be, [e.length, rt, d]), { renderStart: st, renderEnd: ot, lookaheadEnd: at } = X(
+    () => dr(re.length, ie, Ee, le, we, Se),
+    [re.length, ie, Ee, le, we, Se]
+  ), Oe = X(() => !d || Ie <= 0 || ie <= 0 || Ne.segmentsByItem.length === 0 ? null : /* @__PURE__ */ y.jsx("div", { className: "pointer-events-none absolute inset-0 z-0", "aria-hidden": "true", children: /* @__PURE__ */ y.jsx("div", { className: "absolute top-0 left-0", style: { width: Ie, height: ie }, children: /* @__PURE__ */ y.jsx(
+    Ct,
     {
-      segmentsByItem: ve.segmentsByItem,
-      glyphsByItem: ve.glyphsByItem,
-      itemHeight: ne[0] ?? Ee,
-      width: ge,
-      viewportHeight: ae,
-      scrollPosition: pe,
-      color: i,
-      expandGlyphColor: i,
-      expandGlyphSize: d ?? He,
-      renderStartIndex: Ae,
-      renderEndIndex: Oe,
-      lookaheadEndIndex: Me
+      segmentsByItem: Ne.segmentsByItem,
+      glyphsByItem: Ne.glyphsByItem,
+      itemHeight: de[0] ?? Re,
+      width: Ie,
+      viewportHeight: ie,
+      scrollPosition: we,
+      color: c,
+      expandGlyphColor: c,
+      expandGlyphSize: h ?? yt,
+      renderStartIndex: st,
+      renderEndIndex: ot,
+      lookaheadEndIndex: at
     }
-  ) }) }), [ge, ae, Ae, Oe, Me, pe, ve, i, u, d, ne]), Ke = C((b) => K[b], [K]);
-  return e.length === 0 ? /* @__PURE__ */ N.jsx("div", { className: Te, style: Pe }) : /* @__PURE__ */ N.jsx("div", { ref: O, className: Te, style: Pe, role: "tree", children: /* @__PURE__ */ N.jsx(
-    nt,
-    {
-      ref: t,
-      itemCount: K.length,
-      getItem: Ke,
-      getItemHeight: Ze,
-      viewportSize: ae,
-      overscanCount: Q,
-      onScroll: ze,
-      onRangeChange: Ue,
-      className: _,
-      background: /* @__PURE__ */ N.jsxs(N.Fragment, { children: [
-        Qe,
-        J
-      ] }),
-      initialScrollIndex: Ie,
-      initialScrollOffset: B,
-      onItemFocus: Ve,
-      callbackThrottleMs: ue,
-      contentInsets: Xe,
-      scrollBarOptions: Ge,
-      behaviorOptions: Je,
-      children: (b) => b && /* @__PURE__ */ N.jsx(
-        _e,
+  ) }) }), [Ie, ie, st, ot, at, we, Ne, c, d, h, de]), lt = F((u) => re[u], [re]), ue = N?.columns, ye = N?.scrollBarWidth ?? _e?.width ?? Rt, V = X(() => ue ? Kt({ measuredWidth: j, columns: ue, scrollBarWidth: ye }) : null, [ue, j, ye]), ke = X(() => ue ? Qt(ue) : "", [ue]), jt = X(() => N?.showFooter && ue ? er(e) : [], [N?.showFooter, ue, e]), pe = V?.maxHScroll ?? 0;
+  ae(() => {
+    me((u) => Le(u, pe));
+  }, [pe]);
+  const it = F((u) => me((M) => Le(M + u, pe)), [pe]), ct = X(
+    () => ({ iconOverrides: S, showExpandIcons: b, showDirectoryIcons: O, showFileIcons: x, useCanvasExpandIcons: d, expandIconSize: h, highlightStyles: D }),
+    [S, b, O, x, d, h, D]
+  ), dt = e.length === 0, ut = X(
+    () => /* @__PURE__ */ y.jsx(
+      Ht,
+      {
+        ref: _,
+        itemCount: re.length,
+        getItem: lt,
+        getItemHeight: nt,
+        viewportSize: ie,
+        overscanCount: Ee,
+        onScroll: Qe,
+        onRangeChange: Ke,
+        className: Be,
+        onWheelHorizontal: H ? it : void 0,
+        background: /* @__PURE__ */ y.jsxs(y.Fragment, { children: [
+          H && V ? (
+            // Clip the connector-line canvas to the frozen name column so deep trees never bleed into the numeric region.
+            /* @__PURE__ */ y.jsx("div", { className: "pointer-events-none absolute top-0 left-0 z-0 h-full overflow-hidden", style: { width: V.nameWidth }, "aria-hidden": "true", children: Oe })
+          ) : Oe,
+          Ye
+        ] }),
+        initialScrollIndex: Ve,
+        initialScrollOffset: fe,
+        onItemFocus: Je,
+        callbackThrottleMs: ze,
+        contentInsets: Xe,
+        scrollBarOptions: _e,
+        behaviorOptions: qe,
+        children: (u) => u ? H && N && V ? /* @__PURE__ */ y.jsx(
+          It,
+          {
+            entry: u.entry,
+            indentLevel: u.indentLevel,
+            rowHeight: u.rowHeight,
+            isDirOpen: ce,
+            columns: N.columns,
+            numericTemplate: ke,
+            numericTotal: V.numericTotal,
+            nameWidth: V.nameWidth,
+            rowClassName: N.rowClassName,
+            selection: { onEntryClick: E, selectedPath: v ?? null, mode: i, selectedItems: f, onSelectionChange: g },
+            expansion: { toggleDirectory: t, onToggleDirectoryRecursive: Me },
+            visual: ct
+          },
+          u.entry.absolutePath
+        ) : /* @__PURE__ */ y.jsx(
+          Fe,
+          {
+            entry: u.entry,
+            indentLevel: u.indentLevel,
+            rowHeight: u.rowHeight,
+            isDirOpen: ce,
+            parentIsLast: u.parentIsLast,
+            renderChildren: !1,
+            expansion: { toggleDirectory: t, onToggleDirectoryRecursive: Me },
+            selection: { onEntryClick: E, selectedPath: v ?? null, mode: i, selectedItems: f, onSelectionChange: g },
+            visual: {
+              iconOverrides: S,
+              showExpandIcons: b,
+              showDirectoryIcons: O,
+              showFileIcons: x,
+              useCanvasExpandIcons: d,
+              expandIconSize: h,
+              highlightStyles: D,
+              entryClassName: k,
+              entryStyle: G,
+              nameClassName: W,
+              nameStyle: L,
+              directoryNameClassName: ee,
+              directoryNameStyle: z,
+              fileNameClassName: J,
+              fileNameStyle: C
+            }
+          },
+          u.entry.absolutePath
+        ) : null
+      }
+    ),
+    [
+      re.length,
+      lt,
+      nt,
+      ie,
+      Ee,
+      Qe,
+      Ke,
+      Be,
+      H,
+      it,
+      V,
+      Oe,
+      Ye,
+      Ve,
+      fe,
+      Je,
+      ze,
+      Xe,
+      _e,
+      qe,
+      N,
+      ke,
+      ce,
+      E,
+      v,
+      i,
+      f,
+      g,
+      t,
+      Me,
+      ct,
+      S,
+      b,
+      O,
+      x,
+      d,
+      h,
+      D,
+      k,
+      G,
+      W,
+      L,
+      ee,
+      z,
+      J,
+      C
+    ]
+  );
+  if (!(N && V))
+    return dt ? /* @__PURE__ */ y.jsx("div", { className: je, style: Pe }) : /* @__PURE__ */ y.jsx("div", { ref: p, className: je, style: Pe, role: "tree", children: ut });
+  const Pt = N.showHeader ?? !0, Mt = N.showFooter ?? !1, At = { ...Pe, "--dt-hscroll": `${B}px` };
+  return /* @__PURE__ */ y.jsxs("div", { ref: p, className: P(je, "dt-grid"), style: At, role: "treegrid", children: [
+    Pt && /* @__PURE__ */ y.jsx(Jt, { columns: N.columns, numericTemplate: ke, numericTotal: V.numericTotal, nameWidth: V.nameWidth, scrollBarWidth: ye, className: N.headerClassName }),
+    /* @__PURE__ */ y.jsx("div", { ref: T, className: "dt-grid-body", children: !dt && ut }),
+    pe > 0 && /* @__PURE__ */ y.jsxs("div", { className: "dt-grid-hscrollbar-row", children: [
+      /* @__PURE__ */ y.jsx("div", { className: "dt-grid-scrollbar-spacer", style: { width: V.nameWidth }, "aria-hidden": "true" }),
+      /* @__PURE__ */ y.jsx(
+        $t,
         {
-          entry: b.entry,
-          indentLevel: b.indentLevel,
-          rowHeight: b.rowHeight,
-          isDirOpen: de,
-          parentIsLast: b.parentIsLast,
-          renderChildren: !1,
-          expansion: { toggleDirectory: r, onToggleDirectoryRecursive: qe },
-          selection: { onEntryClick: R, selectedPath: w ?? null, mode: c, selectedItems: h, onSelectionChange: y },
-          visual: {
-            iconOverrides: g,
-            showExpandIcons: p,
-            showDirectoryIcons: j,
-            showFileIcons: v,
-            useCanvasExpandIcons: u,
-            expandIconSize: d,
-            highlightStyles: A,
-            entryClassName: X,
-            entryStyle: U,
-            nameClassName: q,
-            nameStyle: $,
-            directoryNameClassName: V,
-            directoryNameStyle: Z,
-            fileNameClassName: G,
-            fileNameStyle: se
+          horizontal: !0,
+          contentSize: V.numericTotal,
+          viewportSize: V.numericVisible,
+          scrollPosition: B,
+          scrollBarWidth: ye,
+          onScroll: (u) => {
+            const M = typeof u == "function" ? u(B) : u, Y = Le(M, pe);
+            return me(Y), Y;
           }
-        },
-        b.entry.absolutePath
-      )
-    }
-  ) });
-}, jt = ({ initialExpanded: e = /* @__PURE__ */ new Set(), storageKey: r } = {}) => {
-  const [a, n] = rt(), [o, l] = ie(() => {
-    if (typeof window < "u" && r)
+        }
+      ),
+      /* @__PURE__ */ y.jsx("div", { className: "dt-grid-scrollbar-spacer", style: { width: ye }, "aria-hidden": "true" })
+    ] }),
+    Mt && /* @__PURE__ */ y.jsx(qt, { columns: N.columns, numericTemplate: ke, numericTotal: V.numericTotal, nameWidth: V.nameWidth, scrollBarWidth: ye, allEntries: jt, className: N.footerClassName })
+  ] });
+}, br = ({ initialExpanded: e = /* @__PURE__ */ new Set(), storageKey: t } = {}) => {
+  const [o, n] = Lt(), [s, l] = ne(() => {
+    if (typeof window < "u" && t)
       try {
-        const i = window.localStorage.getItem(r);
-        if (i) {
-          const u = JSON.parse(i);
-          return new Set(u);
+        const c = window.localStorage.getItem(t);
+        if (c) {
+          const d = JSON.parse(c);
+          return new Set(d);
         }
-      } catch (i) {
-        console.error("[useDirectoryTreeState] Error reading from localStorage", i);
+      } catch (c) {
+        console.error("[useDirectoryTreeState] Error reading from localStorage", c);
       }
     return e;
-  }), s = C((i) => {
+  }), a = F((c) => {
     n(() => {
-      l((u) => {
-        const p = new Set(u);
-        return i(p), p;
+      l((d) => {
+        const b = new Set(d);
+        return c(b), b;
       });
     });
-  }, []), m = C(
-    (i, u) => {
-      s((p) => {
-        for (const j of i)
-          u(p, j);
+  }, []), m = F(
+    (c, d) => {
+      a((b) => {
+        for (const O of c)
+          d(b, O);
       });
     },
-    [s]
+    [a]
   );
-  oe(() => {
-    if (r && typeof window < "u")
+  ae(() => {
+    if (t && typeof window < "u")
       try {
-        window.localStorage.setItem(r, JSON.stringify(Array.from(o)));
-      } catch (i) {
-        console.warn(`Error setting localStorage key "${r}":`, i);
+        window.localStorage.setItem(t, JSON.stringify(Array.from(s)));
+      } catch (c) {
+        console.warn(`Error setting localStorage key "${t}":`, c);
       }
-  }, [o, r]);
-  const R = C(
-    (i) => {
-      m([i], (u, p) => {
-        u.has(p) ? u.delete(p) : u.add(p);
+  }, [s, t]);
+  const E = F(
+    (c) => {
+      m([c], (d, b) => {
+        d.has(b) ? d.delete(b) : d.add(b);
       });
     },
     [m]
-  ), w = C(
-    (i) => {
-      m([i], (u, p) => {
-        u.add(p);
+  ), v = F(
+    (c) => {
+      m([c], (d, b) => {
+        d.add(b);
       });
     },
     [m]
-  ), c = C(
-    (i) => {
-      m([i], (u, p) => {
-        u.delete(p);
+  ), i = F(
+    (c) => {
+      m([c], (d, b) => {
+        d.delete(b);
       });
     },
     [m]
-  ), h = C(
-    (i) => {
-      m(i, (u, p) => {
-        u.delete(p);
+  ), f = F(
+    (c) => {
+      m(c, (d, b) => {
+        d.delete(b);
       });
     },
     [m]
-  ), y = C(
-    (i) => {
-      m(i, (u, p) => {
-        u.add(p);
+  ), g = F(
+    (c) => {
+      m(c, (d, b) => {
+        d.add(b);
       });
     },
     [m]
-  ), E = C(() => {
-    s((i) => {
-      i.clear();
+  ), w = F(() => {
+    a((c) => {
+      c.clear();
     });
-  }, [s]), I = C((i) => o.has(i), [o]);
+  }, [a]), I = F((c) => s.has(c), [s]);
   return {
-    expanded: o,
-    toggle: R,
-    expand: w,
-    collapse: c,
-    collapseMultiple: h,
-    expandMultiple: y,
-    collapseAll: E,
+    expanded: s,
+    toggle: E,
+    expand: v,
+    collapse: i,
+    collapseMultiple: f,
+    expandMultiple: g,
+    collapseAll: w,
     isExpanded: I,
-    isPending: a
+    isPending: o
   };
 };
 export {
-  Ct as DirectoryTree,
-  W as directoryTreeClasses,
-  jt as useDirectoryTreeState
+  vr as DirectoryTree,
+  A as directoryTreeClasses,
+  br as useDirectoryTreeState
 };