@btst/stack 2.8.1 → 2.9.0

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

@@ -0,0 +1,17 @@
+function matchesAccept(mimeType, accept) {
+  if (!accept || accept.length === 0) return true;
+  return accept.some((a) => {
+    if (a.endsWith("/*")) return mimeType.startsWith(a.slice(0, -1));
+    return mimeType === a;
+  });
+}
+function isImage(mimeType) {
+  return mimeType.startsWith("image/");
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export { formatBytes, isImage, matchesAccept };

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.cjs

@@ -0,0 +1,35 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const LucideIcons = require('lucide-react');
+
+const LibraryPage = React.lazy(
+  () => import('./library-page.internal.cjs').then((m) => ({ default: m.LibraryPage }))
+);
+function LibraryLoading() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-96 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "size-8 animate-spin text-muted-foreground" }) });
+}
+function LibraryError({ error }) {
+  const message = error instanceof Error ? error.message : String(error);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-96 items-center justify-center p-8 text-destructive", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: message }) });
+}
+function LibraryPageComponent() {
+  context.usePluginOverrides("media");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/media",
+      PageComponent: LibraryPage,
+      ErrorComponent: LibraryError,
+      LoadingComponent: LibraryLoading,
+      NotFoundComponent: () => null,
+      onError: (error) => console.error("[btst/media] Library error:", error)
+    }
+  );
+}
+
+exports.LibraryPageComponent = LibraryPageComponent;

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.internal.cjs

@@ -0,0 +1,125 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useMedia = require('../../hooks/use-media.cjs');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const LucideIcons = require('lucide-react');
+const utils = require('../../../../../../../ui/src/lib/utils.cjs');
+const sonner = require('sonner');
+const context = require('@btst/stack/context');
+const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
+const browseTab = require('../media-picker/browse-tab.cjs');
+const folderTree = require('../media-picker/folder-tree.cjs');
+
+function LibraryPage() {
+  const overrides = context.usePluginOverrides("media", {});
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "library",
+    context: {
+      path: "/media",
+      isSSR: typeof window === "undefined"
+    },
+    overrides,
+    beforeRenderHook: (overrides2, context) => {
+      if (overrides2.onBeforeLibraryPageRendered) {
+        return overrides2.onBeforeLibraryPageRendered(context);
+      }
+      return true;
+    }
+  });
+  const [selectedFolder, setSelectedFolder] = React.useState(null);
+  const [dragging, setDragging] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+  const { mutateAsync: uploadAsset, isPending: isUploading } = useMedia.useUploadAsset();
+  const { mutateAsync: deleteAsset } = useMedia.useDeleteAsset();
+  const { apiBaseURL = "" } = overrides;
+  const handleUpload = React.useCallback(
+    async (files) => {
+      const arr = Array.from(files);
+      for (const file of arr) {
+        try {
+          await uploadAsset({ file, folderId: selectedFolder ?? void 0 });
+          sonner.toast.success(`Uploaded ${file.name}`);
+        } catch (err) {
+          sonner.toast.error(err instanceof Error ? err.message : "Upload failed");
+        }
+      }
+    },
+    [selectedFolder, uploadAsset]
+  );
+  const handleDelete = async (id) => {
+    if (!confirm("Delete this asset?")) return;
+    try {
+      await deleteAsset(id);
+      sonner.toast.success("Deleted");
+    } catch (err) {
+      sonner.toast.error(err instanceof Error ? err.message : "Delete failed");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[calc(100dvh-4rem)] flex-col overflow-hidden md:flex-row", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 shrink-0 overflow-hidden border-b bg-muted/20 md:h-full md:max-h-none md:w-52 md:border-b-0 md:border-r", children: /* @__PURE__ */ jsxRuntime.jsx(folderTree.FolderTree, { selectedId: selectedFolder, onSelect: setSelectedFolder }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: utils.cn(
+          "relative flex flex-1 flex-col overflow-hidden border-t md:border-t-0",
+          dragging && "ring-2 ring-inset ring-ring"
+        ),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragging(false);
+          void handleUpload(e.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                size: "sm",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: isUploading,
+                className: "w-full sm:w-auto",
+                children: [
+                  isUploading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-2 size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-2 size-3.5" }),
+                  "Upload"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                className: "hidden",
+                onChange: (e) => e.target.files && handleUpload(e.target.files)
+              }
+            )
+          ] }),
+          dragging && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-2 border-dashed border-ring p-8 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mx-auto mb-2 size-10 text-ring" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Drop files to upload" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            browseTab.BrowseTab,
+            {
+              folderId: selectedFolder,
+              onDelete: handleDelete,
+              apiBaseURL,
+              emptyMessage: "No files yet. Drag & drop or click Upload."
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.LibraryPage = LibraryPage;

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.internal.mjs

@@ -0,0 +1,123 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import { useUploadAsset, useDeleteAsset } from '../../hooks/use-media.mjs';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Loader2, Upload } from 'lucide-react';
+import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
+import { toast } from 'sonner';
+import { usePluginOverrides } from '@btst/stack/context';
+import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
+import { BrowseTab } from '../media-picker/browse-tab.mjs';
+import { FolderTree } from '../media-picker/folder-tree.mjs';
+
+function LibraryPage() {
+  const overrides = usePluginOverrides("media", {});
+  useRouteLifecycle({
+    routeName: "library",
+    context: {
+      path: "/media",
+      isSSR: typeof window === "undefined"
+    },
+    overrides,
+    beforeRenderHook: (overrides2, context) => {
+      if (overrides2.onBeforeLibraryPageRendered) {
+        return overrides2.onBeforeLibraryPageRendered(context);
+      }
+      return true;
+    }
+  });
+  const [selectedFolder, setSelectedFolder] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const fileInputRef = useRef(null);
+  const { mutateAsync: uploadAsset, isPending: isUploading } = useUploadAsset();
+  const { mutateAsync: deleteAsset } = useDeleteAsset();
+  const { apiBaseURL = "" } = overrides;
+  const handleUpload = useCallback(
+    async (files) => {
+      const arr = Array.from(files);
+      for (const file of arr) {
+        try {
+          await uploadAsset({ file, folderId: selectedFolder ?? void 0 });
+          toast.success(`Uploaded ${file.name}`);
+        } catch (err) {
+          toast.error(err instanceof Error ? err.message : "Upload failed");
+        }
+      }
+    },
+    [selectedFolder, uploadAsset]
+  );
+  const handleDelete = async (id) => {
+    if (!confirm("Delete this asset?")) return;
+    try {
+      await deleteAsset(id);
+      toast.success("Deleted");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Delete failed");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100dvh-4rem)] flex-col overflow-hidden md:flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "max-h-48 shrink-0 overflow-hidden border-b bg-muted/20 md:h-full md:max-h-none md:w-52 md:border-b-0 md:border-r", children: /* @__PURE__ */ jsx(FolderTree, { selectedId: selectedFolder, onSelect: setSelectedFolder }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-1 flex-col overflow-hidden border-t md:border-t-0",
+          dragging && "ring-2 ring-inset ring-ring"
+        ),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragging(false);
+          void handleUpload(e.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: isUploading,
+                className: "w-full sm:w-auto",
+                children: [
+                  isUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-2 size-3.5" }),
+                  "Upload"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                className: "hidden",
+                onChange: (e) => e.target.files && handleUpload(e.target.files)
+              }
+            )
+          ] }),
+          dragging && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-ring p-8 text-center", children: [
+            /* @__PURE__ */ jsx(Upload, { className: "mx-auto mb-2 size-10 text-ring" }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Drop files to upload" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 p-3 sm:p-4", children: /* @__PURE__ */ jsx(
+            BrowseTab,
+            {
+              folderId: selectedFolder,
+              onDelete: handleDelete,
+              apiBaseURL,
+              emptyMessage: "No files yet. Drag & drop or click Upload."
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+export { LibraryPage };

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { Loader2 } from 'lucide-react';
+
+const LibraryPage = lazy(
+  () => import('./library-page.internal.mjs').then((m) => ({ default: m.LibraryPage }))
+);
+function LibraryLoading() {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-96 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }) });
+}
+function LibraryError({ error }) {
+  const message = error instanceof Error ? error.message : String(error);
+  return /* @__PURE__ */ jsx("div", { className: "flex h-96 items-center justify-center p-8 text-destructive", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: message }) });
+}
+function LibraryPageComponent() {
+  usePluginOverrides("media");
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/media",
+      PageComponent: LibraryPage,
+      ErrorComponent: LibraryError,
+      LoadingComponent: LibraryLoading,
+      NotFoundComponent: () => null,
+      onError: (error) => console.error("[btst/media] Library error:", error)
+    }
+  );
+}
+
+export { LibraryPageComponent };

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

@@ -0,0 +1,222 @@
+"use client";
+'use strict';
+
+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');
+
+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 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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+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
+  );
+}
+
+exports.useAssets = useAssets;
+exports.useCreateFolder = useCreateFolder;
+exports.useDeleteAsset = useDeleteAsset;
+exports.useDeleteFolder = useDeleteFolder;
+exports.useFolders = useFolders;
+exports.useRegisterAsset = useRegisterAsset;
+exports.useUploadAsset = useUploadAsset;