Editor: render a layer as one framed row of mark glyphs

A layer is one plotting space with several marks stacked in z-order, so it now renders as a single frame holding its child marks as a row of glyphs, badged with a new 'layers' glyph — instead of offset stacked cards that read as separate spaces and hid the lower glyphs. Each mark stays an individual treeitem, so selection and Alt+up/down z-order reorder are unchanged.

src/app/components/CompositionWireframe.test.tsx

@@ -20,6 +20,7 @@ import { markIconName } from './mark-icon';
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 const COMPOSED = JSON.stringify({ vconcat: [{ mark: 'point' }, { mark: 'bar' }] }, null, 2);
+const LAYERED = JSON.stringify({ layer: [{ mark: 'bar' }, { mark: 'line' }] }, null, 2);
 
 let container: HTMLDivElement;
 let root: Root;
@@ -109,6 +110,26 @@ describe('CompositionWireframe', () => {
     expect(COMPOSED.slice(target.offset, target.offset + target.length)).toContain('"bar"');
   });
 
+  test('a layer discloses its marks as reorderable treeitems (z-order)', async () => {
+    // The layer renders as one frame of mark glyphs, but each mark stays a treeitem
+    // so selection and Alt+arrow z-order reorder keep working.
+    setEditableSpec(LAYERED);
+    await renderOpen();
+    expect(treeItems().map((el) => el.dataset.key)).toEqual(['root', 'layer|0', 'layer|1']);
+    act(() => {
+      item('root').dispatchEvent(key({ key: 'ArrowDown' }));
+    });
+    act(() => {
+      item('layer|0').dispatchEvent(key({ key: 'ArrowDown', altKey: true }));
+    });
+    expect(useAppStore.getState().composeRequest).toMatchObject({
+      kind: 'move',
+      arrayPath: ['layer'],
+      from: 0,
+      to: 1,
+    });
+  });
+
   test('Alt+ArrowDown asks the editor to reorder the focused view down', async () => {
     setEditableSpec(COMPOSED);
     await renderOpen();