@nixxie-cms/fields-computed-image 1.0.0

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 Nixxie International DMCC
+Portions Copyright (c) 2023 Thinkmill Labs Pty Ltd and contributors
+(this software is derived from the KeystoneJS project, https://keystonejs.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# @nixxie-cms/fields-computed-image
+
+An image upload field for Nixxie CMS that computes width/height, generates a blur placeholder
+and a thumbnail, and stores files through the pluggable storage service
+(`context.services.storage`).
+
+## Requirements
+
+- A configured **storage service** (`context.services.storage`, e.g. from
+  `@nixxie-cms/storage` — local, S3, GCS or Azure). Mutations fail with a clear error when it is
+  missing.
+- The **`sharp`** peer dependency (lazy-loaded; only needed at runtime when an image is
+  uploaded):
+
+  ```sh
+  pnpm add sharp
+  ```
+
+## Schema
+
+```ts
+import { computedImage } from '@nixxie-cms/fields-computed-image'
+
+fields: {
+  cover: computedImage({
+    storage: { prefix: 'covers/' },   // key prefix, default 'images/'
+    thumbnail: { width: 480 },        // or false to disable, default { width: 320 }
+    blur: true,                       // inline blur placeholder, default true
+  }),
+}
+```
+
+## Uploading from a client
+
+The field's GraphQL input is plain JSON — `{ base64, filename? }` (data URLs are accepted), or
+`null` to clear the field. Decoded images are capped at ~50MB.
+
+```ts
+// browser
+const file = fileInput.files[0]
+const base64 = await new Promise<string>(resolve => {
+  const reader = new FileReader()
+  reader.onload = () => resolve(reader.result as string) // data:image/…;base64,…
+  reader.readAsDataURL(file)
+})
+
+await fetch('/api/graphql', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    query: `mutation ($id: ID!, $cover: JSON) {
+      updatePost(where: { id: $id }, data: { cover: $cover }) {
+        cover { url thumbnailUrl width height blurDataUrl }
+      }
+    }`,
+    variables: { id, cover: { base64, filename: file.name } },
+  }),
+})
+```
+
+> Plain JSON was chosen deliberately over a multipart `Upload` scalar: the raw GraphQL input
+> resolver does not receive the request context, so all processing (sharp + storage) happens in
+> a field-level `resolveInput` hook, which does. Base64 adds ~33% transfer overhead — fine for
+> CMS-sized images under the 50MB cap.
+
+## What gets stored
+
+Two objects go to storage (both `public: true`):
+
+- the original: `<prefix><randomId>.<ext>` (e.g. `images/aB3xY9….jpg`)
+- the thumbnail: `<prefix><randomId>.thumb.webp` (unless `thumbnail: false`)
+
+The database column (JSON) holds:
+
+```jsonc
+{
+  "key": "images/aB3xY9….jpg",
+  "url": "https://…/images/aB3xY9….jpg",
+  "thumbnailKey": "images/aB3xY9….thumb.webp", // null when disabled
+  "thumbnailUrl": "https://…",                 // null when disabled
+  "width": 2048,
+  "height": 1365,
+  "filesize": 482133,                          // bytes (original)
+  "format": "jpeg",                            // as detected by sharp
+  "blurDataUrl": "data:image/webp;base64,…",   // 16px webp, null when blur: false
+  "filename": "holiday.jpg"                    // client-supplied, null when omitted
+}
+```
+
+The GraphQL output is a typed `ComputedImage` object exposing those same fields.
+
+## Cleanup
+
+An `afterOperation` hook removes both objects from storage when the item is deleted, and removes
+the previous objects when the image is replaced or cleared on update. Cleanup failures are
+logged with `console.error` and never thrown (the database write has already succeeded).
+
+## Notes
+
+- The Admin UI renders this field with the core JSON views (no bespoke upload UI is shipped).
+- Type exports: `ComputedImageData` (stored shape), `ComputedImageInput` (mutation input shape),
+  `ComputedImageFieldConfig`.

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,53 @@
+import type { BaseFieldTypeInfo, BaseCollectionTypeInfo, CommonFieldConfig, FieldTypeFunc } from '@nixxie-cms/core/types';
+/** The GraphQL input shape — a base64-encoded image (data URLs accepted), or null to clear. */
+export type ComputedImageInput = {
+    base64: string;
+    filename?: string;
+} | null;
+/** The JSON value stored in the database (and returned from the output type). */
+export type ComputedImageData = {
+    /** Storage key of the original image. */
+    key: string;
+    /** URL of the original image. */
+    url: string;
+    /** Storage key of the generated thumbnail (null when thumbnails are disabled). */
+    thumbnailKey: string | null;
+    /** URL of the generated thumbnail. */
+    thumbnailUrl: string | null;
+    width: number;
+    height: number;
+    /** Original file size in bytes. */
+    filesize: number;
+    /** Image format as detected by sharp, e.g. 'jpeg', 'png', 'webp'. */
+    format: string;
+    /** Tiny inline blur placeholder (`data:image/webp;base64,…`), null when disabled. */
+    blurDataUrl: string | null;
+    /** Client-supplied filename, if any. */
+    filename: string | null;
+};
+export type ComputedImageFieldConfig<CollectionTypeInfo extends BaseCollectionTypeInfo> = CommonFieldConfig<CollectionTypeInfo, BaseFieldTypeInfo> & {
+    storage?: {
+        /** Key prefix for stored objects. Default: 'images/' */
+        prefix?: string;
+    };
+    /** Thumbnail generation options, or `false` to disable. Default: { width: 320 } */
+    thumbnail?: {
+        width?: number;
+    } | false;
+    /** Generate a tiny inline blur placeholder. Default: true */
+    blur?: boolean;
+    db?: {
+        map?: string;
+    };
+};
+/**
+ * An image upload field that computes width/height, generates a blur placeholder and a
+ * thumbnail, and stores files through `context.services.storage`.
+ *
+ * The GraphQL input is plain JSON — `{ base64, filename? }` or `null` to clear — and all
+ * processing happens in a field-level `resolveInput` hook (which receives the request context,
+ * unlike the field type's raw GraphQL input resolver). Requires the `sharp` peer dependency and
+ * a configured storage service.
+ */
+export declare function computedImage<CollectionTypeInfo extends BaseCollectionTypeInfo>(config?: ComputedImageFieldConfig<CollectionTypeInfo>): FieldTypeFunc<CollectionTypeInfo>;
+//# sourceMappingURL=index.d.ts.map

package/dist/declarations/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"../../../src","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACd,MAAM,wBAAwB,CAAA;AAO/B,+FAA+F;AAC/F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,IAAI,CAAA;AAER,iFAAiF;AACjF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,kFAAkF;IAClF,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,sCAAsC;IACtC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,qFAAqF;IACrF,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,wCAAwC;IACxC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,wBAAwB,CAAC,kBAAkB,SAAS,sBAAsB,IACpF,iBAAiB,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,GAAG;IACzD,OAAO,CAAC,EAAE;QACR,wDAAwD;QACxD,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,mFAAmF;IACnF,SAAS,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,EAAE,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACtB,CAAA;AA0DH;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,kBAAkB,SAAS,sBAAsB,EAC7E,MAAM,GAAE,wBAAwB,CAAC,kBAAkB,CAAM,GACxD,aAAa,CAAC,kBAAkB,CAAC,CAsLnC"}

package/dist/nixxie-cms-fields-computed-image.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibml4eGllLWNtcy1maWVsZHMtY29tcHV0ZWQtaW1hZ2UuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/nixxie-cms-fields-computed-image.cjs.js

@@ -0,0 +1,298 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@nixxie-cms/core');
+var types = require('@nixxie-cms/core/types');
+var node_crypto = require('node:crypto');
+
+const PKG = '[@nixxie-cms/fields-computed-image]';
+const MAX_BYTES = 50 * 1024 * 1024; // ~50MB decoded
+
+/** The GraphQL input shape — a base64-encoded image (data URLs accepted), or null to clear. */
+
+/** The JSON value stored in the database (and returned from the output type). */
+
+const CONTENT_TYPES = {
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  webp: 'image/webp',
+  gif: 'image/gif',
+  avif: 'image/avif',
+  tiff: 'image/tiff',
+  svg: 'image/svg+xml',
+  heif: 'image/heif'
+};
+const outputType = core.g.object()({
+  name: 'ComputedImage',
+  fields: {
+    key: core.g.field({
+      type: core.g.nonNull(core.g.String)
+    }),
+    url: core.g.field({
+      type: core.g.nonNull(core.g.String)
+    }),
+    thumbnailKey: core.g.field({
+      type: core.g.String
+    }),
+    thumbnailUrl: core.g.field({
+      type: core.g.String
+    }),
+    width: core.g.field({
+      type: core.g.nonNull(core.g.Int)
+    }),
+    height: core.g.field({
+      type: core.g.nonNull(core.g.Int)
+    }),
+    filesize: core.g.field({
+      type: core.g.nonNull(core.g.Int)
+    }),
+    format: core.g.field({
+      type: core.g.nonNull(core.g.String)
+    }),
+    blurDataUrl: core.g.field({
+      type: core.g.String
+    }),
+    filename: core.g.field({
+      type: core.g.String
+    })
+  }
+});
+async function loadSharp() {
+  try {
+    var _mod$default;
+    const mod = await import('sharp');
+    return (_mod$default = mod.default) !== null && _mod$default !== void 0 ? _mod$default : mod;
+  } catch {
+    throw new Error(`${PKG} sharp is required — install it with: pnpm add sharp`);
+  }
+}
+
+/** Decode a base64 string (optionally a data URL), enforcing the decoded size cap. */
+function decodeBase64(input, fieldKey) {
+  let base64 = input.trim();
+  const dataUrlMatch = /^data:[^;,]*;base64,(.*)$/s.exec(base64);
+  if (dataUrlMatch) base64 = dataUrlMatch[1];
+  base64 = base64.replace(/\s+/g, '');
+  // Pre-check before allocating: decoded size is ~3/4 of the base64 length.
+  if (base64.length * 0.75 > MAX_BYTES) {
+    throw new Error(`${PKG} ${fieldKey}: image exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`);
+  }
+  const buffer = Buffer.from(base64, 'base64');
+  if (buffer.length === 0) {
+    throw new Error(`${PKG} ${fieldKey}: base64 could not be decoded to any data`);
+  }
+  if (buffer.length > MAX_BYTES) {
+    throw new Error(`${PKG} ${fieldKey}: image exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`);
+  }
+  return buffer;
+}
+
+/**
+ * An image upload field that computes width/height, generates a blur placeholder and a
+ * thumbnail, and stores files through `context.services.storage`.
+ *
+ * The GraphQL input is plain JSON — `{ base64, filename? }` or `null` to clear — and all
+ * processing happens in a field-level `resolveInput` hook (which receives the request context,
+ * unlike the field type's raw GraphQL input resolver). Requires the `sharp` peer dependency and
+ * a configured storage service.
+ */
+function computedImage(config = {}) {
+  var _config$storage$prefi, _config$storage, _config$thumbnail$wid, _config$thumbnail, _config$blur;
+  const prefix = (_config$storage$prefi = (_config$storage = config.storage) === null || _config$storage === void 0 ? void 0 : _config$storage.prefix) !== null && _config$storage$prefi !== void 0 ? _config$storage$prefi : 'images/';
+  const thumbnailWidth = config.thumbnail === false ? null : (_config$thumbnail$wid = (_config$thumbnail = config.thumbnail) === null || _config$thumbnail === void 0 ? void 0 : _config$thumbnail.width) !== null && _config$thumbnail$wid !== void 0 ? _config$thumbnail$wid : 320;
+  const blurEnabled = (_config$blur = config.blur) !== null && _config$blur !== void 0 ? _config$blur : true;
+  return meta => {
+    var _config$hooks, _config$hooks2, _config$db;
+    if (config.isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type computedImage");
+    }
+
+    /** Remove a stored image (+thumbnail); logged (not thrown) since the DB write already succeeded. */
+    async function removeStored(context, stored) {
+      var _context$services;
+      if (!stored || typeof stored !== 'object') return;
+      const storage = context === null || context === void 0 || (_context$services = context.services) === null || _context$services === void 0 ? void 0 : _context$services.storage;
+      if (!storage) {
+        if (stored.key) {
+          console.error(`${PKG} Cannot clean up "${stored.key}": context.services.storage is not configured`);
+        }
+        return;
+      }
+      for (const key of [stored.key, stored.thumbnailKey]) {
+        if (typeof key !== 'string' || key.length === 0) continue;
+        try {
+          await storage.delete(key);
+        } catch (err) {
+          console.error(`${PKG} Failed to delete "${key}" from storage:`, err);
+        }
+      }
+    }
+
+    /** Decode, measure, derive (thumbnail + blur), store, and return the value to persist. */
+    async function processInput(args) {
+      var _context$services2, _CONTENT_TYPES$format;
+      const {
+        resolvedFieldData: value,
+        fieldKey,
+        context
+      } = args;
+      if (value === undefined) return undefined;
+      if (value === null) return null;
+      if (typeof value !== 'object' || Array.isArray(value) || typeof value.base64 !== 'string') {
+        throw new Error(`${PKG} ${fieldKey}: expected { base64: string, filename?: string } or null`);
+      }
+      const input = value;
+      const filename = typeof input.filename === 'string' && input.filename.length > 0 ? input.filename : null;
+      const storage = context === null || context === void 0 || (_context$services2 = context.services) === null || _context$services2 === void 0 ? void 0 : _context$services2.storage;
+      if (!storage) {
+        throw new Error(`${PKG} ${fieldKey}: context.services.storage is not configured — a storage service is required`);
+      }
+      const buffer = decodeBase64(input.base64, fieldKey);
+      const sharp = await loadSharp();
+      let metadata;
+      try {
+        metadata = await sharp(buffer).metadata();
+      } catch (err) {
+        var _message;
+        throw new Error(`${PKG} ${fieldKey}: could not read image (unsupported or corrupt): ${(_message = err === null || err === void 0 ? void 0 : err.message) !== null && _message !== void 0 ? _message : err}`);
+      }
+      const {
+        width,
+        height,
+        format
+      } = metadata !== null && metadata !== void 0 ? metadata : {};
+      if (typeof width !== 'number' || typeof height !== 'number' || typeof format !== 'string') {
+        throw new Error(`${PKG} ${fieldKey}: could not determine image dimensions/format`);
+      }
+      const id = node_crypto.randomBytes(12).toString('base64url');
+      const ext = format === 'jpeg' ? 'jpg' : format;
+      const key = `${prefix}${id}.${ext}`;
+      const contentType = (_CONTENT_TYPES$format = CONTENT_TYPES[format]) !== null && _CONTENT_TYPES$format !== void 0 ? _CONTENT_TYPES$format : `image/${format}`;
+      const stored = await storage.put(key, buffer, {
+        contentType,
+        public: true
+      });
+      let thumbnailKey = null;
+      let thumbnailUrl = null;
+      let blurDataUrl = null;
+      try {
+        if (thumbnailWidth !== null) {
+          const thumbBuffer = await sharp(buffer).resize({
+            width: thumbnailWidth,
+            withoutEnlargement: true
+          }).webp().toBuffer();
+          thumbnailKey = `${prefix}${id}.thumb.webp`;
+          const storedThumb = await storage.put(thumbnailKey, thumbBuffer, {
+            contentType: 'image/webp',
+            public: true
+          });
+          thumbnailUrl = storedThumb.url;
+        }
+        if (blurEnabled) {
+          const blurBuffer = await sharp(buffer).resize(16).webp({
+            quality: 40
+          }).toBuffer();
+          blurDataUrl = `data:image/webp;base64,${blurBuffer.toString('base64')}`;
+        }
+      } catch (err) {
+        // Don't leave orphaned objects behind when derivative generation fails mid-way.
+        await removeStored(context, {
+          key,
+          thumbnailKey
+        });
+        throw err;
+      }
+      return {
+        key,
+        url: stored.url,
+        thumbnailKey,
+        thumbnailUrl,
+        width,
+        height,
+        filesize: buffer.length,
+        format,
+        blurDataUrl,
+        filename
+      };
+    }
+
+    // Compose our processing/cleanup with any hooks the user configured: our resolveInput runs
+    // first (turning the raw { base64 } input into the stored JSON), then the user's; the
+    // user's afterOperation runs first, then our storage cleanup (mirroring @nixxie-cms/cloudinary).
+    const userResolveInput = (_config$hooks = config.hooks) === null || _config$hooks === void 0 ? void 0 : _config$hooks.resolveInput;
+    const userAfterOperation = (_config$hooks2 = config.hooks) === null || _config$hooks2 === void 0 ? void 0 : _config$hooks2.afterOperation;
+    const hooks = {
+      ...config.hooks,
+      resolveInput: async args => {
+        const processed = await processInput(args);
+        const userHook = typeof userResolveInput === 'function' ? userResolveInput : userResolveInput === null || userResolveInput === void 0 ? void 0 : userResolveInput[args.operation];
+        if (!userHook) return processed;
+        return userHook({
+          ...args,
+          resolvedFieldData: processed,
+          resolvedData: {
+            ...args.resolvedData,
+            [args.fieldKey]: processed
+          }
+        });
+      },
+      afterOperation: async args => {
+        const userHook = typeof userAfterOperation === 'function' ? userAfterOperation : userAfterOperation === null || userAfterOperation === void 0 ? void 0 : userAfterOperation[args.operation];
+        await (userHook === null || userHook === void 0 ? void 0 : userHook(args));
+        if (args.operation === 'delete') {
+          await removeStored(args.context, args.originalItemField);
+        } else if (args.operation === 'update') {
+          const previous = args.originalItemField;
+          const next = args.itemField;
+          if (previous !== null && previous !== void 0 && previous.key && previous.key !== (next === null || next === void 0 ? void 0 : next.key)) {
+            await removeStored(args.context, previous);
+          }
+        }
+      }
+    };
+    const inputArg = core.g.arg({
+      type: core.g.JSON
+    });
+    return types.fieldType({
+      kind: 'scalar',
+      mode: 'optional',
+      scalar: 'Json',
+      map: (_config$db = config.db) === null || _config$db === void 0 ? void 0 : _config$db.map
+    })({
+      ...config,
+      hooks,
+      __nxTelemetryFieldTypeName: '@nixxie-cms/fields-computed-image',
+      input: {
+        // The raw GraphQL input resolver does not receive context, so the value passes through
+        // here untouched; all storage work happens in the field-level resolveInput hook above.
+        create: {
+          arg: inputArg
+        },
+        update: {
+          arg: inputArg
+        }
+      },
+      output: core.g.field({
+        type: outputType,
+        resolve({
+          value
+        }) {
+          if (value === null || typeof value !== 'object') return null;
+          const val = value;
+          if (typeof val.key !== 'string') return null;
+          return {
+            thumbnailKey: null,
+            thumbnailUrl: null,
+            blurDataUrl: null,
+            filename: null,
+            ...val
+          };
+        }
+      }),
+      views: '@nixxie-cms/core/fields/types/json/views'
+    });
+  };
+}
+
+exports.computedImage = computedImage;

package/dist/nixxie-cms-fields-computed-image.esm.js

@@ -0,0 +1,294 @@
+import { g } from '@nixxie-cms/core';
+import { fieldType } from '@nixxie-cms/core/types';
+import { randomBytes } from 'node:crypto';
+
+const PKG = '[@nixxie-cms/fields-computed-image]';
+const MAX_BYTES = 50 * 1024 * 1024; // ~50MB decoded
+
+/** The GraphQL input shape — a base64-encoded image (data URLs accepted), or null to clear. */
+
+/** The JSON value stored in the database (and returned from the output type). */
+
+const CONTENT_TYPES = {
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  webp: 'image/webp',
+  gif: 'image/gif',
+  avif: 'image/avif',
+  tiff: 'image/tiff',
+  svg: 'image/svg+xml',
+  heif: 'image/heif'
+};
+const outputType = g.object()({
+  name: 'ComputedImage',
+  fields: {
+    key: g.field({
+      type: g.nonNull(g.String)
+    }),
+    url: g.field({
+      type: g.nonNull(g.String)
+    }),
+    thumbnailKey: g.field({
+      type: g.String
+    }),
+    thumbnailUrl: g.field({
+      type: g.String
+    }),
+    width: g.field({
+      type: g.nonNull(g.Int)
+    }),
+    height: g.field({
+      type: g.nonNull(g.Int)
+    }),
+    filesize: g.field({
+      type: g.nonNull(g.Int)
+    }),
+    format: g.field({
+      type: g.nonNull(g.String)
+    }),
+    blurDataUrl: g.field({
+      type: g.String
+    }),
+    filename: g.field({
+      type: g.String
+    })
+  }
+});
+async function loadSharp() {
+  try {
+    var _mod$default;
+    const mod = await import('sharp');
+    return (_mod$default = mod.default) !== null && _mod$default !== void 0 ? _mod$default : mod;
+  } catch {
+    throw new Error(`${PKG} sharp is required — install it with: pnpm add sharp`);
+  }
+}
+
+/** Decode a base64 string (optionally a data URL), enforcing the decoded size cap. */
+function decodeBase64(input, fieldKey) {
+  let base64 = input.trim();
+  const dataUrlMatch = /^data:[^;,]*;base64,(.*)$/s.exec(base64);
+  if (dataUrlMatch) base64 = dataUrlMatch[1];
+  base64 = base64.replace(/\s+/g, '');
+  // Pre-check before allocating: decoded size is ~3/4 of the base64 length.
+  if (base64.length * 0.75 > MAX_BYTES) {
+    throw new Error(`${PKG} ${fieldKey}: image exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`);
+  }
+  const buffer = Buffer.from(base64, 'base64');
+  if (buffer.length === 0) {
+    throw new Error(`${PKG} ${fieldKey}: base64 could not be decoded to any data`);
+  }
+  if (buffer.length > MAX_BYTES) {
+    throw new Error(`${PKG} ${fieldKey}: image exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`);
+  }
+  return buffer;
+}
+
+/**
+ * An image upload field that computes width/height, generates a blur placeholder and a
+ * thumbnail, and stores files through `context.services.storage`.
+ *
+ * The GraphQL input is plain JSON — `{ base64, filename? }` or `null` to clear — and all
+ * processing happens in a field-level `resolveInput` hook (which receives the request context,
+ * unlike the field type's raw GraphQL input resolver). Requires the `sharp` peer dependency and
+ * a configured storage service.
+ */
+function computedImage(config = {}) {
+  var _config$storage$prefi, _config$storage, _config$thumbnail$wid, _config$thumbnail, _config$blur;
+  const prefix = (_config$storage$prefi = (_config$storage = config.storage) === null || _config$storage === void 0 ? void 0 : _config$storage.prefix) !== null && _config$storage$prefi !== void 0 ? _config$storage$prefi : 'images/';
+  const thumbnailWidth = config.thumbnail === false ? null : (_config$thumbnail$wid = (_config$thumbnail = config.thumbnail) === null || _config$thumbnail === void 0 ? void 0 : _config$thumbnail.width) !== null && _config$thumbnail$wid !== void 0 ? _config$thumbnail$wid : 320;
+  const blurEnabled = (_config$blur = config.blur) !== null && _config$blur !== void 0 ? _config$blur : true;
+  return meta => {
+    var _config$hooks, _config$hooks2, _config$db;
+    if (config.isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type computedImage");
+    }
+
+    /** Remove a stored image (+thumbnail); logged (not thrown) since the DB write already succeeded. */
+    async function removeStored(context, stored) {
+      var _context$services;
+      if (!stored || typeof stored !== 'object') return;
+      const storage = context === null || context === void 0 || (_context$services = context.services) === null || _context$services === void 0 ? void 0 : _context$services.storage;
+      if (!storage) {
+        if (stored.key) {
+          console.error(`${PKG} Cannot clean up "${stored.key}": context.services.storage is not configured`);
+        }
+        return;
+      }
+      for (const key of [stored.key, stored.thumbnailKey]) {
+        if (typeof key !== 'string' || key.length === 0) continue;
+        try {
+          await storage.delete(key);
+        } catch (err) {
+          console.error(`${PKG} Failed to delete "${key}" from storage:`, err);
+        }
+      }
+    }
+
+    /** Decode, measure, derive (thumbnail + blur), store, and return the value to persist. */
+    async function processInput(args) {
+      var _context$services2, _CONTENT_TYPES$format;
+      const {
+        resolvedFieldData: value,
+        fieldKey,
+        context
+      } = args;
+      if (value === undefined) return undefined;
+      if (value === null) return null;
+      if (typeof value !== 'object' || Array.isArray(value) || typeof value.base64 !== 'string') {
+        throw new Error(`${PKG} ${fieldKey}: expected { base64: string, filename?: string } or null`);
+      }
+      const input = value;
+      const filename = typeof input.filename === 'string' && input.filename.length > 0 ? input.filename : null;
+      const storage = context === null || context === void 0 || (_context$services2 = context.services) === null || _context$services2 === void 0 ? void 0 : _context$services2.storage;
+      if (!storage) {
+        throw new Error(`${PKG} ${fieldKey}: context.services.storage is not configured — a storage service is required`);
+      }
+      const buffer = decodeBase64(input.base64, fieldKey);
+      const sharp = await loadSharp();
+      let metadata;
+      try {
+        metadata = await sharp(buffer).metadata();
+      } catch (err) {
+        var _message;
+        throw new Error(`${PKG} ${fieldKey}: could not read image (unsupported or corrupt): ${(_message = err === null || err === void 0 ? void 0 : err.message) !== null && _message !== void 0 ? _message : err}`);
+      }
+      const {
+        width,
+        height,
+        format
+      } = metadata !== null && metadata !== void 0 ? metadata : {};
+      if (typeof width !== 'number' || typeof height !== 'number' || typeof format !== 'string') {
+        throw new Error(`${PKG} ${fieldKey}: could not determine image dimensions/format`);
+      }
+      const id = randomBytes(12).toString('base64url');
+      const ext = format === 'jpeg' ? 'jpg' : format;
+      const key = `${prefix}${id}.${ext}`;
+      const contentType = (_CONTENT_TYPES$format = CONTENT_TYPES[format]) !== null && _CONTENT_TYPES$format !== void 0 ? _CONTENT_TYPES$format : `image/${format}`;
+      const stored = await storage.put(key, buffer, {
+        contentType,
+        public: true
+      });
+      let thumbnailKey = null;
+      let thumbnailUrl = null;
+      let blurDataUrl = null;
+      try {
+        if (thumbnailWidth !== null) {
+          const thumbBuffer = await sharp(buffer).resize({
+            width: thumbnailWidth,
+            withoutEnlargement: true
+          }).webp().toBuffer();
+          thumbnailKey = `${prefix}${id}.thumb.webp`;
+          const storedThumb = await storage.put(thumbnailKey, thumbBuffer, {
+            contentType: 'image/webp',
+            public: true
+          });
+          thumbnailUrl = storedThumb.url;
+        }
+        if (blurEnabled) {
+          const blurBuffer = await sharp(buffer).resize(16).webp({
+            quality: 40
+          }).toBuffer();
+          blurDataUrl = `data:image/webp;base64,${blurBuffer.toString('base64')}`;
+        }
+      } catch (err) {
+        // Don't leave orphaned objects behind when derivative generation fails mid-way.
+        await removeStored(context, {
+          key,
+          thumbnailKey
+        });
+        throw err;
+      }
+      return {
+        key,
+        url: stored.url,
+        thumbnailKey,
+        thumbnailUrl,
+        width,
+        height,
+        filesize: buffer.length,
+        format,
+        blurDataUrl,
+        filename
+      };
+    }
+
+    // Compose our processing/cleanup with any hooks the user configured: our resolveInput runs
+    // first (turning the raw { base64 } input into the stored JSON), then the user's; the
+    // user's afterOperation runs first, then our storage cleanup (mirroring @nixxie-cms/cloudinary).
+    const userResolveInput = (_config$hooks = config.hooks) === null || _config$hooks === void 0 ? void 0 : _config$hooks.resolveInput;
+    const userAfterOperation = (_config$hooks2 = config.hooks) === null || _config$hooks2 === void 0 ? void 0 : _config$hooks2.afterOperation;
+    const hooks = {
+      ...config.hooks,
+      resolveInput: async args => {
+        const processed = await processInput(args);
+        const userHook = typeof userResolveInput === 'function' ? userResolveInput : userResolveInput === null || userResolveInput === void 0 ? void 0 : userResolveInput[args.operation];
+        if (!userHook) return processed;
+        return userHook({
+          ...args,
+          resolvedFieldData: processed,
+          resolvedData: {
+            ...args.resolvedData,
+            [args.fieldKey]: processed
+          }
+        });
+      },
+      afterOperation: async args => {
+        const userHook = typeof userAfterOperation === 'function' ? userAfterOperation : userAfterOperation === null || userAfterOperation === void 0 ? void 0 : userAfterOperation[args.operation];
+        await (userHook === null || userHook === void 0 ? void 0 : userHook(args));
+        if (args.operation === 'delete') {
+          await removeStored(args.context, args.originalItemField);
+        } else if (args.operation === 'update') {
+          const previous = args.originalItemField;
+          const next = args.itemField;
+          if (previous !== null && previous !== void 0 && previous.key && previous.key !== (next === null || next === void 0 ? void 0 : next.key)) {
+            await removeStored(args.context, previous);
+          }
+        }
+      }
+    };
+    const inputArg = g.arg({
+      type: g.JSON
+    });
+    return fieldType({
+      kind: 'scalar',
+      mode: 'optional',
+      scalar: 'Json',
+      map: (_config$db = config.db) === null || _config$db === void 0 ? void 0 : _config$db.map
+    })({
+      ...config,
+      hooks,
+      __nxTelemetryFieldTypeName: '@nixxie-cms/fields-computed-image',
+      input: {
+        // The raw GraphQL input resolver does not receive context, so the value passes through
+        // here untouched; all storage work happens in the field-level resolveInput hook above.
+        create: {
+          arg: inputArg
+        },
+        update: {
+          arg: inputArg
+        }
+      },
+      output: g.field({
+        type: outputType,
+        resolve({
+          value
+        }) {
+          if (value === null || typeof value !== 'object') return null;
+          const val = value;
+          if (typeof val.key !== 'string') return null;
+          return {
+            thumbnailKey: null,
+            thumbnailUrl: null,
+            blurDataUrl: null,
+            filename: null,
+            ...val
+          };
+        }
+      }),
+      views: '@nixxie-cms/core/fields/types/json/views'
+    });
+  };
+}
+
+export { computedImage };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nixxie-cms/fields-computed-image",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/nixxie-cms-fields-computed-image.cjs.js",
+  "module": "dist/nixxie-cms-fields-computed-image.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/nixxie-cms-fields-computed-image.cjs.js",
+      "module": "./dist/nixxie-cms-fields-computed-image.esm.js",
+      "default": "./dist/nixxie-cms-fields-computed-image.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.7"
+  },
+  "devDependencies": {
+    "sharp": "^0.33.0",
+    "@nixxie-cms/core": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@nixxie-cms/core": "^1.0.3",
+    "sharp": "^0.33.0"
+  },
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nixxiecms/nixxie/tree/main/packages/fields-computed-image"
+  }
+}

package/src/index.ts

@@ -0,0 +1,304 @@
+import { g } from '@nixxie-cms/core'
+import type {
+  BaseFieldTypeInfo,
+  BaseCollectionTypeInfo,
+  CommonFieldConfig,
+  FieldTypeFunc,
+} from '@nixxie-cms/core/types'
+import { fieldType } from '@nixxie-cms/core/types'
+import { randomBytes } from 'node:crypto'
+
+const PKG = '[@nixxie-cms/fields-computed-image]'
+const MAX_BYTES = 50 * 1024 * 1024 // ~50MB decoded
+
+/** The GraphQL input shape — a base64-encoded image (data URLs accepted), or null to clear. */
+export type ComputedImageInput = {
+  base64: string
+  filename?: string
+} | null
+
+/** The JSON value stored in the database (and returned from the output type). */
+export type ComputedImageData = {
+  /** Storage key of the original image. */
+  key: string
+  /** URL of the original image. */
+  url: string
+  /** Storage key of the generated thumbnail (null when thumbnails are disabled). */
+  thumbnailKey: string | null
+  /** URL of the generated thumbnail. */
+  thumbnailUrl: string | null
+  width: number
+  height: number
+  /** Original file size in bytes. */
+  filesize: number
+  /** Image format as detected by sharp, e.g. 'jpeg', 'png', 'webp'. */
+  format: string
+  /** Tiny inline blur placeholder (`data:image/webp;base64,…`), null when disabled. */
+  blurDataUrl: string | null
+  /** Client-supplied filename, if any. */
+  filename: string | null
+}
+
+export type ComputedImageFieldConfig<CollectionTypeInfo extends BaseCollectionTypeInfo> =
+  CommonFieldConfig<CollectionTypeInfo, BaseFieldTypeInfo> & {
+    storage?: {
+      /** Key prefix for stored objects. Default: 'images/' */
+      prefix?: string
+    }
+    /** Thumbnail generation options, or `false` to disable. Default: { width: 320 } */
+    thumbnail?: { width?: number } | false
+    /** Generate a tiny inline blur placeholder. Default: true */
+    blur?: boolean
+    db?: { map?: string }
+  }
+
+const CONTENT_TYPES: Record<string, string> = {
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  webp: 'image/webp',
+  gif: 'image/gif',
+  avif: 'image/avif',
+  tiff: 'image/tiff',
+  svg: 'image/svg+xml',
+  heif: 'image/heif',
+}
+
+const outputType = g.object<ComputedImageData>()({
+  name: 'ComputedImage',
+  fields: {
+    key: g.field({ type: g.nonNull(g.String) }),
+    url: g.field({ type: g.nonNull(g.String) }),
+    thumbnailKey: g.field({ type: g.String }),
+    thumbnailUrl: g.field({ type: g.String }),
+    width: g.field({ type: g.nonNull(g.Int) }),
+    height: g.field({ type: g.nonNull(g.Int) }),
+    filesize: g.field({ type: g.nonNull(g.Int) }),
+    format: g.field({ type: g.nonNull(g.String) }),
+    blurDataUrl: g.field({ type: g.String }),
+    filename: g.field({ type: g.String }),
+  },
+})
+
+async function loadSharp(): Promise<any> {
+  try {
+    const mod: any = await import('sharp')
+    return mod.default ?? mod
+  } catch {
+    throw new Error(`${PKG} sharp is required — install it with: pnpm add sharp`)
+  }
+}
+
+/** Decode a base64 string (optionally a data URL), enforcing the decoded size cap. */
+function decodeBase64(input: string, fieldKey: string): Buffer {
+  let base64 = input.trim()
+  const dataUrlMatch = /^data:[^;,]*;base64,(.*)$/s.exec(base64)
+  if (dataUrlMatch) base64 = dataUrlMatch[1]
+  base64 = base64.replace(/\s+/g, '')
+  // Pre-check before allocating: decoded size is ~3/4 of the base64 length.
+  if (base64.length * 0.75 > MAX_BYTES) {
+    throw new Error(`${PKG} ${fieldKey}: image exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`)
+  }
+  const buffer = Buffer.from(base64, 'base64')
+  if (buffer.length === 0) {
+    throw new Error(`${PKG} ${fieldKey}: base64 could not be decoded to any data`)
+  }
+  if (buffer.length > MAX_BYTES) {
+    throw new Error(`${PKG} ${fieldKey}: image exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`)
+  }
+  return buffer
+}
+
+/**
+ * An image upload field that computes width/height, generates a blur placeholder and a
+ * thumbnail, and stores files through `context.services.storage`.
+ *
+ * The GraphQL input is plain JSON — `{ base64, filename? }` or `null` to clear — and all
+ * processing happens in a field-level `resolveInput` hook (which receives the request context,
+ * unlike the field type's raw GraphQL input resolver). Requires the `sharp` peer dependency and
+ * a configured storage service.
+ */
+export function computedImage<CollectionTypeInfo extends BaseCollectionTypeInfo>(
+  config: ComputedImageFieldConfig<CollectionTypeInfo> = {}
+): FieldTypeFunc<CollectionTypeInfo> {
+  const prefix = config.storage?.prefix ?? 'images/'
+  const thumbnailWidth = config.thumbnail === false ? null : (config.thumbnail?.width ?? 320)
+  const blurEnabled = config.blur ?? true
+
+  return meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type computedImage")
+    }
+
+    /** Remove a stored image (+thumbnail); logged (not thrown) since the DB write already succeeded. */
+    async function removeStored(context: any, stored: Partial<ComputedImageData> | null | undefined) {
+      if (!stored || typeof stored !== 'object') return
+      const storage = context?.services?.storage
+      if (!storage) {
+        if (stored.key) {
+          console.error(`${PKG} Cannot clean up "${stored.key}": context.services.storage is not configured`)
+        }
+        return
+      }
+      for (const key of [stored.key, stored.thumbnailKey]) {
+        if (typeof key !== 'string' || key.length === 0) continue
+        try {
+          await storage.delete(key)
+        } catch (err) {
+          console.error(`${PKG} Failed to delete "${key}" from storage:`, err)
+        }
+      }
+    }
+
+    /** Decode, measure, derive (thumbnail + blur), store, and return the value to persist. */
+    async function processInput(args: any): Promise<ComputedImageData | null | undefined> {
+      const { resolvedFieldData: value, fieldKey, context } = args
+      if (value === undefined) return undefined
+      if (value === null) return null
+
+      if (typeof value !== 'object' || Array.isArray(value) || typeof (value as any).base64 !== 'string') {
+        throw new Error(`${PKG} ${fieldKey}: expected { base64: string, filename?: string } or null`)
+      }
+      const input = value as { base64: string; filename?: unknown }
+      const filename = typeof input.filename === 'string' && input.filename.length > 0 ? input.filename : null
+
+      const storage = context?.services?.storage
+      if (!storage) {
+        throw new Error(`${PKG} ${fieldKey}: context.services.storage is not configured — a storage service is required`)
+      }
+
+      const buffer = decodeBase64(input.base64, fieldKey)
+      const sharp = await loadSharp()
+
+      let metadata: any
+      try {
+        metadata = await sharp(buffer).metadata()
+      } catch (err) {
+        throw new Error(`${PKG} ${fieldKey}: could not read image (unsupported or corrupt): ${(err as Error)?.message ?? err}`)
+      }
+      const { width, height, format } = metadata ?? {}
+      if (typeof width !== 'number' || typeof height !== 'number' || typeof format !== 'string') {
+        throw new Error(`${PKG} ${fieldKey}: could not determine image dimensions/format`)
+      }
+
+      const id = randomBytes(12).toString('base64url')
+      const ext = format === 'jpeg' ? 'jpg' : format
+      const key = `${prefix}${id}.${ext}`
+      const contentType = CONTENT_TYPES[format] ?? `image/${format}`
+
+      const stored = await storage.put(key, buffer, { contentType, public: true })
+
+      let thumbnailKey: string | null = null
+      let thumbnailUrl: string | null = null
+      let blurDataUrl: string | null = null
+      try {
+        if (thumbnailWidth !== null) {
+          const thumbBuffer = await sharp(buffer)
+            .resize({ width: thumbnailWidth, withoutEnlargement: true })
+            .webp()
+            .toBuffer()
+          thumbnailKey = `${prefix}${id}.thumb.webp`
+          const storedThumb = await storage.put(thumbnailKey, thumbBuffer, {
+            contentType: 'image/webp',
+            public: true,
+          })
+          thumbnailUrl = storedThumb.url
+        }
+        if (blurEnabled) {
+          const blurBuffer = await sharp(buffer).resize(16).webp({ quality: 40 }).toBuffer()
+          blurDataUrl = `data:image/webp;base64,${blurBuffer.toString('base64')}`
+        }
+      } catch (err) {
+        // Don't leave orphaned objects behind when derivative generation fails mid-way.
+        await removeStored(context, { key, thumbnailKey })
+        throw err
+      }
+
+      return {
+        key,
+        url: stored.url,
+        thumbnailKey,
+        thumbnailUrl,
+        width,
+        height,
+        filesize: buffer.length,
+        format,
+        blurDataUrl,
+        filename,
+      }
+    }
+
+    // Compose our processing/cleanup with any hooks the user configured: our resolveInput runs
+    // first (turning the raw { base64 } input into the stored JSON), then the user's; the
+    // user's afterOperation runs first, then our storage cleanup (mirroring @nixxie-cms/cloudinary).
+    const userResolveInput = config.hooks?.resolveInput
+    const userAfterOperation = config.hooks?.afterOperation
+    const hooks: typeof config.hooks = {
+      ...config.hooks,
+      resolveInput: async (args: any) => {
+        const processed = await processInput(args)
+        const userHook =
+          typeof userResolveInput === 'function'
+            ? userResolveInput
+            : (userResolveInput as any)?.[args.operation]
+        if (!userHook) return processed
+        return userHook({
+          ...args,
+          resolvedFieldData: processed,
+          resolvedData: { ...args.resolvedData, [args.fieldKey]: processed },
+        })
+      },
+      afterOperation: async (args: any) => {
+        const userHook =
+          typeof userAfterOperation === 'function'
+            ? userAfterOperation
+            : (userAfterOperation as any)?.[args.operation]
+        await (userHook as any)?.(args)
+
+        if (args.operation === 'delete') {
+          await removeStored(args.context, args.originalItemField as ComputedImageData | null)
+        } else if (args.operation === 'update') {
+          const previous = args.originalItemField as ComputedImageData | null
+          const next = args.itemField as ComputedImageData | null
+          if (previous?.key && previous.key !== next?.key) {
+            await removeStored(args.context, previous)
+          }
+        }
+      },
+    }
+
+    const inputArg = g.arg({ type: g.JSON })
+
+    return fieldType({
+      kind: 'scalar',
+      mode: 'optional',
+      scalar: 'Json',
+      map: config.db?.map,
+    })({
+      ...config,
+      hooks,
+      __nxTelemetryFieldTypeName: '@nixxie-cms/fields-computed-image',
+      input: {
+        // The raw GraphQL input resolver does not receive context, so the value passes through
+        // here untouched; all storage work happens in the field-level resolveInput hook above.
+        create: { arg: inputArg },
+        update: { arg: inputArg },
+      },
+      output: g.field({
+        type: outputType,
+        resolve({ value }) {
+          if (value === null || typeof value !== 'object') return null
+          const val = value as any
+          if (typeof val.key !== 'string') return null
+          return {
+            thumbnailKey: null,
+            thumbnailUrl: null,
+            blurDataUrl: null,
+            filename: null,
+            ...val,
+          }
+        },
+      }),
+      views: '@nixxie-cms/core/fields/types/json/views',
+    })
+  }
+}