@btst/stack 2.8.1 → 2.9.0

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

@@ -0,0 +1,129 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const useMedia = require('../../hooks/use-media.cjs');
+const utils$1 = require('../../../../../../../ui/src/lib/utils.cjs');
+const LucideIcons = require('lucide-react');
+const utils = require('./utils.cjs');
+const context = require('@btst/stack/context');
+const assetPreviewButton = require('./asset-preview-button.cjs');
+const sonner = require('sonner');
+
+function AssetCard({
+  asset,
+  onToggle,
+  selected = false,
+  onDelete,
+  apiBaseURL
+}) {
+  const { mutateAsync: deleteAsset } = useMedia.useDeleteAsset();
+  const { Image: ImageComponent } = context.usePluginOverrides("media", {});
+  const imageAsset = utils.isImage(asset.mimeType);
+  const selectable = typeof onToggle === "function";
+  const copyUrl = () => {
+    let fullUrl;
+    try {
+      fullUrl = new URL(asset.url, apiBaseURL).href;
+    } catch {
+      fullUrl = asset.url;
+    }
+    navigator.clipboard.writeText(fullUrl).then(() => sonner.toast.success("URL copied"));
+  };
+  const handleDelete = () => {
+    if (onDelete) {
+      return onDelete(asset.id);
+    }
+    if (confirm(`Delete "${asset.originalName}"?`)) {
+      return deleteAsset(asset.id).catch(console.error);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: selectable ? "button" : void 0,
+      tabIndex: selectable ? 0 : void 0,
+      "data-testid": "media-asset-item",
+      onClick: onToggle,
+      onKeyDown: (e) => {
+        if (selectable && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onToggle();
+        }
+      },
+      className: utils$1.cn(
+        "group relative cursor-pointer rounded-md border bg-muted/30 p-1 transition-all hover:border-ring hover:shadow-sm",
+        !selectable && "cursor-default",
+        selected && "border-ring ring-1 ring-ring"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-28 items-center justify-center overflow-hidden rounded bg-muted", children: imageAsset ? ImageComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+          ImageComponent,
+          {
+            src: asset.url,
+            alt: asset.alt || asset.originalName,
+            className: "h-full w-full object-cover",
+            width: 160,
+            height: 80
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: asset.url,
+            alt: asset.alt || asset.originalName,
+            className: "h-full w-full object-cover",
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.File, { className: "size-8 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 px-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "truncate text-xs font-medium leading-tight",
+              title: asset.originalName,
+              children: asset.originalName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: utils.formatBytes(asset.size) })
+        ] }),
+        selected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 top-1 rounded-full bg-primary p-0.5 text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "size-3" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-1 top-1 hidden gap-1 group-hover:flex", children: [
+          apiBaseURL ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Copy URL",
+              onClick: (e) => {
+                e.stopPropagation();
+                copyUrl();
+              },
+              className: "rounded bg-background/80 p-0.5 shadow hover:bg-background",
+              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { className: "size-3" })
+            }
+          ) : null,
+          imageAsset ? /* @__PURE__ */ jsxRuntime.jsx(
+            assetPreviewButton.AssetPreviewButton,
+            {
+              asset,
+              className: "rounded bg-background/80 p-0.5 shadow hover:bg-background"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Delete",
+              onClick: (e) => {
+                e.stopPropagation();
+                void handleDelete();
+              },
+              className: "rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive",
+              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "size-3" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.AssetCard = AssetCard;

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

@@ -0,0 +1,127 @@
+import { jsxs, jsx } 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 { usePluginOverrides } from '@btst/stack/context';
+import { AssetPreviewButton } from './asset-preview-button.mjs';
+import { toast } from 'sonner';
+
+function AssetCard({
+  asset,
+  onToggle,
+  selected = false,
+  onDelete,
+  apiBaseURL
+}) {
+  const { mutateAsync: deleteAsset } = useDeleteAsset();
+  const { Image: ImageComponent } = usePluginOverrides("media", {});
+  const imageAsset = isImage(asset.mimeType);
+  const selectable = typeof onToggle === "function";
+  const copyUrl = () => {
+    let fullUrl;
+    try {
+      fullUrl = new URL(asset.url, apiBaseURL).href;
+    } catch {
+      fullUrl = asset.url;
+    }
+    navigator.clipboard.writeText(fullUrl).then(() => toast.success("URL copied"));
+  };
+  const handleDelete = () => {
+    if (onDelete) {
+      return onDelete(asset.id);
+    }
+    if (confirm(`Delete "${asset.originalName}"?`)) {
+      return deleteAsset(asset.id).catch(console.error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: selectable ? "button" : void 0,
+      tabIndex: selectable ? 0 : void 0,
+      "data-testid": "media-asset-item",
+      onClick: onToggle,
+      onKeyDown: (e) => {
+        if (selectable && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onToggle();
+        }
+      },
+      className: cn(
+        "group relative cursor-pointer rounded-md border bg-muted/30 p-1 transition-all hover:border-ring hover:shadow-sm",
+        !selectable && "cursor-default",
+        selected && "border-ring ring-1 ring-ring"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-28 items-center justify-center overflow-hidden rounded bg-muted", children: imageAsset ? ImageComponent ? /* @__PURE__ */ jsx(
+          ImageComponent,
+          {
+            src: asset.url,
+            alt: asset.alt || asset.originalName,
+            className: "h-full w-full object-cover",
+            width: 160,
+            height: 80
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: asset.url,
+            alt: asset.alt || asset.originalName,
+            className: "h-full w-full object-cover",
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ jsx(File, { className: "size-8 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 px-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-xs font-medium leading-tight",
+              title: asset.originalName,
+              children: asset.originalName
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: formatBytes(asset.size) })
+        ] }),
+        selected && /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1 rounded-full bg-primary p-0.5 text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "size-3" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute right-1 top-1 hidden gap-1 group-hover:flex", children: [
+          apiBaseURL ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: "Copy URL",
+              onClick: (e) => {
+                e.stopPropagation();
+                copyUrl();
+              },
+              className: "rounded bg-background/80 p-0.5 shadow hover:bg-background",
+              children: /* @__PURE__ */ jsx(Copy, { className: "size-3" })
+            }
+          ) : null,
+          imageAsset ? /* @__PURE__ */ jsx(
+            AssetPreviewButton,
+            {
+              asset,
+              className: "rounded bg-background/80 p-0.5 shadow hover:bg-background"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: "Delete",
+              onClick: (e) => {
+                e.stopPropagation();
+                void handleDelete();
+              },
+              className: "rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive",
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-3" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { AssetCard };

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

@@ -0,0 +1,58 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const dialog = require('../../../../../../../ui/src/components/dialog.cjs');
+const LucideIcons = require('lucide-react');
+
+function AssetPreviewButton({
+  asset,
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        title: "Preview",
+        "aria-label": `Preview ${asset.originalName}`,
+        onClick: (event) => {
+          event.stopPropagation();
+          setOpen(true);
+        },
+        className,
+        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Eye, { className: "size-3" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      dialog.DialogContent,
+      {
+        showCloseButton: false,
+        className: "h-screen w-screen max-w-none border-0 bg-black/95 p-4 shadow-none sm:max-w-none sm:rounded-none sm:p-6",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: asset.alt || asset.originalName }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dialog.DialogClose,
+            {
+              className: "absolute right-4 top-4 z-10 rounded bg-black/60 p-2 text-white transition hover:bg-black/80",
+              "aria-label": "Close preview",
+              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-full w-full items-start justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: asset.url,
+              alt: asset.alt || asset.originalName,
+              className: "block h-auto w-auto max-w-none"
+            }
+          ) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+exports.AssetPreviewButton = AssetPreviewButton;

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose } from '../../../../../../../ui/src/components/dialog.mjs';
+import { Eye, X } from 'lucide-react';
+
+function AssetPreviewButton({
+  asset,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: "Preview",
+        "aria-label": `Preview ${asset.originalName}`,
+        onClick: (event) => {
+          event.stopPropagation();
+          setOpen(true);
+        },
+        className,
+        children: /* @__PURE__ */ jsx(Eye, { className: "size-3" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        showCloseButton: false,
+        className: "h-screen w-screen max-w-none border-0 bg-black/95 p-4 shadow-none sm:max-w-none sm:rounded-none sm:p-6",
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: asset.alt || asset.originalName }) }),
+          /* @__PURE__ */ jsx(
+            DialogClose,
+            {
+              className: "absolute right-4 top-4 z-10 rounded bg-black/60 p-2 text-white transition hover:bg-black/80",
+              "aria-label": "Close preview",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full w-full items-start justify-center", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: asset.url,
+              alt: asset.alt || asset.originalName,
+              className: "block h-auto w-auto max-w-none"
+            }
+          ) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { AssetPreviewButton };

package/dist/packages/stack/src/plugins/media/client/components/media-picker/browse-tab.cjs

@@ -0,0 +1,94 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useMedia = require('../../hooks/use-media.cjs');
+const input = require('../../../../../../../ui/src/components/input.cjs');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const LucideIcons = require('lucide-react');
+const assetCard = require('./asset-card.cjs');
+const utils = require('./utils.cjs');
+
+function BrowseTab({
+  folderId,
+  selected = [],
+  accept,
+  onToggle,
+  onDelete,
+  apiBaseURL,
+  emptyMessage = "No files found"
+}) {
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const debounceRef = React.useRef(null);
+  const selectable = typeof onToggle === "function";
+  const handleSearch = (v) => {
+    setSearch(v);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => setDebouncedSearch(v), 300);
+  };
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useMedia.useAssets({
+    folderId: folderId ?? void 0,
+    query: debouncedSearch || void 0,
+    limit: 40
+  });
+  const allAssets = data?.pages.flatMap((p) => p.items) ?? [];
+  const filtered = accept ? allAssets.filter((a) => utils.matchesAccept(a.mimeType, accept)) : allAssets;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          value: search,
+          onChange: (e) => handleSearch(e.target.value),
+          placeholder: "Search files\u2026",
+          className: "h-8 pl-7 text-sm"
+        }
+      ),
+      search && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setSearch("");
+            setDebouncedSearch("");
+          },
+          className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Image, { className: "size-8" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: emptyMessage })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 pb-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: filtered.map((asset) => /* @__PURE__ */ jsxRuntime.jsx(
+        assetCard.AssetCard,
+        {
+          asset,
+          selected: selected.some((s) => s.id === asset.id),
+          onToggle: selectable ? () => onToggle(asset) : void 0,
+          onDelete,
+          apiBaseURL
+        },
+        asset.id
+      )) }),
+      hasNextPage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => fetchNextPage(),
+          disabled: isFetchingNextPage,
+          children: [
+            isFetchingNextPage ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-1 size-3 animate-spin" }) : null,
+            "Load more"
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+exports.BrowseTab = BrowseTab;

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

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useAssets } from '../../hooks/use-media.mjs';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Search, X, Loader2, Image } from 'lucide-react';
+import { AssetCard } from './asset-card.mjs';
+import { matchesAccept } from './utils.mjs';
+
+function BrowseTab({
+  folderId,
+  selected = [],
+  accept,
+  onToggle,
+  onDelete,
+  apiBaseURL,
+  emptyMessage = "No files found"
+}) {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const debounceRef = useRef(null);
+  const selectable = typeof onToggle === "function";
+  const handleSearch = (v) => {
+    setSearch(v);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => setDebouncedSearch(v), 300);
+  };
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useAssets({
+    folderId: folderId ?? void 0,
+    query: debouncedSearch || void 0,
+    limit: 40
+  });
+  const allAssets = data?.pages.flatMap((p) => p.items) ?? [];
+  const filtered = accept ? allAssets.filter((a) => matchesAccept(a.mimeType, accept)) : allAssets;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: search,
+          onChange: (e) => handleSearch(e.target.value),
+          placeholder: "Search files\u2026",
+          className: "h-8 pl-7 text-sm"
+        }
+      ),
+      search && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setSearch("");
+            setDebouncedSearch("");
+          },
+          className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Image, { className: "size-8" }),
+      /* @__PURE__ */ jsx("p", { children: emptyMessage })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 pb-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: filtered.map((asset) => /* @__PURE__ */ jsx(
+        AssetCard,
+        {
+          asset,
+          selected: selected.some((s) => s.id === asset.id),
+          onToggle: selectable ? () => onToggle(asset) : void 0,
+          onDelete,
+          apiBaseURL
+        },
+        asset.id
+      )) }),
+      hasNextPage && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => fetchNextPage(),
+          disabled: isFetchingNextPage,
+          children: [
+            isFetchingNextPage ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 size-3 animate-spin" }) : null,
+            "Load more"
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { BrowseTab };