@profitlich/template-toolkit 5.8.0 → 6.0.0

package/dev/Dev.js

@@ -15,6 +15,6 @@ export function initDev(config = {}, options = {}) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    new Toolbar(_options);
+    new Toolbar(_options, _config);
     console.info('Dev initialized.');
 });

package/dev/toolbar/Toolbar.js

@@ -1,7 +1,22 @@
 import GUI from 'lil-gui';
+import { canvasGridLines } from 'canvas-grid-lines';
 import { MediaQueries } from '../../utils/MediaQueries.js';
+import { gridColumnsTriple } from './gridColumns.js';
 import './toolbar.scss';
 
+/**
+ * Übersetzt die Auswahl im Grid-Menü in die Rasterart von `canvas-grid-lines`.
+ * Die Namen der Auswahl bleiben, wie sie waren — sie stehen im gespeicherten
+ * State der Toolbar und wären sonst bei jedem ein Rückschritt auf `aus`.
+ *
+ * Die Farben standen früher als Sass-Variablen in `toolbar.scss`. Ein Canvas
+ * bekommt sie zur Laufzeit, deshalb stehen sie jetzt hier.
+ */
+const GRID_MODES = {
+    lines: { gridType: 'columns', color: 'rgba(0, 0, 255, 0.5)' },
+    ribbons: { gridType: 'ribbons', color: 'rgba(191, 255, 254, 0.5)' },
+};
+
 /**
  * Beschreibt eine projekteigene Checkbox in der Dev-Toolbar.
  * @typedef {Object} ToolbarToggle
@@ -29,12 +44,18 @@ export class Toolbar {
     #pictureElements;
     #contentTypeContainer;
     #toggles;
+    #config;
+    #gridElement;
+    #grid = null;
 
     /**
      * @param {ToolbarOptions} [options={}] - Projekteigene Ergänzungen.
+     * @param {Object} [config={}] - Inhalt von `src/config.json` des Projekts.
+     *   Das Grid-Overlay leitet Spaltenzahl, Gutter und Seitenränder daraus ab.
      */
-    constructor(options = {}) {
+    constructor(options = {}, config = {}) {
         this.#toggles = options.toggles ?? [];
+        this.#config = config;
 
         // State aus localStorage laden
         const defaults = { visible: false, grid: 'aus', imageSize: false, sizes: false, contentType: false };
@@ -44,10 +65,12 @@ export class Toolbar {
         const saved = localStorage.getItem('devTools');
         this.#state = saved ? { ...defaults, ...JSON.parse(saved) } : defaults;
 
-        // Grid-Overlay DOM-Element erstellen
-        const gridOverlay = document.createElement('div');
-        gridOverlay.classList.add('dev-toolbar__grid');
-        document.body.prepend(gridOverlay);
+        // Grid-Overlay DOM-Element erstellen. Das Canvas darin entsteht erst
+        // beim ersten Einschalten — es ist eine Bitmap in Viewportgrösse, und
+        // die soll nicht zahlen, wer das Raster gar nicht anschaut.
+        this.#gridElement = document.createElement('div');
+        this.#gridElement.classList.add('dev-toolbar__grid');
+        document.body.prepend(this.#gridElement);
 
         // Content-Type-Label-Overlay erstellen
         this.#contentTypeContainer = document.createElement('div');
@@ -94,6 +117,7 @@ export class Toolbar {
 
         // Event-Listener
         window.addEventListener('resize', this.#onResize);
+        window.addEventListener('eventLayoutchange', this.#onLayoutChange);
         document.addEventListener('keydown', this.#handleKeyDown);
     }
 
@@ -109,12 +133,49 @@ export class Toolbar {
     #applyState() {
         document.body.setAttribute('data-dev-grid', this.#state.grid);
         document.body.setAttribute('data-dev-content-types', this.#state.contentType);
+        this.#updateGrid();
         this.#applyToggles();
         this.#updateImageSize();
         this.#updateSizes();
         this.#updateContentTypeLabels();
     }
 
+    /**
+     * Baut das Raster beim ersten Einschalten und hält es danach auf dem Stand
+     * von Auswahl und Layout. Im Modus `aus` geschieht nichts — das Ausblenden
+     * erledigt allein `data-dev-grid` in der CSS.
+     */
+    #updateGrid() {
+        const mode = GRID_MODES[this.#state.grid];
+        if (!mode) return;
+
+        const columns = gridColumnsTriple(this.#config, this.#mediaQueries.layout);
+        if (!columns) return;
+
+        if (!this.#grid) {
+            [this.#grid] = canvasGridLines.initGrid({
+                targets: this.#gridElement,
+                gridType: mode.gridType,
+                columns,
+                color: mode.color,
+                lineWidth: 1,
+                units: 'devicepixel',
+            }) ?? [];
+            return;
+        }
+
+        // Reihenfolge: erst die Spalten, dann die Rasterart. Der gridType-Setter
+        // leitet sein Lückenmuster aus dem aktuellen columns-Wert ab, und der
+        // muss nach einem Breakpoint-Wechsel schon der neue sein.
+        this.#grid.columns = columns;
+        this.#grid.gridType = mode.gridType;
+        this.#grid.color = mode.color;
+    }
+
+    #onLayoutChange = () => {
+        this.#updateGrid();
+    }
+
     #updateContentTypeLabels() {
         this.#contentTypeContainer.innerHTML = '';
         if (!this.#state.contentType) return;

package/dev/toolbar/gridColumns.js

@@ -0,0 +1,49 @@
+/**
+ * Rechnet die Spaltenkonfiguration eines Layouts in das Tripel um, das
+ * `canvas-grid-lines` für die Rasterarten `columns` und `ribbons` erwartet:
+ * `[total, band, gap]` in Rastereinheiten.
+ *
+ * Die Einheit ist der grösste gemeinsame Teiler von Spaltenbreite und Gutter —
+ * aus einem Verhältnis wie 80 : 20 werden damit die ganzen Zahlen 4 : 1, die
+ * das Paket als Wiederholungsmuster braucht. Beide Rasterarten teilen sich
+ * dieselbe Kantenfolge: `columns` strichelt sie, `ribbons` füllt dazwischen.
+ *
+ * @param {Object} config - Inhalt von `src/config.json` des Projekts.
+ * @param {string} layout - Layoutname, etwa `desktop`.
+ * @returns {number[]|undefined} `[total, band, gap]`, oder `undefined`, wenn die
+ *   Angaben fehlen oder sich das Verhältnis nicht ganzzahlig ausdrücken lässt.
+ */
+export function gridColumnsTriple(config, layout) {
+    const width = config?.layouts?.[layout];
+    const margins = config?.margins?.[layout];
+    const gutter = config?.gutter?.[layout];
+    const count = config?.columns?.[layout];
+
+    if (width == null || margins == null || gutter == null || count == null) {
+        console.warn(`Dev-Toolbar: Für das Layout "${layout}" fehlen Angaben in der config.json (layouts, margins, columns, gutter). Wird initDev die Config übergeben?`);
+        return undefined;
+    }
+
+    // Die Spaltenbreite ist `zaehler / count` und oft kein ganzer Designpixel —
+    // in `template-kirbycms` etwa 91,428…. Deshalb wird sie nie ausgerechnet:
+    // Das Verhältnis Spalte zu Gutter ist `zaehler/count : gutter`, und mit
+    // `count` erweitert wird daraus `zaehler : count · gutter`, also ein
+    // Verhältnis zweier ganzer Zahlen. Gekürzt ergibt das exakt das gesuchte
+    // Muster, ohne jede Rundung.
+    const zaehler = width - margins.left - margins.right - (count - 1) * gutter;
+
+    if (!Number.isInteger(zaehler) || !Number.isInteger(gutter) || !Number.isInteger(count) || zaehler <= 0) {
+        console.warn(`Dev-Toolbar: Layout "${layout}" ergibt keine brauchbare Spaltenaufteilung (Rest ${zaehler}, Gutter ${gutter}, Spalten ${count}) — das Raster bleibt aus.`);
+        return undefined;
+    }
+
+    const unit = greatestCommonDivisor(zaehler, count * gutter);
+    const band = zaehler / unit;
+    const gap = (count * gutter) / unit;
+
+    return [count * band + (count - 1) * gap, band, gap];
+}
+
+function greatestCommonDivisor(a, b) {
+    return b === 0 ? a : greatestCommonDivisor(b, a % b);
+}

package/dev/toolbar/toolbar.scss

@@ -7,69 +7,43 @@
 }
 
 // grid
-$color--dev-grid: rgba(0, 0, 255, 0.5);
-$color--dev-grid-ribbons: rgba(191, 255, 254, 0.5);
-$color--dev-grid-center: rgba(0, 0, 0, 0.2);
-
-@mixin dev-toolbar-grid($layout, $columns, $gutter, $margin-left, $margin-right) {
-
-    $gutter: size($layout, $gutter);
-    $margin-left: size($layout, $margin-left);
-    $margin-right: size($layout, $margin-right);
-
-    .dev-toolbar__grid::after {
-        // the grid is made through repition
-        // 'important' because background settings are more specific than the grid settings
-        background-size: calc((100% - ($columns * $gutter)) * calc(1 / $columns) + $gutter) 1px !important;
-        margin: 0 calc($margin-right - calc($gutter / 2)) 0 calc($margin-left - calc($gutter / 2));
-        // The grid is calculated starting from the middle
-        // Thats why its necessary to add the half of the column gap to the left and right side
-        width: calc(100% - $margin-right + calc($gutter / 2) - $margin-left + calc($gutter / 2));
-    }
-
-    body[data-dev-grid="lines"] {
-        .dev-toolbar__grid::after {
-            background:
-                // center of the column spacing
-                linear-gradient(90deg, transparent 0.5px, transparent 0.5px) 0 0,
-                // Left column line
-                // position: from the column spacing center to the right by half a column spacing
-                linear-gradient(90deg, $color--dev-grid 0.5px, transparent 0.5px) calc($gutter / 2) 0,
-                // right column line
-                linear-gradient(90deg, $color--dev-grid 0.5px, transparent 0.5px) calc($gutter / 2 * -1) 0;
-        }
-    }
-
-    body[data-dev-grid="ribbons"] {
-        .dev-toolbar__grid::after {
-            background:
-                // ceft column ribbon
-                // position: from the column spacing center to the right by half a column spacing
-                linear-gradient(90deg, $color--dev-grid-ribbons calc(100% - $gutter), transparent 0.5px) calc($gutter / 2) 0,
-        }
-    }
-}
-
+//
+// Gezeichnet wird das Raster von `canvas-grid-lines`; Toolbar.js hängt das
+// Canvas in dieses Element. Hier steht nur noch, wo das Element liegt.
+// Die Linienfarben stehen als GRID_MODES in Toolbar.js — ein Canvas nimmt sie
+// zur Laufzeit entgegen, nicht als Sass-Variable.
 .dev-toolbar__grid {
-    display: none;
-    width: 100%;
+    // Spannt genau die Rasterbreite auf: Seitenränder aus `$margins`, Breite
+    // aus `left`/`right`. Die frühere Verschiebung um eine halbe Gutter-Breite
+    // entfällt — sie richtete nur die Kachelwiederholung des Gradienten aus.
     height: 100%;
-    left: 0;
     pointer-events: none;
     position: fixed;
     top: 0;
 
-    body:not([data-dev-grid='aus']) & {
-        display: block;
-    }
+    // Nicht `display: none`: Ein Container ohne Ausdehnung schickt
+    // canvas-grid-lines auf seinen Lazy-Pfad, das Raster bliebe ungezeichnet.
+    visibility: hidden;
+
+    // Immer vor dem Inhalt: Ein Messraster, das hinter dem liegt, was man
+    // vermessen will, taugt nicht — früher galt das nur für `lines`, `ribbons`
+    // lag dahinter. Der z-index macht zugleich den Stacking Context auf, ohne
+    // den das Canvas hinter den Hintergrund des Body rutschte.
+    //
+    // Gleicher Wert wie `.lil-gui.lil-root`, und das ist Absicht: Bei
+    // Gleichstand entscheidet die Dokumentreihenfolge, und die Toolbar hängt
+    // sich nach dem Overlay ein. Das Panel bleibt also bedienbar.
+    z-index: 9999999;
 
-    body[data-dev-grid='lines'] & {
-        z-index: 9999999;
+    body:not([data-dev-grid='aus']) & {
+        visibility: visible;
     }
 
-    &::after {
-        content: "";
-        height: 100%;
+    // Bewusst statt eines Imports von `canvas-grid-lines/css`: Dessen Regel
+    // greift über `[data-grid-initialised] canvas` auf jedes Canvas im Dokument
+    // und würde die Rasterebenen im Projekt mit `z-index: -1` nach hinten
+    // ziehen. Hier bleibt sie auf das Overlay beschränkt.
+    canvas {
         left: 0;
         position: absolute;
         top: 0;
@@ -78,7 +52,10 @@ $color--dev-grid-center: rgba(0, 0, 0, 0.2);
 
 @each $layout, $breite in $layouts {
     @include mediaquery($layout) using ($layout) {
-        @include dev-toolbar-grid($layout, map.get($columns, $layout), map.get($gutter, $layout), map.get(map.get($margins, $layout), 'left'), map.get(map.get($margins, $layout), 'right'));
+        .dev-toolbar__grid {
+            left: size($layout, map.get(map.get($margins, $layout), 'left'));
+            right: size($layout, map.get(map.get($margins, $layout), 'right'));
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "5.8.0",
+    "version": "6.0.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "sass": "scss/forward.scss",
@@ -39,6 +39,7 @@
     ],
     "dependencies": {
         "basic-ftp": "^5.0.0",
+        "canvas-grid-lines": "^10.3.0",
         "chokidar": "^4.0.0",
         "cli-progress": "^3.12.0",
         "dotenv": "^17.0.0",
@@ -64,7 +65,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/profitlich-ch/profitlich-template-toolkit.git"
+        "url": "git+https://github.com/profitlich-ch/template-toolkit.git"
     },
     "license": "MIT"
 }

package/dev/toolbar/COLUMNS.md

@@ -1,228 +0,0 @@
-# Plan: Exakte Spaltenlinien via Canvas (Variante E)
-
-## Context
-
-Im `lines`-Modus des Dev-Grids werden Spaltenlinien über `linear-gradient` + `background-size` als Kachelmuster erzeugt. Die Kachelbreite löst auf Bruchpixel-Werte auf → die `0.5px`-Gradient-Stops landen an leicht unterschiedlichen physischen Pixeln pro Kachel. Ergebnis: Linien erscheinen wackelnd oder inkonsistent.
-
-**Lösung:** `<canvas>`-Element mit korrekter `devicePixelRatio`-Behandlung und dem "Half-Pixel"-Trick für pixelgenaue, scharf gerenderte Linien. Funktioniert auf 1×- und Retina-Displays gleich gut.
-
----
-
-## Betroffene Dateien
-
-- [dev/toolbar/Toolbar.js](dev/toolbar/Toolbar.js)
-- [dev/toolbar/toolbar.scss](dev/toolbar/toolbar.scss)
-
----
-
-## Architektur
-
-```text
-.dev-toolbar__grid (position: fixed, 100vw×100vh)
-└── <canvas>            ← neu, ersetzt ::after für "lines"
-::after                 ← bleibt für "ribbons" erhalten
-```
-
-Das Canvas-Element wird als Kind von `#gridElement` angehängt. Es erbt dessen Fixed-Positioning und Visibility-Steuerung über `data-dev`. Für den `lines`-Modus zeichnet das Canvas; für `ribbons` wird das Canvas geleert und `::after` übernimmt.
-
----
-
-## SCSS — `toolbar.scss`
-
-### 1. CSS Custom Properties im Mixin ergänzen
-
-Im Block `body[data-dev='true']` innerhalb von `dev-toolbar-grid`:
-
-```scss
-body[data-dev='true'] {
-    --dev-columns: #{$columns};        // unitless integer
-    --dev-gutter: #{$gutter};          // CSS-Wert (z. B. "1.5rem" oder "20px")
-    --dev-margin-left: #{$margin-left};
-    --dev-margin-right: #{$margin-right};
-
-    .dev-toolbar__grid::after { ... }  // unverändert
-}
-```
-
-### 2. `lines`-Gradient entfernen
-
-Den gesamten Block (Zeilen 28–39) entfernen — das Canvas übernimmt die Darstellung:
-
-```scss
-// ENTFERNEN:
-body[data-dev='true'][data-dev-grid="lines"] {
-    .dev-toolbar__grid::after { background: ...; }
-}
-```
-
-### 3. Canvas-Styling ergänzen
-
-```scss
-.dev-toolbar__grid {
-    canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-}
-```
-
----
-
-## JavaScript — `Toolbar.js`
-
-### Neue private Fields
-
-```javascript
-#gridElement = null;    // bisher nur lokale Variable, jetzt gespeichert
-#canvas = null;
-#ctx = null;
-```
-
-### `constructor()` — Änderungen
-
-1. `gridOverlay` → `this.#gridElement` (Referenz speichern)
-2. `#initCanvas()` aufrufen nach `prepend`
-
-```javascript
-this.#gridElement = document.createElement('div');
-this.#gridElement.classList.add('dev-toolbar__grid');
-document.body.prepend(this.#gridElement);
-this.#initCanvas();
-```
-
-### Neue Methode `#initCanvas()`
-
-```javascript
-#initCanvas() {
-    this.#canvas = document.createElement('canvas');
-    this.#gridElement.appendChild(this.#canvas);
-    this.#ctx = this.#canvas.getContext('2d');
-}
-```
-
-### Neue Methode `#drawGrid()`
-
-Wird aufgerufen bei: State-Wechsel (`#applyState`), Resize (`#onResize`).
-
-```javascript
-#drawGrid() {
-    const dpr = window.devicePixelRatio || 1;
-    const w = window.innerWidth;
-    const h = window.innerHeight;
-
-    this.#canvas.width  = Math.round(w * dpr);
-    this.#canvas.height = Math.round(h * dpr);
-
-    this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
-
-    if (this.#state.grid !== 'lines') return;
-
-    this.#ctx.setTransform(dpr, 0, 0, dpr, 0.5, 0);  // scale + half-pixel shift
-
-    this.#drawColumnLines();
-}
-```
-
-**Half-pixel-Trick:** `ctx.setTransform(dpr, 0, 0, dpr, 0.5, 0)` — der 0.5px-Shift zentriert 1px-Linien exakt auf physische Pixel bei dpr=1. Bei dpr=2 (Retina) ist 0.5 CSS-px = 1 physischer Pixel, ebenfalls scharf.
-
-### Neue Methode `#drawColumnLines()`
-
-```javascript
-#drawColumnLines() {
-    const style = getComputedStyle(document.body);
-    const columns    = parseInt(style.getPropertyValue('--dev-columns'));
-    const gutter     = this.#resolveToPx(style.getPropertyValue('--dev-gutter').trim());
-    const marginLeft = this.#resolveToPx(style.getPropertyValue('--dev-margin-left').trim());
-
-    // Kachelbreite = (Viewport - Margins + Gutter) / Spalten
-    // (identisch zur background-size-Formel im SCSS)
-    const gridWidth = window.innerWidth - marginLeft
-        - this.#resolveToPx(style.getPropertyValue('--dev-margin-right').trim())
-        + gutter;
-    const tileWidth  = gridWidth / columns;
-    const colContent = tileWidth - gutter;
-
-    this.#ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
-    this.#ctx.lineWidth   = 1;
-    const h = window.innerHeight;
-
-    for (let i = 0; i < columns; i++) {
-        const leftEdge  = marginLeft + i * tileWidth;
-        const rightEdge = leftEdge + colContent;
-
-        this.#ctx.beginPath();
-        this.#ctx.moveTo(Math.round(leftEdge),  0);
-        this.#ctx.lineTo(Math.round(leftEdge),  h);
-        this.#ctx.stroke();
-
-        this.#ctx.beginPath();
-        this.#ctx.moveTo(Math.round(rightEdge), 0);
-        this.#ctx.lineTo(Math.round(rightEdge), h);
-        this.#ctx.stroke();
-    }
-}
-```
-
-### Neue Methode `#resolveToPx(cssValue)`
-
-Löst beliebige CSS-Einheiten (rem, vw, calc, …) auf px auf, ohne Unit-Parsing-Logik:
-
-```javascript
-#resolveToPx(cssValue) {
-    if (/^-?\d+(\.\d+)?px$/.test(cssValue)) return parseFloat(cssValue);
-
-    const probe = document.createElement('div');
-    probe.style.cssText = `position:fixed;visibility:hidden;width:${cssValue};top:0;left:0;`;
-    document.body.appendChild(probe);
-    const px = probe.getBoundingClientRect().width;
-    probe.remove();
-    return px;
-}
-```
-
-### `#applyState()` — Ergänzung
-
-```javascript
-#applyState() {
-    const gridActive = this.#state.grid !== 'aus';
-    document.body.setAttribute('data-dev', String(gridActive));
-    document.body.setAttribute('data-dev-grid', this.#state.grid);
-    this.#updateImageSize();
-    this.#drawGrid();   // ← neu
-}
-```
-
-### `#onResize` — Ergänzung
-
-```javascript
-#onResize = () => {
-    this.#gui.title(this.#getViewportText());
-    this.#updateImageSize();
-    this.#drawGrid();   // ← neu
-}
-```
-
----
-
-## Positionsformel (Herleitung)
-
-Das SCSS positioniert `::after` mit `margin-left = marginLeft - gutter/2`, sodass die Kacheln mittig zwischen Spalten beginnen. Die resultierenden Canvas-Positionen sind:
-
-| | Formel | Beispiel (12 Spalten, gutter=20px, marginLeft=40px) |
-| --- | --- | --- |
-| Linke Kante Spalte i | `marginLeft + i × tileWidth` | i=0: 40px, i=1: 120px, … |
-| Rechte Kante Spalte i | `marginLeft + i × tileWidth + colContent` | i=0: 100px, i=1: 180px, … |
-
-Diese Formel ist identisch zur bestehenden `background-size`-Logik, nur ohne Kachel-Grenz-Problem.
-
----
-
-## Verifikation
-
-1. `ddev npm run dev` starten
-2. Dev-Toolbar öffnen (Ctrl), Grid auf "lines" schalten
-3. **Browserfenster in verschiedene Breiten ziehen** → Linien dürfen nicht wackeln
-4. **Safari (Retina) + Chrome (1×)** vergleichen → gleiche Schärfe
-5. **Ribbons-Modus** prüfen → Canvas geleert, `::after`-Gradient unverändert
-6. **Breakpoint-Wechsel** prüfen → CSS Custom Properties werden neu gelesen, Linienanzahl passt sich an