feat: preview state styles during canvas drags

[stravo1]

When a state variant is active, canvas drag handles now read and write the active style key instead of falling back to the base style. This keeps rotation, resize, spacing, movement and border radius previews aligned with the selected state.

Screen.Recording.2026-07-20.at.4.50.17.PM.mov

[greptile-apps]

Confidence Score: 3/5

The core drag-to-state wiring works correctly for pixel-based styles, but the move handler has a unit-stripping bug that corrupts percentage-positioned state styles on drag.

The handleMove function reads the active state's left/top via getNumberFromPx, which silently returns 0 for any non-px value. A block whose state style uses percentage positioning will have its left/top reset to a pixel value on the first drag, overwriting the original layout intent. All other drag handlers (resize, rotate, spacing) look correct.

frontend/src/components/BlockEditor.vue — the handleMove start-position calculation

_{Reviews (1): Last reviewed commit: "fix: preview state styles during canvas ..." | Re-trigger Greptile}

[greptile-apps]

If the active state's left/top is a percentage (e.g. "50%"), getNumberFromPx returns 0 (it only strips "px"), so the drag starts from 0 and overwrites the % value with 100px-style pixels. BoxResizer handles this with a blockStartWidth?.includes("%") guard; the same logic is needed here — or simply keep offsetLeft/offsetTop as the start since the state style is already applied to the DOM.

Suggested change

	const activeLeft = props.block.getActiveStyleValue("left");
	const activeTop = props.block.getActiveStyleValue("top");
	const startLeft = hasStyleValue(activeLeft)
	? getNumberFromPx(activeLeft)
	: (props.target as HTMLElement).offsetLeft || 0;
	const startTop = hasStyleValue(activeTop)
	? getNumberFromPx(activeTop)
	: (props.target as HTMLElement).offsetTop || 0;
	const startLeft = (props.target as HTMLElement).offsetLeft || 0;
	const startTop = (props.target as HTMLElement).offsetTop || 0;

[greptile-apps]

hasStyleValue is copy-pasted into BorderRadiusHandler.vue, BoxResizer.vue, and useSpacingHandler.ts; extract it to a shared util.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!