@pixerate/editor 0.108.0 → 0.109.0

package/dist/image-editor/index.js

@@ -10,12 +10,17 @@ import {
   ADJUSTMENT_KINDS,
   ADJUSTMENT_LUT_SIZE,
   AS_SHOT_KELVIN,
+  BACKGROUND_LAYER_ID,
+  BACKGROUND_LAYER_NAME,
+  BLUR_FILTER_ID,
   BROWSER_IMAGE_TYPES,
   D50,
   D65,
   DEFAULT_ADJUSTMENTS_VALUES,
   DEFAULT_DEPTH_MASK_VALUES,
+  DEFAULT_MITER_LIMIT,
   DEFAULT_TRANSFORM_VALUES,
+  DEVELOP_FILTER_ID,
   EMPTY_DISTANCE,
   FREE_TRANSFORM_MODES,
   HUE_RANGE_LABELS,
@@ -23,6 +28,7 @@ import {
   LATEST_PROCESS_VERSION,
   LAYERED_SCHEMA_VERSION,
   LEGACY_PROCESS_VERSION,
+  LIVE_SHAPE_KINDS,
   LUMA_709,
   LayerCompositor,
   LayerOperationError,
@@ -34,6 +40,8 @@ import {
   PsdError,
   SELECTION_MODES,
   SELECTION_MODIFY_OPS,
+  SHAPE_OPERATIONS,
+  SHAPE_RENDER_MARGIN,
   SMART_RENDER_MARGIN,
   SUPPORTED_ADJUSTMENT_KEYS,
   TINT_SCALE,
@@ -49,7 +57,13 @@ import {
   adjustmentKindLabel,
   adjustmentLayersKey,
   adjustmentNodeAsLayer,
+  adjustmentNodeFromLegacy,
   anchorPoint,
+  annotationBlend,
+  annotationLayerFor,
+  annotationLayerName,
+  annotationOfLayer,
+  annotationOfShape,
   applyAdjustmentLayers,
   applyAdjustments,
   applyBoxBlur,
@@ -60,6 +74,7 @@ import {
   applyParams,
   applyProcess2Adjustments,
   applySmartFilters,
+  backgroundLayer,
   blackWhiteGray,
   blurFilter,
   borderCoverage,
@@ -73,6 +88,7 @@ import {
   colorBalanceChannel,
   combineSelections,
   compileAdjustmentLayer,
+  componentPath,
   computeSelectionBounds,
   contentsBox,
   contentsSurface,
@@ -83,6 +99,7 @@ import {
   coverageToByte,
   createAdjustmentLayer,
   createSelectionMask,
+  createShapeLayer,
   curveLutFromLevels,
   decodeLayerChannel,
   decodeLayerMask,
@@ -91,7 +108,9 @@ import {
   decodePngDataUrl,
   decodeSelectionRle,
   defaultAdjustmentParams,
+  defaultShapeName,
   depthMaskAlpha,
+  depthRasterMask,
   describeTransform,
   deserializeEffects,
   deserializeLayer,
@@ -99,6 +118,8 @@ import {
   deserializePatterns,
   deserializeSelection,
   developFilter,
+  developFromAdjustments,
+  developTarget,
   distanceTransform,
   documentContents,
   duplicateLayer,
@@ -110,6 +131,7 @@ import {
   exportPsd,
   featherCoverage,
   filterMaskCoverage,
+  flattenPath,
   flipCorners,
   fullSelection,
   geometryHomography,
@@ -120,6 +142,7 @@ import {
   getViewportProjection,
   greyMorphology,
   groupLayers,
+  hasResampledLegacyMask,
   hasSurface,
   hasWarp,
   hashMaskContent,
@@ -141,8 +164,11 @@ import {
   isActiveFilter,
   isAdjustmentKind,
   isContentsDecoded,
+  isDefaultDepthMask,
   isIdentityTransform,
+  isLegacyShape,
   isQuarterTurnSwapped,
+  isRenderedLayer,
   isSelectionEmpty,
   isSelectionMode,
   isSpatialFilter,
@@ -156,12 +182,20 @@ import {
   layerName,
   layerTree,
   layerTypeLabel,
+  layersFromLegacy,
+  legacyAdjustmentLayer,
+  legacyMaskOf,
+  legacyView,
   levelsValue,
   linearSrgbToXy,
   linearToSrgb,
+  liveComponent,
+  liveShapeSubpaths,
   mapCropHandle,
+  mapSubpaths,
   matrixFromCorners,
   matrixFromParams,
+  mergeShapeComponents,
   modifySelection,
   moveLayer,
   moveSmartFilter,
@@ -174,13 +208,19 @@ import {
   normalizeAngle,
   normalizeFilter,
   normalizeLayerMask,
+  normalizeLiveShape,
   normalizePlacement,
   normalizeProcessVersion,
+  normalizeShapePaint,
+  normalizeShapeStroke,
   normalizeSmartFilter,
+  normalizeSubpaths,
   offsetLayer,
+  offsetShape,
   offsetSmartObject,
   parseAdjustmentBlock,
   parseBlend,
+  parseCssColor,
   parseLfx2,
   parseLrfx,
   parsePatternBlock,
@@ -203,6 +243,8 @@ import {
   psdToLayers,
   rangeLightness,
   rasterContents,
+  rasterMaskFromLegacy,
+  rasterizeCoverage,
   rasterizeSmartObject,
   readPsd,
   referencePoint,
@@ -211,12 +253,17 @@ import {
   removeLayerEffect,
   removeLayerFilter,
   removeSmartFilter,
+  renderShape,
+  renderShapeRect,
   renderSmartObject,
   replaceContents,
   requireLayer,
+  requireOperation,
+  requireShapeLayer,
   requireSmartObject,
   requireUnlocked,
   rerender,
+  rerenderShape,
   resizeSelection,
   resolveExternalAssets,
   rgbToGray,
@@ -244,6 +291,12 @@ import {
   setSmartFilterMask,
   setSmartFiltersEnabled,
   setSmartPlacement,
+  shapeAsPixelLayer,
+  shapeFromAnnotation,
+  shapeGeometryBounds,
+  shapeLayers,
+  shapeOutline,
+  shapeRenderClip,
   shiftCoverage,
   smartContentsFile,
   smartObjectLayers,
@@ -255,6 +308,7 @@ import {
   toneLuts,
   transformHomography,
   transformMap,
+  transformShapeComponents,
   transformedBox,
   transformedPoint,
   ungroupLayer,
@@ -263,6 +317,7 @@ import {
   updateLayerEffect,
   updateLayerFilter,
   updateLayerMaskProps,
+  updateShapeLayer,
   updateSmartFilter,
   uvToXy,
   versionedDescriptorBytes,
@@ -279,7 +334,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-SOROZ2BF.js";
+} from "../chunk-RE77QYUF.js";
 import {
   DEFAULT_GLOBAL_LIGHT,
   DIRECT_GAUSSIAN_MAX_SIGMA,
@@ -343,7 +398,7 @@ import {
   validateLayerEffect,
   validateLayerEffects,
   warpSurface
-} from "../chunk-G4BIYE6R.js";
+} from "../chunk-CFMWALBM.js";
 import {
   applyHomography,
   boxQuad,
@@ -444,6 +499,7 @@ import {
   multiplyMatrices,
   pullWarpMesh,
   resizeWarpMesh,
+  roundSubpaths,
   translateMatrix,
   warpMeshColumns,
   warpMeshEditPoints,
@@ -451,7 +507,10 @@ import {
   warpMeshParamAt,
   warpMeshRows,
   warpPresetMesh
-} from "../chunk-KKREERP2.js";
+} from "../chunk-BLWCAQCW.js";
+import "../chunk-YCSFS3GK.js";
+import "../chunk-ZRJMJIQU.js";
+import "../chunk-TGD52FEZ.js";
 
 // src/image-editor/histogram.ts
 var HISTOGRAM_BINS = 256;
@@ -554,249 +613,6 @@ function quickMaskPixels(mask, style = {}) {
   return out;
 }
 
-// src/image-editor/layers/migrate.ts
-var BACKGROUND_LAYER_ID = "background";
-var BACKGROUND_LAYER_NAME = "Background";
-var DEVELOP_FILTER_ID = "develop";
-var BLUR_FILTER_ID = "blur";
-var legacyMaskMemo = /* @__PURE__ */ new WeakMap();
-function rasterMaskFromLegacy(mask, width, height) {
-  const sel = decodeLayerMask(mask);
-  if (!sel) return null;
-  const sized = sel.width === width && sel.height === height ? sel : resizeSelection(sel, width, height);
-  const surface = surfaceFromPixels({ width, height, data: sized.data }, 1, 0, 0, 0);
-  legacyMaskMemo.set(surface, { width: mask.width, height: mask.height, rle: mask.rle });
-  const out = { surface, defaultValue: 0 };
-  if (mask.density !== void 0 && mask.density !== 1) out.density = mask.density;
-  if (mask.feather) out.feather = mask.feather;
-  if (mask.enabled === false) out.enabled = false;
-  return out;
-}
-function hasResampledLegacyMask(layers, width, height) {
-  for (const l of layers) {
-    if (l.type !== "adjustment" || !l.mask) continue;
-    const memo = legacyMaskMemo.get(l.mask.surface);
-    if (memo && (memo.width !== width || memo.height !== height)) return true;
-  }
-  return false;
-}
-function legacyMaskOf(mask, width, height) {
-  let memo = legacyMaskMemo.get(mask.surface);
-  if (!memo) {
-    const data = readRegion(mask.surface, { x: 0, y: 0, width, height });
-    memo = { width, height, rle: encodeSelectionRle(new Uint8Array(data.buffer, data.byteOffset, data.length)) };
-    legacyMaskMemo.set(mask.surface, memo);
-  }
-  return normalizeLayerMask({ ...memo, density: mask.density, feather: mask.feather, enabled: mask.enabled });
-}
-function sameJson(a, b) {
-  return JSON.stringify(a) === JSON.stringify(b);
-}
-function isDefaultDepthMask(mask) {
-  if (!mask) return true;
-  return sameJson({ ...DEFAULT_DEPTH_MASK_VALUES, ...mask, depthRange: [...mask.depthRange ?? []] }, DEFAULT_DEPTH_MASK_VALUES);
-}
-function developFromAdjustments(adjustments) {
-  return {
-    id: DEVELOP_FILTER_ID,
-    kind: "develop",
-    enabled: true,
-    brightness: adjustments.brightness ?? 0,
-    contrast: adjustments.contrast ?? 0,
-    saturation: adjustments.saturation ?? 0,
-    exposure: adjustments.exposure ?? 0,
-    temperature: adjustments.temperature ?? 0,
-    tint: adjustments.tint ?? 0,
-    process: normalizeProcessVersion(adjustments.process)
-  };
-}
-function annotationLayerName(annotation) {
-  switch (annotation.type) {
-    case "pen":
-      return "Pen";
-    case "rect":
-      return "Rectangle";
-    case "circle":
-      return "Ellipse";
-    case "arrow":
-      return "Arrow";
-    case "line":
-      return "Line";
-    case "text":
-      return annotation.text ? annotation.text.slice(0, 32) : "Text";
-    case "image":
-      return "Image";
-  }
-}
-function annotationLayerFor(annotation) {
-  return {
-    type: "annotation",
-    id: annotation.id,
-    name: annotationLayerName(annotation),
-    visible: true,
-    opacity: 1,
-    blend: "normal",
-    annotation
-  };
-}
-function adjustmentNodeFromLegacy(layer, width, height) {
-  const node = {
-    type: "adjustment",
-    id: layer.id,
-    name: layer.name ?? "",
-    visible: layer.enabled !== false,
-    opacity: layer.opacity ?? 1,
-    blend: layer.blend ?? "normal",
-    kind: layer.kind,
-    params: JSON.parse(JSON.stringify(layer.params))
-  };
-  if (layer.mask) {
-    const mask = rasterMaskFromLegacy(layer.mask, width, height);
-    if (mask) node.mask = mask;
-  }
-  return node;
-}
-function backgroundLayer(filters = [], mask) {
-  const layer = {
-    type: "pixel",
-    id: BACKGROUND_LAYER_ID,
-    name: BACKGROUND_LAYER_NAME,
-    visible: true,
-    opacity: 1,
-    blend: "normal",
-    surface: emptySurface(4),
-    offset: { x: 0, y: 0 },
-    source: "document",
-    filters
-  };
-  if (mask) layer.mask = mask;
-  return layer;
-}
-function depthRasterMask(source) {
-  const out = {
-    surface: emptySurface(1, 255),
-    defaultValue: 255,
-    source: { ...source, depthRange: [...source.depthRange] }
-  };
-  if (!source.enabled) out.enabled = false;
-  return out;
-}
-function layersFromLegacy(parts, width, height) {
-  const stored = parts.adjustments;
-  const adjustments = stored ? { ...DEFAULT_ADJUSTMENTS_VALUES, ...stored, process: normalizeProcessVersion(stored.process) } : { ...DEFAULT_ADJUSTMENTS_VALUES };
-  const adjLayers = normalizeAdjustmentLayers(adjustments.layers);
-  const filters = [developFromAdjustments(adjustments)];
-  const blur = typeof adjustments.blur === "number" && adjustments.blur > 0 ? adjustments.blur : 0;
-  let legacyOutputBlur;
-  if (blur > 0) {
-    if (adjLayers.length) legacyOutputBlur = blur;
-    else filters.push({ id: BLUR_FILTER_ID, kind: "blur", enabled: true, radius: blur });
-  }
-  const depth = parts.depthMask;
-  const mask = depth && !isDefaultDepthMask(depth) ? depthRasterMask({ ...DEFAULT_DEPTH_MASK_VALUES, ...depth }) : void 0;
-  const layers = [backgroundLayer(filters, mask)];
-  for (const l of adjLayers) layers.push(adjustmentNodeFromLegacy(l, width, height));
-  for (const a of parts.annotations ?? []) layers.push(annotationLayerFor(JSON.parse(JSON.stringify(a))));
-  const out = { layers, outputOpacity: typeof adjustments.opacity === "number" ? adjustments.opacity : 1 };
-  if (legacyOutputBlur !== void 0) out.legacyOutputBlur = legacyOutputBlur;
-  return out;
-}
-function legacyAdjustmentLayer(node, width, height) {
-  const out = {
-    id: node.id,
-    kind: node.kind,
-    enabled: node.visible,
-    opacity: node.opacity,
-    blend: node.blend,
-    params: node.params
-  };
-  if (node.name) out.name = node.name;
-  if (node.mask && !node.mask.source) out.mask = legacyMaskOf(node.mask, width, height);
-  return out;
-}
-function developTarget(layers, activeLayerId) {
-  const pixels = [];
-  const walk = (list) => {
-    for (const l of list) {
-      if (l.type === "pixel") pixels.push(l);
-      else if (l.type === "group") walk(l.children);
-    }
-  };
-  walk(layers);
-  if (activeLayerId) {
-    const active = pixels.find((l) => l.id === activeLayerId);
-    if (active) return active;
-  }
-  return pixels.find((l) => l.source === "document") ?? pixels.find((l) => l.id === BACKGROUND_LAYER_ID) ?? pixels[0] ?? null;
-}
-var isPlain = (l) => l.visible && l.opacity === 1 && l.blend === "normal" && !l.clipped && !l.mask && !l.locks && !l.effects;
-function legacyView(stack, width, height, activeLayerId = null) {
-  const { layers } = stack;
-  const target = developTarget(layers, activeLayerId);
-  const develop = target ? developFilter(target) : void 0;
-  const blur = stack.legacyOutputBlur ?? (target ? blurFilter(target)?.radius : void 0) ?? 0;
-  const adjustments = {
-    ...DEFAULT_ADJUSTMENTS_VALUES,
-    ...develop ? {
-      brightness: develop.brightness,
-      contrast: develop.contrast,
-      saturation: develop.saturation,
-      exposure: develop.exposure,
-      temperature: develop.temperature,
-      tint: develop.tint ?? 0
-    } : {},
-    blur,
-    opacity: stack.outputOpacity,
-    process: develop ? normalizeProcessVersion(develop.process) : DEFAULT_ADJUSTMENTS_VALUES.process
-  };
-  const adjNodes = [];
-  const annotations = [];
-  const walk = (list) => {
-    for (const l of list) {
-      if (l.type === "adjustment") adjNodes.push(l);
-      else if (l.type === "annotation") annotations.push(l.annotation);
-      else if (l.type === "group") walk(l.children);
-    }
-  };
-  walk(layers);
-  if (adjNodes.length) adjustments.layers = adjNodes.map((n) => legacyAdjustmentLayer(n, width, height));
-  const depthSource = target?.mask?.source;
-  const depthMask = depthSource ? { ...depthSource, depthRange: [...depthSource.depthRange] } : { ...DEFAULT_DEPTH_MASK_VALUES, depthRange: [...DEFAULT_DEPTH_MASK_VALUES.depthRange] };
-  return { adjustments, depthMask, annotations, exact: isLegacyShape(stack) };
-}
-function isLegacyShape(stack) {
-  const { layers } = stack;
-  const bg = layers[0];
-  if (!bg || bg.type !== "pixel" || bg.source !== "document") return false;
-  if (bg.id !== BACKGROUND_LAYER_ID || bg.name !== BACKGROUND_LAYER_NAME) return false;
-  if (!bg.visible || bg.opacity !== 1 || bg.blend !== "normal" || bg.clipped || bg.locks || bg.effects) return false;
-  if ((bg.fillOpacity ?? 1) !== 1 || bg.offset.x !== 0 || bg.offset.y !== 0) return false;
-  const filters = bg.filters ?? [];
-  if (filters.length < 1 || filters.length > 2) return false;
-  const [develop, blur] = filters;
-  if (develop.kind !== "develop" || !develop.enabled || develop.id !== DEVELOP_FILTER_ID) return false;
-  if (blur && (blur.kind !== "blur" || !blur.enabled || blur.id !== BLUR_FILTER_ID || !(blur.radius > 0))) return false;
-  if (bg.mask) {
-    const m = bg.mask;
-    if (!m.source || m.density !== void 0 || m.feather !== void 0) return false;
-    if (m.enabled !== false !== m.source.enabled) return false;
-  }
-  let i = 1;
-  let adjustments = 0;
-  for (; i < layers.length && layers[i].type === "adjustment"; i++) {
-    const l = layers[i];
-    if (l.clipped || l.locks || l.mask?.source || l.effects) return false;
-    adjustments++;
-  }
-  for (; i < layers.length; i++) {
-    const l = layers[i];
-    if (l.type !== "annotation" || !isPlain(l) || l.id !== l.annotation.id || l.name !== annotationLayerName(l.annotation)) return false;
-  }
-  if (blur && adjustments) return false;
-  if (stack.legacyOutputBlur !== void 0 && (!adjustments || !(stack.legacyOutputBlur > 0))) return false;
-  return true;
-}
-
 // src/image-editor/layers/render.ts
 function isQuarterTurn(rotate) {
   return normalizeAngle(rotate) % 90 === 0;
@@ -871,17 +687,28 @@ function needsLegacyBase(input) {
   if (hasResampledLegacyMask(stack.layers, canvas.width, canvas.height)) return true;
   return false;
 }
-var isPlainAnnotation = (l) => l.type === "annotation" && l.opacity === 1 && l.blend === "normal" && !l.clipped && !l.mask;
+var isPlainAnnotation = (l) => l.type === "annotation" ? l.opacity === 1 && l.blend === "normal" && !l.clipped && !l.mask : l.type === "shape" && Boolean(l.annotation) && l.opacity === 1 && l.blend === (l.annotation.blend ?? "normal") && !l.clipped && !l.mask && !l.effects && (l.fillOpacity ?? 1) === 1;
+var overlayViews = /* @__PURE__ */ new WeakMap();
+function overlayView(l) {
+  if (l.type === "annotation") return l;
+  let view = overlayViews.get(l);
+  if (!view) {
+    const shape = l;
+    view = { type: "annotation", id: shape.id, name: shape.name, visible: shape.visible, opacity: 1, blend: "normal", annotation: shape.annotation };
+    overlayViews.set(l, view);
+  }
+  return view;
+}
 function splitOverlayAnnotations(layers) {
   let i = layers.length;
   while (i > 0) {
     const l = layers[i - 1];
-    if (l.type === "annotation" && (!l.visible || isPlainAnnotation(l))) i--;
+    if ((l.type === "annotation" || l.type === "shape" && l.annotation) && (!l.visible || isPlainAnnotation(l))) i--;
     else break;
   }
   return {
     composite: layers.slice(0, i),
-    overlay: layers.slice(i).filter((l) => l.visible)
+    overlay: layers.slice(i).filter((l) => l.visible).map(overlayView)
   };
 }
 function coveringRect(region) {
@@ -2672,7 +2499,7 @@ var FreeTransformSession = class {
     }
     const targetId = init.layerId ?? host.activeLayerId();
     const target = targetId && content !== "selection-outline" ? findLayer(host.layers(), targetId)?.layer : void 0;
-    const smartTarget = target?.type === "smart" && (init.channel ?? (target.id === host.activeLayerId() ? host.activeTarget() : "pixels")) !== "mask";
+    const smartTarget = (target?.type === "smart" || target?.type === "shape") && (init.channel ?? (target.id === host.activeLayerId() ? host.activeTarget() : "pixels")) !== "mask";
     if (content === "auto") content = selected && !smartTarget ? "selection" : "layer";
     this.content = content;
     if (content !== "layer" && !selected) fail(`Nothing is selected; ${content} needs a selection. Select first, or use content layer.`);
@@ -2699,7 +2526,7 @@ var FreeTransformSession = class {
       const linked = mask?.linked !== false;
       const maskAlone = channel === "mask" && (!linked || layer.type !== "pixel");
       if (channel === "mask" && !mask) fail(layer.mask?.source ? `Layer "${layer.name || id}" has a depth mask, which is generated, not transformed.` : `Layer "${layer.name || id}" has no mask to transform; add one with add_layer_mask, or transform its pixels.`);
-      if (!maskAlone && layer.type !== "pixel" && layer.type !== "smart") fail(`Layer "${layer.name || id}" is a ${layer.type} layer; Free Transform works on pixel layers, smart objects, layer masks (channel mask) and selections.`);
+      if (!maskAlone && layer.type !== "pixel" && layer.type !== "smart" && layer.type !== "shape") fail(`Layer "${layer.name || id}" is a ${layer.type} layer; Free Transform works on pixel, shape and smart object layers, layer masks (channel mask) and selections.`);
       if (!layer.visible && content !== "selection-copy") fail(`Layer "${layer.name || id}" is hidden; show it before you transform it.`);
       if (content !== "selection-copy") {
         requireUnlocked(layer, "position", "transform it");
@@ -2721,7 +2548,21 @@ var FreeTransformSession = class {
         this.shown = this.startLayers;
         return;
       }
-      if (maskAlone) {
+      if (layer.type === "shape" && !maskAlone) {
+        if (content !== "layer") fail(`Layer "${layer.name || id}" is a shape layer, which transforms as a whole; use content layer (or rasterize it to transform part of it).`);
+        const g = shapeGeometryBounds(layer);
+        if (!g) fail(`Shape layer "${layer.name || id}" has no path to transform.`);
+        const w = Math.max(g.width, 1);
+        const h = Math.max(g.height, 1);
+        box = { x: g.x + (g.width - w) / 2, y: g.y + (g.height - h) / 2, width: w, height: h };
+        this.shape = layer;
+        this.shapeLayer = true;
+        moves.push("pixels");
+        if (mask && linked) {
+          this.parts.push({ what: "mask", offset: o, moving: mask.surface, base: null, reduced: /* @__PURE__ */ new Map() });
+          moves.push("mask");
+        }
+      } else if (maskAlone) {
         if (content === "selection-copy") fail("Layer via Copy copies pixels; transform a mask with content layer or selection.");
         if (content === "selection") {
           const { lifted, rest } = liftMask(mask.surface, sel, o);
@@ -2806,6 +2647,9 @@ var FreeTransformSession = class {
   startGeometry;
   /** True when the layer is a smart object (the transform sets its placement). */
   smartObject = false;
+  /** True when the layer is a shape layer (the transform maps its paths and renders them again). */
+  shapeLayer = false;
+  shape = null;
   geometryValue;
   smart = null;
   smartReduced = /* @__PURE__ */ new Map();
@@ -2871,6 +2715,7 @@ var FreeTransformSession = class {
     let layers = this.startLayers;
     let selection = this.startSelection;
     const targetId = this.copyId ?? this.layerId;
+    if (this.shape) layers = this.resampleShape(final, preview, warp ? f : null, h);
     for (const part of this.parts) {
       const o = part.offset;
       let moved;
@@ -2922,6 +2767,24 @@ var FreeTransformSession = class {
     }
     return { layers, selection };
   }
+  /**
+   * A shape with its paths mapped through the current geometry and rendered again (live shapes
+   * stay live under an affine map; perspective and warps turn them into plain paths). Previews
+   * render only the visible part.
+   */
+  resampleShape(final, preview, warpMap, h) {
+    const layer = this.shape;
+    let components = layer.components;
+    if (!isIdentityTransform(this.geometryValue)) {
+      const affine = !warpMap && h && Math.abs(h[6]) < 1e-12 && Math.abs(h[7]) < 1e-12 && Math.abs(h[8] - 1) < 1e-12 ? [h[0], h[3], h[1], h[4], h[2], h[5]] : void 0;
+      const map = warpMap ?? ((p) => h ? applyHomography(h, p) : p);
+      components = transformShapeComponents(layer.components, (p) => map(p) ?? p, affine);
+    }
+    const moved = { ...layer, components };
+    delete moved.annotation;
+    const surface = renderShape(moved, this.host.shapeEnv(), final ? {} : { clip: preview.clip });
+    return mapLayer(this.startLayers, layer.id, () => ({ ...moved, surface }));
+  }
   /** A smart object re-rendered from its contents for the current geometry (previews leave the smart filters out). */
   resampleSmart(final, preview) {
     const layer = this.smart;
@@ -2982,7 +2845,7 @@ var FreeTransformSession = class {
     const id = this.copyId ?? this.layerId;
     const layer = id ? findLayer(layers, id)?.layer : void 0;
     if (this.moves.includes("pixels") && layer?.type === "pixel") bounds = toDoc(contentBounds(this.host.pixelsOf(layer)), layer.offset);
-    else if (this.moves.includes("pixels") && layer?.type === "smart") bounds = contentBounds(layer.surface);
+    else if (this.moves.includes("pixels") && (layer?.type === "smart" || layer?.type === "shape")) bounds = contentBounds(layer.surface);
     else if (this.moves.includes("mask") && layer?.mask) bounds = toDoc(contentBounds(layer.mask.surface), layer.type === "pixel" ? layer.offset : { x: 0, y: 0 });
     else if (this.moves.includes("selection")) bounds = selection?.bounds ? { ...selection.bounds } : null;
     return {
@@ -3601,7 +3464,7 @@ var ImageEditorController = class {
    */
   getLayerPixels(id) {
     const layer = this.getLayer(id);
-    if (!layer || layer.type !== "pixel" && layer.type !== "smart") return null;
+    if (!layer || !hasSurface(layer)) return null;
     const surface = this.surfaceOf(layer);
     const b = contentBounds(surface);
     if (!b) return null;
@@ -3614,7 +3477,7 @@ var ImageEditorController = class {
    */
   getLayerBounds(id) {
     const layer = this.getLayer(id);
-    if (!layer || layer.type !== "pixel" && layer.type !== "smart") return null;
+    if (!layer || !hasSurface(layer)) return null;
     const surface = this.surfaceOf(layer);
     let b = this.boundsCache.get(surface);
     if (b === void 0) {
@@ -3629,7 +3492,7 @@ var ImageEditorController = class {
    */
   getLayerDataURL(id) {
     const layer = this.getLayer(id);
-    if (!layer || layer.type !== "pixel" && layer.type !== "smart") return null;
+    if (!layer || !hasSurface(layer)) return null;
     const surface = this.surfaceOf(layer);
     const enc = encodeSurface(surface);
     return enc ? enc.url : null;
@@ -3674,9 +3537,9 @@ var ImageEditorController = class {
     }
     return String(id);
   }
-  /** The pixels a pixel layer or smart object composites (the decoded source for the Background). */
+  /** The pixels a pixel layer, smart object or shape composites (the decoded source for the Background). */
   surfaceOf(layer) {
-    if (layer.type === "smart" || layer.source !== "document") return layer.surface;
+    if (layer.type !== "pixel" || layer.source !== "document") return layer.surface;
     return this.sourceSurface() ?? layer.surface;
   }
   /**
@@ -3859,7 +3722,7 @@ var ImageEditorController = class {
   removeLayer(id) {
     const next = removeLayer(this.state.layers, id);
     this.commitLayers(next, () => {
-      if (this.state.selectedAnnotationId && !flattenLayers(next).some((l) => l.type === "annotation" && l.annotation.id === this.state.selectedAnnotationId)) {
+      if (this.state.selectedAnnotationId && !flattenLayers(next).some((l) => annotationOfLayer(l)?.id === this.state.selectedAnnotationId)) {
         this.state.selectedAnnotationId = null;
       }
     });
@@ -3929,6 +3792,19 @@ var ImageEditorController = class {
       const moved = findLayer(this.state.layers, id).layer;
       return { offset: { x: Math.round(moved.placement.corners[0].x), y: Math.round(moved.placement.corners[0].y) }, bounds: this.getLayerBounds(id) };
     }
+    if (layer.type === "shape") {
+      const g = shapeGeometryBounds(layer) ?? { x: 0, y: 0 };
+      const dx = move.x !== void 0 ? move.x - g.x : move.dx ?? 0;
+      const dy = move.y !== void 0 ? move.y - g.y : move.dy ?? 0;
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) throw new LayerOperationError("x and y must be numbers.");
+      requireUnlocked(layer, "position", "move it");
+      let moved = offsetShape(layer, dx, dy, this.shapeEnv());
+      const mask = layer.mask;
+      if (mask && mask.linked !== false && !mask.source && (Math.round(dx) || Math.round(dy))) moved = { ...moved, mask: { ...mask, surface: translateSurface(mask.surface, Math.round(dx), Math.round(dy)) } };
+      this.commitLayers(mapLayer(this.state.layers, id, () => moved), void 0, commitToHistory);
+      const b = shapeGeometryBounds(moved) ?? { x: 0, y: 0 };
+      return { offset: { x: Math.round(b.x), y: Math.round(b.y) }, bounds: this.getLayerBounds(id) };
+    }
     const current = layer.type === "pixel" ? layer.offset : { x: 0, y: 0 };
     const x = move.x ?? current.x + (move.dx ?? 0);
     const y = move.y ?? current.y + (move.dy ?? 0);
@@ -4076,6 +3952,7 @@ var ImageEditorController = class {
       selection: () => this.state.selection?.bounds ? this.state.selection : null,
       canvas: () => this.naturalSize,
       pixelsOf: (layer) => this.surfaceOf(layer),
+      shapeEnv: () => this.shapeEnv(),
       capture: () => this.captureHistoryEntry(),
       show: (layers, selection, active) => {
         this.state.layers = layers;
@@ -4680,7 +4557,7 @@ var ImageEditorController = class {
   paintBounds(layer) {
     const { width, height } = this.naturalSize;
     const canvas = { x: 0, y: 0, width, height };
-    if (layer.type === "pixel") return this.getLayerBounds(layer.id) ?? { x: 0, y: 0, width: 0, height: 0 };
+    if (hasSurface(layer)) return this.getLayerBounds(layer.id) ?? { x: 0, y: 0, width: 0, height: 0 };
     if (layer.type === "annotation") {
       const b = getAnnotationBounds(layer.annotation);
       const pad = 4 + ("strokeWidth" in layer.annotation ? layer.annotation.strokeWidth : 0);
@@ -4791,7 +4668,7 @@ var ImageEditorController = class {
     const k = Math.min(1, side / Math.max(width, height));
     const tw = Math.max(1, Math.round(width * k));
     const th = Math.max(1, Math.round(height * k));
-    const surface = options.mask ? layer.mask && !layer.mask.source ? layer.mask.surface : null : layer.type === "pixel" || layer.type === "smart" ? this.surfaceOf(layer) : null;
+    const surface = options.mask ? layer.mask && !layer.mask.source ? layer.mask.surface : null : hasSurface(layer) ? this.surfaceOf(layer) : null;
     if (!surface) return null;
     const ox = layer.type === "pixel" ? layer.offset.x : 0;
     const oy = layer.type === "pixel" ? layer.offset.y : 0;
@@ -4895,6 +4772,7 @@ var ImageEditorController = class {
       requireUnlocked(layer, "all", action);
     } else {
       if (layer.type === "smart") throw new LayerOperationError(`Layer "${layer.name || id}" is a smart object; its pixels come from its contents. Rasterize it (rasterize_smart_object), edit its contents (edit_smart_object_contents), or ${action} on its mask or filter mask.`);
+      if (layer.type === "shape") throw new LayerOperationError(`Layer "${layer.name || id}" is a shape layer; its pixels are drawn from its paths. Rasterize it first (rasterize_layer), or ${action} on its mask (channel mask).`);
       if (layer.type !== "pixel") throw new LayerOperationError(`Layer "${layer.name || id}" is a ${layer.type} layer; ${action} on a pixel layer, or on this layer's mask (channel mask).`);
       requireUnlocked(layer, "pixels", action);
     }
@@ -5598,17 +5476,21 @@ var ImageEditorController = class {
     this.notify();
   }
   // --- Annotations & Layers ---
+  /** The layer showing annotation `id`: an annotation layer, or a shape layer migrated from it. */
   annotationLayer(id) {
-    return flattenLayers(this.state.layers).find(
-      (l) => l.type === "annotation" && l.annotation.id === id
-    );
+    return flattenLayers(this.state.layers).find((l) => (l.type === "annotation" || l.type === "shape") && annotationOfLayer(l)?.id === id);
   }
-  /** Adds an annotation as its own layer (top of the stack unless `aboveId` is given). */
+  /**
+   * Adds an annotation as its own layer (top of the stack unless `aboveId` is given). Pen,
+   * rectangle, ellipse, line and arrow annotations become shape layers that remember the
+   * annotation (so `annotations` and `updateAnnotation` keep working); text and images stay
+   * annotation layers.
+   */
   addAnnotation(annotation, placement = {}) {
     this.recordHistory();
     const id = `ann_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
     const fullAnnotation = { ...annotation, id };
-    const layer = annotationLayerFor(fullAnnotation);
+    const layer = annotationLayerFor(fullAnnotation, this.shapeEnv());
     const loc = placement.aboveId ? findLayer(this.state.layers, placement.aboveId) : null;
     this.state.layers = loc ? insertLayer(this.state.layers, layer, loc.parent?.id ?? null, loc.index + 1) : insertLayer(this.state.layers, layer, null);
     this.state.selectedAnnotationId = id;
@@ -5620,13 +5502,33 @@ var ImageEditorController = class {
       this.recordHistory();
     }
     const layer = this.annotationLayer(id);
-    if (layer) {
-      const annotation = { ...layer.annotation, ...partial, id };
-      const name = layer.name === annotationLayerName(layer.annotation) ? annotationLayerName(annotation) : layer.name;
-      this.state.layers = mapLayer(this.state.layers, layer.id, () => ({ ...layer, annotation, name }));
+    const current = layer ? annotationOfLayer(layer) : null;
+    if (layer && current) {
+      const annotation = { ...current, ...partial, id };
+      const name = layer.name === annotationLayerName(current) ? annotationLayerName(annotation) : layer.name;
+      this.state.layers = mapLayer(this.state.layers, layer.id, () => this.layerForAnnotation(layer, annotation, name));
     }
     this.notify();
   }
+  /** `layer` (an annotation or migrated shape layer) showing `annotation` instead, keeping its other properties. */
+  layerForAnnotation(layer, annotation, name) {
+    const shape = shapeFromAnnotation(annotation);
+    const { annotation: _old, ...props } = layer;
+    const blend = annotation.blend && annotation.blend !== "normal" ? annotation.blend : "normal";
+    if (shape) {
+      const base = { ...props, name, blend: layer.type === "annotation" && layer.blend !== "normal" ? layer.blend : blend };
+      if (layer.type === "shape") {
+        const fresh = rerenderShape({ ...base, components: shape.components, fill: shape.fill, stroke: shape.stroke }, this.shapeEnv());
+        delete fresh.fillRule;
+        return { ...fresh, annotation };
+      }
+      const created = createShapeLayer({ ...shape, name, blend: base.blend }, this.shapeEnv(), layer.id);
+      const { type: _t2, ...rest2 } = base;
+      return { ...rest2, ...created, annotation };
+    }
+    const { type: _t, components: _c, fill: _f, stroke: _s, surface: _sf, offset: _o, fillRule: _r, fillOpacity: _fo, psd: _p, ...rest } = props;
+    return { ...rest, type: "annotation", name, blend: layer.type === "shape" ? "normal" : layer.blend, annotation };
+  }
   removeAnnotation(id) {
     this.recordHistory();
     const layer = this.annotationLayer(id);
@@ -5636,10 +5538,11 @@ var ImageEditorController = class {
     }
     this.notify();
   }
+  /** Deletes every annotation layer and every shape layer that still is the annotation it was migrated from. */
   clearAnnotations() {
     this.recordHistory();
     let layers = this.state.layers;
-    for (const l of flattenLayers(layers)) if (l.type === "annotation") layers = mapLayer(layers, l.id, () => null);
+    for (const l of flattenLayers(layers)) if (l.type === "annotation" || l.type === "shape" && l.annotation) layers = mapLayer(layers, l.id, () => null);
     this.state.layers = layers;
     this.state.selectedAnnotationId = null;
     this.notify();
@@ -5878,6 +5781,142 @@ var ImageEditorController = class {
     this.commitLayers(setLayerMask(this.state.layers, target.id, { surface, defaultValue: 0 }));
     return target.id;
   }
+  // --- Shape layers ---
+  /** What shape rendering needs: the canvas size and the document's patterns. */
+  shapeEnv() {
+    return { ...this.naturalSize, pattern: (id) => this.state.patterns?.find((p) => p.id === id) ?? null };
+  }
+  /** One component from tool or UI input (validated). */
+  componentFrom(spec, path) {
+    const op = requireOperation(spec.op, `${path}op`);
+    if (spec.shape !== void 0 && spec.subpaths !== void 0) throw new LayerOperationError(`Give ${path}shape or ${path}subpaths, not both.`);
+    if (spec.shape !== void 0) return liveComponent(normalizeLiveShape(spec.shape, `${path}shape`), op);
+    if (spec.subpaths !== void 0) return { op, subpaths: normalizeSubpaths(spec.subpaths, `${path}subpaths`) };
+    throw new LayerOperationError(`${path}shape (a live shape: { kind: rect | ellipse | polygon | star | line, \u2026 }) or ${path}subpaths (anchors or SVG path data) is required.`);
+  }
+  shapeInfo(id) {
+    const layer = requireShapeLayer(this.state.layers, id);
+    const r = (n) => Math.round(n * 1e3) / 1e3;
+    const box = (b) => b ? { x: r(b.x), y: r(b.y), width: r(b.width), height: r(b.height) } : null;
+    const info = {
+      id: layer.id,
+      name: layer.name,
+      components: layer.components.map((c, index) => ({
+        index,
+        op: c.op,
+        live: c.live ? JSON.parse(JSON.stringify(c.live)) : null,
+        subpaths: roundSubpaths(c.subpaths),
+        bounds: box(shapeGeometryBounds({ components: [c] }))
+      })),
+      fillRule: layer.fillRule ?? "nonzero",
+      fill: layer.fill ? JSON.parse(JSON.stringify(layer.fill)) : null,
+      stroke: layer.stroke ? JSON.parse(JSON.stringify(layer.stroke)) : null,
+      geometryBounds: box(shapeGeometryBounds(layer)),
+      bounds: this.getLayerBounds(id)
+    };
+    if (layer.annotation) info.annotationId = layer.annotation.id;
+    return info;
+  }
+  /** A shape layer's components, fill, stroke and bounds. */
+  getShapeLayer(id) {
+    return this.shapeInfo(id);
+  }
+  /**
+   * Adds a shape layer (one undo step) and makes it active: a live shape or subpaths (or several
+   * `components`), filled with `fill` (default the foreground colour, except for a stroke-only
+   * open path) and stroked with `stroke`. Goes above the active layer unless placed. Returns its id.
+   */
+  addShapeLayer(init) {
+    const specs = init.components?.length ? init.components : [init];
+    if (init.components?.length && (init.shape !== void 0 || init.subpaths !== void 0)) throw new LayerOperationError("Give components, or shape / subpaths, not both.");
+    const components = specs.map((c, i) => this.componentFrom(c, init.components?.length ? `components[${i}].` : ""));
+    const stroke = init.stroke ? normalizeShapeStroke(init.stroke, "stroke") : null;
+    const openOnly = components.every((c) => !c.live && c.subpaths.every((sp) => !sp.closed));
+    const fill = init.fill === void 0 ? stroke && openOnly ? null : normalizeShapePaint(this.state.paint.foreground, "fill") : init.fill === null ? null : normalizeShapePaint(init.fill, "fill");
+    if (!fill && !stroke) throw new LayerOperationError("A shape with neither fill nor stroke draws nothing; give fill or stroke.");
+    if (init.fillRule !== void 0 && init.fillRule !== "nonzero" && init.fillRule !== "evenodd") throw new LayerOperationError("fillRule must be nonzero or evenodd.");
+    if (init.opacity !== void 0 && !(Number.isFinite(init.opacity) && init.opacity >= 0 && init.opacity <= 1)) throw new LayerOperationError("opacity must be between 0 and 1.");
+    if (init.blend !== void 0 && !isBlendMode(init.blend)) throw new LayerOperationError(`Unknown blend mode "${String(init.blend)}".`);
+    const layer = createShapeLayer({ components, fill, stroke, fillRule: init.fillRule, name: init.name, opacity: init.opacity, blend: init.blend }, this.shapeEnv());
+    const next = placeLayer(this.state.layers, layer, this.newLayerPlacement(init));
+    this.commitLayers(next, () => {
+      this.state.activeLayerId = layer.id;
+      this.state.activeTarget = "pixels";
+    });
+    return layer.id;
+  }
+  /**
+   * Sets a shape's fill, stroke or fill rule (one undo step unless `commitToHistory` is false):
+   * `fill` / `stroke` replace them (`null` removes); `stroke` given as a partial object changes
+   * only those settings of the current stroke. Returns the shape.
+   */
+  setShapeStyle(id, changes, commitToHistory = true) {
+    const layer = requireShapeLayer(this.state.layers, id);
+    const fill = changes.fill === void 0 ? layer.fill : changes.fill === null ? null : normalizeShapePaint(changes.fill, "fill");
+    const stroke = changes.stroke === void 0 ? layer.stroke : changes.stroke === null ? null : normalizeShapeStroke(changes.stroke, "stroke", layer.stroke);
+    if (changes.fillRule !== void 0 && changes.fillRule !== "nonzero" && changes.fillRule !== "evenodd") throw new LayerOperationError("fillRule must be nonzero or evenodd.");
+    const fillRule = changes.fillRule ?? layer.fillRule ?? "nonzero";
+    const { layers } = updateShapeLayer(this.state.layers, id, () => ({ fill, stroke, fillRule: fillRule === "nonzero" ? void 0 : fillRule }), this.shapeEnv(), "restyle it");
+    this.commitLayers(layers, void 0, commitToHistory);
+    return this.shapeInfo(id);
+  }
+  componentIndex(layer, index) {
+    if (!Number.isInteger(index) || index < 0 || index >= layer.components.length) {
+      throw new LayerOperationError(`componentIndex must be 0..${layer.components.length - 1} (get_shape_layer lists the components), got ${String(index)}.`);
+    }
+    return index;
+  }
+  /**
+   * Changes one component (one undo step unless `commitToHistory` is false): its live shape
+   * (fields not given keep their values when the kind stays the same), its subpaths (which drops
+   * the live shape) or its operation. Returns the shape.
+   */
+  setShapeComponent(id, index, change, commitToHistory = true) {
+    const layer = requireShapeLayer(this.state.layers, id);
+    const i = this.componentIndex(layer, index);
+    const current = layer.components[i];
+    let shape = change.shape;
+    if (shape && current.live && shape.kind === void 0) shape = { ...current.live, ...shape };
+    else if (shape && current.live && shape.kind === current.live.kind) shape = { ...current.live, ...shape };
+    const next = shape !== void 0 || change.subpaths !== void 0 ? this.componentFrom({ ...change, shape, op: change.op ?? current.op }, "") : { ...current, op: requireOperation(change.op) };
+    const components = layer.components.map((c, k) => k === i ? next : c);
+    const { layers } = updateShapeLayer(this.state.layers, id, () => ({ components }), this.shapeEnv(), "edit its path");
+    this.commitLayers(layers, void 0, commitToHistory);
+    return this.shapeInfo(id);
+  }
+  /** Adds a component to a shape (path operations), on top unless `index` is given (one undo step). Returns the shape. */
+  addShapeComponent(id, spec, index) {
+    const layer = requireShapeLayer(this.state.layers, id);
+    const c = this.componentFrom(spec, "");
+    const at = index === void 0 ? layer.components.length : index;
+    if (!Number.isInteger(at) || at < 0 || at > layer.components.length) throw new LayerOperationError(`index must be 0..${layer.components.length}, got ${String(index)}.`);
+    const components = [...layer.components.slice(0, at), c, ...layer.components.slice(at)];
+    const { layers } = updateShapeLayer(this.state.layers, id, () => ({ components }), this.shapeEnv(), "edit its path");
+    this.commitLayers(layers);
+    return this.shapeInfo(id);
+  }
+  /** Removes one component of a shape (one undo step); the last one cannot go (delete the layer instead). Returns the shape. */
+  removeShapeComponent(id, index) {
+    const layer = requireShapeLayer(this.state.layers, id);
+    const i = this.componentIndex(layer, index);
+    if (layer.components.length === 1) throw new LayerOperationError("This is the shape's only component; delete the layer instead (delete_layer).");
+    const components = layer.components.filter((_, k) => k !== i);
+    const { layers } = updateShapeLayer(this.state.layers, id, () => ({ components }), this.shapeEnv(), "edit its path");
+    this.commitLayers(layers);
+    return this.shapeInfo(id);
+  }
+  /**
+   * Merge Shape Components: the area the components combine to becomes one plain component (live
+   * shapes become paths), as one undo step. Returns the shape.
+   */
+  mergeShapeComponents(id) {
+    const layer = requireShapeLayer(this.state.layers, id);
+    if (layer.components.length < 2) throw new LayerOperationError("The shape has one component; there is nothing to merge.");
+    const components = mergeShapeComponents(layer.components, layer.fillRule);
+    const { layers } = updateShapeLayer(this.state.layers, id, () => ({ components, fillRule: void 0 }), this.shapeEnv(), "edit its path");
+    this.commitLayers(layers);
+    return this.shapeInfo(id);
+  }
   /**
    * Rasterize Layer: an annotation layer becomes a pixel layer with the same id, name and
    * properties (needs a canvas), and a pixel layer's filters are baked into its pixels. One undo
@@ -5918,8 +5957,11 @@ var ImageEditorController = class {
       }
     } else if (layer.type === "smart") {
       return this.rasterizeSmartObject(id);
+    } else if (layer.type === "shape") {
+      next = shapeAsPixelLayer(layer);
+      if (this.state.selectedAnnotationId && this.state.selectedAnnotationId === layer.annotation?.id) this.state.selectedAnnotationId = null;
     } else {
-      throw new LayerOperationError(`Only annotation layers, smart objects and pixel layers with filters rasterize; "${layer.name || id}" is a ${layer.type} layer. Merge it down or flatten instead.`);
+      throw new LayerOperationError(`Only shape and annotation layers, smart objects and pixel layers with filters rasterize; "${layer.name || id}" is a ${layer.type} layer. Merge it down or flatten instead.`);
     }
     this.commitLayers(mapLayer(this.state.layers, id, () => next));
     return id;
@@ -6044,6 +6086,14 @@ var ImageEditorController = class {
         if (mask2) out2.mask = mask2;
         return out2;
       }
+      if (layer.type === "shape") {
+        add2("Shape layers were written as pixel layers", layer.name);
+        const out2 = shapeAsPixelLayer(layer);
+        const mask2 = bakeMask(layer);
+        if (mask2) out2.mask = mask2;
+        else delete out2.mask;
+        return out2;
+      }
       if (layer.type === "smart") {
         const out2 = { ...layer };
         const mask2 = bakeMask(layer);
@@ -6120,16 +6170,27 @@ var ImageEditorController = class {
         );
       }
       layers = resizeLegacyMasks(layers, prev, next.dimensions);
+      const env = { ...next.dimensions, pattern: (pid) => this.state.patterns?.find((p) => p.id === pid) ?? null };
       for (const l of flattenLayers(layers)) {
         if (l.type === "annotation") {
           layers = mapLayer(layers, l.id, () => ({ ...l, annotation: scaleAnnotation(l.annotation, sx, sy) }));
+        } else if (l.type === "shape") {
+          const a = l.annotation;
+          const scaled = a ? scaleAnnotation(a, sx, sy) : null;
+          const fromAnnotation = scaled ? shapeFromAnnotation(scaled) : null;
+          const m = [sx, 0, 0, sy, 0, 0];
+          const components = fromAnnotation?.components ?? transformShapeComponents(l.components, (p) => ({ x: p.x * sx, y: p.y * sy }), m);
+          const moved = { ...l, components, ...fromAnnotation ? { fill: fromAnnotation.fill, stroke: fromAnnotation.stroke } : {} };
+          if (scaled && fromAnnotation) moved.annotation = scaled;
+          else delete moved.annotation;
+          layers = mapLayer(layers, l.id, () => rerenderShape(moved, env));
         }
       }
     }
     const bg = developTarget(layers, null);
     if (bg && bg.source !== "document") layers = mapLayer(layers, bg.id, () => ({ ...bg, source: "document" }));
     if (clearAnnotations) {
-      for (const l of flattenLayers(layers)) if (l.type === "annotation") layers = mapLayer(layers, l.id, () => null);
+      for (const l of flattenLayers(layers)) if (l.type === "annotation" || l.type === "shape" && l.annotation) layers = mapLayer(layers, l.id, () => null);
       this.state.selectedAnnotationId = null;
     }
     this.state.layers = layers;
@@ -6199,7 +6260,14 @@ var ImageEditorController = class {
     if (isLayered(data)) {
       const problems = [];
       const canvas = typeof data.width === "number" && data.width > 0 && typeof data.height === "number" && data.height > 0 ? { width: data.width, height: data.height } : this.naturalSize;
-      s.layers = deserializeLayers(data.layers, { assets: data.assets ?? {}, problems, smartContents: Array.isArray(data.smartContents) ? data.smartContents : [], canvas });
+      const storedPatterns = deserializePatterns(data.patterns, []);
+      s.layers = deserializeLayers(data.layers, {
+        assets: data.assets ?? {},
+        problems,
+        smartContents: Array.isArray(data.smartContents) ? data.smartContents : [],
+        canvas,
+        pattern: (pid) => storedPatterns.find((p) => p.id === pid) ?? null
+      });
       this.lastLoadProblems = problems;
       s.crop = data.crop ? { ...data.crop } : null;
       s.transform = { ...data.transform };
@@ -6401,6 +6469,7 @@ function collectStateTiles(layers, into) {
   for (const l of flattenLayers(layers)) {
     if (l.type === "pixel" && l.source !== "document") collectTiles(l.surface, into);
     if (l.mask && !l.mask.source) collectTiles(l.mask.surface, into);
+    if (l.type === "shape") collectTiles(l.surface, into);
     if (l.type === "smart") {
       collectTiles(l.surface, into);
       if (l.smartFilters?.mask) collectTiles(l.smartFilters.mask.surface, into);
@@ -6449,7 +6518,7 @@ function resizePixels(px2, width, height) {
 function withoutAnnotations(layers) {
   const out = [];
   for (const l of layers) {
-    if (l.type === "annotation") continue;
+    if (l.type === "annotation" || l.type === "shape" && l.annotation) continue;
     out.push(l.type === "group" ? { ...l, children: withoutAnnotations(l.children) } : l);
   }
   return out;
@@ -6639,7 +6708,7 @@ function loadImageEditorDocument(input) {
   if (state.selection === void 0) delete state.selection;
   return { state, report: result.report, unknown: result.unknown };
 }
-var LAYER_TYPES = /* @__PURE__ */ new Set(["pixel", "adjustment", "group", "annotation", "smart"]);
+var LAYER_TYPES = /* @__PURE__ */ new Set(["pixel", "adjustment", "group", "annotation", "smart", "shape"]);
 function cleanLayers(value, dropped) {
   const out = [];
   for (const raw of value) {
@@ -7431,7 +7500,7 @@ function createImageEditTools(controller) {
     return { layer: layers[index], index };
   };
   const layerJson = (id) => JSON.parse(JSON.stringify(controller.getAdjustmentLayer(id)));
-  const geometry = () => {
+  const geometry2 = () => {
     const s = controller.getState();
     const region = s.crop ?? { x: 0, y: 0, ...s.imageDimensions };
     const out = getRotatedSize(region.width, region.height, s.transform);
@@ -7456,7 +7525,7 @@ function createImageEditTools(controller) {
     description: "Returns the source image size in pixels, the crop box (natural image pixels, or null for the whole image), rotation in degrees, flips, the output size after crop and rotation, the number of adjustment layers and whether undo / redo are available.",
     inputSchema: { type: "object", properties: {}, additionalProperties: false },
     annotations: { title: "Read image geometry", ...READ },
-    handler: () => ({ ...geometry(), layers: controller.getAdjustmentLayers().length, ...history() })
+    handler: () => ({ ...geometry2(), layers: controller.getAdjustmentLayers().length, ...history() })
   };
   const getHistogram = {
     name: "get_histogram",
@@ -7560,7 +7629,7 @@ function createImageEditTools(controller) {
         throw new Error(`The crop box (${x}, ${y}, ${width} \xD7 ${height}) goes outside the ${image.width} \xD7 ${image.height} image.`);
       }
       controller.setCrop({ x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) });
-      return geometry();
+      return geometry2();
     }
   };
   const resetCrop = {
@@ -7572,7 +7641,7 @@ function createImageEditTools(controller) {
     handler: () => {
       if (!controller.getState().crop) throw new Error("The image is not cropped.");
       controller.resetCrop();
-      return geometry();
+      return geometry2();
     }
   };
   const setRotation = {
@@ -7589,7 +7658,7 @@ function createImageEditTools(controller) {
     handler: ({ degrees }) => {
       requireImage();
       controller.setRotation(degrees);
-      return geometry();
+      return geometry2();
     }
   };
   const flipImage = {
@@ -7607,7 +7676,7 @@ function createImageEditTools(controller) {
       requireImage();
       if (axis === "horizontal") controller.flipHorizontal();
       else controller.flipVertical();
-      return geometry();
+      return geometry2();
     }
   };
   const undo = {
@@ -7689,6 +7758,16 @@ function describeLayer(layer, activeId, boundsOf) {
       out.collapsed = Boolean(layer.collapsed);
       out.children = layer.children.map((c) => describeLayer(c, activeId, boundsOf));
       break;
+    case "shape":
+      out.bounds = boundsOf(layer);
+      out.fillOpacity = round3(layer.fillOpacity ?? 1);
+      out.shape = {
+        components: layer.components.map((c) => ({ op: c.op, kind: c.live?.kind ?? "path" })),
+        fill: layer.fill ? layer.fill.type : null,
+        stroke: layer.stroke ? { width: layer.stroke.width, paint: layer.stroke.paint.type } : null
+      };
+      if (layer.annotation) out.annotation = { id: layer.annotation.id, type: layer.annotation.type };
+      break;
     case "smart":
       out.bounds = boundsOf(layer);
       out.fillOpacity = round3(layer.fillOpacity ?? 1);
@@ -7734,7 +7813,7 @@ function createImageLayerTools(controller) {
   const listLayers = {
     name: "list_layers",
     title: "List image layers",
-    description: "Returns the layer stack bottom to top as a tree: id, type (pixel, adjustment, group, annotation), name, document bounds (pixel layers), visible, opacity, fillOpacity, blend, clipped, locks, a mask summary, an effects summary (master switch, scale, effect ids and kinds; details from list_layer_effects), filters (pixel layers), kind and params (adjustment layers), children (groups) and which layer is active. Also returns the active layer id and target (pixels or mask) and the canvas size.",
+    description: "Returns the layer stack bottom to top as a tree: id, type (pixel, adjustment, group, shape, smart, annotation), name, document bounds (pixel, shape and smart layers), visible, opacity, fillOpacity, blend, clipped, locks, a mask summary, an effects summary (master switch, scale, effect ids and kinds; details from list_layer_effects), filters (pixel layers), kind and params (adjustment layers), a shape summary (component operations and kinds, fill and stroke paint types; details from get_shape_layer), children (groups) and which layer is active. Also returns the active layer id and target (pixels or mask) and the canvas size.",
     inputSchema: { type: "object", properties: {}, additionalProperties: false },
     annotations: { title: "List image layers", ...READ2 },
     handler: () => {
@@ -8078,7 +8157,7 @@ function createImageLayerTools(controller) {
   const rasterize = {
     name: "rasterize_layer",
     title: "Rasterize a layer",
-    description: "Rasterize Layer: turns an annotation layer into a pixel layer (same id, name, opacity, blend and mask; needs a browser) or bakes a pixel layer's filters (develop, blur) into its pixels. One undo step. Returns the layer.",
+    description: "Rasterize Layer: turns a shape layer into a pixel layer holding what it shows now (same id, name, opacity, blend, fill, mask and effects; its paths are gone, so later transforms resample pixels), turns an annotation layer into a pixel layer (needs a browser), rasterizes a smart object, or bakes a pixel layer's filters (develop, blur) into its pixels. One undo step. Returns the layer.",
     inputSchema: { type: "object", properties: { layerId: LAYER_ID2 }, required: ["layerId"], additionalProperties: false },
     annotations: { title: "Rasterize a layer", ...DESTRUCTIVE },
     handler: async ({ layerId }) => ({ layer: describe(await controller.rasterizeLayer(exists(layerId))) })
@@ -8181,7 +8260,7 @@ var READ3 = { readOnlyHint: true, destructiveHint: false, idempotentHint: true,
 var WRITE3 = { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false };
 var WRITE_IDEMPOTENT3 = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
 var DESTRUCTIVE2 = { readOnlyHint: false, destructiveHint: true, idempotentHint: false, openWorldHint: false };
-var LAYER_ID3 = { type: "string", description: "Layer id from list_layers (a pixel, annotation or group layer)." };
+var LAYER_ID3 = { type: "string", description: "Layer id from list_layers (a pixel, shape, smart object, annotation or group layer)." };
 var EFFECT_ID = { type: "string", description: "Effect id from list_layer_effects or add_layer_effect." };
 var BLEND_IDS = BLEND_MODES.map((m) => m.id).filter((id) => id !== "pigment");
 var DEFS = {
@@ -8603,9 +8682,13 @@ var PaintGesture = class {
       if (tool === "move") {
         const layer = this.controller.getActiveLayer();
         if (!layer) throw new Error("Select a layer to move in the Layers panel.");
-        if (layer.type !== "pixel") throw new Error(`Only pixel layers move; "${layer.name}" is a ${layer.type} layer.`);
+        if (layer.type !== "pixel" && layer.type !== "shape" && layer.type !== "smart") throw new Error(`Only pixel, shape and smart object layers move; "${layer.name}" is a ${layer.type} layer.`);
         if (layer.locks?.all || layer.locks?.position) throw new Error(`Layer "${layer.name}" has its position locked.`);
-        this.move = { id: layer.id, start: { x: sample.x, y: sample.y }, origin: { ...layer.offset }, moved: false };
+        const origin = layer.type === "pixel" ? { ...layer.offset } : layer.type === "smart" ? { ...layer.placement.corners[0] } : (() => {
+          const b = shapeGeometryBounds(layer);
+          return b ? { x: b.x, y: b.y } : { x: 0, y: 0 };
+        })();
+        this.move = { id: layer.id, start: { x: sample.x, y: sample.y }, origin, moved: false };
         return null;
       }
       if (tool === "brush" || tool === "eraser" || tool === "mixer") {
@@ -9520,6 +9603,409 @@ function createImageSmartObjectTools(controller) {
   return [getSmart, convert, rasterize, setTransform, replace, exportContents, copy, editContents, closeContents, addFilter, updateFilter, removeFilter, moveFilter, setEnabled, setMask];
 }
 
+// src/image-editor/shape-tools.ts
+var READ8 = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var WRITE7 = { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false };
+var WRITE_IDEMPOTENT5 = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var DESTRUCTIVE6 = { readOnlyHint: false, destructiveHint: true, idempotentHint: false, openWorldHint: false };
+var LAYER_ID5 = { type: "string", description: "Shape layer id from list_layers (type shape) or add_shape_layer." };
+var COMPONENT_INDEX = { type: "integer", minimum: 0, description: "Component index from get_shape_layer (0 = bottom component)." };
+var OP = {
+  type: "string",
+  enum: ["combine", "subtract", "intersect", "exclude"],
+  description: "How the component combines with the components below it (Photoshop path operations; default combine). The bottom component always combines."
+};
+var NUM = (description) => ({ type: "number", description });
+var MATRIX = {
+  type: "array",
+  items: { type: "number", description: "Matrix entry." },
+  minItems: 6,
+  maxItems: 6,
+  description: "Optional affine map from the shape's own frame to the document [a, b, c, d, e, f] (x' = a\xB7x + c\xB7y + e, y' = b\xB7x + d\xB7y + f), e.g. a rotation. Default identity."
+};
+var BOX = {
+  x: NUM("Left of the bounding box, document pixels."),
+  y: NUM("Top of the bounding box, document pixels."),
+  width: NUM("Width in pixels."),
+  height: NUM("Height in pixels."),
+  transform: { $ref: "#/$defs/matrix" }
+};
+var DEFS2 = {
+  matrix: MATRIX,
+  point: {
+    type: "object",
+    description: "A point in document pixels.",
+    properties: { x: NUM("Pixels from the left."), y: NUM("Pixels from the top.") },
+    required: ["x", "y"],
+    additionalProperties: false
+  },
+  arrowhead: {
+    type: "object",
+    description: "An arrowhead whose tip is the line end: a triangle, notched by concavity.",
+    properties: {
+      width: NUM("Width across the base, pixels."),
+      length: NUM("Length from base to tip, pixels."),
+      concavity: { type: "number", minimum: -0.5, maximum: 0.5, description: "Notch of the base towards the tip as a fraction of length (default 0)." }
+    },
+    required: ["width", "length"],
+    additionalProperties: false
+  },
+  shape: {
+    description: "A live shape (stays editable as that shape): rect (with optional corner radii), ellipse, polygon, star, or line (a filled bar with optional arrowheads). Sizes are document pixels.",
+    anyOf: [
+      {
+        type: "object",
+        description: "Rectangle.",
+        properties: {
+          kind: { const: "rect", description: "Rectangle." },
+          ...BOX,
+          radius: { type: "number", minimum: 0, description: "One corner radius for all corners, pixels." },
+          radii: { type: "array", items: { type: "number", minimum: 0, description: "Radius in pixels." }, minItems: 4, maxItems: 4, description: "Corner radii [top-left, top-right, bottom-right, bottom-left] in pixels." }
+        },
+        required: ["kind", "x", "y", "width", "height"],
+        additionalProperties: false
+      },
+      { type: "object", description: "Ellipse inscribed in the box.", properties: { kind: { const: "ellipse", description: "Ellipse." }, ...BOX }, required: ["kind", "x", "y", "width", "height"], additionalProperties: false },
+      {
+        type: "object",
+        description: "Regular polygon inscribed in the box, first vertex at the top.",
+        properties: { kind: { const: "polygon", description: "Polygon." }, ...BOX, sides: { type: "integer", minimum: 3, maximum: 100, description: "Number of sides (default 6)." } },
+        required: ["kind", "x", "y", "width", "height"],
+        additionalProperties: false
+      },
+      {
+        type: "object",
+        description: "Star inscribed in the box, first point at the top.",
+        properties: {
+          kind: { const: "star", description: "Star." },
+          ...BOX,
+          points: { type: "integer", minimum: 3, maximum: 100, description: "Number of points (default 5)." },
+          innerRatio: { type: "number", minimum: 0.01, maximum: 1, description: "Inner radius over outer radius (default 0.5)." }
+        },
+        required: ["kind", "x", "y", "width", "height"],
+        additionalProperties: false
+      },
+      {
+        type: "object",
+        description: "Line drawn as a filled bar.",
+        properties: {
+          kind: { const: "line", description: "Line." },
+          x1: NUM("Start x, document pixels."),
+          y1: NUM("Start y, document pixels."),
+          x2: NUM("End x, document pixels."),
+          y2: NUM("End y, document pixels."),
+          weight: { type: "number", minimum: 0, description: "Thickness in pixels (default 1)." },
+          startArrow: { anyOf: [{ $ref: "#/$defs/arrowhead" }, { type: "null", description: "No arrowhead." }], description: "Arrowhead at the start, or null." },
+          endArrow: { anyOf: [{ $ref: "#/$defs/arrowhead" }, { type: "null", description: "No arrowhead." }], description: "Arrowhead at the end, or null." },
+          transform: { $ref: "#/$defs/matrix" }
+        },
+        required: ["kind", "x1", "y1", "x2", "y2"],
+        additionalProperties: false
+      }
+    ]
+  },
+  subpaths: {
+    description: "A free path: SVG path data (absolute or relative M, L, C, Q, A, Z) or subpaths with anchors. Handles are absolute document positions.",
+    anyOf: [
+      { type: "string", description: "SVG path data, document pixels." },
+      {
+        type: "array",
+        minItems: 1,
+        description: "Subpaths.",
+        items: {
+          type: "object",
+          description: "One subpath.",
+          properties: {
+            anchors: {
+              type: "array",
+              minItems: 1,
+              description: "Anchors in order.",
+              items: {
+                type: "object",
+                description: "An anchor with optional handles.",
+                properties: {
+                  x: NUM("Anchor x, document pixels."),
+                  y: NUM("Anchor y, document pixels."),
+                  in: { $ref: "#/$defs/point", description: "Handle of the segment arriving here (absolute)." },
+                  out: { $ref: "#/$defs/point", description: "Handle of the segment leaving here (absolute)." },
+                  corner: { type: "number", minimum: 0, description: "Live corner radius at this anchor, pixels." }
+                },
+                required: ["x", "y"],
+                additionalProperties: false
+              }
+            },
+            closed: { type: "boolean", description: "Joins the last anchor back to the first (default true)." }
+          },
+          required: ["anchors"],
+          additionalProperties: false
+        }
+      }
+    ]
+  },
+  gradient: {
+    type: "object",
+    description: "A gradient: colour stops, optional opacity stops and its layout (aligned with the shape bounds by default).",
+    properties: {
+      stops: {
+        type: "array",
+        minItems: 1,
+        description: "Colour stops.",
+        items: {
+          type: "object",
+          description: "A colour stop.",
+          properties: { position: { type: "number", minimum: 0, maximum: 1, description: "0..1 along the gradient." }, color: { type: "string", description: "Colour (#rrggbb or a CSS colour)." } },
+          required: ["position", "color"],
+          additionalProperties: false
+        }
+      },
+      opacityStops: {
+        type: "array",
+        description: "Opacity stops (default opaque).",
+        items: {
+          type: "object",
+          description: "An opacity stop.",
+          properties: { position: { type: "number", minimum: 0, maximum: 1, description: "0..1 along the gradient." }, opacity: { type: "number", minimum: 0, maximum: 1, description: "0..1." } },
+          required: ["position", "opacity"],
+          additionalProperties: false
+        }
+      },
+      style: { type: "string", enum: ["linear", "radial", "angle", "reflected", "diamond"], description: "Geometry (default linear)." },
+      angle: { type: "number", minimum: -360, maximum: 360, description: "Degrees, 90 = bottom to top (default 90)." },
+      scale: { type: "number", minimum: 0.1, maximum: 1.5, description: "1 = 100 % (default 1)." },
+      reverse: { type: "boolean", description: "Swap the ends (default false)." },
+      align: { type: "boolean", description: "Lay out over the shape bounds (true, default) or the canvas." },
+      offset: { $ref: "#/$defs/point", description: "Centre offset as fractions of the bounds (default 0, 0)." }
+    },
+    required: ["stops"],
+    additionalProperties: false
+  },
+  paint: {
+    description: "What a fill or stroke paints with: a colour string (#rrggbb, #rrggbbaa, rgb(), a CSS name; alpha becomes opacity), or an object of type color, gradient or pattern.",
+    anyOf: [
+      { type: "string", description: "A colour." },
+      {
+        type: "object",
+        description: "Solid colour.",
+        properties: { type: { const: "color", description: "Solid colour." }, color: { type: "string", description: "Colour." }, opacity: { type: "number", minimum: 0, maximum: 1, description: "0..1 (default 1)." } },
+        required: ["type", "color"],
+        additionalProperties: false
+      },
+      {
+        type: "object",
+        description: "Gradient.",
+        properties: { type: { const: "gradient", description: "Gradient." }, gradient: { $ref: "#/$defs/gradient" }, opacity: { type: "number", minimum: 0, maximum: 1, description: "0..1 (default 1)." } },
+        required: ["type", "gradient"],
+        additionalProperties: false
+      },
+      {
+        type: "object",
+        description: "Pattern (list_patterns gives ids).",
+        properties: {
+          type: { const: "pattern", description: "Pattern." },
+          patternId: { type: "string", description: "A document or built-in pattern id." },
+          scale: { type: "number", minimum: 0.01, maximum: 10, description: "1 = 100 % (default 1)." },
+          angle: { type: "number", minimum: -360, maximum: 360, description: "Degrees counter-clockwise (default 0)." },
+          link: { type: "boolean", description: "Tile from the shape\u2019s top-left (default true) instead of the canvas origin." },
+          phase: { $ref: "#/$defs/point", description: "Origin offset in pixels." },
+          opacity: { type: "number", minimum: 0, maximum: 1, description: "0..1 (default 1)." }
+        },
+        required: ["type", "patternId"],
+        additionalProperties: false
+      }
+    ]
+  },
+  stroke: {
+    type: "object",
+    description: "The shape stroke (not the layer-effect stroke). Unset settings keep their current values (or the defaults).",
+    properties: {
+      width: { type: "number", minimum: 0, maximum: 1e4, description: "Width in pixels (required for a new stroke)." },
+      paint: { $ref: "#/$defs/paint" },
+      color: { type: "string", description: "Shorthand for paint as a colour." },
+      align: { type: "string", enum: ["inside", "center", "outside"], description: "Where it sits on the outline (default center; open paths always centre)." },
+      cap: { type: "string", enum: ["butt", "round", "square"], description: "Line ends (default butt)." },
+      join: { type: "string", enum: ["miter", "round", "bevel"], description: "Corners (default miter)." },
+      miterLimit: { type: "number", minimum: 1, maximum: 500, description: "Miter length over width above which a corner is bevelled (default 100)." },
+      dashes: { type: "array", maxItems: 32, items: { type: "number", minimum: 0, description: "Length in multiples of the width." }, description: "Dash and gap lengths in multiples of the stroke width ([] = solid)." },
+      dashOffset: { type: "number", description: "Start offset into the dashes, multiples of the width (default 0)." }
+    },
+    additionalProperties: false
+  }
+};
+var GEOMETRY2 = {
+  shape: { $ref: "#/$defs/shape", description: "A live shape: { kind: rect | ellipse | polygon | star | line, \u2026 } in document pixels. Give shape or subpaths." },
+  subpaths: { $ref: "#/$defs/subpaths", description: "A free path: SVG path data or subpaths with anchors, document pixels. Give shape or subpaths." }
+};
+function geometry(args) {
+  const out = {};
+  if (args.shape !== void 0) out.shape = args.shape;
+  if (args.subpaths !== void 0) out.subpaths = args.subpaths;
+  if (args.op !== void 0) out.op = args.op;
+  return out;
+}
+function createImageShapeTools(controller) {
+  const shapeId = (id) => {
+    if (typeof id !== "string" || !id) throw new LayerOperationError("layerId is required (a shape layer id from list_layers).");
+    requireShapeLayer(controller.getLayers(), id);
+    return id;
+  };
+  const layerSummary = (id) => {
+    const s = controller.getState();
+    const loc = findLayer(s.layers, id);
+    return loc ? { ...describeLayer(loc.layer, s.activeLayerId, (x) => controller.getLayerBounds(x.id)), parentId: loc.parent?.id ?? null, index: loc.index } : null;
+  };
+  const get = {
+    name: "get_shape_layer",
+    title: "Read a shape layer",
+    description: "Returns a shape layer\u2019s components bottom to top (index, path operation, the live shape it was drawn as or null, its subpaths with absolute anchors and handles, bounds), the fill rule, fill and stroke paints and settings, the path bounds and the rendered bounds (stroke included). Changes nothing.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID5 }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Read a shape layer", ...READ8 },
+    handler: ({ layerId }) => controller.getShapeLayer(shapeId(layerId))
+  };
+  const add2 = {
+    name: "add_shape_layer",
+    title: "Add a shape layer",
+    description: "Adds a vector shape layer and makes it active: a live shape (rect, ellipse, polygon, star, line), a free path (SVG path data or anchors), or several components combined with path operations. fill defaults to the foreground colour (none for an open path with a stroke); give stroke for an outline. It renders sharp at any size, can be moved and transformed without losing quality, and takes masks, effects, clipping and blend modes like any layer. Goes above the active layer unless placed. One undo step. Returns the layer and the shape.",
+    inputSchema: {
+      type: "object",
+      $defs: DEFS2,
+      properties: {
+        ...GEOMETRY2,
+        components: {
+          type: "array",
+          minItems: 1,
+          description: "Several components instead of shape / subpaths, bottom first, each with its path operation.",
+          items: { type: "object", description: "One component.", properties: { ...GEOMETRY2, op: OP }, additionalProperties: false }
+        },
+        fill: { anyOf: [{ $ref: "#/$defs/paint" }, { type: "null", description: "No fill." }], description: "Fill paint, or null for none (default the foreground colour)." },
+        stroke: { anyOf: [{ $ref: "#/$defs/stroke" }, { type: "null", description: "No stroke." }], description: "Stroke { width, paint, \u2026 }, or null / omitted for none." },
+        fillRule: { type: "string", enum: ["nonzero", "evenodd"], description: "Winding rule within a component (default nonzero)." },
+        name: { type: "string", description: "Layer name (default by kind: Rectangle, Ellipse, \u2026)." },
+        opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0..1 (default 1)." },
+        blend: { type: "string", enum: BLEND_MODES.map((m) => m.id), description: "Blend mode (default normal)." },
+        aboveId: { type: "string", description: "Put the layer directly above this layer (default above the active layer)." },
+        belowId: { type: "string", description: "Put the layer directly below this layer." },
+        parentId: { type: "string", description: "Put the layer inside this group." },
+        index: { type: "integer", minimum: 0, description: "Position among the siblings, 0 = bottom." }
+      },
+      additionalProperties: false
+    },
+    annotations: { title: "Add a shape layer", ...WRITE7 },
+    handler: (args) => {
+      const init = { ...geometry(args) };
+      if (args.components !== void 0) init.components = args.components.map(geometry);
+      for (const k of ["fill", "stroke", "fillRule", "name", "opacity", "blend", "aboveId", "belowId", "parentId", "index"]) {
+        if (args[k] !== void 0) init[k] = args[k];
+      }
+      if (init.blend !== void 0) init.blend = init.blend;
+      const id = controller.addShapeLayer(init);
+      return { layer: layerSummary(id), shape: controller.getShapeLayer(id) };
+    }
+  };
+  const update = {
+    name: "update_shape",
+    title: "Restyle a shape",
+    description: "Changes a shape layer\u2019s fill, stroke or fill rule and renders it again: fill replaces the fill (null removes it); stroke changes only the settings given (null removes the stroke; a new stroke needs width and paint). Geometry is untouched (set_shape_component edits paths). One undo step. Returns the shape.",
+    inputSchema: {
+      type: "object",
+      $defs: DEFS2,
+      properties: {
+        layerId: LAYER_ID5,
+        fill: { anyOf: [{ $ref: "#/$defs/paint" }, { type: "null", description: "No fill." }], description: "New fill paint, or null for none." },
+        stroke: { anyOf: [{ $ref: "#/$defs/stroke" }, { type: "null", description: "No stroke." }], description: "Stroke settings to change, or null to remove the stroke." },
+        fillRule: { type: "string", enum: ["nonzero", "evenodd"], description: "Winding rule within a component." }
+      },
+      required: ["layerId"],
+      additionalProperties: false
+    },
+    annotations: { title: "Restyle a shape", ...WRITE_IDEMPOTENT5 },
+    handler: ({ layerId, fill, stroke, fillRule }) => {
+      const id = shapeId(layerId);
+      if (fill === void 0 && stroke === void 0 && fillRule === void 0) throw new LayerOperationError("Give fill, stroke or fillRule to change.");
+      return controller.setShapeStyle(id, { fill, stroke, fillRule });
+    }
+  };
+  const setComponent = {
+    name: "set_shape_component",
+    title: "Edit a shape component",
+    description: "Changes one component of a shape layer: shape sets its live shape (fields you leave out keep their values when the kind stays the same, e.g. only radii), subpaths replaces its path (which ends the live shape), op changes its path operation. Positions are document pixels. One undo step. Returns the shape.",
+    inputSchema: {
+      type: "object",
+      $defs: DEFS2,
+      properties: {
+        layerId: LAYER_ID5,
+        componentIndex: COMPONENT_INDEX,
+        shape: {
+          type: "object",
+          description: "Live shape fields to set (see add_shape_layer\u2019s shape): kind plus its fields; without kind, the fields change the current live shape.",
+          properties: {
+            kind: { type: "string", enum: ["rect", "ellipse", "polygon", "star", "line"], description: "Shape kind (default the current one)." },
+            x: NUM("Left of the box, pixels."),
+            y: NUM("Top of the box, pixels."),
+            width: NUM("Box width, pixels."),
+            height: NUM("Box height, pixels."),
+            radius: { type: "number", minimum: 0, description: "rect: one corner radius, pixels." },
+            radii: { type: "array", items: { type: "number", minimum: 0, description: "Radius in pixels." }, minItems: 4, maxItems: 4, description: "rect: [top-left, top-right, bottom-right, bottom-left] radii, pixels." },
+            sides: { type: "integer", minimum: 3, maximum: 100, description: "polygon: number of sides." },
+            points: { type: "integer", minimum: 3, maximum: 100, description: "star: number of points." },
+            innerRatio: { type: "number", minimum: 0.01, maximum: 1, description: "star: inner over outer radius." },
+            x1: NUM("line: start x."),
+            y1: NUM("line: start y."),
+            x2: NUM("line: end x."),
+            y2: NUM("line: end y."),
+            weight: { type: "number", minimum: 0, description: "line: thickness in pixels." },
+            startArrow: { anyOf: [{ $ref: "#/$defs/arrowhead" }, { type: "null", description: "No arrowhead." }], description: "line: start arrowhead or null." },
+            endArrow: { anyOf: [{ $ref: "#/$defs/arrowhead" }, { type: "null", description: "No arrowhead." }], description: "line: end arrowhead or null." },
+            transform: { $ref: "#/$defs/matrix" }
+          },
+          additionalProperties: false
+        },
+        subpaths: { $ref: "#/$defs/subpaths", description: "A new path for the component (SVG path data or anchors); ends its live shape." },
+        op: OP
+      },
+      required: ["layerId", "componentIndex"],
+      additionalProperties: false
+    },
+    annotations: { title: "Edit a shape component", ...WRITE_IDEMPOTENT5 },
+    handler: ({ layerId, componentIndex, ...rest }) => {
+      const id = shapeId(layerId);
+      const change = geometry(rest);
+      if (change.shape === void 0 && change.subpaths === void 0 && change.op === void 0) throw new LayerOperationError("Give shape, subpaths or op to change.");
+      return controller.setShapeComponent(id, componentIndex, change);
+    }
+  };
+  const addComponent = {
+    name: "add_shape_component",
+    title: "Add a shape component",
+    description: "Adds a component to a shape layer and combines it with the components below it by op: combine (union), subtract, intersect or exclude, as Photoshop\u2019s path operations. Goes on top unless index is given. One undo step. Returns the shape.",
+    inputSchema: {
+      type: "object",
+      $defs: DEFS2,
+      properties: { layerId: LAYER_ID5, ...GEOMETRY2, op: OP, index: { type: "integer", minimum: 0, description: "Position among the components, 0 = bottom (default the top)." } },
+      required: ["layerId"],
+      additionalProperties: false
+    },
+    annotations: { title: "Add a shape component", ...WRITE7 },
+    handler: ({ layerId, index, ...rest }) => controller.addShapeComponent(shapeId(layerId), geometry(rest), index)
+  };
+  const removeComponent = {
+    name: "remove_shape_component",
+    title: "Delete a shape component",
+    description: "Deletes one component of a shape layer (the last one cannot go: delete the layer instead). One undo step. Returns the shape.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID5, componentIndex: COMPONENT_INDEX }, required: ["layerId", "componentIndex"], additionalProperties: false },
+    annotations: { title: "Delete a shape component", ...DESTRUCTIVE6 },
+    handler: ({ layerId, componentIndex }) => controller.removeShapeComponent(shapeId(layerId), componentIndex)
+  };
+  const merge = {
+    name: "merge_shape_components",
+    title: "Merge shape components",
+    description: "Merge Shape Components: the area a shape\u2019s components combine to (after their path operations) becomes one plain component; live shapes become paths. The look is unchanged. One undo step. Returns the shape.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID5 }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Merge shape components", ...DESTRUCTIVE6 },
+    handler: ({ layerId }) => controller.mergeShapeComponents(shapeId(layerId))
+  };
+  return [get, add2, update, setComponent, addComponent, removeComponent, merge];
+}
+
 // src/image-editor/tools.ts
 var LAYER_PATH = /^layers\.([^.]+)\.(.+)$/;
 function adjustmentsSummary(adjustments) {
@@ -9759,6 +10245,7 @@ function createImageEditorToolProvider(controller, options = {}) {
       ...createImageLayerTools(controller),
       ...createImageTransformTools(controller),
       ...createImageSmartObjectTools(controller),
+      ...createImageShapeTools(controller),
       ...createImageEffectTools(controller),
       ...createImagePaintTools(controller),
       ...createPigmentTools(),
@@ -10099,6 +10586,8 @@ function layerBadge(layer) {
       return layer.annotation.type === "text" ? "T" : "ann";
     case "smart":
       return "so";
+    case "shape":
+      return "shp";
   }
 }
 function dropZone(fraction, isGroup) {
@@ -10138,7 +10627,7 @@ function layerMenu(controller) {
     { action: "delete-mask", label: "Delete Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask", label: active?.mask?.enabled === false ? "Enable Layer Mask" : "Disable Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask-link", label: active?.mask?.linked === false ? "Link Layer Mask" : "Unlink Layer Mask", enabled: Boolean(active?.mask && !active.mask.source) },
-    { action: "rasterize", label: "Rasterize Layer", enabled: active?.type === "annotation" || active?.type === "smart" || isPixel && Boolean(active?.type === "pixel" && active.filters?.length) },
+    { action: "rasterize", label: "Rasterize Layer", enabled: active?.type === "annotation" || active?.type === "smart" || active?.type === "shape" || isPixel && Boolean(active?.type === "pixel" && active.filters?.length) },
     { action: "convert-smart", label: "Convert to Smart Object", enabled: Boolean(active && active.type !== "annotation") },
     { action: "edit-contents", label: "Edit Contents", enabled: active?.type === "smart" },
     { action: "smart-via-copy", label: "New Smart Object via Copy", enabled: active?.type === "smart" },
@@ -11074,6 +11563,7 @@ export {
   DEFAULT_BRUSH,
   DEFAULT_DEPTH_MASK,
   DEFAULT_GLOBAL_LIGHT,
+  DEFAULT_MITER_LIMIT,
   DEFAULT_MIXER,
   DEFAULT_REFINE_EDGE_PARAMS,
   DEFAULT_SELECTION_TOOL_OPTIONS,
@@ -11107,6 +11597,7 @@ export {
   LAYER_EFFECT_KINDS,
   LAYER_EFFECT_MENU,
   LEGACY_PROCESS_VERSION,
+  LIVE_SHAPE_KINDS,
   LUMA_709,
   LayerCompositor,
   LayerEffectError,
@@ -11143,6 +11634,8 @@ export {
   SELECTION_MODIFY_OPS,
   SELECTION_TOOLS,
   SHADOW_AMBIENT,
+  SHAPE_OPERATIONS,
+  SHAPE_RENDER_MARGIN,
   SMART_RENDER_MARGIN,
   SUPPORTED_ADJUSTMENT_KEYS,
   SelectionGesture,
@@ -11175,8 +11668,11 @@ export {
   adjustmentNodeFromLegacy,
   adler32,
   anchorPoint,
+  annotationBlend,
   annotationLayerFor,
   annotationLayerName,
+  annotationOfLayer,
+  annotationOfShape,
   applyAdjustmentLayers,
   applyAdjustments,
   applyBoxBlur,
@@ -11226,6 +11722,7 @@ export {
   colorRange,
   combineSelections,
   compileAdjustmentLayer,
+  componentPath,
   compositeSurfaceOver,
   computeHistogram,
   computeSelectionBounds,
@@ -11250,11 +11747,13 @@ export {
   createImagePaintTools,
   createImagePsdTools,
   createImageSelectionTools,
+  createImageShapeTools,
   createImageSmartObjectTools,
   createImageTransformTools,
   createPigment,
   createPigmentTools,
   createSelectionMask,
+  createShapeLayer,
   curveLut,
   curveLutFromLevels,
   curvePointToBox,
@@ -11271,6 +11770,7 @@ export {
   defaultAdjustmentParams,
   defaultEffectGradient,
   defaultLayerEffect,
+  defaultShapeName,
   deflate,
   deflateRaw,
   depthMaskAlpha,
@@ -11322,6 +11822,7 @@ export {
   findLayerControl,
   finishTile,
   flattenLayers,
+  flattenPath,
   flipCorners,
   formatControlValue,
   fullSelection,
@@ -11387,6 +11888,7 @@ export {
   isPng,
   isQuarterTurn,
   isQuarterTurnSwapped,
+  isRenderedLayer,
   isSelectionEmpty,
   isSelectionMode,
   isSeparableBlendMode,
@@ -11420,15 +11922,19 @@ export {
   levelsValue,
   linearSrgbToXy,
   linearToSrgb,
+  liveComponent,
+  liveShapeSubpaths,
   loadImageEditorDocument,
   loadMixer,
   magicWand,
   mapCropHandle,
   mapLayer,
+  mapSubpaths,
   maskSummary,
   matrixFromCorners,
   matrixFromParams,
   mergeLayerEffect,
+  mergeShapeComponents,
   migrateSerializedImageEditorState,
   migrateToLayeredState,
   mixPigment8,
@@ -11453,20 +11959,26 @@ export {
   normalizeFilter,
   normalizeLayerEffects,
   normalizeLayerMask,
+  normalizeLiveShape,
   normalizeMixer,
   normalizePlacement,
   normalizeProcessVersion,
   normalizeRect,
   normalizeRefineEdgeParams,
+  normalizeShapePaint,
+  normalizeShapeStroke,
   normalizeSmartFilter,
   normalizeStoredAdjustments,
+  normalizeSubpaths,
   offsetLayer,
+  offsetShape,
   offsetSmartObject,
   openPsdFile,
   packRgba,
   parseAdjustmentBlock,
   parseBlend,
   parseColor,
+  parseCssColor,
   parseDataUrl,
   parseEffectColor,
   parseLfx2,
@@ -11502,6 +12014,7 @@ export {
   rangeLightness,
   rasterContents,
   rasterMaskFromLegacy,
+  rasterizeCoverage,
   rasterizeDab,
   rasterizeSmartObject,
   readAdjustmentControls,
@@ -11524,12 +12037,17 @@ export {
   removeSmartFilter,
   renderLayerEffects,
   renderLayeredBase,
+  renderShape,
+  renderShapeRect,
   renderSmartObject,
   replaceContents,
   requireLayer,
+  requireOperation,
+  requireShapeLayer,
   requireSmartObject,
   requireUnlocked,
   rerender,
+  rerenderShape,
   resizePixels,
   resizeSelection,
   resizeWarpMesh,
@@ -11569,6 +12087,12 @@ export {
   setSmartFilterMask,
   setSmartFiltersEnabled,
   setSmartPlacement,
+  shapeAsPixelLayer,
+  shapeFromAnnotation,
+  shapeGeometryBounds,
+  shapeLayers,
+  shapeOutline,
+  shapeRenderClip,
   shiftCoverage,
   smartFilterRows,
   smartObjectLayers,
@@ -11598,6 +12122,7 @@ export {
   toneRange,
   transformHomography,
   transformMap,
+  transformShapeComponents,
   transformSurface,
   transformedBounds,
   transformedBox,
@@ -11610,6 +12135,7 @@ export {
   updateLayerEffect,
   updateLayerFilter,
   updateLayerMaskProps,
+  updateShapeLayer,
   updateSmartFilter,
   uvToXy,
   validateEffectGradient,