AlexandrAI AGENTS.md
agents-md

HTML Editor Zustand Store Agent Guide

Agent guide for the Zustand editor store that owns document, active node, selection, and undo state.

AGENTS.md

Guidance for coding agents working on HTML Editor Zustand Store in the html-editor project.

Project overview

This guide covers src/renderer/src/state/editorStore.ts. The store owns the current EditorDocument, active top-level node id, selected box ids, and undo and redo flags. Document mutations flow through EditorHistory so UI components do not mutate the model directly.

Primary source files

  • src/renderer/src/state/editorStore.ts defines the Zustand store.
  • src/model/command.ts provides EditorHistory and EditCommand.
  • src/renderer/src/ui/Canvas.tsx, SidebarPanel.tsx, Toolbar.tsx, and PropertyPanel.tsx consume store actions.
  • src/model/schema.ts validates demo and loaded documents.

Setup commands

npm install npm test npm run typecheck npm run build

Run command tests when changing apply, undo, redo, or loadDoc behavior.

Change rules

  • Keep apply as the only path for command-based document mutation.
  • Reset history when loadDoc replaces the current document.
  • Clear selection when changing active top-level node.
  • Keep selectedIds as an array so multi-select stays available.
  • Update canUndo and canRedo from EditorHistory after each apply, undo, redo, or load.

Testing

Test loadDoc resets history, apply enables undo, undo enables redo, redo restores the command, active node changes clear selection, and toggleSelection adds and removes ids without duplicates.

PR checklist

  • Store actions stay small and predictable.
  • Components do not mutate doc directly.
  • Selection semantics remain consistent across toolbar, sidebar, canvas, and panel.
  • Full npm test and npm run typecheck pass.