Asset tool

Asset layers (A) are the editor's home for user-supplied images and SVGs. Once an asset is on the canvas, you can:

• Move / scale / rotate / skew like any other layer
• Frame-clip it inside a custom shape
• Open the Image Edit sheet to apply Curves, Levels, HSL adjustments
• AI-remove the background with one click
• Erase parts of the image with a non-destructive mask

#Adding an asset

Two paths:

1. Open image from the start screen / file menu — the image becomes the base layer.
2. Asset stamp (A) — pick from the assets panel, then click or drag on the canvas to place. The assets panel collects every image you've dropped, plus icons stamped via the Iconify picker.

#Drag-to-size vs. click-to-stamp

• Drag on the canvas to set position and size in one gesture.
• Click to stamp at the panel's "default size" — set this once, place many.

#Image Edit sheet

Double-click an asset layer (or click Edit image in its inspector) to open the Image Edit sheet. Tabs:

• Adjust — Curves, Levels, HSL mixer (per-asset, non-destructive)
• Erase — paint a mask that hides parts of the image. The eraser brush has its own size and softness; "restore" mode brings erased pixels back.
• Remove BG — runs @imgly/background-removal on-device. The original image is preserved; the cutout is stored as a separate asset-background-removed resource so you can toggle it on / off without re-running.
• Frame — clip the image to a custom shape. Built-ins: rectangle, circle, rounded rect, triangle, hexagon. The clip shape itself becomes a sibling shape layer that you can edit independently.

All adjustments live in assetEditState on the layer. They round-trip through .img perfectly — re-opening a project keeps your curves curve and your erase mask painted exactly as you left them.

#Layer data shape

interface AssetLayerData {
  id: string
  type: 'asset'
  assetId: string                       // resource handle
  x: number; y: number
  width: number; height: number
  rotation: number
  opacity: number
  blendMode: BlendMode
  edits: AssetEditState                 // curves, levels, HSL, erase mask, BG-removed
  frame?: FrameClip                     // optional custom shape clip
  effects?: LayerEffects
  // ...
}

AssetEditState is an explicit, structured object — not a flag bag. Each adjustment carries enough state to be re-rendered from scratch in the worker. That's why per-asset edits don't degrade with reloads.

#Tips

• Big images run in the worker. The editor decodes via createImageBitmap and transfers the bitmap into the worker for adjustments — the main thread never blocks.
• AI background removal is on-device. It downloads the model the first time you use it (~50MB). Subsequent runs are instant.
• Frame-clip keeps the source intact. Clipping is rendered, not destructive — drag the frame off the asset and the full image returns.