@nextsparkjs/core 0.1.0-beta.13 → 0.1.0-beta.130

package/dist/components/media/MediaCard.js

@@ -0,0 +1,158 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { VideoIcon, FileIcon, MoreVerticalIcon, Edit2Icon, EyeIcon, Trash2Icon } from "lucide-react";
+import { Card, CardContent } from "../ui/card.js";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu.js";
+import { cn } from "../../lib/utils/index.js";
+import { sel } from "../../lib/selectors/index.js";
+const MediaCard = memo(function MediaCard2({
+  media,
+  isSelected,
+  onSelect,
+  onEdit,
+  onDelete,
+  mode = "single",
+  readOnly = false
+}) {
+  const t = useTranslations("media");
+  const isImage = media.mimeType.startsWith("image/");
+  const isVideo = media.mimeType.startsWith("video/");
+  const handleCardClick = useCallback((e) => {
+    if (e.shiftKey && mode === "multiple" && onSelect) {
+      onSelect(media, { shiftKey: true });
+    } else if (onEdit) {
+      onEdit(media);
+    } else {
+      onSelect == null ? void 0 : onSelect(media);
+    }
+  }, [media, onSelect, onEdit, mode]);
+  const handleCheckboxClick = useCallback((e) => {
+    e.stopPropagation();
+    onSelect == null ? void 0 : onSelect(media, { shiftKey: e.shiftKey });
+  }, [media, onSelect]);
+  const handleMenuClick = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const handleEditClick = useCallback((e) => {
+    e.stopPropagation();
+    onEdit == null ? void 0 : onEdit(media);
+  }, [media, onEdit]);
+  const handleDeleteClick = useCallback((e) => {
+    e.stopPropagation();
+    onDelete == null ? void 0 : onDelete(media);
+  }, [media, onDelete]);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      "data-cy": sel("media.grid.item", { id: media.id }),
+      className: cn(
+        "group relative overflow-hidden transition-shadow cursor-pointer hover:shadow-md select-none",
+        "[content-visibility:auto] [contain-intrinsic-size:auto_200px]",
+        isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background"
+      ),
+      onClick: handleCardClick,
+      children: /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "aspect-square relative bg-muted flex items-center justify-center overflow-hidden", children: [
+          isImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              "data-cy": sel("media.grid.thumbnail", { id: media.id }),
+              src: media.url,
+              alt: media.alt || media.filename,
+              className: "w-full h-full object-cover",
+              loading: "lazy",
+              decoding: "async"
+            }
+          ) : isVideo ? /* @__PURE__ */ jsx(VideoIcon, { className: "w-12 h-12 text-muted-foreground" }) : /* @__PURE__ */ jsx(FileIcon, { className: "w-12 h-12 text-muted-foreground" }),
+          isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-primary/10 z-[1] pointer-events-none" }),
+          mode === "multiple" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute top-2 left-2 z-10 transition-all duration-150",
+                isSelected ? "opacity-100 scale-100" : "opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100"
+              ),
+              onClick: handleCheckboxClick,
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "data-cy": sel("media.grid.checkbox", { id: media.id }),
+                  checked: isSelected,
+                  "aria-label": `${t("actions.select")} ${media.filename}`,
+                  className: cn(
+                    "h-5 w-5 rounded-md shadow-md border-2 transition-colors pointer-events-none",
+                    isSelected ? "bg-primary border-primary text-primary-foreground" : "bg-white/90 border-white/60 backdrop-blur-sm"
+                  )
+                }
+              )
+            }
+          ),
+          (onEdit || onDelete) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity",
+              onClick: handleMenuClick,
+              children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "data-cy": sel("media.grid.menuBtn", { id: media.id }),
+                    variant: "secondary",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": t("list.actions"),
+                    children: /* @__PURE__ */ jsx(MoreVerticalIcon, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                  onEdit && /* @__PURE__ */ jsx(
+                    DropdownMenuItem,
+                    {
+                      "data-cy": sel("media.grid.menuEdit", { id: media.id }),
+                      onClick: handleEditClick,
+                      children: readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(EyeIcon, { className: "mr-2 h-4 w-4" }),
+                        t("actions.viewDetails")
+                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(Edit2Icon, { className: "mr-2 h-4 w-4" }),
+                        t("actions.edit")
+                      ] })
+                    }
+                  ),
+                  onDelete && /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      "data-cy": sel("media.grid.menuDelete", { id: media.id }),
+                      onClick: handleDeleteClick,
+                      className: "text-destructive focus:text-destructive",
+                      children: [
+                        /* @__PURE__ */ jsx(Trash2Icon, { className: "mr-2 h-4 w-4" }),
+                        t("actions.delete")
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm truncate", title: media.title || media.filename, children: media.title || media.filename }),
+          media.width && media.height && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("grid.dimensions", { width: media.width, height: media.height }) })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  MediaCard
+};

package/dist/components/media/MediaDetailPanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * MediaDetailPanel Component
+ *
+ * Panel for editing media metadata (alt text, caption, tags).
+ * Shows file info in a compact grid and provides a polished editing experience.
+ * Used inside the media detail dialog (showPreview=false) or standalone.
+ */
+import type { Media } from '../../lib/media/types';
+interface MediaDetailPanelProps {
+    media: Media | null;
+    onClose?: () => void;
+    showPreview?: boolean;
+    readOnly?: boolean;
+    className?: string;
+}
+export declare function MediaDetailPanel({ media, onClose, showPreview, readOnly, className }: MediaDetailPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MediaDetailPanel.d.ts.map

package/dist/components/media/MediaDetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaDetailPanel.d.ts","sourceRoot":"","sources":["../../../src/components/media/MediaDetailPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,OAAO,KAAK,EAAE,KAAK,EAAY,MAAM,uBAAuB,CAAA;AAE5D,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAQD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAkB,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CA+V1H"}

package/dist/components/media/MediaDetailPanel.js

@@ -0,0 +1,343 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { ImageIcon, LoaderIcon, TagIcon, XIcon, PlusIcon, CopyIcon, CheckIcon, CalendarIcon } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { Badge } from "../ui/badge.js";
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import { Textarea } from "../ui/textarea.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../ui/popover.js";
+import { cn } from "../../lib/utils/index.js";
+import { sel } from "../../lib/selectors/index.js";
+import { useUpdateMedia, useMediaTags, useMediaItemTags, useAddMediaTag, useRemoveMediaTag, useCreateMediaTag } from "../../hooks/useMedia.js";
+import { useToast } from "../../hooks/useToast.js";
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function MediaDetailPanel({ media, onClose, showPreview = true, readOnly = false, className }) {
+  var _a;
+  const t = useTranslations("media");
+  const { toast } = useToast();
+  const updateMutation = useUpdateMedia();
+  const addTagMutation = useAddMediaTag();
+  const removeTagMutation = useRemoveMediaTag();
+  const createTagMutation = useCreateMediaTag();
+  const { data: allTags = [] } = useMediaTags();
+  const { data: mediaTags = [] } = useMediaItemTags((media == null ? void 0 : media.id) || null);
+  const [tagPopoverOpen, setTagPopoverOpen] = useState(false);
+  const [newTagName, setNewTagName] = useState("");
+  const [title, setTitle] = useState((media == null ? void 0 : media.title) || "");
+  const [alt, setAlt] = useState((media == null ? void 0 : media.alt) || "");
+  const [caption, setCaption] = useState((media == null ? void 0 : media.caption) || "");
+  const [urlCopied, setUrlCopied] = useState(false);
+  useEffect(() => {
+    if (media) {
+      setTitle(media.title || "");
+      setAlt(media.alt || "");
+      setCaption(media.caption || "");
+    }
+  }, [media]);
+  if (!media) return null;
+  const isImage = media.mimeType.startsWith("image/");
+  const hasChanges = title !== (media.title || "") || alt !== (media.alt || "") || caption !== (media.caption || "");
+  const handleSave = async () => {
+    try {
+      await updateMutation.mutateAsync({
+        id: media.id,
+        data: {
+          title: title || null,
+          alt: alt || null,
+          caption: caption || null
+        }
+      });
+      toast({
+        title: t("detail.saved")
+      });
+      onClose == null ? void 0 : onClose();
+    } catch (error) {
+      toast({
+        title: t("upload.error"),
+        description: error instanceof Error ? error.message : t("upload.error"),
+        variant: "destructive"
+      });
+    }
+  };
+  const handleCancel = () => {
+    setTitle(media.title || "");
+    setAlt(media.alt || "");
+    setCaption(media.caption || "");
+    onClose == null ? void 0 : onClose();
+  };
+  const handleCopyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(media.url);
+      setUrlCopied(true);
+      setTimeout(() => setUrlCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const mimeShort = ((_a = media.mimeType.split("/")[1]) == null ? void 0 : _a.toUpperCase()) || media.mimeType;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cy": sel("media.detail.panel"),
+      className: cn("flex flex-col", className),
+      children: [
+        showPreview && /* @__PURE__ */ jsx("div", { className: "aspect-video w-full bg-neutral-950 rounded-lg overflow-hidden flex items-center justify-center mb-4", children: isImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: media.url,
+            alt: media.alt || media.filename,
+            className: "w-full h-full object-contain"
+          }
+        ) : /* @__PURE__ */ jsx(ImageIcon, { className: "h-16 w-16 text-neutral-600" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto min-h-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-5 py-2.5 bg-muted/30", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground truncate", title: media.filename, children: media.filename }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0", children: mimeShort }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0", children: formatFileSize(media.fileSize) }),
+              media.width && media.height && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+                media.width,
+                "\xD7",
+                media.height
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "shrink-0 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3 w-3" }),
+                new Date(media.createdAt).toLocaleString(void 0, {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit"
+                })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-1.5", children: [
+              /* @__PURE__ */ jsx("code", { className: "text-[11px] text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded truncate flex-1", title: media.url, children: media.url }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "shrink-0 p-1 rounded-md hover:bg-muted transition-colors",
+                  onClick: handleCopyUrl,
+                  "aria-label": t("detail.info.url"),
+                  children: urlCopied ? /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 text-green-600" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "h-3.5 w-3.5 text-muted-foreground" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-5 py-3 space-y-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "media-title", className: "text-xs font-medium", children: t("detail.titleLabel") }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "media-title",
+                  "data-cy": sel("media.detail.titleInput"),
+                  value: title,
+                  onChange: (e) => setTitle(e.target.value),
+                  placeholder: t("detail.titlePlaceholder"),
+                  maxLength: 255,
+                  disabled: readOnly
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "alt-text", className: "text-xs font-medium", children: t("detail.altLabel") }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "alt-text",
+                  "data-cy": sel("media.detail.altInput"),
+                  value: alt,
+                  onChange: (e) => setAlt(e.target.value),
+                  placeholder: t("detail.altPlaceholder"),
+                  maxLength: 500,
+                  disabled: readOnly
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "caption", className: "text-xs font-medium", children: t("detail.captionLabel") }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  id: "caption",
+                  "data-cy": sel("media.detail.captionInput"),
+                  value: caption,
+                  onChange: (e) => setCaption(e.target.value),
+                  placeholder: t("detail.captionPlaceholder"),
+                  maxLength: 1e3,
+                  rows: 2,
+                  className: "resize-none",
+                  disabled: readOnly
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-5 py-2.5 border-t", "data-cy": sel("media.detail.tags"), children: [
+            /* @__PURE__ */ jsxs(Label, { className: "flex items-center gap-1.5 text-xs font-medium mb-2", children: [
+              /* @__PURE__ */ jsx(TagIcon, { className: "h-3 w-3" }),
+              t("tags.title")
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+              mediaTags.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground italic", children: t("tags.empty") }) : mediaTags.map((tag) => /* @__PURE__ */ jsxs(
+                Badge,
+                {
+                  "data-cy": sel("media.detail.tagBadge", { id: tag.id }),
+                  variant: "secondary",
+                  className: cn("gap-1 text-xs", readOnly ? "" : "pr-1"),
+                  style: tag.color ? { borderColor: tag.color, borderLeftWidth: 3 } : void 0,
+                  children: [
+                    tag.name,
+                    !readOnly && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ml-0.5 rounded-full p-0.5 hover:bg-destructive/10 hover:text-destructive transition-colors",
+                        onClick: () => {
+                          removeTagMutation.mutate({ mediaId: media.id, tagId: tag.id });
+                        },
+                        children: /* @__PURE__ */ jsx(XIcon, { className: "h-3 w-3" })
+                      }
+                    )
+                  ]
+                },
+                tag.id
+              )),
+              !readOnly && /* @__PURE__ */ jsxs(Popover, { open: tagPopoverOpen, onOpenChange: setTagPopoverOpen, children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    "data-cy": sel("media.detail.addTagBtn"),
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-[22px] px-2 text-xs gap-1 border-dashed",
+                    children: [
+                      /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" }),
+                      t("tags.add")
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(PopoverContent, { className: "w-60 p-3", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+                    allTags.filter((tag) => !mediaTags.some((mt) => mt.id === tag.id)).map((tag) => /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: "cursor-pointer text-xs hover:bg-secondary",
+                        style: tag.color ? { borderColor: tag.color } : void 0,
+                        onClick: () => {
+                          addTagMutation.mutate({ mediaId: media.id, tagId: tag.id });
+                          setTagPopoverOpen(false);
+                        },
+                        children: tag.name
+                      },
+                      tag.id
+                    )),
+                    allTags.filter((tag) => !mediaTags.some((mt) => mt.id === tag.id)).length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground p-1", children: t("dashboard.noTags") })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-1 pt-2 border-t", children: [
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        value: newTagName,
+                        onChange: (e) => setNewTagName(e.target.value),
+                        placeholder: t("tags.createPlaceholder"),
+                        className: "h-7 text-xs",
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && newTagName.trim()) {
+                            e.preventDefault();
+                            createTagMutation.mutate(newTagName.trim(), {
+                              onSuccess: (tag) => {
+                                if (tag == null ? void 0 : tag.id) {
+                                  addTagMutation.mutate({ mediaId: media.id, tagId: tag.id });
+                                }
+                                setNewTagName("");
+                                setTagPopoverOpen(false);
+                              }
+                            });
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "secondary",
+                        size: "sm",
+                        className: "h-7 px-2 shrink-0",
+                        disabled: !newTagName.trim() || createTagMutation.isPending,
+                        onClick: () => {
+                          if (newTagName.trim()) {
+                            createTagMutation.mutate(newTagName.trim(), {
+                              onSuccess: (tag) => {
+                                if (tag == null ? void 0 : tag.id) {
+                                  addTagMutation.mutate({ mediaId: media.id, tagId: tag.id });
+                                }
+                                setNewTagName("");
+                                setTagPopoverOpen(false);
+                              }
+                            });
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" })
+                      }
+                    )
+                  ] })
+                ] }) })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-5 py-2.5 border-t bg-muted/20 shrink-0 flex items-center justify-end gap-2", children: readOnly ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-cy": sel("media.detail.cancelBtn"),
+            onClick: onClose,
+            variant: "ghost",
+            size: "sm",
+            children: t("detail.cancel")
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-cy": sel("media.detail.cancelBtn"),
+              onClick: handleCancel,
+              variant: "ghost",
+              size: "sm",
+              disabled: updateMutation.isPending,
+              children: t("detail.cancel")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "data-cy": sel("media.detail.saveBtn"),
+              onClick: handleSave,
+              disabled: !hasChanges || updateMutation.isPending,
+              size: "sm",
+              children: [
+                updateMutation.isPending && /* @__PURE__ */ jsx(LoaderIcon, { className: "mr-2 h-3.5 w-3.5 animate-spin" }),
+                updateMutation.isPending ? t("detail.saving") : t("detail.save")
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  MediaDetailPanel
+};

package/dist/components/media/MediaGrid.d.ts

@@ -0,0 +1,27 @@
+/**
+ * MediaGrid Component
+ *
+ * Grid view of media items using MediaCard components.
+ * Responsive: 6 cols desktop, 4 cols tablet, 2 cols mobile.
+ *
+ * Performance: Memoized gridStyle to prevent object recreation.
+ * MediaCard children benefit from memo.
+ */
+import type { Media } from '../../lib/media/types';
+interface MediaGridProps {
+    items: Media[];
+    isLoading: boolean;
+    selectedIds: Set<string>;
+    onSelect?: (media: Media, options?: {
+        shiftKey?: boolean;
+    }) => void;
+    onEdit?: (media: Media) => void;
+    onDelete?: (media: Media) => void;
+    mode?: 'single' | 'multiple';
+    readOnly?: boolean;
+    columns?: number;
+    className?: string;
+}
+export declare function MediaGrid({ items, isLoading, selectedIds, onSelect, onEdit, onDelete, mode, readOnly, columns, className, }: MediaGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MediaGrid.d.ts.map

package/dist/components/media/MediaGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGrid.d.ts","sourceRoot":"","sources":["../../../src/components/media/MediaGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,EAAE,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACnE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAe,EACf,QAAgB,EAChB,OAAW,EACX,SAAS,GACV,EAAE,cAAc,2CAyDhB"}

package/dist/components/media/MediaGrid.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslations } from "next-intl";
+import { ImageIcon } from "lucide-react";
+import { MediaCard } from "./MediaCard.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { cn } from "../../lib/utils/index.js";
+import { sel } from "../../lib/selectors/index.js";
+function MediaGrid({
+  items,
+  isLoading,
+  selectedIds,
+  onSelect,
+  onEdit,
+  onDelete,
+  mode = "single",
+  readOnly = false,
+  columns = 6,
+  className
+}) {
+  const t = useTranslations("media");
+  const gridStyle = useMemo(
+    () => ({ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }),
+    [columns]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-cy": sel("media.grid.container"),
+        className: cn("grid gap-3", className),
+        style: gridStyle,
+        children: Array.from({ length: columns * 2 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })
+        ] }, i))
+      }
+    );
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-cy": sel("media.empty.container"),
+        className: "flex flex-col items-center justify-center py-12 text-center",
+        children: [
+          /* @__PURE__ */ jsx(ImageIcon, { className: "h-16 w-16 text-muted-foreground mb-4" }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: t("empty.title") }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("grid.noResults") })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cy": sel("media.grid.container"),
+      className: cn("grid gap-3", className),
+      style: gridStyle,
+      children: items.map((media) => /* @__PURE__ */ jsx(
+        MediaCard,
+        {
+          media,
+          isSelected: selectedIds.has(media.id),
+          onSelect,
+          onEdit,
+          onDelete,
+          mode,
+          readOnly
+        },
+        media.id
+      ))
+    }
+  );
+}
+export {
+  MediaGrid
+};

package/dist/components/media/MediaLibrary.d.ts

@@ -0,0 +1,20 @@
+/**
+ * MediaLibrary Component
+ *
+ * Main modal for browsing, uploading, and selecting media.
+ * Manages state for search, filtering, sorting, selection, and view mode.
+ *
+ * Performance: Stable callbacks with useCallback + functional setState.
+ */
+import type { Media } from '../../lib/media/types';
+interface MediaLibraryProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect?: (media: Media | Media[]) => void;
+    mode?: 'single' | 'multiple';
+    allowedTypes?: ('image' | 'video')[];
+    maxSelections?: number;
+}
+export declare function MediaLibrary({ isOpen, onClose, onSelect, mode, allowedTypes, maxSelections, }: MediaLibraryProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MediaLibrary.d.ts.map

package/dist/components/media/MediaLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/media/MediaLibrary.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAyBH,OAAO,KAAK,EAAE,KAAK,EAAoB,MAAM,uBAAuB,CAAA;AAEpE,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,YAAY,CAAC,EAAE,CAAC,OAAO,GAAG,OAAO,CAAC,EAAE,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAID,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,IAAe,EACf,YAAY,EACZ,aAAa,GACd,EAAE,iBAAiB,2CAyOnB"}