@tobi2409/layout 0.5.0 → 0.9.1

package/README.md

@@ -1,117 +1,128 @@
 # Layout
 
-A small Delphi-like layout system based on CSS Grid.
+A small build-time layout system based on CSS Grid. Frame children declare their position with an `@align` HTML attribute; the CLI parses the document and generates the required tracks and placements.
 
-The idea: a container with `.frame` defines fixed areas such as `top`, `left`, `client`, or `bottom`. Child elements are assigned to an area through the CSS custom property `--align`.
+## Installation
 
-## Goal
+```sh
+npm install @tobi2409/layout
+```
 
-The system is meant to enable simple, readable user interfaces without scattering many utility classes throughout the HTML.
+## Usage
 
-Example:
+Add the `frame` class to a container and align its direct children:
 
 ```html
-<div class="frame">
-	<header style="--align: top;">Header</header>
-	<nav style="--align: left;">Navigation</nav>
-	<main style="--align: client;">Inhalt</main>
-	<aside style="--align: right;">Inspector</aside>
-	<footer style="--align: bottom;">Footer</footer>
-</div>
+<!doctype html>
+<html lang="de">
+<head>
+	<meta charset="utf-8">
+	<title>Application</title>
+</head>
+<body>
+	<div class="frame">
+		<header @align="top">Header</header>
+		<nav @align="left">Navigation</nav>
+		<main @align="client">Content</main>
+		<aside @align="right">Inspector</aside>
+		<footer @align="bottom">Status</footer>
+	</div>
+</body>
+</html>
 ```
 
-## Usage
+Process the HTML file:
 
-Include `layout.css`:
+```sh
+npx layout path/to/application.html
+```
 
-```html
-<link rel="stylesheet" href="layout.css">
+You can also pass a directory. It is searched recursively for `.html` and `.htm` files; output directories are skipped:
+
+```sh
+npx layout path/to/pages
 ```
 
-Then create a container with `.frame` and place its direct child elements using `--align`.
-
-## Supported align values
-
-### Horizontal / vertical
-
-- `top`
-- `top-2`
-- `top-3`
-- `top-4`
-- `top-5`
-- `left`
-- `left-2`
-- `left-3`
-- `left-4`
-- `left-5`
-- `client`
-- `right`
-- `right-2`
-- `right-3`
-- `right-4`
-- `right-5`
-- `bottom`
-- `bottom-2`
-- `bottom-3`
-- `bottom-4`
-- `bottom-5`
-
-`client` is the flexible main area and uses the remaining space.
-
-## Basic principle
-
-- `top...` and `bottom...` occupy full rows.
-- `left...` and `right...` occupy columns next to the content.
-- `client` is placed in the center.
-- Multiple `.frame` containers can be nested.
-
-## Nesting example
+The output directory defaults to `generated`. Use `--output-dir` (or `-o`) to choose another name:
+
+```sh
+npx layout path/to/application.html --output-dir dist
+```
+
+For `path/to/application.html`, the command leaves the source unchanged and writes these files:
+
+```text
+path/to/generated/application.html
+path/to/generated/application-layout.css
+path/to/generated/application-layout.js
+```
+
+The generated HTML contains `data-layout-*` attributes instead of `@align`, so it is valid HTML. It also receives the stylesheet and runtime references in its `head` unless they already exist:
 
 ```html
-<div class="frame" style="height: 300px;">
-	<header style="--align: top;">Header</header>
-
-	<main class="frame" style="--align: client;">
-		<div style="--align: top;">Toolbar</div>
-		<section style="--align: client;">Inhalt</section>
-		<div style="--align: bottom;">Status</div>
-	</main>
-</div>
+<link rel="stylesheet" href="application-layout.css">
+<script type="module" src="application-layout.js"></script>
 ```
 
-## When this works well
+Run the command again whenever the frame structure or an `@align` value changes. It overwrites both generated files deterministically without modifying the source document.
 
-Suitable for:
+## Alignments
 
-- app layouts
-- admin interfaces
-- classic desktop-like UI structures
-- clearly separated areas such as header, sidebar, content, and footer
+- `top`: adds an `auto` row before the flexible content row
+- `bottom`: adds an `auto` row after the flexible content row
+- `left`: adds an `auto` column before the flexible content column
+- `right`: adds an `auto` column after the flexible content column
+- `client`: occupies the central `1fr` row and column
 
-## When to combine it with something else
+Repeated values are placed in document order. For example, three `top` children produce `auto auto auto 1fr`; numbered values such as `top-2` are no longer needed.
 
-For dynamic lists or freely flowing rows, `.frame` is not the best level of abstraction. In those cases, a combination is usually better:
+Only direct children of a frame are considered. Frames can be nested without their children affecting the parent frame.
 
-- `.frame` for the coarse page structure
-- Flexbox for lists, toolbars, or rows
-- `position: absolute` for overlays or freely positioned elements
+## Responsive alignment
 
-## Possible future direction
+Use a JSON object for breakpoint-specific alignment. Because JSON uses double quotes, wrap the HTML attribute in single quotes:
 
-It might be worth considering a switch from CSS Grid to Flexbox as the underlying model:
+```html
+<nav @align='{
+	"default": "left",
+	"max-width: 599px": "top",
+	"min-width: 1200px and max-height: 800px": "right"
+}'>Navigation</nav>
+```
+
+`default` is optional. Every other key becomes a media query. Feature lists can be written without surrounding parentheses; the generator emits valid CSS such as:
+
+```css
+@media (min-width: 1200px) and (max-height: 800px) { /* ... */ }
+```
+
+For each query, all tracks and placements in the affected frame are recalculated. When multiple media queries match simultaneously, normal CSS source order determines the result.
+
+## Runtime API
 
-- `top` / `bottom` → `flex-direction: column` (children stack vertically)
-- `left` / `right` → `flex-direction: row` (children stack horizontally)
+The generated runtime exposes `setAlign` globally. Pass a generated layout element and its new alignment:
 
-This would naturally handle multiple children with the same alignment without overlapping, and without needing levels like `top-2` or `left-3`. Dynamic lists and reordering would also become easier. The trade-off is that the current single-class approach with `--align` would need to be rethought, since Flexbox distributes all children at once rather than placing them into named areas.
+```js
+const inspector = document.querySelector(".inspector");
+setAlign(inspector, "bottom");
+```
+
+`setAlign` updates the element's alignment, recalculates its parent frame's `grid-template-rows` and `grid-template-columns`, and sets `grid-row` and `grid-column` for every aligned child. The runtime value overrides generated responsive placement for that frame until the page is reloaded.
+
+The API can also be imported directly:
 
-## Limitations
+```js
+import { setAlign } from "@tobi2409/layout/runtime";
+```
+
+Supported runtime values are `top`, `right`, `bottom`, `left`, and `client`. The element must be a direct generated child of a frame.
 
-- Multiple elements with exactly the same `--align` overlap.
-- That is why there are levels such as `top-2` or `left-3`.
-- The number of levels is currently intentionally limited to 5 per direction.
+## Development
 
-## Files
+```sh
+npm test
+node bin/layout.mjs examples/demo/demo.html
+node bin/layout.mjs examples/list/list.html
+```
 
-- [layout.css](layout.css): core of the layout system
-- [demo.html](demo.html): simple demo example
+The Todo example in `examples/list/list.html` demonstrates how newly appended elements are registered and positioned with `setAlign(todo, "top")`.

package/bin/layout.mjs

@@ -0,0 +1,386 @@
+#!/usr/bin/env node
+
+import { mkdir, readFile, readdir, realpath, stat, writeFile } from 'node:fs/promises'
+import { basename, dirname, extname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { parse, serialize } from 'parse5'
+
+const ALIGNMENTS = new Set(['top', 'right', 'bottom', 'left', 'client'])
+
+function getAttribute(node, name) {
+    return node.attrs?.find((attribute) => attribute.name === name)
+}
+
+function setAttribute(node, name, value) {
+    const attribute = getAttribute(node, name)
+
+    if (attribute) {
+        attribute.value = value
+    } else {
+        node.attrs.push({ name, value })
+    }
+}
+
+function removeAttribute(node, name) {
+    node.attrs = node.attrs?.filter((attribute) => attribute.name !== name) ?? []
+}
+
+function hasClass(node, className) {
+    return getAttribute(node, 'class')?.value.split(/\s+/).includes(className) ?? false
+}
+
+function walk(node, visitor) {
+    // visitor ist ein Callback, der für jeden DOM-Knoten einmal aufgerufen wird.
+    visitor(node)
+
+    for (const child of node.childNodes ?? []) {
+        walk(child, visitor)
+    }
+}
+
+function parseAlignment(value, source) {
+    let parsed = value
+
+    if (value.trim().startsWith('{')) {
+        try {
+            parsed = JSON.parse(value)
+        } catch (error) {
+            throw new Error(`${source}: invalid JSON in @align: ${error.message}`)
+        }
+    }
+
+    if (typeof parsed === 'string') {
+        validateAlignment(parsed, source)
+        return { base: parsed, media: new Map() }
+    }
+    
+    if (!parsed || Array.isArray(parsed) || typeof parsed !== 'object') {
+        throw new Error(`${source}: @align must be an alignment or a JSON object`);
+    }
+
+    const media = new Map()
+    let base
+
+    for (const [query, alignment] of Object.entries(parsed)) {
+        validateAlignment(alignment, source)
+
+        if (query === 'default') {
+            base = alignment
+        } else {
+            media.set(query, alignment)
+        }
+    }
+
+    return { base, media }
+}
+
+function validateAlignment(alignment, source) {
+    if (!ALIGNMENTS.has(alignment)) {
+        throw new Error(`${source}: unsupported alignment "${alignment}"`)
+    }
+}
+
+function repeat(track, count) {
+    return Array.from({ length: count }, () => track)
+}
+
+// Ermittelt für einen Frame die im Basis- oder Media-Query-Zustand wirksamen
+// Alignments und erzeugt daraus CSS-Regeln für Grid-Tracks und Elementpositionen.
+// Die Funktion wird beim Verarbeiten der Items einmal für den Basiszustand und
+// zusätzlich für jede definierte Query aufgerufen. query ist dabei nur der Text
+// des zu erzeugenden CSS-Zustands, nicht die aktuell passende Bildschirmgröße;
+// ob eine Media Query zutrifft, entscheidet später der Browser.
+function rulesForState(frameId, items, query) {
+    // Löst für jedes Element die aktuell gültige Ausrichtung auf: entweder den
+    // Wert der Media Query oder das Basis-Alignment. Elemente ohne wirksames
+    // Alignment werden ausgeschlossen.
+    const activeItems = items.flatMap((item) => {
+        const alignment = query && item.alignment.media.has(query)
+            ? item.alignment.media.get(query)
+            : item.alignment.base
+            
+        // Beispiel: { id: "1-1", alignment: { base: "client", media: new Map() }, activeAlignment: "client" }
+        return alignment ? [{ ...item, activeAlignment: alignment }] : []
+    })
+
+    // Gruppiert die aktiven Elemente nach top, right, bottom, left und client.
+    // Die Gruppengrößen bestimmen die Anzahl der Grid-Tracks; die Position eines
+    // Elements in seiner Gruppe bestimmt anschließend grid-row bzw. grid-column.
+    const groups = Object.fromEntries(
+        [...ALIGNMENTS].map((alignment) => [
+            alignment,
+            activeItems.filter((item) => item.activeAlignment === alignment)
+        ])
+    )
+
+    const centerRow = groups.top.length + 1
+    const centerColumn = groups.left.length + 1
+
+    const rows = [...repeat('auto', groups.top.length), '1fr', ...repeat('auto', groups.bottom.length)]
+    const columns = [...repeat('auto', groups.left.length), '1fr', ...repeat('auto', groups.right.length)]
+
+    const rules = [
+        `[data-layout-frame='${frameId}'] {`,
+        `    grid-template-rows: ${rows.join(' ')};`,
+        `    grid-template-columns: ${columns.join(' ')};`,
+        "}"
+    ]
+
+    groups.top.forEach((item, index) => rules.push(itemRule(item.id, index + 1, '1 / -1')))
+    groups.bottom.forEach((item, index) => rules.push(itemRule(item.id, centerRow + index + 1, '1 / -1')))
+    groups.left.forEach((item, index) => rules.push(itemRule(item.id, centerRow, String(index + 1))))
+    groups.right.forEach((item, index) => rules.push(itemRule(item.id, centerRow, String(centerColumn + index + 1))))
+    groups.client.forEach((item) => rules.push(itemRule(item.id, centerRow, String(centerColumn))))
+
+    return rules.join('\n');
+}
+
+function itemRule(id, row, column) {
+    return `[data-layout-item='${id}'] { grid-row: ${row}; grid-column: ${column}; }`
+}
+
+function formatMediaQuery(query) {
+    const normalized = query.trim().replace(/\s+an\s+/gi, ' and ')
+
+    if (normalized.startsWith('(')) {
+        return normalized
+    }
+
+    return normalized
+        .split(/\s+and\s+/i)
+        .map((feature) => `(${feature.trim()})`)
+        .join(' and ')
+}
+
+// Stellt sicher, dass im <head> genau ein Link auf das generierte Stylesheet
+// vorhanden ist. Ein bereits existierender Link wird nicht erneut eingefügt.
+function ensureStylesheet(document, href) {
+    let head
+    let existing
+
+    walk(document, (node) => {
+        if (node.tagName === 'head') {
+            head = node
+        }
+        
+        if (node.tagName === 'link' && getAttribute(node, 'href')?.value === href) {
+            existing = node;
+        }
+    })
+
+    if (existing) {
+        return
+    }
+
+    if (!head) {
+        throw new Error('HTML document has no <head> element')
+    }
+
+    const fragment = parse(`<link rel="stylesheet" href="${href}">`)
+    let link
+
+    // parse gibt ein DOM-Fragment zurück, daher müssen wir das <link>-Element daraus extrahieren.
+    walk(fragment, (node) => {
+        if (node.tagName === 'link') {
+            link = node
+        }
+    })
+
+    link.parentNode = head
+    head.childNodes.push(link)
+}
+
+// Stellt sicher, dass im <head> genau ein Modul-Script für die Runtime-API
+// vorhanden ist. Ein bereits existierendes Script wird nicht erneut eingefügt.
+function ensureRuntime(document, src) {
+    let head
+    let existing
+
+    walk(document, (node) => {
+        if (node.tagName === 'head') {
+            head = node
+        }
+
+        if (node.tagName === 'script' && getAttribute(node, 'src')?.value === src) {
+            existing = node
+        }
+    })
+
+    if (existing) {
+        return
+    }
+
+    if (!head) {
+        throw new Error('HTML document has no <head> element')
+    }
+
+    const fragment = parse(`<script type="module" src="${src}"></script>`)
+    let script
+
+    walk(fragment, (node) => {
+        if (node.tagName === 'script') {
+            script = node
+        }
+    })
+
+    script.parentNode = head
+    head.childNodes.push(script)
+}
+
+export function compileHtml(source, sourceName = 'document.html') {
+    const document = parse(source)
+    const frames = []
+
+    walk(document, (node) => {
+        if (node.tagName && hasClass(node, 'frame')) {
+            frames.push(node)
+        }
+    })
+
+    const css = [
+        '.frame {',
+        '    position: relative;',
+        '    display: grid;',
+        '}'
+    ]
+
+    frames.forEach((frame, frameIndex) => {
+        const frameId = String(frameIndex + 1)
+        setAttribute(frame, 'data-layout-frame', frameId)
+
+        const items = []
+
+        for (const child of frame.childNodes ?? []) {
+            const attribute = getAttribute(child, '@align')
+
+            if (!attribute) {
+                continue
+            }
+
+            const id = `${frameId}-${items.length + 1}`
+
+            setAttribute(child, 'data-layout-item', id)
+            setAttribute(child, 'data-layout-align', attribute.value)
+
+            // alignment kommt nicht aus dem DOM: parseAlignment wandelt den rohen
+            // @align-Attributwert in { base, media } für die CSS-Erzeugung um.
+            items.push({ id, alignment: parseAlignment(attribute.value, sourceName) })
+            removeAttribute(child, '@align')
+        }
+
+        css.push('', rulesForState(frameId, items))
+
+        const queries = new Set(items.flatMap((item) => [...item.alignment.media.keys()]))
+
+        for (const query of queries) {
+            const mediaRules = rulesForState(frameId, items, query)
+                .split('\n')
+                .map((line) => `    ${line}`)
+                .join('\n')
+
+            css.push('', `@media ${formatMediaQuery(query)} {\n${mediaRules}\n}`)
+        }
+    })
+
+    const extension = extname(sourceName)
+    const stem = basename(sourceName, extension)
+    const stylesheet = `${stem}-layout.css`
+    const runtime = `${stem}-layout.js`
+
+    ensureStylesheet(document, stylesheet)
+    ensureRuntime(document, runtime)
+
+    return { html: serialize(document), css: `${css.join('\n')}\n`, stylesheet, runtime }
+}
+
+export async function compileFile(fileName, outputDirectoryName = 'generated') {
+    const source = await readFile(fileName, 'utf8')
+    const result = compileHtml(source, fileName)
+    const outputDirectory = join(dirname(fileName), outputDirectoryName)
+    const htmlFile = join(outputDirectory, basename(fileName))
+    const cssFile = join(outputDirectory, result.stylesheet)
+    const runtimeFile = join(outputDirectory, result.runtime)
+    const runtimeSource = await readFile(new URL('../src/layout.js', import.meta.url), 'utf8')
+
+    await mkdir(outputDirectory, { recursive: true })
+
+    await Promise.all([
+        writeFile(htmlFile, result.html),
+        writeFile(cssFile, result.css),
+        writeFile(runtimeFile, runtimeSource)
+    ])
+
+    return { ...result, htmlFile, cssFile, runtimeFile }
+}
+
+async function findHtmlFiles(directory, outputDirectoryName) {
+    const files = []
+
+    for (const entry of await readdir(directory, { withFileTypes: true })) {
+        const entryPath = join(directory, entry.name)
+
+        if (entry.isDirectory()) {
+            if (entry.name !== outputDirectoryName) {
+                files.push(...await findHtmlFiles(entryPath, outputDirectoryName))
+            }
+        } else if (entry.isFile() && /\.html?$/i.test(entry.name)) {
+            files.push(entryPath)
+        }
+    }
+
+    return files
+}
+
+export async function compilePath(inputPath, outputDirectoryName = 'generated') {
+    const input = await stat(inputPath)
+    const files = input.isDirectory()
+        ? await findHtmlFiles(inputPath, outputDirectoryName)
+        : [inputPath]
+
+    return Promise.all(files.map((fileName) => compileFile(fileName, outputDirectoryName)))
+}
+
+async function main() {
+    const args = process.argv.slice(2)
+    const fileName = args[0]
+    let outputDirectoryName = 'generated'
+
+    if (!fileName) {
+        console.error('Usage: layout <document.html|directory> [--output-dir <name>]')
+        process.exitCode = 1
+        return
+    }
+
+    for (let index = 1; index < args.length; index += 1) {
+        const argument = args[index]
+
+        if (argument === '--output-dir' || argument === '-o') {
+            outputDirectoryName = args[index + 1]
+            index += 1
+
+            if (!outputDirectoryName) {
+                throw new Error(`${argument} requires a directory name`)
+            }
+        } else {
+            throw new Error(`Unknown argument: ${argument}`)
+        }
+    }
+
+    const results = await compilePath(fileName, outputDirectoryName)
+
+    for (const result of results) {
+        console.log(`Generated ${result.htmlFile}`)
+        console.log(`Generated ${result.cssFile}`)
+        console.log(`Generated ${result.runtimeFile}`)
+    }
+}
+
+const isMainModule = process.argv[1]
+    && await realpath(process.argv[1]) === await realpath(fileURLToPath(import.meta.url))
+
+if (isMainModule) {
+    main().catch((error) => {
+        console.error(error.message)
+        process.exitCode = 1
+    })
+}

package/package.json

@@ -1,14 +1,23 @@
 {
   "name": "@tobi2409/layout",
-  "version": "0.5.0",
-  "description": "Tiny CSS frame layout using named grid areas and the --align property",
+  "version": "0.9.1",
+  "description": "Build-time HTML frame layout generator using CSS Grid",
   "license": "MIT",
-  "main": "src/layout.css",
+  "type": "module",
+  "exports": {
+    "./runtime": "./src/layout.js"
+  },
+  "bin": {
+    "layout": "bin/layout.mjs"
+  },
   "files": [
+    "bin",
     "src",
     "README.md"
   ],
-  "style": "src/layout.css",
+  "scripts": {
+    "test": "node --test"
+  },
   "keywords": [
     "css",
     "css-library",
@@ -26,8 +35,8 @@
     "frontend",
     "responsive",
     "align",
-    "grid-area",
-    "named-areas",
+    "html-attributes",
+    "build-time",
     "client-area",
     "top",
     "bottom",
@@ -40,5 +49,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "parse5": "^8.0.1"
   }
-}
+}

package/src/layout.js

@@ -0,0 +1,96 @@
+const ALIGNMENTS = new Set(['top', 'right', 'bottom', 'left', 'client'])
+let runtimeItemId = 0
+
+function validateAlignment(alignment) {
+    if (!ALIGNMENTS.has(alignment)) {
+        throw new TypeError(`Unsupported alignment "${alignment}"`)
+    }
+}
+
+function formatMediaQuery(query) {
+    const normalized = query.trim().replace(/\s+an\s+/gi, ' and ')
+
+    if (normalized.startsWith('(')) {
+        return normalized
+    }
+
+    return normalized
+        .split(/\s+and\s+/i)
+        .map((feature) => `(${feature.trim()})`)
+        .join(' and ')
+}
+
+function getAlignment(element) {
+    const value = element.dataset.layoutAlign
+
+    if (!value?.trim().startsWith('{')) {
+        return value
+    }
+
+    const specification = JSON.parse(value)
+    let alignment = specification.default
+
+    for (const [query, candidate] of Object.entries(specification)) {
+        if (query !== 'default' && globalThis.matchMedia(formatMediaQuery(query)).matches) {
+            alignment = candidate
+        }
+    }
+
+    return alignment
+}
+
+function place(element, row, column) {
+    element.style.gridRow = String(row)
+    element.style.gridColumn = String(column)
+}
+
+function updateFrame(frame) {
+    const groups = Object.fromEntries([...ALIGNMENTS].map((alignment) => [alignment, []]))
+    const items = [...frame.children].filter((child) => child.dataset.layoutItem && child.dataset.layoutAlign)
+
+    for (const item of items) {
+        const alignment = getAlignment(item)
+
+        if (alignment) {
+            validateAlignment(alignment)
+            groups[alignment].push(item)
+        }
+
+        item.style.gridRow = ''
+        item.style.gridColumn = ''
+    }
+
+    const centerRow = groups.top.length + 1
+    const centerColumn = groups.left.length + 1
+
+    frame.style.gridTemplateRows = [...groups.top.map(() => 'auto'), '1fr', ...groups.bottom.map(() => 'auto')].join(' ')
+    frame.style.gridTemplateColumns = [...groups.left.map(() => 'auto'), '1fr', ...groups.right.map(() => 'auto')].join(' ')
+
+    groups.top.forEach((item, index) => place(item, index + 1, '1 / -1'))
+    groups.bottom.forEach((item, index) => place(item, centerRow + index + 1, '1 / -1'))
+    groups.left.forEach((item, index) => place(item, centerRow, index + 1))
+    groups.right.forEach((item, index) => place(item, centerRow, centerColumn + index + 1))
+    groups.client.forEach((item) => place(item, centerRow, centerColumn))
+}
+
+export function setAlign(element, alignment) {
+    validateAlignment(alignment)
+
+    const frame = element?.parentElement
+
+    if (!frame?.dataset.layoutFrame) {
+        throw new TypeError("setAlign expects a direct child of a generated frame")
+    }
+
+    if (!element.dataset.layoutItem) {
+        runtimeItemId += 1
+        element.dataset.layoutItem = `${frame.dataset.layoutFrame}-runtime-${runtimeItemId}`
+    }
+
+    element.dataset.layoutAlign = alignment
+    updateFrame(frame)
+
+    return element
+}
+
+globalThis.setAlign = setAlign

package/src/layout.css

@@ -1,24 +0,0 @@
-.frame {
-    position: relative;
-    display: grid;
-    grid-template-rows: auto auto auto auto auto 1fr auto auto auto auto auto;     /* top / client / bottom */
-    grid-template-columns: auto auto auto auto auto 1fr auto auto auto auto auto;  /* left / client / right */
-    grid-template-areas:
-        "top        top         top         top         top         top         top         top         top         top         top"
-        "top-2      top-2       top-2       top-2       top-2       top-2       top-2       top-2       top-2       top-2       top-2"
-        "top-3      top-3       top-3       top-3       top-3       top-3       top-3       top-3       top-3       top-3       top-3"
-        "top-4      top-4       top-4       top-4       top-4       top-4       top-4       top-4       top-4       top-4       top-4"
-        "top-5      top-5       top-5       top-5       top-5       top-5       top-5       top-5       top-5       top-5       top-5"
-        "left       left-2      left-3      left-4      left-5      client      right       right-2     right-3     right-4     right-5"
-        "bottom     bottom      bottom      bottom      bottom      bottom      bottom      bottom      bottom      bottom      bottom"
-        "bottom-2   bottom-2    bottom-2    bottom-2    bottom-2    bottom-2    bottom-2    bottom-2    bottom-2    bottom-2    bottom-2"
-        "bottom-3   bottom-3    bottom-3    bottom-3    bottom-3    bottom-3    bottom-3    bottom-3    bottom-3    bottom-3    bottom-3"
-        "bottom-4   bottom-4    bottom-4    bottom-4    bottom-4    bottom-4    bottom-4    bottom-4    bottom-4    bottom-4    bottom-4"
-        "bottom-5   bottom-5    bottom-5    bottom-5    bottom-5    bottom-5    bottom-5    bottom-5    bottom-5    bottom-5    bottom-5";
-}
-
-.frame > * {
-    grid-area: var(--align, auto);
-}
-
-/* soll sich Element frei im Parent bewegen, einfach absolute Positionierung */