@realiizlabs/admin 0.8.2 → 0.9.0

package/dist/forms-ui/index.d.cts

@@ -4,16 +4,35 @@ import { C as ContentTypeEntry } from '../types-DyryuIX1.cjs';
 import 'zod';
 
 /**
- * Control strings ↔ frontmatter values. Pure.
+ * Picked images beside the form state. An image FIELD's value stays a path
+ * string (what the frontmatter wants); the shrunk bytes for a newly chosen
+ * picture live here until submit, keyed by field name, with an object URL for
+ * the preview and the previous path so Remove can restore it.
  *
- * Controls hold strings (or booleans / Files). The schema wants typed values.
- * `toControl` seeds a control from an existing frontmatter value — including
- * a Date from a previously-parsed file — and `toValue` assembles what goes to
- * safeParse. Anything the schema then coerces (dates) is the schema's business.
+ * The host decides the path and does the shrinking (`onPickImage`) because it
+ * knows the slug and the size rules; this hook only keeps the result.
  */
-
-/** Stand-in path for an image chosen but not yet uploaded — replaced by ADMIN-06. */
-declare const PENDING_UPLOAD_PREFIX = "pending-upload/";
+interface PickedImage {
+    path: string;
+    blob: Blob;
+    previewUrl: string;
+    width?: number;
+    height?: number;
+    /** The field's value before this pick, restored by Remove. */
+    previous: string;
+}
+type PickResult = {
+    path: string;
+    blob: Blob;
+    previewUrl?: string;
+    width?: number;
+    height?: number;
+};
+type PickImage = (field: string, file: File) => Promise<PickResult>;
+type SubmittedImages = Record<string, {
+    path: string;
+    blob: Blob;
+}>;
 
 type LabelRenderer = (label: string, help: string) => ReactNode;
 /**
@@ -70,13 +89,25 @@ interface MarkdownEditorProps {
      * selection as `<Term definition="">word</Term>`. Off unless the site has such a component.
      */
     termComponent?: string;
+    /**
+     * Upload a picture for the body: shrink, name and hand back its final path and a
+     * preview URL. When set, the toolbar Image button opens a file picker (and drop or
+     * paste of an image onto the text does the same) and inserts ![description](path).
+     */
+    onUploadImage?: (file: File) => Promise<{
+        path: string;
+        previewUrl: string;
+    }>;
+    /** Paths of not-yet-committed pictures → object URLs, applied to <img src> in the preview. */
+    previewSrc?: Record<string, string>;
 }
-declare function MarkdownEditor({ id, name, value, onChange, placeholder, renderPreview, previewClassName, minHeight, termComponent }: MarkdownEditorProps): react.JSX.Element;
+declare function MarkdownEditor({ id, name, value, onChange, placeholder, renderPreview, previewClassName, minHeight, termComponent, onUploadImage, previewSrc }: MarkdownEditorProps): react.JSX.Element;
 
 interface ContentFormSubmission {
     frontmatter: Record<string, unknown>;
     body: string;
-    files: Record<string, File>;
+    /** Newly picked pictures by field name — the frontmatter already holds each one's final path. */
+    images: SubmittedImages;
 }
 interface ContentFormProps {
     entry: ContentTypeEntry;
@@ -99,6 +130,17 @@ interface ContentFormProps {
     previewClassName?: string;
     /** Site tooltip MDX component name (e.g. "Term") to expose as a toolbar button. */
     termComponent?: string;
+    /**
+     * Image fields: shrink and name a chosen file (the host knows the slug and the
+     * size rules) and hand back { path, blob, previewUrl?, width?, height? }. The
+     * field's value becomes `path`; the blob rides along in the submission. Without
+     * this, image fields are plain text paths.
+     */
+    onPickImage?: PickImage;
+    /** Editor toolbar Image button: upload a picture for the body and return its path + preview URL. */
+    onUploadImage?: MarkdownEditorProps["onUploadImage"];
+    /** Paths of not-yet-committed pictures → object URLs, so the Preview tab shows them. */
+    previewSrc?: MarkdownEditorProps["previewSrc"];
     /**
      * Put Cancel/Save in a bar that the host can pin to the bottom of the page
      * (`.realiiz-form__bar`; the shell makes it sticky). The bar also reports
@@ -130,7 +172,22 @@ interface ContentFormProps {
 }
 /** "Hello, World! 2026" → "hello-world-2026" — the same rule the blog's slug regex enforces. */
 declare function slugify(s: string): string;
-declare function ContentForm({ entry, initialValues, initialBody, onSubmit, onCancel, submitLabel, className, showBody, bodyLabel, renderPreview, previewClassName, termComponent, stickyBar, status, barExtra, footer, renderLabel, derive, guardUnsaved }: ContentFormProps): react.JSX.Element;
+declare function ContentForm({ entry, initialValues, initialBody, onSubmit, onCancel, submitLabel, className, showBody, bodyLabel, renderPreview, previewClassName, termComponent, onPickImage, onUploadImage, previewSrc, stickyBar, status, barExtra, footer, renderLabel, derive, guardUnsaved }: ContentFormProps): react.JSX.Element;
+
+declare const IMAGE_HINT = "JPG, PNG or WebP, up to 10MB. We shrink it for the web.";
+interface ImageInputProps {
+    id: string;
+    name: string;
+    /** The field's current value — a path such as /blog/my-post.webp, or "". */
+    value: string;
+    picked?: PickedImage;
+    invalid?: boolean;
+    disabled?: boolean;
+    onPick: (file: File) => Promise<void>;
+    onRemove?: () => void;
+    onBlur?: () => void;
+}
+declare function ImageInput(p: ImageInputProps): react.JSX.Element;
 
 /**
  * ChipsInput — tags as chips. Enter or comma adds, × or Backspace-on-empty
@@ -149,4 +206,4 @@ declare function ChipsInput({ id, name, value, onChange, onBlur, placeholder, in
     max?: number;
 }): react.JSX.Element;
 
-export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, PENDING_UPLOAD_PREFIX, TOOLS, slugify };
+export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, IMAGE_HINT, ImageInput, type ImageInputProps, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, type PickImage, type PickResult, type PickedImage, type SubmittedImages, TOOLS, slugify };

package/dist/forms-ui/index.d.ts

@@ -4,16 +4,35 @@ import { C as ContentTypeEntry } from '../types-DyryuIX1.js';
 import 'zod';
 
 /**
- * Control strings ↔ frontmatter values. Pure.
+ * Picked images beside the form state. An image FIELD's value stays a path
+ * string (what the frontmatter wants); the shrunk bytes for a newly chosen
+ * picture live here until submit, keyed by field name, with an object URL for
+ * the preview and the previous path so Remove can restore it.
  *
- * Controls hold strings (or booleans / Files). The schema wants typed values.
- * `toControl` seeds a control from an existing frontmatter value — including
- * a Date from a previously-parsed file — and `toValue` assembles what goes to
- * safeParse. Anything the schema then coerces (dates) is the schema's business.
+ * The host decides the path and does the shrinking (`onPickImage`) because it
+ * knows the slug and the size rules; this hook only keeps the result.
  */
-
-/** Stand-in path for an image chosen but not yet uploaded — replaced by ADMIN-06. */
-declare const PENDING_UPLOAD_PREFIX = "pending-upload/";
+interface PickedImage {
+    path: string;
+    blob: Blob;
+    previewUrl: string;
+    width?: number;
+    height?: number;
+    /** The field's value before this pick, restored by Remove. */
+    previous: string;
+}
+type PickResult = {
+    path: string;
+    blob: Blob;
+    previewUrl?: string;
+    width?: number;
+    height?: number;
+};
+type PickImage = (field: string, file: File) => Promise<PickResult>;
+type SubmittedImages = Record<string, {
+    path: string;
+    blob: Blob;
+}>;
 
 type LabelRenderer = (label: string, help: string) => ReactNode;
 /**
@@ -70,13 +89,25 @@ interface MarkdownEditorProps {
      * selection as `<Term definition="">word</Term>`. Off unless the site has such a component.
      */
     termComponent?: string;
+    /**
+     * Upload a picture for the body: shrink, name and hand back its final path and a
+     * preview URL. When set, the toolbar Image button opens a file picker (and drop or
+     * paste of an image onto the text does the same) and inserts ![description](path).
+     */
+    onUploadImage?: (file: File) => Promise<{
+        path: string;
+        previewUrl: string;
+    }>;
+    /** Paths of not-yet-committed pictures → object URLs, applied to <img src> in the preview. */
+    previewSrc?: Record<string, string>;
 }
-declare function MarkdownEditor({ id, name, value, onChange, placeholder, renderPreview, previewClassName, minHeight, termComponent }: MarkdownEditorProps): react.JSX.Element;
+declare function MarkdownEditor({ id, name, value, onChange, placeholder, renderPreview, previewClassName, minHeight, termComponent, onUploadImage, previewSrc }: MarkdownEditorProps): react.JSX.Element;
 
 interface ContentFormSubmission {
     frontmatter: Record<string, unknown>;
     body: string;
-    files: Record<string, File>;
+    /** Newly picked pictures by field name — the frontmatter already holds each one's final path. */
+    images: SubmittedImages;
 }
 interface ContentFormProps {
     entry: ContentTypeEntry;
@@ -99,6 +130,17 @@ interface ContentFormProps {
     previewClassName?: string;
     /** Site tooltip MDX component name (e.g. "Term") to expose as a toolbar button. */
     termComponent?: string;
+    /**
+     * Image fields: shrink and name a chosen file (the host knows the slug and the
+     * size rules) and hand back { path, blob, previewUrl?, width?, height? }. The
+     * field's value becomes `path`; the blob rides along in the submission. Without
+     * this, image fields are plain text paths.
+     */
+    onPickImage?: PickImage;
+    /** Editor toolbar Image button: upload a picture for the body and return its path + preview URL. */
+    onUploadImage?: MarkdownEditorProps["onUploadImage"];
+    /** Paths of not-yet-committed pictures → object URLs, so the Preview tab shows them. */
+    previewSrc?: MarkdownEditorProps["previewSrc"];
     /**
      * Put Cancel/Save in a bar that the host can pin to the bottom of the page
      * (`.realiiz-form__bar`; the shell makes it sticky). The bar also reports
@@ -130,7 +172,22 @@ interface ContentFormProps {
 }
 /** "Hello, World! 2026" → "hello-world-2026" — the same rule the blog's slug regex enforces. */
 declare function slugify(s: string): string;
-declare function ContentForm({ entry, initialValues, initialBody, onSubmit, onCancel, submitLabel, className, showBody, bodyLabel, renderPreview, previewClassName, termComponent, stickyBar, status, barExtra, footer, renderLabel, derive, guardUnsaved }: ContentFormProps): react.JSX.Element;
+declare function ContentForm({ entry, initialValues, initialBody, onSubmit, onCancel, submitLabel, className, showBody, bodyLabel, renderPreview, previewClassName, termComponent, onPickImage, onUploadImage, previewSrc, stickyBar, status, barExtra, footer, renderLabel, derive, guardUnsaved }: ContentFormProps): react.JSX.Element;
+
+declare const IMAGE_HINT = "JPG, PNG or WebP, up to 10MB. We shrink it for the web.";
+interface ImageInputProps {
+    id: string;
+    name: string;
+    /** The field's current value — a path such as /blog/my-post.webp, or "". */
+    value: string;
+    picked?: PickedImage;
+    invalid?: boolean;
+    disabled?: boolean;
+    onPick: (file: File) => Promise<void>;
+    onRemove?: () => void;
+    onBlur?: () => void;
+}
+declare function ImageInput(p: ImageInputProps): react.JSX.Element;
 
 /**
  * ChipsInput — tags as chips. Enter or comma adds, × or Backspace-on-empty
@@ -149,4 +206,4 @@ declare function ChipsInput({ id, name, value, onChange, onBlur, placeholder, in
     max?: number;
 }): react.JSX.Element;
 
-export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, PENDING_UPLOAD_PREFIX, TOOLS, slugify };
+export { ChipsInput, ContentForm, type ContentFormProps, type ContentFormSubmission, IMAGE_HINT, ImageInput, type ImageInputProps, type LabelRenderer, LengthGauge, MarkdownEditor, type MarkdownEditorProps, type PickImage, type PickResult, type PickedImage, type SubmittedImages, TOOLS, slugify };

package/dist/forms-ui/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { walkSchema } from '../chunk-J6FI73PF.js';
-import { FORM_CSS } from '../chunk-CE2DRQBD.js';
+import { FORM_CSS } from '../chunk-FTD4WE3V.js';
 import { useState, useRef, useCallback, useEffect, useId, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -82,16 +82,7 @@ function Control(p) {
     case "boolean":
       return /* @__PURE__ */ jsx("input", { ...common, type: "checkbox", checked: p.value === true, onChange: (e) => p.onChange(e.target.checked) });
     case "image":
-      return /* @__PURE__ */ jsx(
-        "input",
-        {
-          ...common,
-          type: "file",
-          accept: "image/*",
-          className: cls,
-          onChange: (e) => p.onChange(e.target.files?.[0] ?? null)
-        }
-      );
+      return /* @__PURE__ */ jsx("input", { ...common, type: "text", className: cls, value: str, placeholder: p.spec.placeholder ?? "/images/picture.webp", onChange: (e) => p.onChange(e.target.value) });
     case "date":
       return /* @__PURE__ */ jsx("input", { ...common, type: "date", className: cls, value: str, onChange: (e) => p.onChange(e.target.value) });
     case "number":
@@ -137,6 +128,151 @@ function Control(p) {
       );
   }
 }
+function useImages() {
+  const [images, setImages] = useState({});
+  const latest = useRef(images);
+  latest.current = images;
+  const urls = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const set = urls.current;
+    return () => {
+      for (const u of set) URL.revokeObjectURL(u);
+    };
+  }, []);
+  const keep = useCallback((field, r, previous) => {
+    const previewUrl = r.previewUrl ?? URL.createObjectURL(r.blob);
+    if (!r.previewUrl) urls.current.add(previewUrl);
+    const picked = { path: r.path, blob: r.blob, previewUrl, width: r.width, height: r.height, previous };
+    setImages((m) => ({ ...m, [field]: picked }));
+    return picked;
+  }, []);
+  const remove = useCallback((field) => {
+    const previous = latest.current[field]?.previous;
+    setImages((m) => {
+      const rest = { ...m };
+      delete rest[field];
+      return rest;
+    });
+    return previous;
+  }, []);
+  const toSubmission = useCallback(() => {
+    return Object.fromEntries(Object.entries(images).map(([k, v]) => [k, { path: v.path, blob: v.blob }]));
+  }, [images]);
+  return { images, keep, remove, toSubmission };
+}
+function formatBytes(n) {
+  if (n < 1024 * 1024) return `${Math.max(1, Math.round(n / 1024))} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/forms-ui/md/upload.ts
+var IMAGE_ACCEPT = "image/jpeg,image/png,image/webp,image/gif";
+function pickFile(accept = IMAGE_ACCEPT) {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = accept;
+    input.style.display = "none";
+    document.body.appendChild(input);
+    const done = () => {
+      resolve(input.files?.[0]);
+      input.remove();
+    };
+    input.addEventListener("change", done, { once: true });
+    window.addEventListener("focus", () => setTimeout(() => {
+      if (document.body.contains(input)) done();
+    }, 400), { once: true });
+    input.click();
+  });
+}
+function imageFromDrop(e) {
+  return Array.from(e.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
+}
+function imageFromPaste(e) {
+  const item = Array.from(e.clipboardData?.items ?? []).find((i) => i.kind === "file" && i.type.startsWith("image/"));
+  return item?.getAsFile() ?? void 0;
+}
+function messageOf(err) {
+  if (err && typeof err === "object" && err.name === "MediaError") return err.message;
+  return "That picture couldn\u2019t be prepared. Try a different file.";
+}
+var IMAGE_HINT = "JPG, PNG or WebP, up to 10MB. We shrink it for the web.";
+function ImageInput(p) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [over, setOver] = useState(false);
+  const zone = useRef(null);
+  const take = async (file) => {
+    if (!file || busy || p.disabled) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await p.onPick(file);
+    } catch (err) {
+      setError(messageOf(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const choose = async () => take(await pickFile());
+  const onDrop = (e) => {
+    e.preventDefault();
+    setOver(false);
+    void take(imageFromDrop(e));
+  };
+  const onPaste = (e) => {
+    const f = imageFromPaste(e);
+    if (f) {
+      e.preventDefault();
+      void take(f);
+    }
+  };
+  const src = p.picked?.previewUrl ?? (p.value || null);
+  const detail = p.picked ? [p.picked.width && p.picked.height ? `${p.picked.width} \xD7 ${p.picked.height}` : null, formatBytes(p.picked.blob.size)].filter(Boolean).join(" \xB7 ") : p.value;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: zone,
+      className: ["realiiz-image", over && "realiiz-image--over", p.invalid && "realiiz-image--invalid", busy && "realiiz-image--busy"].filter(Boolean).join(" "),
+      "data-field": p.name,
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!over) setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop,
+      onPaste,
+      onBlur: p.onBlur,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx("input", { id: p.id, name: p.name, type: "text", value: p.value, readOnly: true, className: "realiiz-sr-only", "aria-busy": busy || void 0 }),
+        src ? /* @__PURE__ */ jsxs("div", { className: "realiiz-image__has", children: [
+          /* @__PURE__ */ jsx("img", { src, alt: "", className: "realiiz-image__thumb", "data-testid": "realiiz-image-thumb" }),
+          /* @__PURE__ */ jsxs("div", { className: "realiiz-image__meta", children: [
+            /* @__PURE__ */ jsx("div", { className: "realiiz-image__detail", children: busy ? "Shrinking\u2026" : detail }),
+            /* @__PURE__ */ jsxs("div", { className: "realiiz-image__actions", children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: "realiiz-form__button", onClick: choose, disabled: busy || p.disabled, children: "Replace" }),
+              p.picked && p.onRemove && /* @__PURE__ */ jsx("button", { type: "button", className: "realiiz-image__remove", onClick: p.onRemove, disabled: busy, children: "Remove" })
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "realiiz-image__empty", children: [
+          /* @__PURE__ */ jsx(PictureIcon, {}),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "realiiz-form__button", onClick: choose, disabled: busy || p.disabled, children: busy ? "Shrinking\u2026" : "Choose a picture" }),
+          /* @__PURE__ */ jsx("span", { className: "realiiz-image__or", children: "or drag one here" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "realiiz-image__hint", children: IMAGE_HINT }),
+        error && /* @__PURE__ */ jsx("div", { className: "realiiz-form__error", role: "alert", children: error })
+      ]
+    }
+  );
+}
+function PictureIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "realiiz-image__icon", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 16l-5-5-8 8" })
+  ] });
+}
 var defaultLabel = (label, help) => /* @__PURE__ */ jsx("span", { className: "realiiz-form__help", title: help, children: label });
 function LengthGauge({ length: raw, range, suffix }) {
   const [min, max] = range;
@@ -169,7 +305,19 @@ function Field(p) {
   const isCheck = p.spec.input === "boolean";
   const isTags = p.spec.input === "tags";
   const labelText = p.spec.help ? (p.renderLabel ?? defaultLabel)(p.spec.label, p.spec.help) : p.spec.label;
-  const control = isTags ? /* @__PURE__ */ jsx(
+  const control = p.spec.input === "image" && p.onPickImage ? /* @__PURE__ */ jsx(
+    ImageInput,
+    {
+      id,
+      name: p.spec.name,
+      value: typeof p.value === "string" ? p.value : "",
+      picked: p.picked,
+      invalid,
+      onPick: p.onPickImage,
+      onRemove: p.onRemoveImage,
+      onBlur: p.onBlur
+    }
+  ) : isTags ? /* @__PURE__ */ jsx(
     ChipsInput,
     {
       id,
@@ -196,10 +344,6 @@ function Field(p) {
       ] }),
       control
     ] }),
-    p.spec.input === "image" && p.current && !(p.value instanceof File) && /* @__PURE__ */ jsxs("div", { className: "realiiz-form__current", children: [
-      "Current: ",
-      p.current
-    ] }),
     isText && (p.spec.recommended || typeof max === "number") && /* @__PURE__ */ jsxs("div", { className: "realiiz-form__helper", children: [
       p.spec.recommended ? /* @__PURE__ */ jsx(LengthGauge, { length: len, range: p.spec.recommended, suffix: p.spec.suffix }) : /* @__PURE__ */ jsx("span", {}),
       typeof max === "number" && /* @__PURE__ */ jsxs("span", { className: "realiiz-form__count", children: [
@@ -534,7 +678,7 @@ var TABLE_OPS = [
   { op: "colAfter", label: "+ Col", tip: "Insert a column to the right" },
   { op: "colDel", label: "\u2212 Col", tip: "Delete this column" }
 ];
-function MarkdownEditor({ id, name = "body", value, onChange, placeholder, renderPreview, previewClassName, minHeight = 320, termComponent }) {
+function MarkdownEditor({ id, name = "body", value, onChange, placeholder, renderPreview, previewClassName, minHeight = 320, termComponent, onUploadImage, previewSrc }) {
   const [mode, setMode] = useState(() => renderPreview && value.trim() ? "preview" : "edit");
   const [preview, setPreview] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -542,6 +686,7 @@ function MarkdownEditor({ id, name = "body", value, onChange, placeholder, rende
   const [on, setOn] = useState(() => /* @__PURE__ */ new Set());
   const [inTable, setInTable] = useState(false);
   const [note, setNote] = useState(null);
+  const [uploading, setUploading] = useState(false);
   const ta = useRef(null);
   const sync = useCallback(() => {
     const el = ta.current;
@@ -588,6 +733,37 @@ function MarkdownEditor({ id, name = "body", value, onChange, placeholder, rende
     setNote(null);
     commit(r);
   };
+  const upload = async (file) => {
+    const el = ta.current;
+    if (!file || !onUploadImage || !el || uploading) return;
+    setUploading(true);
+    setNote(null);
+    const a = el.selectionStart, b = el.selectionEnd;
+    try {
+      const { path } = await onUploadImage(file);
+      const alt = value.slice(a, b) || "description";
+      const text = value.slice(0, a) + `![${alt}](${path})` + value.slice(b);
+      commit({ text, a: a + 2, b: a + 2 + alt.length });
+    } catch (err) {
+      setNote(messageOf(err));
+    } finally {
+      setUploading(false);
+    }
+  };
+  const onDrop = (e) => {
+    const f = imageFromDrop(e);
+    if (f && onUploadImage) {
+      e.preventDefault();
+      void upload(f);
+    }
+  };
+  const onPaste = (e) => {
+    const f = imageFromPaste(e);
+    if (f && onUploadImage) {
+      e.preventDefault();
+      void upload(f);
+    }
+  };
   const onKey = (e) => {
     if (e.key === "Escape" && expanded) {
       e.preventDefault();
@@ -626,7 +802,7 @@ function MarkdownEditor({ id, name = "body", value, onChange, placeholder, rende
     let live = true;
     setLoading(true);
     renderPreview(value).then((r) => {
-      if (live) setPreview(r);
+      if (live) setPreview("html" in r ? { html: swapPreviewSrc(r.html, previewSrc) } : r);
     }).catch((err) => {
       if (live) setPreview({ error: err instanceof Error ? err.message : String(err) });
     }).finally(() => {
@@ -635,11 +811,13 @@ function MarkdownEditor({ id, name = "body", value, onChange, placeholder, rende
     return () => {
       live = false;
     };
-  }, [mode, value, renderPreview]);
+  }, [mode, value, renderPreview, previewSrc]);
   const termTool = termComponent ? { id: "term", title: `Tooltip \u2014 wraps the selection in <${termComponent}>`, apply: toggleTerm(termComponent) } : null;
   const btn = (toolId) => {
     const t = toolId === "term" && termTool ? termTool : toolById(toolId);
-    return /* @__PURE__ */ jsx("button", { type: "button", "data-tool": t.id, "data-tip": t.title, "aria-label": t.title, "aria-pressed": on.has(t.id) || void 0, className: on.has(t.id) ? "on" : void 0, onMouseDown: (e) => e.preventDefault(), onClick: () => run(t.apply), children: MD_ICONS[t.id] }, t.id);
+    const uploads = t.id === "image" && Boolean(onUploadImage);
+    const title = uploads ? uploading ? "Shrinking\u2026" : "Picture \u2014 choose a file, or drop/paste one into the text" : t.title;
+    return /* @__PURE__ */ jsx("button", { type: "button", "data-tool": t.id, "data-tip": title, "aria-label": title, "aria-pressed": on.has(t.id) || void 0, "aria-busy": uploads && uploading ? true : void 0, className: on.has(t.id) ? "on" : void 0, disabled: uploads && uploading, onMouseDown: (e) => e.preventDefault(), onClick: () => uploads ? pickFile().then(upload) : run(t.apply), children: MD_ICONS[t.id] }, t.id);
   };
   return /* @__PURE__ */ jsxs("div", { className: ["realiiz-md", expanded && "realiiz-md--fs"].filter(Boolean).join(" "), children: [
     renderPreview && /* @__PURE__ */ jsxs("span", { className: "realiiz-md__mode", role: "tablist", "aria-label": "Editor mode", children: [
@@ -696,6 +874,8 @@ function MarkdownEditor({ id, name = "body", value, onChange, placeholder, rende
           onKeyUp: sync,
           onClick: sync,
           onKeyDown: onKey,
+          onDrop,
+          onPaste,
           spellCheck: true
         }
       ) : /* @__PURE__ */ jsxs("div", { className: "realiiz-md__preview", style: expanded ? void 0 : { minHeight }, "aria-live": "polite", "aria-busy": loading, children: [
@@ -707,9 +887,13 @@ function MarkdownEditor({ id, name = "body", value, onChange, placeholder, rende
         !loading && preview && "html" in preview && /* @__PURE__ */ jsx("div", { className: ["realiiz-prose", previewClassName].filter(Boolean).join(" "), dangerouslySetInnerHTML: { __html: preview.html } })
       ] })
     ] }),
-    note && /* @__PURE__ */ jsx("div", { className: "realiiz-form__helper realiiz-md__note", role: "status", children: note })
+    (note || uploading) && /* @__PURE__ */ jsx("div", { className: "realiiz-form__helper realiiz-md__note", role: "status", children: uploading ? "Shrinking\u2026" : note })
   ] });
 }
+function swapPreviewSrc(html, map) {
+  if (!map || Object.keys(map).length === 0) return html;
+  return html.replace(/(<img\b[^>]*\bsrc=")([^"]+)(")/g, (m, pre, src, post) => map[src] ? `${pre}${map[src]}${post}` : m);
+}
 function commonPrefix(a, b) {
   const n = Math.min(a.length, b.length);
   let i = 0;
@@ -766,7 +950,6 @@ function groupIssues(list) {
 }
 
 // src/forms-ui/values.ts
-var PENDING_UPLOAD_PREFIX = "pending-upload/";
 function toControl(spec, raw) {
   if (raw === void 0 || raw === null) return spec.input === "boolean" ? false : "";
   switch (spec.input) {
@@ -785,7 +968,6 @@ function toControl(spec, raw) {
 }
 function toFrontmatter(specs, state, hiddenValues) {
   const frontmatter = { ...hiddenValues };
-  const files = {};
   for (const spec of specs) {
     if (spec.role === "hidden" || spec.role === "body") continue;
     const v = state[spec.name];
@@ -794,11 +976,6 @@ function toFrontmatter(specs, state, hiddenValues) {
       else if (spec.required) frontmatter[spec.name] = false;
       continue;
     }
-    if (v instanceof File) {
-      files[spec.name] = v;
-      frontmatter[spec.name] = PENDING_UPLOAD_PREFIX + v.name;
-      continue;
-    }
     if (Array.isArray(v)) {
       if (v.length || spec.required) frontmatter[spec.name] = v;
       continue;
@@ -821,13 +998,13 @@ function toFrontmatter(specs, state, hiddenValues) {
         frontmatter[spec.name] = s;
     }
   }
-  return { frontmatter, files };
+  return frontmatter;
 }
 var LEAVE_MESSAGE = "You have unsaved changes. Leave this page and lose them?";
 function slugify(s) {
   return s.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
-function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, onCancel, submitLabel = "Save", className, showBody = true, bodyLabel = "Content", renderPreview, previewClassName, termComponent, stickyBar = false, status, barExtra, footer, renderLabel, derive, guardUnsaved = true }) {
+function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, onCancel, submitLabel = "Save", className, showBody = true, bodyLabel = "Content", renderPreview, previewClassName, termComponent, onPickImage, onUploadImage, previewSrc, stickyBar = false, status, barExtra, footer, renderLabel, derive, guardUnsaved = true }) {
   const formId = useId();
   const specs = useMemo(() => walkSchema(entry.schema, entry), [entry]);
   const visible = useMemo(() => specs.filter((s) => s.role !== "hidden" && s.role !== "body"), [specs]);
@@ -855,6 +1032,16 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
     update(name, v);
   };
   const [body, setBody] = useState(initialBody);
+  const pictures = useImages();
+  const pickImage = onPickImage ? (field) => async (file) => {
+    const r = await onPickImage(field, file);
+    pictures.keep(field, r, typeof state[field] === "string" ? state[field] : "");
+    onFieldChange(field, r.path);
+  } : void 0;
+  const removeImage = (field) => () => {
+    const previous = pictures.remove(field);
+    onFieldChange(field, previous ?? "");
+  };
   const dirty = body !== initialBody || specs.some((s) => !sameValue(state[s.name], initialState[s.name]));
   const [issues, setIssues] = useState([]);
   const [attempted, setAttempted] = useState(false);
@@ -904,7 +1091,7 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
     };
   }, [guardUnsaved, dirty, submitting]);
   const validate = useCallback(() => {
-    const { frontmatter } = toFrontmatter(specs, state, hiddenValues);
+    const frontmatter = toFrontmatter(specs, state, hiddenValues);
     const result = entry.schema.safeParse(frontmatter);
     setIssues(result.success ? [] : mapIssues(result.error.issues, specs));
     return result;
@@ -915,10 +1102,9 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
     setAttempted(true);
     const result = validate();
     if (!result.success) return;
-    const { files } = toFrontmatter(specs, state, hiddenValues);
     setSubmitting(true);
     try {
-      await onSubmit({ frontmatter: result.data, body, files });
+      await onSubmit({ frontmatter: result.data, body, images: pictures.toSubmission() });
     } finally {
       setSubmitting(false);
     }
@@ -940,9 +1126,11 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
           spec: s,
           value: state[s.name],
           issues: byField.get(s.name) ?? [],
-          current: typeof initialValues[s.name] === "string" ? initialValues[s.name] : void 0,
           options: optionsFor(s),
           renderLabel,
+          picked: pictures.images[s.name],
+          onPickImage: pickImage?.(s.name),
+          onRemoveImage: removeImage(s.name),
           onChange: (v) => onFieldChange(s.name, v),
           onBlur: () => {
             if (attempted) validate();
@@ -963,7 +1151,9 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
           placeholder: bodySpec?.placeholder ?? "Write in Markdown. Headings with ##, links as [text](url).",
           renderPreview,
           previewClassName,
-          termComponent
+          termComponent,
+          onUploadImage,
+          previewSrc
         }
       )
     ] }),
@@ -981,6 +1171,6 @@ function sameValue(a, b) {
   return a === b;
 }
 
-export { ChipsInput, ContentForm, LengthGauge, MarkdownEditor, PENDING_UPLOAD_PREFIX, TOOLS, slugify };
+export { ChipsInput, ContentForm, IMAGE_HINT, ImageInput, LengthGauge, MarkdownEditor, TOOLS, slugify };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map