@btst/stack 2.8.1 → 2.9.1

package/dist/packages/stack/src/plugins/media/client/utils/image-compression.mjs

@@ -0,0 +1,65 @@
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error(`Failed to load image: ${file.name}`));
+    };
+    img.src = url;
+  });
+}
+const SKIP_TYPES = /* @__PURE__ */ new Set(["image/svg+xml", "image/gif"]);
+async function compressImage(file, options = {}) {
+  if (!file.type.startsWith("image/") || SKIP_TYPES.has(file.type)) {
+    return file;
+  }
+  if (typeof document === "undefined") return file;
+  const {
+    maxWidth = 2048,
+    maxHeight = 2048,
+    quality = 0.85,
+    outputFormat
+  } = options;
+  const img = await loadImage(file);
+  let { width, height } = img;
+  const needsResize = width > maxWidth || height > maxHeight;
+  const needsFormatChange = outputFormat !== void 0 && outputFormat !== file.type;
+  if (!needsResize && !needsFormatChange) return file;
+  if (needsResize) {
+    const ratio = Math.min(maxWidth / width, maxHeight / height);
+    width = Math.round(width * ratio);
+    height = Math.round(height * ratio);
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return file;
+  ctx.drawImage(img, 0, 0, width, height);
+  const mimeType = outputFormat ?? file.type;
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("canvas.toBlob returned null"));
+          return;
+        }
+        let name = file.name;
+        if (outputFormat && outputFormat !== file.type) {
+          const ext = outputFormat.split("/")[1] ?? "jpg";
+          name = name.replace(/\.[^.]+$/, `.${ext}`);
+        }
+        resolve(new File([blob], name, { type: mimeType }));
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+export { compressImage };

package/dist/packages/stack/src/plugins/media/db.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+const db = require('@btst/db');
+
+const mediaSchema = db.createDbPlugin("media", {
+  asset: {
+    modelName: "mediaAsset",
+    fields: {
+      filename: {
+        type: "string",
+        required: true
+      },
+      originalName: {
+        type: "string",
+        required: true
+      },
+      mimeType: {
+        type: "string",
+        required: true
+      },
+      size: {
+        type: "number",
+        required: true
+      },
+      url: {
+        type: "string",
+        required: true
+      },
+      folderId: {
+        type: "string",
+        required: false
+      },
+      alt: {
+        type: "string",
+        required: false
+      },
+      createdAt: {
+        type: "date",
+        defaultValue: () => /* @__PURE__ */ new Date()
+      }
+    }
+  },
+  folder: {
+    modelName: "mediaFolder",
+    fields: {
+      name: {
+        type: "string",
+        required: true
+      },
+      parentId: {
+        type: "string",
+        required: false
+      },
+      createdAt: {
+        type: "date",
+        defaultValue: () => /* @__PURE__ */ new Date()
+      }
+    }
+  }
+});
+
+exports.mediaSchema = mediaSchema;

package/dist/packages/stack/src/plugins/media/db.mjs

@@ -0,0 +1,60 @@
+import { createDbPlugin } from '@btst/db';
+
+const mediaSchema = createDbPlugin("media", {
+  asset: {
+    modelName: "mediaAsset",
+    fields: {
+      filename: {
+        type: "string",
+        required: true
+      },
+      originalName: {
+        type: "string",
+        required: true
+      },
+      mimeType: {
+        type: "string",
+        required: true
+      },
+      size: {
+        type: "number",
+        required: true
+      },
+      url: {
+        type: "string",
+        required: true
+      },
+      folderId: {
+        type: "string",
+        required: false
+      },
+      alt: {
+        type: "string",
+        required: false
+      },
+      createdAt: {
+        type: "date",
+        defaultValue: () => /* @__PURE__ */ new Date()
+      }
+    }
+  },
+  folder: {
+    modelName: "mediaFolder",
+    fields: {
+      name: {
+        type: "string",
+        required: true
+      },
+      parentId: {
+        type: "string",
+        required: false
+      },
+      createdAt: {
+        type: "date",
+        defaultValue: () => /* @__PURE__ */ new Date()
+      }
+    }
+  }
+});
+
+export { mediaSchema };

package/dist/packages/stack/src/plugins/media/schemas.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+const z = require('zod');
+
+const AssetListQuerySchema = z.z.object({
+  folderId: z.z.string().optional(),
+  mimeType: z.z.string().optional(),
+  query: z.z.string().optional(),
+  offset: z.z.coerce.number().int().min(0).optional(),
+  limit: z.z.coerce.number().int().min(1).max(100).optional()
+});
+const createAssetSchema = z.z.object({
+  filename: z.z.string().min(1),
+  originalName: z.z.string().min(1),
+  mimeType: z.z.string().min(1),
+  // Allow 0 for URL-registered assets where size is unknown at registration time.
+  size: z.z.number().int().min(0),
+  url: z.z.httpUrl(),
+  folderId: z.z.string().optional(),
+  alt: z.z.string().optional()
+});
+const updateAssetSchema = z.z.object({
+  alt: z.z.string().optional(),
+  folderId: z.z.string().nullable().optional()
+});
+const createFolderSchema = z.z.object({
+  name: z.z.string().min(1),
+  parentId: z.z.string().optional()
+});
+const uploadTokenRequestSchema = z.z.object({
+  filename: z.z.string().min(1),
+  mimeType: z.z.string().min(1),
+  size: z.z.number().int().positive(),
+  folderId: z.z.string().optional()
+});
+
+exports.AssetListQuerySchema = AssetListQuerySchema;
+exports.createAssetSchema = createAssetSchema;
+exports.createFolderSchema = createFolderSchema;
+exports.updateAssetSchema = updateAssetSchema;
+exports.uploadTokenRequestSchema = uploadTokenRequestSchema;

package/dist/packages/stack/src/plugins/media/schemas.mjs

@@ -0,0 +1,35 @@
+import { z } from 'zod';
+
+const AssetListQuerySchema = z.object({
+  folderId: z.string().optional(),
+  mimeType: z.string().optional(),
+  query: z.string().optional(),
+  offset: z.coerce.number().int().min(0).optional(),
+  limit: z.coerce.number().int().min(1).max(100).optional()
+});
+const createAssetSchema = z.object({
+  filename: z.string().min(1),
+  originalName: z.string().min(1),
+  mimeType: z.string().min(1),
+  // Allow 0 for URL-registered assets where size is unknown at registration time.
+  size: z.number().int().min(0),
+  url: z.httpUrl(),
+  folderId: z.string().optional(),
+  alt: z.string().optional()
+});
+const updateAssetSchema = z.object({
+  alt: z.string().optional(),
+  folderId: z.string().nullable().optional()
+});
+const createFolderSchema = z.object({
+  name: z.string().min(1),
+  parentId: z.string().optional()
+});
+const uploadTokenRequestSchema = z.object({
+  filename: z.string().min(1),
+  mimeType: z.string().min(1),
+  size: z.number().int().positive(),
+  folderId: z.string().optional()
+});
+
+export { AssetListQuerySchema, createAssetSchema, createFolderSchema, updateAssetSchema, uploadTokenRequestSchema };

package/dist/packages/ui/src/components/minimal-tiptap/components/image/image-edit-block.cjs

@@ -7,6 +7,7 @@ const React = require('react');
 const button = require('../../../button.cjs');
 const label = require('../../../label.cjs');
 const input = require('../../../input.cjs');
+const separator = require('../../../separator.cjs');
 
 function _interopNamespaceCompat(e) {
   if (e && typeof e === 'object' && 'default' in e) return e;
@@ -24,7 +25,8 @@ const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 const ImageEditBlock = ({
   editor,
-  close
+  close,
+  imagePickerTrigger: ImagePickerTrigger
 }) => {
   const fileInputRef = React__namespace.useRef(null);
   const [link, setLink] = React__namespace.useState("");
@@ -79,6 +81,21 @@ const ImageEditBlock = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", className: "w-full", onClick: handleClick, children: "Upload from your computer" }),
+    ImagePickerTrigger && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { className: "text-muted-foreground text-xs uppercase tracking-wider", children: "Or browse media library" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ImagePickerTrigger,
+          {
+            onSelect: (url) => {
+              editor.commands.setImages([{ src: url }]);
+              close();
+            }
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {

package/dist/packages/ui/src/components/minimal-tiptap/components/image/image-edit-block.mjs

@@ -1,12 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Button } from '../../../button.mjs';
 import { Label } from '../../../label.mjs';
 import { Input } from '../../../input.mjs';
+import { Separator } from '../../../separator.mjs';
 
 const ImageEditBlock = ({
   editor,
-  close
+  close,
+  imagePickerTrigger: ImagePickerTrigger
 }) => {
   const fileInputRef = React.useRef(null);
   const [link, setLink] = React.useState("");
@@ -61,6 +63,21 @@ const ImageEditBlock = ({
       ] })
     ] }),
     /* @__PURE__ */ jsx(Button, { type: "button", className: "w-full", onClick: handleClick, children: "Upload from your computer" }),
+    ImagePickerTrigger && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-muted-foreground text-xs uppercase tracking-wider", children: "Or browse media library" }),
+        /* @__PURE__ */ jsx(
+          ImagePickerTrigger,
+          {
+            onSelect: (url) => {
+              editor.commands.setImages([{ src: url }]);
+              close();
+            }
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(
       "input",
       {

package/dist/packages/ui/src/components/minimal-tiptap/components/image/image-edit-dialog.cjs

@@ -7,7 +7,7 @@ const toolbarButton = require('../toolbar-button.cjs');
 const dialog = require('../../../dialog.cjs');
 const imageEditBlock = require('./image-edit-block.cjs');
 
-const ImageEditDialog = ({ editor, size, variant }) => {
+const ImageEditDialog = ({ editor, size, variant, imagePickerTrigger }) => {
   const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -26,7 +26,7 @@ const ImageEditDialog = ({ editor, size, variant }) => {
         /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Select image" }),
         /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { className: "sr-only", children: "Upload an image from your computer" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(imageEditBlock.ImageEditBlock, { editor, close: () => setOpen(false) })
+      /* @__PURE__ */ jsxRuntime.jsx(imageEditBlock.ImageEditBlock, { editor, close: () => setOpen(false), imagePickerTrigger })
     ] })
   ] });
 };

package/dist/packages/ui/src/components/minimal-tiptap/components/image/image-edit-dialog.mjs

@@ -5,7 +5,7 @@ import { ToolbarButton } from '../toolbar-button.mjs';
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../../../dialog.mjs';
 import { ImageEditBlock } from './image-edit-block.mjs';
 
-const ImageEditDialog = ({ editor, size, variant }) => {
+const ImageEditDialog = ({ editor, size, variant, imagePickerTrigger }) => {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -24,7 +24,7 @@ const ImageEditDialog = ({ editor, size, variant }) => {
         /* @__PURE__ */ jsx(DialogTitle, { children: "Select image" }),
         /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "Upload an image from your computer" })
       ] }),
-      /* @__PURE__ */ jsx(ImageEditBlock, { editor, close: () => setOpen(false) })
+      /* @__PURE__ */ jsx(ImageEditBlock, { editor, close: () => setOpen(false), imagePickerTrigger })
     ] })
   ] });
 };

package/dist/packages/ui/src/components/minimal-tiptap/components/section/five.cjs

@@ -42,11 +42,12 @@ const SectionFive = ({
   activeActions = formatActions.map((action) => action.value),
   mainActionCount = 0,
   size,
-  variant
+  variant,
+  imagePickerTrigger
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(linkEditPopover.LinkEditPopover, { editor, size, variant }),
-    /* @__PURE__ */ jsxRuntime.jsx(imageEditDialog.ImageEditDialog, { editor, size, variant }),
+    /* @__PURE__ */ jsxRuntime.jsx(imageEditDialog.ImageEditDialog, { editor, size, variant, imagePickerTrigger }),
     /* @__PURE__ */ jsxRuntime.jsx(
       toolbarSection.ToolbarSection,
       {

package/dist/packages/ui/src/components/minimal-tiptap/components/section/five.mjs

@@ -38,11 +38,12 @@ const SectionFive = ({
   activeActions = formatActions.map((action) => action.value),
   mainActionCount = 0,
   size,
-  variant
+  variant,
+  imagePickerTrigger
 }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(LinkEditPopover, { editor, size, variant }),
-    /* @__PURE__ */ jsx(ImageEditDialog, { editor, size, variant }),
+    /* @__PURE__ */ jsx(ImageEditDialog, { editor, size, variant, imagePickerTrigger }),
     /* @__PURE__ */ jsx(
       ToolbarSection,
       {

package/dist/packages/ui/src/components/minimal-tiptap/minimal-tiptap.cjs

@@ -16,7 +16,10 @@ const useMinimalTiptap = require('./hooks/use-minimal-tiptap.cjs');
 const measuredContainer = require('./components/measured-container.cjs');
 const useTiptapEditor = require('./hooks/use-tiptap-editor.cjs');
 
-const Toolbar = ({ editor }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border flex h-12 shrink-0 overflow-x-auto border-b p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-max items-center gap-px", children: [
+const Toolbar = ({
+  editor,
+  imagePickerTrigger
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border flex h-12 shrink-0 overflow-x-auto border-b p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-max items-center gap-px", children: [
   /* @__PURE__ */ jsxRuntime.jsx(one.SectionOne, { editor, activeLevels: [1, 2, 3, 4, 5, 6] }),
   /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-2" }),
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -51,7 +54,8 @@ const Toolbar = ({ editor }) => /* @__PURE__ */ jsxRuntime.jsx("div", { classNam
     {
       editor,
       activeActions: ["codeBlock", "blockquote", "horizontalRule"],
-      mainActionCount: 0
+      mainActionCount: 0,
+      imagePickerTrigger
     }
   )
 ] }) });
@@ -60,6 +64,7 @@ const MinimalTiptapEditor = ({
   onChange,
   className,
   editorContentClassName,
+  imagePickerTrigger,
   ...props
 }) => {
   const editor = useMinimalTiptap.useMinimalTiptapEditor({
@@ -75,7 +80,8 @@ const MinimalTiptapEditor = ({
     {
       editor,
       className,
-      editorContentClassName
+      editorContentClassName,
+      imagePickerTrigger
     }
   ) });
 };
@@ -83,7 +89,8 @@ MinimalTiptapEditor.displayName = "MinimalTiptapEditor";
 const MainMinimalTiptapEditor = ({
   editor: providedEditor,
   className,
-  editorContentClassName
+  editorContentClassName,
+  imagePickerTrigger
 }) => {
   const { editor } = useTiptapEditor.useTiptapEditor(providedEditor);
   if (!editor) {
@@ -100,7 +107,7 @@ const MainMinimalTiptapEditor = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { editor }),
+        /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { editor, imagePickerTrigger }),
         /* @__PURE__ */ jsxRuntime.jsx(
           index.EditorContent,
           {

package/dist/packages/ui/src/components/minimal-tiptap/minimal-tiptap.mjs

@@ -12,7 +12,10 @@ import { useMinimalTiptapEditor } from './hooks/use-minimal-tiptap.mjs';
 import { MeasuredContainer } from './components/measured-container.mjs';
 import { useTiptapEditor } from './hooks/use-tiptap-editor.mjs';
 
-const Toolbar = ({ editor }) => /* @__PURE__ */ jsx("div", { className: "border-border flex h-12 shrink-0 overflow-x-auto border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-max items-center gap-px", children: [
+const Toolbar = ({
+  editor,
+  imagePickerTrigger
+}) => /* @__PURE__ */ jsx("div", { className: "border-border flex h-12 shrink-0 overflow-x-auto border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-max items-center gap-px", children: [
   /* @__PURE__ */ jsx(SectionOne, { editor, activeLevels: [1, 2, 3, 4, 5, 6] }),
   /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2" }),
   /* @__PURE__ */ jsx(
@@ -47,7 +50,8 @@ const Toolbar = ({ editor }) => /* @__PURE__ */ jsx("div", { className: "border-
     {
       editor,
       activeActions: ["codeBlock", "blockquote", "horizontalRule"],
-      mainActionCount: 0
+      mainActionCount: 0,
+      imagePickerTrigger
     }
   )
 ] }) });
@@ -56,6 +60,7 @@ const MinimalTiptapEditor = ({
   onChange,
   className,
   editorContentClassName,
+  imagePickerTrigger,
   ...props
 }) => {
   const editor = useMinimalTiptapEditor({
@@ -71,7 +76,8 @@ const MinimalTiptapEditor = ({
     {
       editor,
       className,
-      editorContentClassName
+      editorContentClassName,
+      imagePickerTrigger
     }
   ) });
 };
@@ -79,7 +85,8 @@ MinimalTiptapEditor.displayName = "MinimalTiptapEditor";
 const MainMinimalTiptapEditor = ({
   editor: providedEditor,
   className,
-  editorContentClassName
+  editorContentClassName,
+  imagePickerTrigger
 }) => {
   const { editor } = useTiptapEditor(providedEditor);
   if (!editor) {
@@ -96,7 +103,7 @@ const MainMinimalTiptapEditor = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Toolbar, { editor }),
+        /* @__PURE__ */ jsx(Toolbar, { editor, imagePickerTrigger }),
         /* @__PURE__ */ jsx(
           EditorContent,
           {

package/dist/plugins/blog/client/index.d.cts

@@ -392,6 +392,17 @@ declare const BLOG_LOCALIZATION: {
 };
 type BlogLocalization = typeof BLOG_LOCALIZATION;
 
+/**
+ * Props for the overridable blog featured image input component.
+ */
+interface BlogImageInputFieldProps {
+    /** Current image URL value */
+    value: string;
+    /** Called when the image URL changes */
+    onChange: (value: string) => void;
+    /** Whether the field is required */
+    isRequired?: boolean;
+}
 /**
  * Context passed to lifecycle hooks
  */
@@ -435,9 +446,55 @@ interface BlogPluginOverrides {
      */
     Image?: ComponentType<React.ImgHTMLAttributes<HTMLImageElement> & Record<string, any>>;
     /**
-     * Function used to upload an image and return its URL.
+     * Function used to upload a new image file and return its URL.
+     * This is separate from `imagePicker`, which selects an existing asset URL.
      */
     uploadImage: (file: File) => Promise<string>;
+    /**
+     * Optional custom component for the featured image field.
+     *
+     * When provided it replaces the default file-upload input entirely.
+     * The component receives `value` (current URL string) and `onChange` (setter).
+     *
+     * Typical use case: render a preview when a value is set, and a media-picker
+     * trigger when no value is set.
+     *
+     * @example
+     * ```tsx
+     * imageInputField: ({ value, onChange }) =>
+     *   value ? (
+     *     <div>
+     *       <img src={value} alt="Preview" />
+     *       <MediaPicker trigger={<button>Change</button>} accept={["image/*"]}
+     *         onSelect={(assets) => onChange(assets[0].url)} />
+     *     </div>
+     *   ) : (
+     *     <MediaPicker trigger={<button>Browse media</button>} accept={["image/*"]}
+     *       onSelect={(assets) => onChange(assets[0].url)} />
+     *   )
+     * ```
+     */
+    imageInputField?: ComponentType<BlogImageInputFieldProps>;
+    /**
+     * Optional trigger component for a media picker.
+     * When provided, it is rendered adjacent to the Markdown editor and allows
+     * users to browse and select previously uploaded assets.
+     * Receives `onSelect(url)` — insert the chosen URL into the editor.
+     *
+     * @example
+     * ```tsx
+     * imagePicker: ({ onSelect }) => (
+     *   <MediaPicker
+     *     trigger={<Button size="sm" variant="outline">Browse media</Button>}
+     *     accept={["image/*"]}
+     *     onSelect={(assets) => onSelect(assets[0].url)}
+     *   />
+     * )
+     * ```
+     */
+    imagePicker?: ComponentType<{
+        onSelect: (url: string) => void;
+    }>;
     /**
      * Localization object for the blog plugin
      */

package/dist/plugins/blog/client/index.d.mts

@@ -392,6 +392,17 @@ declare const BLOG_LOCALIZATION: {
 };
 type BlogLocalization = typeof BLOG_LOCALIZATION;
 
+/**
+ * Props for the overridable blog featured image input component.
+ */
+interface BlogImageInputFieldProps {
+    /** Current image URL value */
+    value: string;
+    /** Called when the image URL changes */
+    onChange: (value: string) => void;
+    /** Whether the field is required */
+    isRequired?: boolean;
+}
 /**
  * Context passed to lifecycle hooks
  */
@@ -435,9 +446,55 @@ interface BlogPluginOverrides {
      */
     Image?: ComponentType<React.ImgHTMLAttributes<HTMLImageElement> & Record<string, any>>;
     /**
-     * Function used to upload an image and return its URL.
+     * Function used to upload a new image file and return its URL.
+     * This is separate from `imagePicker`, which selects an existing asset URL.
      */
     uploadImage: (file: File) => Promise<string>;
+    /**
+     * Optional custom component for the featured image field.
+     *
+     * When provided it replaces the default file-upload input entirely.
+     * The component receives `value` (current URL string) and `onChange` (setter).
+     *
+     * Typical use case: render a preview when a value is set, and a media-picker
+     * trigger when no value is set.
+     *
+     * @example
+     * ```tsx
+     * imageInputField: ({ value, onChange }) =>
+     *   value ? (
+     *     <div>
+     *       <img src={value} alt="Preview" />
+     *       <MediaPicker trigger={<button>Change</button>} accept={["image/*"]}
+     *         onSelect={(assets) => onChange(assets[0].url)} />
+     *     </div>
+     *   ) : (
+     *     <MediaPicker trigger={<button>Browse media</button>} accept={["image/*"]}
+     *       onSelect={(assets) => onChange(assets[0].url)} />
+     *   )
+     * ```
+     */
+    imageInputField?: ComponentType<BlogImageInputFieldProps>;
+    /**
+     * Optional trigger component for a media picker.
+     * When provided, it is rendered adjacent to the Markdown editor and allows
+     * users to browse and select previously uploaded assets.
+     * Receives `onSelect(url)` — insert the chosen URL into the editor.
+     *
+     * @example
+     * ```tsx
+     * imagePicker: ({ onSelect }) => (
+     *   <MediaPicker
+     *     trigger={<Button size="sm" variant="outline">Browse media</Button>}
+     *     accept={["image/*"]}
+     *     onSelect={(assets) => onSelect(assets[0].url)}
+     *   />
+     * )
+     * ```
+     */
+    imagePicker?: ComponentType<{
+        onSelect: (url: string) => void;
+    }>;
     /**
      * Localization object for the blog plugin
      */