Padding shorthands show in the spacing box, and padding edits stay compact

[LilianBarbe]

The problem

The spacing box has one field per side, so a rule written padding: 1rem 2rem filled none of them: the box read as empty while the padding applied on the page, and the shorthand only showed under Custom properties.

Dragging a side of such a rule then appended a longhand beside the shorthand it overrode. Four drags left five declarations.

The change

Reading. The resolver projects padding, padding-block, padding-inline and margin (one to four values) onto the sides they set. The box shows them, and an edit goes to the rule that holds the shorthand. The shorthand stays a property of its own, still edited and cleared whole under Custom properties. Reading never rewrites the source.

Writing. A committed padding edit rewrites the rule's own padding in its shortest form, where its first padding declaration stood:

• padding when the four sides agree,
• else padding-block / padding-inline for each pair that agrees,
• else the sides.

Only what the rule declares is compacted. Alt-click on a side grouped into a shorthand splits it and keeps the other sides.

The new module is src/features/style/model/spacingShorthand.ts. It is wired into resolved.ts (reading), and into cssRegions.ts and useEditorRuleEdits.ts (writing).

Choices worth a look

• var() is left as written. A multi-side value holding a var() or env() may substitute several lengths, so it is neither split nor compacted until every side overrides it. A var() side is never grouped either: the shorthand it would make is one the next edit could not split again, so the result would depend on the order of the edits.
• Axis properties. Two agreeing pairs are written padding-block + padding-inline, not padding: a b. Sides are physical, as the box and the canvas bands already are.
• !important inside a rule. A later declaration now wins unless an earlier one is !important and it is not. The per-rule fold took the last declaration regardless.
• Margin is read only. A margin edit still appends a longhand; compacting it is left out of this PR.

Tests

• test/renderer/style/spacingShorthand.test.js: 16 cases on the model, through the real parser, cascade and resolver. They cover the values the box cannot read side by side, !important, queries, and the assertion on a non-padding property.
• test/renderer/style/spacingShorthandPanel.test.js: the real EmbedEditor in jsdom, with Shift, Alt, plain and reset drags, checked against the CSS written. It fails without the change.
• npm run check:changed passes.

🤖 Generated with Claude Code