@jjlmoya/utils-developer 1.17.0 → 1.18.0

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

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