@pixerate/editor 0.104.0 → 0.106.0

package/dist/image-editor/index.js

@@ -10,6 +10,7 @@ import {
   ADJUSTMENT_KINDS,
   ADJUSTMENT_LUT_SIZE,
   AS_SHOT_KELVIN,
+  BROWSER_IMAGE_TYPES,
   D50,
   D65,
   DEFAULT_ADJUSTMENTS_VALUES,
@@ -244,6 +245,7 @@ import {
   setSmartFiltersEnabled,
   setSmartPlacement,
   shiftCoverage,
+  smartContentsFile,
   smartObjectLayers,
   smoothCoverage,
   srgbToLinear,
@@ -277,7 +279,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-NQLQ2JOI.js";
+} from "../chunk-4X5MIVCE.js";
 import {
   DEFAULT_GLOBAL_LIGHT,
   DIRECT_GAUSSIAN_MAX_SIGMA,
@@ -2992,39 +2994,6 @@ var FreeTransformSession = class {
 };
 
 // src/image-editor/controller.ts
-function prepareNestedForPsd(layers) {
-  const out = [];
-  for (const l of layers) {
-    if (l.type === "annotation") continue;
-    let next = l;
-    if (l.type === "group") next = { ...l, children: prepareNestedForPsd(l.children) };
-    else if (l.type === "smart") next = rasterizeSmartObject([l], l.id).layer;
-    else if (l.type === "pixel" && l.filters?.length) {
-      const p = { ...l };
-      if (l.filters.some(isActiveFilter)) {
-        const b = l.surface.bounds;
-        if (b) {
-          const r = { x: b.x + l.offset.x - 64, y: b.y + l.offset.y - 64, width: b.width + 128, height: b.height + 128 };
-          const plain3 = { ...l, visible: true, opacity: 1, blend: "normal" };
-          delete plain3.mask;
-          delete plain3.clipped;
-          delete plain3.effects;
-          delete plain3.fillOpacity;
-          const data = new LayerCompositor().composite([plain3], r, { width: r.x + r.width, height: r.y + r.height });
-          p.surface = surfaceFromPixels({ width: r.width, height: r.height, data }, 4, r.x - l.offset.x, r.y - l.offset.y);
-        }
-      }
-      delete p.filters;
-      next = p;
-    }
-    if (next.mask?.source) {
-      next = { ...next };
-      delete next.mask;
-    }
-    out.push(next);
-  }
-  return out;
-}
 var IMAGE_EDITOR_SCHEMA_VERSION = LAYERED_SCHEMA_VERSION;
 function paintCoverageInto(base, coverage, apply, rects) {
   const tiles = new Map(base.tiles);
@@ -3650,6 +3619,17 @@ var ImageEditorController = class {
     }
     return b ? { x: b.x + layer.offset.x, y: b.y + layer.offset.y, width: b.width, height: b.height } : null;
   }
+  /**
+   * A tight base64 PNG data URL of a pixel or smart layer's content, or `null` for an unknown or
+   * non-pixel layer, or when the layer is completely transparent.
+   */
+  getLayerDataURL(id) {
+    const layer = this.getLayer(id);
+    if (!layer || layer.type !== "pixel" && layer.type !== "smart") return null;
+    const surface = this.surfaceOf(layer);
+    const enc = encodeSurface(surface);
+    return enc ? enc.url : null;
+  }
   /**
    * Composites the layer stack in document space without a canvas (annotation layers need one
    * and are left out): `rect` (default: the canvas) as RGBA, straight alpha. Crop, rotation and
@@ -4392,20 +4372,13 @@ var ImageEditorController = class {
     const c = layer.contents;
     const base = c.name.replace(/\.\w+$/, "") || "Contents";
     if (c.file) {
-      const mime = { psd: "image/vnd.adobe.photoshop", psb: "image/vnd.adobe.photoshop", png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", tif: "image/tiff", tiff: "image/tiff", gif: "image/gif" };
+      const mime = { psd: "image/vnd.adobe.photoshop", psb: "image/vnd.adobe.photoshop", pdf: "application/pdf", ...BROWSER_IMAGE_TYPES };
       const ext = c.file.type.toLowerCase();
       return { name: /\.\w+$/.test(c.name) ? c.name : `${base}.${ext}`, mimeType: mime[ext] ?? "application/octet-stream", bytes: c.file.bytes };
     }
     if (!isContentsDecoded(c)) throw new LayerOperationError(`The contents of "${layer.name || id}" are not available here.`);
-    if (c.kind === "raster") {
-      const data = readRegion(contentsSurface(c), { x: 0, y: 0, width: c.width, height: c.height });
-      return { name: `${base}.png`, mimeType: "image/png", bytes: encodePng(c.width, c.height, data) };
-    }
-    const doc = c.document;
-    const merged = readRegion(contentsSurface(c), { x: 0, y: 0, width: c.width, height: c.height });
-    const prepared = prepareNestedForPsd(doc.layers);
-    const res = exportPsd({ width: c.width, height: c.height, layers: prepared, merged, patterns: doc.patterns, globalLight: doc.globalLight });
-    return { name: `${base}.${res.psb ? "psb" : "psd"}`, mimeType: "image/vnd.adobe.photoshop", bytes: res.bytes };
+    const f = smartContentsFile(c);
+    return { name: f.name, mimeType: f.name.endsWith(".png") ? "image/png" : "image/vnd.adobe.photoshop", bytes: f.bytes };
   }
   /**
    * Layer › Smart Objects › New Smart Object via Copy (`linked: false`: independent contents) or a
@@ -4485,11 +4458,13 @@ var ImageEditorController = class {
    */
   async prepareSmartObjects() {
     const pending = /* @__PURE__ */ new Map();
-    for (const l of flattenLayers(this.state.layers)) if (l.type === "smart" && !isContentsDecoded(l.contents) && l.contents.file) pending.set(l.contents.id, l.contents);
+    for (const l of flattenLayers(this.state.layers)) {
+      if (l.type === "smart" && !isContentsDecoded(l.contents) && l.contents.file && BROWSER_IMAGE_TYPES[l.contents.file.type]) pending.set(l.contents.id, l.contents);
+    }
     const left = [];
     for (const [cid, c] of pending) {
       try {
-        const url = `data:${c.file.type === "png" ? "image/png" : c.file.type === "gif" ? "image/gif" : c.file.type === "tif" || c.file.type === "tiff" ? "image/tiff" : "image/jpeg"};base64,${bytesToBase64(c.file.bytes)}`;
+        const url = `data:${BROWSER_IMAGE_TYPES[c.file.type]};base64,${bytesToBase64(c.file.bytes)}`;
         const px2 = await this.decodeImage(url);
         const decoded = { ...c, kind: "raster", raster: rasterContents(px2, c.name, cid).raster, width: px2.width, height: px2.height };
         const swap = (layers) => {
@@ -4841,6 +4816,15 @@ var ImageEditorController = class {
     byKey.set(key, thumb);
     return thumb;
   }
+  /**
+   * A small PNG data URL preview of a pixel or smart layer over the canvas (or of its mask with `mask: true`),
+   * longest side `maxSide` px; `null` for layers without pixels.
+   */
+  getLayerThumbnailDataURL(id, options = {}) {
+    const thumb = this.getLayerThumbnail(id, options);
+    if (!thumb) return null;
+    return pngDataUrl(thumb.width, thumb.height, thumb.data, 4);
+  }
   // --- Painting ---
   /** Brush settings, colours and tool options of the paint tools (view state, no undo). */
   setPaintOptions(options) {
@@ -6057,11 +6041,11 @@ var ImageEditorController = class {
         return out2;
       }
       if (layer.type === "smart") {
-        add2("Smart objects were written as pixel layers (their rendered pixels)", layer.name);
-        const px2 = rasterizeSmartObject([layer], layer.id).layer;
-        const mask2 = bakeMask(px2);
-        if (mask2) px2.mask = mask2;
-        return px2;
+        const out2 = { ...layer };
+        const mask2 = bakeMask(layer);
+        if (mask2) out2.mask = mask2;
+        else delete out2.mask;
+        return out2;
       }
       let out = { ...layer };
       if (layer.source === "document") {
@@ -6914,6 +6898,150 @@ function readAdjustmentControls(adjustments) {
   }
   return out;
 }
+var IMAGE_FILTER_PRESETS = [
+  {
+    id: "none",
+    label: "Original",
+    adjustments: {
+      brightness: 0,
+      contrast: 0,
+      saturation: 0,
+      exposure: 0,
+      temperature: 0,
+      tint: 0,
+      blur: 0,
+      opacity: 1
+    }
+  },
+  {
+    id: "dramatic",
+    label: "Dramatic",
+    adjustments: {
+      brightness: -5,
+      contrast: 45,
+      saturation: 20,
+      exposure: 5,
+      temperature: -10,
+      tint: 0
+    }
+  },
+  {
+    id: "cyberpunk",
+    label: "Cyberpunk",
+    adjustments: {
+      brightness: 5,
+      contrast: 35,
+      saturation: 55,
+      exposure: 0,
+      temperature: -25,
+      tint: 40
+    }
+  },
+  {
+    id: "vintage",
+    label: "Vintage",
+    adjustments: {
+      brightness: 8,
+      contrast: -15,
+      saturation: -35,
+      exposure: 5,
+      temperature: 35,
+      tint: 10
+    }
+  },
+  {
+    id: "warm",
+    label: "Warm",
+    adjustments: {
+      brightness: 5,
+      contrast: 10,
+      saturation: 15,
+      exposure: 0,
+      temperature: 45,
+      tint: 5
+    }
+  },
+  {
+    id: "cool",
+    label: "Cool",
+    adjustments: {
+      brightness: 0,
+      contrast: 15,
+      saturation: 10,
+      exposure: 0,
+      temperature: -45,
+      tint: -10
+    }
+  },
+  {
+    id: "grayscale",
+    label: "B&W",
+    adjustments: {
+      brightness: 0,
+      contrast: 20,
+      saturation: -100,
+      exposure: 0,
+      temperature: 0,
+      tint: 0
+    }
+  },
+  {
+    id: "noir",
+    label: "Noir",
+    adjustments: {
+      brightness: -15,
+      contrast: 65,
+      saturation: -100,
+      exposure: -5,
+      temperature: 0,
+      tint: 0
+    }
+  },
+  {
+    id: "fade",
+    label: "Fade",
+    adjustments: {
+      brightness: 15,
+      contrast: -25,
+      saturation: -20,
+      exposure: 10,
+      temperature: 10,
+      tint: 0
+    }
+  }
+];
+var IMAGE_CROP_PRESETS = [
+  { id: "free", label: "Free", aspectRatio: null },
+  { id: "1:1", label: "1:1", aspectRatio: 1 },
+  { id: "16:9", label: "16:9", aspectRatio: 16 / 9 },
+  { id: "4:3", label: "4:3", aspectRatio: 4 / 3 },
+  { id: "4:5", label: "4:5", aspectRatio: 4 / 5 },
+  { id: "9:16", label: "9:16", aspectRatio: 9 / 16 }
+];
+var DEPTH_MASK_CONTROLS = [
+  {
+    id: "near",
+    label: "Near Threshold",
+    section: "effects",
+    min: 0,
+    max: 255,
+    step: 1,
+    default: 0,
+    decimals: 0,
+    track: plain
+  },
+  {
+    id: "far",
+    label: "Far Threshold",
+    section: "effects",
+    min: 0,
+    max: 255,
+    step: 1,
+    default: 255,
+    decimals: 0,
+    track: plain
+  }
+];
 
 // src/image-editor/selection/tool-options.ts
 var SELECTION_TOOLS = [
@@ -8747,7 +8875,7 @@ function createImagePsdTools(controller) {
   const open = {
     name: "import_psd",
     title: "Open a PSD as the document",
-    description: "Opens a PSD / PSB as the document, replacing the current layers, crop and rotation (one undo step; undo brings the previous document back). Pixel, group and adjustment layers, masks, blend modes, opacity, fill, clipping, visibility, locks, layer effects (with the patterns and global light of the file) map directly; type, smart-object, fill and shape layers come in as their pixels; unsupported adjustments are left out. Returns the new layer tree with ids, the size and the warnings (each names the affected layers).",
+    description: "Opens a PSD / PSB as the document, replacing the current layers, crop and rotation (one undo step; undo brings the previous document back). Pixel, group and adjustment layers, masks, blend modes, opacity, fill, clipping, visibility, locks, layer effects (with the patterns and global light of the file) map directly; smart objects come in as smart objects (embedded contents, placement and warp, smart filters: Box Blur is drawn, other Photoshop filters are kept but not drawn, filter mask; linked contents as their stored pixels); type, fill and shape layers come in as their pixels; unsupported adjustments are left out. Returns the new layer tree with ids, the size and the warnings (each names the affected layers).",
     inputSchema: { type: "object", properties: { data: DATA }, required: ["data"], additionalProperties: false },
     annotations: { title: "Open a PSD as the document", ...DESTRUCTIVE4 },
     handler: ({ data }) => {
@@ -8766,7 +8894,7 @@ function createImagePsdTools(controller) {
   const save = {
     name: "export_psd",
     title: "Export the document as a PSD",
-    description: "Writes the document as an 8-bit RGB PSD (a PSB above 30000 px) with real layers, groups, adjustment layers, masks and layer effects (an effects block opened from a PSD is written back unchanged while its effects are; the patterns effects use are embedded), in the source frame (crop and rotation are not applied). Layer filters and depth masks are baked, annotation layers are rasterized (in a browser; elsewhere left out), and the merged image is the editor's composite. Changes nothing. Returns the file as base64, its size in bytes, whether it is a PSB, and warnings for everything that was changed or left out.",
+    description: "Writes the document as an 8-bit RGB PSD (a PSB above 30000 px) with real layers, groups, adjustment layers, masks and layer effects (an effects block opened from a PSD is written back unchanged while its effects are; the patterns effects use are embedded), in the source frame (crop and rotation are not applied). Smart objects are written as Photoshop smart objects (contents embedded once per linked set, placement, warp, smart filters and filter mask; a Develop smart filter has no Photoshop filter and is left out of the list). Layer filters and depth masks are baked, annotation layers are rasterized (in a browser; elsewhere left out), and the merged image is the editor's composite. Changes nothing. Returns the file as base64, its size in bytes, whether it is a PSB, and warnings for everything that was changed or left out.",
     inputSchema: { type: "object", properties: {}, additionalProperties: false },
     annotations: { title: "Export the document as a PSD", ...READ5 },
     handler: async () => {
@@ -10103,6 +10231,49 @@ function smartFilterRows(layer) {
   }));
   return rows.reverse();
 }
+function extractNormalizedLayerItems(controller, fallbackImageUrl = "") {
+  const state = controller.getState();
+  const ctrlLayers = controller.getLayers();
+  if (!ctrlLayers || ctrlLayers.length === 0) return [];
+  const serialized = controller.toJSON();
+  const assets = serialized.assets ?? {};
+  const allSerializedLayers = [];
+  const collectSerialized = (list) => {
+    for (const sl of list) {
+      allSerializedLayers.push(sl);
+      if (sl.children && Array.isArray(sl.children)) {
+        collectSerialized(sl.children);
+      }
+    }
+  };
+  collectSerialized(serialized.layers ?? []);
+  const sLayerMap = new Map(allSerializedLayers.map((sl) => [sl.id, sl]));
+  const imgW = state.imageDimensions?.width || 1;
+  const imgH = state.imageDimensions?.height || 1;
+  return ctrlLayers.map((l) => {
+    const bounds = controller.getLayerBounds(l.id) || {
+      x: 0,
+      y: 0,
+      width: imgW,
+      height: imgH
+    };
+    const sLayer = sLayerMap.get(l.id);
+    const assetKey = sLayer?.asset;
+    const layerDataUrl = assetKey && assets[assetKey] || assets[l.id] || (sLayer?.source === "document" ? fallbackImageUrl : "");
+    return {
+      id: l.id,
+      name: l.name || "Untitled Layer",
+      imageUrl: layerDataUrl || fallbackImageUrl,
+      thumbnailUrl: layerDataUrl || void 0,
+      visible: l.visible !== false,
+      opacity: l.opacity ?? 1,
+      x: imgW ? bounds.x / imgW : 0,
+      y: imgH ? bounds.y / imgH : 0,
+      width: imgW ? bounds.width / imgW : 1,
+      height: imgH ? bounds.height / imgH : 1
+    };
+  });
+}
 
 // src/image-editor/layers/effects-ui.ts
 function layerEffectsPanel(layer) {
@@ -10903,6 +11074,7 @@ export {
   DEFAULT_REFINE_EDGE_PARAMS,
   DEFAULT_SELECTION_TOOL_OPTIONS,
   DEFAULT_TRANSFORM,
+  DEPTH_MASK_CONTROLS,
   DEVELOP_FILTER_ID,
   DIRECT_GAUSSIAN_MAX_SIGMA,
   DabWalker,
@@ -10919,8 +11091,10 @@ export {
   HUE_RANGE_LABELS,
   IDENTITY_MATRIX3,
   IMAGE_ADJUSTMENT_CONTROLS,
+  IMAGE_CROP_PRESETS,
   IMAGE_EDITOR_SCHEMA_VERSION,
   IMAGE_EDITOR_STATE_VERSION,
+  IMAGE_FILTER_PRESETS,
   INTERPOLATIONS,
   ImageEditorController,
   ImageEditorRenderer,
@@ -11133,6 +11307,7 @@ export {
   evaluateAdjustmentLayers,
   expandCoverage,
   exportPsd,
+  extractNormalizedLayerItems,
   featherCoverage,
   fillRect,
   filterMaskCoverage,