hanzo-dev
be971b09e7
Rebuilds the free-form + snap-to-grid layout engine on top of the advanced origin/main (footer dock + responsive work) and unifies the two grid-cell mechanisms into one: - grid-config drives the dock's `--panel-col-min` (default 160px, range 140–360, matching the base .panels-grid rule + the dock slider) — the duplicate `--grid-cell` override is gone. One variable, one way. Default 160 = the grid is byte-identical until the slider moves it, so no fixed-span panel shrinks. - window.worldGrid exposes the engine to the footer dock's Grid⇄Free toggle + cell-size slider (App.gridApi delegates to it). - main.css layout-engine section is append-only after the dock CSS; only NEW selectors (corner grip, snap overlay, free-mode absolute layout, mobile guard). Live News (video) now resizes freely with the video filling at any size (CTO ask): the panel carries id="live-news" so the intended `#live-news .panel-content` fill CSS (padding:0 + flex-column) finally applies — the 16:9 `.live-news-player` fills the container edge-to-edge (was 16px short under generic padding). With the new right-edge + corner grips and the uncapped column snap (span up to full width), Live News drags to 2-3 cols or full-width-top in grid mode and to any pixel size in free mode; the width-driven video fills at every size. Tests (13, all green; typecheck + build pass): 4 original drag/resize + 7 layout-engine (grid snap, corner resize, overlay, cell re-snap, free drag+resize persist across reload, map participates, toggle) + 2 real-app live-news (grid default→3col→full-width fill setup + resize, free arbitrary-size). Screenshot: e2e/layout-shots/live-news-fullwidth.png (full-width-top, large video area). Claude-Session: https://claude.ai/code/session_013jh8aka8q8RvhhVQ1psMeW
14 lines
502 B
HTML
14 lines
502 B
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Layout Engine Harness</title>
|
|
</head>
|
|
<body>
|
|
<div class="main-content"><div id="app"></div></div>
|
|
<button class="panels-reset-btn" id="resetLayoutBtn" type="button" style="position:fixed;bottom:8px;right:8px;z-index:9999">Reset layout</button>
|
|
<script type="module" src="/src/e2e/layout-harness.ts"></script>
|
|
</body>
|
|
</html>
|