Seitenleiste ausgeduennt, Vorschau statt Bearbeiten-Schalter

Bearbeiten ist immer an. An seine Stelle tritt die Vorschau: alles
festgelegt, keine Auswahl, kein Ziehen, keine Rahmen. Blaettern und Zoomen
bleiben, das ist der Sinn. Taste P statt E.

Aus der Seitenleiste raus: Layout, Tag optisch ausgerueckt, Vorschau,
Intensitaet, Mockup-Perspektive und die Download-Knoepfe. Entweder
post-spezifisch oder inzwischen oben in der Leiste.

Die Schalter selbst bleiben im Dokument, nur unsichtbar. Die Menueleiste
betaetigt sie, die Tastenkuerzel ebenso, und zwei Abgleich-Funktionen
schreiben hinein. Geloescht muesste jeder dieser Zustaende ein zweites Mal
gefuehrt werden.

Die Buehne stand noch auf 100vh. Darueber sitzt seit der Menueleiste aber
deren Hoehe, weshalb die Fussleiste mit Zoom und Merkzettel unter den unteren
Rand rutschte.

Oben links steht PostGrid statt HiveGrid, auch im Fenstertitel.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

post1.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>HiveGrid Post 1 (Lösung, Carousel)</title>
+<title>PostGrid Post 1 · Lösung</title>
 <link rel="stylesheet" href="./assets/fonts/manrope.css">
 <style>
   /* ─── HiveGrid design tokens (mirrored from app/globals.css) ─────────────
@@ -249,7 +249,10 @@
      Klar abgesetzt von der Sidebar: eigener Grund, eigener Scroll, eigener
      Zoom. Was hier passiert, lässt die Bedienleiste unberührt. */
   .stage {
-    flex: 1; position: relative; height: 100vh; overflow: hidden;
+    /* Nicht 100vh: darueber sitzt die Menueleiste. Mit voller
+       Fensterhoehe rutscht die Fussleiste samt Zoom und Merkzettel
+       unter den unteren Rand. */
+    flex: 1; position: relative; height: 100%; overflow: hidden;
     background-color: #101116;
     background-image: radial-gradient(circle, #282B35 1.6px, transparent 1.6px);
     background-size: 24px 24px;
@@ -755,7 +758,7 @@
 <body>
 
 <div class="menubar" id="menubar">
-  <span class="marke">HiveGrid</span>
+  <span class="marke">PostGrid</span>
 
   <div class="menu" data-menu="projekt">
     <button type="button">Projekt</button>
@@ -786,9 +789,6 @@
       <button type="button" data-tun="undo">Rückgängig<span class="kurz">⌘Z</span></button>
       <button type="button" data-tun="redo">Wiederherstellen<span class="kurz">⇧⌘Z</span></button>
       <hr>
-      <button type="button" data-opt="editmodes:e:an">Bearbeiten an<span class="kurz">E</span></button>
-      <button type="button" data-opt="editmodes:e:aus">Bearbeiten aus</button>
-      <hr>
       <button type="button" data-klick="reset-one">Element auf Standard</button>
       <button type="button" data-klick="reset-all">Alles auf Standard</button>
     </div>
@@ -809,6 +809,8 @@
   <div class="menu" data-menu="ansicht">
     <button type="button">Ansicht</button>
     <div class="liste">
+      <button type="button" data-tun="vorschau">Vorschau<span class="kurz">P</span></button>
+      <hr>
       <button type="button" data-opt="views:w:streifen">Streifen<span class="kurz">W</span></button>
       <button type="button" data-opt="views:w:einzeln">Einzeln</button>
       <hr>
@@ -860,29 +862,31 @@
     </div>
   </details>
 
-  <details class="group" data-grp="layout-nur-diese-slide">
+  <!-- Nicht mehr in der Seitenleiste: Layout und Perspektive sind
-    <summary>Layout (nur diese Slide)</summary>
+       post-spezifisch, Vorschau steht oben unter Ansicht, der Tag ist
+       ausgeblendet. Die Schalter bleiben trotzdem im Dokument, weil die
+       Menueleiste, die Tastenkuerzel und die Abgleich-Funktionen sie
+       betaetigen. Sonst gaebe es zwei Wahrheiten ueber denselben Zustand. -->
+  <div hidden>
     <div class="opts" id="layouts"></div>
-  </details>
-
-  <details class="group" data-grp="tag-optisch-ausger-ckt">
-    <summary>Tag optisch ausgerückt</summary>
     <div class="opts" id="tagouts">
       <button data-o="an"  aria-pressed="true">An</button>
       <button data-o="aus" aria-pressed="false">Aus</button>
     </div>
-  </details>
+    <div class="opts" id="vorschau">
-
+      <button data-p="aus" aria-pressed="true">Aus</button>
-  <details class="group" data-grp="bearbeiten">
+      <button data-p="an"  aria-pressed="false">An</button>
-    <summary>Bearbeiten</summary>
-    <div class="opts" id="editmodes">
-      <button data-e="an"  aria-pressed="false">An</button>
-      <button data-e="aus" aria-pressed="true">Aus</button>
     </div>
-    <div class="hint" style="margin-top:8px">Ein angeklicktes Element öffnet
+    <div class="opts" id="ints">
-      sein eigenes Feld rechts.</div>
+      <button data-i="dezent"   aria-pressed="true">Dezent</button>
-    <button class="btn secondary" id="reset-all" style="width:100%;margin-top:8px">Alles auf Standard</button>
+      <button data-i="kraeftig" aria-pressed="false">Kräftig</button>
-  </details>
+    </div>
+    <div class="opts" id="tilts">
+      <button data-t="an"  aria-pressed="true">Gekippt</button>
+      <button data-t="aus" aria-pressed="false">Gerade</button>
+    </div>
+    <button id="reset-all">Alles auf Standard</button>
+  </div>
 
   <details class="std">
     <summary>Standardwerte</summary>
@@ -897,14 +901,6 @@
     </div>
   </details>
 
-  <details class="group" data-grp="intensit-t">
-    <summary>Intensität</summary>
-    <div class="opts" id="ints">
-      <button data-i="dezent"   aria-pressed="true">Dezent</button>
-      <button data-i="kraeftig" aria-pressed="false">Kräftig</button>
-    </div>
-  </details>
-
   <details class="group" data-grp="bildrahmen">
     <summary>Bildrahmen</summary>
     <div class="opts three" id="frames">
@@ -915,14 +911,6 @@
     </div>
   </details>
 
-  <details class="group" data-grp="mockup-perspektive">
-    <summary>Mockup-Perspektive</summary>
-    <div class="opts" id="tilts">
-      <button data-t="an"  aria-pressed="true">Gekippt</button>
-      <button data-t="aus" aria-pressed="false">Gerade</button>
-    </div>
-  </details>
-
   <details class="group" data-grp="renderqualit-t">
     <summary>Renderqualität</summary>
     <div class="opts three" id="quality">
@@ -932,12 +920,13 @@
     </div>
   </details>
 
-  <div class="group">
+  <!-- Der Export steht oben unter Datei. Die Knoepfe bleiben trotzdem im
-    <label>Download</label>
+       Dokument: die Menueleiste betaetigt sie, und sie tragen den Zustand
-    <div class="row" style="margin-bottom:8px">
+       "noch nicht bereit", solange die Schrift nicht geladen ist. Ohne sie
-      <button id="dl-png" disabled>Diese Slide</button>
+       muesste beides doppelt gefuehrt werden. -->
-    </div>
+  <div hidden>
-    <button id="dl-all" class="btn secondary" style="width:100%" disabled>Alle 5 Slides als ZIP</button>
+    <button id="dl-png" disabled>Diese Slide</button>
+    <button id="dl-all" disabled>Alle Slides als ZIP</button>
   </div>
 
   <details class="group" style="margin-bottom:0" data-grp="tastatur">
@@ -945,10 +934,10 @@
     <div class="keys">
       <kbd>←</kbd><kbd>→</kbd> Slide · <kbd>V</kbd> Variante<br>
       <kbd>L</kbd> Layout · <kbd>I</kbd> Intensität<br>
-      <kbd>W</kbd> Ansicht · <kbd>G</kbd> Tag<br>
+      <kbd>W</kbd> Ansicht<br>
       <kbd>R</kbd> Bildrahmen<br>
       <kbd>T</kbd> Perspektive<br>
-      <kbd>E</kbd> Bearbeiten · Pfeile verschieben (<kbd>⇧</kbd> = 10 px)<br>
+      <kbd>P</kbd> Vorschau · Pfeile verschieben (<kbd>⇧</kbd> = 10 px)<br>
       <kbd>+</kbd> <kbd>−</kbd> <kbd>0</kbd> Zoom · ⌘/Strg + Rad<br>
       <kbd>Leer</kbd> + ziehen verschiebt die Fläche<br>
       <kbd>⌘/Strg</kbd>+<kbd>Z</kbd> Rückgängig (<kbd>⇧</kbd> = wiederherstellen)<br>
@@ -1222,7 +1211,8 @@
   let edits = SLIDES.map(() => ({}));
 
   let picked = null;          // { slide, key }
-  let editMode = "aus";
+  // Bearbeiten ist immer an. "aus" heisst Vorschau: alles festgelegt.
+  let editMode = "an";
 
   let current = 0;
   let variant = "dunkel", tilt = "an", superSample = 2, view = "streifen", tagOut = "an", frameStyle = "chamfer";
@@ -3115,18 +3105,24 @@
   })();
 
   document.getElementById("forget").addEventListener("click", forgetProject);
-  document.getElementById("editmodes").addEventListener("click", e => {
+  document.getElementById("vorschau").addEventListener("click", e => {
     const b = e.target.closest("button");
     if (!b) return;
-    editMode = b.dataset.e;
+    setVorschau(b.dataset.p === "an");
-    press("editmodes", "e", editMode);
+  });
+
+  /* In der Vorschau ist alles festgelegt: keine Auswahl, kein Ziehen, keine
+     Rahmen. Blaettern und Zoomen bleiben, das ist der Sinn der Sache. */
+  function setVorschau(an) {
+    editMode = an ? "aus" : "an";
+    press("vorschau", "p", an ? "an" : "aus");
     deck.querySelectorAll(".slide").forEach(el => { el.dataset.editmode = editMode; });
-    if (editMode === "aus") {
+    if (an) {
       picked = null;
       deck.querySelectorAll("[data-edit]").forEach(n => n.classList.remove("picked"));
       syncEditPanel();
     }
-  });
+  }
 
   /* ─── Angleichen über alle Slides ────────────────────────────────────────
      Das gewählte Element ist die Vorlage, alle gleichnamigen auf den anderen
@@ -3286,7 +3282,7 @@
     const menues = [...bar.querySelectorAll(".menu")];
     const zu = () => menues.forEach(m => delete m.dataset.offen);
 
-    const AKTION = { undo, redo };
+    const AKTION = { undo, redo, vorschau: () => setVorschau(editMode === "an") };
 
     // Haken und graue Eintraege erst beim Oeffnen setzen: vorher weiss die
     // Leiste nicht, was gerade gilt.
@@ -3299,6 +3295,11 @@
         b.insertAdjacentHTML("afterbegin",
           '<span class="haken">' + (an ? "✓" : "") + "</span>");
       });
+      m.querySelectorAll('button[data-tun="vorschau"]').forEach(b => {
+        b.querySelector(".haken")?.remove();
+        b.insertAdjacentHTML("afterbegin",
+          '<span class="haken">' + (editMode === "aus" ? "✓" : "") + "</span>");
+      });
       m.querySelectorAll("button[data-klick]").forEach(b => {
         const q = document.getElementById(b.dataset.klick);
         b.disabled = !q || q.disabled;
@@ -3545,13 +3546,12 @@
     else if (e.key === "-") { setZoom((zoom || autoFit()) / 1.25); }
     else if (e.key === "0") { zoom = null; fitStrip(); }
     else if (k === "w") { view = view === "streifen" ? "einzeln" : "streifen"; deck.dataset.view = view; press("views", "w", view); zoom = null; show(current); }
-    else if (k === "e") { document.querySelector('#editmodes button[data-e="' + (editMode === "an" ? "aus" : "an") + '"]').click(); }
+    else if (k === "p") { setVorschau(editMode === "an"); }
     else if (k === "r") {
       const cyc = ["chamfer", "rund", "stapel", "aus"];
       frameStyle = cyc[(cyc.indexOf(frameStyle) + 1) % cyc.length];
       press("frames", "f", frameStyle); applyAll(); saveState();
     }
-    else if (k === "g") { tagOut = tagOut === "an" ? "aus" : "an"; press("tagouts", "o", tagOut); applyAll(); saveState(); }
     else if (k === "d") guard(downloadOne)();
     else if (k === "a") guard(downloadAll)();
   });