Restore the five layouts' visual and behavioral fidelity to VueForge's fd793696

[KolesnikovKirill]

What and why

You said components now roughly match VueForge's fd793696 commit, but the layouts still didn't.

Checked directly rather than by feel: at that exact commit, packages/layouts held VfAdminLayout, VfAppShell, VfDocumentLayout, VfAdminShell, and VfSetupLayout — the direct ancestors of today's five, sharing the same style-entry file names. Diffed the CSS line by line:

Layout	fd79369	Before this PR
admin-layout	~260 lines	140 lines
app-shell	362 lines	83 lines	−77%
admin-shell	162 lines	63 lines	−61%
document-layout	286 lines	69 lines	−76%
setup-layout	293 lines	54 lines	−82%

Not typos — a deliberate simplification during the multiplatform rewrite that never got its sophistication back.

What changed

Restored what was actually lost, adapted to the architecture that rewrite correctly introduced (state as data-cm-* attributes the Razor adapter and a shared runtime controller both read, not Vue-only classes and scoped-slot-exposed functions) rather than reverting to VueForge's own, framework-only implementation:

• Admin layout — sidebar and header are fixed to the viewport again, not laid out in a static grid. A collapsed sidebar opens on hover or keyboard focus without leaving the collapsed state — restored as plain :is(:hover, :has(:focus-visible)) CSS, since that was already how VueForge's version did it too; no JS ever drove it. Responsiveness is a real @container query against the layout's own inline size (matching VueForge's --vf-bp-lg-down, which resolves to exactly 1024px — same as this design system's own --cm-breakpoint-lg) rather than the viewport, so an admin layout embedded in a narrower pane degrades the same way a narrow window would.
• App shell — sidebar and aside are sticky with their own capped height and scrollbar again, so content taller than the viewport no longer pushes past the bottom edge. The aside now collapses before the sidebar does on a narrowing window (two breakpoints, not one), matching the original.
• Admin shell — the workspace is an elevated card inset within the shell again: rounded top corners, its own border, margin on three sides, rather than flush with the sidebar. The topbar is sticky and deliberately dark in both themes, via the same background-inverse/text-inverse token pair tooltip.css and badge.css already use for exactly this contrast.
• Document layout — sidebar and aside are sticky with a capped, scrollable height again, the page gets a two-sided border once there's room to see it, and the aside now has its own breakpoint before the sidebar does.
• Setup layout — given an aside, it now sits beside the form once there's room, divided by one border, instead of always stacking above it: the wizard-with-illustration layout VueForge had, reimplemented with CSS grid rather than reverting to VueForge's own combinatorial one (this version only handles the header+main+aside split, not every brand/toolbar/aside permutation the original enumerated — a real, deliberate scope cut, not an oversight).

A real bug found while making this checkable

The showcase's own demo frame had no explicit width, so at its narrow default it always tripped every layout's own narrow-window behavior, and its border-radius/overflow: hidden gave position: fixed nothing to be relative to — those elements escaped the frame and pinned themselves to the real browser window instead. Added contain: layout paint to establish the frame as their containing block, and widened the showcase column enough (76rem) to clear every restored breakpoint, so the demos show their intended desktop form by default and only degrade to the mobile one when actually narrow — correctly, not by accident.

Verified against the real thing

Drove the live dev server over the Chrome DevTools protocol, not by reading the CSS and assuming: measured the escaped-fixed-position bug's exact pixel offset before the frame fix and confirmed containment after; drove the admin layout's collapse toggle and confirmed 288px → 76px; dispatched a real mouse-move onto the collapsed sidebar and confirmed hover-expand back to 288px while data-cm-sidebar-collapsed stayed "true"; emulated a 390px viewport and confirmed the mobile drawer's off-canvas start state, its post-toggle data-cm-mobile-sidebar-open and backdrop opacity, and its screenshot; screenshotted every layout in both themes, including the admin shell topbar contrast, which was wrong (near-black text on a near-black bar) before the background-inverse/text-inverse fix and correct after, in both themes.

Checks

npm run verify passes in full.