@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/media/client/hooks/use-media.cjs

@@ -3,220 +3,104 @@
 
 const reactQuery = require('@tanstack/react-query');
 const context = require('@btst/stack/context');
-const client = require('@btst/stack/plugins/client');
-const plugins_media_queryKeys = require('../../../../../../../plugins/media/query-keys.cjs');
 const upload = require('../upload.cjs');
+const mediaResource = require('./media-resource.cjs');
 
-function useMediaConfig() {
-  return context.usePluginOverrides("media");
-}
-function useMediaApiClient() {
-  const { apiBaseURL, apiBasePath, headers } = useMediaConfig();
-  const client$1 = client.createApiClient({
-    baseURL: apiBaseURL,
-    basePath: apiBasePath
-  });
-  return { client: client$1, headers };
-}
-function useAssets(params) {
-  const { client, headers } = useMediaApiClient();
-  const queries = plugins_media_queryKeys.createMediaQueryKeys(client, headers);
-  const { queryClient } = useMediaConfig();
-  params?.limit ?? 20;
-  return reactQuery.useInfiniteQuery(
-    {
-      ...queries.mediaAssets.list(params),
-      initialPageParam: 0,
-      refetchOnMount: "always",
-      getNextPageParam: (lastPage, _allPages, lastPageParam) => {
-        const offset = (lastPage.offset ?? 0) + lastPage.items.length;
-        return offset < lastPage.total ? offset : void 0;
-      }
-    },
-    queryClient
-  );
+function useAssets(params = {}) {
+  return mediaResource.media.mediaAssets.list.useInfinite([params]);
 }
 function useFolders(parentId) {
-  const { client, headers } = useMediaApiClient();
-  const queries = plugins_media_queryKeys.createMediaQueryKeys(client, headers);
-  const { queryClient } = useMediaConfig();
-  return reactQuery.useQuery(
-    {
-      ...queries.mediaFolders.list(parentId)
-    },
-    queryClient
-  );
+  return mediaResource.media.mediaFolders.list.use([parentId]);
 }
 function useUploadAsset() {
   const {
-    apiBaseURL,
-    apiBasePath,
     headers,
     uploadMode = "direct",
-    imageCompression,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = reactQuery.useQueryClient(qc);
-  return reactQuery.useMutation(
-    {
-      mutationFn: async ({
-        file,
-        folderId
-      }) => upload.uploadAsset(
-        {
-          apiBaseURL,
-          apiBasePath,
-          headers,
-          uploadMode,
-          imageCompression
-        },
-        { file, folderId }
-      ),
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaAssets"] });
-      }
-    },
-    qc
-  );
+    imageCompression
+  } = context.usePluginOverrides("media");
+  const { api } = context.useStack();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({
+      file,
+      folderId
+    }) => upload.uploadAsset(
+      {
+        apiBaseURL: api?.baseURL ?? "",
+        apiBasePath: api?.basePath ?? "",
+        headers,
+        uploadMode,
+        imageCompression
+      },
+      { file, folderId }
+    ),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["mediaAssets", "list"],
+        // Browse unmounts while the Upload tab is active, and resource
+        // queries intentionally disable refetch-on-mount. Refresh inactive
+        // list variants so the uploaded asset is present when Browse remounts.
+        refetchType: "all"
+      });
+    }
+  });
 }
 function useRegisterAsset() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = reactQuery.useQueryClient(qc);
-  return reactQuery.useMutation(
-    {
-      mutationFn: async (input) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/assets`, {
-          method: "POST",
-          headers: {
-            ...Object.fromEntries(headersObj.entries()),
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({
-            filename: input.filename,
-            originalName: input.filename,
-            mimeType: input.mimeType ?? "application/octet-stream",
-            size: input.size ?? 0,
-            url: input.url,
-            folderId: input.folderId
-          })
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Failed to register asset");
-        }
-        return res.json();
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaAssets"] });
-      }
-    },
-    qc
-  );
+  return mediaResource.media.mediaAssets.create.use();
 }
 function useDeleteAsset() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = reactQuery.useQueryClient(qc);
-  return reactQuery.useMutation(
-    {
-      mutationFn: async (id) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/assets/${id}`, {
-          method: "DELETE",
-          headers: headersObj
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Delete failed");
-        }
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaAssets"] });
-      }
-    },
-    qc
-  );
+  return mediaResource.media.mediaAssets.delete.use();
 }
 function useCreateFolder() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = reactQuery.useQueryClient(qc);
-  return reactQuery.useMutation(
-    {
-      mutationFn: async (input) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/folders`, {
-          method: "POST",
-          headers: {
-            ...Object.fromEntries(headersObj.entries()),
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify(input)
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Failed to create folder");
-        }
-        return res.json();
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaFolders"] });
-      }
-    },
-    qc
-  );
+  return mediaResource.media.mediaFolders.create.use();
 }
 function useDeleteFolder() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = reactQuery.useQueryClient(qc);
-  return reactQuery.useMutation(
-    {
-      mutationFn: async (id) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/folders/${id}`, {
-          method: "DELETE",
-          headers: headersObj
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Failed to delete folder");
-        }
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaFolders"] });
-      }
-    },
-    qc
-  );
+  return mediaResource.media.mediaFolders.delete.use();
+}
+function filenameFromUrl(url) {
+  try {
+    const filename = new URL(url).pathname.split("/").filter(Boolean).pop();
+    return filename ? decodeURIComponent(filename) : "asset";
+  } catch {
+    return "asset";
+  }
+}
+function useRegisterAssetForm(options = {}) {
+  const t = context.useTranslate();
+  return mediaResource.media.mediaAssets.useForm({
+    action: "create",
+    defaults: { url: "" },
+    toCreateVars: (values) => ({
+      url: values.url.trim(),
+      filename: filenameFromUrl(values.url.trim()),
+      folderId: options.folderId
+    }),
+    successMessage: t("media.toasts.registerSuccess", "Asset added"),
+    errorMessage: (error) => error.message || t("media.toasts.registerError", "Failed to add asset"),
+    onSuccess: options.onSuccess
+  });
+}
+function useCreateFolderForm(options = {}) {
+  const t = context.useTranslate();
+  return mediaResource.media.mediaFolders.useForm({
+    action: "create",
+    defaults: { name: "" },
+    toCreateVars: (values) => ({
+      name: values.name.trim(),
+      parentId: options.parentId
+    }),
+    successMessage: t("media.toasts.folderCreateSuccess", "Folder created"),
+    errorMessage: (error) => error.message || t("media.toasts.folderCreateError", "Failed to create folder"),
+    onSuccess: options.onSuccess
+  });
 }
 
 exports.useAssets = useAssets;
 exports.useCreateFolder = useCreateFolder;
+exports.useCreateFolderForm = useCreateFolderForm;
 exports.useDeleteAsset = useDeleteAsset;
 exports.useDeleteFolder = useDeleteFolder;
 exports.useFolders = useFolders;
 exports.useRegisterAsset = useRegisterAsset;
+exports.useRegisterAssetForm = useRegisterAssetForm;
 exports.useUploadAsset = useUploadAsset;

package/dist/packages/stack/src/plugins/media/client/hooks/use-media.mjs

@@ -1,214 +1,96 @@
 "use client";
-import { useInfiniteQuery, useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
-import { usePluginOverrides } from '@btst/stack/context';
-import { createApiClient } from '@btst/stack/plugins/client';
-import { createMediaQueryKeys } from '../../../../../../../plugins/media/query-keys.mjs';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { usePluginOverrides, useStack, useTranslate } from '@btst/stack/context';
 import { uploadAsset } from '../upload.mjs';
+import { media } from './media-resource.mjs';
 
-function useMediaConfig() {
-  return usePluginOverrides("media");
-}
-function useMediaApiClient() {
-  const { apiBaseURL, apiBasePath, headers } = useMediaConfig();
-  const client = createApiClient({
-    baseURL: apiBaseURL,
-    basePath: apiBasePath
-  });
-  return { client, headers };
-}
-function useAssets(params) {
-  const { client, headers } = useMediaApiClient();
-  const queries = createMediaQueryKeys(client, headers);
-  const { queryClient } = useMediaConfig();
-  params?.limit ?? 20;
-  return useInfiniteQuery(
-    {
-      ...queries.mediaAssets.list(params),
-      initialPageParam: 0,
-      refetchOnMount: "always",
-      getNextPageParam: (lastPage, _allPages, lastPageParam) => {
-        const offset = (lastPage.offset ?? 0) + lastPage.items.length;
-        return offset < lastPage.total ? offset : void 0;
-      }
-    },
-    queryClient
-  );
+function useAssets(params = {}) {
+  return media.mediaAssets.list.useInfinite([params]);
 }
 function useFolders(parentId) {
-  const { client, headers } = useMediaApiClient();
-  const queries = createMediaQueryKeys(client, headers);
-  const { queryClient } = useMediaConfig();
-  return useQuery(
-    {
-      ...queries.mediaFolders.list(parentId)
-    },
-    queryClient
-  );
+  return media.mediaFolders.list.use([parentId]);
 }
 function useUploadAsset() {
   const {
-    apiBaseURL,
-    apiBasePath,
     headers,
     uploadMode = "direct",
-    imageCompression,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = useQueryClient(qc);
-  return useMutation(
-    {
-      mutationFn: async ({
-        file,
-        folderId
-      }) => uploadAsset(
-        {
-          apiBaseURL,
-          apiBasePath,
-          headers,
-          uploadMode,
-          imageCompression
-        },
-        { file, folderId }
-      ),
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaAssets"] });
-      }
-    },
-    qc
-  );
+    imageCompression
+  } = usePluginOverrides("media");
+  const { api } = useStack();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      file,
+      folderId
+    }) => uploadAsset(
+      {
+        apiBaseURL: api?.baseURL ?? "",
+        apiBasePath: api?.basePath ?? "",
+        headers,
+        uploadMode,
+        imageCompression
+      },
+      { file, folderId }
+    ),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["mediaAssets", "list"],
+        // Browse unmounts while the Upload tab is active, and resource
+        // queries intentionally disable refetch-on-mount. Refresh inactive
+        // list variants so the uploaded asset is present when Browse remounts.
+        refetchType: "all"
+      });
+    }
+  });
 }
 function useRegisterAsset() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = useQueryClient(qc);
-  return useMutation(
-    {
-      mutationFn: async (input) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/assets`, {
-          method: "POST",
-          headers: {
-            ...Object.fromEntries(headersObj.entries()),
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({
-            filename: input.filename,
-            originalName: input.filename,
-            mimeType: input.mimeType ?? "application/octet-stream",
-            size: input.size ?? 0,
-            url: input.url,
-            folderId: input.folderId
-          })
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Failed to register asset");
-        }
-        return res.json();
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaAssets"] });
-      }
-    },
-    qc
-  );
+  return media.mediaAssets.create.use();
 }
 function useDeleteAsset() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = useQueryClient(qc);
-  return useMutation(
-    {
-      mutationFn: async (id) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/assets/${id}`, {
-          method: "DELETE",
-          headers: headersObj
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Delete failed");
-        }
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaAssets"] });
-      }
-    },
-    qc
-  );
+  return media.mediaAssets.delete.use();
 }
 function useCreateFolder() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = useQueryClient(qc);
-  return useMutation(
-    {
-      mutationFn: async (input) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/folders`, {
-          method: "POST",
-          headers: {
-            ...Object.fromEntries(headersObj.entries()),
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify(input)
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Failed to create folder");
-        }
-        return res.json();
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaFolders"] });
-      }
-    },
-    qc
-  );
+  return media.mediaFolders.create.use();
 }
 function useDeleteFolder() {
-  const {
-    apiBaseURL,
-    apiBasePath,
-    headers,
-    queryClient: qc
-  } = useMediaConfig();
-  const reactQueryClient = useQueryClient(qc);
-  return useMutation(
-    {
-      mutationFn: async (id) => {
-        const base = `${apiBaseURL}${apiBasePath}`;
-        const headersObj = new Headers(headers);
-        const res = await fetch(`${base}/media/folders/${id}`, {
-          method: "DELETE",
-          headers: headersObj
-        });
-        if (!res.ok) {
-          const err = await res.json().catch(() => ({ message: res.statusText }));
-          throw new Error(err.message ?? "Failed to delete folder");
-        }
-      },
-      onSuccess: () => {
-        reactQueryClient.invalidateQueries({ queryKey: ["mediaFolders"] });
-      }
-    },
-    qc
-  );
+  return media.mediaFolders.delete.use();
+}
+function filenameFromUrl(url) {
+  try {
+    const filename = new URL(url).pathname.split("/").filter(Boolean).pop();
+    return filename ? decodeURIComponent(filename) : "asset";
+  } catch {
+    return "asset";
+  }
+}
+function useRegisterAssetForm(options = {}) {
+  const t = useTranslate();
+  return media.mediaAssets.useForm({
+    action: "create",
+    defaults: { url: "" },
+    toCreateVars: (values) => ({
+      url: values.url.trim(),
+      filename: filenameFromUrl(values.url.trim()),
+      folderId: options.folderId
+    }),
+    successMessage: t("media.toasts.registerSuccess", "Asset added"),
+    errorMessage: (error) => error.message || t("media.toasts.registerError", "Failed to add asset"),
+    onSuccess: options.onSuccess
+  });
+}
+function useCreateFolderForm(options = {}) {
+  const t = useTranslate();
+  return media.mediaFolders.useForm({
+    action: "create",
+    defaults: { name: "" },
+    toCreateVars: (values) => ({
+      name: values.name.trim(),
+      parentId: options.parentId
+    }),
+    successMessage: t("media.toasts.folderCreateSuccess", "Folder created"),
+    errorMessage: (error) => error.message || t("media.toasts.folderCreateError", "Failed to create folder"),
+    onSuccess: options.onSuccess
+  });
 }
 
-export { useAssets, useCreateFolder, useDeleteAsset, useDeleteFolder, useFolders, useRegisterAsset, useUploadAsset };
+export { useAssets, useCreateFolder, useCreateFolderForm, useDeleteAsset, useDeleteFolder, useFolders, useRegisterAsset, useRegisterAssetForm, useUploadAsset };

package/dist/packages/stack/src/plugins/media/client/plugin.cjs

@@ -7,16 +7,16 @@ const plugins_media_queryKeys = require('../../../../../../plugins/media/query-k
 
 const mediaClientPlugin = (config) => client.defineClientPlugin({
   name: "media",
-  routes: () => ({
-    library: yar.createRoute("/media", () => {
-      const CustomLibrary = config.pageComponents?.library;
-      return {
-        PageComponent: CustomLibrary ?? libraryPage.LibraryPageComponent,
+  routes: () => yar.defineRoutes(
+    {
+      library: yar.defineRoute("/media", {
+        page: libraryPage.LibraryPageComponent,
         loader: createMediaLibraryLoader(config),
         meta: createMediaLibraryMeta(config)
-      };
-    })
-  })
+      })
+    },
+    { pages: config.pageComponents }
+  )
 });
 function createMediaLibraryLoader(config) {
   return async () => {

package/dist/packages/stack/src/plugins/media/client/plugin.mjs

@@ -1,20 +1,20 @@
 import { defineClientPlugin, createApiClient, isConnectionError } from '@btst/stack/plugins/client';
-import { createRoute } from '@btst/yar';
+import { defineRoutes, defineRoute } from '@btst/yar';
 import { LibraryPageComponent } from './components/pages/library-page.mjs';
 import { createMediaQueryKeys } from '../../../../../../plugins/media/query-keys.mjs';
 
 const mediaClientPlugin = (config) => defineClientPlugin({
   name: "media",
-  routes: () => ({
-    library: createRoute("/media", () => {
-      const CustomLibrary = config.pageComponents?.library;
-      return {
-        PageComponent: CustomLibrary ?? LibraryPageComponent,
+  routes: () => defineRoutes(
+    {
+      library: defineRoute("/media", {
+        page: LibraryPageComponent,
         loader: createMediaLibraryLoader(config),
         meta: createMediaLibraryMeta(config)
-      };
-    })
-  })
+      })
+    },
+    { pages: config.pageComponents }
+  )
 });
 function createMediaLibraryLoader(config) {
   return async () => {

package/dist/packages/stack/src/plugins/media/schemas.cjs

@@ -5,10 +5,16 @@ const z = require('zod');
 const AssetListQuerySchema = z.z.object({
   folderId: z.z.string().optional(),
   mimeType: z.z.string().optional(),
-  query: z.z.string().optional(),
+  query: z.z.string().max(200).transform((value) => value.trim() || void 0).optional(),
   offset: z.z.coerce.number().int().min(0).optional(),
   limit: z.z.coerce.number().int().min(1).max(100).optional()
 });
+const ROOT_FOLDER_QUERY_VALUE = "__root__";
+const FolderListQuerySchema = z.z.object({
+  parentId: z.z.string().optional()
+}).transform(({ parentId }) => ({
+  parentId: parentId === ROOT_FOLDER_QUERY_VALUE ? null : parentId
+}));
 const createAssetSchema = z.z.object({
   filename: z.z.string().min(1),
   originalName: z.z.string().min(1),
@@ -35,6 +41,8 @@ const uploadTokenRequestSchema = z.z.object({
 });
 
 exports.AssetListQuerySchema = AssetListQuerySchema;
+exports.FolderListQuerySchema = FolderListQuerySchema;
+exports.ROOT_FOLDER_QUERY_VALUE = ROOT_FOLDER_QUERY_VALUE;
 exports.createAssetSchema = createAssetSchema;
 exports.createFolderSchema = createFolderSchema;
 exports.updateAssetSchema = updateAssetSchema;