@jhits/plugin-content 0.0.15 → 0.0.18

package/dist/views/MediaManager/MediaManager.js

@@ -0,0 +1,93 @@
+/**
+ * Media Manager View
+ * Allows uploading and managing general files (PDFs, docs, etc.)
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Upload, File, Trash2, Search, Copy, Check, FileText, ExternalLink } from 'lucide-react';
+export function MediaManagerView({ siteId }) {
+    const [files, setFiles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [uploading, setUploading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [copiedId, setCopiedId] = useState(null);
+    const fetchFiles = useCallback(async () => {
+        try {
+            setLoading(true);
+            const res = await fetch(`/api/plugin-content/files?siteId=${siteId}`);
+            if (res.ok) {
+                const data = await res.json();
+                setFiles(data.files || []);
+            }
+        }
+        catch (err) {
+            console.error('Failed to fetch files:', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [siteId]);
+    useEffect(() => {
+        fetchFiles();
+    }, [fetchFiles]);
+    const handleUpload = async (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        try {
+            setUploading(true);
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('siteId', siteId);
+            const res = await fetch('/api/plugin-content/files/upload', {
+                method: 'POST',
+                body: formData,
+            });
+            if (res.ok) {
+                fetchFiles();
+            }
+            else {
+                const error = await res.json();
+                alert(error.error || 'Upload failed');
+            }
+        }
+        catch (err) {
+            console.error('Upload error:', err);
+            alert('An error occurred during upload');
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleDelete = async (id) => {
+        if (!confirm('Are you sure you want to delete this file?'))
+            return;
+        try {
+            const res = await fetch(`/api/plugin-content/files?siteId=${siteId}&id=${id}`, {
+                method: 'DELETE',
+            });
+            if (res.ok) {
+                setFiles(files.filter(f => f.id !== id));
+            }
+        }
+        catch (err) {
+            console.error('Delete error:', err);
+        }
+    };
+    const copyToClipboard = (text) => {
+        navigator.clipboard.writeText(text);
+        setCopiedId(text);
+        setTimeout(() => setCopiedId(null), 2000);
+    };
+    const filteredFiles = files.filter(f => f.filename.toLowerCase().includes(searchQuery.toLowerCase()));
+    const formatSize = (bytes) => {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+    return (_jsxs("div", { className: "p-8 bg-white dark:bg-neutral-900 rounded-[2.5rem] h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black uppercase tracking-tighter text-neutral-950 dark:text-white", children: "File Library" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Upload and manage documents, PDFs, and other assets" })] }), _jsxs("label", { className: `flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest cursor-pointer hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 ${uploading ? 'opacity-50 pointer-events-none' : ''}`, children: [_jsx(Upload, { size: 16 }), uploading ? 'Uploading...' : 'Upload File', _jsx("input", { type: "file", className: "hidden", onChange: handleUpload, disabled: uploading })] })] }), _jsxs("div", { className: "relative mb-6", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4" }), _jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search files by name...", className: "w-full pl-11 pr-4 py-3 bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-2xl text-sm outline-none focus:border-primary transition-all" })] }), _jsx("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: loading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredFiles.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-neutral-50 dark:bg-neutral-800/50 rounded-[2rem] border-2 border-dashed border-neutral-200 dark:border-neutral-700", children: [_jsx(FileText, { className: "mx-auto size-12 text-neutral-300 dark:text-neutral-600 mb-4" }), _jsx("p", { className: "text-neutral-500", children: searchQuery ? 'No files match your search.' : 'No files uploaded yet.' })] })) : (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: filteredFiles.map((file) => (_jsxs("div", { className: "bg-neutral-50 dark:bg-neutral-800/50 p-5 rounded-[2rem] border border-neutral-200 dark:border-neutral-700 group transition-all hover:shadow-xl hover:border-primary/30", children: [_jsxs("div", { className: "flex items-center gap-4 mb-4", children: [_jsx("div", { className: "p-3 bg-white dark:bg-neutral-900 rounded-2xl shadow-sm group-hover:bg-primary/10 transition-colors", children: _jsx(File, { size: 24, className: "text-primary" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "font-bold text-sm text-neutral-950 dark:text-white truncate", title: file.filename, children: file.filename }), _jsxs("p", { className: "text-[10px] text-neutral-500 uppercase font-black tracking-tight", children: [formatSize(file.size), " \u2022 ", file.mimeType.split('/')[1].toUpperCase()] })] })] }), _jsxs("div", { className: "flex items-center gap-2 pt-4 border-t border-neutral-200 dark:border-neutral-700", children: [_jsxs("button", { onClick: () => copyToClipboard(file.id), className: "flex-1 flex items-center justify-center gap-2 py-2 bg-white dark:bg-neutral-900 rounded-xl text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400 hover:text-primary transition-all border border-neutral-200 dark:border-neutral-700", children: [copiedId === file.id ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }), copiedId === file.id ? 'Copied' : 'ID'] }), _jsx("a", { href: file.url, target: "_blank", rel: "noopener noreferrer", className: "p-2 bg-white dark:bg-neutral-900 rounded-xl text-neutral-600 dark:text-neutral-400 hover:text-blue-500 transition-all border border-neutral-200 dark:border-neutral-700", title: "View/Download", children: _jsx(ExternalLink, { size: 14 }) }), _jsx("button", { onClick: () => handleDelete(file.id), className: "p-2 bg-white dark:bg-neutral-900 rounded-xl text-neutral-600 dark:text-neutral-400 hover:text-red-500 transition-all border border-neutral-200 dark:border-neutral-700", title: "Delete", children: _jsx(Trash2, { size: 14 }) })] })] }, file.id))) })) })] }));
+}

package/dist/views/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Asset Manager View
+ * Main entry point for managing links and files
+ */
+export declare function AssetManagerView({ siteId, locale, subPath }: {
+    siteId: string;
+    locale: string;
+    subPath: string[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/views/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,2CAkElH"}

package/dist/views/index.js

@@ -0,0 +1,22 @@
+/**
+ * Asset Manager View
+ * Main entry point for managing links and files
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link2, FileText, ChevronRight } from 'lucide-react';
+import { LinkManagerView } from './LinkManager/LinkManager';
+import { MediaManagerView } from './MediaManager/MediaManager';
+export function AssetManagerView({ siteId, locale, subPath }) {
+    const route = subPath[1] || 'links';
+    const navigate = (path) => {
+        window.history.pushState(null, '', `/dashboard/content/${path}`);
+        // Force re-render by triggering popstate or similar if needed, 
+        // but for now we'll just handle it via state if we were in a single view
+    };
+    return (_jsxs("div", { className: "flex h-full w-full overflow-hidden", children: [_jsxs("aside", { className: "w-64 border-r border-dashboard-border bg-dashboard-sidebar flex flex-col p-6", children: [_jsx("h2", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-400 mb-8", children: "Content Assets" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => window.location.href = '/dashboard/content/links', className: `w-full flex items-center justify-between p-4 rounded-2xl transition-all ${route === 'links'
+                                    ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                    : 'text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Link2, { size: 18 }), _jsx("span", { className: "text-sm font-bold", children: "Links & Buttons" })] }), _jsx(ChevronRight, { size: 14, className: route === 'links' ? 'opacity-100' : 'opacity-0' })] }), _jsxs("button", { onClick: () => window.location.href = '/dashboard/content/media', className: `w-full flex items-center justify-between p-4 rounded-2xl transition-all ${route === 'media'
+                                    ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                    : 'text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(FileText, { size: 18 }), _jsx("span", { className: "text-sm font-bold", children: "File Library" })] }), _jsx(ChevronRight, { size: 14, className: route === 'media' ? 'opacity-100' : 'opacity-0' })] })] }), _jsx("div", { className: "mt-auto p-4 bg-dashboard-bg rounded-2xl border border-dashboard-border", children: _jsx("p", { className: "text-[10px] text-neutral-500 leading-relaxed font-medium", children: "Use these assets to make your application buttons and downloads dynamic." }) })] }), _jsx("main", { className: "flex-1 min-w-0 overflow-hidden", children: route === 'links' ? (_jsx(LinkManagerView, { siteId: siteId, locale: locale })) : (_jsx(MediaManagerView, { siteId: siteId })) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-content",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "description": "Content management and localization plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"

package/src/api/files.ts

@@ -0,0 +1,192 @@
+/**
+ * Files API Handler
+ * Handles uploading and managing general files
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile, mkdir, unlink, readFile } from 'fs/promises';
+import path from 'path';
+import { randomBytes } from 'crypto';
+
+export interface FilesApiConfig {
+    getDb: () => Promise<{ db: () => any }>;
+}
+
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+
+async function ensureUploadsDir() {
+    try {
+        await mkdir(uploadsDir, { recursive: true });
+    } catch (error) {
+        // Directory might already exist
+    }
+}
+
+/**
+ * GET /api/plugin-content/files - List all files
+ */
+export async function GET(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const files = db.collection('files');
+
+        const data = await files.find({ siteId }).sort({ uploadedAt: -1 }).toArray();
+
+        return NextResponse.json({ files: data });
+    } catch (err: any) {
+        console.error('[FilesAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to fetch files', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-content/files/upload - Upload a file
+ */
+export async function UPLOAD(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        await ensureUploadsDir();
+
+        const formData = await req.formData();
+        const file = formData.get('file') as File;
+        const siteId = (formData.get('siteId') as string) || 'default';
+
+        if (!file) {
+            return NextResponse.json({ error: 'No file provided' }, { status: 400 });
+        }
+
+        // Generate unique filename
+        const ext = path.extname(file.name);
+        const uniqueId = randomBytes(16).toString('hex');
+        const timestamp = Date.now();
+        const uniqueFilename = `${timestamp}-${uniqueId}${ext}`;
+        const filePath = path.join(uploadsDir, uniqueFilename);
+
+        // Save file
+        const bytes = await file.arrayBuffer();
+        const buffer = Buffer.from(bytes);
+        await writeFile(filePath, buffer);
+
+        const fileMetadata = {
+            id: uniqueFilename,
+            filename: file.name,
+            url: `/api/plugin-content/files/download?id=${uniqueFilename}`, // Point to our own download endpoint
+            size: file.size,
+            mimeType: file.type,
+            siteId,
+            uploadedAt: new Date().toISOString(),
+        };
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const files = db.collection('files');
+
+        await files.insertOne(fileMetadata);
+
+        return NextResponse.json({
+            success: true,
+            file: fileMetadata,
+        });
+    } catch (err: any) {
+        console.error('[FilesAPI] UPLOAD error:', err);
+        return NextResponse.json(
+            { error: 'Failed to upload file', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * GET /api/plugin-content/files/download - Download a file
+ */
+export async function DOWNLOAD(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const id = url.searchParams.get('id');
+        const download = url.searchParams.get('download') === 'true';
+
+        if (!id) {
+            return NextResponse.json({ error: 'ID is required' }, { status: 400 });
+        }
+
+        // Security: Prevent directory traversal
+        const sanitizedFilename = path.basename(id);
+        const filePath = path.join(uploadsDir, sanitizedFilename);
+
+        const fileBuffer = await readFile(filePath);
+
+        // Determine content type
+        const ext = path.extname(filePath).toLowerCase();
+        let contentType = 'application/octet-stream';
+        if (ext === '.pdf') contentType = 'application/pdf';
+        else if (ext === '.png') contentType = 'image/png';
+        else if (ext === '.jpg' || ext === '.jpeg') contentType = 'image/jpeg';
+        else if (ext === '.webp') contentType = 'image/webp';
+        else if (ext === '.svg') contentType = 'image/svg+xml';
+
+        const headers: Record<string, string> = {
+            'Content-Type': contentType,
+            'Cache-Control': 'public, max-age=31536000, immutable',
+        };
+
+        if (download) {
+            headers['Content-Disposition'] = `attachment; filename="${sanitizedFilename}"`;
+        }
+
+        return new NextResponse(fileBuffer, {
+            headers: headers,
+        });
+    } catch (err: any) {
+        console.error('[FilesAPI] DOWNLOAD error:', err);
+        return new NextResponse('File not found', { status: 404 });
+    }
+}
+
+/**
+ * DELETE /api/plugin-content/files - Delete a file
+ */
+export async function DELETE(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+        const id = url.searchParams.get('id');
+
+        if (!id) {
+            return NextResponse.json({ error: 'ID is required' }, { status: 400 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const files = db.collection('files');
+
+        const fileDoc = await files.findOne({ siteId, id });
+        if (!fileDoc) {
+            return NextResponse.json({ error: 'File not found' }, { status: 404 });
+        }
+
+        // Delete from filesystem
+        const filePath = path.join(uploadsDir, fileDoc.id);
+        try {
+            await unlink(filePath);
+        } catch (err) {
+            console.warn(`[FilesAPI] File could not be deleted from disk: ${filePath}`, err);
+        }
+
+        // Delete from database
+        await files.deleteOne({ siteId, id });
+
+        return NextResponse.json({ success: true });
+    } catch (err: any) {
+        console.error('[FilesAPI] DELETE error:', err);
+        return NextResponse.json(
+            { error: 'Failed to delete file', detail: err.message },
+            { status: 500 }
+        );
+    }
+}

package/src/api/handler.ts

@@ -14,6 +14,8 @@ import * as path from 'path';
 export interface ContentApiConfig {
     /** Directory where locale files are stored (default: 'data/locales') */
     localesDir?: string;
+    /** MongoDB client promise */
+    getDb?: () => Promise<{ db: () => any }>;
 }
 
 /**

package/src/api/links.ts

@@ -0,0 +1,107 @@
+/**
+ * Links API Handler
+ * Handles global, localized links and buttons
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+export interface LinksApiConfig {
+    getDb: () => Promise<{ db: () => any }>;
+}
+
+/**
+ * GET /api/plugin-content/links - List all links
+ */
+export async function GET(req: NextRequest, config: LinksApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const links = db.collection('links');
+
+        const data = await links.find({ siteId }).toArray();
+
+        return NextResponse.json({ links: data });
+    } catch (err: any) {
+        console.error('[LinksAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to fetch links', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-content/links - Save a link
+ */
+export async function POST(req: NextRequest, config: LinksApiConfig): Promise<NextResponse> {
+    try {
+        const body = await req.json();
+        const { siteId = 'default', link } = body;
+
+        if (!link || !link.key) {
+            return NextResponse.json({ error: 'Link key is required' }, { status: 400 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const links = db.collection('links');
+
+        // Update or insert
+        const updatedLink = {
+            ...link,
+            siteId,
+            updatedAt: new Date(),
+        };
+
+        // Remove _id from link before update to avoid immutable field error if it's a string
+        const { _id, ...linkData } = updatedLink;
+
+        await links.updateOne(
+            { siteId, key: link.key },
+            { $set: linkData },
+            { upsert: true }
+        );
+
+        const savedLink = await links.findOne({ siteId, key: link.key });
+
+        return NextResponse.json({ success: true, link: savedLink });
+    } catch (err: any) {
+        console.error('[LinksAPI] POST error:', err);
+        return NextResponse.json(
+            { error: 'Failed to save link', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * DELETE /api/plugin-content/links - Delete a link
+ */
+export async function DELETE(req: NextRequest, config: LinksApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+        const key = url.searchParams.get('key');
+
+        if (!key) {
+            return NextResponse.json({ error: 'Key is required' }, { status: 400 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const links = db.collection('links');
+
+        await links.deleteOne({ siteId, key });
+
+        return NextResponse.json({ success: true });
+    } catch (err: any) {
+        console.error('[LinksAPI] DELETE error:', err);
+        return NextResponse.json(
+            { error: 'Failed to delete link', detail: err.message },
+            { status: 500 }
+        );
+    }
+}

package/src/api/router.ts

@@ -12,8 +12,12 @@ import { NextRequest, NextResponse } from 'next/server';
 import { POST as SaveHandler } from './handler';
 
 export interface ContentApiRouterConfig {
+    /** MongoDB client promise - should return { db: () => Database } */
+    getDb: () => Promise<{ db: () => any }>;
     /** Directory where locale files are stored (default: 'data/locales') */
     localesDir?: string;
+    /** Site ID for multi-site setups */
+    siteId?: string;
 }
 
 /**
@@ -29,23 +33,48 @@ export async function handleContentApi(
     const safePath = Array.isArray(path) ? path : [];
     const route = safePath.length > 0 ? safePath[0] : '';
 
-    console.log(`[ContentApiRouter] method=${method}, path=${JSON.stringify(safePath)}, route=${route}, url=${req.url}`);
-
     try {
         // Route: /api/plugin-content/save
         if (route === 'save') {
             if (method === 'POST') {
-                return await SaveHandler(req, config);
+                return await SaveHandler(req, { localesDir: config.localesDir });
+            }
+        }
+        // Route: /api/plugin-content/links
+        else if (route === 'links') {
+            const linksModule = await import('./links');
+            if (method === 'GET') {
+                return await linksModule.GET(req, { getDb: config.getDb });
+            }
+            if (method === 'POST') {
+                return await linksModule.POST(req, { getDb: config.getDb });
+            }
+            if (method === 'DELETE') {
+                return await linksModule.DELETE(req, { getDb: config.getDb });
+            }
+        }
+        // Route: /api/plugin-content/files
+        else if (route === 'files') {
+            const filesModule = await import('./files');
+            const subRoute = safePath.length > 1 ? safePath[1] : '';
+
+            if (subRoute === 'upload' && method === 'POST') {
+                return await filesModule.UPLOAD(req, { getDb: config.getDb });
+            }
+            if (subRoute === 'download' && method === 'GET') {
+                return await filesModule.DOWNLOAD(req, { getDb: config.getDb });
+            }
+            if (method === 'GET') {
+                return await filesModule.GET(req, { getDb: config.getDb });
+            }
+            if (method === 'DELETE') {
+                return await filesModule.DELETE(req, { getDb: config.getDb });
             }
-            return NextResponse.json(
-                { error: `Method ${method} not allowed for route: save` },
-                { status: 405 }
-            );
         }
 
         // Route not found
         return NextResponse.json(
-            { error: `Route not found: ${route || '/'}` },
+            { error: `Route not found: ${route || '/'}${safePath.length > 1 ? '/' + safePath[1] : ''}` },
             { status: 404 }
         );
     } catch (error: any) {

package/src/components/DynamicLink.tsx

@@ -0,0 +1,152 @@
+/**
+ * Dynamic Link Component
+ * Localized link with right-click settings for admins
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useLinks } from '../hooks/useLinks';
+import { LinkSettingsModal } from './LinkSettingsModal';
+import Link from 'next/link';
+
+interface DynamicLinkProps {
+    linkKey: string;
+    siteId?: string;
+    locale: string;
+    defaultLabel: string;
+    defaultTarget: string;
+    defaultType?: 'url' | 'file';
+    className?: string;
+    isAdmin?: boolean;
+    apiBaseUrl?: string;
+    /** Whether to use a button element instead of <a>/Link (useful for scroll actions) */
+    isButton?: boolean;
+    /** Click handler for button type */
+    onClick?: (target: string) => void;
+    children?: (data: { label: string; target: string; type: 'url' | 'file' }) => React.ReactNode;
+}
+
+export function DynamicLink({
+    linkKey,
+    siteId = 'default',
+    locale,
+    defaultLabel,
+    defaultTarget,
+    defaultType = 'url',
+    className = '',
+    isAdmin = false,
+    apiBaseUrl,
+    isButton = false,
+    onClick,
+    children
+}: DynamicLinkProps) {
+    const { getLink, refetch } = useLinks(siteId, apiBaseUrl);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    const linkData = getLink(linkKey, locale) || {
+        label: defaultLabel,
+        target: defaultTarget,
+        type: defaultType
+    };
+
+    const handleContextMenu = (e: React.MouseEvent) => {
+        if (isAdmin) {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsModalOpen(true);
+        }
+    };
+
+    const handleSaveSuccess = () => {
+        if (refetch) refetch();
+    };
+
+    const isExternal = linkData.target.startsWith('http') || linkData.type === 'file';
+    const isScroll = linkData.target.startsWith('#');
+    
+    // Render content
+    const content = children ? children(linkData) : linkData.label;
+
+    // Use a wrapper that is invisible to layout when not admin
+    // When admin, we need relative for the HUD tooltip
+    // We also pass through the className to the wrapper if admin to preserve flex/grid item behavior
+    const wrapperClass = isAdmin ? `relative ${className}` : 'contents';
+    
+    // When not admin, the className is on the link itself
+    // When admin, the wrapper has the main classes, and the link is just a transparent overlay
+    const linkClass = isAdmin ? "w-full h-full flex items-center justify-center bg-transparent border-none p-0 m-0 text-inherit font-inherit cursor-pointer outline-none" : className;
+
+    const renderLink = () => {
+        if (isScroll || isButton) {
+            return (
+                <button
+                    type="button"
+                    onClick={(e) => {
+                        if (isScroll) {
+                            const targetId = linkData.target.replace('#', '');
+                            const element = document.getElementById(targetId);
+                            if (element) {
+                                element.scrollIntoView({ behavior: 'smooth' });
+                            }
+                        }
+                        if (onClick) onClick(linkData.target);
+                    }}
+                    className={linkClass}
+                >
+                    {content}
+                </button>
+            );
+        }
+
+        if (isExternal) {
+            return (
+                <a
+                    href={linkData.target}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={linkClass}
+                >
+                    {content}
+                </a>
+            );
+        }
+
+        return (
+            <Link href={linkData.target as any} className={linkClass}>
+                {content}
+            </Link>
+        );
+    };
+
+    return (
+        <>
+            <div 
+                onContextMenu={handleContextMenu}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                className={wrapperClass}
+            >
+                {isAdmin && isHovered && (
+                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-primary text-white text-[8px] font-black uppercase px-2 py-1 rounded shadow-xl z-[1000] pointer-events-none whitespace-nowrap">
+                        Right-click to edit link
+                    </div>
+                )}
+
+                {renderLink()}
+            </div>
+
+            <LinkSettingsModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                linkKey={linkKey}
+                siteId={siteId}
+                locale={locale}
+                initialData={linkData}
+                onSaveSuccess={handleSaveSuccess}
+                apiBaseUrl={apiBaseUrl}
+            />
+        </>
+    );
+}