@digiko-npm/cms 0.1.0 → 0.2.0

package/dist/r2/index.d.ts

@@ -1,6 +1,7 @@
 import { S3Client } from '@aws-sdk/client-s3';
 import { R as R2Config, U as UploadConfig } from '../config-qNdTlg1g.js';
-import { a as MediaRecord } from '../media-ExBfXePZ.js';
+import { a as MediaRecord, M as MediaInsert } from '../media-ExBfXePZ.js';
+import { SupabaseClient } from '@supabase/supabase-js';
 
 /**
  * Create a Cloudflare R2 client (S3-compatible).
@@ -31,4 +32,61 @@ interface UploadResult {
  */
 declare function uploadFile(config: UploadConfig, { file, folder, onProgress }: UploadOptions): Promise<UploadResult>;
 
-export { type UploadOptions, type UploadResult, createR2Client, getR2Bucket, getR2PublicUrl, uploadFile };
+interface PresignOptions {
+    /** Original filename (will be sanitized) */
+    filename: string;
+    /** MIME type of the file */
+    contentType: string;
+    /** Storage folder (e.g. 'media', 'shots', 'projects') */
+    folder?: string;
+    /** Presigned URL expiration in seconds. Default: 600 (10 min) */
+    expiresIn?: number;
+}
+interface PresignResult {
+    /** Presigned PUT URL for direct browser upload */
+    uploadUrl: string;
+    /** Public URL where the file will be accessible */
+    publicUrl: string;
+    /** R2 object key */
+    key: string;
+}
+/**
+ * Generate a presigned PUT URL for direct browser-to-R2 upload.
+ * The server never handles file bytes — Vercel/edge-friendly.
+ */
+declare function createPresignedUploadUrl(config: R2Config, options: PresignOptions): Promise<PresignResult>;
+
+interface MediaListOptions {
+    /** 1-based page number. Default: 1 */
+    page?: number;
+    /** Items per page. Default: 24 */
+    limit?: number;
+    /** Filter by MIME type prefix: 'image' or 'video' */
+    type?: string;
+    /** Search query (matches original_name and alt_text) */
+    search?: string;
+}
+interface MediaListResult {
+    items: MediaRecord[];
+    total: number;
+    page: number;
+    limit: number;
+    totalPages: number;
+}
+/**
+ * List media records with pagination and filtering.
+ * Requires a Supabase admin client (service role) for full access.
+ */
+declare function listMedia(supabase: SupabaseClient, tableName: string, options?: MediaListOptions): Promise<MediaListResult>;
+/**
+ * Register a completed upload in the database.
+ * Called after the browser finishes uploading to R2.
+ */
+declare function insertMedia(supabase: SupabaseClient, tableName: string, data: MediaInsert): Promise<MediaRecord>;
+/**
+ * Delete a media record and its R2 object.
+ * Attempts R2 deletion first but always cleans up the DB record.
+ */
+declare function deleteMedia(supabase: SupabaseClient, tableName: string, r2Config: R2Config, id: string): Promise<void>;
+
+export { type MediaListOptions, type MediaListResult, type PresignOptions, type PresignResult, type UploadOptions, type UploadResult, createPresignedUploadUrl, createR2Client, deleteMedia, getR2Bucket, getR2PublicUrl, insertMedia, listMedia, uploadFile };

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,43 +1,56 @@
 {
   "name": "@digiko-npm/cms",
-  "version": "0.1.0",
-  "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",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.js"
     },
     "./supabase": {
+      "types": "./dist/supabase/index.d.ts",
       "import": "./dist/supabase/index.js",
-      "types": "./dist/supabase/index.d.ts"
+      "default": "./dist/supabase/index.js"
     },
     "./r2": {
+      "types": "./dist/r2/index.d.ts",
       "import": "./dist/r2/index.js",
-      "types": "./dist/r2/index.d.ts"
+      "default": "./dist/r2/index.js"
     },
     "./auth": {
+      "types": "./dist/auth/index.d.ts",
       "import": "./dist/auth/index.js",
-      "types": "./dist/auth/index.d.ts"
+      "default": "./dist/auth/index.js"
     },
     "./session": {
+      "types": "./dist/session/index.d.ts",
       "import": "./dist/session/index.js",
-      "types": "./dist/session/index.d.ts"
+      "default": "./dist/session/index.js"
     },
     "./next": {
+      "types": "./dist/next/index.d.ts",
       "import": "./dist/next/index.js",
-      "types": "./dist/next/index.d.ts"
+      "default": "./dist/next/index.js"
     },
     "./http": {
+      "types": "./dist/http/index.d.ts",
       "import": "./dist/http/index.js",
-      "types": "./dist/http/index.d.ts"
+      "default": "./dist/http/index.js"
     },
     "./types": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/types/index.js",
-      "types": "./dist/types/index.d.ts"
+      "default": "./dist/types/index.js"
+    },
+    "./media": {
+      "types": "./dist/media/index.d.ts",
+      "import": "./dist/media/index.js",
+      "default": "./dist/media/index.js"
     }
   },
   "files": [
@@ -56,11 +69,14 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@supabase/supabase-js": "^2.0.0",
     "@aws-sdk/client-s3": "^3.0.0",
     "@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": {
@@ -74,15 +90,29 @@
     },
     "next": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@supabase/supabase-js": "^2.95.0",
     "@aws-sdk/client-s3": "^3.986.0",
     "@aws-sdk/s3-request-presigner": "^3.986.0",
-    "@upstash/redis": "^1.36.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"
   },
@@ -96,6 +126,11 @@
     "supabase",
     "cloudflare-r2",
     "admin",
-    "auth"
-  ]
+    "auth",
+    "media",
+    "upload"
+  ],
+  "dependencies": {
+    "otpauth": "^9.5.0"
+  }
 }

package/src/auth/index.ts

@@ -1,2 +1,3 @@
 export { hashPassword, verifyPassword } from './password'
 export { generateSessionToken } from './token'
+export { generateTotpSecret, generateTotpUri, verifyTotpCode, type TotpConfig } from './totp'

package/src/auth/totp.ts

@@ -0,0 +1,72 @@
+import { TOTP, Secret } from 'otpauth'
+
+/** Configuration for TOTP operations */
+export 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
+}
+
+const DEFAULTS = {
+  algorithm: 'SHA1',
+  digits: 6,
+  period: 30,
+  window: 1,
+} as const
+
+/**
+ * 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.
+ */
+export function generateTotpSecret(): string {
+  const secret = new Secret({ size: 20 })
+  return secret.base32
+}
+
+/**
+ * Generate an otpauth:// URI for registering with authenticator apps.
+ * Can be entered manually in 1Password or encoded as a QR code.
+ */
+export function generateTotpUri(
+  secret: string,
+  accountName: string,
+  issuer: string,
+  config?: TotpConfig
+): string {
+  const totp = new TOTP({
+    issuer,
+    label: accountName,
+    algorithm: config?.algorithm ?? DEFAULTS.algorithm,
+    digits: config?.digits ?? DEFAULTS.digits,
+    period: config?.period ?? DEFAULTS.period,
+    secret: Secret.fromBase32(secret),
+  })
+  return totp.toString()
+}
+
+/**
+ * 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).
+ */
+export function verifyTotpCode(
+  code: string,
+  secret: string,
+  config?: TotpConfig
+): boolean {
+  const totp = new TOTP({
+    algorithm: config?.algorithm ?? DEFAULTS.algorithm,
+    digits: config?.digits ?? DEFAULTS.digits,
+    period: config?.period ?? DEFAULTS.period,
+    secret: Secret.fromBase32(secret),
+  })
+
+  const delta = totp.validate({ token: code, window: config?.window ?? DEFAULTS.window })
+  return delta !== null
+}

package/src/index.ts

@@ -5,10 +5,19 @@ 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'
 export { generateSessionToken } from './auth/token'
+export { generateTotpSecret, generateTotpUri, verifyTotpCode, type TotpConfig } from './auth/totp'
 
 // Sessions
 export { createSessionStore, getDefaultSessionDuration, type SessionStore } from './session/store'

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>
+  )
+}