/* Operian OS — GETEILTE App-Shell-Geometrie (Tablet + Mobil) * ============================================================================ * * EIN Geometrie-Eigentümer je Modus: * * Desktop (pointer: fine) → Bundle-Fenstersystem (unverändert, 900×600, * Maximieren/Wiederherstellen, Drag, Resize) * Tablet + Mobil (App-Shell) → DIESE Datei, und sonst nichts * * Warum überhaupt: der Bundle kennt für ein Fenster nur zwei Größen — die feste * Vorzugsgröße (900×600) oder den vollen Viewport (Maximieren). Eine Box * „Viewport minus Topleiste minus Dock minus Safe-Areas" kann er nicht bilden; * sein einziger viewport-abgeleiteter Pfad ist innerWidth × innerHeight ohne * Insets. Genau diese Box braucht eine Touch-App aber, damit Topleiste bedienbar * bleibt und der Dock nichts verdeckt. Deshalb übernimmt hier die Shell. * * Diese Regeln lagen bisher ausschliesslich in mobile-shell.css (M1.2/M3) und * galten nur unterhalb 768px. Sie sind hierher gezogen und tragen jetzt Mobil * UND Tablet — inhaltlich unverändert, siehe die Formeln unten. In * mobile-shell.css bleibt, was Telefon-PRÄSENTATION ist (Ecken, Ampel, * Resize-Handles, Topleisten-Darstellung, Numpad …); dort steht keine * Fenstergeometrie mehr. Kein zweiter Eigentümer, keine konkurrierende Regel. * * Zustandsanker (kernel.js, syncMobileMode — kanonisch, hier nur ausgewertet): * * html[data-vilo-appshell="app"] ein App-Fenster im Vordergrund * html[data-vilo-appshell="launcher"] kein Fenster, Startbildschirm * (Attribut FEHLT auf Desktop/Maus) → keine Regel greift, Bundle bleibt Chef * html[data-vilo-class] wide | medium | compact — dieselbe * Klassifizierung (viloWorkspaceClass, * Arbeitsfläche zuerst, Zeiger zweitrangig), * hier die EINZIGE Quelle für die compact- * spezifischen Reserven unten. Kein zweites * Sizing-System: dieselbe Funktion, derselbe * Anker, den auch mobile-/tablet-shell.css lesen. * * Weil Breite/Höhe aus dvw/dvh kommen, folgt die Geometrie dem Viewport von * selbst — Drehen, ein-/ausfahrende Browser-UI und Split View brauchen KEINEN * JS-Trigger und kein Neuladen. Genau deshalb ist der zwischenzeitlich im Kernel * ergänzte Re-Render-Anstoß hier wieder entfallen: er wäre ein zweiter, * redundanter Mechanismus für dieselbe Zusage. * ==========================================================================*/ html[data-vilo-appshell] { /* ── Obere Reserve ────────────────────────────────────────────────────────── Die VILO-Topleiste bleibt sichtbar und bedienbar; das Fenster beginnt darunter. 44px ist ihre Höhe auf dem Tablet — menubar-desktop.css hebt die Bundle-Leiste (36px) für alles außer `compact` auf dieses Maß; beide Werte sind EIN Vertrag (menubar-desktop-scale.test.js). Auf dem Telefon bleibt die Bundle-Höhe 36px und wächst zusätzlich um den Notch-Inset (mobile-shell.css M1.1) — dort MUSS derselbe Term hier stehen, sonst schiebt sich das Fenster unter die Leiste (siehe Mobil-Override unten). */ --vilo-topbar: 44px; /* ── Untere Reserve · Dock-Vertrag ───────────────────────────────────────── Basis = Dock ist SICHTBAR und bekommt exakt seinen tatsächlichen Platz: 92px Pille + 4px Puffer + derselbe safe-area-bewusste Bodenabstand, mit dem der Dock selbst positioniert ist (mobile-shell.css M1.3) — die beiden bleiben dadurch synchron. Kein historischer Pauschalwert, kein Korridor „weil früher mal ein Dock da war": ist der Dock aus, ist diese Reserve 0 (Override unten). */ --vilo-bottom-reserve: calc(96px + max(16px, calc(env(safe-area-inset-bottom) + 8px))); } /* Telefon (Klasse `compact`): Topleiste trägt zusätzlich den Notch-Inset (M1.1). War früher `@media (max-width: 767px)` — eine rohe Breitenabfrage, die ein iPad mini im Hochformat (744px breit) mit-getroffen hätte. Jetzt derselbe Zustandsanker, den auch mobile-/tablet-shell.css lesen: EINE Klassifizierung, nicht zwei parallele Schwellen für dieselbe Frage. */ html[data-vilo-class="compact"][data-vilo-appshell] { /* 56px = App-Bar-Höhe aus mobile-topbar.css (Vertrag, mobile-topbar-appbar.test.js). */ --vilo-topbar: calc(56px + env(safe-area-inset-top)); } /* Telefon im App-Modus blendet mobile-shell.css (M3) den Dock aus — versteckter Dock reserviert NULL Platz, es bleibt nur die physische Safe-Area (Home- Indicator). Diese Kopplung ist Absicht und die einzige Stelle, an der die Dock-Sichtbarkeit auf die Höhe durchschlägt. */ html[data-vilo-class="compact"][data-vilo-appshell="app"] { --vilo-bottom-reserve: env(safe-area-inset-bottom, 0px); } /* ── Vollbild · maximiertes Fenster ──────────────────────────────────────── Maximiert der Bundle ein Fenster (Raumplan öffnet immer so, jedes andere über den grünen Knopf), fährt er Menüleiste (translateY(-40)) und Dock (y:140, opacity:0) selbst aus dem Bild — die Reserven oben/unten standen aber weiter, und genau dort klaffte Wallpaper: 36px oben, ~120px unten. Der Kernel spiegelt diesen Bundle-Zustand als `data-vilo-fullscreen` (syncFullscreenState, kernel.js — nur Zustand, keine Masse; das Signal ist das inline `left:0px`, das der eingefrorene Bundle ausschliesslich maximierten Fenstern gibt). Hier folgt daraus: keine Reserven, das Fenster deckt den Viewport. Fällt der Zustand weg (Wiederherstellen), gelten sofort wieder die Basiswerte oben — Menüleiste und Dock animieren zurück in die dann freie Fläche. */ html[data-vilo-appshell][data-vilo-fullscreen] { --vilo-topbar: 0px; --vilo-bottom-reserve: 0px; } /* Telefon behält im Vollbild die PHYSISCHEN Insets (Notch/Home-Indicator): ein App-Kopf unter der Notch wäre unbedienbar — das ist Funktionsschaden, der Streifen darüber nur Kosmetik. Ohne Notch ist env() = 0 und damit echtes Kante-zu-Kante. Tablets haben keinen Top-Inset; ihr Home-Indicator schwebt wie in jeder Vollbild-App über dem Inhalt. */ html[data-vilo-class="compact"][data-vilo-appshell][data-vilo-fullscreen] { --vilo-topbar: env(safe-area-inset-top, 0px); --vilo-bottom-reserve: env(safe-area-inset-bottom, 0px); } /* ── Die eine Geometrie-Regel ─────────────────────────────────────────────── `!important` ist nötig, weil React die Inline-Werte (top/left/width/height/ transform) laufend neu schreibt — das ist die Enteignung, nicht ein Zufall. `position: fixed` verankert am echten Viewport statt am kaskadierend positionierten Desktop-Container; `transform: none` neutralisiert zugleich Öffnungs-/Kaskadenanimation UND einen versehentlichen Titelleisten-Drag, ohne dass ein Handler angefasst werden muss. */ html[data-vilo-appshell] .window-shadow { position: fixed !important; top: var(--vilo-topbar) !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; transform: none !important; max-height: none !important; /* vh zuerst als Rückfallebene, dvh gewinnt wo unterstützt (ein-/ausfahrende Browser-UI). Zwei Deklarationen, eine Aussage. */ height: calc(100vh - var(--vilo-topbar) - var(--vilo-bottom-reserve)) !important; height: calc(100dvh - var(--vilo-topbar) - var(--vilo-bottom-reserve)) !important; } /* Breite ebenfalls dynamisch, wo unterstützt — hält Split View/Slide Over auf dem iPad korrekt, ohne dass JS irgendetwas nachmisst. */ @supports (width: 100dvw) { html[data-vilo-appshell] .window-shadow { width: 100dvw !important; max-width: 100dvw !important; } } /* Im Vollbild gehören auch die ECKEN zur Geometrie-Aussage „deckt den Viewport": rounded-2xl (16px, Bundle-Klasse auf Fenster-Root UND Clip- Wrapper) liesse in allen vier Ecken Wallpaper durchscheinen. Auf dem Telefon nimmt mobile-shell.css die Radien ohnehin dauerhaft (Präsentation); diese Regel hier ist der zustandsgebundene Tablet-Fall desselben Looks. */ html[data-vilo-appshell][data-vilo-fullscreen] .window-shadow, html[data-vilo-appshell][data-vilo-fullscreen] .window-shadow > .rounded-2xl { border-radius: 0 !important; }