Open second read-only view in its own window

README.de.md

@@ -117,6 +117,7 @@ Ein vollständiges CAD-Paket ist es nicht: Es gibt keine parametrische Zeitleist
 - **Vier gespeicherte Ansichten je Entwurf** – **Umschalt+7**, **8**, **9** oder **0** speichert die Ansicht genau so, wie sie ist (Blickwinkel, Ausschnitt, Zoom), und die Taste allein holt sie zurück. Jeder Entwurf hat seine eigenen, und eine gespeicherte `.lyl`-Datei nimmt sie mit.
 - **Der Ansichtswürfel in jeder Ecke** – Einstellungen > Darstellung > **Position des Ansichtswürfels** stellt den Würfel oben links, oben rechts, unten links oder unten rechts hin; in jeder Ecke außer oben links rückt die Kamerasteuerung an seinen Platz nach oben.
 - **Von unten schauen** – das Auge über dem Gitter in der Kameraleiste blendet die Platte aus, damit die Unterseite eines Entwurfs frei zu sehen ist.
+- **Eine zweite Ansicht im eigenen Fenster** – ein Knopf in der Kameraleiste öffnet ein zweites Fenster, das denselben Entwurf durch eine eigene Kamera zeigt, mit eigenem Ansichtswürfel und eigener Kameraleiste, und folgt jeder Änderung. Es öffnet sich dort, wo du es zuletzt gelassen hast.
 - **Fenster nach Wunsch** – Objektliste, Einstellungen, Schnittansicht, Maßband und die Werkzeugfenster für Kanten, Aushöhlen und Muster lassen sich an ihrer Titelleiste frei verschieben und öffnen sich dort wieder; ein Doppelklick dockt sie an.
 - **Rechtsklick-Menü** – ein kurzer Rechtsklick auf einen Körper bringt die häufigsten Befehle: duplizieren, Aussparung oder Körper, gruppieren, Fase, Rundung und Aushöhlen für einen Körper, spiegeln und um Prozent skalieren, ausblenden, sperren, auf die Arbeitsebene setzen, löschen. Ziehen mit der rechten Taste dreht weiter die Ansicht.
 - **Schnittansicht** – die Ansicht entlang einer Ebene quer zu X, Y oder Z aufschneiden, um Wände, Hohlräume und ineinandergreifende Teile zu sehen, mit grobem und feinem Regler. Geschnitten wird nur die Ansicht: Entwurf und jeder Export bleiben ganz. Den Schnitt selbst speichert „Schnitt als SVG“ im Maßstab 1:1, etwa für einen Laser oder eine Schablone, und „Messen“ liest Wandstärken und Spalte direkt auf dem Schnitt ab, im rechten Winkel zur Wand eingerastet.

README.md

@@ -116,6 +116,7 @@ It is not a full CAD package: there is no parametric timeline and no assemblies.
 - **Four saved views per design** – **Shift+7**, **8**, **9** or **0** saves the view exactly as it is (angle, pan, zoom), and the key alone brings it back. Each design keeps its own, and a saved `.lyl` file carries them along.
 - **The view cube in any corner** – Settings > Appearance > **View cube position** puts the cube in the top left, top right, bottom left or bottom right; in any corner but the top left, the camera controls move up into its place.
 - **Look from below** – the eye over a grid in the camera bar hides the plate, so the underside of a design can be seen without it in the way.
+- **A second view in its own window** – a button in the camera bar opens a second window that shows the same design through a camera of its own, with its own view cube and camera bar, and follows every change. It opens where you last left it.
 - **Panels where you want them** – the object list, the settings, the section view, the tape measure and the tool panels for edges, hollowing and patterns move by their title bar and open there again; a double-click docks them.
 - **Right-click menu** – a short right click on a body brings up the most used commands: duplicate, hole or solid, group, chamfer, fillet and hollow for one body, mirror and scale by percent, hide, lock, drop to the workplane, delete. Dragging with the right button still turns the view.
 - **Section view** – cut the view open along a plane across X, Y or Z to look at walls, cavities and parts that fit into each other, with a coarse and a fine slider. Only the view is cut: the design and every export stay whole. "Section as SVG" saves the cut itself at 1:1, for a laser or a template, and "Measure" reads wall thickness and gaps right on the cut, snapping square to the wall.

README.nl.md

@@ -114,6 +114,7 @@ Het is geen volledig CAD-pakket: er is geen parametrische tijdlijn en er zijn ge
 - **Vier opgeslagen weergaven per ontwerp** – **Shift+7**, **8**, **9** of **0** slaat de weergave precies op zoals ze is (hoek, positie, zoom), en de toets alleen brengt haar terug. Elk ontwerp heeft zijn eigen, en een opgeslagen `.lyl`-bestand neemt ze mee.
 - **De richtingskubus in elke hoek** – Instellingen > Weergave > **Positie van de richtingskubus** zet de kubus linksboven, rechtsboven, linksonder of rechtsonder; in elke hoek behalve linksboven schuift de camerabediening omhoog naar zijn plek.
 - **Van onderen kijken** – het oog boven een raster in de camerabalk verbergt het printbed, zodat je de onderkant van een ontwerp kunt zien zonder dat het in de weg zit.
+- **Een tweede weergave in een eigen venster** – een knop in de camerabalk opent een tweede venster dat hetzelfde ontwerp door een eigen camera toont, met een eigen weergavekubus en camerabalk, en volgt elke wijziging. Het opent waar je het het laatst liet.
 - **Panelen waar jij ze wilt** – de objectenlijst, de instellingen, de doorsnede, het meetlint en de gereedschapspanelen voor randen, uithollen en patronen verplaats je aan hun titelbalk en openen daar weer; dubbelklikken dockt ze.
 - **Rechtsklikmenu** – een korte rechtsklik op een lichaam toont de meestgebruikte commando's: dupliceren, gat of solid, groeperen, afschuining, afronding en uithollen voor één lichaam, spiegelen en schalen in procenten, verbergen, vergrendelen, op het werkvlak laten vallen, verwijderen. Slepen met de rechtermuisknop draait nog steeds de weergave.
 - **Doorsnede** – knip de weergave open langs een vlak dwars op X, Y of Z om wanden, holtes en in elkaar passende onderdelen te bekijken, met een grove en een fijne schuif. Alleen de weergave wordt doorgesneden: het ontwerp en elke export blijven heel. "Doorsnede als SVG" slaat de snede zelf op schaal 1:1 op, voor een laser of een mal, en "Meten" leest wanddikte en spleten direct op de snede af, haaks op de wand gesnapt.

apps/web/public/view.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Layerling view</title>
+<!-- The second view's window (components/workplane/SecondViewWindow.tsx). The
+     editor opens this page so the window has an address of its own instead of
+     about:blank, then fills it with the view itself. -->
+<style>
+  body { margin: 0; font: 15px/1.5 system-ui, sans-serif; color: #5a3917; background: #f8fbfc; }
+  p { margin: 40px auto; max-width: 30em; padding: 0 16px; text-align: center; }
+</style>
+</head>
+<body>
+<p>This window shows a second view of a design. Open it with the second view button in the Layerling editor.</p>
+</body>
+</html>

apps/web/src/app/layout.tsx

@@ -3,6 +3,7 @@ import "./globals.css";
 import "./historyView.css";
 import "./myShapes.css";
 import "./viewCube.css";
+import "./secondView.css";
 import { DiagnoseStrip } from "@/components/DiagnoseStrip";
 import { NewVersionNotice } from "@/components/NewVersionNotice";
 import { ServiceWorkerRegistration } from "@/components/ServiceWorkerRegistration";

apps/web/src/app/secondView.css

@@ -0,0 +1,116 @@
+/* The second view's window (components/workplane/SecondViewWindow.tsx). It
+   takes the editor's stylesheets, so the view cube looks the same there. */
+
+.second-view-root,
+.second-view-stage {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: var(--background);
+}
+
+.second-view-canvas {
+  position: absolute;
+  inset: 0;
+}
+
+.second-view-canvas canvas {
+  display: block;
+}
+
+/* The cube's corner follows the setting (viewCube.css) at any width here: the
+   3D view keeps it top left in a phone-wide window, but this window is never
+   on a phone, only made narrow. Nothing stands in the bottom right corner here,
+   so both bottom corners sit 12 px up. */
+html[data-view-cube-position] .second-view-stage .camera-controls {
+  top: 22px;
+}
+
+html[data-view-cube-position="top-right"] .second-view-stage .view-cube,
+html[data-view-cube-position="bottom-right"] .second-view-stage .view-cube {
+  right: 10px;
+  left: auto;
+}
+
+html[data-view-cube-position="bottom-left"] .second-view-stage .view-cube,
+html[data-view-cube-position="bottom-right"] .second-view-stage .view-cube {
+  top: auto;
+  bottom: 12px;
+}
+
+html[data-view-cube-position="top-right"] .second-view-stage .view-cube {
+  transform-origin: top right;
+}
+
+html[data-view-cube-position="bottom-left"] .second-view-stage .view-cube {
+  transform-origin: bottom left;
+}
+
+html[data-view-cube-position="bottom-right"] .second-view-stage .view-cube {
+  transform-origin: bottom right;
+}
+
+/* A container of its own name: the 3D view's two-column rule (globals.css,
+   "@container workplane") is measured for its longer bar and does not apply here. */
+.second-view-stage {
+  container: second-view / size;
+}
+
+/* The bar here has seven buttons. Below 780 px of window it is scaled to 88%
+   and starts 96 px down (globals.css), so one column needs about 380 px at
+   Medium, 450 at Large and 320 at Small. Only lower than that does it take
+   two columns, the zoom pair side by side as in the 3D view. */
+@container second-view (max-height: 400px) {
+  html:not([data-toolbar-size="small"]) .second-view-stage .camera-controls {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    transform: none;
+  }
+
+  html:not([data-toolbar-size="small"]) .second-view-stage .camera-controls > .camera-zoom-button {
+    order: 1;
+  }
+
+  html:not([data-toolbar-size="small"]) .second-view-stage .camera-controls > .workplane-display-control-group {
+    order: 2;
+  }
+}
+
+@container second-view (max-height: 470px) {
+  html[data-toolbar-size="large"] .second-view-stage .camera-controls {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    transform: none;
+  }
+
+  html[data-toolbar-size="large"] .second-view-stage .camera-controls > .camera-zoom-button {
+    order: 1;
+  }
+
+  html[data-toolbar-size="large"] .second-view-stage .camera-controls > .workplane-display-control-group {
+    order: 2;
+  }
+}
+
+@container second-view (max-height: 340px) {
+  html[data-toolbar-size="small"] .second-view-stage .camera-controls {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    transform: none;
+  }
+
+  html[data-toolbar-size="small"] .second-view-stage .camera-controls > .camera-zoom-button {
+    order: 1;
+  }
+
+  html[data-toolbar-size="small"] .second-view-stage .camera-controls > .workplane-display-control-group {
+    order: 2;
+  }
+}
+
+/* The status message (globals.css .editor-status), placed for this window:
+   it has no toolbar above it, and no settings panel on the right. */
+.second-view-stage .second-view-notice {
+  top: 22px;
+  max-width: calc(100vw - 130px);
+}