@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

package/dist/packages/stack/src/plugins/media/api/query-key-defs.cjs

@@ -1,5 +1,17 @@
 'use strict';
 
+function mediaEndpointDiscriminator(endpoint) {
+  return {
+    baseURL: endpoint.baseURL,
+    basePath: endpoint.basePath
+  };
+}
+function mediaQueryScope(identityPartition, endpoint) {
+  return {
+    ...identityPartition === void 0 ? {} : { identity: identityPartition },
+    endpoint: mediaEndpointDiscriminator(endpoint)
+  };
+}
 function assetListDiscriminator(params) {
   return {
     folderId: params?.folderId,
@@ -14,11 +26,23 @@ function folderListDiscriminator(parentId) {
   return parentId === null ? "root" : parentId;
 }
 const MEDIA_QUERY_KEYS = {
-  assetsList: (params) => ["mediaAssets", "list", assetListDiscriminator(params)],
+  assetsList: (params, identityPartition, endpoint) => [
+    "mediaAssets",
+    "list",
+    assetListDiscriminator(params),
+    mediaQueryScope(identityPartition, endpoint)
+  ],
   assetDetail: (id) => ["mediaAssets", "detail", id],
-  foldersList: (parentId) => ["mediaFolders", "list", folderListDiscriminator(parentId)]
+  foldersList: (parentId, identityPartition, endpoint) => [
+    "mediaFolders",
+    "list",
+    folderListDiscriminator(parentId),
+    mediaQueryScope(identityPartition, endpoint)
+  ]
 };
 
 exports.MEDIA_QUERY_KEYS = MEDIA_QUERY_KEYS;
 exports.assetListDiscriminator = assetListDiscriminator;
 exports.folderListDiscriminator = folderListDiscriminator;
+exports.mediaEndpointDiscriminator = mediaEndpointDiscriminator;
+exports.mediaQueryScope = mediaQueryScope;

package/dist/packages/stack/src/plugins/media/api/query-key-defs.mjs

@@ -1,3 +1,15 @@
+function mediaEndpointDiscriminator(endpoint) {
+  return {
+    baseURL: endpoint.baseURL,
+    basePath: endpoint.basePath
+  };
+}
+function mediaQueryScope(identityPartition, endpoint) {
+  return {
+    ...identityPartition === void 0 ? {} : { identity: identityPartition },
+    endpoint: mediaEndpointDiscriminator(endpoint)
+  };
+}
 function assetListDiscriminator(params) {
   return {
     folderId: params?.folderId,
@@ -12,9 +24,19 @@ function folderListDiscriminator(parentId) {
   return parentId === null ? "root" : parentId;
 }
 const MEDIA_QUERY_KEYS = {
-  assetsList: (params) => ["mediaAssets", "list", assetListDiscriminator(params)],
+  assetsList: (params, identityPartition, endpoint) => [
+    "mediaAssets",
+    "list",
+    assetListDiscriminator(params),
+    mediaQueryScope(identityPartition, endpoint)
+  ],
   assetDetail: (id) => ["mediaAssets", "detail", id],
-  foldersList: (parentId) => ["mediaFolders", "list", folderListDiscriminator(parentId)]
+  foldersList: (parentId, identityPartition, endpoint) => [
+    "mediaFolders",
+    "list",
+    folderListDiscriminator(parentId),
+    mediaQueryScope(identityPartition, endpoint)
+  ]
 };
 
-export { MEDIA_QUERY_KEYS, assetListDiscriminator, folderListDiscriminator };
+export { MEDIA_QUERY_KEYS, assetListDiscriminator, folderListDiscriminator, mediaEndpointDiscriminator, mediaQueryScope };

package/dist/packages/stack/src/plugins/media/api/serializers.cjs

@@ -1,14 +1,16 @@
 'use strict';
 
 function serializeAsset(asset) {
+  const { updatedAt: _updatedAt, ...value } = asset;
   return {
-    ...asset,
+    ...value,
     createdAt: asset.createdAt.toISOString()
   };
 }
 function serializeFolder(folder) {
+  const { updatedAt: _updatedAt, ...value } = folder;
   return {
-    ...folder,
+    ...value,
     createdAt: folder.createdAt.toISOString()
   };
 }

package/dist/packages/stack/src/plugins/media/api/serializers.mjs

@@ -1,12 +1,14 @@
 function serializeAsset(asset) {
+  const { updatedAt: _updatedAt, ...value } = asset;
   return {
-    ...asset,
+    ...value,
     createdAt: asset.createdAt.toISOString()
   };
 }
 function serializeFolder(folder) {
+  const { updatedAt: _updatedAt, ...value } = folder;
   return {
-    ...folder,
+    ...value,
     createdAt: folder.createdAt.toISOString()
   };
 }

package/dist/packages/stack/src/plugins/media/asset-url.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+function resolveMediaAsset(asset, apiBaseURL) {
+  if (!apiBaseURL) return asset;
+  try {
+    const url = new URL(asset.url, apiBaseURL).href;
+    return url === asset.url ? asset : { ...asset, url };
+  } catch {
+    return asset;
+  }
+}
+
+exports.resolveMediaAsset = resolveMediaAsset;

package/dist/packages/stack/src/plugins/media/asset-url.mjs

@@ -0,0 +1,11 @@
+function resolveMediaAsset(asset, apiBaseURL) {
+  if (!apiBaseURL) return asset;
+  try {
+    const url = new URL(asset.url, apiBaseURL).href;
+    return url === asset.url ? asset : { ...asset, url };
+  } catch {
+    return asset;
+  }
+}
+
+export { resolveMediaAsset };

package/dist/packages/stack/src/plugins/media/client/components/media-picker/asset-card.cjs

@@ -7,6 +7,7 @@ const LucideIcons = require('lucide-react');
 const utils = require('./utils.cjs');
 const context = require('@btst/stack/context');
 const assetPreviewButton = require('./asset-preview-button.cjs');
+const plugins_media_permissions = require('../../../../../../../../plugins/media/permissions.cjs');
 
 function AssetCard({
   asset,
@@ -17,15 +18,15 @@ function AssetCard({
   const t = context.useTranslate();
   const notify = context.useNotify();
   const { mutateAsync: deleteAsset } = useMedia.useDeleteAsset();
-  const { can: canDelete } = context.useCan({
-    resource: "media:asset",
-    action: "delete",
-    params: { id: asset.id }
-  });
   const { api, router } = context.useStack();
   const ImageComponent = router?.Image;
   const imageAsset = utils.isImage(asset.mimeType);
   const selectable = typeof onToggle === "function";
+  const facts = {
+    assetId: asset.id,
+    ...asset.folderId ? { folderId: asset.folderId } : {},
+    mimeType: asset.mimeType
+  };
   const copyUrl = async () => {
     let fullUrl;
     try {
@@ -41,7 +42,6 @@ function AssetCard({
     }
   };
   const handleDelete = async () => {
-    if (!canDelete) return;
     if (onDelete) {
       await onDelete(asset.id);
       return;
@@ -61,7 +61,7 @@ function AssetCard({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: plugins_media_permissions.mediaPermissions.asset.read(facts), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: selectable ? "button" : void 0,
@@ -131,7 +131,7 @@ function AssetCard({
               className: "rounded bg-background/80 p-0.5 shadow hover:bg-background"
             }
           ) : null,
-          canDelete ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: plugins_media_permissions.mediaPermissions.asset.delete(facts), children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -143,11 +143,11 @@ function AssetCard({
               className: "rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive",
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "size-3" })
             }
-          ) : null
+          ) })
         ] })
       ]
     }
-  );
+  ) });
 }
 
 exports.AssetCard = AssetCard;

package/dist/packages/stack/src/plugins/media/client/components/media-picker/asset-card.mjs

@@ -1,10 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useDeleteAsset } from '../../hooks/use-media.mjs';
 import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
 import { File, Check, Copy, Trash2 } from 'lucide-react';
 import { isImage, formatBytes } from './utils.mjs';
-import { useTranslate, useNotify, useCan, useStack } from '@btst/stack/context';
+import { useTranslate, useNotify, useStack, PermissionAccess } from '@btst/stack/context';
 import { AssetPreviewButton } from './asset-preview-button.mjs';
+import { mediaPermissions } from '../../../../../../../../plugins/media/permissions.mjs';
 
 function AssetCard({
   asset,
@@ -15,15 +16,15 @@ function AssetCard({
   const t = useTranslate();
   const notify = useNotify();
   const { mutateAsync: deleteAsset } = useDeleteAsset();
-  const { can: canDelete } = useCan({
-    resource: "media:asset",
-    action: "delete",
-    params: { id: asset.id }
-  });
   const { api, router } = useStack();
   const ImageComponent = router?.Image;
   const imageAsset = isImage(asset.mimeType);
   const selectable = typeof onToggle === "function";
+  const facts = {
+    assetId: asset.id,
+    ...asset.folderId ? { folderId: asset.folderId } : {},
+    mimeType: asset.mimeType
+  };
   const copyUrl = async () => {
     let fullUrl;
     try {
@@ -39,7 +40,6 @@ function AssetCard({
     }
   };
   const handleDelete = async () => {
-    if (!canDelete) return;
     if (onDelete) {
       await onDelete(asset.id);
       return;
@@ -59,7 +59,7 @@ function AssetCard({
       }
     }
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(PermissionAccess, { permission: mediaPermissions.asset.read(facts), children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: selectable ? "button" : void 0,
@@ -129,7 +129,7 @@ function AssetCard({
               className: "rounded bg-background/80 p-0.5 shadow hover:bg-background"
             }
           ) : null,
-          canDelete ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(PermissionAccess, { permission: mediaPermissions.asset.delete(facts), children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -141,11 +141,11 @@ function AssetCard({
               className: "rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive",
               children: /* @__PURE__ */ jsx(Trash2, { className: "size-3" })
             }
-          ) : null
+          ) })
         ] })
       ]
     }
-  );
+  ) });
 }
 
 export { AssetCard };

package/dist/packages/stack/src/plugins/media/client/components/media-picker/folder-tree.cjs

@@ -7,6 +7,7 @@ const LucideIcons = require('lucide-react');
 const input = require('../../../../../../../ui/src/components/input.cjs');
 const utils = require('../../../../../../../ui/src/lib/utils.cjs');
 const context = require('@btst/stack/context');
+const plugins_media_permissions = require('../../../../../../../../plugins/media/permissions.cjs');
 
 function FolderTree({
   selectedId,
@@ -14,19 +15,27 @@ function FolderTree({
 }) {
   const t = context.useTranslate();
   const notify = context.useNotify();
-  const { data: rootFoldersRaw = [] } = useMedia.useFolders(null);
-  const rootFolders = rootFoldersRaw;
+  const { data: foldersRaw = [] } = useMedia.useFolders();
+  const folders = foldersRaw;
+  const { foldersById, foldersByParent } = React.useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    const byParent = /* @__PURE__ */ new Map();
+    for (const folder of folders) {
+      byId.set(folder.id, folder);
+      const parentId = folder.parentId ?? null;
+      const siblings = byParent.get(parentId) ?? [];
+      siblings.push(folder);
+      byParent.set(parentId, siblings);
+    }
+    return { foldersById: byId, foldersByParent: byParent };
+  }, [folders]);
+  const rootFolders = foldersByParent.get(null) ?? [];
+  const selectedFolder = selectedId ? foldersById.get(selectedId) : void 0;
   const [newFolderName, setNewFolderName] = React.useState("");
   const [isCreating, setIsCreating] = React.useState(false);
   const { mutateAsync: deleteFolder } = useMedia.useDeleteFolder();
-  const { can: canCreateFolder } = context.useCan({
-    resource: "media:folder",
-    action: "create"
-  });
-  const { can: canDeleteFolder } = context.useCan({
-    resource: "media:folder",
-    action: "delete",
-    params: selectedId ? { id: selectedId } : void 0
+  const createPermission = plugins_media_permissions.mediaPermissions.folder.create({
+    ...selectedId ? { parentId: selectedId } : {}
   });
   const createFolderForm = useMedia.useCreateFolderForm({
     parentId: selectedId ?? void 0,
@@ -36,13 +45,12 @@ function FolderTree({
     }
   });
   const handleCreateFolder = async () => {
-    if (!canCreateFolder) return;
     const name = newFolderName.trim();
     if (!name) return;
     await createFolderForm.submit({ name });
   };
   const handleDeleteFolder = async () => {
-    if (!selectedId || !canDeleteFolder) return;
+    if (!selectedId) return;
     if (!confirm(
       t(
         "media.folders.deleteConfirm",
@@ -63,7 +71,7 @@ function FolderTree({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: t("media.folders.title", "Folders") }),
-      canCreateFolder ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: createPermission, children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -72,9 +80,9 @@ function FolderTree({
           className: "rounded p-0.5 hover:bg-muted",
           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FolderPlus, { className: "size-3.5 text-muted-foreground" })
         }
-      ) : null
+      ) })
     ] }),
-    isCreating && canCreateFolder && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 px-2 pb-1", children: [
+    isCreating && /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: createPermission, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 px-2 pb-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         input.Input,
         {
@@ -104,7 +112,7 @@ function FolderTree({
         }
       ),
       createFolderForm.fieldErrors.name ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: String(createFolderForm.fieldErrors.name) }) : null
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -126,34 +134,45 @@ function FolderTree({
         FolderTreeItem,
         {
           folder,
+          foldersByParent,
           selectedId,
           onSelect
         },
         folder.id
       ))
     ] }),
-    selectedId && canDeleteFolder && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-2 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    selectedId && selectedFolder && /* @__PURE__ */ jsxRuntime.jsx(
+      context.PermissionAccess,
       {
-        type: "button",
-        onClick: () => void handleDeleteFolder(),
-        className: "flex items-center gap-1 text-xs text-destructive hover:underline",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "size-3" }),
-          t("media.folders.delete", "Delete folder")
-        ]
+        permission: plugins_media_permissions.mediaPermissions.folder.delete({
+          folderId: selectedId,
+          ...selectedFolder.parentId ? { parentId: selectedFolder.parentId } : {}
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-2 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleDeleteFolder(),
+            className: "flex items-center gap-1 text-xs text-destructive hover:underline",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "size-3" }),
+              t("media.folders.delete", "Delete folder")
+            ]
+          }
+        ) })
       }
-    ) })
+    )
   ] });
 }
 function FolderTreeItem({
   folder,
+  foldersByParent,
   selectedId,
   onSelect,
   depth = 0
 }) {
   const [expanded, setExpanded] = React.useState(false);
-  const { data: children = [] } = useMedia.useFolders(folder.id);
+  const children = foldersByParent.get(folder.id) ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -187,6 +206,7 @@ function FolderTreeItem({
       FolderTreeItem,
       {
         folder: child,
+        foldersByParent,
         selectedId,
         onSelect,
         depth: depth + 1

package/dist/packages/stack/src/plugins/media/client/components/media-picker/folder-tree.mjs

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useFolders, useDeleteFolder, useCreateFolderForm } from '../../hooks/use-media.mjs';
 import { FolderPlus, Check, Folder, Trash2, ChevronRight, FolderOpen } from 'lucide-react';
 import { Input } from '../../../../../../../ui/src/components/input.mjs';
 import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
-import { useTranslate, useNotify, useCan } from '@btst/stack/context';
+import { useTranslate, useNotify, PermissionAccess } from '@btst/stack/context';
+import { mediaPermissions } from '../../../../../../../../plugins/media/permissions.mjs';
 
 function FolderTree({
   selectedId,
@@ -12,19 +13,27 @@ function FolderTree({
 }) {
   const t = useTranslate();
   const notify = useNotify();
-  const { data: rootFoldersRaw = [] } = useFolders(null);
-  const rootFolders = rootFoldersRaw;
+  const { data: foldersRaw = [] } = useFolders();
+  const folders = foldersRaw;
+  const { foldersById, foldersByParent } = useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    const byParent = /* @__PURE__ */ new Map();
+    for (const folder of folders) {
+      byId.set(folder.id, folder);
+      const parentId = folder.parentId ?? null;
+      const siblings = byParent.get(parentId) ?? [];
+      siblings.push(folder);
+      byParent.set(parentId, siblings);
+    }
+    return { foldersById: byId, foldersByParent: byParent };
+  }, [folders]);
+  const rootFolders = foldersByParent.get(null) ?? [];
+  const selectedFolder = selectedId ? foldersById.get(selectedId) : void 0;
   const [newFolderName, setNewFolderName] = useState("");
   const [isCreating, setIsCreating] = useState(false);
   const { mutateAsync: deleteFolder } = useDeleteFolder();
-  const { can: canCreateFolder } = useCan({
-    resource: "media:folder",
-    action: "create"
-  });
-  const { can: canDeleteFolder } = useCan({
-    resource: "media:folder",
-    action: "delete",
-    params: selectedId ? { id: selectedId } : void 0
+  const createPermission = mediaPermissions.folder.create({
+    ...selectedId ? { parentId: selectedId } : {}
   });
   const createFolderForm = useCreateFolderForm({
     parentId: selectedId ?? void 0,
@@ -34,13 +43,12 @@ function FolderTree({
     }
   });
   const handleCreateFolder = async () => {
-    if (!canCreateFolder) return;
     const name = newFolderName.trim();
     if (!name) return;
     await createFolderForm.submit({ name });
   };
   const handleDeleteFolder = async () => {
-    if (!selectedId || !canDeleteFolder) return;
+    if (!selectedId) return;
     if (!confirm(
       t(
         "media.folders.deleteConfirm",
@@ -61,7 +69,7 @@ function FolderTree({
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2", children: [
       /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: t("media.folders.title", "Folders") }),
-      canCreateFolder ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(PermissionAccess, { permission: createPermission, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -70,9 +78,9 @@ function FolderTree({
           className: "rounded p-0.5 hover:bg-muted",
           children: /* @__PURE__ */ jsx(FolderPlus, { className: "size-3.5 text-muted-foreground" })
         }
-      ) : null
+      ) })
     ] }),
-    isCreating && canCreateFolder && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 px-2 pb-1", children: [
+    isCreating && /* @__PURE__ */ jsx(PermissionAccess, { permission: createPermission, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 px-2 pb-1", children: [
       /* @__PURE__ */ jsx(
         Input,
         {
@@ -102,7 +110,7 @@ function FolderTree({
         }
       ),
       createFolderForm.fieldErrors.name ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: String(createFolderForm.fieldErrors.name) }) : null
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -124,34 +132,45 @@ function FolderTree({
         FolderTreeItem,
         {
           folder,
+          foldersByParent,
           selectedId,
           onSelect
         },
         folder.id
       ))
     ] }),
-    selectedId && canDeleteFolder && /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-1", children: /* @__PURE__ */ jsxs(
-      "button",
+    selectedId && selectedFolder && /* @__PURE__ */ jsx(
+      PermissionAccess,
       {
-        type: "button",
-        onClick: () => void handleDeleteFolder(),
-        className: "flex items-center gap-1 text-xs text-destructive hover:underline",
-        children: [
-          /* @__PURE__ */ jsx(Trash2, { className: "size-3" }),
-          t("media.folders.delete", "Delete folder")
-        ]
+        permission: mediaPermissions.folder.delete({
+          folderId: selectedId,
+          ...selectedFolder.parentId ? { parentId: selectedFolder.parentId } : {}
+        }),
+        children: /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-1", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleDeleteFolder(),
+            className: "flex items-center gap-1 text-xs text-destructive hover:underline",
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "size-3" }),
+              t("media.folders.delete", "Delete folder")
+            ]
+          }
+        ) })
       }
-    ) })
+    )
   ] });
 }
 function FolderTreeItem({
   folder,
+  foldersByParent,
   selectedId,
   onSelect,
   depth = 0
 }) {
   const [expanded, setExpanded] = useState(false);
-  const { data: children = [] } = useFolders(folder.id);
+  const children = foldersByParent.get(folder.id) ?? [];
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -185,6 +204,7 @@ function FolderTreeItem({
       FolderTreeItem,
       {
         folder: child,
+        foldersByParent,
         selectedId,
         onSelect,
         depth: depth + 1