@fde-desktop/fde-core 0.3.7 → 0.4.1

package/dist/chunk-BDO6B7MZ.cjs

@@ -0,0 +1,451 @@
+'use strict';
+
+var chunkABIAPZ6S_cjs = require('./chunk-ABIAPZ6S.cjs');
+var chunk6QOUYSEE_cjs = require('./chunk-6QOUYSEE.cjs');
+var chunkE55VXNLK_cjs = require('./chunk-E55VXNLK.cjs');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/utils/buildBreadcrumbs.ts
+var buildBreadcrumbs = (currentFolderId, fsNodes) => {
+  const crumbs = [{ id: null, name: "Home" }];
+  let id = currentFolderId;
+  const trail = [];
+  while (id !== null) {
+    const node = fsNodes.find((n) => n.id === id);
+    if (!node) break;
+    trail.unshift({ id: node.id, name: node.name });
+    id = node.parentId;
+  }
+  return [...crumbs, ...trail];
+};
+
+// src/components/Shared/FilePickerApp/FilePickerApp.module.css
+var FilePickerApp_default = {};
+var PickerModalComponent = ({
+  opened,
+  children,
+  ariaLabelKey,
+  ariaLabelNs = "window"
+}) => {
+  const { t } = reactI18next.useTranslation(ariaLabelNs);
+  if (!opened) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.overlay, role: "dialog", "aria-label": t(ariaLabelKey), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.panel, children }) });
+};
+var PickerModal = react.memo(PickerModalComponent);
+var FolderBreadcrumbsComponent = ({
+  currentFolderId,
+  fsNodes,
+  onNavigate
+}) => {
+  const crumbs = buildBreadcrumbs(currentFolderId, fsNodes);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.breadcrumbBar, children: /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Breadcrumbs, { separator: "\u203A", classNames: { separator: FilePickerApp_default.breadcrumbSep }, children: crumbs.map((crumb, i) => {
+    const isLast = i === crumbs.length - 1;
+    return isLast ? /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", fw: 500, children: crumb.name }, crumb.id ?? "root") : /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Anchor, { size: "xs", onClick: () => onNavigate(crumb.id), children: crumb.name }, crumb.id ?? "root");
+  }) }) });
+};
+var FolderBreadcrumbs = react.memo(FolderBreadcrumbsComponent);
+var FolderTreeItemComponent = ({
+  node,
+  allNodes,
+  currentFolderId,
+  depth,
+  onNavigate
+}) => {
+  const children = allNodes.filter(
+    (n) => n.parentId === node.id && n.type === "folder"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkE55VXNLK_cjs.UnstyledButton,
+      {
+        className: FilePickerApp_default.treeItem,
+        "data-active": currentFolderId === node.id || void 0,
+        style: { paddingLeft: 8 + depth * 14 },
+        onClick: () => onNavigate(node.id),
+        "aria-label": node.name,
+        "aria-current": currentFolderId === node.id ? "page" : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkABIAPZ6S_cjs.FileIcon_default, { type: "folder", folderNode: node, size: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", ml: 6, truncate: true, children: node.name })
+        ]
+      }
+    ),
+    children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      FolderTreeItem,
+      {
+        node: child,
+        allNodes,
+        currentFolderId,
+        depth: depth + 1,
+        onNavigate
+      },
+      child.id
+    ))
+  ] });
+};
+var FolderTreeItem = react.memo(FolderTreeItemComponent);
+var FolderSidebarComponent = ({
+  currentFolderId,
+  fsNodes,
+  onNavigate
+}) => {
+  const { t } = reactI18next.useTranslation("window");
+  const rootFolders = fsNodes.filter(
+    (n) => n.parentId === null && n.type === "folder"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: FilePickerApp_default.sidebar, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: FilePickerApp_default.folderTree,
+      "aria-label": t("fileDialog.folderTreeAria", { ns: "common" }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          chunkE55VXNLK_cjs.UnstyledButton,
+          {
+            className: FilePickerApp_default.treeItem,
+            "data-active": currentFolderId === null || void 0,
+            style: { paddingLeft: 8 },
+            onClick: () => onNavigate(null),
+            "aria-label": t("common:labels.home"),
+            "aria-current": currentFolderId === null ? "page" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkABIAPZ6S_cjs.FileIcon_default, { type: "folder", size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", ml: 6, fw: 500, children: t("common:labels.home") })
+            ]
+          }
+        ),
+        rootFolders.map((folder) => /* @__PURE__ */ jsxRuntime.jsx(
+          FolderTreeItem,
+          {
+            node: folder,
+            allNodes: fsNodes,
+            currentFolderId,
+            depth: 1,
+            onNavigate
+          },
+          folder.id
+        ))
+      ]
+    }
+  ) });
+};
+var FolderSidebar = react.memo(FolderSidebarComponent);
+var FolderGridComponent = ({
+  currentFolderId,
+  fsNodes,
+  onNavigate,
+  onItemDoubleClick
+}) => {
+  const { t } = reactI18next.useTranslation("window");
+  const currentFolderNodes = fsNodes.filter(
+    (n) => n.parentId === currentFolderId && n.type === "folder"
+  );
+  if (currentFolderNodes.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.empty, children: /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "sm", c: "dimmed", children: t("common:messages.noSubfolders") }) });
+  }
+  const sortedNodes = chunk6QOUYSEE_cjs.sortNodes(currentFolderNodes);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: FilePickerApp_default.grid,
+      role: "listbox",
+      "aria-label": t("fileDialog.foldersAria", { ns: "common" }),
+      children: sortedNodes.map((node) => /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkE55VXNLK_cjs.UnstyledButton,
+        {
+          className: FilePickerApp_default.item,
+          onDoubleClick: () => {
+            onNavigate(node.id);
+            onItemDoubleClick?.(node);
+          },
+          "aria-label": t("fileDialog.openFolder", { name: node.name }),
+          role: "option",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkABIAPZ6S_cjs.FileIcon_default, { type: "folder", name: node.name, folderNode: node, size: 32 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", className: FilePickerApp_default.name, truncate: true, children: node.name })
+          ]
+        },
+        node.id
+      ))
+    }
+  );
+};
+var FolderGrid = react.memo(FolderGridComponent);
+var FilePickerApp = ({ acceptedMimeTypes, onConfirm, onCancel }) => {
+  const { t } = reactI18next.useTranslation("window");
+  const fsNodes = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.fsNodes);
+  const [currentFolderId, setCurrentFolderId] = react.useState(null);
+  const [selectedNode, setSelectedNode] = react.useState(null);
+  const currentNodes = currentFolderId === null ? fsNodes.filter((n) => n.parentId === null) : fsNodes.filter((n) => n.parentId === currentFolderId);
+  const visibleNodes = currentNodes.filter((n) => {
+    if (n.type === "folder") return true;
+    const file = n;
+    if (!acceptedMimeTypes || acceptedMimeTypes.length === 0) return true;
+    return acceptedMimeTypes.some(
+      (accepted) => file.mimeType === accepted || accepted.endsWith("/*") && file.mimeType?.startsWith(accepted.slice(0, -1))
+    );
+  });
+  const handleNavigate = react.useCallback((id) => {
+    setCurrentFolderId(id);
+    setSelectedNode(null);
+  }, []);
+  const handleItemClick = react.useCallback((node) => {
+    if (node.type === "file") {
+      setSelectedNode(node);
+    }
+  }, []);
+  const handleItemDoubleClick = react.useCallback(
+    (node) => {
+      if (node.type === "folder") {
+        handleNavigate(node.id);
+      } else {
+        onConfirm(node);
+      }
+    },
+    [handleNavigate, onConfirm]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FolderBreadcrumbs,
+      {
+        currentFolderId,
+        fsNodes,
+        onNavigate: handleNavigate
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FolderSidebar,
+        {
+          currentFolderId,
+          fsNodes,
+          onNavigate: handleNavigate
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: FilePickerApp_default.content, children: visibleNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.empty, children: /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "sm", c: "dimmed", children: currentNodes.length === 0 ? t("common:messages.folderEmpty") : t("common:messages.noMatchingFiles") }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: FilePickerApp_default.grid,
+          role: "listbox",
+          "aria-label": t("fileDialog.filesAria", { ns: "common" }),
+          children: chunk6QOUYSEE_cjs.sortNodes(visibleNodes).map((node) => {
+            const isSelected = selectedNode?.id === node.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              chunkE55VXNLK_cjs.UnstyledButton,
+              {
+                className: FilePickerApp_default.item,
+                "data-selected": isSelected || void 0,
+                "data-type": node.type,
+                onClick: () => handleItemClick(node),
+                onDoubleClick: () => handleItemDoubleClick(node),
+                "aria-label": node.type === "folder" ? t("fileDialog.openFolder", { name: node.name, ns: "window" }) : t("fileDialog.selectFile", { name: node.name, ns: "window" }),
+                "aria-selected": node.type === "file" ? isSelected : void 0,
+                role: "option",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilePickerApp_default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkABIAPZ6S_cjs.FileIcon_default,
+                    {
+                      type: node.type,
+                      name: node.name,
+                      folderNode: node.type === "folder" ? node : void 0,
+                      size: 32
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", className: FilePickerApp_default.name, truncate: true, children: node.name })
+                ]
+              },
+              node.id
+            );
+          })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.actionBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", c: "dimmed", truncate: true, className: FilePickerApp_default.selectedLabel, children: selectedNode ? selectedNode.name : t("common:messages.noFileSelected") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkE55VXNLK_cjs.Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.Button,
+          {
+            variant: "default",
+            size: "xs",
+            onClick: onCancel,
+            "aria-label": t("filePicker.cancelAria", { ns: "common" }),
+            children: t("common:actions.cancel")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.Button,
+          {
+            size: "xs",
+            disabled: !selectedNode,
+            onClick: () => selectedNode && onConfirm(selectedNode),
+            "aria-label": t("filePicker.openSelectedAria", { ns: "common" }),
+            children: t("common:actions.open")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var FilePickerModal = ({ opened, ...pickerProps }) => {
+  if (!opened) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(PickerModal, { opened, ariaLabelKey: "fileDialog.openFile", children: /* @__PURE__ */ jsxRuntime.jsx(FilePickerApp, { ...pickerProps }) });
+};
+var FileSaveApp = ({
+  initialName = "untitled.md",
+  onConfirm,
+  onCancel
+}) => {
+  const { t } = reactI18next.useTranslation("window");
+  const fsNodes = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.fsNodes);
+  const [currentFolderId, setCurrentFolderId] = react.useState(null);
+  const [fileName, setFileName] = react.useState(initialName);
+  const handleNavigate = react.useCallback((id) => {
+    setCurrentFolderId(id);
+  }, []);
+  const handleSave = react.useCallback(() => {
+    const trimmed = fileName.trim();
+    if (!trimmed) return;
+    onConfirm({
+      parentId: currentFolderId,
+      name: trimmed.endsWith(".md") ? trimmed : `${trimmed}.md`
+    });
+  }, [fileName, currentFolderId, onConfirm]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FolderBreadcrumbs,
+      {
+        currentFolderId,
+        fsNodes,
+        onNavigate: handleNavigate
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FolderSidebar,
+        {
+          currentFolderId,
+          fsNodes,
+          onNavigate: handleNavigate
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: FilePickerApp_default.content, children: /* @__PURE__ */ jsxRuntime.jsx(
+        FolderGrid,
+        {
+          currentFolderId,
+          fsNodes,
+          onNavigate: handleNavigate
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.saveActionBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkE55VXNLK_cjs.TextInput,
+        {
+          size: "xs",
+          placeholder: t("fileDialog.filename"),
+          value: fileName,
+          onChange: (e) => setFileName(e.currentTarget.value),
+          onKeyDown: (e) => e.key === "Enter" && handleSave(),
+          "aria-label": t("filePicker.fileNameAria", { ns: "common" }),
+          className: FilePickerApp_default.fileNameInput
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkE55VXNLK_cjs.Group, { gap: "xs", style: { flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.Button,
+          {
+            variant: "default",
+            size: "xs",
+            onClick: onCancel,
+            "aria-label": t("filePicker.cancelAria", { ns: "common" }),
+            children: t("common:actions.cancel")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.Button,
+          {
+            size: "xs",
+            disabled: !fileName.trim(),
+            onClick: handleSave,
+            "aria-label": t("fileDialog.saveFile"),
+            children: t("common:actions.save")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var FileSaveModal = ({ opened, ...saveProps }) => {
+  if (!opened) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(PickerModal, { opened, ariaLabelKey: "fileDialog.saveFile", children: /* @__PURE__ */ jsxRuntime.jsx(FileSaveApp, { ...saveProps }) });
+};
+var FolderPickerApp = ({ onConfirm, onCancel }) => {
+  const { t } = reactI18next.useTranslation("window");
+  const fsNodes = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.fsNodes);
+  const [currentFolderId, setCurrentFolderId] = react.useState(null);
+  const handleNavigate = react.useCallback((id) => {
+    setCurrentFolderId(id);
+  }, []);
+  const handleConfirm = react.useCallback(() => {
+    onConfirm(currentFolderId);
+  }, [currentFolderId, onConfirm]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FolderBreadcrumbs,
+      {
+        currentFolderId,
+        fsNodes,
+        onNavigate: handleNavigate
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FolderSidebar,
+        {
+          currentFolderId,
+          fsNodes,
+          onNavigate: handleNavigate
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: FilePickerApp_default.content, children: /* @__PURE__ */ jsxRuntime.jsx(
+        FolderGrid,
+        {
+          currentFolderId,
+          fsNodes,
+          onNavigate: handleNavigate
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilePickerApp_default.actionBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", c: "dimmed", truncate: true, className: FilePickerApp_default.selectedLabel, children: currentFolderId === null ? t("common:labels.home") : fsNodes.find((n) => n.id === currentFolderId)?.name ?? "" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkE55VXNLK_cjs.Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.Button,
+          {
+            variant: "default",
+            size: "xs",
+            onClick: onCancel,
+            "aria-label": t("filePicker.cancelAria", { ns: "common" }),
+            children: t("common:actions.cancel")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Button, { size: "xs", onClick: handleConfirm, "aria-label": t("fileDialog.selectFolder"), children: t("common:actions.select") })
+      ] })
+    ] })
+  ] });
+};
+var FolderPickerModal = ({ opened, ...pickerProps }) => {
+  if (!opened) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(PickerModal, { opened, ariaLabelKey: "fileDialog.selectFolder", children: /* @__PURE__ */ jsxRuntime.jsx(FolderPickerApp, { ...pickerProps }) });
+};
+var FilePickerApp_default2 = FilePickerApp;
+
+exports.FilePickerApp_default = FilePickerApp_default2;
+exports.FilePickerModal = FilePickerModal;
+exports.FileSaveModal = FileSaveModal;
+exports.FolderPickerModal = FolderPickerModal;
+exports.PickerModal = PickerModal;
+exports.buildBreadcrumbs = buildBreadcrumbs;