AGENTS.md

Guidance for coding agents working on HTML Editor Property Panel Controls in the html-editor project.

Project overview

This guide covers src/renderer/src/ui/PropertyPanel.tsx. The panel inspects the current single selection and exposes controls based on node kind. It emits commands for box geometry, text style, chart data, grid structure, TSV paste, and section block operations.

Primary source files

• src/renderer/src/ui/PropertyPanel.tsx owns the panel controls.
• src/renderer/src/state/nodes.ts locates selected box, sheet, and section nodes.
• src/renderer/src/state/grid.ts supplies pure grid transforms.
• src/model/command.ts defines the command records applied by the panel.

Setup commands

npm install npm test npm run typecheck npm run build

Run npm test with command, grid, and nodes tests after changing panel data flow.

Change rules

• Only show panel controls when exactly one item is selected.
• Convert number inputs to rounded numeric values before creating box.set commands.
• Use style.set for individual style fields instead of rewriting the whole box.
• Use chart.set for chart data and preserve existing chart fields not being edited.
• Use grid.set for structural grid changes and block commands for section operations.

Testing

Cover empty selection, box geometry edits, text style edits, chart edits, grid row and column controls, TSV paste, section block move, section block add, and section block remove.

Failure modes

• Mixing multiple selected ids into the panel can apply edits to the wrong node.
• Direct mutation of selected nodes can bypass undo history.
• Parsing chart numbers without filtering invalid values can put NaN into the model.

PR checklist

• Every control emits a typed command.
• Undo restores the previous value.
• Hidden controls do not fire for incompatible node kinds.
• Full npm test and npm run typecheck pass.