@blitheforge/media-library 1.0.7 → 1.1.1

package/README.md

@@ -1,9 +1,10 @@
 # @blitheforge/media-library
 
-Production-ready React media library with nested folders, drag-and-drop upload, search, RBAC-driven UI, toast notifications, and configurable API URLs. Built with Tailwind CSS — works in Next.js, Vite, or any React 18+ app.
+Production-ready React media library with **pre-built, scoped CSS** — no Tailwind required in your app. Works in Next.js, Vite, plain React, or vanilla JavaScript (headless API).
 
 ## Features
 
+- **Self-contained CSS** — import one file; styles are scoped to `.bfml-root` and won't break your app layout
 - **Nested folder management** — browse, create, and delete folders
 - **File upload** — click to upload or drag-and-drop; files upload one-by-one with live preview cards in the grid
 - **5 MB client-side limit** — oversized files show a warning toast and are skipped (configurable via `MAX_MEDIA_UPLOAD_BYTES`)
@@ -34,26 +35,25 @@ npm install react react-dom
 
 ## Setup
 
-### 1. Import styles once
+### 1. Import the bundled CSS once
 
-In your app entry (e.g. `app/layout.tsx` or `main.tsx`):
+The package ships a complete CSS file built from Tailwind at publish time. **Your app does not need Tailwind.**
 
 ```tsx
-import "./globals.css";
+// React — app/layout.tsx, main.tsx, etc.
 import "@blitheforge/media-library/styles.css";
 ```
 
-Import the library **after** your globals so its utilities take precedence over your app's Tailwind layers (required for modal sizing, grid layout, buttons, etc.).
-
-Optionally add this to your globals so Tailwind also scans the package JS:
-
-```css
-@source "../node_modules/@blitheforge/media-library/dist/index.js";
+```html
+<!-- Vanilla HTML / any framework -->
+<link rel="stylesheet" href="/node_modules/@blitheforge/media-library/dist/style.css" />
 ```
 
-Do **not** add `@source` for this package in your app Tailwind config.
+Styles are scoped under `.bfml-root`, so they will **not** override your app's `hidden`, `flex`, `lg:block`, etc.
 
-### 2. Next.js (App Router)
+If your app also uses Tailwind, import the library CSS **before or after** your globals — both work with scoped styles. You do **not** need `@source` for this package.
+
+### 2. React (Next.js App Router)
 
 Add the package to `transpilePackages` in `next.config.ts`:
 
@@ -64,14 +64,50 @@ const nextConfig = {
 export default nextConfig;
 ```
 
-### 3. Monorepo / workspace
+### 3. Vanilla JavaScript (no React)
+
+Use the headless client for upload/list/delete from any JS project:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@blitheforge/media-library/dist/style.css" />
+<script type="module">
+  import { createMediaLibraryClient } from "https://unpkg.com/@blitheforge/media-library/dist/client.js";
+
+  const client = createMediaLibraryClient({
+    listUrl: "/api/media",
+    uploadUrl: "/api/media/upload",
+    createFolderUrl: "/api/media/folders",
+    deleteUrl: "/api/media"
+  });
+
+  const listing = await client.list("");
+  console.log(listing.files);
+
+  // Upload from a file input
+  document.querySelector("#files").addEventListener("change", async (event) => {
+    const files = [...event.target.files];
+    const uploaded = await client.upload("", files);
+    console.log(uploaded);
+  });
+</script>
+```
+
+Node / bundler:
+
+```js
+import { createMediaLibraryClient } from "@blitheforge/media-library/client";
+```
+
+React UI components (`MediaPicker`, `MediaLibraryModal`, etc.) still require React. The `/client` export has **no React dependency**.
+
+### 4. Monorepo / workspace
 
 Link the local package via pnpm workspace:
 
 ```yaml
 # pnpm-workspace.yaml
 packages:
-  - "Blitheforge-media-library"
+  - "package"
   - "."
 ```
 
@@ -87,7 +123,7 @@ packages:
 Rebuild after package changes:
 
 ```bash
-cd Blitheforge-media-library && npm run build
+cd package && pnpm build
 ```
 
 ---

package/dist/client.cjs

@@ -0,0 +1,140 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  MAX_MEDIA_UPLOAD_BYTES: () => MAX_MEDIA_UPLOAD_BYTES,
+  createMediaLibraryClient: () => createMediaLibraryClient,
+  fileMatchesAccept: () => fileMatchesAccept,
+  fileMatchesAcceptForUpload: () => fileMatchesAcceptForUpload,
+  fileNameFromPath: () => fileNameFromPath,
+  formatUploadSizeLimit: () => formatUploadSizeLimit,
+  isFileWithinUploadSizeLimit: () => isFileWithinUploadSizeLimit,
+  isImagePath: () => isImagePath
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/types.ts
+var defaultMediaLibraryConfig = {
+  listUrl: "/api/media",
+  uploadUrl: "/api/media/upload",
+  createFolderUrl: "/api/media/folders",
+  updateUrl: "/api/media",
+  deleteUrl: "/api/media",
+  rootLabel: "Root"
+};
+
+// src/client.ts
+function resolveConfig(config) {
+  return { ...defaultMediaLibraryConfig, ...config };
+}
+async function parseResponse(response) {
+  const payload = await response.json();
+  if (!payload.success) throw new Error(payload.error?.message ?? "Media request failed.");
+  return payload.data;
+}
+function createMediaLibraryClient(config) {
+  const urls = resolveConfig(config);
+  return {
+    async list(path = "", q = "") {
+      const params = new URLSearchParams();
+      if (path) params.set("path", path);
+      if (q) params.set("q", q);
+      const response = await fetch(`${urls.listUrl}?${params.toString()}`);
+      return parseResponse(response);
+    },
+    async createFolder(path, name, nested = true) {
+      const response = await fetch(urls.createFolderUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, name, nested })
+      });
+      return parseResponse(response);
+    },
+    async upload(path, files) {
+      const form = new FormData();
+      form.set("path", path);
+      files.forEach((file) => form.append("files", file));
+      const response = await fetch(urls.uploadUrl, { method: "POST", body: form });
+      return parseResponse(response);
+    },
+    async uploadOne(path, file) {
+      const uploaded = await this.upload(path, [file]);
+      return uploaded[0];
+    },
+    async rename(path, newName, type) {
+      const response = await fetch(urls.updateUrl, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, newName, type })
+      });
+      return parseResponse(response);
+    },
+    async remove(path, type) {
+      const response = await fetch(urls.deleteUrl, {
+        method: "DELETE",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, type })
+      });
+      return parseResponse(response);
+    }
+  };
+}
+var MAX_MEDIA_UPLOAD_BYTES = 5 * 1024 * 1024;
+function isFileWithinUploadSizeLimit(file, maxBytes = MAX_MEDIA_UPLOAD_BYTES) {
+  return file.size <= maxBytes;
+}
+function formatUploadSizeLimit(maxBytes = MAX_MEDIA_UPLOAD_BYTES) {
+  return `${Math.round(maxBytes / (1024 * 1024))} MB`;
+}
+function fileMatchesAccept(file, accept) {
+  if (!accept || accept.length === 0) return true;
+  const isImage = file.mimeType.startsWith("image/");
+  const isPdf = file.mimeType === "application/pdf";
+  if (accept.includes("image") && isImage) return true;
+  if (accept.includes("pdf") && isPdf) return true;
+  return false;
+}
+function fileMatchesAcceptForUpload(file, accept) {
+  if (!accept || accept.length === 0) return true;
+  const isImage = file.type.startsWith("image/");
+  const isPdf = file.type === "application/pdf";
+  if (accept.includes("image") && isImage) return true;
+  if (accept.includes("pdf") && isPdf) return true;
+  return false;
+}
+function fileNameFromPath(path) {
+  return path.split("/").pop() ?? path;
+}
+function isImagePath(path) {
+  return /\.(png|jpe?g|webp|gif)$/i.test(path);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MAX_MEDIA_UPLOAD_BYTES,
+  createMediaLibraryClient,
+  fileMatchesAccept,
+  fileMatchesAcceptForUpload,
+  fileNameFromPath,
+  formatUploadSizeLimit,
+  isFileWithinUploadSizeLimit,
+  isImagePath
+});
+//# sourceMappingURL=client.cjs.map

package/dist/client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client.ts","../src/types.ts"],"sourcesContent":["import type { MediaFile, MediaLibraryConfig, MediaListing } from \"./types\";\nimport { defaultMediaLibraryConfig } from \"./types\";\n\ntype ApiPayload<T> = { success: boolean; data?: T; error?: { message?: string } };\n\nfunction resolveConfig(config?: Partial<MediaLibraryConfig>): MediaLibraryConfig {\n  return { ...defaultMediaLibraryConfig, ...config };\n}\n\nasync function parseResponse<T>(response: Response): Promise<T> {\n  const payload = (await response.json()) as ApiPayload<T>;\n  if (!payload.success) throw new Error(payload.error?.message ?? \"Media request failed.\");\n  return payload.data as T;\n}\n\nexport function createMediaLibraryClient(config?: Partial<MediaLibraryConfig>) {\n  const urls = resolveConfig(config);\n\n  return {\n    async list(path = \"\", q = \"\") {\n      const params = new URLSearchParams();\n      if (path) params.set(\"path\", path);\n      if (q) params.set(\"q\", q);\n      const response = await fetch(`${urls.listUrl}?${params.toString()}`);\n      return parseResponse<MediaListing>(response);\n    },\n\n    async createFolder(path: string, name: string, nested = true) {\n      const response = await fetch(urls.createFolderUrl, {\n        method: \"POST\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ path, name, nested })\n      });\n      return parseResponse<{ name: string; path: string }>(response);\n    },\n\n    async upload(path: string, files: File[]) {\n      const form = new FormData();\n      form.set(\"path\", path);\n      files.forEach((file) => form.append(\"files\", file));\n      const response = await fetch(urls.uploadUrl, { method: \"POST\", body: form });\n      return parseResponse<MediaFile[]>(response);\n    },\n\n    async uploadOne(path: string, file: File) {\n      const uploaded = await this.upload(path, [file]);\n      return uploaded[0];\n    },\n\n    async rename(path: string, newName: string, type: \"file\" | \"folder\") {\n      const response = await fetch(urls.updateUrl, {\n        method: \"PATCH\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ path, newName, type })\n      });\n      return parseResponse<MediaFile | { name: string; path: string }>(response);\n    },\n\n    async remove(path: string, type: \"file\" | \"folder\") {\n      const response = await fetch(urls.deleteUrl, {\n        method: \"DELETE\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ path, type })\n      });\n      return parseResponse<{ path: string }>(response);\n    }\n  };\n}\n\nexport const MAX_MEDIA_UPLOAD_BYTES = 5 * 1024 * 1024;\n\nexport function isFileWithinUploadSizeLimit(file: File, maxBytes = MAX_MEDIA_UPLOAD_BYTES) {\n  return file.size <= maxBytes;\n}\n\nexport function formatUploadSizeLimit(maxBytes = MAX_MEDIA_UPLOAD_BYTES) {\n  return `${Math.round(maxBytes / (1024 * 1024))} MB`;\n}\n\nexport function fileMatchesAccept(file: MediaFile, accept?: Array<\"image\" | \"pdf\">) {\n  if (!accept || accept.length === 0) return true;\n  const isImage = file.mimeType.startsWith(\"image/\");\n  const isPdf = file.mimeType === \"application/pdf\";\n  if (accept.includes(\"image\") && isImage) return true;\n  if (accept.includes(\"pdf\") && isPdf) return true;\n  return false;\n}\n\nexport function fileMatchesAcceptForUpload(file: File, accept?: Array<\"image\" | \"pdf\">) {\n  if (!accept || accept.length === 0) return true;\n  const isImage = file.type.startsWith(\"image/\");\n  const isPdf = file.type === \"application/pdf\";\n  if (accept.includes(\"image\") && isImage) return true;\n  if (accept.includes(\"pdf\") && isPdf) return true;\n  return false;\n}\n\nexport function fileNameFromPath(path: string) {\n  return path.split(\"/\").pop() ?? path;\n}\n\nexport function isImagePath(path: string) {\n  return /\\.(png|jpe?g|webp|gif)$/i.test(path);\n}\n","import type { MediaLibraryThemeMode } from \"./theme\";\n\nexport type MediaFile = {\n  name: string;\n  path: string;\n  url: string;\n  size: number;\n  mimeType: string;\n  updatedAt: string;\n};\n\nexport type MediaFolder = {\n  name: string;\n  path: string;\n};\n\nexport type MediaCapabilities = {\n  view: boolean;\n  upload: boolean;\n  createFolder: boolean;\n  delete: boolean;\n  rename: boolean;\n  select: boolean;\n};\n\nexport const defaultMediaCapabilities: MediaCapabilities = {\n  view: true,\n  upload: true,\n  createFolder: true,\n  delete: true,\n  rename: true,\n  select: true\n};\n\nexport type MediaListing = {\n  path: string;\n  folders: MediaFolder[];\n  files: MediaFile[];\n  capabilities?: MediaCapabilities;\n};\n\n/**\n * Configure API endpoints for your backend.\n * See README.md for the required request/response contract.\n */\nexport type MediaLibraryConfig = {\n  listUrl: string;\n  uploadUrl: string;\n  createFolderUrl: string;\n  updateUrl: string;\n  deleteUrl: string;\n  rootLabel?: string;\n  /** `sync` inherits host CSS variables (default). Use `light` or `dark` for standalone theming. */\n  theme?: MediaLibraryThemeMode;\n};\n\nexport const defaultMediaLibraryConfig: MediaLibraryConfig = {\n  listUrl: \"/api/media\",\n  uploadUrl: \"/api/media/upload\",\n  createFolderUrl: \"/api/media/folders\",\n  updateUrl: \"/api/media\",\n  deleteUrl: \"/api/media\",\n  rootLabel: \"Root\"\n};\n\nexport type MediaLibraryPanelProps = {\n  /** When false, the panel does not load or render. */\n  active?: boolean;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  title?: string;\n  description?: string;\n  accept?: Array<\"image\" | \"pdf\">;\n  variant?: \"modal\" | \"embedded\";\n  /** Show selection footer with Done button (picker flow). */\n  selectable?: boolean;\n  /** Close modal after selecting a file. Default true. */\n  closeOnSelect?: boolean;\n  /** `multi` allows selecting several files before confirming. Default `single`. */\n  selectionMode?: \"single\" | \"multi\";\n  /** Max files that can be added in one modal session (multi mode). */\n  maxSelections?: number;\n  /** After upload completes, add uploaded files and close (multi picker). */\n  autoSelectUploads?: boolean;\n  onClose?: () => void;\n  onSelect?: (file: MediaFile) => void;\n  onSelectMany?: (files: MediaFile[]) => void;\n  className?: string;\n};\n\nexport type MediaLibraryWidgetProps = {\n  /** CSS width, e.g. `\"100%\"`, `800`, or `\"70vw\"`. Default `\"100%\"`. */\n  width?: string | number;\n  /** CSS height, e.g. `640`, `\"600px\"`, or `\"70vh\"`. Default `640`. */\n  height?: string | number;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  title?: string;\n  description?: string;\n  accept?: Array<\"image\" | \"pdf\">;\n  selectable?: boolean;\n  onSelect?: (file: MediaFile) => void;\n  className?: string;\n};\n\nexport type MediaLibraryModalProps = {\n  open: boolean;\n  onClose: () => void;\n  onSelect?: (file: MediaFile) => void;\n  onSelectMany?: (files: MediaFile[]) => void;\n  closeOnSelect?: boolean;\n  selectionMode?: \"single\" | \"multi\";\n  maxSelections?: number;\n  autoSelectUploads?: boolean;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  title?: string;\n  description?: string;\n  accept?: Array<\"image\" | \"pdf\">;\n};\n\nexport type MediaPickerProps = {\n  name: string;\n  label?: string;\n  title?: string;\n  description?: string;\n  /** @deprecated Preview is shown inline in the picker button. */\n  previewTitle?: string;\n  /** @deprecated Preview is shown inline in the picker button. */\n  previewDescription?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (path: string) => void;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  accept?: Array<\"image\" | \"pdf\">;\n  className?: string;\n};\n\nexport type MediaPickerMultiProps = {\n  name: string;\n  label?: string;\n  title?: string;\n  description?: string;\n  max?: number;\n  values?: string[];\n  defaultValues?: string[];\n  onChange?: (paths: string[]) => void;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  accept?: Array<\"image\" | \"pdf\">;\n  className?: string;\n};\n"],"mappings":"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","names":[]}

package/dist/client.d.cts

@@ -0,0 +1,68 @@
+type MediaLibraryThemeMode = "sync" | "light" | "dark";
+
+type MediaFile = {
+    name: string;
+    path: string;
+    url: string;
+    size: number;
+    mimeType: string;
+    updatedAt: string;
+};
+type MediaFolder = {
+    name: string;
+    path: string;
+};
+type MediaCapabilities = {
+    view: boolean;
+    upload: boolean;
+    createFolder: boolean;
+    delete: boolean;
+    rename: boolean;
+    select: boolean;
+};
+type MediaListing = {
+    path: string;
+    folders: MediaFolder[];
+    files: MediaFile[];
+    capabilities?: MediaCapabilities;
+};
+/**
+ * Configure API endpoints for your backend.
+ * See README.md for the required request/response contract.
+ */
+type MediaLibraryConfig = {
+    listUrl: string;
+    uploadUrl: string;
+    createFolderUrl: string;
+    updateUrl: string;
+    deleteUrl: string;
+    rootLabel?: string;
+    /** `sync` inherits host CSS variables (default). Use `light` or `dark` for standalone theming. */
+    theme?: MediaLibraryThemeMode;
+};
+
+declare function createMediaLibraryClient(config?: Partial<MediaLibraryConfig>): {
+    list(path?: string, q?: string): Promise<MediaListing>;
+    createFolder(path: string, name: string, nested?: boolean): Promise<{
+        name: string;
+        path: string;
+    }>;
+    upload(path: string, files: File[]): Promise<MediaFile[]>;
+    uploadOne(path: string, file: File): Promise<MediaFile>;
+    rename(path: string, newName: string, type: "file" | "folder"): Promise<MediaFile | {
+        name: string;
+        path: string;
+    }>;
+    remove(path: string, type: "file" | "folder"): Promise<{
+        path: string;
+    }>;
+};
+declare const MAX_MEDIA_UPLOAD_BYTES: number;
+declare function isFileWithinUploadSizeLimit(file: File, maxBytes?: number): boolean;
+declare function formatUploadSizeLimit(maxBytes?: number): string;
+declare function fileMatchesAccept(file: MediaFile, accept?: Array<"image" | "pdf">): boolean;
+declare function fileMatchesAcceptForUpload(file: File, accept?: Array<"image" | "pdf">): boolean;
+declare function fileNameFromPath(path: string): string;
+declare function isImagePath(path: string): boolean;
+
+export { MAX_MEDIA_UPLOAD_BYTES, createMediaLibraryClient, fileMatchesAccept, fileMatchesAcceptForUpload, fileNameFromPath, formatUploadSizeLimit, isFileWithinUploadSizeLimit, isImagePath };

package/dist/client.d.ts

@@ -0,0 +1,68 @@
+type MediaLibraryThemeMode = "sync" | "light" | "dark";
+
+type MediaFile = {
+    name: string;
+    path: string;
+    url: string;
+    size: number;
+    mimeType: string;
+    updatedAt: string;
+};
+type MediaFolder = {
+    name: string;
+    path: string;
+};
+type MediaCapabilities = {
+    view: boolean;
+    upload: boolean;
+    createFolder: boolean;
+    delete: boolean;
+    rename: boolean;
+    select: boolean;
+};
+type MediaListing = {
+    path: string;
+    folders: MediaFolder[];
+    files: MediaFile[];
+    capabilities?: MediaCapabilities;
+};
+/**
+ * Configure API endpoints for your backend.
+ * See README.md for the required request/response contract.
+ */
+type MediaLibraryConfig = {
+    listUrl: string;
+    uploadUrl: string;
+    createFolderUrl: string;
+    updateUrl: string;
+    deleteUrl: string;
+    rootLabel?: string;
+    /** `sync` inherits host CSS variables (default). Use `light` or `dark` for standalone theming. */
+    theme?: MediaLibraryThemeMode;
+};
+
+declare function createMediaLibraryClient(config?: Partial<MediaLibraryConfig>): {
+    list(path?: string, q?: string): Promise<MediaListing>;
+    createFolder(path: string, name: string, nested?: boolean): Promise<{
+        name: string;
+        path: string;
+    }>;
+    upload(path: string, files: File[]): Promise<MediaFile[]>;
+    uploadOne(path: string, file: File): Promise<MediaFile>;
+    rename(path: string, newName: string, type: "file" | "folder"): Promise<MediaFile | {
+        name: string;
+        path: string;
+    }>;
+    remove(path: string, type: "file" | "folder"): Promise<{
+        path: string;
+    }>;
+};
+declare const MAX_MEDIA_UPLOAD_BYTES: number;
+declare function isFileWithinUploadSizeLimit(file: File, maxBytes?: number): boolean;
+declare function formatUploadSizeLimit(maxBytes?: number): string;
+declare function fileMatchesAccept(file: MediaFile, accept?: Array<"image" | "pdf">): boolean;
+declare function fileMatchesAcceptForUpload(file: File, accept?: Array<"image" | "pdf">): boolean;
+declare function fileNameFromPath(path: string): string;
+declare function isImagePath(path: string): boolean;
+
+export { MAX_MEDIA_UPLOAD_BYTES, createMediaLibraryClient, fileMatchesAccept, fileMatchesAcceptForUpload, fileNameFromPath, formatUploadSizeLimit, isFileWithinUploadSizeLimit, isImagePath };

package/dist/client.js

@@ -0,0 +1,106 @@
+// src/types.ts
+var defaultMediaLibraryConfig = {
+  listUrl: "/api/media",
+  uploadUrl: "/api/media/upload",
+  createFolderUrl: "/api/media/folders",
+  updateUrl: "/api/media",
+  deleteUrl: "/api/media",
+  rootLabel: "Root"
+};
+
+// src/client.ts
+function resolveConfig(config) {
+  return { ...defaultMediaLibraryConfig, ...config };
+}
+async function parseResponse(response) {
+  const payload = await response.json();
+  if (!payload.success) throw new Error(payload.error?.message ?? "Media request failed.");
+  return payload.data;
+}
+function createMediaLibraryClient(config) {
+  const urls = resolveConfig(config);
+  return {
+    async list(path = "", q = "") {
+      const params = new URLSearchParams();
+      if (path) params.set("path", path);
+      if (q) params.set("q", q);
+      const response = await fetch(`${urls.listUrl}?${params.toString()}`);
+      return parseResponse(response);
+    },
+    async createFolder(path, name, nested = true) {
+      const response = await fetch(urls.createFolderUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, name, nested })
+      });
+      return parseResponse(response);
+    },
+    async upload(path, files) {
+      const form = new FormData();
+      form.set("path", path);
+      files.forEach((file) => form.append("files", file));
+      const response = await fetch(urls.uploadUrl, { method: "POST", body: form });
+      return parseResponse(response);
+    },
+    async uploadOne(path, file) {
+      const uploaded = await this.upload(path, [file]);
+      return uploaded[0];
+    },
+    async rename(path, newName, type) {
+      const response = await fetch(urls.updateUrl, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, newName, type })
+      });
+      return parseResponse(response);
+    },
+    async remove(path, type) {
+      const response = await fetch(urls.deleteUrl, {
+        method: "DELETE",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, type })
+      });
+      return parseResponse(response);
+    }
+  };
+}
+var MAX_MEDIA_UPLOAD_BYTES = 5 * 1024 * 1024;
+function isFileWithinUploadSizeLimit(file, maxBytes = MAX_MEDIA_UPLOAD_BYTES) {
+  return file.size <= maxBytes;
+}
+function formatUploadSizeLimit(maxBytes = MAX_MEDIA_UPLOAD_BYTES) {
+  return `${Math.round(maxBytes / (1024 * 1024))} MB`;
+}
+function fileMatchesAccept(file, accept) {
+  if (!accept || accept.length === 0) return true;
+  const isImage = file.mimeType.startsWith("image/");
+  const isPdf = file.mimeType === "application/pdf";
+  if (accept.includes("image") && isImage) return true;
+  if (accept.includes("pdf") && isPdf) return true;
+  return false;
+}
+function fileMatchesAcceptForUpload(file, accept) {
+  if (!accept || accept.length === 0) return true;
+  const isImage = file.type.startsWith("image/");
+  const isPdf = file.type === "application/pdf";
+  if (accept.includes("image") && isImage) return true;
+  if (accept.includes("pdf") && isPdf) return true;
+  return false;
+}
+function fileNameFromPath(path) {
+  return path.split("/").pop() ?? path;
+}
+function isImagePath(path) {
+  return /\.(png|jpe?g|webp|gif)$/i.test(path);
+}
+export {
+  MAX_MEDIA_UPLOAD_BYTES,
+  createMediaLibraryClient,
+  fileMatchesAccept,
+  fileMatchesAcceptForUpload,
+  fileNameFromPath,
+  formatUploadSizeLimit,
+  isFileWithinUploadSizeLimit,
+  isImagePath
+};
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts","../src/client.ts"],"sourcesContent":["import type { MediaLibraryThemeMode } from \"./theme\";\n\nexport type MediaFile = {\n  name: string;\n  path: string;\n  url: string;\n  size: number;\n  mimeType: string;\n  updatedAt: string;\n};\n\nexport type MediaFolder = {\n  name: string;\n  path: string;\n};\n\nexport type MediaCapabilities = {\n  view: boolean;\n  upload: boolean;\n  createFolder: boolean;\n  delete: boolean;\n  rename: boolean;\n  select: boolean;\n};\n\nexport const defaultMediaCapabilities: MediaCapabilities = {\n  view: true,\n  upload: true,\n  createFolder: true,\n  delete: true,\n  rename: true,\n  select: true\n};\n\nexport type MediaListing = {\n  path: string;\n  folders: MediaFolder[];\n  files: MediaFile[];\n  capabilities?: MediaCapabilities;\n};\n\n/**\n * Configure API endpoints for your backend.\n * See README.md for the required request/response contract.\n */\nexport type MediaLibraryConfig = {\n  listUrl: string;\n  uploadUrl: string;\n  createFolderUrl: string;\n  updateUrl: string;\n  deleteUrl: string;\n  rootLabel?: string;\n  /** `sync` inherits host CSS variables (default). Use `light` or `dark` for standalone theming. */\n  theme?: MediaLibraryThemeMode;\n};\n\nexport const defaultMediaLibraryConfig: MediaLibraryConfig = {\n  listUrl: \"/api/media\",\n  uploadUrl: \"/api/media/upload\",\n  createFolderUrl: \"/api/media/folders\",\n  updateUrl: \"/api/media\",\n  deleteUrl: \"/api/media\",\n  rootLabel: \"Root\"\n};\n\nexport type MediaLibraryPanelProps = {\n  /** When false, the panel does not load or render. */\n  active?: boolean;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  title?: string;\n  description?: string;\n  accept?: Array<\"image\" | \"pdf\">;\n  variant?: \"modal\" | \"embedded\";\n  /** Show selection footer with Done button (picker flow). */\n  selectable?: boolean;\n  /** Close modal after selecting a file. Default true. */\n  closeOnSelect?: boolean;\n  /** `multi` allows selecting several files before confirming. Default `single`. */\n  selectionMode?: \"single\" | \"multi\";\n  /** Max files that can be added in one modal session (multi mode). */\n  maxSelections?: number;\n  /** After upload completes, add uploaded files and close (multi picker). */\n  autoSelectUploads?: boolean;\n  onClose?: () => void;\n  onSelect?: (file: MediaFile) => void;\n  onSelectMany?: (files: MediaFile[]) => void;\n  className?: string;\n};\n\nexport type MediaLibraryWidgetProps = {\n  /** CSS width, e.g. `\"100%\"`, `800`, or `\"70vw\"`. Default `\"100%\"`. */\n  width?: string | number;\n  /** CSS height, e.g. `640`, `\"600px\"`, or `\"70vh\"`. Default `640`. */\n  height?: string | number;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  title?: string;\n  description?: string;\n  accept?: Array<\"image\" | \"pdf\">;\n  selectable?: boolean;\n  onSelect?: (file: MediaFile) => void;\n  className?: string;\n};\n\nexport type MediaLibraryModalProps = {\n  open: boolean;\n  onClose: () => void;\n  onSelect?: (file: MediaFile) => void;\n  onSelectMany?: (files: MediaFile[]) => void;\n  closeOnSelect?: boolean;\n  selectionMode?: \"single\" | \"multi\";\n  maxSelections?: number;\n  autoSelectUploads?: boolean;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  title?: string;\n  description?: string;\n  accept?: Array<\"image\" | \"pdf\">;\n};\n\nexport type MediaPickerProps = {\n  name: string;\n  label?: string;\n  title?: string;\n  description?: string;\n  /** @deprecated Preview is shown inline in the picker button. */\n  previewTitle?: string;\n  /** @deprecated Preview is shown inline in the picker button. */\n  previewDescription?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (path: string) => void;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  accept?: Array<\"image\" | \"pdf\">;\n  className?: string;\n};\n\nexport type MediaPickerMultiProps = {\n  name: string;\n  label?: string;\n  title?: string;\n  description?: string;\n  max?: number;\n  values?: string[];\n  defaultValues?: string[];\n  onChange?: (paths: string[]) => void;\n  config?: Partial<MediaLibraryConfig>;\n  theme?: MediaLibraryThemeMode;\n  accept?: Array<\"image\" | \"pdf\">;\n  className?: string;\n};\n","import type { MediaFile, MediaLibraryConfig, MediaListing } from \"./types\";\nimport { defaultMediaLibraryConfig } from \"./types\";\n\ntype ApiPayload<T> = { success: boolean; data?: T; error?: { message?: string } };\n\nfunction resolveConfig(config?: Partial<MediaLibraryConfig>): MediaLibraryConfig {\n  return { ...defaultMediaLibraryConfig, ...config };\n}\n\nasync function parseResponse<T>(response: Response): Promise<T> {\n  const payload = (await response.json()) as ApiPayload<T>;\n  if (!payload.success) throw new Error(payload.error?.message ?? \"Media request failed.\");\n  return payload.data as T;\n}\n\nexport function createMediaLibraryClient(config?: Partial<MediaLibraryConfig>) {\n  const urls = resolveConfig(config);\n\n  return {\n    async list(path = \"\", q = \"\") {\n      const params = new URLSearchParams();\n      if (path) params.set(\"path\", path);\n      if (q) params.set(\"q\", q);\n      const response = await fetch(`${urls.listUrl}?${params.toString()}`);\n      return parseResponse<MediaListing>(response);\n    },\n\n    async createFolder(path: string, name: string, nested = true) {\n      const response = await fetch(urls.createFolderUrl, {\n        method: \"POST\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ path, name, nested })\n      });\n      return parseResponse<{ name: string; path: string }>(response);\n    },\n\n    async upload(path: string, files: File[]) {\n      const form = new FormData();\n      form.set(\"path\", path);\n      files.forEach((file) => form.append(\"files\", file));\n      const response = await fetch(urls.uploadUrl, { method: \"POST\", body: form });\n      return parseResponse<MediaFile[]>(response);\n    },\n\n    async uploadOne(path: string, file: File) {\n      const uploaded = await this.upload(path, [file]);\n      return uploaded[0];\n    },\n\n    async rename(path: string, newName: string, type: \"file\" | \"folder\") {\n      const response = await fetch(urls.updateUrl, {\n        method: \"PATCH\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ path, newName, type })\n      });\n      return parseResponse<MediaFile | { name: string; path: string }>(response);\n    },\n\n    async remove(path: string, type: \"file\" | \"folder\") {\n      const response = await fetch(urls.deleteUrl, {\n        method: \"DELETE\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ path, type })\n      });\n      return parseResponse<{ path: string }>(response);\n    }\n  };\n}\n\nexport const MAX_MEDIA_UPLOAD_BYTES = 5 * 1024 * 1024;\n\nexport function isFileWithinUploadSizeLimit(file: File, maxBytes = MAX_MEDIA_UPLOAD_BYTES) {\n  return file.size <= maxBytes;\n}\n\nexport function formatUploadSizeLimit(maxBytes = MAX_MEDIA_UPLOAD_BYTES) {\n  return `${Math.round(maxBytes / (1024 * 1024))} MB`;\n}\n\nexport function fileMatchesAccept(file: MediaFile, accept?: Array<\"image\" | \"pdf\">) {\n  if (!accept || accept.length === 0) return true;\n  const isImage = file.mimeType.startsWith(\"image/\");\n  const isPdf = file.mimeType === \"application/pdf\";\n  if (accept.includes(\"image\") && isImage) return true;\n  if (accept.includes(\"pdf\") && isPdf) return true;\n  return false;\n}\n\nexport function fileMatchesAcceptForUpload(file: File, accept?: Array<\"image\" | \"pdf\">) {\n  if (!accept || accept.length === 0) return true;\n  const isImage = file.type.startsWith(\"image/\");\n  const isPdf = file.type === \"application/pdf\";\n  if (accept.includes(\"image\") && isImage) return true;\n  if (accept.includes(\"pdf\") && isPdf) return true;\n  return false;\n}\n\nexport function fileNameFromPath(path: string) {\n  return path.split(\"/\").pop() ?? path;\n}\n\nexport function isImagePath(path: string) {\n  return /\\.(png|jpe?g|webp|gif)$/i.test(path);\n}\n"],"mappings":"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","names":[]}