@withpotter/components 0.13.0-next.101

package/dist/blog-editor/panels/CoverImageField.js

@@ -0,0 +1,305 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import Cropper from "react-easy-crop";
+import { UploadCloud, ImageIcon, Loader2, X, Link as LinkIcon, Crop } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+async function createCroppedBlob(imageSrc, pixelCrop, mimeType = "image/jpeg", quality = 0.9) {
+  const image = await new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = imageSrc;
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not get canvas context");
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  );
+  return new Promise(
+    (resolve, reject) => canvas.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("toBlob failed")),
+      mimeType,
+      quality
+    )
+  );
+}
+function CropDialog({ open, imageSrc, onConfirm, onCancel }) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const [processing, setProcessing] = useState(false);
+  const onCropComplete = useCallback((_, areaPixels) => {
+    setCroppedAreaPixels(areaPixels);
+  }, []);
+  const handleConfirm = async () => {
+    if (!croppedAreaPixels) return;
+    setProcessing(true);
+    try {
+      const blob = await createCroppedBlob(imageSrc, croppedAreaPixels);
+      onConfirm(blob);
+    } finally {
+      setProcessing(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => {
+    if (!isOpen) onCancel();
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-xl", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Crop, { className: "w-4 h-4" }),
+      " Crop cover image"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: 320 }, children: /* @__PURE__ */ jsx(
+      Cropper,
+      {
+        image: imageSrc,
+        crop,
+        zoom,
+        aspect: 16 / 9,
+        onCropChange: setCrop,
+        onZoomChange: setZoom,
+        onCropComplete
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)] w-10", children: "Zoom" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 1,
+          max: 3,
+          step: 0.05,
+          value: zoom,
+          onChange: (e) => setZoom(Number(e.target.value)),
+          className: "flex-1 accent-[var(--accent-primary)]",
+          "aria-label": "Zoom"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          onClick: handleConfirm,
+          disabled: processing || !croppedAreaPixels,
+          loading: processing,
+          children: "Use this crop"
+        }
+      )
+    ] })
+  ] }) });
+}
+function CoverImageField({
+  value,
+  onChange,
+  onUploadFile,
+  uploading,
+  uploadProgress
+}) {
+  const fileInputRef = useRef(null);
+  const [showUrl, setShowUrl] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [cropSrc, setCropSrc] = useState(null);
+  const pendingFileRef = useRef(null);
+  const openCropper = (file) => {
+    pendingFileRef.current = file;
+    setCropSrc(URL.createObjectURL(file));
+  };
+  const handleFile = (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (file) openCropper(file);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const file = Array.from(e.dataTransfer.files || []).find(
+      (f) => f.type.startsWith("image/")
+    );
+    if (file) openCropper(file);
+  };
+  const handleCropConfirm = async (blob) => {
+    if (cropSrc) URL.revokeObjectURL(cropSrc);
+    setCropSrc(null);
+    const originalFile = pendingFileRef.current;
+    pendingFileRef.current = null;
+    const ext = (blob.type || "image/jpeg").split("/")[1]?.replace("jpeg", "jpg") ?? "jpg";
+    const baseName = originalFile?.name.replace(/\.[^.]+$/, "") ?? "cover";
+    const croppedFile = new File(
+      [blob],
+      `${baseName}.${ext}`,
+      { type: blob.type || "image/jpeg" }
+    );
+    await onUploadFile(croppedFile);
+  };
+  const handleCropCancel = () => {
+    if (cropSrc) URL.revokeObjectURL(cropSrc);
+    setCropSrc(null);
+    pendingFileRef.current = null;
+  };
+  if (uploading) {
+    return /* @__PURE__ */ jsxs("div", { className: "border border-dashed border-[var(--border-default)] rounded-[2px] p-6 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-5 h-5 animate-spin" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+        "Uploading",
+        uploadProgress !== null ? ` ${uploadProgress}%` : "\u2026"
+      ] })
+    ] });
+  }
+  if (value) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative aspect-[16/9] overflow-hidden rounded-[2px] border border-[var(--border-default)]", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: value,
+            alt: "Cover",
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRef.current?.click(),
+              className: "text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] underline underline-offset-2",
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[var(--border-default)]", children: "\xB7" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange(""),
+              className: "text-xs text-[var(--text-tertiary)] hover:text-[var(--text-primary)] inline-flex items-center gap-1",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }),
+                " Remove"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            onChange: handleFile
+          }
+        )
+      ] }),
+      cropSrc ? /* @__PURE__ */ jsx(
+        CropDialog,
+        {
+          open: true,
+          imageSrc: cropSrc,
+          onConfirm: handleCropConfirm,
+          onCancel: handleCropCancel
+        }
+      ) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragOver(true);
+          },
+          onDragLeave: () => setDragOver(false),
+          onDrop: handleDrop,
+          onClick: () => fileInputRef.current?.click(),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click();
+          },
+          className: `border border-dashed rounded-[2px] p-6 flex flex-col items-center justify-center gap-2 cursor-pointer transition-colors ${dragOver ? "border-[var(--accent-primary)] bg-[var(--interactive-hover)]" : "border-[var(--border-default)] hover:bg-[var(--interactive-hover)]"}`,
+          children: [
+            /* @__PURE__ */ jsx(ImageIcon, { className: "w-6 h-6 text-[var(--text-tertiary)]" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-sm text-[var(--text-secondary)] text-center", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-primary)] font-medium inline-flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(UploadCloud, { className: "w-4 h-4" }),
+                " Upload"
+              ] }),
+              " ",
+              "or drop an image"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-tertiary)]", children: "PNG, JPG, WEBP up to 5 MB \xB7 cropped to 16:9" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowUrl((v) => !v),
+          className: "text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] inline-flex items-center gap-1",
+          children: [
+            /* @__PURE__ */ jsx(LinkIcon, { className: "w-3 h-3" }),
+            showUrl ? "Hide URL field" : "Use an image URL instead"
+          ]
+        }
+      ),
+      showUrl ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "url",
+          placeholder: "https://\u2026",
+          onChange: (e) => onChange(e.target.value),
+          className: "w-full px-3 py-2 text-sm bg-[var(--bg-base)] border border-[var(--border-default)] rounded-[2px] focus:outline-none focus:border-[var(--accent-primary)]"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: handleFile
+        }
+      )
+    ] }),
+    cropSrc ? /* @__PURE__ */ jsx(
+      CropDialog,
+      {
+        open: true,
+        imageSrc: cropSrc,
+        onConfirm: handleCropConfirm,
+        onCancel: handleCropCancel
+      }
+    ) : null
+  ] });
+}
+export {
+  CoverImageField
+};
+//# sourceMappingURL=CoverImageField.js.map

package/dist/blog-editor/panels/CoverImageField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/panels/CoverImageField.tsx"],"sourcesContent":["// Cover image control for the post settings panel. Three states:\n//  1. Empty   — dropzone, \"Upload\" button, collapsible \"Use a URL\" section.\n//  2. Cropping — 16:9 crop dialog (react-easy-crop) after file selection.\n//  3. Uploading — progress indicator.\n//  4. Filled  — preview + Replace / Remove.\n// Keeps the current cover image stored as a plain URL string in the form so\n// it can be persisted via the existing data shape.\n\n'use client';\n\nimport { useCallback, useRef, useState, type ChangeEvent } from 'react';\nimport Cropper from 'react-easy-crop';\nimport type { Area } from 'react-easy-crop';\nimport { UploadCloud, ImageIcon, Loader2, X, Link as LinkIcon, Crop } from 'lucide-react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from '@withpotter/ui-kit/dialog';\nimport { Button } from '@withpotter/ui-kit/button';\n\ninterface CoverImageFieldProps {\n  value: string;\n  onChange: (value: string) => void;\n  onUploadFile: (file: File) => Promise<void>;\n  uploading: boolean;\n  uploadProgress: number | null;\n}\n\n// ---------------------------------------------------------------------------\n// Canvas helper — extracts the cropped region into a Blob.\n// ---------------------------------------------------------------------------\nasync function createCroppedBlob(\n  imageSrc: string,\n  pixelCrop: Area,\n  mimeType = 'image/jpeg',\n  quality = 0.9,\n): Promise<Blob> {\n  const image = await new Promise<HTMLImageElement>((resolve, reject) => {\n    const img = new Image();\n    img.onload = () => resolve(img);\n    img.onerror = reject;\n    img.src = imageSrc;\n  });\n\n  const canvas = document.createElement('canvas');\n  canvas.width = pixelCrop.width;\n  canvas.height = pixelCrop.height;\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('Could not get canvas context');\n\n  ctx.drawImage(\n    image,\n    pixelCrop.x,\n    pixelCrop.y,\n    pixelCrop.width,\n    pixelCrop.height,\n    0,\n    0,\n    pixelCrop.width,\n    pixelCrop.height,\n  );\n\n  return new Promise<Blob>((resolve, reject) =>\n    canvas.toBlob(\n      (blob) => (blob ? resolve(blob) : reject(new Error('toBlob failed'))),\n      mimeType,\n      quality,\n    ),\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Crop dialog (16:9 locked)\n// ---------------------------------------------------------------------------\ninterface CropDialogProps {\n  open: boolean;\n  imageSrc: string;\n  onConfirm: (croppedBlob: Blob) => void;\n  onCancel: () => void;\n}\n\nfunction CropDialog({ open, imageSrc, onConfirm, onCancel }: CropDialogProps) {\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n  const [processing, setProcessing] = useState(false);\n\n  const onCropComplete = useCallback((_: Area, areaPixels: Area) => {\n    setCroppedAreaPixels(areaPixels);\n  }, []);\n\n  const handleConfirm = async () => {\n    if (!croppedAreaPixels) return;\n    setProcessing(true);\n    try {\n      const blob = await createCroppedBlob(imageSrc, croppedAreaPixels);\n      onConfirm(blob);\n    } finally {\n      setProcessing(false);\n    }\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onCancel(); }}>\n      <DialogContent className=\"sm:max-w-xl\">\n        <DialogHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            <Crop className=\"w-4 h-4\" /> Crop cover image\n          </DialogTitle>\n        </DialogHeader>\n\n        {/* Cropper container — fixed height so the dialog is usable */}\n        <div className=\"relative w-full\" style={{ height: 320 }}>\n          <Cropper\n            image={imageSrc}\n            crop={crop}\n            zoom={zoom}\n            aspect={16 / 9}\n            onCropChange={setCrop}\n            onZoomChange={setZoom}\n            onCropComplete={onCropComplete}\n          />\n        </div>\n\n        {/* Zoom slider */}\n        <div className=\"flex items-center gap-3 px-1\">\n          <span className=\"text-xs text-[var(--text-tertiary)] w-10\">Zoom</span>\n          <input\n            type=\"range\"\n            min={1}\n            max={3}\n            step={0.05}\n            value={zoom}\n            onChange={(e) => setZoom(Number(e.target.value))}\n            className=\"flex-1 accent-[var(--accent-primary)]\"\n            aria-label=\"Zoom\"\n          />\n        </div>\n\n        <DialogFooter className=\"gap-2\">\n          <Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={processing || !croppedAreaPixels}\n            loading={processing}\n          >\n            Use this crop\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\nexport function CoverImageField({\n  value,\n  onChange,\n  onUploadFile,\n  uploading,\n  uploadProgress,\n}: CoverImageFieldProps) {\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [showUrl, setShowUrl] = useState(false);\n  const [dragOver, setDragOver] = useState(false);\n\n  // Crop dialog state: holds an object-URL of the selected file while cropping.\n  const [cropSrc, setCropSrc] = useState<string | null>(null);\n  const pendingFileRef = useRef<File | null>(null);\n\n  const openCropper = (file: File) => {\n    pendingFileRef.current = file;\n    // Create a temporary object URL for the crop preview.\n    setCropSrc(URL.createObjectURL(file));\n  };\n\n  const handleFile = (e: ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    e.target.value = '';\n    if (file) openCropper(file);\n  };\n\n  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setDragOver(false);\n    const file = Array.from(e.dataTransfer.files || []).find((f) =>\n      f.type.startsWith('image/'),\n    );\n    if (file) openCropper(file);\n  };\n\n  const handleCropConfirm = async (blob: Blob) => {\n    // Revoke the temporary object URL.\n    if (cropSrc) URL.revokeObjectURL(cropSrc);\n    setCropSrc(null);\n\n    // Wrap the blob in a File so the uploader can use its name/type.\n    const originalFile = pendingFileRef.current;\n    pendingFileRef.current = null;\n\n    // Derive extension from the blob MIME type so cover.jpg isn't used for a PNG.\n    const ext = (blob.type || 'image/jpeg').split('/')[1]?.replace('jpeg', 'jpg') ?? 'jpg';\n    const baseName = originalFile?.name.replace(/\\.[^.]+$/, '') ?? 'cover';\n    const croppedFile = new File(\n      [blob],\n      `${baseName}.${ext}`,\n      { type: blob.type || 'image/jpeg' },\n    );\n    await onUploadFile(croppedFile);\n  };\n\n  const handleCropCancel = () => {\n    if (cropSrc) URL.revokeObjectURL(cropSrc);\n    setCropSrc(null);\n    pendingFileRef.current = null;\n  };\n\n  if (uploading) {\n    return (\n      <div className=\"border border-dashed border-[var(--border-default)] rounded-[2px] p-6 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]\">\n        <Loader2 className=\"w-5 h-5 animate-spin\" />\n        <span className=\"text-sm\">\n          Uploading{uploadProgress !== null ? ` ${uploadProgress}%` : '…'}\n        </span>\n      </div>\n    );\n  }\n\n  if (value) {\n    return (\n      <>\n        <div className=\"space-y-2\">\n          <div className=\"relative aspect-[16/9] overflow-hidden rounded-[2px] border border-[var(--border-default)]\">\n            {/* Use plain img — Next/Image requires remote allow-list config */}\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={value}\n              alt=\"Cover\"\n              className=\"w-full h-full object-cover\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => fileInputRef.current?.click()}\n              className=\"text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] underline underline-offset-2\"\n            >\n              Replace\n            </button>\n            <span className=\"text-[var(--border-default)]\">·</span>\n            <button\n              type=\"button\"\n              onClick={() => onChange('')}\n              className=\"text-xs text-[var(--text-tertiary)] hover:text-[var(--text-primary)] inline-flex items-center gap-1\"\n            >\n              <X className=\"w-3 h-3\" /> Remove\n            </button>\n          </div>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            accept=\"image/*\"\n            className=\"hidden\"\n            onChange={handleFile}\n          />\n        </div>\n        {cropSrc ? (\n          <CropDialog\n            open\n            imageSrc={cropSrc}\n            onConfirm={handleCropConfirm}\n            onCancel={handleCropCancel}\n          />\n        ) : null}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"space-y-2\">\n        <div\n          onDragOver={(e) => {\n            e.preventDefault();\n            setDragOver(true);\n          }}\n          onDragLeave={() => setDragOver(false)}\n          onDrop={handleDrop}\n          onClick={() => fileInputRef.current?.click()}\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') fileInputRef.current?.click();\n          }}\n          className={`border border-dashed rounded-[2px] p-6 flex flex-col items-center justify-center gap-2 cursor-pointer transition-colors ${\n            dragOver\n              ? 'border-[var(--accent-primary)] bg-[var(--interactive-hover)]'\n              : 'border-[var(--border-default)] hover:bg-[var(--interactive-hover)]'\n          }`}\n        >\n          <ImageIcon className=\"w-6 h-6 text-[var(--text-tertiary)]\" />\n          <div className=\"text-sm text-[var(--text-secondary)] text-center\">\n            <span className=\"text-[var(--text-primary)] font-medium inline-flex items-center gap-1\">\n              <UploadCloud className=\"w-4 h-4\" /> Upload\n            </span>{' '}\n            or drop an image\n          </div>\n          <div className=\"text-xs text-[var(--text-tertiary)]\">\n            PNG, JPG, WEBP up to 5 MB · cropped to 16:9\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => setShowUrl((v) => !v)}\n          className=\"text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] inline-flex items-center gap-1\"\n        >\n          <LinkIcon className=\"w-3 h-3\" />\n          {showUrl ? 'Hide URL field' : 'Use an image URL instead'}\n        </button>\n        {showUrl ? (\n          <input\n            type=\"url\"\n            placeholder=\"https://…\"\n            onChange={(e) => onChange(e.target.value)}\n            className=\"w-full px-3 py-2 text-sm bg-[var(--bg-base)] border border-[var(--border-default)] rounded-[2px] focus:outline-none focus:border-[var(--accent-primary)]\"\n          />\n        ) : null}\n\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          className=\"hidden\"\n          onChange={handleFile}\n        />\n      </div>\n      {cropSrc ? (\n        <CropDialog\n          open\n          imageSrc={cropSrc}\n          onConfirm={handleCropConfirm}\n          onCancel={handleCropCancel}\n        />\n      ) : null}\n    </>\n  );\n}\n\n"],"mappings":"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","names":[]}

package/dist/blog-editor/panels/ImageAltDialog.d.ts

@@ -0,0 +1,11 @@
+export interface ImageAltDialogProps {
+    open: boolean;
+    /** Suggested alt text — usually the filename without extension. */
+    defaultAlt?: string;
+    onConfirm: (result: {
+        alt: string;
+        decorative: boolean;
+    }) => void;
+    onCancel: () => void;
+}
+export declare function ImageAltDialog({ open, defaultAlt, onConfirm, onCancel, }: ImageAltDialogProps): import("react").JSX.Element;

package/dist/blog-editor/panels/ImageAltDialog.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit/input";
+function ImageAltDialog({
+  open,
+  defaultAlt = "",
+  onConfirm,
+  onCancel
+}) {
+  const [alt, setAlt] = useState(defaultAlt);
+  const [decorative, setDecorative] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setAlt(defaultAlt);
+      setDecorative(false);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open, defaultAlt]);
+  const canInsert = decorative || alt.trim().length > 0;
+  const handleConfirm = () => {
+    if (!canInsert) return;
+    onConfirm({ alt: decorative ? "" : alt.trim(), decorative });
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Image alt text" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "image-alt-input",
+                className: "text-sm text-[var(--text-secondary)]",
+                children: "Describe the image for screen readers"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "image-alt-input",
+                ref: inputRef,
+                type: "text",
+                placeholder: "e.g. A barista pouring latte art",
+                value: alt,
+                disabled: decorative,
+                onChange: (e) => setAlt(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleConfirm();
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "image-alt-decorative",
+                type: "checkbox",
+                checked: decorative,
+                onChange: (e) => {
+                  setDecorative(e.target.checked);
+                  if (e.target.checked) setAlt("");
+                },
+                className: "h-4 w-4 accent-[var(--accent-primary)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "image-alt-decorative",
+                className: "text-sm text-[var(--text-secondary)] cursor-pointer select-none",
+                children: "Decorative image (no meaningful content)"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleConfirm, disabled: !canInsert, children: "Insert image" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  ImageAltDialog
+};
+//# sourceMappingURL=ImageAltDialog.js.map

package/dist/blog-editor/panels/ImageAltDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/panels/ImageAltDialog.tsx"],"sourcesContent":["// Dialog that collects alt text before an inline image is inserted into the\n// editor. The alt field is required unless the user explicitly marks the image\n// as decorative (aria-hidden), in which case an empty alt string is stored so\n// that published HTML is still valid (<img alt=\"\">).\n\n'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from '@withpotter/ui-kit/dialog';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input } from '@withpotter/ui-kit/input';\n\nexport interface ImageAltDialogProps {\n  open: boolean;\n  /** Suggested alt text — usually the filename without extension. */\n  defaultAlt?: string;\n  onConfirm: (result: { alt: string; decorative: boolean }) => void;\n  onCancel: () => void;\n}\n\nexport function ImageAltDialog({\n  open,\n  defaultAlt = '',\n  onConfirm,\n  onCancel,\n}: ImageAltDialogProps) {\n  const [alt, setAlt] = useState(defaultAlt);\n  const [decorative, setDecorative] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Reset state whenever the dialog opens for a new image.\n  useEffect(() => {\n    if (open) {\n      setAlt(defaultAlt);\n      setDecorative(false);\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open, defaultAlt]);\n\n  const canInsert = decorative || alt.trim().length > 0;\n\n  const handleConfirm = () => {\n    if (!canInsert) return;\n    onConfirm({ alt: decorative ? '' : alt.trim(), decorative });\n  };\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) onCancel();\n      }}\n    >\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Image alt text</DialogTitle>\n        </DialogHeader>\n\n        <div className=\"space-y-4\">\n          <div className=\"space-y-1.5\">\n            <label\n              htmlFor=\"image-alt-input\"\n              className=\"text-sm text-[var(--text-secondary)]\"\n            >\n              Describe the image for screen readers\n            </label>\n            <Input\n              id=\"image-alt-input\"\n              ref={inputRef}\n              type=\"text\"\n              placeholder=\"e.g. A barista pouring latte art\"\n              value={alt}\n              disabled={decorative}\n              onChange={(e) => setAlt(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  handleConfirm();\n                }\n              }}\n            />\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <input\n              id=\"image-alt-decorative\"\n              type=\"checkbox\"\n              checked={decorative}\n              onChange={(e) => {\n                setDecorative(e.target.checked);\n                if (e.target.checked) setAlt('');\n              }}\n              className=\"h-4 w-4 accent-[var(--accent-primary)]\"\n            />\n            <label\n              htmlFor=\"image-alt-decorative\"\n              className=\"text-sm text-[var(--text-secondary)] cursor-pointer select-none\"\n            >\n              Decorative image (no meaningful content)\n            </label>\n          </div>\n        </div>\n\n        <DialogFooter className=\"gap-2\">\n          <Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n            Cancel\n          </Button>\n          <Button type=\"button\" onClick={handleConfirm} disabled={!canInsert}>\n            Insert image\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA6DU,cAIA,YAJA;AAtDV,SAAS,WAAW,QAAQ,gBAAgB;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,aAAa;AAUf,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,UAAU;AACzC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,WAAW,OAAyB,IAAI;AAG9C,YAAU,MAAM;AACd,QAAI,MAAM;AACR,aAAO,UAAU;AACjB,oBAAc,KAAK;AACnB,4BAAsB,MAAM,SAAS,SAAS,MAAM,CAAC;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,QAAM,YAAY,cAAc,IAAI,KAAK,EAAE,SAAS;AAEpD,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC,UAAW;AAChB,cAAU,EAAE,KAAK,aAAa,KAAK,IAAI,KAAK,GAAG,WAAW,CAAC;AAAA,EAC7D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,WAAW;AACxB,YAAI,CAAC,OAAQ,UAAS;AAAA,MACxB;AAAA,MAEA,+BAAC,iBAAc,WAAU,eACvB;AAAA,4BAAC,gBACC,8BAAC,eAAY,4BAAc,GAC7B;AAAA,QAEA,qBAAC,SAAI,WAAU,aACb;AAAA,+BAAC,SAAI,WAAU,eACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,aAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK;AAAA,gBACtC,WAAW,CAAC,MAAM;AAChB,sBAAI,EAAE,QAAQ,SAAS;AACrB,sBAAE,eAAe;AACjB,kCAAc;AAAA,kBAChB;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,UAAU,CAAC,MAAM;AACf,gCAAc,EAAE,OAAO,OAAO;AAC9B,sBAAI,EAAE,OAAO,QAAS,QAAO,EAAE;AAAA,gBACjC;AAAA,gBACA,WAAU;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,aACF;AAAA,WACF;AAAA,QAEA,qBAAC,gBAAa,WAAU,SACtB;AAAA,8BAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,UAAU,oBAE7D;AAAA,UACA,oBAAC,UAAO,MAAK,UAAS,SAAS,eAAe,UAAU,CAAC,WAAW,0BAEpE;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/blog-editor/panels/LinkModal.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/react';
+interface LinkModalProps {
+    editor: Editor | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function LinkModal({ editor, open, onOpenChange }: LinkModalProps): import("react").JSX.Element;
+export {};

package/dist/blog-editor/panels/LinkModal.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit/input";
+function LinkModal({ editor, open, onOpenChange }) {
+  const [url, setUrl] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (!open || !editor) return;
+    setUrl(editor.getAttributes("link").href ?? "");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, [open, editor]);
+  const apply = () => {
+    if (!editor) return;
+    const trimmed = url.trim();
+    if (!trimmed) {
+      editor.chain().focus().unsetLink().run();
+    } else {
+      const href = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+      editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+    }
+    onOpenChange(false);
+  };
+  const remove = () => {
+    if (!editor) return;
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Insert link" }) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: inputRef,
+        type: "url",
+        placeholder: "https://example.com",
+        value: url,
+        onChange: (e) => setUrl(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            apply();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+      editor?.isActive("link") ? /* @__PURE__ */ jsx(Button, { variant: "ghost", type: "button", onClick: remove, children: "Remove link" }) : null,
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: apply, disabled: !url.trim() && !editor?.isActive("link"), children: "Apply" })
+    ] })
+  ] }) });
+}
+export {
+  LinkModal
+};
+//# sourceMappingURL=LinkModal.js.map

package/dist/blog-editor/panels/LinkModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/panels/LinkModal.tsx"],"sourcesContent":["// Modal that captures a URL and applies it to the current selection as a link.\n// Replaces the native window.prompt that v1 used.\n\n'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport type { ChangeEvent, KeyboardEvent } from 'react'\nimport type { Editor } from '@tiptap/react'\n// Load the chained-command type augmentations (setLink/unsetLink) so this\n// file's standalone .d.ts build resolves them; erased at emit.\nimport type {} from '@tiptap/extension-link'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@withpotter/ui-kit/dialog'\nimport { Button } from '@withpotter/ui-kit/button'\nimport { Input } from '@withpotter/ui-kit/input'\n\ninterface LinkModalProps {\n  editor: Editor | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}\n\nexport function LinkModal({ editor, open, onOpenChange }: LinkModalProps) {\n  const [url, setUrl] = useState('')\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (!open || !editor) return\n    setUrl(editor.getAttributes('link').href ?? '')\n    requestAnimationFrame(() => inputRef.current?.focus())\n  }, [open, editor])\n\n  const apply = () => {\n    if (!editor) return\n    const trimmed = url.trim()\n    if (!trimmed) {\n      editor.chain().focus().unsetLink().run()\n    } else {\n      const href = /^https?:\\/\\//i.test(trimmed) ? trimmed : `https://${trimmed}`\n      editor.chain().focus().extendMarkRange('link').setLink({ href }).run()\n    }\n    onOpenChange(false)\n  }\n\n  const remove = () => {\n    if (!editor) return\n    editor.chain().focus().extendMarkRange('link').unsetLink().run()\n    onOpenChange(false)\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Insert link</DialogTitle>\n        </DialogHeader>\n        <Input\n          ref={inputRef}\n          type=\"url\"\n          placeholder=\"https://example.com\"\n          value={url}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === 'Enter') {\n              e.preventDefault()\n              apply()\n            }\n          }}\n        />\n        <DialogFooter className=\"gap-2\">\n          {editor?.isActive('link') ? (\n            <Button variant=\"ghost\" type=\"button\" onClick={remove}>\n              Remove link\n            </Button>\n          ) : null}\n          <Button variant=\"secondary\" type=\"button\" onClick={() => onOpenChange(false)}>\n            Cancel\n          </Button>\n          <Button type=\"button\" onClick={apply} disabled={!url.trim() && !editor?.isActive('link')}>\n            Apply\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";AAqDU,cAeF,YAfE;AAhDV,SAAS,WAAW,QAAQ,gBAAgB;AAM5C,SAAS,QAAQ,eAAe,cAAc,aAAa,oBAAoB;AAC/E,SAAS,cAAc;AACvB,SAAS,aAAa;AAQf,SAAS,UAAU,EAAE,QAAQ,MAAM,aAAa,GAAmB;AACxE,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,WAAW,OAAyB,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,OAAQ;AACtB,WAAO,OAAO,cAAc,MAAM,EAAE,QAAQ,EAAE;AAC9C,0BAAsB,MAAM,SAAS,SAAS,MAAM,CAAC;AAAA,EACvD,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,OAAQ;AACb,UAAM,UAAU,IAAI,KAAK;AACzB,QAAI,CAAC,SAAS;AACZ,aAAO,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI;AAAA,IACzC,OAAO;AACL,YAAM,OAAO,gBAAgB,KAAK,OAAO,IAAI,UAAU,WAAW,OAAO;AACzE,aAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,IAAI;AAAA,IACvE;AACA,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,SAAS,MAAM;AACnB,QAAI,CAAC,OAAQ;AACb,WAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM,EAAE,UAAU,EAAE,IAAI;AAC/D,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,eACvB;AAAA,wBAAC,gBACC,8BAAC,eAAY,yBAAW,GAC1B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU,CAAC,MAAqC,OAAO,EAAE,OAAO,KAAK;AAAA,QACrE,WAAW,CAAC,MAAuC;AACjD,cAAI,EAAE,QAAQ,SAAS;AACrB,cAAE,eAAe;AACjB,kBAAM;AAAA,UACR;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,gBAAa,WAAU,SACrB;AAAA,cAAQ,SAAS,MAAM,IACtB,oBAAC,UAAO,SAAQ,SAAQ,MAAK,UAAS,SAAS,QAAQ,yBAEvD,IACE;AAAA,MACJ,oBAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,MAAM,aAAa,KAAK,GAAG,oBAE9E;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,SAAS,OAAO,UAAU,CAAC,IAAI,KAAK,KAAK,CAAC,QAAQ,SAAS,MAAM,GAAG,mBAE1F;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/blog-editor/panels/PostSettingsPanel.d.ts

@@ -0,0 +1,10 @@
+import type { BlogEditorState } from '../types';
+interface PostSettingsPanelProps {
+    form: BlogEditorState;
+    setField: <K extends keyof BlogEditorState>(field: K, value: BlogEditorState[K]) => void;
+    uploading: boolean;
+    uploadProgress: number | null;
+    onUploadImage: (file: File) => Promise<string>;
+}
+export declare function PostSettingsPanel({ form, setField, uploading, uploadProgress, onUploadImage, }: PostSettingsPanelProps): import("react").JSX.Element;
+export {};