@jjlmoya/utils-developer 1.17.0 → 1.20.0

package/src/tool/visualCssGridFlexboxGenerator/canvas.ts

@@ -0,0 +1,103 @@
+import type { LayoutMode, LayoutState } from './logic';
+
+export function getAllItems(canvas: HTMLElement): HTMLElement[] {
+  return Array.from(canvas.querySelectorAll<HTMLElement>('.vcg-item'));
+}
+
+export function getItemSpans(canvas: HTMLElement): Record<string, number> {
+  const spans: Record<string, number> = {};
+  for (const item of getAllItems(canvas)) {
+    const s = Number(item.dataset.span ?? '1');
+    if (s > 1) spans[item.dataset.item ?? ''] = s;
+  }
+  return spans;
+}
+
+export function refreshItemLabels(canvas: HTMLElement, itemPrefix: string) {
+  getAllItems(canvas).forEach((item, index) => {
+    item.dataset.item = String(index + 1);
+    const label = item.querySelector('span');
+    if (label) label.textContent = `${itemPrefix} ${index + 1}`;
+  });
+}
+
+export function makeItem(index: number, itemPrefix: string): HTMLElement {
+  const item = document.createElement('div');
+  const label = document.createElement('span');
+  item.className = 'vcg-item vcg-enter';
+  item.dataset.item = String(index);
+  item.dataset.span = '1';
+  label.textContent = `${itemPrefix} ${index}`;
+  item.append(label);
+  item.addEventListener('animationend', () => item.classList.remove('vcg-enter'));
+  return item;
+}
+
+function paintGridItem(item: HTMLElement, state: LayoutState) {
+  const span = Number(item.dataset.span ?? '1');
+  item.style.minWidth = `${state.itemSize}px`;
+  item.style.minHeight = `${state.itemSize}px`;
+  item.style.gridColumn = span > 1 ? `span ${span}` : '';
+  item.classList.toggle('vcg-spanned', span > 1);
+}
+
+function paintFlexItem(item: HTMLElement, state: LayoutState) {
+  item.style.minWidth = `${state.itemSize}px`;
+  item.style.minHeight = `${state.itemSize}px`;
+  item.style.gridColumn = '';
+  item.classList.remove('vcg-spanned');
+}
+
+export function paintCanvas(canvas: HTMLElement, state: LayoutState) {
+  canvas.style.display = state.mode;
+  canvas.style.gap = `${state.gap}px`;
+  canvas.style.justifyContent = state.justifyContent;
+  canvas.style.alignItems = state.alignItems;
+  canvas.style.width = `${state.width}px`;
+  canvas.style.minHeight = `${state.height}px`;
+
+  if (state.mode === 'grid') {
+    canvas.style.gridTemplateColumns = `repeat(${state.columns}, minmax(0, 1fr))`;
+    canvas.style.flexDirection = '';
+    canvas.style.flexWrap = '';
+    canvas.style.alignContent = '';
+  } else {
+    canvas.style.gridTemplateColumns = '';
+    canvas.style.flexDirection = state.flexDirection;
+    canvas.style.flexWrap = state.flexWrap;
+    canvas.style.alignContent = state.flexWrap !== 'nowrap' ? state.alignContent : '';
+  }
+
+  const painter = state.mode === 'grid' ? paintGridItem : paintFlexItem;
+  getAllItems(canvas).forEach((item) => painter(item, state));
+}
+
+export function toggleVisibility(mode: LayoutMode, wrapValue: string) {
+  document.querySelectorAll<HTMLElement>('.vcg-grid-only').forEach((el) => {
+    el.classList.toggle('vcg-hidden', mode !== 'grid');
+  });
+  document.querySelectorAll<HTMLElement>('.vcg-flex-only').forEach((el) => {
+    el.classList.toggle('vcg-hidden', mode !== 'flex');
+  });
+  const acw = document.getElementById('vcg-align-content-wrap');
+  if (acw && mode === 'flex') {
+    acw.classList.toggle('vcg-hidden', wrapValue === 'nowrap');
+  }
+}
+
+export function setLabelText(id: string, text: string) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = text;
+}
+
+export function updateLabels(state: LayoutState) {
+  setLabelText('vcg-gap-value', `${state.gap}px`);
+  setLabelText('vcg-columns-value', String(state.columns));
+  setLabelText('vcg-width-value', `${state.width}px`);
+  setLabelText('vcg-height-value', `${state.height}px`);
+  setLabelText('vcg-item-size-value', `${state.itemSize}px`);
+}
+
+export function clearPresetActive() {
+  document.querySelectorAll('.vcg-preset-button').forEach((b) => b.classList.remove('vcg-preset-active'));
+}

package/src/tool/visualCssGridFlexboxGenerator/component.astro

@@ -0,0 +1,218 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { VisualCssGridFlexboxGeneratorUI } from './ui';
+import './visual-css-grid-flexbox-generator.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as VisualCssGridFlexboxGeneratorUI;
+---
+
+<div id="vcg-root" class="vcg-root" data-i18n={JSON.stringify(t)}>
+  <section class="vcg-card">
+    <div class="vcg-stage-panel">
+      <div class="vcg-toolbar">
+        <div class="vcg-mode" role="group" aria-label={t.modeLabel}>
+          <button id="vcg-flex" class="vcg-mode-button vcg-active" type="button" aria-pressed="true">
+            <Icon name="mdi:format-align-justify" />
+            {t.flexMode}
+          </button>
+          <button id="vcg-grid" class="vcg-mode-button" type="button" aria-pressed="false">
+            <Icon name="mdi:grid" />
+            {t.gridMode}
+          </button>
+        </div>
+        <div class="vcg-actions">
+          <button id="vcg-add" class="vcg-icon-button" type="button" aria-label={t.addItem} title={t.addItem}>
+            <Icon name="mdi:plus" />
+          </button>
+          <button id="vcg-remove" class="vcg-icon-button" type="button" aria-label={t['removeItem']} title={t['removeItem']}>
+            <Icon name="mdi:minus" />
+          </button>
+          <button id="vcg-reset" class="vcg-icon-button" type="button" aria-label={t.resetLayout} title={t.resetLayout}>
+            <Icon name="mdi:restore" />
+          </button>
+        </div>
+      </div>
+
+      <div class="vcg-presets" id="vcg-presets" role="group" aria-label={t.presetsLabel}>
+        <button class="vcg-preset-button" data-preset="navbar" type="button">
+          <Icon name="mdi:menu" />{t.presetNavbar}
+        </button>
+        <button class="vcg-preset-button" data-preset="cards" type="button">
+          <Icon name="mdi:view-dashboard" />{t.presetCards}
+        </button>
+        <button class="vcg-preset-button" data-preset="hero" type="button">
+          <Icon name="mdi:image-area" />{t.presetHero}
+        </button>
+        <button class="vcg-preset-button" data-preset="sidebar" type="button">
+          <Icon name="mdi:page-layout-sidebar-left" />{t.presetSidebar}
+        </button>
+        <button class="vcg-preset-button" data-preset="gallery" type="button">
+          <Icon name="mdi:view-gallery" />{t.presetGallery}
+        </button>
+      </div>
+
+      <div class="vcg-canvas-shell" id="vcg-canvas-shell">
+        <div id="vcg-canvas" class="vcg-canvas" aria-label={t.canvasLabel}>
+          <div class="vcg-item" data-item="1"><span>{t.itemPrefix} 1</span></div>
+          <div class="vcg-item" data-item="2"><span>{t.itemPrefix} 2</span></div>
+          <div class="vcg-item" data-item="3"><span>{t.itemPrefix} 3</span></div>
+          <div class="vcg-item" data-item="4"><span>{t.itemPrefix} 4</span></div>
+          <div class="vcg-item" data-item="5"><span>{t.itemPrefix} 5</span></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="vcg-control-panel">
+      <div class="vcg-slider-grid">
+        <label class="vcg-control" for="vcg-gap">
+          <span>{t.gapLabel}</span>
+          <strong id="vcg-gap-value">24px</strong>
+          <input id="vcg-gap" type="range" min="0" max="80" value="24" />
+        </label>
+
+        <label class="vcg-control vcg-grid-only vcg-hidden" id="vcg-columns-wrap" for="vcg-columns">
+          <span>{t.columnsLabel}</span>
+          <strong id="vcg-columns-value">3</strong>
+          <input id="vcg-columns" type="range" min="1" max="8" value="3" />
+        </label>
+
+        <label class="vcg-control" for="vcg-width">
+          <span>{t.widthLabel}</span>
+          <strong id="vcg-width-value">760px</strong>
+          <input id="vcg-width" type="range" min="280" max="1200" value="760" />
+        </label>
+
+        <label class="vcg-control" for="vcg-height">
+          <span>{t.heightLabel}</span>
+          <strong id="vcg-height-value">380px</strong>
+          <input id="vcg-height" type="range" min="180" max="700" value="380" />
+        </label>
+
+        <label class="vcg-control" for="vcg-item-size">
+          <span>{t.itemSizeLabel}</span>
+          <strong id="vcg-item-size-value">104px</strong>
+          <input id="vcg-item-size" type="range" min="56" max="200" value="104" />
+        </label>
+      </div>
+
+      <div class="vcg-select-grid">
+        <label class="vcg-select-wrap vcg-flex-only" id="vcg-direction-wrap" for="vcg-direction">
+          <span>{t.directionLabel}</span>
+          <select id="vcg-direction" class="vcg-select">
+            <option value="row" selected>{t.directionRow}</option>
+            <option value="row-reverse">{t.directionRowReverse}</option>
+            <option value="column">{t.directionColumn}</option>
+            <option value="column-reverse">{t.directionColumnReverse}</option>
+          </select>
+        </label>
+
+        <label class="vcg-select-wrap vcg-flex-only" id="vcg-wrap-wrap" for="vcg-wrap">
+          <span>{t.wrapLabel}</span>
+          <select id="vcg-wrap" class="vcg-select">
+            <option value="nowrap">{t.wrapNoWrap}</option>
+            <option value="wrap" selected>{t.wrapWrap}</option>
+            <option value="wrap-reverse">{t.wrapWrapReverse}</option>
+          </select>
+        </label>
+
+        <label class="vcg-select-wrap" for="vcg-justify">
+          <span>{t.justifyLabel}</span>
+          <select id="vcg-justify" class="vcg-select">
+            <option value="start">{t.justifyStart}</option>
+            <option value="center" selected>{t.justifyCenter}</option>
+            <option value="end">{t.justifyEnd}</option>
+            <option value="space-between">{t.justifyBetween}</option>
+            <option value="space-around">{t.justifyAround}</option>
+            <option value="space-evenly">{t.justifyEvenly}</option>
+          </select>
+        </label>
+
+        <label class="vcg-select-wrap" for="vcg-align">
+          <span>{t.alignLabel}</span>
+          <select id="vcg-align" class="vcg-select">
+            <option value="start">{t.alignStart}</option>
+            <option value="center" selected>{t.alignCenter}</option>
+            <option value="end">{t.alignEnd}</option>
+            <option value="stretch">{t.alignStretch}</option>
+            <option value="baseline">{t.alignBaseline}</option>
+          </select>
+        </label>
+
+        <label class="vcg-select-wrap vcg-flex-only" id="vcg-align-content-wrap" for="vcg-align-content">
+          <span>{t.alignContentLabel}</span>
+          <select id="vcg-align-content" class="vcg-select">
+            <option value="start">{t.alignContentStart}</option>
+            <option value="center">{t.alignContentCenter}</option>
+            <option value="end">{t.alignContentEnd}</option>
+            <option value="space-between">{t.alignContentBetween}</option>
+            <option value="space-around">{t.alignContentAround}</option>
+            <option value="space-evenly">{t.alignContentEvenly}</option>
+            <option value="stretch" selected>{t.alignContentStretch}</option>
+          </select>
+        </label>
+      </div>
+
+      <div class="vcg-code-panel" id="vcg-code-panel">
+        <div class="vcg-code-header">
+          <h2>{t.codeTitle}</h2>
+          <button id="vcg-copy" class="vcg-copy-button" type="button" aria-label={t.copyCode} title={t.copyCode}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="vcg-code" class="vcg-code" aria-label={t.outputLabel}></pre>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import type { VisualCssGridFlexboxGeneratorUI } from './ui';
+  import { createWorkspace, setupSpanHandler, spawnConfetti } from './workspace';
+
+  const root = document.getElementById('vcg-root') as HTMLElement;
+  const t = JSON.parse(root.dataset.i18n ?? '{}') as VisualCssGridFlexboxGeneratorUI;
+  const ws = createWorkspace(root, t);
+
+  setupSpanHandler(ws.canvas, () => ws.readState().mode, t.itemPrefix, () => ws.update());
+
+  [
+    ws.gapInput, ws.columnsInput, ws.widthInput, ws.heightInput, ws.itemSizeInput,
+    ws.justifySelect, ws.alignSelect, ws.directionSelect, ws.wrapSelect, ws.alignContentSelect,
+  ].forEach((el) => {
+    el.addEventListener('input', () => ws.update());
+    el.addEventListener('change', () => ws.update());
+  });
+
+  document.getElementById('vcg-flex')?.addEventListener('click', () => ws.setMode('flex'));
+  document.getElementById('vcg-grid')?.addEventListener('click', () => ws.setMode('grid'));
+  document.getElementById('vcg-add')?.addEventListener('click', () => ws.addItem());
+  document.getElementById('vcg-remove')?.addEventListener('click', () => ws['removeItem']());
+  document.getElementById('vcg-reset')?.addEventListener('click', () => ws.resetLayout());
+
+  document.querySelectorAll('.vcg-preset-button').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const preset = (btn as HTMLElement).dataset.preset;
+      if (preset) ws.applyPreset(preset);
+    });
+  });
+
+  const copyBtn = document.getElementById('vcg-copy') as HTMLButtonElement | null;
+  copyBtn?.addEventListener('click', async () => {
+    const rect = copyBtn.getBoundingClientRect();
+    await navigator.clipboard.writeText(ws.code.textContent ?? '');
+    copyBtn.dataset.copied = t.copied;
+    copyBtn.classList.add('vcg-copied');
+    spawnConfetti(rect.left + rect.width / 2, rect.top);
+    window.setTimeout(() => {
+      delete copyBtn.dataset.copied;
+      copyBtn.classList.remove('vcg-copied');
+    }, 1400);
+  });
+
+  ws.update();
+</script>

package/src/tool/visualCssGridFlexboxGenerator/entry.ts

@@ -0,0 +1,30 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { VisualCssGridFlexboxGeneratorUI } from './ui';
+
+export type VisualCssGridFlexboxGeneratorLocaleContent = ToolLocaleContent<VisualCssGridFlexboxGeneratorUI>;
+
+export const visualCssGridFlexboxGenerator: DeveloperToolEntry<VisualCssGridFlexboxGeneratorUI> = {
+  id: 'visual-css-grid-flexbox-generator',
+  icons: {
+    bg: 'mdi:view-grid-plus',
+    fg: 'mdi:drag-variant',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/de.ts

@@ -0,0 +1,110 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { VisualCssGridFlexboxGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'visueller-css-grid-flexbox-generator';
+const title = 'Visueller CSS Grid & Flexbox Layout Generator';
+const description = 'Gestalte responsive Layouts durch Verschieben visueller Blöcke, skalieren des Containers, anpassen der Ausrichtung und Verwenden von Presets  -  dann sauberes natives CSS sofort kopieren.';
+
+const howTo = [
+  { name: 'Preset oder Flexbox / Grid wählen', text: 'Beginne mit einem Layout-Preset (Navbar, Cards, Hero, Sidebar, Gallery) oder wechsle manuell zwischen Flexbox und Grid.' },
+  { name: 'Layout skalieren', text: 'Ziehe den Container an der unteren Ecke, um zu testen, wie das Design auf verfügbaren Platz reagiert.' },
+  { name: 'Ausrichtung anpassen', text: 'Nutze Schieberegler und Dropdowns für Richtung, Wrap, Abstand, Spalten, justify-content, align-items, align-content, Breite, Höhe und Item-Größe.' },
+  { name: 'Produktionsreifes CSS kopieren', text: 'Kopiere das generierte CSS, wenn das visuelle Ergebnis der gewünschten Struktur entspricht. Keine Framework-Abhängigkeiten.' },
+];
+
+const faq = [
+  { question: 'Wann sollte ich Flexbox statt CSS Grid verwenden?', answer: 'Nutze Flexbox bei eindimensionalen Layouts  -  Navigationsleisten, Button-Gruppen, umfließende Cards, zentrierte Inhalte. Grid eignet sich, wenn Zeilen und Spalten gemeinsam wichtig sind  -  Dashboards, Galerien, Formulare, strukturierte Seitenbereiche.' },
+  { question: 'Kann dieser Generator responsive Layouts erstellen?', answer: 'Ja. Das generierte CSS verwendet natives Flex-Wrapping oder Grid-Repeat-Spalten. Skaliere die visuelle Leinwand, um Abstände und Ausrichtung bei verschiedenen Größen zu testen.' },
+  { question: 'Warum fühlen sich justify-content und align-items in Grid und Flex unterschiedlich an?', answer: 'Flexbox verteilt Elemente entlang einer Haupt- und Querachse. Grid platziert Elemente zuerst in Tracks und richtet dann den Inhalt darin aus. Der Wechsel zwischen beiden Modi macht diesen Unterschied sofort sichtbar.' },
+  { question: 'Ist das generierte CSS an ein Framework gebunden?', answer: 'Nein. Das Ergebnis ist reines natives CSS. Verwende es in einfachem HTML, Astro, React, Vue, Svelte, Web Components oder jedem Projekt mit Standard-CSS.' },
+  { question: 'Wozu dienen die Layout-Presets?', answer: 'Presets beschleunigen gängige Layouts, damit du realistische Konfigurationen siehst, ohne bei Null anzufangen. Jedes Preset setzt Modus, Richtung, Wrap, Ausrichtung und Containergröße für ein praxisnahes Muster.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Layout-Modus',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Interaktive Layout-Leinwand',
+  addItem: 'Element hinzufügen',
+  removeItem: 'Element entfernen',
+  resetLayout: 'Layout zurücksetzen',
+  gapLabel: 'Abstand',
+  columnsLabel: 'Grid-Spalten',
+  widthLabel: 'Container-Breite',
+  heightLabel: 'Container-Höhe',
+  justifyLabel: 'Ausrichten',
+  alignLabel: 'Ausrichten',
+  itemSizeLabel: 'Elementgröße',
+  codeTitle: 'Generiertes CSS',
+  copyCode: 'CSS kopieren',
+  copied: 'Kopiert!',
+  dragHint: 'Canvas an der Ecke skalieren  -  CSS aktualisiert sich live!',
+  outputLabel: 'Generierte CSS-Ausgabe',
+  justifyStart: 'Start',
+  justifyCenter: 'Mitte',
+  justifyEnd: 'Ende',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Start',
+  alignCenter: 'Mitte',
+  alignEnd: 'Ende',
+  alignStretch: 'Strecken',
+  alignBaseline: 'Basislinie',
+  itemPrefix: 'Block',
+  directionLabel: 'Richtung',
+  directionRow: 'Reihe →',
+  directionRowReverse: '← Reihe rev',
+  directionColumn: 'Spalte ↓',
+  directionColumnReverse: '↑ Spalte rev',
+  wrapLabel: 'Umbruch',
+  wrapNoWrap: 'Kein Umbruch',
+  wrapWrap: 'Umbruch',
+  wrapWrapReverse: 'Umbruch rev',
+  alignContentLabel: 'Inhalt ausr.',
+  alignContentStart: 'Start',
+  alignContentCenter: 'Mitte',
+  alignContentEnd: 'Ende',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Strecken',
+  presetsLabel: 'Presets',
+  presetNavbar: 'Navbar',
+  presetCards: 'Cards',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Galerie',
+  shakeLimit: 'Mindestens 2 Elemente nötig!',
+  spanHint: 'Doppelklick auf ein Element ändert die Spaltenspanne (1-3) im Grid-Modus',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<VisualCssGridFlexboxGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS-Layout-Generator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Grid und Flexbox Referenzen',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Erstelle CSS-Layouts durch Beobachten des Verhaltens, nicht durch Auswendiglernen', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid und Flexbox sind mächtig, weil sie Layout-Beziehungen statt fester Koordinaten beschreiben. Schwierig ist vorherzusagen, wie <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, Richtung, Umbruch, Tracks und verfügbarer Platz interagieren. Dieser Generator verwandelt abstrakte Eigenschaften in einen Live-Spielplatz mit Presets und Echtzeit-CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Schnellstart-Layout-Presets', icon: 'mdi:view-grid-plus' }, { value: 'Live', label: 'CSS aktualisiert bei jeder Änderung', icon: 'mdi:code-braces' }, { value: '0', label: 'Framework-Abhängigkeiten im CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: Modell wählen vor Ausrichtung optimieren', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Am besten für eindimensionale Flüsse, wo Elemente in einer Reihe oder Spalte ausgerichtet sind und natürlich umbrechen.', icon: 'mdi:format-align-justify', highlight: true, points: ['Navigation', 'Button-Gruppen', 'Umfließende Cards', 'Zentrierter Inhalt'] }, { title: 'CSS Grid', description: 'Am besten für zweidimensionale Strukturen, wo Reihen und Spalten die Form der Komposition definieren.', icon: 'mdi:grid', points: ['Dashboards', 'Galerien', 'Formulare', 'Redaktionelle Bereiche'] }] },
+    { type: 'title', text: 'Was jede Steuerung lehrt', level: 3 },
+    { type: 'table', headers: ['Steuerung', 'CSS-Eigenschaft', 'Worauf achten'], rows: [['Richtung', '<code>flex-direction</code>', 'Wie die Hauptachse fließt  -  von Reihe zu Spalte wechseln ändert die gesamte Layout-Logik.'], ['Umbruch', '<code>flex-wrap</code>', 'Ob Elemente in einer Zeile bleiben oder bei Platzmangel umbrechen.'], ['Abstand', '<code>gap</code>', 'Der Raum zwischen Elementen ohne Ränder, die an Kanten brechen.'], ['Ausrichten', '<code>justify-content</code>', 'Wie freier Raum entlang der Hauptachse verteilt wird.'], ['Ausrichten', '<code>align-items</code>', 'Wie Elemente auf der Querachse sitzen.'], ['Inhalt ausr.', '<code>align-content</code>', 'Wie umgebrochene Flex-Zeilen oder Grid-Zeilen zusätzlichen Querachsen-Raum verteilen.'], ['Spalten', '<code>grid-template-columns</code>', 'Wie viele gleiche Tracks das Grid erstellt, bevor Elemente in die nächste Zeile umbrechen.'], ['Container-Größe', '<code>width</code> und <code>min-height</code>', 'Wie dasselbe CSS bei verändertem Platz reagiert.']] },
+    { type: 'tip', title: 'Zuerst skalieren, dann optimieren', html: 'Skaliere die Leinwand zuerst auf eine realistische Größe. Dann Abstand und Ausrichtung anpassen. So funktioniert das generierte CSS unter echten Bedingungen.' },
+    { type: 'title', text: 'Sauberes CSS zum Anpassen', level: 3 },
+    { type: 'code', ariaLabel: 'Beispiel generiertes CSS', code: '.layout-playground {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 24px;\n  justify-content: center;\n  align-items: center;\n}' },
+    { type: 'diagnostic', variant: 'info', title: 'Warum visuelles Skalieren wichtig ist', html: 'Viele Layout-Bugs erscheinen nur, wenn der Container schmaler, höher oder mit anderer Elementanzahl gefüllt ist. Das Skalieren während der Live-CSS-Aktualisierung hilft, ungünstige Umbrüche und ausrichtungsbedingte Probleme zu erkennen.' },
+    { type: 'summary', title: 'Empfohlener Workflow', items: ['Preset wählen oder Flexbox für eindimensionale und Grid für zweidimensionale Strukturen.', 'Leinwand vor dem Kopieren skalieren, damit das Layout realistischen Einschränkungen standhält.', 'Abstand für Zwischenräume nutzen statt Ränder an jedem Kind.' , 'Generiertes CSS als Ausgangspunkt kopieren, dann projektspezifische Selektoren und Media Queries hinzufügen.'] },
+  ],
+};