Fassung 1.5.2: die Optionen selbst

Drei Bedienungen, die Flatsome an jeder Option hat und die hier fehlten.

Geraeteschalter je Option. Bisher entschied ein einziger Schalter ueber der
Vorschau, welches Geraet das ganze Bedienfeld bearbeitet; "ist die Ueberschrift
auf dem Telefon kleiner" liess sich nur durch Umschalten und Hinsehen
beantworten. Jetzt traegt jede Option drei Chips (D, T, M): sie zeigen, wo ein
eigener Wert liegt, und ein Klick wechselt dorthin. Bedienfeld und Vorschau
wechseln gemeinsam - einen Wert fuer ein Geraet zu setzen, das man nicht
ansieht, ist blindes Aendern.

Abstand als Rahmen. Vier Felder untereinander, beschriftet "Oben, Rechts,
Unten, Links", zwangen zum Lesen. Jetzt sitzt jedes Feld an seiner Kante, die
Lage ist die Beschriftung; in der Mitte verkettet ein Schalter alle vier. Er
startet aus: er ersetzt den frueheren Knopf "Alle Seiten gleich setzen", und
das war eine bewusste Handlung. Seiten mit unterschiedlichen Einheiten gelten
als "gemischt" und bleiben unangetastet - ein gespeichertes 2rem wird nicht
still zu 2px.

Ziehfelder. Zahlenfelder lassen sich seitwaerts ziehen, Umschalt grob, Alt
fein. Tippen und Pfeiltasten bleiben unveraendert. Nur fuer Maus und Stift:
auf einem Tippgeraet ist ein seitliches Ziehen ueber ein Feld die Art, wie das
Bedienfeld gescrollt wird.

Dabei behoben: der Zug war nach einem Pixel zu Ende, weil jede Aenderung das
Bedienfeld neu zeichnete und damit das Feld ersetzte, an dem der Zeiger hing
(keepPanel). Der Kettenschalter verlor aus demselben Grund seinen Zustand. Und
das Gleichziehen nahm den Wert des ersten Feldes, auch wenn es leer war - ein
Druck auf die Kette loeschte damit die Seiten, die einen Wert hatten.

Geprueft: npm test 27/27, phpunit 452/452, npm run test:editor vollstaendig
mit neuem Abschnitt und ohne axe-Verstoss.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

scripts/editor-check.mjs

@@ -273,6 +273,73 @@ try {
   await setLength('style-padding-top', 32);
   await frameValue('#hero', 'paddingTop', '32px');
   await page.getByRole('button', { name: 'Desktop', exact: true }).click();
+
+  // --- Die Optionen selbst ------------------------------------------------------------------
+  // Geraetechips je Option, Abstandsrahmen mit Kette, Ziehfeld.
+
+  // Der Chip zeigt, wo ein abweichender Wert liegt: Innenabstand hat oben gerade Desktop und
+  // Mobil bekommen, Tablet nicht.
+  const chip = device => page.locator(`#style-padding-unit`).locator('xpath=ancestor::div[contains(@class,"side-wrap")]/preceding-sibling::div[contains(@class,"design-side-head")][1]')
+    .locator(`.device-chip[data-device="${device}"]`);
+  await chip('desktop').waitFor();
+  assert.equal(await chip('desktop').evaluate(el => el.classList.contains('device-chip-own')), true, 'Desktop hat einen eigenen Innenabstand');
+  assert.equal(await chip('mobile').evaluate(el => el.classList.contains('device-chip-own')), true, 'Mobil hat einen eigenen Innenabstand');
+  assert.equal(await chip('tablet').evaluate(el => el.classList.contains('device-chip-own')), false, 'Tablet erbt');
+  assert.equal(await chip('desktop').getAttribute('aria-pressed'), 'true', 'Desktop ist die bearbeitete Groesse');
+
+  // Ein Klick auf den Chip wechselt Bedienfeld und Vorschau zusammen.
+  await chip('mobile').click();
+  assert.equal(await page.locator('[data-viewport="mobile"]').getAttribute('aria-pressed'), 'true');
+  await chip('desktop').click();
+  assert.equal(await page.locator('[data-viewport="desktop"]').getAttribute('aria-pressed'), 'true');
+
+  // Der Rahmen aendert ohne Kette nur die eine Seite.
+  await setLength('style-padding-left', 24);
+  await frameValue('#hero', 'paddingLeft', '24px');
+  await frameValue('#hero', 'paddingRight', '0px');
+  // Mit Kette werden alle vier gleichgezogen.
+  await page.locator('.side-link').first().click();
+  assert.equal(await page.locator('.side-link').first().getAttribute('aria-pressed'), 'true');
+  await setLength('style-padding-top', 40);
+  for (const seite of ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']) await frameValue('#hero', seite, '40px');
+  await page.locator('.side-link').first().click();
+
+  // Die gemeinsame Einheit schreibt die gesetzten Seiten um, ohne Zahlen zu verlieren.
+  await page.locator('#style-padding-unit').selectOption('rem');
+  await frameValue('#hero', 'paddingTop', '640px');
+
+  // Das Ziehfeld: seitwaerts ziehen aendert den Wert, und der ganze Zug ist ein Undo-Schritt.
+  await page.locator('#structure [data-block-id="headline"]').click();
+  await openGroup('Typografie');
+  const scrub = page.locator('#style-fontSize');
+  await scrub.scrollIntoViewIfNeeded();
+  const box = await scrub.boundingBox();
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(box.x + box.width / 2 + 20, box.y + box.height / 2, { steps: 10 });
+  await page.mouse.up();
+  const gezogen = Number(await scrub.inputValue());
+  assert.equal(gezogen, 92, `Ziehen um 20 px erhoeht 72 auf 92, gemessen: ${gezogen}`);
+  await frameValue('#headline', 'fontSize', '92px');
+  await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
+  await frameValue('#headline', 'fontSize', '72px');
+  checks.push({ name: 'device chips, spacing box and scrub fields', passed: true });
+
+  // Aufraeumen: dieser Abschnitt hat den Innenabstand des Hero auf 40rem an allen Seiten
+  // gebracht. Das drueckt die Spaltenbreite auf null, und alles Folgende haette unsichtbare
+  // Inhalte gepruef. Zurueck auf den Zustand von vorher: 96 px oben, sonst nichts.
+  await page.locator('#structure [data-block-id="hero"]').click();
+  await page.getByRole('button', { name: 'Design', exact: true }).click();
+  await page.locator('#style-padding-unit').selectOption('px');
+  for (const seite of ['right', 'bottom', 'left']) await setLength(`style-padding-${seite}`, '');
+  await setLength('style-padding-top', 96);
+  await frameValue('#hero', 'paddingTop', '96px');
+  await frameValue('#hero', 'paddingLeft', '0px');
+  await openGroup('Abstand');
+  await page.locator('#style-padding-top').scrollIntoViewIfNeeded();
+  await page.screenshot({ path: 'reports/editor/options.png' });
+  console.log('Per option device chips, spacing box and scrub fields passed.');
+
   // The background group is collapsed by default, and the readable field next to the swatch is
   // what a person types into.
   await openGroup('Hintergrund');