InspectorPanel

When to use

Use InspectorPanel for the property panel that stays bound to the current selection in a design tool or low-code builder. Describe the properties as a schema; the panel derives a control per kind, reads values by key, and emits changes by key.

It is not a form: for submission semantics, validation, and field dependencies use Form or ProForm. To edit a single property, reach for Slider, ColorPicker, or Segmented directly. The five built-in presets are only a default; domain properties such as weight, link target, or pinned work just as well, as shown in the custom schema example.

Import

Props

Field types form the InspectorField discriminated union, narrowed by kind:

Shared fields: key is the property path and the emitted path, `label` is the visible label and the control aria-label, plus optional hint and disabled.

Events

The emitted shape is decided by the field, not by what was typed. With unit the panel emits the string "12px"; without unit it emits the number 12. Clearing a numeric input emits null, meaning delete the property rather than set it to 0. A token swatch emits that token's value, or var(--token) when no literal value was given.

Accessibility

• Every control carries an aria-label taken from the field label. The four spacing inputs are named per side, so they never share one name.
• In a length row the slider and the numeric input are two ways into the same property and share one accessible name; the slider points at the visible label through aria-labelledby, and the differing roles keep them distinguishable.
• The link toggle exposes its state through aria-pressed rather than color alone.
• Token swatches take their accessible name from tokenSource[].label, falling back to token, rather than the var(--color-x) string, so a screen reader announces the human name instead of a variable. The token name printed under the palette is a current-value readout for sighted users, not an accessibility fallback.
• Category folding uses Collapsible, which owns aria-expanded and keyboard access.
• Mixed values are never conveyed by gray text alone: text and numeric kinds use a placeholder, while toggle and enum kinds put readable text beside the control.

Pitfalls

• `onChange` can fire several times in one tick (four times for a linked spacing edit). Consumers must use a functional update, setState((prev) => …). Writing setState({ ...style, [path]: value }) lets the last three calls overwrite the first three, which looks like "only one side applied". Pass onBatchChange to receive them as one call instead.
• commitMode covers sliders, inputs, and the ColorPicker inside the swatch popover alike. Under commit the picker emits on pointer release, blur, or Enter, and every mid-drag frame stays inside the panel; the picker runs uncontrolled during that drag and resyncs only when the external props value changes.
• tokenSource[].token must carry the `color-` prefix (color-primary, not primary). Tailwind v4 @theme names include the prefix, and a bare name paints nothing while raising no error.
• The mixed sentinel is Symbol.for("hulian.inspector.mixed") and cannot survive JSON serialization. If the property table crosses the network or storage, translate it to your own marker at that boundary and back.
• Clearing a numeric input emits null, not 0. Treat null as "delete this property" so that "unset" stays distinct from "set to zero".
• The panel holds no domain value. If props is not written back, the control will not move, apart from the draft in commit mode and the slider mid-drag. It is a controlled component, not a self-contained editor.
• The panel chrome (title, empty state, mixed, linkSides, the four side names, the two color control names) follows the ConfigProvider locale, so wrapping the tree in <ConfigProvider locale={enUS}> turns it English. Priority is labels / title / emptyText prop first, then the locale, then the built-in Chinese fallback.
• Built-in preset field labels are still Chinese and are not covered by the locale — they live in the sections data, not in the panel. For a fully English surface, pass your own sections.

Related

Form · ProForm · ColorPicker · ColorSwatchPicker · Slider · Segmented · Collapsible · Flow