window.VMPrintFixtureStore = window.VMPrintFixtureStore || Object.create(null);
window.VMPrintFixtureStore["21-zone-map-sidebar"] = {"documentVersion":"1.1","layout":{"pageSize":{"width":600,"height":800},"margins":{"top":50,"right":50,"bottom":50,"left":50},"fontFamily":"Arimo","fontSize":10,"lineHeight":1.4},"fonts":{"regular":"Arimo","bold":"Arimo"},"styles":{"h1":{"fontSize":24,"fontWeight":"bold","marginBottom":12,"keepWithNext":true},"h2":{"fontSize":14,"fontWeight":"bold","marginBottom":8,"keepWithNext":true},"p":{"marginBottom":8},"sidebar-label":{"fontSize":9,"fontWeight":"bold","marginBottom":4,"color":"#555555"},"sidebar-body":{"fontSize":9,"marginBottom":6,"color":"#333333"}},"elements":[{"type":"h1","content":"Zone Map: Independent Layout Regions"},{"type":"p","content":"This fixture demonstrates the zone-map element. The two-column layout below uses a 70/30 split. Each zone is an independent layout session — a bounded region on the page map. Neither zone knows about the other, and content in one zone never spills into the adjacent zone."},{"type":"zone-map","properties":{"style":{"marginTop":12,"marginBottom":12}},"zones":[{"id":"main","elements":[{"type":"h2","content":"Main Article"},{"type":"p","content":"This is the main content zone. It occupies two-thirds of the available width. Content flows top-to-bottom inside this region independently of the sidebar. The zone packager runs a full layout pass — paragraphs, headings, images, and nested stories are all handled by the same block-layout machinery used throughout the engine."},{"type":"p","content":"A second paragraph in the main zone. Because this zone is an independent layout context, its content height has no structural coupling to the sidebar. If this paragraph were removed, the sidebar would remain unchanged."},{"type":"p","content":"Third paragraph. The zone-map height in the document flow is the maximum of all zone heights — the tallest column determines the space consumed."}]},{"id":"sidebar","elements":[{"type":"sidebar-label","content":"SIDEBAR"},{"type":"sidebar-body","content":"This sidebar zone occupies one-third of the available width. It runs its own independent layout pass."},{"type":"sidebar-body","content":"Column widths are resolved via solveTrackSizing using flex (fr) units — the same solver used by tables."},{"type":"sidebar-label","content":"KEY FACT"},{"type":"sidebar-body","content":"Zones are parallel peers on the page map, not hierarchical parent-child nodes in a tree."}]}],"zoneLayout":{"columns":[{"mode":"flex","fr":2},{"mode":"flex","fr":1}],"gap":16}},{"type":"p","content":"Content below the zone-map resumes in the normal document flow. The zone-map element occupies exactly the height of its tallest zone in the main timeline."},{"type":"h2","content":"Equal Columns (default)"},{"type":"p","content":"A zone-map without a columns definition defaults to equal-width zones for however many regions are declared."},{"type":"zone-map","properties":{"style":{"marginTop":8,"marginBottom":8}},"zones":[{"id":"col-1","elements":[{"type":"h2","content":"Region One"},{"type":"p","content":"First equal-width zone. Each region gets one-third of the available width minus gaps."}]},{"id":"col-2","elements":[{"type":"h2","content":"Region Two"},{"type":"p","content":"Second equal-width zone. Independent layout pass."}]},{"id":"col-3","elements":[{"type":"h2","content":"Region Three"},{"type":"p","content":"Third zone. The zone-map height equals the tallest of these three regions."}]}],"zoneLayout":{"gap":12}},{"type":"p","content":"Document flow continues normally after the three-column zone-map."}]};
