hazo_files 1.0.0

package/dist/ui/index.mjs

@@ -0,0 +1,3982 @@
+// src/ui/components/FileBrowser.tsx
+import { useState as useState6, useCallback as useCallback7, useEffect as useEffect4 } from "react";
+
+// src/ui/components/PathBreadcrumb.tsx
+import React from "react";
+
+// src/common/path-utils.ts
+function normalizePath(inputPath) {
+  if (!inputPath) return "/";
+  let normalized = inputPath.replace(/\\/g, "/");
+  normalized = normalized.replace(/\/+/g, "/");
+  const parts = normalized.split("/");
+  const result = [];
+  for (const part of parts) {
+    if (part === "." || part === "") continue;
+    if (part === "..") {
+      result.pop();
+    } else {
+      result.push(part);
+    }
+  }
+  normalized = "/" + result.join("/");
+  return normalized;
+}
+function getPathSegments(inputPath) {
+  const normalized = normalizePath(inputPath);
+  if (normalized === "/") return [];
+  return normalized.slice(1).split("/");
+}
+function getExtension(filename) {
+  const lastDot = filename.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === 0) return "";
+  return filename.slice(lastDot);
+}
+function getNameWithoutExtension(filename) {
+  const lastDot = filename.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === 0) return filename;
+  return filename.slice(0, lastDot);
+}
+function getBreadcrumbs(inputPath) {
+  const segments = getPathSegments(inputPath);
+  const breadcrumbs = [
+    { name: "Root", path: "/" }
+  ];
+  let currentPath = "";
+  for (const segment of segments) {
+    currentPath += "/" + segment;
+    breadcrumbs.push({
+      name: segment,
+      path: currentPath
+    });
+  }
+  return breadcrumbs;
+}
+
+// src/ui/icons/FileIcons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultSize = 24;
+function FolderIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" })
+    }
+  );
+}
+function FolderOpenIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" })
+    }
+  );
+}
+function FileIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+      ]
+    }
+  );
+}
+function FileTextIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", x2: "8", y1: "13", y2: "13" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", x2: "8", y1: "17", y2: "17" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", x2: "8", y1: "9", y2: "9" })
+      ]
+    }
+  );
+}
+function ImageIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+      ]
+    }
+  );
+}
+function VideoIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m22 8-6 4 6 4V8Z" }),
+        /* @__PURE__ */ jsx("rect", { width: "14", height: "12", x: "2", y: "6", rx: "2", ry: "2" })
+      ]
+    }
+  );
+}
+function AudioIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+        /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+      ]
+    }
+  );
+}
+function ArchiveIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "20", height: "5", x: "2", y: "3", rx: "1" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 12h4" })
+      ]
+    }
+  );
+}
+function PdfIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1" })
+      ]
+    }
+  );
+}
+function CodeIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+        /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+      ]
+    }
+  );
+}
+function UploadIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+      ]
+    }
+  );
+}
+function DownloadIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+      ]
+    }
+  );
+}
+function TrashIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+      ]
+    }
+  );
+}
+function PencilIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+        /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
+      ]
+    }
+  );
+}
+function PlusIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+      ]
+    }
+  );
+}
+function RefreshIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
+      ]
+    }
+  );
+}
+function ChevronRightIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function ChevronDownIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function HomeIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
+      ]
+    }
+  );
+}
+function MoreVerticalIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1" })
+      ]
+    }
+  );
+}
+function XIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function LoaderIcon({ className, size = defaultSize }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: `animate-spin ${className || ""}`,
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function getFileIcon(mimeType, isDirectory) {
+  if (isDirectory) {
+    return FolderIcon;
+  }
+  if (mimeType.startsWith("image/")) {
+    return ImageIcon;
+  }
+  if (mimeType.startsWith("video/")) {
+    return VideoIcon;
+  }
+  if (mimeType.startsWith("audio/")) {
+    return AudioIcon;
+  }
+  if (mimeType === "application/pdf") {
+    return PdfIcon;
+  }
+  if (mimeType.startsWith("text/") || mimeType === "application/json" || mimeType === "application/javascript" || mimeType === "application/typescript") {
+    return FileTextIcon;
+  }
+  if (mimeType === "application/zip" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/gzip") {
+    return ArchiveIcon;
+  }
+  return FileIcon;
+}
+
+// src/ui/components/PathBreadcrumb.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PathBreadcrumb({ currentPath, onNavigate, className = "" }) {
+  const breadcrumbs = getBreadcrumbs(currentPath);
+  return /* @__PURE__ */ jsx2("nav", { className: `flex items-center space-x-1 text-sm ${className}`, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx2(ChevronRightIcon, { size: 16, className: "text-gray-400 flex-shrink-0" }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        onClick: () => onNavigate(crumb.path),
+        className: `
+              flex items-center px-2 py-1 rounded hover:bg-gray-100 transition-colors
+              ${index === breadcrumbs.length - 1 ? "font-medium text-gray-900" : "text-gray-600"}
+            `,
+        children: [
+          index === 0 ? /* @__PURE__ */ jsx2(HomeIcon, { size: 16, className: "mr-1" }) : null,
+          /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[150px]", children: crumb.name })
+        ]
+      }
+    )
+  ] }, crumb.path)) });
+}
+
+// src/ui/components/FolderTree.tsx
+import { useCallback } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TreeNodeItem({
+  node,
+  level,
+  currentPath,
+  onSelect,
+  onExpand,
+  onToggle
+}) {
+  const isSelected = currentPath === node.path;
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpanded = node.isExpanded;
+  const isLoading = node.isLoading;
+  const handleToggle = useCallback((e) => {
+    e.stopPropagation();
+    if (isExpanded) {
+      onToggle(node.path);
+    } else {
+      onExpand(node.path);
+    }
+  }, [isExpanded, node.path, onExpand, onToggle]);
+  const handleSelect = useCallback(() => {
+    onSelect(node.path);
+  }, [node.path, onSelect]);
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: `
+          flex items-center py-1 px-2 cursor-pointer rounded
+          hover:bg-gray-100 transition-colors
+          ${isSelected ? "bg-blue-100 text-blue-700" : "text-gray-700"}
+        `,
+        style: { paddingLeft: `${level * 16 + 8}px` },
+        onClick: handleSelect,
+        onDoubleClick: handleToggle,
+        children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: handleToggle,
+              className: "p-0.5 mr-1 hover:bg-gray-200 rounded flex-shrink-0",
+              children: isLoading ? /* @__PURE__ */ jsx3(LoaderIcon, { size: 14 }) : hasChildren || !isExpanded ? isExpanded ? /* @__PURE__ */ jsx3(ChevronDownIcon, { size: 14 }) : /* @__PURE__ */ jsx3(ChevronRightIcon, { size: 14 }) : /* @__PURE__ */ jsx3("span", { className: "w-3.5" })
+            }
+          ),
+          isExpanded ? /* @__PURE__ */ jsx3(FolderOpenIcon, { size: 16, className: "mr-2 text-yellow-500 flex-shrink-0" }) : /* @__PURE__ */ jsx3(FolderIcon, { size: 16, className: "mr-2 text-yellow-500 flex-shrink-0" }),
+          /* @__PURE__ */ jsx3("span", { className: "truncate text-sm", children: node.name })
+        ]
+      }
+    ),
+    isExpanded && hasChildren && /* @__PURE__ */ jsx3("div", { children: node.children.map((child) => /* @__PURE__ */ jsx3(
+      TreeNodeItem,
+      {
+        node: child,
+        level: level + 1,
+        currentPath,
+        onSelect,
+        onExpand,
+        onToggle
+      },
+      child.id
+    )) })
+  ] });
+}
+function FolderTree({
+  tree,
+  currentPath,
+  onSelect,
+  onExpand,
+  onToggle,
+  className = ""
+}) {
+  const rootNode = {
+    id: "root",
+    name: "Root",
+    path: "/",
+    children: tree,
+    isExpanded: true
+  };
+  return /* @__PURE__ */ jsx3("div", { className: `overflow-auto ${className}`, children: /* @__PURE__ */ jsx3(
+    TreeNodeItem,
+    {
+      node: rootNode,
+      level: 0,
+      currentPath,
+      onSelect,
+      onExpand,
+      onToggle
+    }
+  ) });
+}
+
+// src/ui/components/FileList.tsx
+import { useCallback as useCallback2 } from "react";
+
+// src/common/utils.ts
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
+// src/ui/components/FileList.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function FileItemCard({
+  item,
+  isSelected,
+  onSelect,
+  onOpen,
+  onContextMenu,
+  viewMode
+}) {
+  const Icon = getFileIcon(
+    item.isDirectory ? "folder" : item.mimeType,
+    item.isDirectory
+  );
+  const handleClick = useCallback2((e) => {
+    e.stopPropagation();
+    onSelect();
+  }, [onSelect]);
+  const handleDoubleClick = useCallback2((e) => {
+    e.stopPropagation();
+    onOpen();
+  }, [onOpen]);
+  const handleContextMenu = useCallback2((e) => {
+    e.preventDefault();
+    onSelect();
+    onContextMenu?.(e);
+  }, [onSelect, onContextMenu]);
+  if (viewMode === "grid") {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `
+          p-3 rounded-lg cursor-pointer transition-all
+          hover:bg-gray-100
+          ${isSelected ? "bg-blue-100 ring-2 ring-blue-500" : "bg-white"}
+        `,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick,
+        onContextMenu: handleContextMenu,
+        children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center text-center", children: [
+          /* @__PURE__ */ jsx4(
+            Icon,
+            {
+              size: 40,
+              className: item.isDirectory ? "text-yellow-500" : "text-gray-500"
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "mt-2 text-sm truncate w-full", title: item.name, children: item.name }),
+          !item.isDirectory && /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-400 mt-1", children: formatBytes(item.size) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `
+        flex items-center p-2 rounded cursor-pointer transition-all
+        hover:bg-gray-100
+        ${isSelected ? "bg-blue-100" : ""}
+      `,
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onContextMenu: handleContextMenu,
+      children: [
+        /* @__PURE__ */ jsx4(
+          Icon,
+          {
+            size: 20,
+            className: `flex-shrink-0 ${item.isDirectory ? "text-yellow-500" : "text-gray-500"}`
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "ml-3 flex-1 truncate text-sm", title: item.name, children: item.name }),
+        !item.isDirectory && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-400 ml-4", children: formatBytes(item.size) }),
+          /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-400 ml-4 w-32 truncate", children: new Date(item.modifiedAt).toLocaleDateString() })
+        ] })
+      ]
+    }
+  );
+}
+function FileList({
+  files,
+  selectedItem,
+  isLoading,
+  onSelect,
+  onOpen,
+  onContextMenu,
+  viewMode = "grid",
+  className = ""
+}) {
+  const handleBackgroundClick = useCallback2(() => {
+    onSelect(null);
+  }, [onSelect]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx4("div", { className: `flex items-center justify-center h-full ${className}`, children: /* @__PURE__ */ jsx4(LoaderIcon, { size: 32, className: "text-gray-400" }) });
+  }
+  if (files.length === 0) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `flex flex-col items-center justify-center h-full text-gray-400 ${className}`,
+        onClick: handleBackgroundClick,
+        children: [
+          /* @__PURE__ */ jsx4(
+            "svg",
+            {
+              className: "w-16 h-16 mb-4",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx4(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 1.5,
+                  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx4("p", { children: "This folder is empty" })
+        ]
+      }
+    );
+  }
+  if (viewMode === "grid") {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-2 p-2 ${className}`,
+        onClick: handleBackgroundClick,
+        children: files.map((file) => /* @__PURE__ */ jsx4(
+          FileItemCard,
+          {
+            item: file,
+            isSelected: selectedItem?.id === file.id,
+            onSelect: () => onSelect(file),
+            onOpen: () => onOpen(file),
+            onContextMenu: onContextMenu ? (e) => onContextMenu(file, e) : void 0,
+            viewMode: "grid"
+          },
+          file.id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `flex flex-col ${className}`,
+      onClick: handleBackgroundClick,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center p-2 border-b text-xs text-gray-500 font-medium", children: [
+          /* @__PURE__ */ jsx4("span", { className: "flex-1 ml-8", children: "Name" }),
+          /* @__PURE__ */ jsx4("span", { className: "w-20 ml-4", children: "Size" }),
+          /* @__PURE__ */ jsx4("span", { className: "w-32 ml-4", children: "Modified" })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-auto", children: files.map((file) => /* @__PURE__ */ jsx4(
+          FileItemCard,
+          {
+            item: file,
+            isSelected: selectedItem?.id === file.id,
+            onSelect: () => onSelect(file),
+            onOpen: () => onOpen(file),
+            onContextMenu: onContextMenu ? (e) => onContextMenu(file, e) : void 0,
+            viewMode: "list"
+          },
+          file.id
+        )) })
+      ]
+    }
+  );
+}
+
+// src/ui/components/FilePreview.tsx
+import { useEffect, useState } from "react";
+
+// src/common/mime-types.ts
+var MIME_TYPES = {
+  // Text
+  ".txt": "text/plain",
+  ".html": "text/html",
+  ".htm": "text/html",
+  ".css": "text/css",
+  ".csv": "text/csv",
+  ".xml": "text/xml",
+  ".json": "application/json",
+  ".js": "application/javascript",
+  ".ts": "application/typescript",
+  ".jsx": "text/jsx",
+  ".tsx": "text/tsx",
+  ".md": "text/markdown",
+  ".yaml": "text/yaml",
+  ".yml": "text/yaml",
+  // Images
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".bmp": "image/bmp",
+  ".webp": "image/webp",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  // Documents
+  ".pdf": "application/pdf",
+  ".doc": "application/msword",
+  ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  ".xls": "application/vnd.ms-excel",
+  ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ".ppt": "application/vnd.ms-powerpoint",
+  ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  // Archives
+  ".zip": "application/zip",
+  ".rar": "application/x-rar-compressed",
+  ".7z": "application/x-7z-compressed",
+  ".tar": "application/x-tar",
+  ".gz": "application/gzip",
+  // Audio
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".ogg": "audio/ogg",
+  ".m4a": "audio/mp4",
+  ".flac": "audio/flac",
+  // Video
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".avi": "video/x-msvideo",
+  ".mov": "video/quicktime",
+  ".wmv": "video/x-ms-wmv",
+  ".mkv": "video/x-matroska",
+  // Fonts
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  // Other
+  ".exe": "application/x-msdownload",
+  ".dmg": "application/x-apple-diskimage",
+  ".bin": "application/octet-stream"
+};
+var EXTENSION_BY_MIME = Object.entries(MIME_TYPES).reduce(
+  (acc, [ext, mime]) => {
+    if (!acc[mime]) {
+      acc[mime] = ext;
+    }
+    return acc;
+  },
+  {}
+);
+function getMimeType(filename) {
+  const ext = getExtension(filename).toLowerCase();
+  return MIME_TYPES[ext] || "application/octet-stream";
+}
+function isImage(filenameOrMime) {
+  const mime = filenameOrMime.includes("/") ? filenameOrMime : getMimeType(filenameOrMime);
+  return mime.startsWith("image/");
+}
+function isVideo(filenameOrMime) {
+  const mime = filenameOrMime.includes("/") ? filenameOrMime : getMimeType(filenameOrMime);
+  return mime.startsWith("video/");
+}
+function isAudio(filenameOrMime) {
+  const mime = filenameOrMime.includes("/") ? filenameOrMime : getMimeType(filenameOrMime);
+  return mime.startsWith("audio/");
+}
+function isText(filenameOrMime) {
+  const mime = filenameOrMime.includes("/") ? filenameOrMime : getMimeType(filenameOrMime);
+  return mime.startsWith("text/") || mime === "application/json" || mime === "application/javascript";
+}
+function isPreviewable(filenameOrMime) {
+  return isImage(filenameOrMime) || isText(filenameOrMime) || isVideo(filenameOrMime) || isAudio(filenameOrMime);
+}
+
+// src/ui/components/FilePreview.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function FilePreview({
+  item,
+  getPreviewUrl,
+  getFileContent,
+  className = ""
+}) {
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [textContent, setTextContent] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setPreviewUrl(null);
+    setTextContent(null);
+    setError(null);
+    if (!item || item.isDirectory) {
+      return;
+    }
+    const fileItem2 = item;
+    const mimeType2 = fileItem2.mimeType;
+    const loadPreview = async () => {
+      setIsLoading(true);
+      try {
+        if ((isImage(mimeType2) || isVideo(mimeType2) || isAudio(mimeType2)) && getPreviewUrl) {
+          const url = await getPreviewUrl(item.path);
+          setPreviewUrl(url);
+        } else if (isText(mimeType2) && getFileContent) {
+          const content = await getFileContent(item.path);
+          setTextContent(content);
+        }
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (isPreviewable(mimeType2) && (getPreviewUrl || getFileContent)) {
+      loadPreview();
+    }
+  }, [item, getPreviewUrl, getFileContent]);
+  if (!item) {
+    return /* @__PURE__ */ jsx5("div", { className: `flex items-center justify-center h-full text-gray-400 ${className}`, children: /* @__PURE__ */ jsx5("p", { children: "Select a file to preview" }) });
+  }
+  if (item.isDirectory) {
+    const Icon2 = getFileIcon("folder", true);
+    return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col items-center justify-center h-full p-4 ${className}`, children: [
+      /* @__PURE__ */ jsx5(Icon2, { size: 64, className: "text-yellow-500 mb-4" }),
+      /* @__PURE__ */ jsx5("h3", { className: "text-lg font-medium", children: item.name }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-500 mt-2", children: "Folder" }),
+      /* @__PURE__ */ jsxs5("div", { className: "mt-4 text-xs text-gray-400 space-y-1", children: [
+        /* @__PURE__ */ jsxs5("p", { children: [
+          "Created: ",
+          new Date(item.createdAt).toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsxs5("p", { children: [
+          "Modified: ",
+          new Date(item.modifiedAt).toLocaleString()
+        ] })
+      ] })
+    ] });
+  }
+  const fileItem = item;
+  const mimeType = fileItem.mimeType;
+  const Icon = getFileIcon(mimeType, false);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx5("div", { className: `flex items-center justify-center h-full ${className}`, children: /* @__PURE__ */ jsx5(LoaderIcon, { size: 32, className: "text-gray-400" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col items-center justify-center h-full p-4 text-red-500 ${className}`, children: [
+      /* @__PURE__ */ jsx5("p", { children: "Error loading preview" }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm mt-2", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col h-full ${className}`, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 overflow-auto p-4 flex items-center justify-center bg-gray-50", children: [
+      isImage(mimeType) && previewUrl && /* @__PURE__ */ jsx5(
+        "img",
+        {
+          src: previewUrl,
+          alt: item.name,
+          className: "max-w-full max-h-full object-contain"
+        }
+      ),
+      isVideo(mimeType) && previewUrl && /* @__PURE__ */ jsx5(
+        "video",
+        {
+          src: previewUrl,
+          controls: true,
+          className: "max-w-full max-h-full",
+          children: "Your browser does not support video playback."
+        }
+      ),
+      isAudio(mimeType) && previewUrl && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx5(Icon, { size: 64, className: "text-gray-400 mb-4" }),
+        /* @__PURE__ */ jsx5("audio", { src: previewUrl, controls: true, className: "w-full max-w-md", children: "Your browser does not support audio playback." })
+      ] }),
+      isText(mimeType) && textContent !== null && /* @__PURE__ */ jsx5("pre", { className: "w-full h-full overflow-auto text-sm bg-white p-4 rounded border font-mono whitespace-pre-wrap", children: textContent }),
+      !previewUrl && textContent === null && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center text-gray-400", children: [
+        /* @__PURE__ */ jsx5(Icon, { size: 64, className: "mb-4" }),
+        /* @__PURE__ */ jsx5("p", { children: "No preview available" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "border-t bg-white p-4", children: [
+      /* @__PURE__ */ jsx5("h3", { className: "font-medium truncate", title: item.name, children: item.name }),
+      /* @__PURE__ */ jsxs5("div", { className: "mt-2 text-sm text-gray-500 grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-gray-400", children: "Size:" }),
+          " ",
+          formatBytes(fileItem.size)
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-gray-400", children: "Type:" }),
+          " ",
+          mimeType
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-gray-400", children: "Created:" }),
+          " ",
+          new Date(item.createdAt).toLocaleDateString()
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-gray-400", children: "Modified:" }),
+          " ",
+          new Date(item.modifiedAt).toLocaleDateString()
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/components/FileActions.tsx
+import { useRef } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ActionButton({ icon, label, onClick, disabled, variant = "default" }) {
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      onClick,
+      disabled,
+      title: label,
+      className: `
+        flex items-center gap-2 px-3 py-2 rounded text-sm transition-colors
+        ${disabled ? "text-gray-300 cursor-not-allowed" : variant === "danger" ? "text-red-600 hover:bg-red-50" : "text-gray-700 hover:bg-gray-100"}
+      `,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx6("span", { className: "hidden sm:inline", children: label })
+      ]
+    }
+  );
+}
+function FileActions({
+  selectedItem,
+  onCreateFolder,
+  onUpload,
+  onDownload,
+  onDelete,
+  onRename,
+  onRefresh,
+  isLoading,
+  className = ""
+}) {
+  const fileInputRef = useRef(null);
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      onUpload(e.target.files);
+      e.target.value = "";
+    }
+  };
+  const hasSelection = selectedItem !== null;
+  const isFile = hasSelection && !selectedItem.isDirectory;
+  return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: handleFileChange,
+        className: "hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      ActionButton,
+      {
+        icon: /* @__PURE__ */ jsx6(PlusIcon, { size: 18 }),
+        label: "New Folder",
+        onClick: onCreateFolder,
+        disabled: isLoading
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      ActionButton,
+      {
+        icon: /* @__PURE__ */ jsx6(UploadIcon, { size: 18 }),
+        label: "Upload",
+        onClick: handleUploadClick,
+        disabled: isLoading
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "w-px h-6 bg-gray-200 mx-1" }),
+    /* @__PURE__ */ jsx6(
+      ActionButton,
+      {
+        icon: /* @__PURE__ */ jsx6(DownloadIcon, { size: 18 }),
+        label: "Download",
+        onClick: onDownload,
+        disabled: !isFile || isLoading
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      ActionButton,
+      {
+        icon: /* @__PURE__ */ jsx6(PencilIcon, { size: 18 }),
+        label: "Rename",
+        onClick: onRename,
+        disabled: !hasSelection || isLoading
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      ActionButton,
+      {
+        icon: /* @__PURE__ */ jsx6(TrashIcon, { size: 18 }),
+        label: "Delete",
+        onClick: onDelete,
+        disabled: !hasSelection || isLoading,
+        variant: "danger"
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "w-px h-6 bg-gray-200 mx-1" }),
+    /* @__PURE__ */ jsx6(
+      ActionButton,
+      {
+        icon: /* @__PURE__ */ jsx6(RefreshIcon, { size: 18, className: isLoading ? "animate-spin" : "" }),
+        label: "Refresh",
+        onClick: onRefresh,
+        disabled: isLoading
+      }
+    )
+  ] });
+}
+
+// src/ui/components/dialogs/CreateFolderDialog.tsx
+import { useState as useState2, useCallback as useCallback3, useEffect as useEffect2 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function CreateFolderDialog({
+  isOpen,
+  onClose,
+  onSubmit,
+  currentPath
+}) {
+  const [name, setName] = useState2("");
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    if (isOpen) {
+      setName("");
+      setError(null);
+    }
+  }, [isOpen]);
+  const handleSubmit = useCallback3(async (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Please enter a folder name");
+      return;
+    }
+    if (/[<>:"/\\|?*]/.test(name)) {
+      setError("Folder name contains invalid characters");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await onSubmit(name.trim());
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [name, onSubmit, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs7("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between p-4 border-b", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx7(FolderIcon, { size: 20, className: "text-yellow-500" }),
+          /* @__PURE__ */ jsx7("h2", { className: "text-lg font-medium", children: "Create New Folder" })
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 hover:bg-gray-100 rounded transition-colors",
+            children: /* @__PURE__ */ jsx7(XIcon, { size: 20 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxs7("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "text-sm text-gray-500 mb-4", children: [
+            "Creating folder in: ",
+            /* @__PURE__ */ jsx7("span", { className: "font-medium", children: currentPath })
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { className: "block", children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-gray-700", children: "Folder Name" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                type: "text",
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "Enter folder name",
+                className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                autoFocus: true,
+                disabled: isLoading
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-red-600", children: error })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-2 p-4 border-t bg-gray-50 rounded-b-lg", children: [
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md transition-colors",
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "submit",
+              className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+              disabled: isLoading || !name.trim(),
+              children: [
+                isLoading && /* @__PURE__ */ jsx7(LoaderIcon, { size: 16 }),
+                "Create Folder"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/components/dialogs/RenameDialog.tsx
+import { useState as useState3, useCallback as useCallback4, useEffect as useEffect3 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function RenameDialog({
+  isOpen,
+  item,
+  onClose,
+  onSubmit
+}) {
+  const [name, setName] = useState3("");
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  useEffect3(() => {
+    if (isOpen && item) {
+      setName(item.name);
+      setError(null);
+    }
+  }, [isOpen, item]);
+  const handleSubmit = useCallback4(async (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Please enter a name");
+      return;
+    }
+    if (/[<>:"/\\|?*]/.test(name)) {
+      setError("Name contains invalid characters");
+      return;
+    }
+    if (name.trim() === item?.name) {
+      onClose();
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await onSubmit(name.trim());
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [name, item, onSubmit, onClose]);
+  if (!isOpen || !item) return null;
+  return /* @__PURE__ */ jsxs8("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between p-4 border-b", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8(PencilIcon, { size: 20, className: "text-gray-500" }),
+          /* @__PURE__ */ jsxs8("h2", { className: "text-lg font-medium", children: [
+            "Rename ",
+            item.isDirectory ? "Folder" : "File"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 hover:bg-gray-100 rounded transition-colors",
+            children: /* @__PURE__ */ jsx8(XIcon, { size: 20 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxs8("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs8("label", { className: "block", children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium text-gray-700", children: "New Name" }),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "text",
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "Enter new name",
+                className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                autoFocus: true,
+                disabled: isLoading
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx8("p", { className: "mt-2 text-sm text-red-600", children: error })
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex justify-end gap-2 p-4 border-t bg-gray-50 rounded-b-lg", children: [
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md transition-colors",
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs8(
+            "button",
+            {
+              type: "submit",
+              className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+              disabled: isLoading || !name.trim(),
+              children: [
+                isLoading && /* @__PURE__ */ jsx8(LoaderIcon, { size: 16 }),
+                "Rename"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/components/dialogs/DeleteConfirmDialog.tsx
+import { useState as useState4, useCallback as useCallback5 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function DeleteConfirmDialog({
+  isOpen,
+  item,
+  onClose,
+  onConfirm
+}) {
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const handleConfirm = useCallback5(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      await onConfirm();
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onConfirm, onClose]);
+  if (!isOpen || !item) return null;
+  return /* @__PURE__ */ jsxs9("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between p-4 border-b", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx9(TrashIcon, { size: 20, className: "text-red-500" }),
+          /* @__PURE__ */ jsxs9("h2", { className: "text-lg font-medium", children: [
+            "Delete ",
+            item.isDirectory ? "Folder" : "File"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 hover:bg-gray-100 rounded transition-colors",
+            children: /* @__PURE__ */ jsx9(XIcon, { size: 20 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsxs9("p", { className: "text-gray-700", children: [
+          "Are you sure you want to delete",
+          " ",
+          /* @__PURE__ */ jsx9("span", { className: "font-medium", children: item.name }),
+          "?"
+        ] }),
+        item.isDirectory && /* @__PURE__ */ jsx9("p", { className: "mt-2 text-sm text-amber-600 bg-amber-50 p-3 rounded", children: "Warning: This folder and all its contents will be permanently deleted." }),
+        error && /* @__PURE__ */ jsx9("p", { className: "mt-2 text-sm text-red-600", children: error })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 p-4 border-t bg-gray-50 rounded-b-lg", children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md transition-colors",
+            disabled: isLoading,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: handleConfirm,
+            className: "px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+            disabled: isLoading,
+            children: [
+              isLoading && /* @__PURE__ */ jsx9(LoaderIcon, { size: 16 }),
+              "Delete"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/components/dialogs/UploadDialog.tsx
+import { useState as useState5, useCallback as useCallback6, useRef as useRef2 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function UploadDialog({
+  isOpen,
+  currentPath,
+  onClose,
+  onUpload
+}) {
+  const [selectedFiles, setSelectedFiles] = useState5([]);
+  const [isDragOver, setIsDragOver] = useState5(false);
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const fileInputRef = useRef2(null);
+  const handleFileSelect = useCallback6((files) => {
+    if (files) {
+      setSelectedFiles((prev) => [...prev, ...Array.from(files)]);
+      setError(null);
+    }
+  }, []);
+  const handleDragOver = useCallback6((e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback6((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = useCallback6((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    handleFileSelect(e.dataTransfer.files);
+  }, [handleFileSelect]);
+  const handleRemoveFile = useCallback6((index) => {
+    setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const handleUpload = useCallback6(async () => {
+    if (selectedFiles.length === 0) {
+      setError("Please select files to upload");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const dt = new DataTransfer();
+      selectedFiles.forEach((file) => dt.items.add(file));
+      await onUpload(dt.files);
+      setSelectedFiles([]);
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [selectedFiles, onUpload, onClose]);
+  const handleClose = useCallback6(() => {
+    setSelectedFiles([]);
+    setError(null);
+    onClose();
+  }, [onClose]);
+  if (!isOpen) return null;
+  const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);
+  return /* @__PURE__ */ jsxs10("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ jsxs10("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-4", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between p-4 border-b", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx10(UploadIcon, { size: 20, className: "text-blue-500" }),
+          /* @__PURE__ */ jsx10("h2", { className: "text-lg font-medium", children: "Upload Files" })
+        ] }),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            onClick: handleClose,
+            className: "p-1 hover:bg-gray-100 rounded transition-colors",
+            children: /* @__PURE__ */ jsx10(XIcon, { size: 20 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "text-sm text-gray-500 mb-4", children: [
+          "Uploading to: ",
+          /* @__PURE__ */ jsx10("span", { className: "font-medium", children: currentPath })
+        ] }),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: `
+              border-2 border-dashed rounded-lg p-8 text-center transition-colors
+              ${isDragOver ? "border-blue-500 bg-blue-50" : "border-gray-300"}
+            `,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            onClick: () => fileInputRef.current?.click(),
+            children: [
+              /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  onChange: (e) => handleFileSelect(e.target.files),
+                  className: "hidden"
+                }
+              ),
+              /* @__PURE__ */ jsx10(UploadIcon, { size: 40, className: "mx-auto text-gray-400 mb-4" }),
+              /* @__PURE__ */ jsxs10("p", { className: "text-gray-600", children: [
+                "Drag and drop files here, or",
+                " ",
+                /* @__PURE__ */ jsx10("span", { className: "text-blue-500 cursor-pointer", children: "browse" })
+              ] })
+            ]
+          }
+        ),
+        selectedFiles.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs10("span", { className: "text-sm font-medium text-gray-700", children: [
+              selectedFiles.length,
+              " file(s) selected"
+            ] }),
+            /* @__PURE__ */ jsxs10("span", { className: "text-sm text-gray-500", children: [
+              "Total: ",
+              formatBytes(totalSize)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx10("div", { className: "max-h-40 overflow-auto space-y-2", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              className: "flex items-center justify-between p-2 bg-gray-50 rounded",
+              children: [
+                /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ jsx10(FileIcon, { size: 16, className: "text-gray-400 flex-shrink-0" }),
+                  /* @__PURE__ */ jsx10("span", { className: "text-sm truncate", children: file.name }),
+                  /* @__PURE__ */ jsx10("span", { className: "text-xs text-gray-400 flex-shrink-0", children: formatBytes(file.size) })
+                ] }),
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    onClick: () => handleRemoveFile(index),
+                    className: "p-1 hover:bg-gray-200 rounded",
+                    children: /* @__PURE__ */ jsx10(XIcon, { size: 14 })
+                  }
+                )
+              ]
+            },
+            index
+          )) })
+        ] }),
+        error && /* @__PURE__ */ jsx10("p", { className: "mt-2 text-sm text-red-600", children: error })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 p-4 border-t bg-gray-50 rounded-b-lg", children: [
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: handleClose,
+            className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md transition-colors",
+            disabled: isLoading,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            onClick: handleUpload,
+            className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+            disabled: isLoading || selectedFiles.length === 0,
+            children: [
+              isLoading && /* @__PURE__ */ jsx10(LoaderIcon, { size: 16 }),
+              "Upload ",
+              selectedFiles.length > 0 && `(${selectedFiles.length})`
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/components/FileBrowser.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function FileBrowser({
+  api,
+  initialPath = "/",
+  showPreview = true,
+  showTree = true,
+  viewMode = "grid",
+  className = "",
+  treeWidth = 250,
+  previewHeight = 300,
+  onError,
+  onNavigate,
+  onSelect
+}) {
+  const [currentPath, setCurrentPath] = useState6(initialPath);
+  const [files, setFiles] = useState6([]);
+  const [tree, setTree] = useState6([]);
+  const [selectedItem, setSelectedItem] = useState6(null);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [createFolderOpen, setCreateFolderOpen] = useState6(false);
+  const [renameOpen, setRenameOpen] = useState6(false);
+  const [deleteOpen, setDeleteOpen] = useState6(false);
+  const [uploadOpen, setUploadOpen] = useState6(false);
+  const loadDirectory = useCallback7(async (path) => {
+    setIsLoading(true);
+    try {
+      const result = await api.listDirectory(path);
+      if (result.success && result.data) {
+        setFiles(result.data);
+        setCurrentPath(path);
+        setSelectedItem(null);
+        onNavigate?.(path);
+      } else {
+        onError?.(result.error || "Failed to load directory");
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api, onError, onNavigate]);
+  const loadTree = useCallback7(async () => {
+    const result = await api.getFolderTree("/", 3);
+    if (result.success && result.data) {
+      setTree(result.data);
+    }
+  }, [api]);
+  useEffect4(() => {
+    loadDirectory(initialPath);
+    if (showTree) {
+      loadTree();
+    }
+  }, [initialPath, loadDirectory, loadTree, showTree]);
+  const handleNavigate = useCallback7((path) => {
+    loadDirectory(path);
+  }, [loadDirectory]);
+  const handleRefresh = useCallback7(async () => {
+    await loadDirectory(currentPath);
+    if (showTree) {
+      await loadTree();
+    }
+  }, [currentPath, loadDirectory, loadTree, showTree]);
+  const handleSelect = useCallback7((item) => {
+    setSelectedItem(item);
+    onSelect?.(item);
+  }, [onSelect]);
+  const handleOpen = useCallback7((item) => {
+    if (item.isDirectory) {
+      loadDirectory(item.path);
+    } else {
+      handleDownload();
+    }
+  }, [loadDirectory]);
+  const handleTreeToggle = useCallback7((path) => {
+    setTree((prev) => toggleTreeNode(prev, path));
+  }, []);
+  const handleTreeExpand = useCallback7(async (path) => {
+    const result = await api.listDirectory(path);
+    if (result.success && result.data) {
+      const folders = result.data.filter((item) => item.isDirectory);
+      const children = folders.map((folder) => ({
+        id: folder.id,
+        name: folder.name,
+        path: folder.path,
+        children: []
+      }));
+      setTree((prev) => updateTreeNode(prev, path, children, true));
+    }
+  }, [api]);
+  const handleCreateFolder = useCallback7(async (name) => {
+    const newPath = currentPath === "/" ? `/${name}` : `${currentPath}/${name}`;
+    const result = await api.createDirectory(newPath);
+    if (result.success && result.data) {
+      setFiles((prev) => sortItems([...prev, result.data]));
+      await loadTree();
+    } else {
+      throw new Error(result.error || "Failed to create folder");
+    }
+  }, [api, currentPath, loadTree]);
+  const handleUpload = useCallback7(async (fileList) => {
+    for (let i = 0; i < fileList.length; i++) {
+      const file = fileList[i];
+      const remotePath = currentPath === "/" ? `/${file.name}` : `${currentPath}/${file.name}`;
+      const result = await api.uploadFile(file, remotePath);
+      if (result.success && result.data) {
+        setFiles((prev) => sortItems([...prev, result.data]));
+      } else {
+        onError?.(result.error || `Failed to upload ${file.name}`);
+      }
+    }
+  }, [api, currentPath, onError]);
+  const handleDownload = useCallback7(async () => {
+    if (!selectedItem || selectedItem.isDirectory) return;
+    const result = await api.downloadFile(selectedItem.path);
+    if (result.success && result.data) {
+      const blob = result.data;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = selectedItem.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } else {
+      onError?.(result.error || "Failed to download file");
+    }
+  }, [api, selectedItem, onError]);
+  const handleDelete = useCallback7(async () => {
+    if (!selectedItem) return;
+    let result;
+    if (selectedItem.isDirectory) {
+      result = await api.removeDirectory(selectedItem.path, true);
+    } else {
+      result = await api.deleteFile(selectedItem.path);
+    }
+    if (result.success) {
+      setFiles((prev) => prev.filter((f) => f.path !== selectedItem.path));
+      setSelectedItem(null);
+      if (selectedItem.isDirectory) {
+        await loadTree();
+      }
+    } else {
+      throw new Error(result.error || "Failed to delete");
+    }
+  }, [api, selectedItem, loadTree]);
+  const handleRename = useCallback7(async (newName) => {
+    if (!selectedItem) return;
+    let result;
+    if (selectedItem.isDirectory) {
+      result = await api.renameFolder(selectedItem.path, newName);
+    } else {
+      result = await api.renameFile(selectedItem.path, newName);
+    }
+    if (result.success && result.data) {
+      setFiles((prev) => sortItems(prev.filter((f) => f.path !== selectedItem.path).concat(result.data)));
+      setSelectedItem(result.data);
+      if (selectedItem.isDirectory) {
+        await loadTree();
+      }
+    } else {
+      throw new Error(result.error || "Failed to rename");
+    }
+  }, [api, selectedItem, loadTree]);
+  return /* @__PURE__ */ jsxs11("div", { className: `flex flex-col h-full bg-white border rounded-lg overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between p-3 border-b bg-gray-50", children: [
+      /* @__PURE__ */ jsx11(
+        PathBreadcrumb,
+        {
+          currentPath,
+          onNavigate: handleNavigate
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        FileActions,
+        {
+          selectedItem,
+          onCreateFolder: () => setCreateFolderOpen(true),
+          onUpload: (files2) => handleUpload(files2),
+          onDownload: handleDownload,
+          onDelete: () => setDeleteOpen(true),
+          onRename: () => setRenameOpen(true),
+          onRefresh: handleRefresh,
+          isLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 min-h-0", children: [
+      showTree && /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: "border-r overflow-auto",
+          style: { width: treeWidth, minWidth: treeWidth },
+          children: /* @__PURE__ */ jsx11(
+            FolderTree,
+            {
+              tree,
+              currentPath,
+              onSelect: handleNavigate,
+              onExpand: handleTreeExpand,
+              onToggle: handleTreeToggle,
+              className: "p-2"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "flex-1 min-w-0 overflow-auto", children: /* @__PURE__ */ jsx11(
+        FileList,
+        {
+          files,
+          selectedItem,
+          isLoading,
+          onSelect: handleSelect,
+          onOpen: handleOpen,
+          viewMode,
+          className: "h-full"
+        }
+      ) })
+    ] }),
+    showPreview && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "border-t",
+        style: { height: previewHeight, minHeight: previewHeight },
+        children: /* @__PURE__ */ jsx11(
+          FilePreview,
+          {
+            item: selectedItem,
+            getPreviewUrl: api.getPreviewUrl,
+            getFileContent: api.getFileContent,
+            className: "h-full"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      CreateFolderDialog,
+      {
+        isOpen: createFolderOpen,
+        currentPath,
+        onClose: () => setCreateFolderOpen(false),
+        onSubmit: handleCreateFolder
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      RenameDialog,
+      {
+        isOpen: renameOpen,
+        item: selectedItem,
+        onClose: () => setRenameOpen(false),
+        onSubmit: handleRename
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      DeleteConfirmDialog,
+      {
+        isOpen: deleteOpen,
+        item: selectedItem,
+        onClose: () => setDeleteOpen(false),
+        onConfirm: handleDelete
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      UploadDialog,
+      {
+        isOpen: uploadOpen,
+        currentPath,
+        onClose: () => setUploadOpen(false),
+        onUpload: handleUpload
+      }
+    )
+  ] });
+}
+function toggleTreeNode(nodes, path) {
+  return nodes.map((node) => {
+    if (node.path === path) {
+      return { ...node, isExpanded: !node.isExpanded };
+    }
+    if (node.children.length > 0) {
+      return { ...node, children: toggleTreeNode(node.children, path) };
+    }
+    return node;
+  });
+}
+function updateTreeNode(nodes, path, children, isExpanded) {
+  return nodes.map((node) => {
+    if (node.path === path) {
+      return { ...node, children, isExpanded };
+    }
+    if (node.children.length > 0) {
+      return { ...node, children: updateTreeNode(node.children, path, children, isExpanded) };
+    }
+    return node;
+  });
+}
+function sortItems(items) {
+  return [...items].sort((a, b) => {
+    if (a.isDirectory && !b.isDirectory) return -1;
+    if (!a.isDirectory && b.isDirectory) return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+// src/ui/hooks/useFileBrowser.ts
+import { useCallback as useCallback8, useEffect as useEffect5, useState as useState7 } from "react";
+function useFileBrowser(options) {
+  const { api, initialPath = "/", autoLoad = true } = options;
+  const [state, setState] = useState7({
+    currentPath: initialPath,
+    files: [],
+    tree: [],
+    selectedItem: null,
+    isLoading: false,
+    error: null
+  });
+  const loadDirectory = useCallback8(async (path) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    const result = await api.listDirectory(path);
+    if (result.success && result.data) {
+      setState((prev) => ({
+        ...prev,
+        files: result.data,
+        currentPath: path,
+        isLoading: false
+      }));
+    } else {
+      setState((prev) => ({
+        ...prev,
+        error: result.error || "Failed to load directory",
+        isLoading: false
+      }));
+    }
+  }, [api]);
+  const loadTree = useCallback8(async (depth = 2) => {
+    const result = await api.getFolderTree("/", depth);
+    if (result.success && result.data) {
+      setState((prev) => ({ ...prev, tree: result.data }));
+    }
+  }, [api]);
+  const navigateTo = useCallback8(async (path) => {
+    setState((prev) => ({ ...prev, selectedItem: null }));
+    await loadDirectory(path);
+  }, [loadDirectory]);
+  const navigateUp = useCallback8(async () => {
+    if (state.currentPath === "/") return;
+    const parentPath = state.currentPath.split("/").slice(0, -1).join("/") || "/";
+    await navigateTo(parentPath);
+  }, [state.currentPath, navigateTo]);
+  const refresh = useCallback8(async () => {
+    await loadDirectory(state.currentPath);
+    await loadTree();
+  }, [loadDirectory, loadTree, state.currentPath]);
+  const selectItem = useCallback8((item) => {
+    setState((prev) => ({ ...prev, selectedItem: item }));
+  }, []);
+  const toggleTreeNode2 = useCallback8((path) => {
+    setState((prev) => ({
+      ...prev,
+      tree: toggleNode(prev.tree, path)
+    }));
+  }, []);
+  const expandTreeNode = useCallback8(async (path) => {
+    const result = await api.listDirectory(path);
+    if (result.success && result.data) {
+      const folders = result.data.filter((item) => item.isDirectory);
+      const children = folders.map((folder) => ({
+        id: folder.id,
+        name: folder.name,
+        path: folder.path,
+        children: []
+      }));
+      setState((prev) => ({
+        ...prev,
+        tree: updateTreeNode2(prev.tree, path, children, true)
+      }));
+    }
+  }, [api]);
+  const createFolder = useCallback8(async (name) => {
+    const newPath = state.currentPath === "/" ? `/${name}` : `${state.currentPath}/${name}`;
+    const result = await api.createDirectory(newPath);
+    if (result.success && result.data) {
+      setState((prev) => ({
+        ...prev,
+        files: sortItems2([...prev.files, result.data])
+      }));
+    }
+    return result;
+  }, [api, state.currentPath]);
+  const deleteItem = useCallback8(async (path) => {
+    const item = state.files.find((f) => f.path === path);
+    if (!item) {
+      return { success: false, error: "Item not found" };
+    }
+    let result;
+    if (item.isDirectory) {
+      result = await api.removeDirectory(path, true);
+    } else {
+      result = await api.deleteFile(path);
+    }
+    if (result.success) {
+      setState((prev) => ({
+        ...prev,
+        files: prev.files.filter((f) => f.path !== path),
+        selectedItem: prev.selectedItem?.path === path ? null : prev.selectedItem
+      }));
+    }
+    return result;
+  }, [api, state.files]);
+  const deleteSelected = useCallback8(async () => {
+    if (!state.selectedItem) {
+      return { success: false, error: "No item selected" };
+    }
+    return deleteItem(state.selectedItem.path);
+  }, [deleteItem, state.selectedItem]);
+  const renameItem = useCallback8(async (path, newName, isDirectory) => {
+    let result;
+    if (isDirectory) {
+      result = await api.renameFolder(path, newName);
+    } else {
+      result = await api.renameFile(path, newName);
+    }
+    if (result.success && result.data) {
+      setState((prev) => ({
+        ...prev,
+        files: sortItems2(prev.files.filter((f) => f.path !== path).concat(result.data)),
+        selectedItem: prev.selectedItem?.path === path ? result.data : prev.selectedItem
+      }));
+    }
+    return result;
+  }, [api]);
+  const renameSelected = useCallback8(async (newName) => {
+    if (!state.selectedItem) {
+      return { success: false, error: "No item selected" };
+    }
+    return renameItem(state.selectedItem.path, newName, state.selectedItem.isDirectory);
+  }, [renameItem, state.selectedItem]);
+  const uploadFiles = useCallback8(async (files) => {
+    const results = [];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const remotePath = state.currentPath === "/" ? `/${file.name}` : `${state.currentPath}/${file.name}`;
+      const result = await api.uploadFile(file, remotePath);
+      results.push(result);
+      if (result.success && result.data) {
+        setState((prev) => ({
+          ...prev,
+          files: sortItems2([...prev.files, result.data])
+        }));
+      }
+    }
+    return results;
+  }, [api, state.currentPath]);
+  const downloadFile = useCallback8(async (path) => {
+    const item = state.files.find((f) => f.path === path);
+    if (!item || item.isDirectory) return;
+    const result = await api.downloadFile(path);
+    if (result.success && result.data) {
+      const blob = result.data;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = item.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  }, [api, state.files]);
+  const downloadSelected = useCallback8(async () => {
+    if (!state.selectedItem || state.selectedItem.isDirectory) return;
+    await downloadFile(state.selectedItem.path);
+  }, [downloadFile, state.selectedItem]);
+  const moveItem = useCallback8(async (sourcePath, destinationPath) => {
+    const result = await api.moveItem(sourcePath, destinationPath);
+    if (result.success) {
+      setState((prev) => ({
+        ...prev,
+        files: prev.files.filter((f) => f.path !== sourcePath),
+        selectedItem: prev.selectedItem?.path === sourcePath ? null : prev.selectedItem
+      }));
+    }
+    return result;
+  }, [api]);
+  useEffect5(() => {
+    if (autoLoad) {
+      loadDirectory(initialPath);
+      loadTree();
+    }
+  }, [autoLoad, initialPath, loadDirectory, loadTree]);
+  return {
+    // State
+    currentPath: state.currentPath,
+    files: state.files,
+    tree: state.tree,
+    selectedItem: state.selectedItem,
+    isLoading: state.isLoading,
+    error: state.error,
+    // Navigation
+    navigateTo,
+    navigateUp,
+    refresh,
+    // Selection
+    selectItem,
+    // Tree
+    toggleTreeNode: toggleTreeNode2,
+    expandTreeNode,
+    loadTree,
+    // Operations
+    createFolder,
+    deleteItem,
+    deleteSelected,
+    renameItem,
+    renameSelected,
+    uploadFiles,
+    downloadFile,
+    downloadSelected,
+    moveItem
+  };
+}
+function toggleNode(nodes, path) {
+  return nodes.map((node) => {
+    if (node.path === path) {
+      return { ...node, isExpanded: !node.isExpanded };
+    }
+    if (node.children.length > 0) {
+      return { ...node, children: toggleNode(node.children, path) };
+    }
+    return node;
+  });
+}
+function updateTreeNode2(nodes, path, children, isExpanded) {
+  return nodes.map((node) => {
+    if (node.path === path) {
+      return { ...node, children, isExpanded };
+    }
+    if (node.children.length > 0) {
+      return { ...node, children: updateTreeNode2(node.children, path, children, isExpanded) };
+    }
+    return node;
+  });
+}
+function sortItems2(items) {
+  return [...items].sort((a, b) => {
+    if (a.isDirectory && !b.isDirectory) return -1;
+    if (!a.isDirectory && b.isDirectory) return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+// src/ui/hooks/useFileOperations.ts
+import { useState as useState8, useCallback as useCallback9 } from "react";
+function useFileOperations() {
+  const [state, setState] = useState8({
+    isLoading: false,
+    error: null,
+    lastResult: null
+  });
+  const execute = useCallback9(async (operation) => {
+    setState({ isLoading: true, error: null, lastResult: null });
+    try {
+      const result = await operation();
+      setState({
+        isLoading: false,
+        error: result.success ? null : result.error || "Operation failed",
+        lastResult: result
+      });
+      return result;
+    } catch (error) {
+      const errorMessage = error.message || "Unknown error";
+      const result = { success: false, error: errorMessage };
+      setState({
+        isLoading: false,
+        error: errorMessage,
+        lastResult: result
+      });
+      return result;
+    }
+  }, []);
+  const reset = useCallback9(() => {
+    setState({ isLoading: false, error: null, lastResult: null });
+  }, []);
+  return { state, execute, reset };
+}
+function useMultiFileOperations() {
+  const [state, setState] = useState8({
+    activeOperations: /* @__PURE__ */ new Set(),
+    errors: /* @__PURE__ */ new Map()
+  });
+  const isOperating = useCallback9((id) => {
+    return state.activeOperations.has(id);
+  }, [state.activeOperations]);
+  const getError = useCallback9((id) => {
+    return state.errors.get(id);
+  }, [state.errors]);
+  const execute = useCallback9(async (id, operation) => {
+    setState((prev) => {
+      const newActive = new Set(prev.activeOperations);
+      newActive.add(id);
+      const newErrors = new Map(prev.errors);
+      newErrors.delete(id);
+      return { activeOperations: newActive, errors: newErrors };
+    });
+    try {
+      const result = await operation();
+      setState((prev) => {
+        const newActive = new Set(prev.activeOperations);
+        newActive.delete(id);
+        const newErrors = new Map(prev.errors);
+        if (!result.success && result.error) {
+          newErrors.set(id, result.error);
+        }
+        return { activeOperations: newActive, errors: newErrors };
+      });
+      return result;
+    } catch (error) {
+      const errorMessage = error.message || "Unknown error";
+      setState((prev) => {
+        const newActive = new Set(prev.activeOperations);
+        newActive.delete(id);
+        const newErrors = new Map(prev.errors);
+        newErrors.set(id, errorMessage);
+        return { activeOperations: newActive, errors: newErrors };
+      });
+      return { success: false, error: errorMessage };
+    }
+  }, []);
+  const clear = useCallback9((id) => {
+    setState((prev) => {
+      const newErrors = new Map(prev.errors);
+      newErrors.delete(id);
+      return { ...prev, errors: newErrors };
+    });
+  }, []);
+  const clearAll = useCallback9(() => {
+    setState({ activeOperations: /* @__PURE__ */ new Set(), errors: /* @__PURE__ */ new Map() });
+  }, []);
+  return { state, isOperating, getError, execute, clear, clearAll };
+}
+
+// src/ui/context/FileBrowserContext.tsx
+import { createContext, useContext, useReducer, useCallback as useCallback10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var initialState = {
+  currentPath: "/",
+  selectedItem: null,
+  tree: [],
+  files: [],
+  isLoading: false,
+  error: null
+};
+function fileBrowserReducer(state, action) {
+  switch (action.type) {
+    case "SET_LOADING":
+      return { ...state, isLoading: action.payload };
+    case "SET_ERROR":
+      return { ...state, error: action.payload, isLoading: false };
+    case "SET_CURRENT_PATH":
+      return { ...state, currentPath: action.payload };
+    case "SET_FILES":
+      return { ...state, files: action.payload, isLoading: false };
+    case "SET_TREE":
+      return { ...state, tree: action.payload };
+    case "SET_SELECTED_ITEM":
+      return { ...state, selectedItem: action.payload };
+    case "UPDATE_TREE_NODE": {
+      const updateNode = (nodes, path, children, isExpanded) => {
+        return nodes.map((node) => {
+          if (node.path === path) {
+            return { ...node, children, isExpanded };
+          }
+          if (node.children.length > 0) {
+            return { ...node, children: updateNode(node.children, path, children, isExpanded) };
+          }
+          return node;
+        });
+      };
+      return {
+        ...state,
+        tree: updateNode(state.tree, action.payload.path, action.payload.children, action.payload.isExpanded)
+      };
+    }
+    case "TOGGLE_TREE_NODE": {
+      const toggleNode2 = (nodes, path) => {
+        return nodes.map((node) => {
+          if (node.path === path) {
+            return { ...node, isExpanded: !node.isExpanded };
+          }
+          if (node.children.length > 0) {
+            return { ...node, children: toggleNode2(node.children, path) };
+          }
+          return node;
+        });
+      };
+      return { ...state, tree: toggleNode2(state.tree, action.payload) };
+    }
+    case "ADD_ITEM":
+      return {
+        ...state,
+        files: [...state.files, action.payload].sort((a, b) => {
+          if (a.isDirectory && !b.isDirectory) return -1;
+          if (!a.isDirectory && b.isDirectory) return 1;
+          return a.name.localeCompare(b.name);
+        })
+      };
+    case "REMOVE_ITEM":
+      return {
+        ...state,
+        files: state.files.filter((f) => f.path !== action.payload),
+        selectedItem: state.selectedItem?.path === action.payload ? null : state.selectedItem
+      };
+    case "UPDATE_ITEM":
+      return {
+        ...state,
+        files: state.files.map((f) => f.path === action.payload.path ? action.payload : f),
+        selectedItem: state.selectedItem?.path === action.payload.path ? action.payload : state.selectedItem
+      };
+    case "REFRESH":
+      return { ...state, isLoading: true };
+    default:
+      return state;
+  }
+}
+var FileBrowserContext = createContext(null);
+function FileBrowserProvider({ children, api, initialPath = "/" }) {
+  const [state, dispatch] = useReducer(fileBrowserReducer, {
+    ...initialState,
+    currentPath: initialPath
+  });
+  const navigateTo = useCallback10(async (path) => {
+    dispatch({ type: "SET_LOADING", payload: true });
+    dispatch({ type: "SET_CURRENT_PATH", payload: path });
+    dispatch({ type: "SET_SELECTED_ITEM", payload: null });
+    const result = await api.listDirectory(path);
+    if (result.success && result.data) {
+      dispatch({ type: "SET_FILES", payload: result.data });
+    } else {
+      dispatch({ type: "SET_ERROR", payload: result.error || "Failed to load directory" });
+    }
+  }, [api]);
+  const refresh = useCallback10(async () => {
+    await navigateTo(state.currentPath);
+    const treeResult = await api.getFolderTree("/", 2);
+    if (treeResult.success && treeResult.data) {
+      dispatch({ type: "SET_TREE", payload: treeResult.data });
+    }
+  }, [api, navigateTo, state.currentPath]);
+  const selectItem = useCallback10((item) => {
+    dispatch({ type: "SET_SELECTED_ITEM", payload: item });
+  }, []);
+  const toggleTreeNode2 = useCallback10((path) => {
+    dispatch({ type: "TOGGLE_TREE_NODE", payload: path });
+  }, []);
+  const expandTreeNode = useCallback10(async (path) => {
+    const result = await api.listDirectory(path);
+    if (result.success && result.data) {
+      const folders = result.data.filter((item) => item.isDirectory);
+      const children2 = folders.map((folder) => ({
+        id: folder.id,
+        name: folder.name,
+        path: folder.path,
+        children: []
+      }));
+      dispatch({ type: "UPDATE_TREE_NODE", payload: { path, children: children2, isExpanded: true } });
+    }
+  }, [api]);
+  const createFolder = useCallback10(async (name) => {
+    const newPath = state.currentPath === "/" ? `/${name}` : `${state.currentPath}/${name}`;
+    const result = await api.createDirectory(newPath);
+    if (result.success && result.data) {
+      dispatch({ type: "ADD_ITEM", payload: result.data });
+    }
+    return result;
+  }, [api, state.currentPath]);
+  const deleteSelected = useCallback10(async () => {
+    if (!state.selectedItem) {
+      return { success: false, error: "No item selected" };
+    }
+    let result;
+    if (state.selectedItem.isDirectory) {
+      result = await api.removeDirectory(state.selectedItem.path, true);
+    } else {
+      result = await api.deleteFile(state.selectedItem.path);
+    }
+    if (result.success) {
+      dispatch({ type: "REMOVE_ITEM", payload: state.selectedItem.path });
+    }
+    return result;
+  }, [api, state.selectedItem]);
+  const renameSelected = useCallback10(async (newName) => {
+    if (!state.selectedItem) {
+      return { success: false, error: "No item selected" };
+    }
+    let result;
+    if (state.selectedItem.isDirectory) {
+      result = await api.renameFolder(state.selectedItem.path, newName);
+    } else {
+      result = await api.renameFile(state.selectedItem.path, newName);
+    }
+    if (result.success && result.data) {
+      dispatch({ type: "REMOVE_ITEM", payload: state.selectedItem.path });
+      dispatch({ type: "ADD_ITEM", payload: result.data });
+      dispatch({ type: "SET_SELECTED_ITEM", payload: result.data });
+    }
+    return result;
+  }, [api, state.selectedItem]);
+  const uploadFiles = useCallback10(async (files) => {
+    const results = [];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const remotePath = state.currentPath === "/" ? `/${file.name}` : `${state.currentPath}/${file.name}`;
+      const result = await api.uploadFile(file, remotePath);
+      results.push(result);
+      if (result.success && result.data) {
+        dispatch({ type: "ADD_ITEM", payload: result.data });
+      }
+    }
+    return results;
+  }, [api, state.currentPath]);
+  const downloadSelected = useCallback10(async () => {
+    if (!state.selectedItem || state.selectedItem.isDirectory) {
+      return;
+    }
+    const result = await api.downloadFile(state.selectedItem.path);
+    if (result.success && result.data) {
+      const blob = result.data;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = state.selectedItem.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  }, [api, state.selectedItem]);
+  const moveSelected = useCallback10(async (destinationPath) => {
+    if (!state.selectedItem) {
+      return { success: false, error: "No item selected" };
+    }
+    const result = await api.moveItem(state.selectedItem.path, destinationPath);
+    if (result.success) {
+      dispatch({ type: "REMOVE_ITEM", payload: state.selectedItem.path });
+    }
+    return result;
+  }, [api, state.selectedItem]);
+  const value = {
+    state,
+    dispatch,
+    api,
+    navigateTo,
+    refresh,
+    selectItem,
+    toggleTreeNode: toggleTreeNode2,
+    expandTreeNode,
+    createFolder,
+    deleteSelected,
+    renameSelected,
+    uploadFiles,
+    downloadSelected,
+    moveSelected
+  };
+  return /* @__PURE__ */ jsx12(FileBrowserContext.Provider, { value, children });
+}
+function useFileBrowserContext() {
+  const context = useContext(FileBrowserContext);
+  if (!context) {
+    throw new Error("useFileBrowserContext must be used within a FileBrowserProvider");
+  }
+  return context;
+}
+
+// src/ui/components/naming/NamingRuleConfigurator.tsx
+import { useCallback as useCallback13, useRef as useRef5, useState as useState12 } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter
+} from "@dnd-kit/core";
+
+// src/ui/hooks/useNamingRule.ts
+import { useState as useState9, useCallback as useCallback11, useEffect as useEffect6, useRef as useRef3 } from "react";
+
+// src/common/naming-utils.ts
+var DEFAULT_DATE_FORMATS = [
+  "YYYY",
+  "YY",
+  "MM",
+  "M",
+  "DD",
+  "D",
+  "MMM",
+  "MMMM",
+  "YYYY-MM-DD",
+  "YYYY-MMM-DD",
+  "DD-MM-YYYY",
+  "MM-DD-YYYY"
+];
+var MONTH_NAMES_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var MONTH_NAMES_FULL = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var SYSTEM_DATE_VARIABLES = [
+  { variable_name: "YYYY", description: "Full year (4 digits)", example_value: "2024", category: "date" },
+  { variable_name: "YY", description: "Year (2 digits)", example_value: "24", category: "date" },
+  { variable_name: "MM", description: "Month (2 digits, 01-12)", example_value: "01", category: "date" },
+  { variable_name: "M", description: "Month (1-12)", example_value: "1", category: "date" },
+  { variable_name: "DD", description: "Day (2 digits, 01-31)", example_value: "15", category: "date" },
+  { variable_name: "D", description: "Day (1-31)", example_value: "15", category: "date" },
+  { variable_name: "MMM", description: "Short month name", example_value: "Jan", category: "date" },
+  { variable_name: "MMMM", description: "Full month name", example_value: "January", category: "date" },
+  { variable_name: "YYYY-MM-DD", description: "ISO date format", example_value: "2024-01-15", category: "date" },
+  { variable_name: "YYYY-MMM-DD", description: "Date with month name", example_value: "2024-Jan-15", category: "date" },
+  { variable_name: "DD-MM-YYYY", description: "Day-Month-Year", example_value: "15-01-2024", category: "date" },
+  { variable_name: "MM-DD-YYYY", description: "Month-Day-Year", example_value: "01-15-2024", category: "date" }
+];
+var SYSTEM_FILE_VARIABLES = [
+  { variable_name: "original_name", description: "Original filename without extension", example_value: "document", category: "file" },
+  { variable_name: "extension", description: "Original file extension with dot", example_value: ".pdf", category: "file" },
+  { variable_name: "ext", description: "Extension without dot", example_value: "pdf", category: "file" }
+];
+var SYSTEM_COUNTER_VARIABLES = [
+  { variable_name: "counter", description: "Auto-incrementing number (3 digits)", example_value: "001", category: "counter" }
+];
+var ALL_SYSTEM_VARIABLES = [
+  ...SYSTEM_DATE_VARIABLES,
+  ...SYSTEM_FILE_VARIABLES,
+  ...SYSTEM_COUNTER_VARIABLES
+];
+function formatDateToken(date, format) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  switch (format) {
+    case "YYYY":
+      return String(year);
+    case "YY":
+      return String(year).slice(-2);
+    case "MM":
+      return String(month + 1).padStart(2, "0");
+    case "M":
+      return String(month + 1);
+    case "DD":
+      return String(day).padStart(2, "0");
+    case "D":
+      return String(day);
+    case "MMM":
+      return MONTH_NAMES_SHORT[month];
+    case "MMMM":
+      return MONTH_NAMES_FULL[month];
+    case "YYYY-MM-DD":
+      return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    case "YYYY-MMM-DD":
+      return `${year}-${MONTH_NAMES_SHORT[month]}-${String(day).padStart(2, "0")}`;
+    case "DD-MM-YYYY":
+      return `${String(day).padStart(2, "0")}-${String(month + 1).padStart(2, "0")}-${year}`;
+    case "MM-DD-YYYY":
+      return `${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}-${year}`;
+    default:
+      return format;
+  }
+}
+function formatCounter(value, digits = 3) {
+  return String(value).padStart(digits, "0");
+}
+function getFileMetadataValues(filename) {
+  if (!filename) {
+    return {
+      original_name: "",
+      extension: "",
+      ext: ""
+    };
+  }
+  const extension = getExtension(filename);
+  const originalName = getNameWithoutExtension(filename);
+  return {
+    original_name: originalName,
+    extension,
+    ext: extension.startsWith(".") ? extension.slice(1) : extension
+  };
+}
+function validateNamingRuleSchema(schema) {
+  if (!schema || typeof schema !== "object") return false;
+  const s = schema;
+  if (typeof s.version !== "number") return false;
+  if (!Array.isArray(s.filePattern) || !Array.isArray(s.folderPattern)) return false;
+  const isValidSegment = (seg) => {
+    if (!seg || typeof seg !== "object") return false;
+    const segment = seg;
+    return typeof segment.id === "string" && (segment.type === "variable" || segment.type === "literal") && typeof segment.value === "string";
+  };
+  return s.filePattern.every(isValidSegment) && s.folderPattern.every(isValidSegment);
+}
+function generateSegmentId() {
+  return `seg_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+}
+function createVariableSegment(variableName) {
+  return {
+    id: generateSegmentId(),
+    type: "variable",
+    value: variableName
+  };
+}
+function createLiteralSegment(text) {
+  return {
+    id: generateSegmentId(),
+    type: "literal",
+    value: text
+  };
+}
+function clonePattern(pattern) {
+  return pattern.map((seg) => ({
+    ...seg,
+    id: generateSegmentId()
+  }));
+}
+function getSystemVariablePreviewValues(date = /* @__PURE__ */ new Date(), options = {}) {
+  const { counterValue = 1, counterDigits = 3, originalFileName } = options;
+  const fileMetadata = getFileMetadataValues(originalFileName);
+  const values = {};
+  for (const format of DEFAULT_DATE_FORMATS) {
+    values[format] = formatDateToken(date, format);
+  }
+  values.original_name = fileMetadata.original_name || "document";
+  values.extension = fileMetadata.extension || ".pdf";
+  values.ext = fileMetadata.ext || "pdf";
+  values.counter = formatCounter(counterValue, counterDigits);
+  return values;
+}
+function generatePreviewName(pattern, userVariables, options = {}) {
+  if (pattern.length === 0) {
+    return "(empty pattern)";
+  }
+  const systemValues = getSystemVariablePreviewValues(
+    options.date,
+    options
+  );
+  const userValues = {};
+  for (const variable of userVariables) {
+    userValues[variable.variable_name] = variable.example_value;
+  }
+  const allValues = { ...userValues, ...systemValues };
+  const parts = [];
+  for (const segment of pattern) {
+    if (segment.type === "literal") {
+      parts.push(segment.value);
+    } else if (segment.type === "variable") {
+      const value = allValues[segment.value];
+      if (value !== void 0) {
+        parts.push(value);
+      } else {
+        parts.push(`{${segment.value}}`);
+      }
+    }
+  }
+  return parts.join("") || "(empty)";
+}
+
+// src/ui/hooks/useNamingRule.ts
+var MAX_HISTORY_SIZE = 50;
+function useNamingRule(options = {}) {
+  const { initialSchema, onChange } = options;
+  const [filePattern, setFilePattern] = useState9(
+    initialSchema?.filePattern ? clonePattern(initialSchema.filePattern) : []
+  );
+  const [folderPattern, setFolderPattern] = useState9(
+    initialSchema?.folderPattern ? clonePattern(initialSchema.folderPattern) : []
+  );
+  const [history, setHistory] = useState9([]);
+  const [historyIndex, setHistoryIndex] = useState9(-1);
+  const initialStateRef = useRef3({
+    filePattern: initialSchema?.filePattern ? clonePattern(initialSchema.filePattern) : [],
+    folderPattern: initialSchema?.folderPattern ? clonePattern(initialSchema.folderPattern) : []
+  });
+  const isUndoRedoRef = useRef3(false);
+  const recordHistory = useCallback11(() => {
+    if (isUndoRedoRef.current) return;
+    const entry = {
+      filePattern: clonePattern(filePattern),
+      folderPattern: clonePattern(folderPattern),
+      timestamp: Date.now()
+    };
+    setHistory((prev) => {
+      const newHistory = prev.slice(0, historyIndex + 1);
+      newHistory.push(entry);
+      if (newHistory.length > MAX_HISTORY_SIZE) {
+        return newHistory.slice(-MAX_HISTORY_SIZE);
+      }
+      return newHistory;
+    });
+    setHistoryIndex((prev) => Math.min(prev + 1, MAX_HISTORY_SIZE - 1));
+  }, [filePattern, folderPattern, historyIndex]);
+  useEffect6(() => {
+    if (onChange) {
+      onChange(getSchema());
+    }
+  }, [filePattern, folderPattern]);
+  const getSchema = useCallback11(() => {
+    return {
+      version: 1,
+      filePattern: clonePattern(filePattern),
+      folderPattern: clonePattern(folderPattern),
+      metadata: {
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+  }, [filePattern, folderPattern]);
+  const loadSchema = useCallback11((schema) => {
+    const newFilePattern = schema.filePattern ? clonePattern(schema.filePattern) : [];
+    const newFolderPattern = schema.folderPattern ? clonePattern(schema.folderPattern) : [];
+    setFilePattern(newFilePattern);
+    setFolderPattern(newFolderPattern);
+    setHistory([]);
+    setHistoryIndex(-1);
+    initialStateRef.current = {
+      filePattern: clonePattern(newFilePattern),
+      folderPattern: clonePattern(newFolderPattern)
+    };
+  }, []);
+  const reset = useCallback11(() => {
+    setFilePattern(clonePattern(initialStateRef.current.filePattern));
+    setFolderPattern(clonePattern(initialStateRef.current.folderPattern));
+    setHistory([]);
+    setHistoryIndex(-1);
+  }, []);
+  const undo = useCallback11(() => {
+    if (historyIndex < 0) return;
+    isUndoRedoRef.current = true;
+    const entry = history[historyIndex];
+    if (entry) {
+      setFilePattern(clonePattern(entry.filePattern));
+      setFolderPattern(clonePattern(entry.folderPattern));
+    }
+    setHistoryIndex((prev) => prev - 1);
+    setTimeout(() => {
+      isUndoRedoRef.current = false;
+    }, 0);
+  }, [history, historyIndex]);
+  const redo = useCallback11(() => {
+    if (historyIndex >= history.length - 1) return;
+    isUndoRedoRef.current = true;
+    const entry = history[historyIndex + 1];
+    if (entry) {
+      setFilePattern(clonePattern(entry.filePattern));
+      setFolderPattern(clonePattern(entry.folderPattern));
+    }
+    setHistoryIndex((prev) => prev + 1);
+    setTimeout(() => {
+      isUndoRedoRef.current = false;
+    }, 0);
+  }, [history, historyIndex]);
+  const addToFilePattern = useCallback11(
+    (segment, index) => {
+      recordHistory();
+      setFilePattern((prev) => {
+        const newSegment = { ...segment, id: generateSegmentId() };
+        if (index !== void 0 && index >= 0 && index <= prev.length) {
+          const newPattern = [...prev];
+          newPattern.splice(index, 0, newSegment);
+          return newPattern;
+        }
+        return [...prev, newSegment];
+      });
+    },
+    [recordHistory]
+  );
+  const removeFromFilePattern = useCallback11(
+    (id) => {
+      recordHistory();
+      setFilePattern((prev) => prev.filter((seg) => seg.id !== id));
+    },
+    [recordHistory]
+  );
+  const updateFilePatternSegment = useCallback11(
+    (id, value) => {
+      recordHistory();
+      setFilePattern(
+        (prev) => prev.map((seg) => seg.id === id ? { ...seg, value } : seg)
+      );
+    },
+    [recordHistory]
+  );
+  const reorderFilePattern = useCallback11(
+    (fromIndex, toIndex) => {
+      if (fromIndex === toIndex) return;
+      recordHistory();
+      setFilePattern((prev) => {
+        const newPattern = [...prev];
+        const [removed] = newPattern.splice(fromIndex, 1);
+        newPattern.splice(toIndex, 0, removed);
+        return newPattern;
+      });
+    },
+    [recordHistory]
+  );
+  const clearFilePattern = useCallback11(() => {
+    recordHistory();
+    setFilePattern([]);
+  }, [recordHistory]);
+  const addToFolderPattern = useCallback11(
+    (segment, index) => {
+      recordHistory();
+      setFolderPattern((prev) => {
+        const newSegment = { ...segment, id: generateSegmentId() };
+        if (index !== void 0 && index >= 0 && index <= prev.length) {
+          const newPattern = [...prev];
+          newPattern.splice(index, 0, newSegment);
+          return newPattern;
+        }
+        return [...prev, newSegment];
+      });
+    },
+    [recordHistory]
+  );
+  const removeFromFolderPattern = useCallback11(
+    (id) => {
+      recordHistory();
+      setFolderPattern((prev) => prev.filter((seg) => seg.id !== id));
+    },
+    [recordHistory]
+  );
+  const updateFolderPatternSegment = useCallback11(
+    (id, value) => {
+      recordHistory();
+      setFolderPattern(
+        (prev) => prev.map((seg) => seg.id === id ? { ...seg, value } : seg)
+      );
+    },
+    [recordHistory]
+  );
+  const reorderFolderPattern = useCallback11(
+    (fromIndex, toIndex) => {
+      if (fromIndex === toIndex) return;
+      recordHistory();
+      setFolderPattern((prev) => {
+        const newPattern = [...prev];
+        const [removed] = newPattern.splice(fromIndex, 1);
+        newPattern.splice(toIndex, 0, removed);
+        return newPattern;
+      });
+    },
+    [recordHistory]
+  );
+  const clearFolderPattern = useCallback11(() => {
+    recordHistory();
+    setFolderPattern([]);
+  }, [recordHistory]);
+  useEffect6(() => {
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+        if (e.shiftKey) {
+          e.preventDefault();
+          redo();
+        } else {
+          e.preventDefault();
+          undo();
+        }
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "y") {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [undo, redo]);
+  const isDirty = JSON.stringify(filePattern) !== JSON.stringify(initialStateRef.current.filePattern) || JSON.stringify(folderPattern) !== JSON.stringify(initialStateRef.current.folderPattern);
+  return {
+    // State
+    filePattern,
+    folderPattern,
+    canUndo: historyIndex >= 0,
+    canRedo: historyIndex < history.length - 1,
+    isDirty,
+    // File pattern operations
+    addToFilePattern,
+    removeFromFilePattern,
+    updateFilePatternSegment,
+    reorderFilePattern,
+    clearFilePattern,
+    // Folder pattern operations
+    addToFolderPattern,
+    removeFromFolderPattern,
+    updateFolderPatternSegment,
+    reorderFolderPattern,
+    clearFolderPattern,
+    // History
+    undo,
+    redo,
+    // Schema
+    getSchema,
+    loadSchema,
+    reset
+  };
+}
+
+// src/ui/components/naming/VariableList.tsx
+import { useState as useState10 } from "react";
+
+// src/ui/components/naming/DraggableVariable.tsx
+import { useDraggable } from "@dnd-kit/core";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function getCategoryColor(category) {
+  switch (category) {
+    case "date":
+      return "bg-emerald-100 hover:bg-emerald-200 border-emerald-300 text-emerald-800";
+    case "file":
+      return "bg-purple-100 hover:bg-purple-200 border-purple-300 text-purple-800";
+    case "counter":
+      return "bg-amber-100 hover:bg-amber-200 border-amber-300 text-amber-800";
+    case "user":
+    default:
+      return "bg-blue-100 hover:bg-blue-200 border-blue-300 text-blue-800";
+  }
+}
+function DraggableVariable({
+  variable,
+  onClick,
+  className = "",
+  disabled = false
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `draggable-${variable.variable_name}`,
+    data: {
+      type: "variable",
+      variable
+    },
+    disabled
+  });
+  const colorClass = getCategoryColor(variable.category);
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      onClick: () => !disabled && onClick?.(variable),
+      className: `
+        inline-flex items-center gap-1 px-2.5 py-1 rounded-full border text-sm font-medium
+        cursor-grab active:cursor-grabbing select-none transition-all
+        ${colorClass}
+        ${isDragging ? "opacity-50 scale-95 shadow-lg" : "shadow-sm"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+        ${className}
+      `,
+      title: `${variable.description}
+Example: ${variable.example_value}`,
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "text-xs opacity-60", children: "{" }),
+        /* @__PURE__ */ jsx13("span", { children: variable.variable_name }),
+        /* @__PURE__ */ jsx13("span", { className: "text-xs opacity-60", children: "}" })
+      ]
+    }
+  );
+}
+
+// src/ui/components/naming/VariableList.tsx
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function VariableList({
+  userVariables,
+  customDateFormats,
+  onVariableClick,
+  disabled = false,
+  className = ""
+}) {
+  const [activeCategory, setActiveCategory] = useState10("user");
+  const userVars = userVariables.map((v) => ({
+    ...v,
+    category: "user"
+  }));
+  const dateVars = customDateFormats ? SYSTEM_DATE_VARIABLES.filter(
+    (v) => customDateFormats.includes(v.variable_name)
+  ) : SYSTEM_DATE_VARIABLES;
+  const fileVars = SYSTEM_FILE_VARIABLES;
+  const counterVars = SYSTEM_COUNTER_VARIABLES;
+  const allTabs = [
+    { id: "user", label: "User", count: userVars.length },
+    { id: "date", label: "Dates", count: dateVars.length },
+    { id: "file", label: "File", count: fileVars.length },
+    { id: "counter", label: "Counter", count: counterVars.length }
+  ];
+  const tabs = allTabs.filter((tab) => tab.count > 0);
+  const getVariablesForCategory = (category) => {
+    switch (category) {
+      case "user":
+        return userVars;
+      case "date":
+        return dateVars;
+      case "file":
+        return fileVars;
+      case "counter":
+        return counterVars;
+      default:
+        return [];
+    }
+  };
+  const activeVariables = getVariablesForCategory(activeCategory);
+  if (activeVariables.length === 0 && tabs.length > 0) {
+    const firstTab = tabs[0];
+    if (firstTab.id !== activeCategory) {
+      setActiveCategory(firstTab.id);
+    }
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: `bg-gray-50 rounded-lg border border-gray-200 ${className}`, children: [
+    /* @__PURE__ */ jsx14("div", { className: "flex border-b border-gray-200", children: tabs.map((tab) => /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveCategory(tab.id),
+        className: `
+              flex-1 px-3 py-2 text-sm font-medium transition-colors
+              ${activeCategory === tab.id ? "bg-white border-b-2 border-blue-500 text-blue-600" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}
+            `,
+        children: [
+          tab.label,
+          /* @__PURE__ */ jsxs13("span", { className: "ml-1 text-xs text-gray-400", children: [
+            "(",
+            tab.count,
+            ")"
+          ] })
+        ]
+      },
+      tab.id
+    )) }),
+    /* @__PURE__ */ jsxs13("div", { className: "p-3", children: [
+      activeVariables.length > 0 ? /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-2", children: activeVariables.map((variable) => /* @__PURE__ */ jsx14(
+        DraggableVariable,
+        {
+          variable,
+          onClick: onVariableClick,
+          disabled
+        },
+        variable.variable_name
+      )) }) : /* @__PURE__ */ jsx14("p", { className: "text-sm text-gray-500 text-center py-4", children: "No variables available in this category" }),
+      /* @__PURE__ */ jsx14("p", { className: "text-xs text-gray-400 mt-3 text-center", children: "Drag variables to the pattern below, or click to add" })
+    ] })
+  ] });
+}
+
+// src/ui/components/naming/PatternBuilder.tsx
+import { useCallback as useCallback12 } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import {
+  SortableContext,
+  horizontalListSortingStrategy
+} from "@dnd-kit/sortable";
+
+// src/ui/components/naming/PatternSegmentItem.tsx
+import { useState as useState11, useRef as useRef4, useEffect as useEffect7 } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function getSegmentStyle(type) {
+  if (type === "variable") {
+    return "bg-blue-100 border-blue-300 text-blue-800";
+  }
+  return "bg-gray-100 border-gray-300 text-gray-700";
+}
+function PatternSegmentItem({
+  segment,
+  onUpdate,
+  onDelete,
+  readOnly = false,
+  className = ""
+}) {
+  const [isEditing, setIsEditing] = useState11(false);
+  const [editValue, setEditValue] = useState11(segment.value);
+  const inputRef = useRef4(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: segment.id,
+    disabled: readOnly
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  useEffect7(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const handleSubmit = () => {
+    if (segment.type === "literal" && editValue !== segment.value) {
+      onUpdate?.(segment.id, editValue);
+    }
+    setIsEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    } else if (e.key === "Escape") {
+      setEditValue(segment.value);
+      setIsEditing(false);
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      if (!isEditing) {
+        e.preventDefault();
+        onDelete?.(segment.id);
+      }
+    }
+  };
+  const segmentStyle = getSegmentStyle(segment.type);
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: `
+        inline-flex items-center gap-1 rounded border text-sm
+        ${segmentStyle}
+        ${isDragging ? "opacity-50 shadow-lg z-50" : "shadow-sm"}
+        ${readOnly ? "" : "cursor-grab active:cursor-grabbing"}
+        ${className}
+      `,
+      ...attributes,
+      ...listeners,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      children: [
+        segment.type === "variable" ? (
+          // Variable segment - not editable, just display
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center px-2 py-1", children: [
+            /* @__PURE__ */ jsx15("span", { className: "text-xs opacity-60", children: "{" }),
+            /* @__PURE__ */ jsx15("span", { className: "font-medium", children: segment.value }),
+            /* @__PURE__ */ jsx15("span", { className: "text-xs opacity-60", children: "}" })
+          ] })
+        ) : isEditing && !readOnly ? (
+          // Literal segment in edit mode
+          /* @__PURE__ */ jsx15(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: editValue,
+              onChange: (e) => setEditValue(e.target.value),
+              onBlur: handleSubmit,
+              onKeyDown: handleKeyDown,
+              className: "px-2 py-1 bg-transparent border-none outline-none min-w-[40px] text-sm",
+              style: { width: `${Math.max(40, editValue.length * 8)}px` }
+            }
+          )
+        ) : (
+          // Literal segment in display mode
+          /* @__PURE__ */ jsx15(
+            "div",
+            {
+              className: "px-2 py-1 cursor-text",
+              onDoubleClick: () => !readOnly && setIsEditing(true),
+              children: segment.value || /* @__PURE__ */ jsx15("span", { className: "opacity-50 italic", children: "empty" })
+            }
+          )
+        ),
+        !readOnly && /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete?.(segment.id);
+            },
+            className: "p-1 hover:bg-black/10 rounded transition-colors mr-1",
+            title: "Remove segment",
+            children: /* @__PURE__ */ jsxs14(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "12",
+                height: "12",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx15("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx15("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/components/naming/SeparatorPicker.tsx
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var COMMON_SEPARATORS = [
+  { value: "-", label: "-", title: "Hyphen" },
+  { value: "_", label: "_", title: "Underscore" },
+  { value: "/", label: "/", title: "Slash (for folder paths)" },
+  { value: " ", label: "\u2423", title: "Space" },
+  { value: ".", label: ".", title: "Period" }
+];
+function SeparatorPicker({
+  onSelect,
+  disabled = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs15("div", { className: `flex items-center gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsx16("span", { className: "text-xs text-gray-500 mr-1", children: "Add:" }),
+    COMMON_SEPARATORS.map(({ value, label, title }) => /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(value),
+        disabled,
+        title,
+        className: `
+            w-7 h-7 flex items-center justify-center rounded border text-sm font-mono
+            bg-gray-50 border-gray-200 text-gray-600
+            hover:bg-gray-100 hover:border-gray-300
+            disabled:opacity-50 disabled:cursor-not-allowed
+            transition-colors
+          `,
+        children: label
+      },
+      value
+    ))
+  ] });
+}
+
+// src/ui/components/naming/PatternBuilder.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function DroppableZone({
+  id,
+  children,
+  isEmpty,
+  placeholder
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ref: setNodeRef,
+      className: `
+        min-h-[48px] p-2 rounded-lg border-2 border-dashed transition-colors
+        ${isOver ? "border-blue-400 bg-blue-50" : isEmpty ? "border-gray-300 bg-gray-50" : "border-gray-200 bg-white"}
+      `,
+      children: isEmpty ? /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-8 text-gray-400 text-sm", children: placeholder }) : /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-1.5 items-center", children })
+    }
+  );
+}
+function PatternBuilder({
+  pattern,
+  label,
+  droppableId,
+  onAddSegment,
+  onRemoveSegment,
+  onUpdateSegment,
+  onClear,
+  readOnly = false,
+  placeholder = "Drop variables here or type text...",
+  className = ""
+}) {
+  const handleAddSeparator = useCallback12(
+    (separator) => {
+      onAddSegment(createLiteralSegment(separator));
+    },
+    [onAddSegment]
+  );
+  const handleAddText = useCallback12(() => {
+    onAddSegment(createLiteralSegment("text"));
+  }, [onAddSegment]);
+  return /* @__PURE__ */ jsxs16("div", { className: `space-y-2 ${className}`, children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx17("label", { className: "text-sm font-medium text-gray-700", children: label }),
+      !readOnly && pattern.length > 0 && /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          onClick: onClear,
+          className: "text-xs text-red-500 hover:text-red-700 transition-colors",
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx17(
+      SortableContext,
+      {
+        items: pattern.map((seg) => seg.id),
+        strategy: horizontalListSortingStrategy,
+        children: /* @__PURE__ */ jsx17(
+          DroppableZone,
+          {
+            id: droppableId,
+            isEmpty: pattern.length === 0,
+            placeholder,
+            children: pattern.map((segment) => /* @__PURE__ */ jsx17(
+              PatternSegmentItem,
+              {
+                segment,
+                onUpdate: onUpdateSegment,
+                onDelete: onRemoveSegment,
+                readOnly
+              },
+              segment.id
+            ))
+          }
+        )
+      }
+    ),
+    !readOnly && /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx17(SeparatorPicker, { onSelect: handleAddSeparator, disabled: readOnly }),
+      /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddText,
+          className: "text-xs text-blue-600 hover:text-blue-800 transition-colors",
+          children: "+ Add text"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/ui/components/naming/PatternPreview.tsx
+import { useMemo } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+function PatternPreview({
+  filePattern,
+  folderPattern,
+  userVariables,
+  sampleFileName = "document.pdf",
+  previewDate,
+  counterValue = 1,
+  className = ""
+}) {
+  const date = previewDate || /* @__PURE__ */ new Date();
+  const filePreview = useMemo(() => {
+    if (filePattern.length === 0) {
+      return { name: "(no pattern defined)", isEmpty: true };
+    }
+    const baseName = generatePreviewName(filePattern, userVariables, {
+      date,
+      counterValue,
+      originalFileName: sampleFileName
+    });
+    const ext = sampleFileName.includes(".") ? sampleFileName.substring(sampleFileName.lastIndexOf(".")) : "";
+    const hasExtension = baseName.includes(".");
+    return {
+      name: hasExtension ? baseName : baseName + ext,
+      isEmpty: false
+    };
+  }, [filePattern, userVariables, date, counterValue, sampleFileName]);
+  const folderPreview = useMemo(() => {
+    if (folderPattern.length === 0) {
+      return { name: "(no pattern defined)", isEmpty: true };
+    }
+    return {
+      name: generatePreviewName(folderPattern, userVariables, {
+        date,
+        counterValue,
+        originalFileName: sampleFileName
+      }),
+      isEmpty: false
+    };
+  }, [folderPattern, userVariables, date, counterValue, sampleFileName]);
+  const dateDisplay = date.toLocaleDateString("en-US", {
+    weekday: "short",
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: `bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border border-gray-200 p-4 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsx18("h3", { className: "text-sm font-medium text-gray-700", children: "Preview" }),
+          /* @__PURE__ */ jsx18("span", { className: "text-xs text-gray-400", children: dateDisplay })
+        ] }),
+        /* @__PURE__ */ jsxs17("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-16 text-xs text-gray-500 pt-0.5", children: "File:" }),
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                className: `
+              flex-1 font-mono text-sm px-3 py-2 rounded bg-white border
+              ${filePreview.isEmpty ? "text-gray-400 border-gray-200" : "text-gray-800 border-gray-300"}
+            `,
+                children: /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs17(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "text-gray-400",
+                      children: [
+                        /* @__PURE__ */ jsx18("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                        /* @__PURE__ */ jsx18("polyline", { points: "14,2 14,8 20,8" })
+                      ]
+                    }
+                  ),
+                  filePreview.name
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-16 text-xs text-gray-500 pt-0.5", children: "Folder:" }),
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                className: `
+              flex-1 font-mono text-sm px-3 py-2 rounded bg-white border
+              ${folderPreview.isEmpty ? "text-gray-400 border-gray-200" : "text-gray-800 border-gray-300"}
+            `,
+                children: /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx18(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "text-yellow-500",
+                      children: /* @__PURE__ */ jsx18("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" })
+                    }
+                  ),
+                  folderPreview.name
+                ] })
+              }
+            )
+          ] }),
+          !filePreview.isEmpty && !folderPreview.isEmpty && /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3 pt-2 border-t border-gray-200", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-16 text-xs text-gray-500 pt-0.5", children: "Full path:" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex-1 font-mono text-xs text-gray-600 px-3 py-2 rounded bg-gray-100 border border-gray-200 overflow-x-auto", children: [
+              "/",
+              folderPreview.name,
+              "/",
+              filePreview.name
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx18("p", { className: "text-xs text-gray-400 mt-3 text-center", children: "Preview uses example values from your variables" })
+      ]
+    }
+  );
+}
+
+// src/ui/components/naming/NamingRuleConfigurator.tsx
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function NamingRuleConfigurator({
+  variables,
+  initialSchema,
+  onChange,
+  onExport,
+  onImport,
+  className = "",
+  customDateFormats,
+  readOnly = false,
+  sampleFileName = "document.pdf"
+}) {
+  const fileInputRef = useRef5(null);
+  const [activeVariable, setActiveVariable] = useState12(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    })
+  );
+  const {
+    filePattern,
+    folderPattern,
+    canUndo,
+    canRedo,
+    isDirty,
+    addToFilePattern,
+    removeFromFilePattern,
+    updateFilePatternSegment,
+    reorderFilePattern,
+    clearFilePattern,
+    addToFolderPattern,
+    removeFromFolderPattern,
+    updateFolderPatternSegment,
+    reorderFolderPattern,
+    clearFolderPattern,
+    undo,
+    redo,
+    getSchema,
+    loadSchema
+  } = useNamingRule({
+    initialSchema,
+    onChange
+  });
+  const handleVariableClick = useCallback13(
+    (variable) => {
+      addToFilePattern(createVariableSegment(variable.variable_name));
+    },
+    [addToFilePattern]
+  );
+  const handleDragStart = useCallback13((event) => {
+    const { active } = event;
+    if (String(active.id).startsWith("draggable-")) {
+      const data = active.data.current;
+      if (data?.type === "variable" && data.variable) {
+        setActiveVariable(data.variable);
+      }
+    }
+  }, []);
+  const handleDragEnd = useCallback13(
+    (event) => {
+      const { active, over } = event;
+      setActiveVariable(null);
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      if (activeId.startsWith("draggable-")) {
+        const data = active.data.current;
+        if (data?.type === "variable" && data.variable) {
+          const segment = createVariableSegment(data.variable.variable_name);
+          if (overId === "file-pattern-drop") {
+            addToFilePattern(segment);
+          } else if (overId === "folder-pattern-drop") {
+            addToFolderPattern(segment);
+          } else {
+            const fileIndex = filePattern.findIndex((seg) => seg.id === overId);
+            const folderIndex = folderPattern.findIndex((seg) => seg.id === overId);
+            if (fileIndex >= 0) {
+              addToFilePattern(segment, fileIndex + 1);
+            } else if (folderIndex >= 0) {
+              addToFolderPattern(segment, folderIndex + 1);
+            }
+          }
+        }
+        return;
+      }
+      if (activeId !== overId) {
+        const activeFileIndex = filePattern.findIndex((seg) => seg.id === activeId);
+        const overFileIndex = filePattern.findIndex((seg) => seg.id === overId);
+        if (activeFileIndex >= 0 && overFileIndex >= 0) {
+          reorderFilePattern(activeFileIndex, overFileIndex);
+          return;
+        }
+        const activeFolderIndex = folderPattern.findIndex((seg) => seg.id === activeId);
+        const overFolderIndex = folderPattern.findIndex((seg) => seg.id === overId);
+        if (activeFolderIndex >= 0 && overFolderIndex >= 0) {
+          reorderFolderPattern(activeFolderIndex, overFolderIndex);
+          return;
+        }
+      }
+    },
+    [filePattern, folderPattern, addToFilePattern, addToFolderPattern, reorderFilePattern, reorderFolderPattern]
+  );
+  const handleExport = useCallback13(() => {
+    const schema = getSchema();
+    schema.metadata = {
+      ...schema.metadata,
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    if (onExport) {
+      onExport(schema);
+    } else {
+      const blob = new Blob([JSON.stringify(schema, null, 2)], {
+        type: "application/json"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "naming-rule.json";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  }, [getSchema, onExport]);
+  const handleImportClick = useCallback13(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = useCallback13(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      try {
+        const text = await file.text();
+        const schema = JSON.parse(text);
+        if (validateNamingRuleSchema(schema)) {
+          loadSchema(schema);
+          onImport?.(schema);
+        } else {
+          console.error("Invalid naming rule schema");
+          alert("Invalid naming rule schema. Please check the file format.");
+        }
+      } catch (err) {
+        console.error("Failed to parse JSON:", err);
+        alert("Failed to parse JSON file. Please ensure it is valid JSON.");
+      }
+      e.target.value = "";
+    },
+    [loadSchema, onImport]
+  );
+  return /* @__PURE__ */ jsxs18(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: `flex flex-col bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden h-full ${className}`,
+            children: [
+              /* @__PURE__ */ jsxs18("div", { className: "flex-1 overflow-y-auto min-h-0", children: [
+                /* @__PURE__ */ jsxs18("div", { className: "p-4 bg-gray-50 border-b border-gray-200", children: [
+                  /* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-gray-800 mb-3", children: "Available Variables" }),
+                  /* @__PURE__ */ jsx19(
+                    VariableList,
+                    {
+                      userVariables: variables,
+                      customDateFormats,
+                      onVariableClick: handleVariableClick,
+                      disabled: readOnly
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs18("div", { className: "p-4 space-y-6", children: [
+                  /* @__PURE__ */ jsx19(
+                    PatternBuilder,
+                    {
+                      pattern: filePattern,
+                      label: "File Name Pattern",
+                      droppableId: "file-pattern-drop",
+                      onPatternChange: () => {
+                      },
+                      onAddSegment: addToFilePattern,
+                      onRemoveSegment: removeFromFilePattern,
+                      onUpdateSegment: updateFilePatternSegment,
+                      onReorderSegments: reorderFilePattern,
+                      onClear: clearFilePattern,
+                      readOnly,
+                      placeholder: "Drop variables here or click to add..."
+                    }
+                  ),
+                  /* @__PURE__ */ jsx19(
+                    PatternBuilder,
+                    {
+                      pattern: folderPattern,
+                      label: "Folder Name Pattern",
+                      droppableId: "folder-pattern-drop",
+                      onPatternChange: () => {
+                      },
+                      onAddSegment: addToFolderPattern,
+                      onRemoveSegment: removeFromFolderPattern,
+                      onUpdateSegment: updateFolderPatternSegment,
+                      onReorderSegments: reorderFolderPattern,
+                      onClear: clearFolderPattern,
+                      readOnly,
+                      placeholder: "Drop variables here for folder structure..."
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx19("div", { className: "p-4 border-t border-gray-200", children: /* @__PURE__ */ jsx19(
+                  PatternPreview,
+                  {
+                    filePattern,
+                    folderPattern,
+                    userVariables: variables,
+                    sampleFileName
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
+                /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx19(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: undo,
+                      disabled: !canUndo || readOnly,
+                      className: `
+                p-2 rounded hover:bg-gray-200 transition-colors
+                ${canUndo && !readOnly ? "text-gray-600" : "text-gray-300 cursor-not-allowed"}
+              `,
+                      title: "Undo (Ctrl+Z)",
+                      children: /* @__PURE__ */ jsxs18(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: [
+                            /* @__PURE__ */ jsx19("path", { d: "M3 7v6h6" }),
+                            /* @__PURE__ */ jsx19("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx19(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: redo,
+                      disabled: !canRedo || readOnly,
+                      className: `
+                p-2 rounded hover:bg-gray-200 transition-colors
+                ${canRedo && !readOnly ? "text-gray-600" : "text-gray-300 cursor-not-allowed"}
+              `,
+                      title: "Redo (Ctrl+Y)",
+                      children: /* @__PURE__ */ jsxs18(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: [
+                            /* @__PURE__ */ jsx19("path", { d: "M21 7v6h-6" }),
+                            /* @__PURE__ */ jsx19("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  isDirty && /* @__PURE__ */ jsx19("span", { className: "text-xs text-amber-600 ml-2", children: "* Unsaved changes" })
+                ] }),
+                /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx19(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: ".json",
+                      onChange: handleFileChange,
+                      className: "hidden"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx19(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleImportClick,
+                      disabled: readOnly,
+                      className: `
+                px-3 py-1.5 text-sm rounded border transition-colors
+                ${readOnly ? "bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed" : "bg-white text-gray-600 border-gray-300 hover:bg-gray-50"}
+              `,
+                      children: "Import"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx19(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleExport,
+                      className: "px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors",
+                      children: "Export"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx19(DragOverlay, { children: activeVariable ? /* @__PURE__ */ jsx19(
+          DraggableVariable,
+          {
+            variable: activeVariable,
+            className: "shadow-xl opacity-90"
+          }
+        ) : null })
+      ]
+    }
+  );
+}
+export {
+  ArchiveIcon,
+  AudioIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CodeIcon,
+  CreateFolderDialog,
+  DeleteConfirmDialog,
+  DownloadIcon,
+  DraggableVariable,
+  FileActions,
+  FileBrowser,
+  FileBrowserProvider,
+  FileIcon,
+  FileList,
+  FilePreview,
+  FileTextIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  FolderTree,
+  HomeIcon,
+  ImageIcon,
+  LoaderIcon,
+  MoreVerticalIcon,
+  NamingRuleConfigurator,
+  PathBreadcrumb,
+  PatternBuilder,
+  PatternPreview,
+  PatternSegmentItem,
+  PdfIcon,
+  PencilIcon,
+  PlusIcon,
+  RefreshIcon,
+  RenameDialog,
+  SeparatorPicker,
+  TrashIcon,
+  UploadDialog,
+  UploadIcon,
+  VariableList,
+  VideoIcon,
+  XIcon,
+  getFileIcon,
+  useFileBrowser,
+  useFileBrowserContext,
+  useFileOperations,
+  useMultiFileOperations,
+  useNamingRule
+};
+//# sourceMappingURL=index.mjs.map