openpencil/packages/docs/programmable/sdk/api/components/layout-controls-root.md
Danila Poyarkov fcdf7f1d4c feat(app): migrate layout size controls
- Replace duplicated width and height binding branches with shared semantic fields

- Switch edited Hug and Fill dimensions to Fixed in one reversible transaction

- Add typed LayoutControls actions, documentation, and visual coverage
2026-07-13 15:34:25 +03:00

1.3 KiB

title description
LayoutControlsRoot Headless root primitive for auto-layout and sizing controls.

LayoutControlsRoot

LayoutControlsRoot exposes the slot contract returned by useLayout() as a structural primitive. Use it when you want a reusable layout-controls shell with app-owned markup.

Width and height fields can remain editable while their axis uses Hug or Fill. On the first actual numeric mutation, updateAxisSize() records the sizing transition and changes that axis to Fixed. Compose the field with BindableValue and an interaction-batch-capable provider when sizing mode, variable detachment, and the numeric value must commit or roll back as one undo step. Focus and picker opening do not change sizing mode.

Use setAxisSizing('width', mode) or setAxisSizing('height', mode) for sizing menus. The older axis-specific setters are not part of the current contract.

Generated API reference

The following tables are extracted from the Vue source and JSDoc during the documentation build.