Device preview + responsive spacing in the Style panel

Style panel gets a real-viewport iframe preview (390/820/1280px) tied to the
breakpoint tab, reloaded after each edit, and spacing/gap controls per
breakpoint. The editor does not boot inside the preview frame. Mock and
tests mirror the new k6n layout template.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

test/style.test.ts

@@ -25,7 +25,8 @@ describe('describeStyle', () => {
     expect(byName('paddingTop')).toMatchObject({ kind: 'spacing', box: 'padding', side: 'top', overrides: 'padding', token: '--k6n-sp-{value}', inferred: false })
     expect(byName('gap')).toMatchObject({ kind: 'gap', inferred: false })
     expect(byName('flow').responsive).toEqual(['mobile', 'tablet', 'desktop'])
-    expect(byName('gap').responsive).toEqual([]) // spacing is not a breakpoint override (the template has no classes for it)
+    expect(byName('gap').responsive).toEqual(['mobile', 'tablet', 'desktop'])
+    expect(byName('padding').responsive).toEqual([]) // only declared per-side in the breakpoint def
     expect(isWrapperSchema(layout)).toBe(true)
   })