Locking a canvas layer doesn't stop it being reordered or displaced, despite the lock's stated purpose

[seekmistar01]

Where

prototype/canvas-layer-controls.html — the layer stack editor (reachable from the preview shell's visual-direction path). Functions move() (reorder primitive) and renderLayer (the ▲/▼ buttons).

Problem

The screen lets a creator lock brand elements, and its own copy says locking keeps a layer from moving:

• Gate check: "Lock the logo or show branding so it cannot move by accident while editing."
• Empty state: "No layout conflicts. Reorder, lock, and save as a reusable show layout."

But locking only gates Remove. Reordering ignores locked entirely:

function move(index, delta) {
  const target = index + delta;
  if (target < 0 || target >= layers.length) { return; }
  const copy = layers.slice();
  const item = copy.splice(index, 1)[0];
  copy.splice(target, 0, item);
  layers = copy;
  render();
}

The ▲/▼ buttons are disabled only at the stack ends, never for a locked layer.

Repro (default sample — no setup)

The sample ships background (index 4) locked.

1. Click ▲ on the locked background row → it moves above brand. The locked layer just moved.
2. Or click ▼ on the unlocked brand row → it displaces the locked background without ever touching the locked layer.

Since top-of-stack draws on top, either path silently changes the rendered composition — exactly the "moved by accident" the lock is supposed to prevent.

Expected

A locked layer cannot be moved, and cannot be displaced by moving an unlocked neighbor into its slot. The ▲/▼ buttons reflect this. Unlocked reorders are unaffected.

Proposed fix

Extract a pure reorderLayers(list, index, delta) that refuses the move when the moved layer or the destination neighbor is locked; have move() delegate to it; disable ▲/▼ for locked / adjacent-locked layers.