@digiko-npm/cms 0.1.1 → 0.2.0

package/dist/r2/index.js

@@ -74,9 +74,93 @@ function uploadToR2(url, file, contentType, onProgress) {
     xhr.send(file);
   });
 }
+
+// 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}`);
+  }
+}
 export {
+  createPresignedUploadUrl,
   createR2Client,
+  deleteMedia,
   getR2Bucket,
   getR2PublicUrl,
+  insertMedia,
+  listMedia,
   uploadFile
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digiko-npm/cms",
-  "version": "0.1.1",
-  "description": "Reusable CMS utilities — Supabase, Cloudflare R2, auth, sessions.",
+  "version": "0.2.0",
+  "description": "Reusable CMS utilities — Supabase, Cloudflare R2, auth, sessions, media management.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -46,6 +46,11 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/types/index.js",
       "default": "./dist/types/index.js"
+    },
+    "./media": {
+      "types": "./dist/media/index.d.ts",
+      "import": "./dist/media/index.js",
+      "default": "./dist/media/index.js"
     }
   },
   "files": [
@@ -68,7 +73,10 @@
     "@aws-sdk/s3-request-presigner": "^3.0.0",
     "@supabase/supabase-js": "^2.0.0",
     "@upstash/redis": "^1.0.0",
-    "next": ">=14.0.0"
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "lucide-react": ">=0.300.0"
   },
   "peerDependenciesMeta": {
     "@aws-sdk/client-s3": {
@@ -82,6 +90,15 @@
     },
     "next": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -89,8 +106,13 @@
     "@aws-sdk/s3-request-presigner": "^3.986.0",
     "@supabase/supabase-js": "^2.95.0",
     "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@upstash/redis": "^1.36.0",
+    "lucide-react": "^0.469.0",
     "next": "16.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5"
   },
@@ -104,7 +126,9 @@
     "supabase",
     "cloudflare-r2",
     "admin",
-    "auth"
+    "auth",
+    "media",
+    "upload"
   ],
   "dependencies": {
     "otpauth": "^9.5.0"

package/src/index.ts

@@ -5,6 +5,14 @@ export { createAdminClient, createPublicClient } from './supabase/server'
 // Cloudflare R2
 export { createR2Client, getR2Bucket, getR2PublicUrl } from './r2/client'
 export { uploadFile, type UploadOptions, type UploadResult } from './r2/upload'
+export { createPresignedUploadUrl, type PresignOptions, type PresignResult } from './r2/presign'
+export {
+  listMedia,
+  insertMedia,
+  deleteMedia,
+  type MediaListOptions,
+  type MediaListResult,
+} from './r2/media-crud'
 
 // Auth
 export { hashPassword, verifyPassword } from './auth/password'

package/src/media/MediaPicker.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { X, Search, Upload } from 'lucide-react'
+import { MediaUploader } from './MediaUploader'
+import type { UploadConfig } from '../types/config'
+import type { MediaRecord } from '../types/media'
+
+export 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
+}
+
+export function MediaPicker({
+  isOpen,
+  onClose,
+  onSelect,
+  uploadConfig,
+  filter,
+  fetchFn,
+}: MediaPickerProps) {
+  const [items, setItems] = useState<MediaRecord[]>([])
+  const [loading, setLoading] = useState(false)
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [showUploader, setShowUploader] = useState(false)
+
+  const doFetch = fetchFn ?? fetch
+
+  const fetchMedia = useCallback(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 (
+    <div className="media-picker">
+      {/* Backdrop */}
+      <div className="media-picker__backdrop" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="media-picker__panel">
+        {/* Header */}
+        <div className="media-picker__header">
+          <h3 className="ds-text-lg ds-font-medium">Media Library</h3>
+          <div className="ds-flex ds-items-center ds-gap-2">
+            <button
+              onClick={() => setShowUploader(!showUploader)}
+              className="ds-btn ds-btn--secondary ds-btn--sm"
+              type="button"
+            >
+              <Upload size={14} />
+              Upload
+            </button>
+            <button onClick={onClose} className="ds-btn ds-btn--ghost ds-btn--sm" type="button">
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+
+        {/* Upload zone */}
+        {showUploader && (
+          <div className="ds-border-b ds-p-4">
+            <MediaUploader
+              uploadConfig={uploadConfig}
+              onUpload={() => {
+                setShowUploader(false)
+                fetchMedia()
+              }}
+            />
+          </div>
+        )}
+
+        {/* Search */}
+        <div className="ds-border-b ds-px-5 ds-py-3">
+          <div className="ds-relative">
+            <Search size={16} className="search-bar__icon" />
+            <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"
+            />
+          </div>
+        </div>
+
+        {/* Grid */}
+        <div className="ds-flex-1 ds-overflow-y-auto ds-p-4">
+          {loading ? (
+            <div className="ds-flex ds-items-center ds-justify-center ds-py-12">
+              <div className="spinner spinner--md spinner--default" />
+            </div>
+          ) : items.length === 0 ? (
+            <div className="ds-flex ds-flex-col ds-items-center ds-justify-center ds-py-12 ds-text-center">
+              <p className="ds-text-sm ds-text-secondary">No media found</p>
+              <p className="ds-mt-1 ds-text-xs ds-text-tertiary">
+                Upload files to get started
+              </p>
+            </div>
+          ) : (
+            <div className="ds-grid ds-grid-cols-4 ds-gap-3">
+              {items.map((item) => {
+                const isImage = item.mime_type.startsWith('image/')
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => onSelect(item)}
+                    className="media-grid-item ds-aspect-square"
+                    type="button"
+                  >
+                    {isImage ? (
+                      /* eslint-disable-next-line @next/next/no-img-element */
+                      <img
+                        src={item.url}
+                        alt={item.alt_text ?? item.original_name}
+                        className="ds-h-full ds-w-full ds-object-cover"
+                      />
+                    ) : (
+                      <div className="ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-bg-elevated">
+                        <span className="ds-text-xs ds-text-tertiary">
+                          {item.mime_type.split('/')[1]?.toUpperCase()}
+                        </span>
+                      </div>
+                    )}
+                    <div className="media-grid-item__overlay" />
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="ds-flex ds-items-center ds-justify-center ds-gap-2 ds-border-t ds-px-5 ds-py-3">
+            <button
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="ds-btn ds-btn--ghost ds-btn--sm"
+              type="button"
+            >
+              Previous
+            </button>
+            <span className="ds-text-sm ds-text-secondary">
+              {page} / {totalPages}
+            </span>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="ds-btn ds-btn--ghost ds-btn--sm"
+              type="button"
+            >
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/media/MediaUploader.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { useState, useCallback, useRef } from 'react'
+import { Upload, X, Image as ImageIcon, Film } from 'lucide-react'
+import { uploadFile } from '../r2/upload'
+import type { UploadConfig } from '../types/config'
+
+export 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
+}
+
+const ACCEPTED_TYPES = {
+  image: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
+  video: ['video/mp4', 'video/webm'],
+}
+
+const ALL_ACCEPTED = [...ACCEPTED_TYPES.image, ...ACCEPTED_TYPES.video]
+
+export function MediaUploader({
+  value,
+  uploadConfig,
+  folder = 'media',
+  accept,
+  onUpload,
+  onRemove,
+  className,
+}: MediaUploaderProps) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [isUploading, setIsUploading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const acceptedTypes = accept
+    ? accept.split(',').map((t) => t.trim())
+    : ALL_ACCEPTED
+
+  const handleFile = useCallback(
+    async (file: 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: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+      const file = e.dataTransfer.files[0]
+      if (file) handleFile(file)
+    },
+    [handleFile]
+  )
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      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 (
+      <div className={cls}>
+        {isImage && (
+          <div className="ds-relative ds-w-full" style={{ height: '12rem' }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={value}
+              alt="Uploaded"
+              className="ds-h-full ds-w-full ds-object-cover"
+            />
+          </div>
+        )}
+        {isVideo && (
+          <video
+            src={value}
+            className="ds-w-full ds-object-cover"
+            style={{ height: '12rem' }}
+            muted
+          />
+        )}
+        {!isImage && !isVideo && (
+          <div
+            className="ds-flex ds-items-center ds-justify-center ds-bg-elevated ds-text-secondary"
+            style={{ height: '12rem' }}
+          >
+            <span className="ds-text-sm">{value.split('/').pop()}</span>
+          </div>
+        )}
+        {onRemove && (
+          <button onClick={onRemove} className="media-preview__remove" type="button">
+            <X size={14} className="ds-text-secondary" />
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault()
+        setIsDragging(true)
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current?.click()}
+      className={dropCls}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={acceptedTypes.join(',')}
+        onChange={handleChange}
+        className="ds-hidden"
+      />
+
+      {isUploading ? (
+        <>
+          <div className="progress-bar">
+            <div
+              className="progress-bar__fill"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <span className="ds-text-sm ds-text-secondary">{progress}%</span>
+        </>
+      ) : (
+        <>
+          <div className="ds-flex ds-gap-2 ds-text-tertiary">
+            <ImageIcon size={20} />
+            <Film size={20} />
+            <Upload size={20} />
+          </div>
+          <div className="ds-text-center">
+            <p className="ds-text-sm ds-font-medium ds-text-secondary">
+              Drop a file or click to upload
+            </p>
+            <p className="ds-mt-1 ds-text-xs ds-text-tertiary">
+              JPG, PNG, WebP, GIF, MP4, WebM
+            </p>
+          </div>
+        </>
+      )}
+
+      {error && <p className="ds-text-xs ds-text-error">{error}</p>}
+    </div>
+  )
+}

package/src/media/index.ts

@@ -0,0 +1,2 @@
+export { MediaUploader, type MediaUploaderProps } from './MediaUploader'
+export { MediaPicker, type MediaPickerProps } from './MediaPicker'

package/src/r2/index.ts

@@ -1,2 +1,10 @@
 export { createR2Client, getR2Bucket, getR2PublicUrl } from './client'
 export { uploadFile, type UploadOptions, type UploadResult } from './upload'
+export { createPresignedUploadUrl, type PresignOptions, type PresignResult } from './presign'
+export {
+  listMedia,
+  insertMedia,
+  deleteMedia,
+  type MediaListOptions,
+  type MediaListResult,
+} from './media-crud'