Feat v0.6.10 viewport foundation (#45)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
2026-04-01 10:42:44 +00:00
parent 617d81e7d4
commit ca3f845c34
19 changed files with 94 additions and 87 deletions
--- a/src/css/primitives.css
+++ b/src/css/primitives.css
@@ -491,6 +491,7 @@ select option { background: var(--bg-surface); color: var(--text); }
        width: calc(100vw - 32px);
        max-width: 100%;
        max-height: calc(100vh - 64px);
+        max-height: calc(100dvh - 64px);
    }

    /* Toast: full width, centered */
--- a/src/css/sw-login.css
+++ b/src/css/sw-login.css
@@ -4,7 +4,7 @@
   ──────────────────────────────────────────── */

 /* ── Layout ──────────────────────────────────── */
-.login-shell { display: flex; flex-direction: column; height: 100vh; }
+.login-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
 .login-main  { display: flex; flex: 1; min-height: 0; }

 /* ── Hero Panel (left) ─────────────────────── */
--- a/src/css/sw-shell.css
+++ b/src/css/sw-shell.css
@@ -3,26 +3,23 @@
   fixed banners, announcement, surface, and footer.
   ──────────────────────────────────────────── */

+/* v0.6.10: .sw-shell is no longer a viewport-level container.
+   The single layout root is <body> in base.html.
+   .sw-shell fills its parent if any surface uses it. */
 .sw-shell {
    display: flex;
    flex-direction: column;
-    height: 100vh;
+    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
-    /* Safe-area insets for notched devices */
-    padding-top: env(safe-area-inset-top, 0);
-    padding-bottom: env(safe-area-inset-bottom, 0);
-    padding-left: env(safe-area-inset-left, 0);
-    padding-right: env(safe-area-inset-right, 0);
 }

 /* ── Banner (fixed top / bottom — identical component) ── */

+/* v0.6.10: banners are in-flow (template renders them), not fixed. */
 .sw-shell__banner {
-    position: fixed;
-    left: 0;
-    right: 0;
+    position: static;
    z-index: 900;
    display: flex;
    align-items: center;
@@ -60,13 +57,12 @@

 /* ── Shell body — insets for fixed banners ─── */

+/* v0.6.10: template banners are in-flow — no padding offset needed. */
 .sw-shell__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
-    padding-top: var(--banner-top-height, 0px);
-    padding-bottom: var(--banner-bottom-height, 0px);
 }

 /* ── Announcement bar ─────────────────────── */
--- a/src/js/sw/primitives/menu.js
+++ b/src/js/sw/primitives/menu.js
@@ -16,21 +16,14 @@ export function Menu({ items = [], anchor, open, direction = 'down-right', onSel

    const selectableItems = items.filter(i => !i.divider && !i.disabled);

-    // Position relative to anchor
-    // When the surface uses CSS transform: scale(), getBoundingClientRect()
-    // returns scaled coordinates but position:fixed uses viewport coordinates.
-    // Dividing by the scale factor converts back to true viewport pixels.
+    // Position relative to anchor (CSS zoom reflows layout correctly)
    useEffect(() => {
        if (!open || !anchor) return;
-        const scale = window.sw?.shell?.getScale?.() || 1;
-        const raw = typeof anchor.getBoundingClientRect === 'function'
+        const rect = typeof anchor.getBoundingClientRect === 'function'
            ? anchor.getBoundingClientRect()
            : anchor;
-        const rect = scale !== 1
-            ? { top: raw.top / scale, bottom: raw.bottom / scale, left: raw.left / scale, right: raw.right / scale }
-            : raw;
-        const vw = window.innerWidth / scale;
-        const vh = window.innerHeight / scale;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;

        let top, left;
        const [vDir, hDir] = direction.split('-');
--- a/src/js/sw/sdk/index.js
+++ b/src/js/sw/sdk/index.js
@@ -123,15 +123,8 @@ export async function boot() {

    // Shell — layout utilities (decouples surface code from shell DOM)
    const _shell = {
-        /** CSS transform scale on #surfaceInner (appearance zoom). */
-        getScale() {
-            const el = document.getElementById('surfaceInner');
-            if (!el) return 1;
-            const t = getComputedStyle(el).transform;
-            if (!t || t === 'none') return 1;
-            const m = t.match(/matrix\(([^,]+)/);
-            return m ? parseFloat(m[1]) || 1 : 1;
-        },
+        /** @deprecated v0.6.10 — CSS zoom handles reflow; no scale correction needed. */
+        getScale() { return 1; },
        /** Topbar — set after dynamic import below */
        Topbar: null,
    };
--- a/src/js/sw/shell/app-shell.js
+++ b/src/js/sw/shell/app-shell.js
@@ -1,4 +1,6 @@
-/**
+/** @deprecated v0.6.10 — No surface imports AppShell. Layout root is <body> in base.html.
+ *  Kept for reference; will be removed in a future version.
+ *
 * AppShell — Layer 1 layout scaffold
 *
 * ┌─────────────────────────────────┐  ← fixed banner (top, optional)
@@ -22,20 +24,10 @@
 const { html } = window;
 const { useState, useEffect, useRef, useReducer } = hooks;

+/** @deprecated v0.6.10 — Banner height is measured by template scripts in base.html. */
 function ShellBanner({ position, text, variant = 'info' }) {
-    const ref = useRef(null);
-    const prop = position === 'top' ? '--banner-top-height' : '--banner-bottom-height';
-
-    useEffect(() => {
-        if (ref.current) {
-            const h = ref.current.offsetHeight + 'px';
-            document.documentElement.style.setProperty(prop, h);
-        }
-        return () => document.documentElement.style.setProperty(prop, '0px');
-    }, [text, prop]);
-
    return html`
-        <div class="sw-shell__banner sw-shell__banner--${position} sw-shell__banner--${variant}" ref=${ref}>
+        <div class="sw-shell__banner sw-shell__banner--${position} sw-shell__banner--${variant}">
            <span class="sw-shell__banner-text">${text}</span>
        </div>
    `;
--- a/src/js/sw/shell/app.js
+++ b/src/js/sw/shell/app.js
@@ -1,4 +1,6 @@
-/**
+/** @deprecated v0.6.10 — No surface imports App. Layout root is <body> in base.html.
+ *  Kept for reference; will be removed in a future version.
+ *
 * App — root component composing the full shell tree
 *
 * ┌───────────────────────────────┐
--- a/src/js/sw/shell/surface-viewport.js
+++ b/src/js/sw/shell/surface-viewport.js
@@ -1,4 +1,5 @@
-/**
+/** @deprecated v0.6.10 — No surface imports SurfaceViewport. Layout root is <body> in base.html.
+ *
 * SurfaceViewport — container where the active surface renders
 *
 * Deliberately thin. Error boundaries and
--- a/src/js/sw/surfaces/settings/appearance.js
+++ b/src/js/sw/surfaces/settings/appearance.js
@@ -37,20 +37,11 @@ export function AppearanceSection() {
        p.scale = scale;
        localStorage.setItem('sb-appearance', JSON.stringify(p));

-        // Apply scale to content area only (not shell/nav)
+        // Apply scale to content area only (not shell/nav).
+        // CSS zoom reflows layout correctly — no getBoundingClientRect hacks needed.
        const inner = document.getElementById('surfaceInner');
        if (inner) {
-            if (scale !== 100) {
-                const s = scale / 100;
-                inner.style.transform = `scale(${s})`;
-                inner.style.transformOrigin = 'top left';
-                inner.style.width = (100 / s) + '%';
-                inner.style.height = (100 / s) + '%';
-            } else {
-                inner.style.transform = '';
-                inner.style.width = '';
-                inner.style.height = '';
-            }
+            inner.style.zoom = scale !== 100 ? (scale / 100) : '';
        }

        sw.emit('toast', { message: 'Appearance saved', variant: 'success' });