From e164965c8f54f8dd3b6c08963d9f669a8e4a9192 Mon Sep 17 00:00:00 2001 From: sarib Date: Wed, 12 Aug 2026 05:33:29 +0500 Subject: [PATCH] Reset the browser UI to one page, and keep the engine The web app had become a marketing site with a compressor inside it. This removes everything that was not part of compressing an image and rebuilds the interface as a single dashboard whose regions are all on screen at once. Gone: the hero and its headline, #learn, #desktop, #faq, the footer, the overflow nav, /compare and /download, the theme switch, the synthetic demo generator, the lifetime savings counter, the celebration bar, the keyboard shortcuts dialog, and the CSV/JSON/summary report export. tools/gen_compare_page.py went with the page it generated, and its CI step with it. The engine is untouched. worker.js, ss2.js and destinations.js are byte for byte what they were; the message contract between them and the UI is unchanged, which is why this is a UI reset and not a rewrite. What replaces app.css and app.js: web/css/ six sheets, one per concern. Every colour and space is defined once in base.css and consumed by name. Deliberately NOT the --oz-* token layer - that now serves the desktop app alone - so this is a fresh baseline of system faces and six colour names. web/js/ thirteen ES modules with a one-way dependency graph. format and dom depend on nothing, state is the store, engine owns the worker pool, queue/compare/facts only render and bind no handlers, render schedules them, main is the only module that listens for an event. 6,544 lines of interface become 3,741. Bugs this found, each seen red before it was fixed: - CSS grid clamps an item larger than its area to start, not centre, so the comparison sat off-centre and hung off the bottom. Centring is a transform now. probe_zoom had documented this exact trap; it caught the regression. - The header's four nowrap buttons have a min-content width of 497px and flex will not shrink them, which propped the body open inside a 375px viewport. - A is as wide as its widest option. Left native, that turns this - sentence into a column of boxes - "indistinguishable" was being sized for - "indistinguishable unless you compare", and every clause got its own line. - - So the chosen words are painted in a span that sets the width, and the real - select lies transparently on top of it. It is still a native select: the - keyboard, the screen reader and the phone's own picker all behave exactly as - they would have. Only the width comes from somewhere else. */ -.plan-pick { position: relative; display: inline-block; max-width: 100%; } - -/* A measuring stick, not a label. - * - * This span used to BE the visible text, with the real select laid over it - * transparent. That broke the control outright: `color: transparent` is - * inherited by