@btst/stack 2.8.1 → 2.9.0

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

@@ -0,0 +1,214 @@
+"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 { uploadAsset } from '../upload.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 useFolders(parentId) {
+  const { client, headers } = useMediaApiClient();
+  const queries = createMediaQueryKeys(client, headers);
+  const { queryClient } = useMediaConfig();
+  return useQuery(
+    {
+      ...queries.mediaFolders.list(parentId)
+    },
+    queryClient
+  );
+}
+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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+
+export { useAssets, useCreateFolder, useDeleteAsset, useDeleteFolder, useFolders, useRegisterAsset, useUploadAsset };

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

@@ -0,0 +1,94 @@
+'use strict';
+
+const client = require('@btst/stack/plugins/client');
+const yar = require('@btst/yar');
+const libraryPage = require('./components/pages/library-page.cjs');
+const plugins_media_queryKeys = require('../../../../../../plugins/media/query-keys.cjs');
+
+const mediaClientPlugin = (config) => client.defineClientPlugin({
+  name: "media",
+  routes: () => ({
+    library: yar.createRoute("/media", () => {
+      const CustomLibrary = config.pageComponents?.library;
+      return {
+        PageComponent: CustomLibrary ?? libraryPage.LibraryPageComponent,
+        loader: createMediaLibraryLoader(config),
+        meta: createMediaLibraryMeta(config)
+      };
+    })
+  })
+});
+function createMediaLibraryLoader(config) {
+  return async () => {
+    if (typeof window === "undefined") {
+      const { queryClient, apiBasePath, apiBaseURL, hooks, headers } = config;
+      const context = {
+        path: "/media",
+        isSSR: true,
+        apiBaseURL,
+        apiBasePath,
+        headers
+      };
+      try {
+        if (hooks?.beforeLoadLibrary) {
+          await hooks.beforeLoadLibrary(context);
+        }
+        const client$1 = client.createApiClient({
+          baseURL: apiBaseURL,
+          basePath: apiBasePath
+        });
+        const queries = plugins_media_queryKeys.createMediaQueryKeys(client$1, headers);
+        await queryClient.prefetchInfiniteQuery({
+          ...queries.mediaAssets.list({ limit: 40 }),
+          initialPageParam: 0
+        });
+        await queryClient.prefetchQuery(queries.mediaFolders.list(null));
+        if (hooks?.afterLoadLibrary) {
+          await hooks.afterLoadLibrary(context);
+        }
+        const queryState = queryClient.getQueryState(
+          queries.mediaAssets.list({ limit: 40 }).queryKey
+        );
+        if (queryState?.error && hooks?.onLoadError) {
+          const error = queryState.error instanceof Error ? queryState.error : new Error(String(queryState.error));
+          await hooks.onLoadError(error, context);
+        }
+      } catch (error) {
+        if (client.isConnectionError(error)) {
+          console.warn(
+            "[btst/media] route.loader() failed \u2014 no server running at build time. The media library does not support SSG."
+          );
+        }
+        if (hooks?.onLoadError) {
+          await hooks.onLoadError(error, context);
+        }
+      }
+    }
+  };
+}
+function createMediaLibraryMeta(config) {
+  return () => {
+    const { siteBaseURL, siteBasePath } = config;
+    const fullUrl = `${siteBaseURL}${siteBasePath}/media`;
+    const title = "Media Library";
+    return [
+      { title },
+      { name: "title", content: title },
+      { name: "description", content: "Manage your media assets" },
+      { name: "robots", content: "noindex, nofollow" },
+      // Open Graph
+      { property: "og:type", content: "website" },
+      { property: "og:title", content: title },
+      {
+        property: "og:description",
+        content: "Manage your media assets"
+      },
+      { property: "og:url", content: fullUrl },
+      // Twitter
+      { name: "twitter:card", content: "summary" },
+      { name: "twitter:title", content: title }
+    ];
+  };
+}
+
+exports.mediaClientPlugin = mediaClientPlugin;

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

@@ -0,0 +1,92 @@
+import { defineClientPlugin, createApiClient, isConnectionError } from '@btst/stack/plugins/client';
+import { createRoute } 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,
+        loader: createMediaLibraryLoader(config),
+        meta: createMediaLibraryMeta(config)
+      };
+    })
+  })
+});
+function createMediaLibraryLoader(config) {
+  return async () => {
+    if (typeof window === "undefined") {
+      const { queryClient, apiBasePath, apiBaseURL, hooks, headers } = config;
+      const context = {
+        path: "/media",
+        isSSR: true,
+        apiBaseURL,
+        apiBasePath,
+        headers
+      };
+      try {
+        if (hooks?.beforeLoadLibrary) {
+          await hooks.beforeLoadLibrary(context);
+        }
+        const client = createApiClient({
+          baseURL: apiBaseURL,
+          basePath: apiBasePath
+        });
+        const queries = createMediaQueryKeys(client, headers);
+        await queryClient.prefetchInfiniteQuery({
+          ...queries.mediaAssets.list({ limit: 40 }),
+          initialPageParam: 0
+        });
+        await queryClient.prefetchQuery(queries.mediaFolders.list(null));
+        if (hooks?.afterLoadLibrary) {
+          await hooks.afterLoadLibrary(context);
+        }
+        const queryState = queryClient.getQueryState(
+          queries.mediaAssets.list({ limit: 40 }).queryKey
+        );
+        if (queryState?.error && hooks?.onLoadError) {
+          const error = queryState.error instanceof Error ? queryState.error : new Error(String(queryState.error));
+          await hooks.onLoadError(error, context);
+        }
+      } catch (error) {
+        if (isConnectionError(error)) {
+          console.warn(
+            "[btst/media] route.loader() failed \u2014 no server running at build time. The media library does not support SSG."
+          );
+        }
+        if (hooks?.onLoadError) {
+          await hooks.onLoadError(error, context);
+        }
+      }
+    }
+  };
+}
+function createMediaLibraryMeta(config) {
+  return () => {
+    const { siteBaseURL, siteBasePath } = config;
+    const fullUrl = `${siteBaseURL}${siteBasePath}/media`;
+    const title = "Media Library";
+    return [
+      { title },
+      { name: "title", content: title },
+      { name: "description", content: "Manage your media assets" },
+      { name: "robots", content: "noindex, nofollow" },
+      // Open Graph
+      { property: "og:type", content: "website" },
+      { property: "og:title", content: title },
+      {
+        property: "og:description",
+        content: "Manage your media assets"
+      },
+      { property: "og:url", content: fullUrl },
+      // Twitter
+      { name: "twitter:card", content: "summary" },
+      { name: "twitter:title", content: title }
+    ];
+  };
+}
+
+export { mediaClientPlugin };

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

@@ -0,0 +1,121 @@
+"use client";
+'use strict';
+
+const imageCompression = require('./utils/image-compression.cjs');
+
+const DEFAULT_IMAGE_COMPRESSION = {
+  maxWidth: 2048,
+  maxHeight: 2048,
+  quality: 0.85
+};
+async function uploadAsset(config, input) {
+  const {
+    apiBaseURL,
+    apiBasePath,
+    headers,
+    uploadMode = "direct",
+    imageCompression: imageCompression$1
+  } = config;
+  const { file, folderId } = input;
+  const processedFile = imageCompression$1 === false ? file : await imageCompression.compressImage(
+    file,
+    imageCompression$1 ?? DEFAULT_IMAGE_COMPRESSION
+  );
+  const base = `${apiBaseURL}${apiBasePath}`;
+  const headersObj = new Headers(headers);
+  if (uploadMode === "direct") {
+    const formData = new FormData();
+    formData.append("file", processedFile);
+    if (folderId) formData.append("folderId", folderId);
+    const res = await fetch(`${base}/media/upload`, {
+      method: "POST",
+      headers: headersObj,
+      body: formData
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ message: res.statusText }));
+      throw new Error(err.message ?? "Upload failed");
+    }
+    return res.json();
+  }
+  if (uploadMode === "s3") {
+    const tokenRes = await fetch(`${base}/media/upload/token`, {
+      method: "POST",
+      headers: {
+        ...Object.fromEntries(headersObj.entries()),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filename: processedFile.name,
+        mimeType: processedFile.type,
+        size: processedFile.size,
+        folderId
+      })
+    });
+    if (!tokenRes.ok) {
+      const err = await tokenRes.json().catch(() => ({ message: tokenRes.statusText }));
+      throw new Error(err.message ?? "Failed to get upload token");
+    }
+    const token = await tokenRes.json();
+    const putRes = await fetch(token.payload.uploadUrl, {
+      method: "PUT",
+      headers: token.payload.headers,
+      body: processedFile
+    });
+    if (!putRes.ok) throw new Error("Failed to upload to S3");
+    const assetRes = await fetch(`${base}/media/assets`, {
+      method: "POST",
+      headers: {
+        ...Object.fromEntries(headersObj.entries()),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filename: processedFile.name,
+        originalName: file.name,
+        mimeType: processedFile.type,
+        size: processedFile.size,
+        url: token.payload.publicUrl,
+        folderId
+      })
+    });
+    if (!assetRes.ok) {
+      const err = await assetRes.json().catch(() => ({ message: assetRes.statusText }));
+      throw new Error(err.message ?? "Failed to register asset");
+    }
+    return assetRes.json();
+  }
+  if (uploadMode === "vercel-blob") {
+    const { upload } = await import('@vercel/blob/client');
+    const blob = await upload(processedFile.name, processedFile, {
+      access: "public",
+      handleUploadUrl: `${base}/media/upload/vercel-blob`,
+      clientPayload: JSON.stringify({
+        mimeType: processedFile.type,
+        size: processedFile.size
+      })
+    });
+    const assetRes = await fetch(`${base}/media/assets`, {
+      method: "POST",
+      headers: {
+        ...Object.fromEntries(headersObj.entries()),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filename: processedFile.name,
+        originalName: file.name,
+        mimeType: processedFile.type,
+        size: processedFile.size,
+        url: blob.url,
+        folderId
+      })
+    });
+    if (!assetRes.ok) {
+      const err = await assetRes.json().catch(() => ({ message: assetRes.statusText }));
+      throw new Error(err.message ?? "Failed to register asset");
+    }
+    return assetRes.json();
+  }
+  throw new Error(`Unknown uploadMode: ${uploadMode}`);
+}
+
+exports.uploadAsset = uploadAsset;

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

@@ -0,0 +1,119 @@
+"use client";
+import { compressImage } from './utils/image-compression.mjs';
+
+const DEFAULT_IMAGE_COMPRESSION = {
+  maxWidth: 2048,
+  maxHeight: 2048,
+  quality: 0.85
+};
+async function uploadAsset(config, input) {
+  const {
+    apiBaseURL,
+    apiBasePath,
+    headers,
+    uploadMode = "direct",
+    imageCompression
+  } = config;
+  const { file, folderId } = input;
+  const processedFile = imageCompression === false ? file : await compressImage(
+    file,
+    imageCompression ?? DEFAULT_IMAGE_COMPRESSION
+  );
+  const base = `${apiBaseURL}${apiBasePath}`;
+  const headersObj = new Headers(headers);
+  if (uploadMode === "direct") {
+    const formData = new FormData();
+    formData.append("file", processedFile);
+    if (folderId) formData.append("folderId", folderId);
+    const res = await fetch(`${base}/media/upload`, {
+      method: "POST",
+      headers: headersObj,
+      body: formData
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ message: res.statusText }));
+      throw new Error(err.message ?? "Upload failed");
+    }
+    return res.json();
+  }
+  if (uploadMode === "s3") {
+    const tokenRes = await fetch(`${base}/media/upload/token`, {
+      method: "POST",
+      headers: {
+        ...Object.fromEntries(headersObj.entries()),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filename: processedFile.name,
+        mimeType: processedFile.type,
+        size: processedFile.size,
+        folderId
+      })
+    });
+    if (!tokenRes.ok) {
+      const err = await tokenRes.json().catch(() => ({ message: tokenRes.statusText }));
+      throw new Error(err.message ?? "Failed to get upload token");
+    }
+    const token = await tokenRes.json();
+    const putRes = await fetch(token.payload.uploadUrl, {
+      method: "PUT",
+      headers: token.payload.headers,
+      body: processedFile
+    });
+    if (!putRes.ok) throw new Error("Failed to upload to S3");
+    const assetRes = await fetch(`${base}/media/assets`, {
+      method: "POST",
+      headers: {
+        ...Object.fromEntries(headersObj.entries()),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filename: processedFile.name,
+        originalName: file.name,
+        mimeType: processedFile.type,
+        size: processedFile.size,
+        url: token.payload.publicUrl,
+        folderId
+      })
+    });
+    if (!assetRes.ok) {
+      const err = await assetRes.json().catch(() => ({ message: assetRes.statusText }));
+      throw new Error(err.message ?? "Failed to register asset");
+    }
+    return assetRes.json();
+  }
+  if (uploadMode === "vercel-blob") {
+    const { upload } = await import('@vercel/blob/client');
+    const blob = await upload(processedFile.name, processedFile, {
+      access: "public",
+      handleUploadUrl: `${base}/media/upload/vercel-blob`,
+      clientPayload: JSON.stringify({
+        mimeType: processedFile.type,
+        size: processedFile.size
+      })
+    });
+    const assetRes = await fetch(`${base}/media/assets`, {
+      method: "POST",
+      headers: {
+        ...Object.fromEntries(headersObj.entries()),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filename: processedFile.name,
+        originalName: file.name,
+        mimeType: processedFile.type,
+        size: processedFile.size,
+        url: blob.url,
+        folderId
+      })
+    });
+    if (!assetRes.ok) {
+      const err = await assetRes.json().catch(() => ({ message: assetRes.statusText }));
+      throw new Error(err.message ?? "Failed to register asset");
+    }
+    return assetRes.json();
+  }
+  throw new Error(`Unknown uploadMode: ${uploadMode}`);
+}
+
+export { uploadAsset };

package/dist/packages/stack/src/plugins/media/client/utils/image-compression.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error(`Failed to load image: ${file.name}`));
+    };
+    img.src = url;
+  });
+}
+const SKIP_TYPES = /* @__PURE__ */ new Set(["image/svg+xml", "image/gif"]);
+async function compressImage(file, options = {}) {
+  if (!file.type.startsWith("image/") || SKIP_TYPES.has(file.type)) {
+    return file;
+  }
+  if (typeof document === "undefined") return file;
+  const {
+    maxWidth = 2048,
+    maxHeight = 2048,
+    quality = 0.85,
+    outputFormat
+  } = options;
+  const img = await loadImage(file);
+  let { width, height } = img;
+  const needsResize = width > maxWidth || height > maxHeight;
+  const needsFormatChange = outputFormat !== void 0 && outputFormat !== file.type;
+  if (!needsResize && !needsFormatChange) return file;
+  if (needsResize) {
+    const ratio = Math.min(maxWidth / width, maxHeight / height);
+    width = Math.round(width * ratio);
+    height = Math.round(height * ratio);
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return file;
+  ctx.drawImage(img, 0, 0, width, height);
+  const mimeType = outputFormat ?? file.type;
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("canvas.toBlob returned null"));
+          return;
+        }
+        let name = file.name;
+        if (outputFormat && outputFormat !== file.type) {
+          const ext = outputFormat.split("/")[1] ?? "jpg";
+          name = name.replace(/\.[^.]+$/, `.${ext}`);
+        }
+        resolve(new File([blob], name, { type: mimeType }));
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+exports.compressImage = compressImage;