@cedros/data-react 0.1.0

package/dist/admin/sections/media/MediaDetail.d.ts

@@ -0,0 +1,12 @@
+import type { PluginContext } from "../../types.js";
+import type { Asset } from "./types.js";
+interface MediaDetailProps {
+    asset: Asset;
+    pluginContext: PluginContext;
+    canWrite: boolean;
+    onClose: () => void;
+    onDeleted: () => void;
+    onUpdated: (asset: Asset) => void;
+}
+export default function MediaDetail({ asset, pluginContext, canWrite, onClose, onDeleted, onUpdated }: MediaDetailProps): React.JSX.Element;
+export {};

package/dist/admin/sections/media/MediaDetail.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { requestJson } from "../../api.js";
+import { AdminButton, StatusNotice, TextInput } from "../../components.js";
+export default function MediaDetail({ asset, pluginContext, canWrite, onClose, onDeleted, onUpdated }) {
+    const [altText, setAltText] = useState(asset.alt_text || "");
+    const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [status, setStatus] = useState(null);
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setStatus(null);
+        try {
+            const updated = await requestJson(pluginContext, `/admin/media/assets/${asset.id}`, { method: "PUT", body: { alt_text: altText || null } });
+            onUpdated(updated);
+            setStatus({ tone: "success", message: "Saved." });
+        }
+        catch (err) {
+            setStatus({ tone: "error", message: err.message });
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [altText, asset.id, pluginContext, onUpdated]);
+    const handleDelete = useCallback(async () => {
+        setDeleting(true);
+        setStatus(null);
+        try {
+            await requestJson(pluginContext, `/admin/media/assets/${asset.id}`, {
+                method: "DELETE"
+            });
+            onDeleted();
+        }
+        catch (err) {
+            setStatus({ tone: "error", message: err.message });
+            setDeleting(false);
+        }
+    }, [asset.id, pluginContext, onDeleted]);
+    const originalUrl = variantUrl(asset, null);
+    return (_jsxs("div", { className: "cedros-media-detail", children: [_jsxs("div", { className: "cedros-media-detail__header", children: [_jsx("h3", { className: "cedros-data-card__title", children: asset.filename }), _jsx(AdminButton, { variant: "ghost", size: "sm", onClick: onClose, children: "Close" })] }), _jsx("img", { className: "cedros-media-detail__preview", src: originalUrl, alt: asset.alt_text || asset.filename }), _jsxs("div", { className: "cedros-media-detail__meta", children: [_jsxs("div", { className: "cedros-data-key", children: [asset.content_type, " \u00B7 ", formatBytes(asset.size_bytes), asset.width && asset.height ? ` \u00B7 ${asset.width}\u00D7${asset.height}` : ""] }), _jsxs("div", { className: "cedros-data-key", style: { marginTop: "0.25rem" }, children: ["Uploaded ", new Date(asset.created_at).toLocaleDateString()] })] }), _jsxs("div", { className: "cedros-media-detail__urls", children: [_jsx("span", { className: "cedros-data-label", children: "URLs" }), _jsx(UrlRow, { label: "Original", url: originalUrl }), asset.variants.map((v) => (_jsx(UrlRow, { label: v.suffix, url: v.url }, v.suffix)))] }), _jsx(TextInput, { label: "Alt text", value: altText, onChange: (e) => setAltText(e.target.value), placeholder: "Describe this image", disabled: !canWrite }), _jsxs("div", { className: "cedros-data-actions", children: [_jsx(AdminButton, { variant: "primary", size: "sm", onClick: () => void handleSave(), disabled: saving || !canWrite, children: saving ? "Saving..." : "Save" }), !confirmDelete ? (_jsx(AdminButton, { variant: "danger", size: "sm", onClick: () => setConfirmDelete(true), disabled: deleting || !canWrite, children: "Delete" })) : (_jsxs(_Fragment, { children: [_jsx(AdminButton, { variant: "danger", size: "sm", onClick: () => void handleDelete(), disabled: deleting, children: deleting ? "Deleting..." : "Confirm Delete" }), _jsx(AdminButton, { variant: "ghost", size: "sm", onClick: () => setConfirmDelete(false), disabled: deleting, children: "Cancel" })] }))] }), status && _jsx(StatusNotice, { tone: status.tone, message: status.message })] }));
+}
+function UrlRow({ label, url }) {
+    const [copied, setCopied] = useState(false);
+    const copy = () => {
+        void navigator.clipboard.writeText(url).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        });
+    };
+    return (_jsxs("div", { className: "cedros-media-url-row", children: [_jsx("span", { className: "cedros-data-pill", children: label }), _jsx("code", { className: "cedros-data-key cedros-media-url-row__url", children: url }), _jsx(AdminButton, { variant: "ghost", size: "sm", onClick: copy, children: copied ? "Copied" : "Copy" })] }));
+}
+function variantUrl(asset, suffix) {
+    if (suffix) {
+        const v = asset.variants.find((v) => v.suffix === suffix);
+        if (v)
+            return v.url;
+    }
+    // For original, try to find a variant with suffix matching the original format,
+    // otherwise fall back to the webp or first variant
+    const webp = asset.variants.find((v) => v.suffix === "webp");
+    if (webp)
+        return webp.url;
+    if (asset.variants.length > 0)
+        return asset.variants[0].url;
+    return asset.original_key;
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

package/dist/admin/sections/media/MediaGrid.d.ts

@@ -0,0 +1,14 @@
+import type { Asset } from "./types.js";
+interface MediaGridProps {
+    assets: Asset[];
+    selectedId: string | null;
+    onSelect: (asset: Asset) => void;
+    viewMode: "grid" | "list";
+    onViewModeChange: (mode: "grid" | "list") => void;
+    page: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    hasMore: boolean;
+}
+export default function MediaGrid({ assets, selectedId, onSelect, viewMode, onViewModeChange, page, pageSize, onPageChange, hasMore }: MediaGridProps): React.JSX.Element;
+export {};

package/dist/admin/sections/media/MediaGrid.js

@@ -0,0 +1,22 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { AdminButton } from "../../components.js";
+export default function MediaGrid({ assets, selectedId, onSelect, viewMode, onViewModeChange, page, pageSize, onPageChange, hasMore }) {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "cedros-data-toolbar", style: { marginBottom: "0.6rem" }, children: [_jsx("div", { className: "cedros-data-toolbar__left", children: _jsxs("span", { className: "cedros-data-label", children: [assets.length, " asset", assets.length !== 1 ? "s" : ""] }) }), _jsxs("div", { className: "cedros-data-toolbar__right", children: [_jsx("button", { className: `cedros-data-chip ${viewMode === "grid" ? "cedros-data-chip--active" : ""}`, onClick: () => onViewModeChange("grid"), children: "Grid" }), _jsx("button", { className: `cedros-data-chip ${viewMode === "list" ? "cedros-data-chip--active" : ""}`, onClick: () => onViewModeChange("list"), children: "List" })] })] }), assets.length === 0 ? (_jsx("p", { className: "cedros-data-empty", children: "No assets found." })) : viewMode === "grid" ? (_jsx("div", { className: "cedros-media-grid", children: assets.map((asset) => (_jsxs("button", { className: `cedros-media-grid__item ${selectedId === asset.id ? "cedros-media-grid__item--selected" : ""}`, onClick: () => onSelect(asset), children: [_jsx("img", { className: "cedros-media-grid__thumb", src: thumbnailUrl(asset), alt: asset.alt_text || asset.filename, loading: "lazy" }), _jsx("span", { className: "cedros-media-grid__name", children: asset.filename })] }, asset.id))) })) : (_jsx("div", { className: "cedros-data-table-wrap", children: _jsxs("table", { className: "cedros-data-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Preview" }), _jsx("th", { children: "Filename" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Size" }), _jsx("th", { children: "Dimensions" })] }) }), _jsx("tbody", { children: assets.map((asset) => (_jsxs("tr", { onClick: () => onSelect(asset), style: { cursor: "pointer" }, children: [_jsx("td", { children: _jsx("img", { src: thumbnailUrl(asset), alt: asset.alt_text || asset.filename, style: { width: 40, height: 40, objectFit: "cover", borderRadius: 4 }, loading: "lazy" }) }), _jsx("td", { children: asset.filename }), _jsx("td", { children: _jsx("span", { className: "cedros-data-pill", children: asset.content_type }) }), _jsx("td", { children: formatBytes(asset.size_bytes) }), _jsx("td", { children: asset.width && asset.height ? `${asset.width}x${asset.height}` : "-" })] }, asset.id))) })] }) })), _jsxs("div", { className: "cedros-data-pagination", style: { marginTop: "0.6rem" }, children: [_jsx(AdminButton, { variant: "ghost", size: "sm", disabled: page === 0, onClick: () => onPageChange(page - 1), children: "Previous" }), _jsxs("span", { className: "cedros-data-label", children: ["Page ", page + 1] }), _jsx(AdminButton, { variant: "ghost", size: "sm", disabled: !hasMore, onClick: () => onPageChange(page + 1), children: "Next" })] })] }));
+}
+function thumbnailUrl(asset) {
+    const thumb = asset.variants.find((v) => v.suffix === "thumb");
+    if (thumb)
+        return thumb.url;
+    const webp = asset.variants.find((v) => v.suffix === "webp");
+    if (webp)
+        return webp.url;
+    // Fallback to constructing URL from original key
+    return asset.original_key;
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

package/dist/admin/sections/media/MediaSection.d.ts

@@ -0,0 +1,2 @@
+import type { AdminSectionProps } from "../../types.js";
+export default function MediaSection({ pluginContext, pageSize }: AdminSectionProps): React.JSX.Element;

package/dist/admin/sections/media/MediaSection.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { requestJson } from "../../api.js";
+import { AdminButton, Card, StatusNotice } from "../../components.js";
+import MediaDetail from "./MediaDetail.js";
+import MediaGrid from "./MediaGrid.js";
+import MediaUploader from "./MediaUploader.js";
+export default function MediaSection({ pluginContext, pageSize }) {
+    const canRead = pluginContext.hasPermission("data:media:read");
+    const canWrite = pluginContext.hasPermission("data:media:write");
+    const [storageConfig, setStorageConfig] = useState(null);
+    const [configLoading, setConfigLoading] = useState(true);
+    const [configError, setConfigError] = useState("");
+    const [testResult, setTestResult] = useState(null);
+    const [testLoading, setTestLoading] = useState(false);
+    const [assets, setAssets] = useState([]);
+    const [assetsLoading, setAssetsLoading] = useState(false);
+    const [page, setPage] = useState(0);
+    const [viewMode, setViewMode] = useState("grid");
+    const [selectedAsset, setSelectedAsset] = useState(null);
+    const effectivePageSize = pageSize || 24;
+    const loadConfig = useCallback(async () => {
+        setConfigLoading(true);
+        setConfigError("");
+        try {
+            const data = await requestJson(pluginContext, "/admin/storage/config");
+            setStorageConfig(data);
+        }
+        catch (err) {
+            setConfigError(err.message);
+        }
+        finally {
+            setConfigLoading(false);
+        }
+    }, [pluginContext]);
+    const loadAssets = useCallback(async (pageNum) => {
+        setAssetsLoading(true);
+        try {
+            const data = await requestJson(pluginContext, `/admin/media/assets?limit=${effectivePageSize}&offset=${pageNum * effectivePageSize}`);
+            setAssets(data);
+        }
+        catch {
+            // Silently fail on asset load - config screen will show errors
+        }
+        finally {
+            setAssetsLoading(false);
+        }
+    }, [pluginContext, effectivePageSize]);
+    useEffect(() => {
+        void loadConfig();
+    }, [loadConfig]);
+    useEffect(() => {
+        if (storageConfig?.enabled) {
+            void loadAssets(page);
+        }
+    }, [storageConfig?.enabled, page, loadAssets]);
+    const handleTest = useCallback(async () => {
+        setTestLoading(true);
+        setTestResult(null);
+        try {
+            await requestJson(pluginContext, "/admin/storage/test", { method: "POST" });
+            setTestResult({ tone: "success", message: "Connection successful." });
+        }
+        catch (err) {
+            setTestResult({ tone: "error", message: err.message });
+        }
+        finally {
+            setTestLoading(false);
+        }
+    }, [pluginContext]);
+    const handlePageChange = useCallback((newPage) => {
+        setPage(newPage);
+        setSelectedAsset(null);
+    }, []);
+    const handleUploadComplete = useCallback(() => {
+        setPage(0);
+        void loadAssets(0);
+    }, [loadAssets]);
+    const handleAssetDeleted = useCallback(() => {
+        setSelectedAsset(null);
+        void loadAssets(page);
+    }, [page, loadAssets]);
+    const handleAssetUpdated = useCallback((updated) => {
+        setSelectedAsset(updated);
+        setAssets((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
+    }, []);
+    if (configLoading) {
+        return (_jsx("div", { className: "cedros-data", children: _jsx("p", { className: "cedros-data-empty", children: "Loading storage configuration..." }) }));
+    }
+    if (configError) {
+        return (_jsx("div", { className: "cedros-data", children: _jsx(StatusNotice, { tone: "error", message: configError }) }));
+    }
+    if (!storageConfig?.enabled) {
+        return (_jsx("div", { className: "cedros-data", children: _jsx("header", { className: "cedros-data__header", children: _jsxs("div", { children: [_jsx("h2", { className: "cedros-data__title", children: "Media Library" }), _jsxs("p", { className: "cedros-data__subtitle", children: ["Storage is not enabled. Start the server with ", _jsx("code", { children: "--enable-storage" }), " and configure ", _jsx("code", { children: "STORAGE_*" }), " environment variables."] })] }) }) }));
+    }
+    return (_jsxs("div", { className: "cedros-data", children: [_jsxs("header", { className: "cedros-data__header", children: [_jsxs("div", { children: [_jsx("h2", { className: "cedros-data__title", children: "Media Library" }), _jsxs("p", { className: "cedros-data__subtitle", children: ["Upload and manage images. Storage: ", storageConfig.config?.bucket ?? "unknown", " (", storageConfig.config?.region ?? "?", ")"] }), !canRead && (_jsxs("p", { className: "cedros-data__subtitle", children: ["Read-only mode. Missing ", _jsx("code", { children: "data:media:read" }), " permission."] }))] }), _jsx("div", { className: "cedros-data-actions", children: _jsx(AdminButton, { variant: "secondary", size: "sm", onClick: () => void handleTest(), disabled: testLoading || !canWrite, children: testLoading ? "Testing..." : "Test Connection" }) })] }), testResult && _jsx(StatusNotice, { tone: testResult.tone, message: testResult.message }), canWrite && (_jsx(MediaUploader, { pluginContext: pluginContext, onUploadComplete: handleUploadComplete })), _jsx(Card, { title: "Assets", subtitle: assetsLoading ? "Loading..." : undefined, children: selectedAsset ? (_jsx(MediaDetail, { asset: selectedAsset, pluginContext: pluginContext, canWrite: canWrite, onClose: () => setSelectedAsset(null), onDeleted: handleAssetDeleted, onUpdated: handleAssetUpdated })) : (_jsx(MediaGrid, { assets: assets, selectedId: selectedAsset ? selectedAsset.id : null, onSelect: setSelectedAsset, viewMode: viewMode, onViewModeChange: setViewMode, page: page, pageSize: effectivePageSize, onPageChange: handlePageChange, hasMore: assets.length === effectivePageSize })) })] }));
+}

package/dist/admin/sections/media/MediaUploader.d.ts

@@ -0,0 +1,7 @@
+import type { PluginContext } from "../../types.js";
+interface MediaUploaderProps {
+    pluginContext: PluginContext;
+    onUploadComplete: () => void;
+}
+export default function MediaUploader({ pluginContext, onUploadComplete }: MediaUploaderProps): React.JSX.Element;
+export {};

package/dist/admin/sections/media/MediaUploader.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { AdminButton, StatusNotice } from "../../components.js";
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+export default function MediaUploader({ pluginContext, onUploadComplete }) {
+    const [dragOver, setDragOver] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [progress, setProgress] = useState("");
+    const [error, setError] = useState("");
+    const inputRef = useRef(null);
+    const uploadFile = useCallback(async (file) => {
+        setError("");
+        if (!ACCEPTED_TYPES.includes(file.type)) {
+            setError(`Unsupported file type: ${file.type}. Accepted: JPEG, PNG, GIF, WebP.`);
+            return;
+        }
+        if (file.size > MAX_FILE_SIZE) {
+            setError(`File exceeds 10 MB limit (${(file.size / (1024 * 1024)).toFixed(1)} MB).`);
+            return;
+        }
+        setUploading(true);
+        setProgress(`Uploading ${file.name}...`);
+        try {
+            const formData = new FormData();
+            formData.append("file", file);
+            const token = pluginContext.getAccessToken();
+            const headers = {};
+            if (token)
+                headers.Authorization = `Bearer ${token}`;
+            if (pluginContext.orgId)
+                headers["x-cedros-org-id"] = pluginContext.orgId;
+            const baseUrl = pluginContext.serverUrl.replace(/\/+$/, "");
+            const response = await fetch(`${baseUrl}/admin/media/upload`, {
+                method: "POST",
+                headers,
+                body: formData
+            });
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(text || `Upload failed (${response.status})`);
+            }
+            setProgress("");
+            onUploadComplete();
+        }
+        catch (err) {
+            setError(err.message);
+            setProgress("");
+        }
+        finally {
+            setUploading(false);
+        }
+    }, [pluginContext, onUploadComplete]);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files[0];
+        if (file)
+            void uploadFile(file);
+    }, [uploadFile]);
+    const handleFileInput = useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (file)
+            void uploadFile(file);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }, [uploadFile]);
+    return (_jsxs("div", { className: "cedros-data-card", children: [_jsxs("div", { className: `cedros-media-dropzone ${dragOver ? "cedros-media-dropzone--active" : ""}`, onDragOver: (e) => {
+                    e.preventDefault();
+                    setDragOver(true);
+                }, onDragLeave: () => setDragOver(false), onDrop: handleDrop, children: [_jsx("p", { className: "cedros-media-dropzone__text", children: uploading ? progress : "Drag & drop an image here, or click to browse" }), _jsx(AdminButton, { variant: "secondary", size: "sm", disabled: uploading, onClick: () => inputRef.current?.click(), children: "Choose File" }), _jsx("input", { ref: inputRef, type: "file", accept: ACCEPTED_TYPES.join(","), style: { display: "none" }, onChange: handleFileInput }), _jsx("p", { className: "cedros-media-dropzone__hint", children: "JPEG, PNG, GIF, WebP \u00B7 Max 10 MB" })] }), error && _jsx("div", { className: "cedros-data-card__body", children: _jsx(StatusNotice, { tone: "error", message: error }) })] }));
+}

package/dist/admin/sections/media/types.d.ts

@@ -0,0 +1,33 @@
+export interface AssetVariant {
+    suffix: string;
+    key: string;
+    url: string;
+    content_type: string;
+    width: number;
+    height: number;
+}
+export interface Asset {
+    id: string;
+    filename: string;
+    original_key: string;
+    content_type: string;
+    size_bytes: number;
+    width: number | null;
+    height: number | null;
+    variants: AssetVariant[];
+    alt_text: string | null;
+    metadata: Record<string, unknown>;
+    created_at: string;
+    updated_at: string;
+}
+export interface StorageConfigResponse {
+    enabled: boolean;
+    config?: {
+        bucket: string;
+        region: string;
+        endpoint: string | null;
+        cdn_base_url: string | null;
+        path_prefix: string | null;
+        access_key: string;
+    };
+}

package/dist/admin/sections/media/types.js

@@ -0,0 +1 @@
+export {};