@jjlmoya/utils-developer 1.16.0 → 1.18.0

package/src/tool/visualCssGridFlexboxGenerator/i18n/es.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 = 'generador-visual-css-grid-flexbox';
+const title = 'Generador Visual de Layouts CSS Grid y Flexbox';
+const description = 'Diseña layouts responsive arrastrando bloques visuales, redimensionando el contenedor, ajustando controles de alineación y usando presets  -  luego copia CSS nativo limpio al instante.';
+
+const howTo = [
+  { name: 'Elige un preset o Flexbox / Grid', text: 'Empieza con un preset de layout (navbar, cards, hero, sidebar, gallery) o cambia entre Flexbox y Grid manualmente.' },
+  { name: 'Redimensiona el layout', text: 'Redimensiona el contenedor desde la esquina inferior para probar cómo reacciona el diseño al espacio disponible.' },
+  { name: 'Ajusta los controles de alineación', text: 'Usa sliders y selects para dirección, wrap, gap, columnas, justify-content, align-items, align-content, ancho, alto y tamaño de ítem.' },
+  { name: 'Copia CSS listo para producción', text: 'Copia el CSS generado cuando el resultado visual coincida con la estructura que quieres implementar. Sin dependencias de frameworks.' },
+];
+
+const faq = [
+  { question: '¿Cuándo debo usar Flexbox en vez de CSS Grid?', answer: 'Usa Flexbox cuando el layout sea principalmente unidimensional  -  barras de navegación, grupos de botones, cards envueltas, contenido centrado. Usa Grid cuando filas y columnas importan juntas  -  dashboards, galerías, formularios y secciones de página estructuradas.' },
+  { question: '¿Puede este generador crear layouts responsive?', answer: 'Sí. El CSS generado usa flex wrapping nativo o grid repeat columns. Redimensiona el canvas visual para probar cómo se comportan el espaciado y la alineación a diferentes tamaños antes de escribir media queries.' },
+  { question: '¿Por qué justify-content y align-items se sienten diferentes en grid y flex?', answer: 'Flexbox distribuye ítems a lo largo de un eje principal y un eje transversal. Grid coloca ítems en tracks primero, luego alinea el contenido dentro de esos tracks. Alternar entre ambos modos en el mismo canvas hace visible esa diferencia de comportamiento.' },
+  { question: '¿El CSS generado está atado a algún framework?', answer: 'No. El resultado es CSS nativo puro. Úsalo en HTML plano, Astro, React, Vue, Svelte, Web Components o cualquier proyecto que acepte CSS estándar.' },
+  { question: '¿Para qué sirven los presets de layout?', answer: 'Los presets aceleran layouts comunes para que veas configuraciones realistas sin empezar desde cero. Cada preset configura modo, dirección, wrap, alineación y tamaño del contenedor para un patrón del mundo real.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Modo de layout',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Canvas de layout interactivo',
+  addItem: 'Añadir ítem',
+  removeItem: 'Quitar ítem',
+  resetLayout: 'Restablecer layout',
+  gapLabel: 'Espaciado',
+  columnsLabel: 'Columnas del grid',
+  widthLabel: 'Ancho del contenedor',
+  heightLabel: 'Alto del contenedor',
+  justifyLabel: 'Justificar',
+  alignLabel: 'Alinear',
+  itemSizeLabel: 'Tamaño de ítem',
+  codeTitle: 'CSS Generado',
+  copyCode: 'Copiar CSS',
+  copied: '¡Copiado!',
+  dragHint: 'Redimensiona el canvas desde la esquina  -  ¡el CSS se actualiza en vivo!',
+  outputLabel: 'Salida de CSS generado',
+  justifyStart: 'Inicio',
+  justifyCenter: 'Centro',
+  justifyEnd: 'Fin',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Inicio',
+  alignCenter: 'Centro',
+  alignEnd: 'Fin',
+  alignStretch: 'Estirar',
+  alignBaseline: 'Línea base',
+  itemPrefix: 'Bloque',
+  directionLabel: 'Dirección',
+  directionRow: 'Fila →',
+  directionRowReverse: '← Fila rev',
+  directionColumn: 'Columna ↓',
+  directionColumnReverse: '↑ Col rev',
+  wrapLabel: 'Wrap',
+  wrapNoWrap: 'Sin wrap',
+  wrapWrap: 'Wrap',
+  wrapWrapReverse: 'Wrap rev',
+  alignContentLabel: 'Al content',
+  alignContentStart: 'Inicio',
+  alignContentCenter: 'Centro',
+  alignContentEnd: 'Fin',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Estirar',
+  presetsLabel: 'Presets',
+  presetNavbar: 'Navbar',
+  presetCards: 'Cards',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Galería',
+  shakeLimit: '¡Se necesitan al menos 2 ítems!',
+  spanHint: 'Doble clic en un ítem para cambiar su span de columna (1-3) en modo Grid',
+};
+
+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: 'FAQ del generador de layouts CSS',
+  faq,
+  bibliographyTitle: 'Referencias de CSS Grid y Flexbox',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Construye layouts CSS viendo el comportamiento, no memorizando propiedades', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid y Flexbox son potentes porque describen relaciones de layout en vez de coordenadas fijas. Lo difícil es predecir cómo interactúan <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, dirección, wrapping, tracks y el espacio disponible. Este generador visual convierte esas propiedades abstractas en un playground vivo con presets, reordenación y salida CSS en tiempo real.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Presets de layout rápidos', icon: 'mdi:view-grid-plus' }, { value: 'En vivo', label: 'CSS se actualiza con cada cambio', icon: 'mdi:code-braces' }, { value: '0', label: 'Dependencias de framework en el CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: elige el modelo antes de pulir la alineación', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Ideal para flujos unidimensionales donde los ítems se alinean en fila o columna y pueden envolverse.', icon: 'mdi:format-align-justify', highlight: true, points: ['Barras de navegación', 'Grupos de botones', 'Cards envueltas', 'Contenido centrado'] }, { title: 'CSS Grid', description: 'Ideal para estructuras bidimensionales donde filas y columnas definen la forma de la composición.', icon: 'mdi:grid', points: ['Dashboards', 'Galerías', 'Formularios', 'Secciones editoriales'] }] },
+    { type: 'title', text: 'Qué te enseña cada control', level: 3 },
+    { type: 'table', headers: ['Control', 'Propiedad CSS', 'Qué observar'], rows: [['Dirección', '<code>flex-direction</code>', 'Cómo fluye el eje principal  -  cambia fila por columna para cambiar toda la lógica del layout.'], ['Wrap', '<code>flex-wrap</code>', 'Si los ítems se quedan en una línea o fluyen a nuevas filas cuando se acaba el espacio.'], ['Gap', '<code>gap</code>', 'El espacio entre ítems sin añadir márgenes que se rompen en los bordes.'], ['Justificar', '<code>justify-content</code>', 'Cómo se distribuye el espacio libre a lo largo del eje principal.'], ['Alinear', '<code>align-items</code>', 'Cómo se sitúan los ítems en el eje transversal.'], ['Align content', '<code>align-content</code>', 'Cómo las líneas envueltas o filas del grid distribuyen el espacio extra del eje transversal.'], ['Columnas', '<code>grid-template-columns</code>', 'Cuántos tracks iguales crea el grid antes de que los ítems pasen a otra fila.'], ['Tamaño contenedor', '<code>width</code> y <code>min-height</code>', 'Cómo reacciona el mismo CSS cuando cambia el espacio disponible.']] },
+    { type: 'tip', title: 'Primero redimensiona, luego optimiza', html: 'Empieza por redimensionar el canvas visual a un tamaño realista. Luego ajusta gap y alineación. Así el CSS generado funciona en escenarios reales, no solo en el tamaño por defecto.' },
+    { type: 'title', text: 'CSS limpio que puedes adaptar', level: 3 },
+    { type: 'code', ariaLabel: 'Ejemplo de CSS generado', 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: 'Por qué importa el redimensionado visual', html: 'Muchos bugs de layout solo aparecen cuando el contenedor es más estrecho, más alto o tiene distinto número de ítems. Redimensionar el playground mientras el CSS se actualiza en vivo te ayuda a detectar wrapping incómodo, gaps excesivos y decisiones de alineación que solo funcionan a un tamaño.' },
+    { type: 'summary', title: 'Flujo de trabajo recomendado', items: ['Elige un preset o Flexbox para flujos unidimensionales y Grid para estructura bidimensional.', 'Redimensiona el canvas visual antes de copiar CSS para que el layout sobreviva restricciones realistas.', 'Usa gap para espaciado entre ítems en vez de añadir márgenes a cada hijo.', 'Copia el CSS generado como punto de partida, luego añade selectores específicos y media queries.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/fr.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 = 'generateur-visuel-css-grid-flexbox';
+const title = 'Générateur Visuel de Layout CSS Grid & Flexbox';
+const description = 'Concevez des layouts responsives en déplaçant des blocs visuels, en redimensionnant le conteneur, en ajustant l\'alignement et en utilisant des presets  -  puis copiez du CSS natif propre instantanément.';
+
+const howTo = [
+  { name: 'Choisissez un preset ou Flexbox / Grid', text: 'Commencez avec un preset de layout (navbar, cards, hero, sidebar, gallery) ou basculez entre Flexbox et Grid manuellement.' },
+  { name: 'Redimensionnez le layout', text: 'Redimensionnez le conteneur depuis le coin inférieur pour tester comment le design réagit à l\'espace disponible.' },
+  { name: 'Ajustez les contrôles d\'alignement', text: 'Utilisez les sliders et selects pour la direction, le wrap, l\'écart, les colonnes, justify-content, align-items, align-content, la largeur, la hauteur et la taille des éléments.' },
+  { name: 'Copiez du CSS prêt pour la production', text: 'Copiez le CSS généré quand le résultat visuel correspond à la structure souhaitée. Sans dépendance de framework.' },
+];
+
+const faq = [
+  { question: 'Quand utiliser Flexbox plutôt que CSS Grid ?', answer: 'Utilisez Flexbox pour les layouts unidimensionnels  -  barres de navigation, groupes de boutons, cartes enveloppées, contenu centré. Grid quand lignes et colonnes comptent ensemble  -  dashboards, galeries, formulaires, sections structurées.' },
+  { question: 'Ce générateur peut-il créer des layouts responsives ?', answer: 'Oui. Le CSS généré utilise le flex wrapping natif ou les colonnes répétées de grid. Redimensionnez le canvas visuel pour tester l\'espacement et l\'alignement à différentes tailles.' },
+  { question: 'Pourquoi justify-content et align-items semblent-ils différents en grid et flex ?', answer: 'Flexbox distribue les éléments le long d\'un axe principal et d\'un axe transversal. Grid place d\'abord les éléments dans des tracks, puis aligne le contenu dans ces tracks. Basculer entre les deux modes rend cette différence immédiatement visible.' },
+  { question: 'Le CSS généré est-il lié à un framework ?', answer: 'Non. Le résultat est du CSS natif pur. Utilisez-le en HTML simple, Astro, React, Vue, Svelte, Web Components ou tout projet acceptant du CSS standard.' },
+  { question: 'À quoi servent les presets de layout ?', answer: 'Les presets accélèrent les layouts courants pour voir des configurations réalistes sans partir de zéro. Chaque preset configure le mode, la direction, le wrap, l\'alignement et la taille du conteneur pour un motif réel.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Mode de layout',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Canvas de layout interactif',
+  addItem: 'Ajouter élément',
+  removeItem: 'Retirer élément',
+  resetLayout: 'Réinitialiser',
+  gapLabel: 'Écart',
+  columnsLabel: 'Colonnes grid',
+  widthLabel: 'Largeur conteneur',
+  heightLabel: 'Hauteur conteneur',
+  justifyLabel: 'Justifier',
+  alignLabel: 'Aligner',
+  itemSizeLabel: 'Taille élément',
+  codeTitle: 'CSS Généré',
+  copyCode: 'Copier CSS',
+  copied: 'Copié !',
+  dragHint: 'Redimensionnez le canvas depuis le coin  -  le CSS se met à jour en direct !',
+  outputLabel: 'Sortie CSS générée',
+  justifyStart: 'Début',
+  justifyCenter: 'Centre',
+  justifyEnd: 'Fin',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Début',
+  alignCenter: 'Centre',
+  alignEnd: 'Fin',
+  alignStretch: 'Étirer',
+  alignBaseline: 'Ligne de base',
+  itemPrefix: 'Bloc',
+  directionLabel: 'Direction',
+  directionRow: 'Ligne →',
+  directionRowReverse: '← Ligne inv',
+  directionColumn: 'Colonne ↓',
+  directionColumnReverse: '↑ Col inv',
+  wrapLabel: 'Retour',
+  wrapNoWrap: 'Sans retour',
+  wrapWrap: 'Avec retour',
+  wrapWrapReverse: 'Retour inv',
+  alignContentLabel: 'Aligner contenu',
+  alignContentStart: 'Début',
+  alignContentCenter: 'Centre',
+  alignContentEnd: 'Fin',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Étirer',
+  presetsLabel: 'Presets',
+  presetNavbar: 'Navbar',
+  presetCards: 'Cartes',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Galerie',
+  shakeLimit: 'Au moins 2 éléments requis !',
+  spanHint: 'Double-cliquez sur un élément pour changer sa portée de colonne (1-3) en mode Grid',
+};
+
+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: 'FAQ du générateur de layout CSS',
+  faq,
+  bibliographyTitle: 'Références CSS Grid et Flexbox',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Créez des layouts CSS en observant le comportement, pas en mémorisant', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid et Flexbox sont puissants car ils décrivent des relations de layout au lieu de coordonnées fixes. Le difficile est de prédire comment <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, direction, retour, tracks et espace disponible interagissent. Ce générateur transforme ces propriétés abstraites en un terrain de jeu vivant avec presets et CSS en temps réel.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Presets de démarrage rapide', icon: 'mdi:view-grid-plus' }, { value: 'Direct', label: 'CSS mis à jour à chaque changement', icon: 'mdi:code-braces' }, { value: '0', label: 'Dépendances framework dans le CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: choisissez le modèle avant de peaufiner l\'alignement', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Idéal pour les flux unidimensionnels où les éléments s\'alignent en ligne ou colonne et peuvent se retourner.', icon: 'mdi:format-align-justify', highlight: true, points: ['Navigation', 'Groupes de boutons', 'Cartes enveloppées', 'Contenu centré'] }, { title: 'CSS Grid', description: 'Idéal pour les structures bidimensionnelles où lignes et colonnes définissent la composition.', icon: 'mdi:grid', points: ['Dashboards', 'Galeries', 'Formulaires', 'Sections éditoriales'] }] },
+    { type: 'title', text: 'Ce que chaque contrôle vous apprend', level: 3 },
+    { type: 'table', headers: ['Contrôle', 'Propriété CSS', 'À observer'], rows: [['Direction', '<code>flex-direction</code>', 'Comment l\'axe principal s\'écoule  -  passer de ligne à colonne change toute la logique.'], ['Retour', '<code>flex-wrap</code>', 'Si les éléments restent sur une ligne ou passent à la ligne suivante.'], ['Écart', '<code>gap</code>', 'L\'espace entre éléments sans marges qui cassent aux bords.'], ['Justifier', '<code>justify-content</code>', 'Comment l\'espace libre est distribué le long de l\'axe principal.'], ['Aligner', '<code>align-items</code>', 'Comment les éléments se positionnent sur l\'axe transversal.'], ['Aligner contenu', '<code>align-content</code>', 'Comment les lignes enveloppées ou rangées de grid distribuent l\'espace supplémentaire.'], ['Colonnes', '<code>grid-template-columns</code>', 'Combien de tracks égales le grid crée avant que les éléments passent à une autre ligne.'], ['Taille conteneur', '<code>width</code> et <code>min-height</code>', 'Comment le même CSS réagit quand l\'espace disponible change.']] },
+    { type: 'tip', title: 'Redimensionnez d\'abord, optimisez ensuite', html: 'Commencez par redimensionner le canvas à une taille réaliste. Puis ajustez l\'écart et l\'alignement. Ainsi le CSS généré fonctionne dans des conditions réelles.' },
+    { type: 'title', text: 'CSS propre que vous pouvez adapter', level: 3 },
+    { type: 'code', ariaLabel: 'Exemple de CSS généré', 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: 'Pourquoi le redimensionnement visuel est important', html: 'Beaucoup de bugs de layout n\'apparaissent que lorsque le conteneur est plus étroit, plus haut ou rempli différemment. Redimensionner pendant que le CSS se met à jour en direct aide à repérer les retours gênants et les choix d\'alignement fragiles.' },
+    { type: 'summary', title: 'Workflow recommandé', items: ['Choisissez un preset ou Flexbox pour les flux unidimensionnels et Grid pour la structure bidimensionnelle.', 'Redimensionnez le canvas avant de copier le CSS pour que le layout survive aux contraintes réelles.', 'Utilisez gap pour l\'espacement entre éléments au lieu d\'ajouter des marges à chaque enfant.', 'Copiez le CSS généré comme point de départ, puis ajoutez des sélecteurs spécifiques et des media queries.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/id.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 = 'generator-visual-css-grid-flexbox';
+const title = 'Generator Visual Layout CSS Grid & Flexbox';
+const description = 'Rancang layout responsif dengan memindahkan blok visual, mengubah ukuran kontainer, menyesuaikan perataan, dan menggunakan preset  -  lalu salin CSS native bersih secara instan.';
+
+const howTo = [
+  { name: 'Pilih preset atau Flexbox / Grid', text: 'Mulai dengan preset layout (navbar, cards, hero, sidebar, gallery) atau beralih antara Flexbox dan Grid secara manual.' },
+  { name: 'Ubah ukuran layout', text: 'Ubah ukuran kontainer dari sudut bawah untuk menguji bagaimana desain bereaksi terhadap ruang yang tersedia.' },
+  { name: 'Sesuaikan kontrol perataan', text: 'Gunakan slider dan dropdown untuk arah, wrap, jarak, kolom, justify-content, align-items, align-content, lebar, tinggi, dan ukuran item.' },
+  { name: 'Salin CSS siap produksi', text: 'Salin CSS yang dihasilkan saat hasil visual sesuai dengan struktur yang diinginkan. Tanpa ketergantungan framework.' },
+];
+
+const faq = [
+  { question: 'Kapan menggunakan Flexbox daripada CSS Grid?', answer: 'Gunakan Flexbox untuk layout satu dimensi  -  bilah navigasi, grup tombol, kartu yang membungkus, konten terpusat. Grid saat baris dan kolom sama-sama penting  -  dashboard, galeri, formulir, bagian halaman terstruktur.' },
+  { question: 'Bisakah generator ini membuat layout responsif?', answer: 'Ya. CSS yang dihasilkan menggunakan flex wrapping native atau kolom berulang grid. Ubah ukuran kanvas visual untuk menguji jarak dan perataan pada berbagai ukuran.' },
+  { question: 'Mengapa justify-content dan align-items terasa berbeda di grid dan flex?', answer: 'Flexbox mendistribusikan item di sepanjang sumbu utama dan sumbu silang. Grid menempatkan item di track terlebih dahulu, lalu meratakan konten di dalamnya. Beralih antara kedua mode membuat perbedaan itu langsung terlihat.' },
+  { question: 'Apakah CSS yang dihasilkan terikat pada framework?', answer: 'Tidak. Hasilnya adalah CSS native murni. Gunakan di HTML biasa, Astro, React, Vue, Svelte, Web Components, atau proyek apa pun yang menerima CSS standar.' },
+  { question: 'Untuk apa preset layout?', answer: 'Preset mempercepat layout umum sehingga Anda melihat konfigurasi realistis tanpa mulai dari nol. Setiap preset mengatur mode, arah, wrap, perataan, dan ukuran kontainer untuk pola dunia nyata.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Mode layout',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Kanvas layout interaktif',
+  addItem: 'Tambah item',
+  removeItem: 'Hapus item',
+  resetLayout: 'Reset layout',
+  gapLabel: 'Jarak',
+  columnsLabel: 'Kolom grid',
+  widthLabel: 'Lebar kontainer',
+  heightLabel: 'Tinggi kontainer',
+  justifyLabel: 'Ratakan',
+  alignLabel: 'Ratakan',
+  itemSizeLabel: 'Ukuran item',
+  codeTitle: 'CSS Dihasilkan',
+  copyCode: 'Salin CSS',
+  copied: 'Tersalin!',
+  dragHint: 'Ubah ukuran kanvas dari sudut  -  CSS diperbarui langsung!',
+  outputLabel: 'Output CSS yang dihasilkan',
+  justifyStart: 'Awal',
+  justifyCenter: 'Tengah',
+  justifyEnd: 'Akhir',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Awal',
+  alignCenter: 'Tengah',
+  alignEnd: 'Akhir',
+  alignStretch: 'Rentang',
+  alignBaseline: 'Garis dasar',
+  itemPrefix: 'Blok',
+  directionLabel: 'Arah',
+  directionRow: 'Baris →',
+  directionRowReverse: '← Baris blk',
+  directionColumn: 'Kolom ↓',
+  directionColumnReverse: '↑ Kol blk',
+  wrapLabel: 'Bungkus',
+  wrapNoWrap: 'Tanpa bungkus',
+  wrapWrap: 'Bungkus',
+  wrapWrapReverse: 'Bungkus blk',
+  alignContentLabel: 'Ratakan konten',
+  alignContentStart: 'Awal',
+  alignContentCenter: 'Tengah',
+  alignContentEnd: 'Akhir',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Rentang',
+  presetsLabel: 'Preset',
+  presetNavbar: 'Navbar',
+  presetCards: 'Kartu',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Galeri',
+  shakeLimit: 'Butuh minimal 2 item!',
+  spanHint: 'Klik dua kali item untuk mengubah rentang kolom (1-3) dalam mode Grid',
+};
+
+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: 'FAQ generator layout CSS',
+  faq,
+  bibliographyTitle: 'Referensi CSS Grid dan Flexbox',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Bangun layout CSS dengan melihat perilaku, bukan menghafal properti', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid dan Flexbox kuat karena mendeskripsikan hubungan layout alih-alih koordinat tetap. Yang sulit adalah memprediksi bagaimana <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, arah, pembungkusan, track, dan ruang yang tersedia berinteraksi. Generator ini mengubah properti abstrak menjadi taman bermain langsung dengan preset dan CSS real-time.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Preset layout cepat', icon: 'mdi:view-grid-plus' }, { value: 'Langsung', label: 'CSS diperbarui setiap perubahan', icon: 'mdi:code-braces' }, { value: '0', label: 'Ketergantungan framework di CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: pilih model sebelum menyempurnakan perataan', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Terbaik untuk aliran satu dimensi di mana item berbaris dalam baris atau kolom dan membungkus secara alami.', icon: 'mdi:format-align-justify', highlight: true, points: ['Bilah navigasi', 'Grup tombol', 'Kartu membungkus', 'Konten terpusat'] }, { title: 'CSS Grid', description: 'Terbaik untuk struktur dua dimensi di mana baris dan kolom menentukan bentuk komposisi.', icon: 'mdi:grid', points: ['Dashboard', 'Galeri', 'Formulir', 'Bagian editorial'] }] },
+    { type: 'title', text: 'Apa yang diajarkan setiap kontrol', level: 3 },
+    { type: 'table', headers: ['Kontrol', 'Properti CSS', 'Yang perlu diperhatikan'], rows: [['Arah', '<code>flex-direction</code>', 'Bagaimana sumbu utama mengalir  -  beralih dari baris ke kolom mengubah seluruh logika layout.'], ['Bungkus', '<code>flex-wrap</code>', 'Apakah item tetap di satu baris atau mengalir ke baris baru saat ruang habis.'], ['Jarak', '<code>gap</code>', 'Ruang antara item tanpa margin yang rusak di tepi.'], ['Ratakan', '<code>justify-content</code>', 'Bagaimana ruang kosong didistribusikan di sepanjang sumbu utama.'], ['Ratakan', '<code>align-items</code>', 'Bagaimana item duduk di sumbu silang.'], ['Ratakan konten', '<code>align-content</code>', 'Bagaimana baris flex yang terbungkus atau baris grid mendistribusikan ruang sumbu silang tambahan.'], ['Kolom', '<code>grid-template-columns</code>', 'Berapa banyak track sama yang dibuat grid sebelum item pindah ke baris lain.'], ['Ukuran kontainer', '<code>width</code> dan <code>min-height</code>', 'Bagaimana CSS yang sama bereaksi saat ruang yang tersedia berubah.']] },
+    { type: 'tip', title: 'Skalakan dulu, optimalkan kemudian', html: 'Mulailah dengan menskalakan kanvas ke ukuran realistis. Kemudian sesuaikan jarak dan perataan. Dengan begitu CSS yang dihasilkan berfungsi dalam kondisi nyata.' },
+    { type: 'title', text: 'CSS bersih yang dapat Anda adaptasi', level: 3 },
+    { type: 'code', ariaLabel: 'Contoh CSS yang dihasilkan', 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: 'Mengapa penskalaan visual penting', html: 'Banyak bug layout hanya muncul saat kontainer lebih sempit, lebih tinggi, atau diisi dengan jumlah item berbeda. Menskalakan saat CSS diperbarui langsung membantu menemukan pembungkusan yang canggung dan pilihan perataan yang rapuh.' },
+    { type: 'summary', title: 'Alur kerja yang direkomendasikan', items: ['Pilih preset atau Flexbox untuk aliran satu dimensi dan Grid untuk struktur dua dimensi.', 'Skalakan kanvas sebelum menyalin CSS agar layout bertahan dalam batasan realistis.', 'Gunakan gap untuk jarak antar item alih-alih menambahkan margin ke setiap anak.', 'Salin CSS yang dihasilkan sebagai titik awal, lalu tambahkan selector spesifik proyek dan media queries.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/it.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 = 'generatore-visuale-css-grid-flexbox';
+const title = 'Generatore Visivo di Layout CSS Grid & Flexbox';
+const description = 'Progetta layout responsivi spostando blocchi visivi, ridimensionando il contenitore, regolando l\'allineamento e usando i preset  -  poi copia CSS nativo pulito all\'istante.';
+
+const howTo = [
+  { name: 'Scegli un preset o Flexbox / Grid', text: 'Inizia con un preset di layout (navbar, cards, hero, sidebar, gallery) o passa manualmente tra Flexbox e Grid.' },
+  { name: 'Ridimensiona il layout', text: 'Ridimensiona il contenitore dall\'angolo inferiore per testare come il design reagisce allo spazio disponibile.' },
+  { name: 'Regola i controlli di allineamento', text: 'Usa slider e select per direzione, wrap, gap, colonne, justify-content, align-items, align-content, larghezza, altezza e dimensione elementi.' },
+  { name: 'Copia CSS pronto per la produzione', text: 'Copia il CSS generato quando il risultato visivo corrisponde alla struttura desiderata. Nessuna dipendenza da framework.' },
+];
+
+const faq = [
+  { question: 'Quando usare Flexbox invece di CSS Grid?', answer: 'Usa Flexbox per layout unidimensionali  -  barre di navigazione, gruppi di pulsanti, card a capo, contenuto centrato. Grid quando righe e colonne contano insieme  -  dashboard, gallerie, form, sezioni strutturate.' },
+  { question: 'Questo generatore può creare layout responsivi?', answer: 'Sì. Il CSS generato usa flex wrapping nativo o colonne ripetute grid. Ridimensiona il canvas visivo per testare spaziatura e allineamento a diverse dimensioni.' },
+  { question: 'Perché justify-content e align-items sembrano diversi in grid e flex?', answer: 'Flexbox distribuisce gli elementi lungo un asse principale e uno trasversale. Grid posiziona prima gli elementi nei track, poi allinea il contenuto al loro interno. Passare da un modo all\'altro rende questa differenza immediatamente visibile.' },
+  { question: 'Il CSS generato è legato a un framework?', answer: 'No. Il risultato è CSS nativo puro. Usalo in HTML semplice, Astro, React, Vue, Svelte, Web Components o qualsiasi progetto che accetti CSS standard.' },
+  { question: 'A cosa servono i preset di layout?', answer: 'I preset accelerano i layout comuni per vedere configurazioni realistiche senza partire da zero. Ogni preset imposta modalità, direzione, wrap, allineamento e dimensione del contenitore per un pattern reale.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Modalità layout',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Canvas layout interattivo',
+  addItem: 'Aggiungi elemento',
+  removeItem: 'Rimuovi elemento',
+  resetLayout: 'Ripristina layout',
+  gapLabel: 'Spaziatura',
+  columnsLabel: 'Colonne grid',
+  widthLabel: 'Larghezza contenitore',
+  heightLabel: 'Altezza contenitore',
+  justifyLabel: 'Giustifica',
+  alignLabel: 'Allinea',
+  itemSizeLabel: 'Dimensione elemento',
+  codeTitle: 'CSS Generato',
+  copyCode: 'Copia CSS',
+  copied: 'Copiato!',
+  dragHint: 'Ridimensiona il canvas dall\'angolo  -  il CSS si aggiorna in tempo reale!',
+  outputLabel: 'Output CSS generato',
+  justifyStart: 'Inizio',
+  justifyCenter: 'Centro',
+  justifyEnd: 'Fine',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Inizio',
+  alignCenter: 'Centro',
+  alignEnd: 'Fine',
+  alignStretch: 'Estendi',
+  alignBaseline: 'Linea base',
+  itemPrefix: 'Blocco',
+  directionLabel: 'Direzione',
+  directionRow: 'Riga →',
+  directionRowReverse: '← Riga inv',
+  directionColumn: 'Colonna ↓',
+  directionColumnReverse: '↑ Col inv',
+  wrapLabel: 'A capo',
+  wrapNoWrap: 'No a capo',
+  wrapWrap: 'A capo',
+  wrapWrapReverse: 'A capo inv',
+  alignContentLabel: 'Allinea contenuto',
+  alignContentStart: 'Inizio',
+  alignContentCenter: 'Centro',
+  alignContentEnd: 'Fine',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Estendi',
+  presetsLabel: 'Preset',
+  presetNavbar: 'Navbar',
+  presetCards: 'Cards',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Galleria',
+  shakeLimit: 'Servono almeno 2 elementi!',
+  spanHint: 'Doppio clic su un elemento per cambiare l\'estensione di colonna (1-3) in modalità Grid',
+};
+
+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: 'FAQ generatore layout CSS',
+  faq,
+  bibliographyTitle: 'Riferimenti CSS Grid e Flexbox',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Costruisci layout CSS osservando il comportamento, non memorizzando proprietà', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid e Flexbox sono potenti perché descrivono relazioni di layout invece di coordinate fisse. La difficoltà è prevedere come interagiscono <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, direzione, a capo, track e spazio disponibile. Questo generatore trasforma proprietà astratte in un playground vivo con preset e CSS in tempo reale.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Preset layout rapidi', icon: 'mdi:view-grid-plus' }, { value: 'Live', label: 'CSS aggiornato a ogni modifica', icon: 'mdi:code-braces' }, { value: '0', label: 'Dipendenze framework nel CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: scegli il modello prima di rifinire l\'allineamento', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Ideale per flussi unidimensionali dove gli elementi si allineano in riga o colonna e vanno a capo naturalmente.', icon: 'mdi:format-align-justify', highlight: true, points: ['Navigazione', 'Gruppi di pulsanti', 'Card a capo', 'Contenuto centrato'] }, { title: 'CSS Grid', description: 'Ideale per strutture bidimensionali dove righe e colonne definiscono la forma della composizione.', icon: 'mdi:grid', points: ['Dashboard', 'Gallerie', 'Form', 'Sezioni editoriali'] }] },
+    { type: 'title', text: 'Cosa insegna ogni controllo', level: 3 },
+    { type: 'table', headers: ['Controllo', 'Proprietà CSS', 'Cosa osservare'], rows: [['Direzione', '<code>flex-direction</code>', 'Come scorre l\'asse principale  -  passare da riga a colonna cambia tutta la logica.'], ['A capo', '<code>flex-wrap</code>', 'Se gli elementi restano su una riga o vanno a capo quando lo spazio finisce.'], ['Spaziatura', '<code>gap</code>', 'Lo spazio tra elementi senza margini che si rompono ai bordi.'], ['Giustifica', '<code>justify-content</code>', 'Come lo spazio libero è distribuito lungo l\'asse principale.'], ['Allinea', '<code>align-items</code>', 'Come gli elementi si posizionano sull\'asse trasversale.'], ['Allinea contenuto', '<code>align-content</code>', 'Come le righe a capo o le righe grid distribuiscono lo spazio extra.'], ['Colonne', '<code>grid-template-columns</code>', 'Quanti track uguali crea il grid prima che gli elementi vadano a capo.'], ['Dim. contenitore', '<code>width</code> e <code>min-height</code>', 'Come lo stesso CSS reagisce quando lo spazio disponibile cambia.']] },
+    { type: 'tip', title: 'Prima ridimensiona, poi ottimizza', html: 'Inizia ridimensionando il canvas a una dimensione realistica. Poi regola spaziatura e allineamento. Così il CSS generato funziona in condizioni reali.' },
+    { type: 'title', text: 'CSS pulito che puoi adattare', level: 3 },
+    { type: 'code', ariaLabel: 'Esempio CSS generato', 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: 'Perché il ridimensionamento visivo è importante', html: 'Molti bug di layout compaiono solo quando il contenitore è più stretto, più alto o con un numero diverso di elementi. Ridimensionare mentre il CSS si aggiorna in diretta aiuta a individuare ritorni a capo scomodi e scelte di allineamento fragili.' },
+    { type: 'summary', title: 'Workflow consigliato', items: ['Scegli un preset o Flexbox per flussi unidimensionali e Grid per struttura bidimensionale.', 'Ridimensiona il canvas prima di copiare il CSS affinché il layout sopravviva a vincoli realistici.', 'Usa gap per la spaziatura tra elementi invece di aggiungere margini a ogni figlio.', 'Copia il CSS generato come punto di partenza, poi aggiungi selettori specifici e media queries.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/ja.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 = 'visual-css-grid-flexbox-generator';
+const title = 'ビジュアルCSS Grid & Flexboxレイアウトジェネレーター';
+const description = 'ビジュアルブロックを移動し、コンテナをリサイズし、配置を調整し、プリセットを使用してレスポンシブレイアウトを設計  -  クリーンなネイティブCSSをすぐにコピー。';
+
+const howTo = [
+  { name: 'プリセットまたはFlexbox/Gridを選択', text: 'レイアウトプリセット（navbar, cards, hero, sidebar, gallery）から始めるか、FlexboxとGridを手動で切り替えます。' },
+  { name: 'レイアウトをリサイズ', text: '右下隅からコンテナをリサイズして、デザインが利用可能なスペースにどう反応するかテストします。' },
+  { name: '配置コントロールを調整', text: '方向、折り返し、間隔、列数、justify-content、align-items、align-content、幅、高さ、アイテムサイズのスライダーとセレクトを使用します。' },
+  { name: '本番対応CSSをコピー', text: '視覚的な結果が目的の構造と一致したら、生成されたCSSをコピーします。フレームワーク依存なし。' },
+];
+
+const faq = [
+  { question: 'Flexboxの代わりにCSS Gridを使うべきタイミングは？', answer: '1次元レイアウトにはFlexboxを使用  -  ナビゲーションバー、ボタングループ、折り返しカード、中央揃えコンテンツ。行と列が共に重要な場合はGrid  -  ダッシュボード、ギャラリー、フォーム、構造化されたページセクション。' },
+  { question: 'このジェネレーターでレスポンシブレイアウトを作成できますか？', answer: 'はい。生成されるCSSはネイティブのflex折り返しまたは繰り返しgrid列を使用します。ビジュアルキャンバスをリサイズして、異なるサイズでの間隔と配置をテストできます。' },
+  { question: 'justify-contentとalign-itemsがgridとflexで異なる理由は？', answer: 'Flexboxは主軸と交差軸に沿ってアイテムを分散します。Gridは最初にアイテムをトラックに配置し、その中でコンテンツを整列させます。両モードを切り替えると、その違いがすぐに分かります。' },
+  { question: '生成されたCSSはフレームワークに依存しますか？', answer: 'いいえ。結果は純粋なネイティブCSSです。プレーンHTML、Astro、React、Vue、Svelte、Web Componentsなど、標準CSSを受け入れるあらゆるプロジェクトで使用できます。' },
+  { question: 'レイアウトプリセットの目的は？', answer: 'プリセットは一般的なレイアウトを加速し、ゼロから始めずに現実的な設定を確認できます。各プリセットは、実際のパターンに合わせてモード、方向、折り返し、配置、コンテナサイズを設定します。' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'レイアウトモード',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'インタラクティブレイアウトキャンバス',
+  addItem: 'アイテム追加',
+  removeItem: 'アイテム削除',
+  resetLayout: 'レイアウトをリセット',
+  gapLabel: '間隔',
+  columnsLabel: 'Grid列数',
+  widthLabel: 'コンテナ幅',
+  heightLabel: 'コンテナ高さ',
+  justifyLabel: '水平配置',
+  alignLabel: '垂直配置',
+  itemSizeLabel: 'アイテムサイズ',
+  codeTitle: '生成されたCSS',
+  copyCode: 'CSSをコピー',
+  copied: 'コピーしました！',
+  dragHint: '隅からキャンバスをリサイズ  -  CSSがライブ更新！',
+  outputLabel: '生成されたCSS出力',
+  justifyStart: '先頭',
+  justifyCenter: '中央',
+  justifyEnd: '末尾',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: '先頭',
+  alignCenter: '中央',
+  alignEnd: '末尾',
+  alignStretch: 'ストレッチ',
+  alignBaseline: 'ベースライン',
+  itemPrefix: 'ブロック',
+  directionLabel: '方向',
+  directionRow: '行 →',
+  directionRowReverse: '← 行 逆',
+  directionColumn: '列 ↓',
+  directionColumnReverse: '↑ 列 逆',
+  wrapLabel: '折り返し',
+  wrapNoWrap: '折り返しなし',
+  wrapWrap: '折り返す',
+  wrapWrapReverse: '逆折り返し',
+  alignContentLabel: 'コンテンツ配置',
+  alignContentStart: '先頭',
+  alignContentCenter: '中央',
+  alignContentEnd: '末尾',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'ストレッチ',
+  presetsLabel: 'プリセット',
+  presetNavbar: 'ナビバー',
+  presetCards: 'カード',
+  presetHero: 'ヒーロー',
+  presetSidebar: 'サイドバー',
+  presetGallery: 'ギャラリー',
+  shakeLimit: '最低2つのアイテムが必要です！',
+  spanHint: 'Gridモードでアイテムをダブルクリックして列スパン（1-3）を変更',
+};
+
+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レイアウトジェネレーター FAQ',
+  faq,
+  bibliographyTitle: 'CSS GridとFlexboxのリファレンス',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'プロパティを暗記せず、動作を見てCSSレイアウトを構築', level: 2 },
+    { type: 'paragraph', html: 'CSS GridとFlexboxは、固定座標ではなくレイアウト関係を記述するため強力です。難しいのは、<strong>gap</strong>、<strong>justify-content</strong>、<strong>align-items</strong>、方向、折り返し、トラック、利用可能なスペースがどのように相互作用するかを予測することです。このジェネレーターは、抽象的なプロパティをプリセットとリアルタイムCSSを備えた生きたプレイグラウンドに変えます。' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'クイックスタートプリセット', icon: 'mdi:view-grid-plus' }, { value: 'ライブ', label: '変更ごとにCSSが更新', icon: 'mdi:code-braces' }, { value: '0', label: 'CSSのフレームワーク依存', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: 配置を調整する前にモデルを選択', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'アイテムが行または列に並び、自然に折り返す1次元フローに最適。', icon: 'mdi:format-align-justify', highlight: true, points: ['ナビゲーションバー', 'ボタングループ', '折り返しカード', '中央揃えコンテンツ'] }, { title: 'CSS Grid', description: '行と列がコンポジションの形状を定義する2次元構造に最適。', icon: 'mdi:grid', points: ['ダッシュボード', 'ギャラリー', 'フォーム', '編集セクション'] }] },
+    { type: 'title', text: '各コントロールが教えること', level: 3 },
+    { type: 'table', headers: ['コントロール', 'CSSプロパティ', '注目点'], rows: [['方向', '<code>flex-direction</code>', '主軸の流れ方  -  行から列に切り替えるとレイアウト全体のロジックが変わる。'], ['折り返し', '<code>flex-wrap</code>', 'アイテムが1行に留まるか、スペースが尽きると新しい行に流れるか。'], ['間隔', '<code>gap</code>', '端で崩れないアイテム間のスペース。'], ['水平配置', '<code>justify-content</code>', '空きスペースが主軸に沿ってどのように分配されるか。'], ['垂直配置', '<code>align-items</code>', 'アイテムが交差軸上でどのように配置されるか。'], ['コンテンツ配置', '<code>align-content</code>', '折り返されたflex行またはgrid行が追加の交差軸スペースをどのように分配するか。'], ['列数', '<code>grid-template-columns</code>', 'アイテムが次の行に移動する前にgridが作成する等しいトラックの数。'], ['コンテナサイズ', '<code>width</code>と<code>min-height</code>', '利用可能なスペースが変わったときに同じCSSがどのように反応するか。']] },
+    { type: 'tip', title: 'まずスケール、次に最適化', html: 'まずキャンバスを現実的なサイズにスケールします。次に間隔と配置を調整します。これにより、生成されたCSSが実際の条件下で機能します。' },
+    { type: 'title', text: '適応可能なクリーンなCSS', level: 3 },
+    { type: 'code', ariaLabel: '生成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: 'ビジュアルスケーリングが重要な理由', html: '多くのレイアウトバグは、コンテナがより狭く、より高く、または異なるアイテム数で満たされたときにのみ現れます。CSSがライブ更新されている間にスケーリングすることで、ぎこちない折り返しや脆弱な配置選択を発見できます。' },
+    { type: 'summary', title: '推奨ワークフロー', items: ['1次元フローにはプリセットまたはFlexbox、2次元構造にはGridを選択。', 'CSSをコピーする前にキャンバスをスケールして、レイアウトが現実的な制約に耐えられるように。', '各子にマージンを追加する代わりに、アイテム間の間隔にgapを使用。', '生成されたCSSを出発点としてコピーし、プロジェクト固有のセレクタとメディアクエリを追加。'] },
+  ],
+};