@jant/core 0.3.25 → 0.3.27

package/dist/ui/dash/media/MediaListContent.js

@@ -0,0 +1,166 @@
+/**
+ * Media grid list with upload UI
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { EmptyState } from "../index.js";
+import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../../lib/image.js";
+function formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function MediaCard({ media, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
+    const publicUrl = getPublicUrlForProvider(media.provider, r2PublicUrl, s3PublicUrl);
+    const fullUrl = getMediaUrl(media.storageKey, publicUrl);
+    const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
+        width: 300,
+        quality: 80,
+        format: "auto",
+        fit: "cover"
+    });
+    const isImage = media.mimeType.startsWith("image/");
+    return /*#__PURE__*/ _jsxs("div", {
+        class: "group relative",
+        "data-media-id": media.id,
+        children: [
+            isImage ? /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                class: "block w-full aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary cursor-pointer",
+                onclick: `document.getElementById('lightbox-img').src = '${fullUrl}'; document.getElementById('lightbox').showModal()`,
+                children: /*#__PURE__*/ _jsx("img", {
+                    src: thumbnailUrl,
+                    alt: media.alt || media.originalName,
+                    class: "w-full h-full object-cover",
+                    loading: "lazy"
+                })
+            }) : /*#__PURE__*/ _jsx("a", {
+                href: `/dash/media/${media.id}`,
+                class: "block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary",
+                children: /*#__PURE__*/ _jsx("div", {
+                    class: "w-full h-full flex items-center justify-center text-muted-foreground",
+                    children: /*#__PURE__*/ _jsx("span", {
+                        class: "text-xs",
+                        children: media.mimeType
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                href: `/dash/media/${media.id}`,
+                class: "block mt-2 text-xs truncate hover:underline",
+                title: media.originalName,
+                children: media.originalName
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                class: "text-xs text-muted-foreground",
+                children: formatSize(media.size)
+            })
+        ]
+    });
+}
+export function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const processingText = $__i18n._({
+        id: "k1ifdL",
+        message: "Processing..."
+    });
+    const uploadingText = $__i18n._({
+        id: "GxkJXS",
+        message: "Uploading..."
+    });
+    const uploadText = $__i18n._({
+        id: "ONWvwQ",
+        message: "Upload"
+    });
+    const errorText = $__i18n._({
+        id: "pZq3aX",
+        message: "Upload failed. Please try again."
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("form", {
+                id: "upload-form",
+                class: "hidden",
+                enctype: "multipart/form-data",
+                "data-on:submit__prevent": "@post('/api/upload', {contentType: 'form'})",
+                children: /*#__PURE__*/ _jsx("input", {
+                    id: "upload-file-input",
+                    type: "file",
+                    name: "file"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                class: "flex items-center justify-between mb-6",
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        class: "text-2xl font-semibold",
+                        children: $__i18n._({
+                            id: "xYilR2",
+                            message: "Media"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        class: "btn cursor-pointer",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: uploadText
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "file",
+                                class: "hidden",
+                                accept: "image/*",
+                                "data-media-upload": true,
+                                "data-text-processing": processingText,
+                                "data-text-uploading": uploadingText,
+                                "data-text-error": errorText
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                class: "card mb-6",
+                children: /*#__PURE__*/ _jsx("section", {
+                    class: "text-sm text-muted-foreground",
+                    children: /*#__PURE__*/ _jsx("p", {
+                        children: $__i18n._({
+                            id: "x+doid",
+                            message: "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped."
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                id: "media-content",
+                children: mediaList.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                    id: "empty-state",
+                    children: /*#__PURE__*/ _jsx(EmptyState, {
+                        message: $__i18n._({
+                            id: "ST+lN2",
+                            message: "No media uploaded yet."
+                        })
+                    })
+                }) : /*#__PURE__*/ _jsx("div", {
+                    id: "media-grid",
+                    class: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4",
+                    children: mediaList.map((m)=>/*#__PURE__*/ _jsx(MediaCard, {
+                            media: m,
+                            r2PublicUrl: r2PublicUrl,
+                            imageTransformUrl: imageTransformUrl,
+                            s3PublicUrl: s3PublicUrl
+                        }, m.id))
+                })
+            }),
+            /*#__PURE__*/ _jsx("dialog", {
+                id: "lightbox",
+                class: "p-0 m-auto bg-transparent backdrop:bg-black/80",
+                onclick: "event.target === this && this.close()",
+                children: /*#__PURE__*/ _jsx("img", {
+                    id: "lightbox-img",
+                    src: "",
+                    alt: "",
+                    class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+                })
+            })
+        ]
+    });
+}

package/dist/ui/dash/media/ViewMediaContent.js

@@ -0,0 +1,212 @@
+/**
+ * Single media detail view
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { DangerZone } from "../index.js";
+import * as time from "../../../lib/time.js";
+import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../../lib/image.js";
+function formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function ViewMediaContent({ media, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const publicUrl = getPublicUrlForProvider(media.provider, r2PublicUrl, s3PublicUrl);
+    const url = getMediaUrl(media.storageKey, publicUrl);
+    const thumbnailUrl = getImageUrl(url, imageTransformUrl, {
+        width: 600,
+        quality: 85,
+        format: "auto"
+    });
+    const isImage = media.mimeType.startsWith("image/");
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                class: "flex items-center justify-between mb-6",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                class: "text-2xl font-semibold",
+                                children: media.originalName
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                class: "text-muted-foreground mt-1",
+                                children: [
+                                    formatSize(media.size),
+                                    " · ",
+                                    media.mimeType,
+                                    " ·",
+                                    " ",
+                                    time.formatDate(media.createdAt)
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("a", {
+                        href: "/dash/media",
+                        class: "btn-outline",
+                        children: $__i18n._({
+                            id: "iH8pgl",
+                            message: "Back"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                class: "grid gap-6 md:grid-cols-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "card",
+                        children: [
+                            /*#__PURE__*/ _jsx("header", {
+                                children: /*#__PURE__*/ _jsx("h2", {
+                                    children: $__i18n._({
+                                        id: "rdUucN",
+                                        message: "Preview"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("section", {
+                                children: isImage ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            class: "cursor-pointer",
+                                            onclick: `document.getElementById('lightbox-img').src = '${url}'; document.getElementById('lightbox').showModal()`,
+                                            children: /*#__PURE__*/ _jsx("img", {
+                                                src: thumbnailUrl,
+                                                alt: media.alt || media.originalName,
+                                                class: "max-w-full rounded-lg hover:opacity-90 transition-opacity"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            class: "text-xs text-muted-foreground mt-2",
+                                            children: $__i18n._({
+                                                id: "M1RvTd",
+                                                message: "Click image to view full size"
+                                            })
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ _jsx("div", {
+                                    class: "aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        children: media.mimeType
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "space-y-6",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                class: "card",
+                                children: [
+                                    /*#__PURE__*/ _jsx("header", {
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            children: $__i18n._({
+                                                id: "IagCbF",
+                                                message: "URL"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("section", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                class: "flex items-center gap-2",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "text",
+                                                        class: "input flex-1 font-mono text-sm",
+                                                        value: url,
+                                                        readonly: true
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        class: "btn-outline",
+                                                        onclick: `navigator.clipboard.writeText('${url}')`,
+                                                        children: $__i18n._({
+                                                            id: "he3ygx",
+                                                            message: "Copy"
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                class: "text-xs text-muted-foreground mt-2",
+                                                children: $__i18n._({
+                                                    id: "K9NcLu",
+                                                    message: "Use this URL to embed the media in your posts."
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                class: "card",
+                                children: [
+                                    /*#__PURE__*/ _jsx("header", {
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            children: $__i18n._({
+                                                id: "u6Hp4N",
+                                                message: "Markdown"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("section", {
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            class: "flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    type: "text",
+                                                    class: "input flex-1 font-mono text-sm",
+                                                    value: `![${media.alt || media.originalName}](${url})`,
+                                                    readonly: true
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    class: "btn-outline",
+                                                    onclick: `navigator.clipboard.writeText('![${media.alt || media.originalName}](${url})')`,
+                                                    children: $__i18n._({
+                                                        id: "he3ygx",
+                                                        message: "Copy"
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(DangerZone, {
+                                actionLabel: $__i18n._({
+                                    id: "wM5UXj",
+                                    message: "Delete Media"
+                                }),
+                                formAction: `/dash/media/${media.id}/delete`,
+                                confirmMessage: "Are you sure you want to delete this media?",
+                                description: $__i18n._({
+                                    id: "E80cJw",
+                                    message: "Deleting this media will remove it permanently from storage."
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isImage && /*#__PURE__*/ _jsx("dialog", {
+                id: "lightbox",
+                class: "p-0 m-auto bg-transparent backdrop:bg-black/80",
+                onclick: "event.target === this && this.close()",
+                children: /*#__PURE__*/ _jsx("img", {
+                    id: "lightbox-img",
+                    src: "",
+                    alt: "",
+                    class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+                })
+            })
+        ]
+    });
+}

package/dist/ui/dash/pages/LinkFormContent.js

@@ -0,0 +1,130 @@
+/**
+ * Link creation/editing form
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+export function LinkFormContent({ item, isEdit }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const title = isEdit ? $__i18n._({
+        id: "gDx5MG",
+        message: "Edit Link"
+    }) : $__i18n._({
+        id: "aaGV/9",
+        message: "New Link"
+    });
+    const signals = JSON.stringify({
+        label: item?.label ?? "",
+        url: item?.url ?? ""
+    }).replace(/</g, "\\u003c");
+    const action = isEdit ? `/dash/pages/links/${item?.id}` : "/dash/pages/links";
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("h1", {
+                class: "text-2xl font-semibold mb-6",
+                children: title
+            }),
+            /*#__PURE__*/ _jsxs("form", {
+                "data-signals": signals,
+                "data-on:submit__prevent": `@post('${action}')`,
+                "data-indicator": "_loading",
+                class: "flex flex-col gap-4 max-w-lg",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "field",
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                class: "label",
+                                children: $__i18n._({
+                                    id: "87a/t/",
+                                    message: "Label"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                "data-bind": "label",
+                                class: "input",
+                                placeholder: "Home",
+                                required: true
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                class: "text-xs text-muted-foreground mt-1",
+                                children: $__i18n._({
+                                    id: "+bHzpy",
+                                    message: "Display text for the link"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "field",
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                class: "label",
+                                children: $__i18n._({
+                                    id: "IagCbF",
+                                    message: "URL"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                "data-bind": "url",
+                                class: "input",
+                                placeholder: "/archive or https://...",
+                                required: true
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                class: "text-xs text-muted-foreground mt-1",
+                                children: $__i18n._({
+                                    id: "QEbNBb",
+                                    message: "Path (e.g. /archive) or full URL (e.g. https://example.com)"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "flex gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "submit",
+                                class: "btn",
+                                "data-attr:disabled": "$_loading",
+                                children: [
+                                    /*#__PURE__*/ _jsx("svg", {
+                                        "data-show": "$_loading",
+                                        style: "display:none",
+                                        class: "animate-spin size-4",
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        "stroke-width": "2",
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round",
+                                        role: "status",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            d: "M21 12a9 9 0 1 1-6.219-8.56"
+                                        })
+                                    }),
+                                    isEdit ? $__i18n._({
+                                        id: "IUwGEM",
+                                        message: "Save Changes"
+                                    }) : $__i18n._({
+                                        id: "kd7eBB",
+                                        message: "Create Link"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/dash/pages",
+                                class: "btn-outline",
+                                children: $__i18n._({
+                                    id: "dEgA5A",
+                                    message: "Cancel"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}