@digiko-npm/cms 0.1.0 → 0.2.0

package/dist/auth/index.d.ts

@@ -17,4 +17,33 @@ declare function verifyPassword(password: string, salt: string, storedHash: stri
  */
 declare function generateSessionToken(bytes?: number): string;
 
-export { generateSessionToken, hashPassword, verifyPassword };
+/** Configuration for TOTP operations */
+interface TotpConfig {
+    /** Hash algorithm. Default: 'SHA1' (required for 1Password compatibility) */
+    algorithm?: string;
+    /** Number of digits. Default: 6 */
+    digits?: number;
+    /** Time step in seconds. Default: 30 */
+    period?: number;
+    /** Validation window (number of periods to check before/after). Default: 1 */
+    window?: number;
+}
+/**
+ * Generate a new TOTP secret.
+ * Returns a base32-encoded string suitable for storing in env vars.
+ * Uses 20 bytes (160 bits) as recommended by RFC 4226.
+ */
+declare function generateTotpSecret(): string;
+/**
+ * Generate an otpauth:// URI for registering with authenticator apps.
+ * Can be entered manually in 1Password or encoded as a QR code.
+ */
+declare function generateTotpUri(secret: string, accountName: string, issuer: string, config?: TotpConfig): string;
+/**
+ * Verify a 6-digit TOTP code against a secret.
+ * Returns true if the code is valid within the configured time window.
+ * Uses timing-safe comparison internally (handled by otpauth library).
+ */
+declare function verifyTotpCode(code: string, secret: string, config?: TotpConfig): boolean;
+
+export { type TotpConfig, generateSessionToken, generateTotpSecret, generateTotpUri, hashPassword, verifyPassword, verifyTotpCode };

package/dist/auth/index.js

@@ -27,8 +27,45 @@ var DEFAULT_TOKEN_BYTES = 32;
 function generateSessionToken(bytes) {
   return crypto2.randomBytes(bytes ?? DEFAULT_TOKEN_BYTES).toString("hex");
 }
+
+// src/auth/totp.ts
+import { TOTP, Secret } from "otpauth";
+var DEFAULTS2 = {
+  algorithm: "SHA1",
+  digits: 6,
+  period: 30,
+  window: 1
+};
+function generateTotpSecret() {
+  const secret = new Secret({ size: 20 });
+  return secret.base32;
+}
+function generateTotpUri(secret, accountName, issuer, config) {
+  const totp = new TOTP({
+    issuer,
+    label: accountName,
+    algorithm: config?.algorithm ?? DEFAULTS2.algorithm,
+    digits: config?.digits ?? DEFAULTS2.digits,
+    period: config?.period ?? DEFAULTS2.period,
+    secret: Secret.fromBase32(secret)
+  });
+  return totp.toString();
+}
+function verifyTotpCode(code, secret, config) {
+  const totp = new TOTP({
+    algorithm: config?.algorithm ?? DEFAULTS2.algorithm,
+    digits: config?.digits ?? DEFAULTS2.digits,
+    period: config?.period ?? DEFAULTS2.period,
+    secret: Secret.fromBase32(secret)
+  });
+  const delta = totp.validate({ token: code, window: config?.window ?? DEFAULTS2.window });
+  return delta !== null;
+}
 export {
   generateSessionToken,
+  generateTotpSecret,
+  generateTotpUri,
   hashPassword,
-  verifyPassword
+  verifyPassword,
+  verifyTotpCode
 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { createAdminClient, createBrowserClient, createPublicClient } from './supabase/index.js';
-export { UploadOptions, UploadResult, createR2Client, getR2Bucket, getR2PublicUrl, uploadFile } from './r2/index.js';
-export { generateSessionToken, hashPassword, verifyPassword } from './auth/index.js';
+export { MediaListOptions, MediaListResult, PresignOptions, PresignResult, UploadOptions, UploadResult, createPresignedUploadUrl, createR2Client, deleteMedia, getR2Bucket, getR2PublicUrl, insertMedia, listMedia, uploadFile } from './r2/index.js';
+export { TotpConfig, generateSessionToken, generateTotpSecret, generateTotpUri, hashPassword, verifyPassword, verifyTotpCode } from './auth/index.js';
 export { RateLimiter, SessionStore, createRateLimiter, createSessionStore, getDefaultSessionDuration } from './session/index.js';
 export { HTTP_STATUS, HttpStatus } from './http/index.js';
 export { A as AuthConfig, R as R2Config, a as RateLimiterConfig, b as RequestVerifierConfig, S as SessionStoreConfig, c as SupabaseConfig, U as UploadConfig } from './config-qNdTlg1g.js';

package/dist/index.js

@@ -93,8 +93,88 @@ function uploadToR2(url, file, contentType, onProgress) {
   });
 }
 
+// src/r2/presign.ts
+import { PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+function sanitizeFilename(filename) {
+  return filename.toLowerCase().replace(/[^a-z0-9.\-_]/g, "-").replace(/-+/g, "-");
+}
+async function createPresignedUploadUrl(config, options) {
+  const { filename, contentType, folder = "media", expiresIn = 600 } = options;
+  const sanitized = sanitizeFilename(filename);
+  const key = `${folder}/${crypto.randomUUID()}-${sanitized}`;
+  const r2 = createR2Client(config);
+  const command = new PutObjectCommand({
+    Bucket: config.bucketName,
+    Key: key,
+    ContentType: contentType
+  });
+  const uploadUrl = await getSignedUrl(r2, command, { expiresIn });
+  const publicUrl = `${config.publicUrl}/${key}`;
+  return { uploadUrl, publicUrl, key };
+}
+
+// src/r2/media-crud.ts
+import { DeleteObjectCommand } from "@aws-sdk/client-s3";
+async function listMedia(supabase, tableName, options = {}) {
+  const { page = 1, limit = 24, type, search } = options;
+  const offset = (page - 1) * limit;
+  let query = supabase.from(tableName).select("*", { count: "exact" }).order("created_at", { ascending: false }).range(offset, offset + limit - 1);
+  if (type) {
+    query = query.like("mime_type", `${type}/%`);
+  }
+  if (search) {
+    query = query.or(`original_name.ilike.%${search}%,alt_text.ilike.%${search}%`);
+  }
+  const { data, error, count } = await query;
+  if (error) {
+    throw new Error(`Failed to list media: ${error.message}`);
+  }
+  return {
+    items: data ?? [],
+    total: count ?? 0,
+    page,
+    limit,
+    totalPages: Math.ceil((count ?? 0) / limit)
+  };
+}
+async function insertMedia(supabase, tableName, data) {
+  const { data: record, error } = await supabase.from(tableName).insert({
+    filename: data.filename,
+    original_name: data.original_name,
+    mime_type: data.mime_type,
+    size_bytes: data.size_bytes,
+    url: data.url,
+    width: data.width ?? null,
+    height: data.height ?? null,
+    alt_text: data.alt_text ?? null
+  }).select().single();
+  if (error) {
+    throw new Error(`Failed to insert media: ${error.message}`);
+  }
+  return record;
+}
+async function deleteMedia(supabase, tableName, r2Config, id) {
+  const { data: media, error: fetchError } = await supabase.from(tableName).select("*").eq("id", id).single();
+  if (fetchError || !media) {
+    throw new Error("Media not found");
+  }
+  const record = media;
+  const key = record.url.replace(`${r2Config.publicUrl}/`, "");
+  try {
+    const r2 = createR2Client(r2Config);
+    await r2.send(new DeleteObjectCommand({ Bucket: r2Config.bucketName, Key: key }));
+  } catch {
+    console.error(`Failed to delete R2 object: ${key}`);
+  }
+  const { error: deleteError } = await supabase.from(tableName).delete().eq("id", id);
+  if (deleteError) {
+    throw new Error(`Failed to delete media record: ${deleteError.message}`);
+  }
+}
+
 // src/auth/password.ts
-import crypto from "crypto";
+import crypto2 from "crypto";
 var DEFAULTS = {
   iterations: 1e5,
   keyLength: 64,
@@ -104,7 +184,7 @@ function hashPassword(password, salt, config) {
   const iterations = config?.iterations ?? DEFAULTS.iterations;
   const keyLength = config?.keyLength ?? DEFAULTS.keyLength;
   const digest = config?.digest ?? DEFAULTS.digest;
-  return crypto.pbkdf2Sync(password, salt, iterations, keyLength, digest).toString("hex");
+  return crypto2.pbkdf2Sync(password, salt, iterations, keyLength, digest).toString("hex");
 }
 function verifyPassword(password, salt, storedHash, config) {
   const inputHash = hashPassword(password, salt, config);
@@ -113,14 +193,48 @@ function verifyPassword(password, salt, storedHash, config) {
   if (storedBuffer.length !== inputBuffer.length) {
     return false;
   }
-  return crypto.timingSafeEqual(storedBuffer, inputBuffer);
+  return crypto2.timingSafeEqual(storedBuffer, inputBuffer);
 }
 
 // src/auth/token.ts
-import crypto2 from "crypto";
+import crypto3 from "crypto";
 var DEFAULT_TOKEN_BYTES = 32;
 function generateSessionToken(bytes) {
-  return crypto2.randomBytes(bytes ?? DEFAULT_TOKEN_BYTES).toString("hex");
+  return crypto3.randomBytes(bytes ?? DEFAULT_TOKEN_BYTES).toString("hex");
+}
+
+// src/auth/totp.ts
+import { TOTP, Secret } from "otpauth";
+var DEFAULTS2 = {
+  algorithm: "SHA1",
+  digits: 6,
+  period: 30,
+  window: 1
+};
+function generateTotpSecret() {
+  const secret = new Secret({ size: 20 });
+  return secret.base32;
+}
+function generateTotpUri(secret, accountName, issuer, config) {
+  const totp = new TOTP({
+    issuer,
+    label: accountName,
+    algorithm: config?.algorithm ?? DEFAULTS2.algorithm,
+    digits: config?.digits ?? DEFAULTS2.digits,
+    period: config?.period ?? DEFAULTS2.period,
+    secret: Secret.fromBase32(secret)
+  });
+  return totp.toString();
+}
+function verifyTotpCode(code, secret, config) {
+  const totp = new TOTP({
+    algorithm: config?.algorithm ?? DEFAULTS2.algorithm,
+    digits: config?.digits ?? DEFAULTS2.digits,
+    period: config?.period ?? DEFAULTS2.period,
+    secret: Secret.fromBase32(secret)
+  });
+  const delta = totp.validate({ token: code, window: config?.window ?? DEFAULTS2.window });
+  return delta !== null;
 }
 
 // src/session/store.ts
@@ -160,7 +274,7 @@ function getDefaultSessionDuration() {
 
 // src/session/rate-limit.ts
 import { Redis as Redis2 } from "@upstash/redis";
-var DEFAULTS2 = {
+var DEFAULTS3 = {
   maxAttempts: 10,
   windowMs: 15 * 60 * 1e3
   // 15 minutes
@@ -170,8 +284,8 @@ function createRateLimiter(config) {
     url: config.redisUrl,
     token: config.redisToken
   });
-  const maxAttempts = config.maxAttempts ?? DEFAULTS2.maxAttempts;
-  const windowMs = config.windowMs ?? DEFAULTS2.windowMs;
+  const maxAttempts = config.maxAttempts ?? DEFAULTS3.maxAttempts;
+  const windowMs = config.windowMs ?? DEFAULTS3.windowMs;
   const rateLimitKey = (key) => `${config.keyPrefix}ratelimit:${key}`;
   return {
     async check(key) {
@@ -219,15 +333,22 @@ export {
   HTTP_STATUS,
   createAdminClient,
   createBrowserClient,
+  createPresignedUploadUrl,
   createPublicClient,
   createR2Client,
   createRateLimiter,
   createSessionStore,
+  deleteMedia,
   generateSessionToken,
+  generateTotpSecret,
+  generateTotpUri,
   getDefaultSessionDuration,
   getR2Bucket,
   getR2PublicUrl,
   hashPassword,
+  insertMedia,
+  listMedia,
   uploadFile,
-  verifyPassword
+  verifyPassword,
+  verifyTotpCode
 };

package/dist/media/index.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { U as UploadConfig } from '../config-qNdTlg1g.js';
+import { a as MediaRecord } from '../media-ExBfXePZ.js';
+
+interface MediaUploaderProps {
+    /** Current media URL (shows preview when set) */
+    value?: string;
+    /** Upload config with API endpoint paths */
+    uploadConfig: UploadConfig;
+    /** Storage folder (e.g. 'media', 'shots', 'projects'). Default: 'media' */
+    folder?: string;
+    /** Comma-separated MIME types to accept. Default: all image + video types */
+    accept?: string;
+    /** Called after successful upload with public URL and media record ID */
+    onUpload: (url: string, mediaId: string) => void;
+    /** Called when the user removes the current media */
+    onRemove?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+declare function MediaUploader({ value, uploadConfig, folder, accept, onUpload, onRemove, className, }: MediaUploaderProps): react_jsx_runtime.JSX.Element;
+
+interface MediaPickerProps {
+    /** Whether the picker modal is open */
+    isOpen: boolean;
+    /** Called when the user closes the picker */
+    onClose: () => void;
+    /** Called when the user selects a media item */
+    onSelect: (media: MediaRecord) => void;
+    /** Upload config with API endpoint paths */
+    uploadConfig: UploadConfig;
+    /** Filter by MIME type prefix: 'image' or 'video' */
+    filter?: 'image' | 'video';
+    /** Custom fetch function for authenticated requests. Default: window.fetch */
+    fetchFn?: typeof fetch;
+}
+declare function MediaPicker({ isOpen, onClose, onSelect, uploadConfig, filter, fetchFn, }: MediaPickerProps): react_jsx_runtime.JSX.Element | null;
+
+export { MediaPicker, type MediaPickerProps, MediaUploader, type MediaUploaderProps };

package/dist/media/index.js

@@ -0,0 +1,363 @@
+// src/media/MediaUploader.tsx
+import { useState, useCallback, useRef } from "react";
+import { Upload, X, Image as ImageIcon, Film } from "lucide-react";
+
+// src/r2/upload.ts
+async function uploadFile(config, { file, folder = "media", onProgress }) {
+  const presignRes = await fetch(config.uploadEndpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      filename: file.name,
+      contentType: file.type,
+      folder
+    })
+  });
+  if (!presignRes.ok) {
+    throw new Error(`Failed to get upload URL: ${presignRes.status}`);
+  }
+  const { uploadUrl, publicUrl, key } = await presignRes.json();
+  await uploadToR2(uploadUrl, file, file.type, onProgress);
+  const confirmRes = await fetch(config.mediaEndpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      filename: key.split("/").pop(),
+      original_name: file.name,
+      mime_type: file.type,
+      size_bytes: file.size,
+      url: publicUrl
+    })
+  });
+  if (!confirmRes.ok) {
+    throw new Error(`Failed to register upload: ${confirmRes.status}`);
+  }
+  const media = await confirmRes.json();
+  return { url: publicUrl, key, media };
+}
+function uploadToR2(url, file, contentType, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", (e) => {
+      if (e.lengthComputable && onProgress) {
+        onProgress(Math.round(e.loaded / e.total * 100));
+      }
+    });
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve();
+      } else {
+        reject(new Error(`Upload failed with status ${xhr.status}`));
+      }
+    });
+    xhr.addEventListener("error", () => reject(new Error("Upload failed")));
+    xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
+    xhr.open("PUT", url);
+    xhr.setRequestHeader("Content-Type", contentType);
+    xhr.send(file);
+  });
+}
+
+// src/media/MediaUploader.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ACCEPTED_TYPES = {
+  image: ["image/jpeg", "image/png", "image/webp", "image/gif"],
+  video: ["video/mp4", "video/webm"]
+};
+var ALL_ACCEPTED = [...ACCEPTED_TYPES.image, ...ACCEPTED_TYPES.video];
+function MediaUploader({
+  value,
+  uploadConfig,
+  folder = "media",
+  accept,
+  onUpload,
+  onRemove,
+  className
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+  const acceptedTypes = accept ? accept.split(",").map((t) => t.trim()) : ALL_ACCEPTED;
+  const handleFile = useCallback(
+    async (file) => {
+      if (!acceptedTypes.includes(file.type)) {
+        setError(`File type not supported: ${file.type}`);
+        return;
+      }
+      setError(null);
+      setIsUploading(true);
+      setProgress(0);
+      try {
+        const result = await uploadFile(uploadConfig, {
+          file,
+          folder,
+          onProgress: setProgress
+        });
+        onUpload(result.url, result.media.id);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Upload failed");
+      } finally {
+        setIsUploading(false);
+        setProgress(0);
+      }
+    },
+    [acceptedTypes, folder, onUpload, uploadConfig]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+  const isImage = value?.match(/\.(jpg|jpeg|png|webp|gif)(\?|$)/i);
+  const isVideo = value?.match(/\.(mp4|webm)(\?|$)/i);
+  const cls = ["media-preview", className].filter(Boolean).join(" ");
+  const dropCls = [
+    "drop-zone",
+    isDragging && "drop-zone--active",
+    isUploading && "drop-zone--uploading",
+    className
+  ].filter(Boolean).join(" ");
+  if (value) {
+    return /* @__PURE__ */ jsxs("div", { className: cls, children: [
+      isImage && /* @__PURE__ */ jsx("div", { className: "ds-relative ds-w-full", style: { height: "12rem" }, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: value,
+          alt: "Uploaded",
+          className: "ds-h-full ds-w-full ds-object-cover"
+        }
+      ) }),
+      isVideo && /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: value,
+          className: "ds-w-full ds-object-cover",
+          style: { height: "12rem" },
+          muted: true
+        }
+      ),
+      !isImage && !isVideo && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ds-flex ds-items-center ds-justify-center ds-bg-elevated ds-text-secondary",
+          style: { height: "12rem" },
+          children: /* @__PURE__ */ jsx("span", { className: "ds-text-sm", children: value.split("/").pop() })
+        }
+      ),
+      onRemove && /* @__PURE__ */ jsx("button", { onClick: onRemove, className: "media-preview__remove", type: "button", children: /* @__PURE__ */ jsx(X, { size: 14, className: "ds-text-secondary" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragOver: (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+      },
+      onDragLeave: () => setIsDragging(false),
+      onDrop: handleDrop,
+      onClick: () => inputRef.current?.click(),
+      className: dropCls,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: acceptedTypes.join(","),
+            onChange: handleChange,
+            className: "ds-hidden"
+          }
+        ),
+        isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "progress-bar", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "progress-bar__fill",
+              style: { width: `${progress}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { className: "ds-text-sm ds-text-secondary", children: [
+            progress,
+            "%"
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-flex ds-gap-2 ds-text-tertiary", children: [
+            /* @__PURE__ */ jsx(ImageIcon, { size: 20 }),
+            /* @__PURE__ */ jsx(Film, { size: 20 }),
+            /* @__PURE__ */ jsx(Upload, { size: 20 })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "ds-text-sm ds-font-medium ds-text-secondary", children: "Drop a file or click to upload" }),
+            /* @__PURE__ */ jsx("p", { className: "ds-mt-1 ds-text-xs ds-text-tertiary", children: "JPG, PNG, WebP, GIF, MP4, WebM" })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx("p", { className: "ds-text-xs ds-text-error", children: error })
+      ]
+    }
+  );
+}
+
+// src/media/MediaPicker.tsx
+import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+import { X as X2, Search, Upload as Upload2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MediaPicker({
+  isOpen,
+  onClose,
+  onSelect,
+  uploadConfig,
+  filter,
+  fetchFn
+}) {
+  const [items, setItems] = useState2([]);
+  const [loading, setLoading] = useState2(false);
+  const [search, setSearch] = useState2("");
+  const [page, setPage] = useState2(1);
+  const [totalPages, setTotalPages] = useState2(1);
+  const [showUploader, setShowUploader] = useState2(false);
+  const doFetch = fetchFn ?? fetch;
+  const fetchMedia = useCallback2(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ page: String(page), limit: "24" });
+    if (filter) params.set("type", filter);
+    if (search) params.set("q", search);
+    try {
+      const res = await doFetch(`${uploadConfig.mediaEndpoint}?${params}`);
+      const data = await res.json();
+      setItems(data.items ?? []);
+      setTotalPages(data.totalPages ?? 1);
+    } catch {
+      console.error("Failed to fetch media");
+    } finally {
+      setLoading(false);
+    }
+  }, [page, filter, search, doFetch, uploadConfig.mediaEndpoint]);
+  useEffect(() => {
+    if (isOpen) fetchMedia();
+  }, [isOpen, fetchMedia]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "media-picker", children: [
+    /* @__PURE__ */ jsx2("div", { className: "media-picker__backdrop", onClick: onClose }),
+    /* @__PURE__ */ jsxs2("div", { className: "media-picker__panel", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "media-picker__header", children: [
+        /* @__PURE__ */ jsx2("h3", { className: "ds-text-lg ds-font-medium", children: "Media Library" }),
+        /* @__PURE__ */ jsxs2("div", { className: "ds-flex ds-items-center ds-gap-2", children: [
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              onClick: () => setShowUploader(!showUploader),
+              className: "ds-btn ds-btn--secondary ds-btn--sm",
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx2(Upload2, { size: 14 }),
+                "Upload"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("button", { onClick: onClose, className: "ds-btn ds-btn--ghost ds-btn--sm", type: "button", children: /* @__PURE__ */ jsx2(X2, { size: 18 }) })
+        ] })
+      ] }),
+      showUploader && /* @__PURE__ */ jsx2("div", { className: "ds-border-b ds-p-4", children: /* @__PURE__ */ jsx2(
+        MediaUploader,
+        {
+          uploadConfig,
+          onUpload: () => {
+            setShowUploader(false);
+            fetchMedia();
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx2("div", { className: "ds-border-b ds-px-5 ds-py-3", children: /* @__PURE__ */ jsxs2("div", { className: "ds-relative", children: [
+        /* @__PURE__ */ jsx2(Search, { size: 16, className: "search-bar__icon" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search media...",
+            value: search,
+            onChange: (e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            },
+            onKeyDown: (e) => e.key === "Enter" && fetchMedia(),
+            className: "search-bar__input"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx2("div", { className: "ds-flex-1 ds-overflow-y-auto ds-p-4", children: loading ? /* @__PURE__ */ jsx2("div", { className: "ds-flex ds-items-center ds-justify-center ds-py-12", children: /* @__PURE__ */ jsx2("div", { className: "spinner spinner--md spinner--default" }) }) : items.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: "ds-flex ds-flex-col ds-items-center ds-justify-center ds-py-12 ds-text-center", children: [
+        /* @__PURE__ */ jsx2("p", { className: "ds-text-sm ds-text-secondary", children: "No media found" }),
+        /* @__PURE__ */ jsx2("p", { className: "ds-mt-1 ds-text-xs ds-text-tertiary", children: "Upload files to get started" })
+      ] }) : /* @__PURE__ */ jsx2("div", { className: "ds-grid ds-grid-cols-4 ds-gap-3", children: items.map((item) => {
+        const isImage = item.mime_type.startsWith("image/");
+        return /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: () => onSelect(item),
+            className: "media-grid-item ds-aspect-square",
+            type: "button",
+            children: [
+              isImage ? (
+                /* eslint-disable-next-line @next/next/no-img-element */
+                /* @__PURE__ */ jsx2(
+                  "img",
+                  {
+                    src: item.url,
+                    alt: item.alt_text ?? item.original_name,
+                    className: "ds-h-full ds-w-full ds-object-cover"
+                  }
+                )
+              ) : /* @__PURE__ */ jsx2("div", { className: "ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-bg-elevated", children: /* @__PURE__ */ jsx2("span", { className: "ds-text-xs ds-text-tertiary", children: item.mime_type.split("/")[1]?.toUpperCase() }) }),
+              /* @__PURE__ */ jsx2("div", { className: "media-grid-item__overlay" })
+            ]
+          },
+          item.id
+        );
+      }) }) }),
+      totalPages > 1 && /* @__PURE__ */ jsxs2("div", { className: "ds-flex ds-items-center ds-justify-center ds-gap-2 ds-border-t ds-px-5 ds-py-3", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setPage((p) => Math.max(1, p - 1)),
+            disabled: page === 1,
+            className: "ds-btn ds-btn--ghost ds-btn--sm",
+            type: "button",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "ds-text-sm ds-text-secondary", children: [
+          page,
+          " / ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+            disabled: page === totalPages,
+            className: "ds-btn ds-btn--ghost ds-btn--sm",
+            type: "button",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  MediaPicker,
+  MediaUploader
+};