Image Editor — layered raster editor

# Install `image-editor` — Image Editor — layered raster editor

> Layered raster editor: layers, transform, paint, filters, layer styles, 1-click background removal, AI command registry, export.

📚 Knowledge base : https://resource.rahmanef.com/llms.txt
📦 Slice detail   : https://resource.rahmanef.com/slices/image-editor
🧠 JSON catalog   : https://resource.rahmanef.com/api/knowledge?slice=image-editor
🔗 Source         : https://github.com/rahmanef63/resource-site/tree/main/frontend/slices/image-editor

## 1. Install

```bash
npx rahman-resources add image-editor
# alias: npx rr add image-editor
```

The CLI copies `frontend/slices/image-editor/` into your project + augments `.env.example` + installs npm deps automatically. Run it from your project root.

## 2. What it ships

- npm: `lucide-react`, `konva`, `react-konva`, `@imgly/background-removal`, `class-variance-authority`, `radix-ui`
- shadcn primitives: `button`, `input`, `label`, `separator`, `select`, `scroll-area`, `switch`, `dropdown-menu`, `tooltip`, `resizable`, `popover`

## 3. Wire it up

Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui + Konva. A layered raster image editor. Image I/O is via props; background removal runs in-browser (no backend).

STEP 1 — Install. `npx rr add image-editor`. Ensure `@/features/image-editor` resolves in tsconfig paths and Tailwind scans the slice folder.

STEP 2 — Deps. npm: `konva react-konva @imgly/background-removal lucide-react`. shadcn: `npx shadcn@latest add button input slider select tabs scroll-area separator tooltip label switch popover`.

STEP 3 — Mount. It is fully self-contained; the Konva stage is loaded client-only (next/dynamic ssr:false) inside the slice, so just render it in a height-bearing box:
```tsx
"use client";
import { ImageEditor } from "@/features/image-editor";
export default function Page() {
  return (
    <div className="h-dvh">
      <ImageEditor onSave={(dataUrl) => console.log(dataUrl)} />
    </div>
  );
}
```
Props: `initialImage?` (data/object/remote URL opened on mount), `width?`/`height?` (blank canvas size, default 1080²), `onSave?(dataUrl)` (fires from the Save button with a PNG data URL; omit to hide Save), `className?`.

STEP 4 — Background removal. The "Remove BG" button calls removeImageBackground() from @imgly/background-removal — free, in-browser, no key. First run downloads a small model to the browser cache, then runs locally via WASM. You can also import `removeImageBackground(src) => Promise<pngDataUrl>` directly.

STEP 5 — Export. PNG/JPG/WebP at 1×/2×/3× via the Export tab, or call `exportStage(stage, {...})` / `stageToDataURL(stage, {...})`. The container owns the box — render inside h-dvh / h-full.

## Rules of engagement

- shadcn-only UI primitives. No raw `<button>` / `<dialog>` / native date or file inputs.
- 200-line hard cap per source file (extract neighbours when over).
- All Convex queries hit an index (`.withIndex(...)`); never bare `.collect()`.
- Public mutations/queries declare `args:` validators + authz.
- Full ruleset: https://resource.rahmanef.com/best-practice