@jjlmoya/utils-developer 1.16.0 → 1.18.0

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.'] },
+  ],
+};

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

@@ -0,0 +1,256 @@
+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 = 'visual-css-grid-flexbox-generator';
+const title = 'Visual CSS Grid & Flexbox Layout Generator';
+const description = 'Design responsive layouts by dragging visual blocks, resizing the container, tuning alignment controls and using presets  -  then copy clean native CSS instantly.';
+
+const howTo = [
+  {
+    name: 'Choose a preset or Flexbox / Grid',
+    text: 'Start with a layout preset (navbar, cards, hero, sidebar, gallery) or switch between Flexbox and Grid mode manually.',
+  },
+  {
+    name: 'Drag and resize the layout',
+    text: 'Reorder items by dragging them and resize the container from the corner handle to test how the design reacts to available space.',
+  },
+  {
+    name: 'Tune alignment controls',
+    text: 'Use sliders and selects for direction, wrap, gap, columns, justify-content, align-items, align-content, width, height and item size.',
+  },
+  {
+    name: 'Copy production-ready CSS',
+    text: 'Copy the generated CSS when the visual result matches the structure you want to implement. No framework dependencies.',
+  },
+];
+
+const faq = [
+  {
+    question: 'When should I use Flexbox instead of CSS Grid?',
+    answer: 'Use Flexbox when the layout is mainly one-dimensional  -  navigation bars, button groups, wrapped cards, centered content. Use Grid when rows and columns matter together  -  dashboards, galleries, form layouts and structured page sections.',
+  },
+  {
+    question: 'Can this generator create responsive layouts?',
+    answer: 'Yes. The generated CSS uses native flex wrapping or grid repeat columns. Resize the visual canvas to test how spacing and alignment behave at different sizes before writing media queries.',
+  },
+  {
+    question: 'Why do justify-content and align-items feel different in grid and flex?',
+    answer: 'Flexbox distributes items along a main axis and cross axis. Grid places items into tracks first, then aligns content inside those tracks. Toggling both modes on the same canvas makes that behavioral difference immediately visible.',
+  },
+  {
+    question: 'Is the generated CSS tied to a framework?',
+    answer: 'No. The output is pure native CSS. Use it in plain HTML, Astro, React, Vue, Svelte, Web Components or any project that accepts standard CSS.',
+  },
+  {
+    question: 'What are the layout presets for?',
+    answer: 'Presets jump-start common layouts so you can see realistic configurations instead of starting from scratch. Each preset sets mode, direction, wrap, alignment and container size to match a real-world pattern.',
+  },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Layout mode',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Interactive layout canvas',
+  addItem: 'Add item',
+  removeItem: 'Remove item',
+  resetLayout: 'Reset layout',
+  gapLabel: 'Gap',
+  columnsLabel: 'Grid columns',
+  widthLabel: 'Container width',
+  heightLabel: 'Container height',
+  justifyLabel: 'Justify',
+  alignLabel: 'Align',
+  itemSizeLabel: 'Item size',
+  codeTitle: 'Generated CSS',
+  copyCode: 'Copy CSS',
+  copied: 'Copied!',
+  dragHint: 'Resize the bordered canvas from the corner handle  -  CSS updates live!',
+  outputLabel: 'Generated CSS output',
+  justifyStart: 'Start',
+  justifyCenter: 'Center',
+  justifyEnd: 'End',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Start',
+  alignCenter: 'Center',
+  alignEnd: 'End',
+  alignStretch: 'Stretch',
+  alignBaseline: 'Baseline',
+  itemPrefix: 'Block',
+  directionLabel: 'Direction',
+  directionRow: 'Row →',
+  directionRowReverse: '← Row rev',
+  directionColumn: 'Column ↓',
+  directionColumnReverse: '↑ Col rev',
+  wrapLabel: 'Wrap',
+  wrapNoWrap: 'No wrap',
+  wrapWrap: 'Wrap',
+  wrapWrapReverse: 'Wrap rev',
+  alignContentLabel: 'Align content',
+  alignContentStart: 'Start',
+  alignContentCenter: 'Center',
+  alignContentEnd: 'End',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Stretch',
+  presetsLabel: 'Presets',
+  presetNavbar: 'Navbar',
+  presetCards: 'Cards',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Gallery',
+  shakeLimit: 'Need at least 2 items!',
+  spanHint: 'Double-click an item to change its column span (1-3) in Grid mode',
+};
+
+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 and Flexbox references',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Build CSS layouts by seeing the behavior, not memorizing properties',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSS Grid and Flexbox are powerful because they describe layout relationships instead of fixed coordinates. The hard part is predicting how <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, direction, wrapping, tracks and available space interact. This visual generator turns those abstract properties into a live playground with presets, drag-and-drop reordering and real-time CSS output.',
+    },
+    {
+      type: 'stats',
+      columns: 3,
+      items: [
+        { value: '5', label: 'Quick-start layout presets', icon: 'mdi:view-grid-plus' },
+        { value: 'Live', label: 'CSS output updates on every change', icon: 'mdi:code-braces' },
+        { value: '0', label: 'Framework dependencies in generated CSS', icon: 'mdi:language-css3' },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Flexbox vs Grid: choose the model before polishing alignment',
+      level: 3,
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Flexbox',
+          description: 'Best for one-dimensional flows where items line up along a row or column and may wrap naturally.',
+          icon: 'mdi:format-align-justify',
+          highlight: true,
+          points: ['Navigation bars', 'Button groups', 'Wrapped cards', 'Centered content'],
+        },
+        {
+          title: 'CSS Grid',
+          description: 'Best for two-dimensional structures where rows and columns define the shape of the composition.',
+          icon: 'mdi:grid',
+          points: ['Dashboards', 'Galleries', 'Form layouts', 'Editorial sections'],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'What each control teaches you',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Control', 'CSS property', 'What to watch'],
+      rows: [
+        ['Direction', '<code>flex-direction</code>', 'How the main axis flows  -  swap row for column to change the entire layout logic.'],
+        ['Wrap', '<code>flex-wrap</code>', 'Whether items stay on one line or flow to new rows when space runs out.'],
+        ['Gap', '<code>gap</code>', 'The space between items without adding margins that break at edges.'],
+        ['Justify', '<code>justify-content</code>', 'How free space is distributed along the main axis or inline axis.'],
+        ['Align', '<code>align-items</code>', 'How items sit on the cross axis or inside their grid area.'],
+        ['Align content', '<code>align-content</code>', 'How wrapped flex lines or grid rows distribute extra cross-axis space.'],
+        ['Grid columns', '<code>grid-template-columns</code>', 'How many equal tracks the grid creates before items wrap to another row.'],
+        ['Container size', '<code>width</code> and <code>min-height</code>', 'How the same CSS reacts when available space changes.'],
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Drag first, optimize second',
+      html: 'Start by dragging blocks into the visual order that matches the intended reading flow. Then adjust gap and alignment. This keeps the generated CSS aligned with document order instead of hiding structure with fragile positioning tricks.',
+    },
+    {
+      type: 'title',
+      text: 'Clean CSS output you can adapt',
+      level: 3,
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Example generated 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: 'Why visual resizing matters',
+      html: 'Many layout bugs appear only when the container is narrower, taller or filled with different item counts. Resizing the playground while the CSS updates live helps you spot awkward wrapping, excessive gaps and alignment choices that only work at one viewport size.',
+    },
+    {
+      type: 'summary',
+      title: 'Best practice workflow',
+      items: [
+        'Choose a preset or Flexbox for one-dimensional flows and Grid for two-dimensional structure.',
+        'Resize the visual canvas before copying CSS so the layout survives realistic constraints.',
+        'Use gap for spacing between items instead of adding margins to every child.',
+        'Copy the generated CSS as a starting point, then add project-specific selectors and media queries.',
+      ],
+    },
+  ],
+};