Editor state API

The builder's state layer is exported with no React in it. You can put the editor's chrome in your own shell, build a custom inspector, or test editor behaviour without a DOM.

import {
  createEditorState,
  editorReducer,
  inspectorModel,
} from 'react-bannerkit/builder'

Creating state

const state = createEditorState(template)

Returns an EditorState holding the template, the current selection, and the undo history.

The reducer

const next = editorReducer(state, { type: 'splitPanel', panelId, dir: 'cols' })

Every action is a plain object with a type discriminant. The reducer is pure — it returns a new state and never mutates the input.

Action types

Action	Purpose
`splitPanel`	Split a panel into columns or rows.
`setSplitRatio`	Move a divider.
`deletePanel`	Remove a panel, giving its space to its sibling.
`addElement`	Place a new element in a panel.
`moveElement`	Reposition a freely placed element.
`updateElement`	Change an element's fields.
`deleteElement`	Remove an element from its panel.
`select`	Set the active selection.
`undo` / `redo`	Walk the history stack.

Inspecting

const fields = inspectorModel(state)

Returns a structured description of the currently selected element, suitable for rendering a property panel. Each field includes its current value, a label, and the action needed to change it.

History

The undo stack collapses rapid edits (like dragging a slider) into a single step using a trailing debounce. The debounce window is configurable at state creation time.