@metaobjectsdev/react 0.18.0 → 0.19.0

package/dist/crop-to-blob.d.ts

@@ -0,0 +1,8 @@
+import type { Area } from "react-easy-crop";
+/**
+ * Draws the selected crop rectangle of `src` onto a canvas bounded to
+ * `maxEdge` on its longest side, then re-encodes to JPEG. The canvas
+ * redraw drops all EXIF/GPS metadata as a side effect.
+ */
+export declare function cropToBlob(src: string, area: Area, maxEdge: number): Promise<Blob>;
+//# sourceMappingURL=crop-to-blob.d.ts.map

package/dist/crop-to-blob.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crop-to-blob.d.ts","sourceRoot":"","sources":["../src/crop-to-blob.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAG5C;;;;GAIG;AACH,wBAAsB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAiBxF"}

package/dist/crop-to-blob.js

@@ -0,0 +1,26 @@
+import { canvasToJpegBlob } from "@metaobjectsdev/runtime-web";
+/**
+ * Draws the selected crop rectangle of `src` onto a canvas bounded to
+ * `maxEdge` on its longest side, then re-encodes to JPEG. The canvas
+ * redraw drops all EXIF/GPS metadata as a side effect.
+ */
+export async function cropToBlob(src, area, maxEdge) {
+    const img = await new Promise((resolve, reject) => {
+        const el = new Image();
+        el.onload = () => resolve(el);
+        el.onerror = reject;
+        el.src = src;
+    });
+    const scale = Math.min(1, maxEdge / Math.max(area.width, area.height));
+    const w = Math.round(area.width * scale);
+    const h = Math.round(area.height * scale);
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        throw new Error("canvas 2d context unavailable");
+    ctx.drawImage(img, area.x, area.y, area.width, area.height, 0, 0, w, h);
+    return canvasToJpegBlob(canvas, 0.9);
+}
+//# sourceMappingURL=crop-to-blob.js.map

package/dist/crop-to-blob.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"crop-to-blob.js","sourceRoot":"","sources":["../src/crop-to-blob.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,GAAW,EAAE,IAAU,EAAE,OAAe;IACvE,MAAM,GAAG,GAAG,MAAM,IAAI,OAAO,CAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QAClE,MAAM,EAAE,GAAG,IAAI,KAAK,EAAE,CAAC;QACvB,EAAE,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,CAAC,OAAO,GAAG,MAAM,CAAC;QACpB,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC;IACf,CAAC,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;IACjB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAClB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IAC3D,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACxE,OAAO,gBAAgB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACvC,CAAC"}

package/dist/image-adapter-provider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { ImageUploadAdapter } from "@metaobjectsdev/runtime-web";
+export interface ImageUploadAdapterProviderProps {
+    value: ImageUploadAdapter;
+    children: ReactNode;
+}
+/** Wrap your app (or the relevant subtree) to supply an upload/serve adapter to <ImageUpload>. */
+export declare function ImageUploadAdapterProvider({ value, children }: ImageUploadAdapterProviderProps): import("react").JSX.Element;
+/** Reads the image upload adapter from context. Throws if not provided. */
+export declare function useImageUploadAdapter(): ImageUploadAdapter;
+//# sourceMappingURL=image-adapter-provider.d.ts.map

package/dist/image-adapter-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-adapter-provider.d.ts","sourceRoot":"","sources":["../src/image-adapter-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAItE,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,kGAAkG;AAClG,wBAAgB,0BAA0B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,+BAA+B,+BAE9F;AAED,2EAA2E;AAC3E,wBAAgB,qBAAqB,IAAI,kBAAkB,CAS1D"}

package/dist/image-adapter-provider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ImageUploadAdapterContext = createContext(null);
+/** Wrap your app (or the relevant subtree) to supply an upload/serve adapter to <ImageUpload>. */
+export function ImageUploadAdapterProvider({ value, children }) {
+    return _jsx(ImageUploadAdapterContext.Provider, { value: value, children: children });
+}
+/** Reads the image upload adapter from context. Throws if not provided. */
+export function useImageUploadAdapter() {
+    const adapter = useContext(ImageUploadAdapterContext);
+    if (!adapter) {
+        throw new Error("useImageUploadAdapter() called outside <ImageUploadAdapterProvider>. " +
+            "Wrap your app (or the relevant subtree) with ImageUploadAdapterProvider value={...}.");
+    }
+    return adapter;
+}
+//# sourceMappingURL=image-adapter-provider.js.map

package/dist/image-adapter-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-adapter-provider.js","sourceRoot":"","sources":["../src/image-adapter-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAGlE,MAAM,yBAAyB,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAOjF,kGAAkG;AAClG,MAAM,UAAU,0BAA0B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmC;IAC7F,OAAO,KAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAsC,CAAC;AAC3G,CAAC;AAED,2EAA2E;AAC3E,MAAM,UAAU,qBAAqB;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,yBAAyB,CAAC,CAAC;IACtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,uEAAuE;YACrE,sFAAsF,CACzF,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/image-upload.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+import type { ImageMeta } from "@metaobjectsdev/runtime-web";
+export interface ImageUploadProps {
+    /** Current stored image key, or null/undefined when no image is set. */
+    value?: string | null;
+    /** Called with the new stored image key, or null when the image is removed. */
+    onChange: (key: string | null) => void;
+    /** Resolved view.image attrs (aspectRatio / maxEdge / store / accept / maxBytes). */
+    meta: ImageMeta;
+}
+/**
+ * Metadata-driven image upload + crop control. Renders a preview plus
+ * Upload/Replace/Remove actions when idle, and a lazy-loaded crop UI
+ * (react-easy-crop) while a picked file is being cropped. On save, crops the
+ * selection to a bounded JPEG and hands the blob to the adapter supplied via
+ * <ImageUploadAdapterProvider> — this component has no knowledge of the
+ * storage backend, upload endpoint, or auth.
+ *
+ * Bound by the generated form's `view.image` field; usable standalone too.
+ */
+export declare function ImageUpload({ value, onChange, meta }: ImageUploadProps): ReactElement;
+//# sourceMappingURL=image-upload.d.ts.map

package/dist/image-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.d.ts","sourceRoot":"","sources":["../src/image-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,MAAM,WAAW,gBAAgB;IAC/B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,qFAAqF;IACrF,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAiGrF"}

package/dist/image-upload.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense, useCallback, useRef, useState } from "react";
+import { useImageUploadAdapter } from "./image-adapter-provider.js";
+import { cropToBlob } from "./crop-to-blob.js";
+// react-easy-crop is an optional peer dependency — loaded lazily so consumers
+// who don't use <ImageUpload> never pay for it.
+const Cropper = lazy(() => import("react-easy-crop"));
+/**
+ * Metadata-driven image upload + crop control. Renders a preview plus
+ * Upload/Replace/Remove actions when idle, and a lazy-loaded crop UI
+ * (react-easy-crop) while a picked file is being cropped. On save, crops the
+ * selection to a bounded JPEG and hands the blob to the adapter supplied via
+ * <ImageUploadAdapterProvider> — this component has no knowledge of the
+ * storage backend, upload endpoint, or auth.
+ *
+ * Bound by the generated form's `view.image` field; usable standalone too.
+ */
+export function ImageUpload({ value, onChange, meta }) {
+    const adapter = useImageUploadAdapter();
+    const [editing, setEditing] = useState(null); // object URL being cropped
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const areaRef = useRef(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const accept = (meta.accept ?? ["image/jpeg", "image/png", "image/webp"]).join(",");
+    const onPick = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        if (meta.maxBytes && file.size > meta.maxBytes)
+            return; // client guard; server re-enforces
+        setError(null);
+        setEditing(URL.createObjectURL(file));
+    };
+    const onSave = useCallback(async () => {
+        if (!editing || !areaRef.current)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            const blob = await cropToBlob(editing, areaRef.current, meta.maxEdge ?? 2000);
+            // exactOptionalPropertyTypes: only forward `store` when the caller supplied one.
+            const { key } = await adapter.upload(blob, { ...(meta.store !== undefined && { store: meta.store }) });
+            onChange(key);
+            URL.revokeObjectURL(editing);
+            setEditing(null);
+        }
+        catch {
+            // Crop/upload failed (adapter rejected the image, network drop, etc).
+            // Leave `editing` in place so the user's crop selection isn't lost —
+            // they can retry Save crop without re-picking the file.
+            setError("Something went wrong saving that image. Try again.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [editing, meta.maxEdge, meta.store, adapter, onChange]);
+    return (_jsxs("div", { className: "metaobjects-image-upload", children: [value && !editing && (_jsx("img", { src: adapter.imageUrl(value), alt: "", className: "metaobjects-image-preview" })), !editing && (_jsxs("div", { className: "metaobjects-image-actions", children: [_jsxs("label", { className: "metaobjects-form-submit", children: [value ? "Replace" : "Upload", _jsx("input", { type: "file", accept: accept, onChange: onPick, hidden: true })] }), value && (_jsx("button", { type: "button", className: "metaobjects-form-submit", onClick: () => onChange(null), children: "Remove" }))] })), editing && (_jsxs("div", { className: "metaobjects-image-cropper", children: [_jsx(Suspense, { fallback: _jsx("p", { children: "Loading cropper\u2026" }), children: _jsx("div", { style: { position: "relative", height: 320 }, children: _jsx(Cropper, { image: editing, crop: crop, zoom: zoom, aspect: meta.aspectRatio, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: (_croppedArea, croppedAreaPixels) => (areaRef.current = croppedAreaPixels) }) }) }), _jsxs("div", { className: "metaobjects-image-actions", children: [_jsx("button", { type: "button", className: "metaobjects-form-submit", disabled: busy, onClick: onSave, children: busy ? "Saving…" : "Save crop" }), _jsx("button", { type: "button", className: "metaobjects-form-submit", disabled: busy, onClick: () => {
+                                    URL.revokeObjectURL(editing);
+                                    setEditing(null);
+                                }, children: "Cancel" })] }), error && (_jsx("span", { className: "metaobjects-field-error", role: "alert", children: error }))] }))] }));
+}
+//# sourceMappingURL=image-upload.js.map

package/dist/image-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.js","sourceRoot":"","sources":["../src/image-upload.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export { useEntityForm, type EntityFieldMeta, type EntityMeta, type BoundInputProps, type InputAccessor, type UseEntityFormOptions, type UseEntityFormReturn, } from "./use-entity-form.js";
 export { CurrencyInput, type CurrencyInputProps } from "./currency-input.js";
+export { ImageUpload, type ImageUploadProps } from "./image-upload.js";
+export { ImageUploadAdapterProvider, useImageUploadAdapter, type ImageUploadAdapterProviderProps, } from "./image-adapter-provider.js";
+export { cropToBlob } from "./crop-to-blob.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,EACrB,KAAK,+BAA+B,GACrC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,4 +1,7 @@
 // Public API surface for @metaobjectsdev/react.
 export { useEntityForm, } from "./use-entity-form.js";
 export { CurrencyInput } from "./currency-input.js";
+export { ImageUpload } from "./image-upload.js";
+export { ImageUploadAdapterProvider, useImageUploadAdapter, } from "./image-adapter-provider.js";
+export { cropToBlob } from "./crop-to-blob.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,OAAO,EACL,aAAa,GAOd,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,OAAO,EACL,aAAa,GAOd,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,GAEtB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/form.css

@@ -0,0 +1,58 @@
+/* Default styling for the metadata-driven form controls emitted by
+   @metaobjectsdev/codegen-ts-react's formFile generator, plus the
+   <ImageUpload> component. Single-class specificity so a host app's own
+   reset/preflight styles don't win. Colors resolve through CSS custom
+   properties with a fallback hex, so this file is themable and works with
+   zero configuration out of the box. */
+.metaobjects-form { display: grid; gap: 1.25rem; }
+
+.metaobjects-field { display: grid; gap: 0.5rem; }
+
+.metaobjects-field-label {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--mo-fg, #eae3d3);
+  opacity: 0.62;
+}
+
+.metaobjects-field-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: color-mix(in srgb, var(--mo-field-bg, #142a33) 40%, transparent);
+  border: 1px solid color-mix(in srgb, var(--mo-accent, #c9a467) 28%, transparent);
+  color: var(--mo-fg, #eae3d3);
+  font: inherit;
+  outline: none;
+}
+.metaobjects-field-input:focus-visible { border-color: var(--mo-accent, #c9a467); }
+textarea.metaobjects-field-input { resize: vertical; min-height: 6rem; }
+
+.metaobjects-field-checkbox { width: 1rem; height: 1rem; accent-color: var(--mo-accent, #c9a467); }
+.metaobjects-field-radios { display: grid; gap: 0.5rem; border: 0; padding: 0; }
+.metaobjects-field-radio { display: flex; gap: 0.5rem; align-items: center; color: var(--mo-fg, #eae3d3); }
+
+.metaobjects-field-error { font-size: 0.8rem; color: var(--mo-accent-soft, #e3cd9f); }
+
+.metaobjects-image-upload { display: grid; gap: 0.75rem; }
+.metaobjects-image-preview { max-width: 100%; height: auto; }
+.metaobjects-image-actions { display: grid; grid-auto-flow: column; justify-content: start; gap: 0.75rem; }
+/* react-easy-crop requires a positioned, sized ancestor or its internal
+   absolutely-positioned layers collapse to 0x0. This is a functional
+   minimum, not decoration — override freely (e.g. a taller crop area). */
+.metaobjects-image-cropper { position: relative; width: 100%; height: 300px; }
+
+.metaobjects-form-actions { margin-top: 0.5rem; }
+.metaobjects-form-submit {
+  padding: 0.6rem 1.5rem;
+  background: var(--mo-accent, #c9a467);
+  border: 1px solid var(--mo-accent, #c9a467);
+  color: var(--mo-accent-fg, #0f1d24);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.metaobjects-form-submit:hover { background: var(--mo-accent-soft, #e3cd9f); }
+.metaobjects-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metaobjectsdev/react",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "React runtime for metaobjects: useEntityForm hook and CurrencyInput component.",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,11 +10,13 @@
       "bun": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    }
+    },
+    "./form.css": "./form.css"
   },
   "files": [
     "dist",
     "src",
+    "form.css",
     "README.md",
     "LICENSE"
   ],
@@ -45,11 +47,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@metaobjectsdev/runtime-web": "0.18.0"
+    "@metaobjectsdev/runtime-web": "0.19.0"
   },
   "peerDependencies": {
     "@hookform/resolvers": ">=3.0.0",
     "react": ">=18.0.0",
+    "react-easy-crop": ">=5.0.0",
     "react-hook-form": ">=7.0.0",
     "zod": ">=3.23.0"
   },
@@ -60,6 +63,9 @@
     "react": {
       "optional": true
     },
+    "react-easy-crop": {
+      "optional": true
+    },
     "react-hook-form": {
       "optional": true
     },
@@ -69,13 +75,14 @@
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.10.0",
-    "@testing-library/react": "^16.0.0",
     "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^19.0.0",
     "bun-types": "latest",
     "jsdom": "^29.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-easy-crop": "^5.0.0",
     "react-hook-form": "^7.54.0",
     "typescript": "^5.6.0",
     "zod": "^4.4.3"

package/src/crop-to-blob.ts

@@ -0,0 +1,26 @@
+import type { Area } from "react-easy-crop";
+import { canvasToJpegBlob } from "@metaobjectsdev/runtime-web";
+
+/**
+ * Draws the selected crop rectangle of `src` onto a canvas bounded to
+ * `maxEdge` on its longest side, then re-encodes to JPEG. The canvas
+ * redraw drops all EXIF/GPS metadata as a side effect.
+ */
+export async function cropToBlob(src: string, area: Area, maxEdge: number): Promise<Blob> {
+  const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+    const el = new Image();
+    el.onload = () => resolve(el);
+    el.onerror = reject;
+    el.src = src;
+  });
+  const scale = Math.min(1, maxEdge / Math.max(area.width, area.height));
+  const w = Math.round(area.width * scale);
+  const h = Math.round(area.height * scale);
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("canvas 2d context unavailable");
+  ctx.drawImage(img, area.x, area.y, area.width, area.height, 0, 0, w, h);
+  return canvasToJpegBlob(canvas, 0.9);
+}

package/src/image-adapter-provider.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { ImageUploadAdapter } from "@metaobjectsdev/runtime-web";
+
+const ImageUploadAdapterContext = createContext<ImageUploadAdapter | null>(null);
+
+export interface ImageUploadAdapterProviderProps {
+  value: ImageUploadAdapter;
+  children: ReactNode;
+}
+
+/** Wrap your app (or the relevant subtree) to supply an upload/serve adapter to <ImageUpload>. */
+export function ImageUploadAdapterProvider({ value, children }: ImageUploadAdapterProviderProps) {
+  return <ImageUploadAdapterContext.Provider value={value}>{children}</ImageUploadAdapterContext.Provider>;
+}
+
+/** Reads the image upload adapter from context. Throws if not provided. */
+export function useImageUploadAdapter(): ImageUploadAdapter {
+  const adapter = useContext(ImageUploadAdapterContext);
+  if (!adapter) {
+    throw new Error(
+      "useImageUploadAdapter() called outside <ImageUploadAdapterProvider>. " +
+        "Wrap your app (or the relevant subtree) with ImageUploadAdapterProvider value={...}.",
+    );
+  }
+  return adapter;
+}

package/src/image-upload.tsx

@@ -0,0 +1,128 @@
+import { lazy, Suspense, useCallback, useRef, useState } from "react";
+import type { ChangeEvent, ReactElement } from "react";
+import type { Area } from "react-easy-crop";
+import type { ImageMeta } from "@metaobjectsdev/runtime-web";
+import { useImageUploadAdapter } from "./image-adapter-provider.js";
+import { cropToBlob } from "./crop-to-blob.js";
+
+// react-easy-crop is an optional peer dependency — loaded lazily so consumers
+// who don't use <ImageUpload> never pay for it.
+const Cropper = lazy(() => import("react-easy-crop"));
+
+export interface ImageUploadProps {
+  /** Current stored image key, or null/undefined when no image is set. */
+  value?: string | null;
+  /** Called with the new stored image key, or null when the image is removed. */
+  onChange: (key: string | null) => void;
+  /** Resolved view.image attrs (aspectRatio / maxEdge / store / accept / maxBytes). */
+  meta: ImageMeta;
+}
+
+/**
+ * Metadata-driven image upload + crop control. Renders a preview plus
+ * Upload/Replace/Remove actions when idle, and a lazy-loaded crop UI
+ * (react-easy-crop) while a picked file is being cropped. On save, crops the
+ * selection to a bounded JPEG and hands the blob to the adapter supplied via
+ * <ImageUploadAdapterProvider> — this component has no knowledge of the
+ * storage backend, upload endpoint, or auth.
+ *
+ * Bound by the generated form's `view.image` field; usable standalone too.
+ */
+export function ImageUpload({ value, onChange, meta }: ImageUploadProps): ReactElement {
+  const adapter = useImageUploadAdapter();
+  const [editing, setEditing] = useState<string | null>(null); // object URL being cropped
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const areaRef = useRef<Area | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const accept = (meta.accept ?? ["image/jpeg", "image/png", "image/webp"]).join(",");
+
+  const onPick = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (meta.maxBytes && file.size > meta.maxBytes) return; // client guard; server re-enforces
+    setError(null);
+    setEditing(URL.createObjectURL(file));
+  };
+
+  const onSave = useCallback(async () => {
+    if (!editing || !areaRef.current) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const blob = await cropToBlob(editing, areaRef.current, meta.maxEdge ?? 2000);
+      // exactOptionalPropertyTypes: only forward `store` when the caller supplied one.
+      const { key } = await adapter.upload(blob, { ...(meta.store !== undefined && { store: meta.store }) });
+      onChange(key);
+      URL.revokeObjectURL(editing);
+      setEditing(null);
+    } catch {
+      // Crop/upload failed (adapter rejected the image, network drop, etc).
+      // Leave `editing` in place so the user's crop selection isn't lost —
+      // they can retry Save crop without re-picking the file.
+      setError("Something went wrong saving that image. Try again.");
+    } finally {
+      setBusy(false);
+    }
+  }, [editing, meta.maxEdge, meta.store, adapter, onChange]);
+
+  return (
+    <div className="metaobjects-image-upload">
+      {value && !editing && (
+        <img src={adapter.imageUrl(value)} alt="" className="metaobjects-image-preview" />
+      )}
+      {!editing && (
+        <div className="metaobjects-image-actions">
+          <label className="metaobjects-form-submit">
+            {value ? "Replace" : "Upload"}
+            <input type="file" accept={accept} onChange={onPick} hidden />
+          </label>
+          {value && (
+            <button type="button" className="metaobjects-form-submit" onClick={() => onChange(null)}>
+              Remove
+            </button>
+          )}
+        </div>
+      )}
+      {editing && (
+        <div className="metaobjects-image-cropper">
+          <Suspense fallback={<p>Loading cropper…</p>}>
+            <div style={{ position: "relative", height: 320 }}>
+              <Cropper
+                image={editing}
+                crop={crop}
+                zoom={zoom}
+                aspect={meta.aspectRatio}
+                onCropChange={setCrop}
+                onZoomChange={setZoom}
+                onCropComplete={(_croppedArea, croppedAreaPixels) => (areaRef.current = croppedAreaPixels)}
+              />
+            </div>
+          </Suspense>
+          <div className="metaobjects-image-actions">
+            <button type="button" className="metaobjects-form-submit" disabled={busy} onClick={onSave}>
+              {busy ? "Saving…" : "Save crop"}
+            </button>
+            <button
+              type="button"
+              className="metaobjects-form-submit"
+              disabled={busy}
+              onClick={() => {
+                URL.revokeObjectURL(editing);
+                setEditing(null);
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+          {error && (
+            <span className="metaobjects-field-error" role="alert">
+              {error}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -9,3 +9,10 @@ export {
   type UseEntityFormReturn,
 } from "./use-entity-form.js";
 export { CurrencyInput, type CurrencyInputProps } from "./currency-input.js";
+export { ImageUpload, type ImageUploadProps } from "./image-upload.js";
+export {
+  ImageUploadAdapterProvider,
+  useImageUploadAdapter,
+  type ImageUploadAdapterProviderProps,
+} from "./image-adapter-provider.js";
+export { cropToBlob } from "./crop-to-blob.js";