From 44295b1b2db588063b6cfd95f6a46988cfb46a98 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 3 Jul 2026 16:19:05 +0200
Subject: [PATCH] feat(renderer): render image layer placeholders

---
 renderer/layers.ts   | 32 ++++++++++++++++++++++++++++++++
 renderer/renderer.ts |  2 ++
 2 files changed, 34 insertions(+)
 create mode 100644 renderer/layers.ts

diff --git a/renderer/layers.ts b/renderer/layers.ts
new file mode 100644
index 0000000..a2f44ac
--- /dev/null
+++ b/renderer/layers.ts
@@ -0,0 +1,32 @@
+import type { ImageDocument } from "@core/document";
+import type { Layer } from "@core/layer";
+import type { ViewportState } from "@editor/state";
+import { resolveTransformTargetBounds } from "@editor/transform-targets";
+import { clearScreenRect } from "./clear-rect";
+import { documentRectToScreenRect } from "./screen-rect";
+import type { RgbaColor, WebGlRendererContext } from "./types";
+
+const imageLayerColor: RgbaColor = [0.38, 0.42, 0.5, 1];
+const imageLayerInsetColor: RgbaColor = [0.48, 0.54, 0.64, 1];
+
+export function renderLayers(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState) {
+  for (const artboard of document.artboards) {
+    for (const layer of artboard.layers) renderLayer(context, document, viewport, layer);
+  }
+}
+
+function renderLayer(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, layer: Layer) {
+  if (!layer.visible) return;
+
+  if (layer.type === "group") {
+    for (const child of layer.children) renderLayer(context, document, viewport, child);
+    return;
+  }
+
+  const bounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.id });
+  if (!bounds) return;
+
+  const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
+  clearScreenRect(context, rect, imageLayerColor);
+  clearScreenRect(context, { x: rect.x + 4, y: rect.y + 4, w: Math.max(0, rect.w - 8), h: Math.max(0, rect.h - 8) }, imageLayerInsetColor);
+}
diff --git a/renderer/renderer.ts b/renderer/renderer.ts
index 91c1494..65f9d75 100644
--- a/renderer/renderer.ts
+++ b/renderer/renderer.ts
@@ -1,6 +1,7 @@
 import type { ImageDocument } from "@core/document";
 import type { EditorState } from "@editor/state";
 import { renderArtboard } from "./artboard";
+import { renderLayers } from "./layers";
 import { renderSelectionOverlay } from "./selection";
 import { renderTransformControls } from "./transform-controls";
 import type { WebGlRendererContext } from "./types";
@@ -45,6 +46,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
       for (const artboard of frame.document.artboards) {
         renderArtboard(rendererContext, artboard, frame.editor.viewport);
       }
+      renderLayers(rendererContext, frame.document, frame.editor.viewport);
 
       renderSelectionOverlay(rendererContext, frame.document, frame.editor);
       renderTransformControls(rendererContext, frame.document, frame.editor);