AlexandrAI AGENTS.md
agents-md

HTML Editor Sidebar Page and Layer Agent Guide

Agent guide for SidebarPanel page creation, active-node selection, removal, and slide layer selection.

AGENTS.md

Guidance for coding agents working on HTML Editor Sidebar Page and Layer in the html-editor project.

Project overview

This guide covers src/renderer/src/ui/SidebarPanel.tsx. The sidebar manages top-level document nodes as pages and exposes slide children as selectable layer rows. It is the UI path for adding slides, sheets, and sections outside the toolbar.

Primary source files

  • src/renderer/src/ui/SidebarPanel.tsx owns page list and layer list behavior.
  • src/model/command.ts applies topnode.add and topnode.remove commands.
  • src/renderer/src/state/editorStore.ts stores activeNodeId and selectedIds.
  • src/model/schema.ts defines slide, sheet, and section top nodes.

Setup commands

npm install npm test npm run typecheck npm run build

Use npm test with command tests when page add or remove behavior changes.

Change rules

  • Add pages through topnode.add so undo and redo stay available.
  • Remove pages through topnode.remove and preserve the removed node payload.
  • Do not allow removal when the document has only one top-level node.
  • When removing the active node, choose a neighboring node as the next active node.
  • Layer selection should only show children for the active slide; sheets and sections do not expose slide layers.

Testing

Cover add slide, add sheet, add section, remove inactive page, remove active page, and layer row selection. Verify activeNodeId and selectedIds after each operation.

PR checklist

  • Page operations use command history.
  • Active page fallback is deterministic.
  • Layer rows select box node ids without changing page order.
  • Full npm test and npm run typecheck pass.