@flytedan/flytebot-design-system 0.12.15 → 0.13.0

package/dist/index.js

@@ -10418,8 +10418,496 @@ function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", o
   );
 }
 
-// src/kits/query.ts
+// src/components/files/FileBrowser.tsx
 import * as React48 from "react";
+import { Fragment as Fragment23, jsx as jsx78, jsxs as jsxs74 } from "react/jsx-runtime";
+function childrenOf(folders, parentId) {
+  return folders.filter((f) => f.parentId === parentId).sort((a, b) => a.name.localeCompare(b.name));
+}
+function ancestorsOf(folders, id) {
+  const byId = new Map(folders.map((f) => [f.id, f]));
+  const chain = [];
+  let cur = id != null ? byId.get(id) : void 0;
+  const seen = /* @__PURE__ */ new Set();
+  while (cur && !seen.has(cur.id)) {
+    seen.add(cur.id);
+    chain.unshift(cur);
+    cur = cur.parentId != null ? byId.get(cur.parentId) : void 0;
+  }
+  return chain;
+}
+function isSelfOrDescendant(folders, ancestorId, nodeId) {
+  if (nodeId == null) return false;
+  if (nodeId === ancestorId) return true;
+  const byParent = /* @__PURE__ */ new Map();
+  folders.forEach((f) => {
+    const key = f.parentId ?? "";
+    if (!byParent.has(key)) byParent.set(key, []);
+    byParent.get(key).push(f);
+  });
+  const stack = [...byParent.get(ancestorId) || []];
+  while (stack.length) {
+    const next = stack.pop();
+    if (next.id === nodeId) return true;
+    stack.push(...byParent.get(next.id) || []);
+  }
+  return false;
+}
+function flattenDestinations(folders, excludeSubtreeOf) {
+  const out = [{ id: null, name: "Home", depth: 0 }];
+  const walk = (parentId, depth) => {
+    childrenOf(folders, parentId).forEach((f) => {
+      if (excludeSubtreeOf && isSelfOrDescendant(folders, excludeSubtreeOf, f.id)) return;
+      out.push({ id: f.id, name: f.name, depth });
+      walk(f.id, depth + 1);
+    });
+  };
+  walk(null, 1);
+  return out;
+}
+var DND_MIME = "application/x-fd-filebrowser";
+function writeDragPayload(e, payload) {
+  const s = JSON.stringify(payload);
+  e.dataTransfer.setData(DND_MIME, s);
+  e.dataTransfer.setData("text/plain", s);
+  e.dataTransfer.effectAllowed = "move";
+}
+function readDragPayload(e) {
+  const raw = e.dataTransfer.getData(DND_MIME) || e.dataTransfer.getData("text/plain");
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && (parsed.kind === "file" || parsed.kind === "folder") && typeof parsed.id === "string") return parsed;
+  } catch {
+  }
+  return null;
+}
+function hasInternalPayload(e) {
+  return Array.from(e.dataTransfer.types || []).indexOf(DND_MIME) !== -1;
+}
+function FolderPickerMenu({
+  label,
+  destinations,
+  onPick
+}) {
+  const [open, setOpen] = React48.useState(false);
+  const zIndex = useOverlayLayer(open);
+  const ref = React48.useRef(null);
+  React48.useEffect(() => {
+    if (!open) return;
+    const away = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const esc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", away);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("pointerdown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs74("span", { className: "fd-fb-menu-anchor", ref, children: [
+    /* @__PURE__ */ jsx78(
+      IconButton,
+      {
+        icon: "arrows-out-cardinal",
+        label,
+        size: "sm",
+        variant: "ghost",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v)
+      }
+    ),
+    open ? /* @__PURE__ */ jsx78(LayerProvider, { zIndex, children: /* @__PURE__ */ jsxs74("div", { className: "fd-fb-menu", role: "menu", "aria-label": label, style: { zIndex }, children: [
+      /* @__PURE__ */ jsx78("span", { className: "fd-overline fd-muted fd-fb-menu-title", children: "Move to\u2026" }),
+      destinations.map((d) => /* @__PURE__ */ jsxs74(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          className: "fd-fb-menu-item",
+          style: { paddingLeft: 10 + d.depth * 14 },
+          onClick: () => {
+            onPick(d.id);
+            setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx78("i", { className: "ph ph-" + (d.id == null ? "house-simple" : "folder-simple"), "aria-hidden": "true" }),
+            d.name
+          ]
+        },
+        d.id ?? "__root__"
+      ))
+    ] }) }) : null
+  ] });
+}
+function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropPayload, actions, className = "" }) {
+  const [over, setOver] = React48.useState(false);
+  const dragCounter = React48.useRef(0);
+  const dropHandlers = isDropTarget ? {
+    onDragEnter: (e) => {
+      if (!hasInternalPayload(e)) return;
+      dragCounter.current++;
+      setOver(true);
+    },
+    onDragOver: (e) => {
+      if (!hasInternalPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+    },
+    onDragLeave: () => {
+      dragCounter.current = Math.max(0, dragCounter.current - 1);
+      if (!dragCounter.current) setOver(false);
+    },
+    onDrop: (e) => {
+      if (!hasInternalPayload(e)) return;
+      e.preventDefault();
+      dragCounter.current = 0;
+      setOver(false);
+      const payload = readDragPayload(e);
+      if (payload && onDropPayload) onDropPayload(payload);
+    }
+  } : {};
+  return /* @__PURE__ */ jsxs74("div", { className: ["fd-fb-row", over ? "is-drop-target" : "", className].filter(Boolean).join(" "), ...dropHandlers, children: [
+    /* @__PURE__ */ jsxs74(
+      "button",
+      {
+        type: "button",
+        className: "fd-fb-row-main",
+        onClick: onOpen,
+        draggable: !!draggableId,
+        onDragStart: draggableId ? (e) => writeDragPayload(e, draggableId) : void 0,
+        children: [
+          /* @__PURE__ */ jsx78("span", { className: "fd-fb-row-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx78("i", { className: "ph ph-" + icon }) }),
+          /* @__PURE__ */ jsxs74("span", { className: "fd-fb-row-text", children: [
+            /* @__PURE__ */ jsx78("span", { className: "fd-fb-row-name", title: name, children: name }),
+            meta ? /* @__PURE__ */ jsx78("span", { className: "fd-fb-row-meta", children: meta }) : null
+          ] })
+        ]
+      }
+    ),
+    actions ? /* @__PURE__ */ jsx78("span", { className: "fd-fb-row-actions", children: actions }) : null
+  ] });
+}
+function TreeNode({ folder, depth, folders, currentFolderId, onNavigate, onMoveInto, canMove }) {
+  const kids = childrenOf(folders, folder.id);
+  const [expanded, setExpanded] = React48.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
+  React48.useEffect(() => {
+    if (currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId)) setExpanded(true);
+  }, [currentFolderId, folder.id, folders]);
+  const isCurrent = folder.id === currentFolderId;
+  return /* @__PURE__ */ jsxs74("div", { className: "fd-fb-tree-node", children: [
+    /* @__PURE__ */ jsx78(
+      RowShell,
+      {
+        icon: folder.id === currentFolderId ? "folder-open" : "folder-simple",
+        name: folder.name,
+        onOpen: () => onNavigate(folder.id),
+        draggableId: canMove ? { kind: "folder", id: folder.id } : void 0,
+        isDropTarget: canMove,
+        onDropPayload: (payload) => onMoveInto(payload, folder.id),
+        className: ["fd-fb-tree-row", isCurrent ? "is-current" : ""].filter(Boolean).join(" "),
+        actions: kids.length ? /* @__PURE__ */ jsx78(
+          IconButton,
+          {
+            icon: expanded ? "caret-down" : "caret-right",
+            label: (expanded ? "Collapse " : "Expand ") + folder.name,
+            size: "sm",
+            variant: "ghost",
+            onClick: () => setExpanded((v) => !v)
+          }
+        ) : void 0
+      }
+    ),
+    expanded && kids.length ? /* @__PURE__ */ jsx78("div", { className: "fd-fb-tree-children", style: { paddingLeft: 14 }, children: kids.map((k) => /* @__PURE__ */ jsx78(
+      TreeNode,
+      {
+        folder: k,
+        depth: depth + 1,
+        folders,
+        currentFolderId,
+        onNavigate,
+        onMoveInto,
+        canMove
+      },
+      k.id
+    )) }) : null
+  ] });
+}
+function FileBrowser({
+  folders,
+  files,
+  currentFolderId,
+  onNavigate,
+  onCreateFolder,
+  onRenameFolder,
+  onMoveFolder,
+  onMoveFile,
+  onOpenFile,
+  onRemoveFile,
+  onUpload,
+  loading = false,
+  permissions,
+  className = ""
+}) {
+  const perm = permissions || {};
+  const canCreateFolder = perm.canCreateFolder !== false && !!onCreateFolder;
+  const canRenameFolder = perm.canRenameFolder !== false && !!onRenameFolder;
+  const canMove = perm.canMove !== false && (!!onMoveFolder || !!onMoveFile);
+  const canUpload = perm.canUpload !== false && !!onUpload;
+  const canRemoveFile = perm.canRemoveFile !== false && !!onRemoveFile;
+  const [createOpen, setCreateOpen] = React48.useState(false);
+  const [createName, setCreateName] = React48.useState("");
+  const [renameTarget, setRenameTarget] = React48.useState(null);
+  const [renameValue, setRenameValue] = React48.useState("");
+  const uploadInputRef = React48.useRef(null);
+  const crumbFolders = React48.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
+  const subfolders = React48.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
+  const currentFiles = React48.useMemo(
+    () => files.filter((f) => f.folderId === currentFolderId).sort((a, b) => a.name.localeCompare(b.name)),
+    [files, currentFolderId]
+  );
+  const isEmpty = !subfolders.length && !currentFiles.length;
+  const moveIntoFolder = (payload, targetFolderId) => {
+    if (payload.kind === "folder") {
+      if (payload.id === targetFolderId) return;
+      if (isSelfOrDescendant(folders, payload.id, targetFolderId)) return;
+      onMoveFolder && onMoveFolder(payload.id, targetFolderId);
+    } else {
+      onMoveFile && onMoveFile(payload.id, targetFolderId);
+    }
+  };
+  const openCreate = () => {
+    setCreateName("");
+    setCreateOpen(true);
+  };
+  const submitCreate = () => {
+    const name = createName.trim();
+    if (name && onCreateFolder) onCreateFolder(currentFolderId, name);
+    setCreateOpen(false);
+  };
+  const openRename = (folder) => {
+    setRenameValue(folder.name);
+    setRenameTarget(folder);
+  };
+  const submitRename = () => {
+    const name = renameValue.trim();
+    if (name && renameTarget && onRenameFolder) onRenameFolder(renameTarget.id, name);
+    setRenameTarget(null);
+  };
+  const content = /* @__PURE__ */ jsxs74("div", { className: ["fd-fb", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs74("div", { className: "fd-fb-head", children: [
+      /* @__PURE__ */ jsxs74("nav", { className: "fd-fb-crumbs", "aria-label": "Folder path", children: [
+        /* @__PURE__ */ jsx78(
+          BreadcrumbCrumb,
+          {
+            label: "Home",
+            isCurrent: currentFolderId == null,
+            onClick: () => onNavigate(null),
+            isDropTarget: canMove,
+            onDropPayload: (p) => moveIntoFolder(p, null)
+          }
+        ),
+        crumbFolders.map((f, i) => /* @__PURE__ */ jsx78(
+          BreadcrumbCrumb,
+          {
+            label: f.name,
+            isCurrent: i === crumbFolders.length - 1,
+            onClick: () => onNavigate(f.id),
+            isDropTarget: canMove,
+            onDropPayload: (p) => moveIntoFolder(p, f.id)
+          },
+          f.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs74("span", { className: "fd-fb-actions", children: [
+        canCreateFolder ? /* @__PURE__ */ jsx78(Button, { variant: "secondary", size: "sm", icon: "folder-simple-plus", onClick: openCreate, children: "New folder" }) : null,
+        canUpload ? /* @__PURE__ */ jsxs74(Fragment23, { children: [
+          /* @__PURE__ */ jsx78(Button, { variant: "secondary", size: "sm", icon: "upload-simple", onClick: () => uploadInputRef.current && uploadInputRef.current.click(), children: "Upload" }),
+          /* @__PURE__ */ jsx78(
+            "input",
+            {
+              ref: uploadInputRef,
+              type: "file",
+              multiple: true,
+              className: "fd-sr",
+              "aria-label": "Upload files",
+              onChange: (e) => {
+                const picked = Array.from(e.target.files || []);
+                if (picked.length && onUpload) onUpload(picked, currentFolderId);
+                e.target.value = "";
+              }
+            }
+          )
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs74("div", { className: "fd-fb-body", children: [
+      /* @__PURE__ */ jsxs74("div", { className: "fd-fb-tree", role: "region", "aria-label": "Folder tree", children: [
+        /* @__PURE__ */ jsx78(
+          RowShell,
+          {
+            icon: "house-simple",
+            name: "Home",
+            onOpen: () => onNavigate(null),
+            isDropTarget: canMove,
+            onDropPayload: (p) => moveIntoFolder(p, null),
+            className: ["fd-fb-tree-row", currentFolderId == null ? "is-current" : ""].filter(Boolean).join(" ")
+          }
+        ),
+        childrenOf(folders, null).map((f) => /* @__PURE__ */ jsx78(
+          TreeNode,
+          {
+            folder: f,
+            depth: 0,
+            folders,
+            currentFolderId,
+            onNavigate,
+            onMoveInto: moveIntoFolder,
+            canMove
+          },
+          f.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsx78("div", { className: "fd-fb-main", role: "region", "aria-label": "Folder contents", children: /* @__PURE__ */ jsx78(
+        LoadingRegion,
+        {
+          state: loading ? "loading" : "ready",
+          label: "Loading folder contents",
+          skeleton: /* @__PURE__ */ jsxs74("div", { className: "fd-stack", style: { gap: 8, padding: 12 }, children: [
+            /* @__PURE__ */ jsx78(Skeleton, { h: 44, radius: "10px" }),
+            /* @__PURE__ */ jsx78(Skeleton, { h: 44, radius: "10px" }),
+            /* @__PURE__ */ jsx78(Skeleton, { h: 44, radius: "10px" })
+          ] }),
+          children: isEmpty ? /* @__PURE__ */ jsx78(EmptyState, { icon: "folder-open", title: "This folder is empty", children: canUpload ? "Drop files here, or use Upload above." : "Nothing has been filed here yet." }) : /* @__PURE__ */ jsxs74("div", { className: "fd-fb-list", children: [
+            subfolders.map((f) => /* @__PURE__ */ jsx78(
+              RowShell,
+              {
+                icon: "folder-simple",
+                name: f.name,
+                onOpen: () => onNavigate(f.id),
+                draggableId: canMove ? { kind: "folder", id: f.id } : void 0,
+                isDropTarget: canMove,
+                onDropPayload: (p) => moveIntoFolder(p, f.id),
+                actions: /* @__PURE__ */ jsxs74(Fragment23, { children: [
+                  canRenameFolder ? /* @__PURE__ */ jsx78(IconButton, { icon: "pencil-simple", label: "Rename " + f.name, size: "sm", variant: "ghost", onClick: () => openRename(f) }) : null,
+                  canMove ? /* @__PURE__ */ jsx78(
+                    FolderPickerMenu,
+                    {
+                      label: "Move " + f.name,
+                      destinations: flattenDestinations(folders, f.id),
+                      onPick: (target) => moveIntoFolder({ kind: "folder", id: f.id }, target)
+                    }
+                  ) : null
+                ] })
+              },
+              f.id
+            )),
+            currentFiles.map((file) => /* @__PURE__ */ jsx78(
+              RowShell,
+              {
+                icon: iconForMime(file.mime, file.name),
+                name: file.name,
+                meta: file.size ? formatBytes(file.size) : void 0,
+                onOpen: onOpenFile ? () => onOpenFile(file) : void 0,
+                draggableId: canMove ? { kind: "file", id: file.id } : void 0,
+                actions: /* @__PURE__ */ jsxs74(Fragment23, { children: [
+                  canMove ? /* @__PURE__ */ jsx78(
+                    FolderPickerMenu,
+                    {
+                      label: "Move " + file.name,
+                      destinations: flattenDestinations(folders),
+                      onPick: (target) => onMoveFile && onMoveFile(file.id, target)
+                    }
+                  ) : null,
+                  canRemoveFile ? /* @__PURE__ */ jsx78(IconButton, { icon: "trash-simple", label: "Remove " + file.name, size: "sm", variant: "ghost", onClick: () => onRemoveFile && onRemoveFile(file) }) : null
+                ] })
+              },
+              file.id
+            ))
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx78(Modal, { open: createOpen, title: "New folder", onClose: () => setCreateOpen(false), footer: /* @__PURE__ */ jsxs74(Fragment23, { children: [
+      /* @__PURE__ */ jsx78(Button, { variant: "secondary", onClick: () => setCreateOpen(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx78(Button, { onClick: submitCreate, disabled: !createName.trim(), children: "Create" })
+    ] }), children: /* @__PURE__ */ jsx78(
+      "input",
+      {
+        className: "fd-fb-input",
+        value: createName,
+        onChange: (e) => setCreateName(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") submitCreate();
+        },
+        placeholder: "Folder name",
+        "aria-label": "Folder name",
+        autoFocus: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx78(Modal, { open: renameTarget != null, title: "Rename folder", onClose: () => setRenameTarget(null), footer: /* @__PURE__ */ jsxs74(Fragment23, { children: [
+      /* @__PURE__ */ jsx78(Button, { variant: "secondary", onClick: () => setRenameTarget(null), children: "Cancel" }),
+      /* @__PURE__ */ jsx78(Button, { onClick: submitRename, disabled: !renameValue.trim(), children: "Save" })
+    ] }), children: /* @__PURE__ */ jsx78(
+      "input",
+      {
+        className: "fd-fb-input",
+        value: renameValue,
+        onChange: (e) => setRenameValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") submitRename();
+        },
+        placeholder: "Folder name",
+        "aria-label": "Folder name",
+        autoFocus: true
+      }
+    ) })
+  ] });
+  if (!canUpload) return content;
+  return /* @__PURE__ */ jsx78(Dropzone, { className: "fd-fb-dropzone", onFiles: (picked) => onUpload && onUpload(picked, currentFolderId), label: "Drop files to upload", children: content });
+}
+function BreadcrumbCrumb({
+  label,
+  isCurrent,
+  onClick,
+  isDropTarget,
+  onDropPayload
+}) {
+  const [over, setOver] = React48.useState(false);
+  const dragCounter = React48.useRef(0);
+  const dropHandlers = isDropTarget ? {
+    onDragEnter: (e) => {
+      if (!hasInternalPayload(e)) return;
+      dragCounter.current++;
+      setOver(true);
+    },
+    onDragOver: (e) => {
+      if (!hasInternalPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+    },
+    onDragLeave: () => {
+      dragCounter.current = Math.max(0, dragCounter.current - 1);
+      if (!dragCounter.current) setOver(false);
+    },
+    onDrop: (e) => {
+      if (!hasInternalPayload(e)) return;
+      e.preventDefault();
+      dragCounter.current = 0;
+      setOver(false);
+      const payload = readDragPayload(e);
+      if (payload && onDropPayload) onDropPayload(payload);
+    }
+  } : {};
+  return /* @__PURE__ */ jsx78("span", { className: ["fd-fb-crumb", over ? "is-drop-target" : ""].filter(Boolean).join(" "), ...dropHandlers, children: isCurrent ? /* @__PURE__ */ jsx78("span", { className: "fd-fb-crumb-current", "aria-current": "page", children: label }) : /* @__PURE__ */ jsx78("button", { type: "button", className: "fd-fb-crumb-link", onClick, children: label }) });
+}
+
+// src/kits/query.ts
+import * as React49 from "react";
 function eqFilter(get2) {
   return (row, value) => Array.isArray(value) ? value.includes(get2(row)) : get2(row) === value;
 }
@@ -10451,22 +10939,22 @@ function compare(a, b, dir) {
 var API = null;
 var PREFS = null;
 function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
-  const [query, setQuery] = React48.useState(() => {
+  const [query, setQuery] = React49.useState(() => {
     const store = PREFS || window.PlannerPrefs;
     const saved = prefsKey && store ? store.getTable(prefsKey) : {};
     return { ...DEFAULTS, ...defaults || {}, ...saved.pageSize ? { pageSize: saved.pageSize } : {}, ...saved.sort ? { sort: saved.sort, dir: saved.dir || "desc" } : {} };
   });
-  const savePref = React48.useCallback((patch2) => {
+  const savePref = React49.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
-  const [res, setRes] = React48.useState(null);
-  const [loading, setLoading] = React48.useState(true);
-  const seq2 = React48.useRef(0);
+  const [res, setRes] = React49.useState(null);
+  const [loading, setLoading] = React49.useState(true);
+  const seq2 = React49.useRef(0);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const id = ++seq2.current;
     setLoading(true);
     const t = setTimeout(() => {
@@ -10810,6 +11298,7 @@ export {
   FILE_VIEWER_CSV_ROW_LIMIT,
   FILE_VIEWER_TEXT_LIMIT,
   FeatureGate,
+  FileBrowser,
   FileChip,
   FileGrid,
   FileKit,