@jjlmoya/utils-developer 1.17.0 → 1.18.0

package/src/tool/visualCssGridFlexboxGenerator/i18n/pt.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 = 'gerador-visual-css-grid-flexbox';
+const title = 'Gerador Visual de Layout CSS Grid & Flexbox';
+const description = 'Projete layouts responsivos movendo blocos visuais, redimensionando o contêiner, ajustando o alinhamento e usando presets  -  depois copie CSS nativo limpo instantaneamente.';
+
+const howTo = [
+  { name: 'Escolha um preset ou Flexbox / Grid', text: 'Comece com um preset de layout (navbar, cards, hero, sidebar, gallery) ou alterne entre Flexbox e Grid manualmente.' },
+  { name: 'Redimensione o layout', text: 'Redimensione o contêiner pelo canto inferior para testar como o design reage ao espaço disponível.' },
+  { name: 'Ajuste os controles de alinhamento', text: 'Use sliders e selects para direção, wrap, espaçamento, colunas, justify-content, align-items, align-content, largura, altura e tamanho dos itens.' },
+  { name: 'Copie CSS pronto para produção', text: 'Copie o CSS gerado quando o resultado visual corresponder à estrutura desejada. Sem dependências de framework.' },
+];
+
+const faq = [
+  { question: 'Quando usar Flexbox em vez de CSS Grid?', answer: 'Use Flexbox para layouts unidimensionais  -  barras de navegação, grupos de botões, cards embrulhados, conteúdo centralizado. Grid quando linhas e colunas importam juntas  -  dashboards, galerias, formulários, seções estruturadas.' },
+  { question: 'Este gerador pode criar layouts responsivos?', answer: 'Sim. O CSS gerado usa flex wrapping nativo ou colunas repetidas do grid. Redimensione o canvas visual para testar espaçamento e alinhamento em diferentes tamanhos.' },
+  { question: 'Por que justify-content e align-items parecem diferentes em grid e flex?', answer: 'Flexbox distribui itens ao longo de um eixo principal e um transversal. Grid posiciona itens nos tracks primeiro, depois alinha o conteúdo dentro deles. Alternar entre os modos torna essa diferença imediatamente visível.' },
+  { question: 'O CSS gerado está vinculado a algum framework?', answer: 'Não. O resultado é CSS nativo puro. Use em HTML simples, Astro, React, Vue, Svelte, Web Components ou qualquer projeto que aceite CSS padrão.' },
+  { question: 'Para que servem os presets de layout?', answer: 'Os presets aceleram layouts comuns para ver configurações realistas sem começar do zero. Cada preset configura modo, direção, wrap, alinhamento e tamanho do contêiner para um padrão real.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Modo de layout',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Canvas de layout interativo',
+  addItem: 'Adicionar item',
+  removeItem: 'Remover item',
+  resetLayout: 'Restaurar layout',
+  gapLabel: 'Espaçamento',
+  columnsLabel: 'Colunas do grid',
+  widthLabel: 'Largura do contêiner',
+  heightLabel: 'Altura do contêiner',
+  justifyLabel: 'Justificar',
+  alignLabel: 'Alinhar',
+  itemSizeLabel: 'Tamanho do item',
+  codeTitle: 'CSS Gerado',
+  copyCode: 'Copiar CSS',
+  copied: 'Copiado!',
+  dragHint: 'Redimensione o canvas pelo canto  -  o CSS atualiza ao vivo!',
+  outputLabel: 'Saída CSS gerada',
+  justifyStart: 'Início',
+  justifyCenter: 'Centro',
+  justifyEnd: 'Fim',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Início',
+  alignCenter: 'Centro',
+  alignEnd: 'Fim',
+  alignStretch: 'Esticar',
+  alignBaseline: 'Linha base',
+  itemPrefix: 'Bloco',
+  directionLabel: 'Direção',
+  directionRow: 'Linha →',
+  directionRowReverse: '← Linha inv',
+  directionColumn: 'Coluna ↓',
+  directionColumnReverse: '↑ Col inv',
+  wrapLabel: 'Quebra',
+  wrapNoWrap: 'Sem quebra',
+  wrapWrap: 'Com quebra',
+  wrapWrapReverse: 'Quebra inv',
+  alignContentLabel: 'Alinhar conteúdo',
+  alignContentStart: 'Início',
+  alignContentCenter: 'Centro',
+  alignContentEnd: 'Fim',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Esticar',
+  presetsLabel: 'Presets',
+  presetNavbar: 'Navbar',
+  presetCards: 'Cards',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidebar',
+  presetGallery: 'Galeria',
+  shakeLimit: 'Precisa de pelo menos 2 itens!',
+  spanHint: 'Clique duplo em um item para alterar sua extensão de coluna (1-3) no 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 do gerador de layout CSS',
+  faq,
+  bibliographyTitle: 'Referências CSS Grid e Flexbox',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Construa layouts CSS observando o comportamento, não decorando propriedades', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid e Flexbox são poderosos porque descrevem relações de layout em vez de coordenadas fixas. O difícil é prever como <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, direção, quebra, tracks e espaço disponível interagem. Este gerador transforma propriedades abstratas em um playground vivo com presets e CSS em tempo real.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Presets de layout rápidos', icon: 'mdi:view-grid-plus' }, { value: 'Ao vivo', label: 'CSS atualiza a cada mudança', icon: 'mdi:code-braces' }, { value: '0', label: 'Dependências de framework no CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: escolha o modelo antes de refinar o alinhamento', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Ideal para fluxos unidimensionais onde os itens se alinham em linha ou coluna e podem quebrar naturalmente.', icon: 'mdi:format-align-justify', highlight: true, points: ['Navegação', 'Grupos de botões', 'Cards embrulhados', 'Conteúdo centralizado'] }, { title: 'CSS Grid', description: 'Ideal para estruturas bidimensionais onde linhas e colunas definem a forma da composição.', icon: 'mdi:grid', points: ['Dashboards', 'Galerias', 'Formulários', 'Seções editoriais'] }] },
+    { type: 'title', text: 'O que cada controle ensina', level: 3 },
+    { type: 'table', headers: ['Controle', 'Propriedade CSS', 'O que observar'], rows: [['Direção', '<code>flex-direction</code>', 'Como o eixo principal flui  -  trocar de linha para coluna muda toda a lógica.'], ['Quebra', '<code>flex-wrap</code>', 'Se os itens ficam em uma linha ou quebram para novas linhas.'], ['Espaçamento', '<code>gap</code>', 'O espaço entre itens sem margens que quebram nas bordas.'], ['Justificar', '<code>justify-content</code>', 'Como o espaço livre é distribuído ao longo do eixo principal.'], ['Alinhar', '<code>align-items</code>', 'Como os itens se posicionam no eixo transversal.'], ['Alinhar conteúdo', '<code>align-content</code>', 'Como linhas quebradas ou fileiras do grid distribuem o espaço extra.'], ['Colunas', '<code>grid-template-columns</code>', 'Quantos tracks iguais o grid cria antes dos itens passarem para outra linha.'], ['Tam. contêiner', '<code>width</code> e <code>min-height</code>', 'Como o mesmo CSS reage quando o espaço disponível muda.']] },
+    { type: 'tip', title: 'Redimensione primeiro, otimize depois', html: 'Comece redimensionando o canvas para um tamanho realista. Depois ajuste espaçamento e alinhamento. Assim o CSS gerado funciona em condições reais.' },
+    { type: 'title', text: 'CSS limpo que você pode adaptar', level: 3 },
+    { type: 'code', ariaLabel: 'Exemplo de CSS gerado', 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 que o redimensionamento visual importa', html: 'Muitos bugs de layout só aparecem quando o contêiner é mais estreito, mais alto ou tem número diferente de itens. Redimensionar enquanto o CSS atualiza ao vivo ajuda a identificar quebras incômodas e escolhas de alinhamento frágeis.' },
+    { type: 'summary', title: 'Workflow recomendado', items: ['Escolha um preset ou Flexbox para fluxos unidimensionais e Grid para estrutura bidimensional.', 'Redimensione o canvas antes de copiar o CSS para que o layout sobreviva a restrições realistas.', 'Use gap para espaçamento entre itens em vez de adicionar margens a cada filho.', 'Copie o CSS gerado como ponto de partida, depois adicione seletores específicos e media queries.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/ru.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 = 'vizualniy-generator-css-grid-flexbox';
+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: 'Используйте 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: 'Hero',
+  presetSidebar: 'Сайдбар',
+  presetGallery: 'Галерея',
+  shakeLimit: 'Нужно минимум 2 элемента!',
+  spanHint: 'Двойной клик по элементу меняет ширину колонки (1-3) в режиме 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 генератора CSS макетов',
+  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: 'Лучше всего для одномерных потоков, где элементы выстраиваются в строку или колонку и естественно переносятся.', icon: 'mdi:format-align-justify', highlight: true, points: ['Навигация', 'Группы кнопок', 'Карточки', 'Центрированный контент'] }, { title: 'CSS Grid', description: 'Лучше всего для двумерных структур, где строки и колонки определяют форму композиции.', icon: 'mdi:grid', points: ['Дашборды', 'Галереи', 'Формы', 'Редакционные разделы'] }] },
+    { type: 'title', text: 'Чему учит каждый элемент управления', level: 3 },
+    { type: 'table', headers: ['Элемент', 'Свойство CSS', 'На что смотреть'], rows: [['Направление', '<code>flex-direction</code>', 'Как течёт главная ось  -  смена строки на колонку меняет всю логику макета.'], ['Перенос', '<code>flex-wrap</code>', 'Остаются ли элементы на одной линии или переносятся на новые строки.'], ['Отступ', '<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: ['Выберите пресет или Flexbox для одномерных потоков и Grid для двумерной структуры.', 'Масштабируйте холст перед копированием CSS, чтобы макет выдерживал реалистичные ограничения.', 'Используйте gap для отступов между элементами вместо добавления полей каждому дочернему элементу.', 'Копируйте сгенерированный CSS как отправную точку, затем добавьте специфичные для проекта селекторы и медиа-запросы.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/sv.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 = 'visuell-css-grid-flexbox-generator';
+const title = 'Visuell CSS Grid & Flexbox Layoutgenerator';
+const description = 'Designa responsiva layouter genom att flytta visuella block, skala om behållaren, justera justering och använda förinställningar  -  kopiera sedan ren native CSS direkt.';
+
+const howTo = [
+  { name: 'Välj en förinställning eller Flexbox / Grid', text: 'Börja med en layoutförinställning (navbar, cards, hero, sidebar, gallery) eller växla mellan Flexbox och Grid manuellt.' },
+  { name: 'Skala om layouten', text: 'Skala om behållaren från det nedre hörnet för att testa hur designen reagerar på tillgängligt utrymme.' },
+  { name: 'Justera justeringskontroller', text: 'Använd reglage och rullgardiner för riktning, radbrytning, mellanrum, kolumner, justify-content, align-items, align-content, bredd, höjd och objektstorlek.' },
+  { name: 'Kopiera produktionsklar CSS', text: 'Kopiera den genererade CSS:en när det visuella resultatet matchar önskad struktur. Inga ramverksberoenden.' },
+];
+
+const faq = [
+  { question: 'När ska jag använda Flexbox istället för CSS Grid?', answer: 'Använd Flexbox för endimensionella layouter  -  navigeringsfält, knappgrupper, radbrytande kort, centrerat innehåll. Grid när rader och kolumner spelar roll tillsammans  -  dashboards, gallerier, formulär, strukturerade sidavsnitt.' },
+  { question: 'Kan denna generator skapa responsiva layouter?', answer: 'Ja. Den genererade CSS:en använder native flex-radbrytning eller upprepade grid-kolumner. Skala om den visuella canvasen för att testa mellanrum och justering vid olika storlekar.' },
+  { question: 'Varför känns justify-content och align-items annorlunda i grid och flex?', answer: 'Flexbox fördelar objekt längs en huvudaxel och tväraxel. Grid placerar först objekt i spår och justerar sedan innehållet inuti dem. Att växla mellan lägena gör skillnaden omedelbart synlig.' },
+  { question: 'Är den genererade CSS:en bunden till ett ramverk?', answer: 'Nej. Resultatet är ren native CSS. Använd den i vanlig HTML, Astro, React, Vue, Svelte, Web Components eller vilket projekt som helst som accepterar standard-CSS.' },
+  { question: 'Vad är layoutförinställningarna till för?', answer: 'Förinställningar snabbar upp vanliga layouter så att du ser realistiska konfigurationer utan att börja från noll. Varje förinställning ställer in läge, riktning, radbrytning, justering och behållarstorlek för ett verkligt mönster.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Layoutläge',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Interaktiv layoutcanvas',
+  addItem: 'Lägg till objekt',
+  removeItem: 'Ta bort objekt',
+  resetLayout: 'Återställ layout',
+  gapLabel: 'Mellanrum',
+  columnsLabel: 'Grid-kolumner',
+  widthLabel: 'Behållarbredd',
+  heightLabel: 'Behållarhöjd',
+  justifyLabel: 'Justera',
+  alignLabel: 'Justera',
+  itemSizeLabel: 'Objektstorlek',
+  codeTitle: 'Genererad CSS',
+  copyCode: 'Kopiera CSS',
+  copied: 'Kopierat!',
+  dragHint: 'Skala om canvasen från hörnet  -  CSS uppdateras live!',
+  outputLabel: 'Genererad CSS-utdata',
+  justifyStart: 'Start',
+  justifyCenter: 'Mitten',
+  justifyEnd: 'Slut',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Start',
+  alignCenter: 'Mitten',
+  alignEnd: 'Slut',
+  alignStretch: 'Sträck',
+  alignBaseline: 'Baslinje',
+  itemPrefix: 'Block',
+  directionLabel: 'Riktning',
+  directionRow: 'Rad →',
+  directionRowReverse: '← Rad omv',
+  directionColumn: 'Kolumn ↓',
+  directionColumnReverse: '↑ Kol omv',
+  wrapLabel: 'Radbryt',
+  wrapNoWrap: 'Ingen radbryt',
+  wrapWrap: 'Radbryt',
+  wrapWrapReverse: 'Radbryt omv',
+  alignContentLabel: 'Justera innehåll',
+  alignContentStart: 'Start',
+  alignContentCenter: 'Mitten',
+  alignContentEnd: 'Slut',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Sträck',
+  presetsLabel: 'Förval',
+  presetNavbar: 'Navbar',
+  presetCards: 'Kort',
+  presetHero: 'Hero',
+  presetSidebar: 'Sidopanel',
+  presetGallery: 'Galleri',
+  shakeLimit: 'Minst 2 objekt krävs!',
+  spanHint: 'Dubbelklicka på ett objekt för att ändra kolumnspann (1-3) i Grid-läge',
+};
+
+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 layoutgenerator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Grid och Flexbox referenser',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Bygg CSS-layouter genom att se beteendet, inte memorera egenskaper', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid och Flexbox är kraftfulla eftersom de beskriver layoutrelationer istället för fasta koordinater. Det svåra är att förutsäga hur <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, riktning, radbrytning, spår och tillgängligt utrymme samverkar. Denna generator förvandlar abstrakta egenskaper till en levande lekplats med förinställningar och realtids-CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Snabba layoutförval', icon: 'mdi:view-grid-plus' }, { value: 'Live', label: 'CSS uppdateras vid varje ändring', icon: 'mdi:code-braces' }, { value: '0', label: 'Ramverksberoenden i CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: välj modell innan du finslipar justering', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Bäst för endimensionella flöden där objekt radar upp sig i rad eller kolumn och bryts naturligt.', icon: 'mdi:format-align-justify', highlight: true, points: ['Navigeringsfält', 'Knappgrupper', 'Radbrytande kort', 'Centrerat innehåll'] }, { title: 'CSS Grid', description: 'Bäst för tvådimensionella strukturer där rader och kolumner definierar kompositionens form.', icon: 'mdi:grid', points: ['Dashboards', 'Gallerier', 'Formulär', 'Redaktionella sektioner'] }] },
+    { type: 'title', text: 'Vad varje kontroll lär dig', level: 3 },
+    { type: 'table', headers: ['Kontroll', 'CSS-egenskap', 'Vad att titta på'], rows: [['Riktning', '<code>flex-direction</code>', 'Hur huvudaxeln flyter  -  byt från rad till kolumn för att ändra hela layoutlogiken.'], ['Radbryt', '<code>flex-wrap</code>', 'Om objekt stannar på en rad eller flödar till nya rader när utrymmet tar slut.'], ['Mellanrum', '<code>gap</code>', 'Utrymmet mellan objekt utan marginaler som bryts vid kanter.'], ['Justera', '<code>justify-content</code>', 'Hur fritt utrymme fördelas längs huvudaxeln.'], ['Justera', '<code>align-items</code>', 'Hur objekt placeras på tväraxeln.'], ['Justera innehåll', '<code>align-content</code>', 'Hur radbrutna flex-rader eller grid-rader fördelar extra tväraxelutrymme.'], ['Kolumner', '<code>grid-template-columns</code>', 'Hur många lika spår grid:en skapar innan objekt bryts till nästa rad.'], ['Behållarstorlek', '<code>width</code> och <code>min-height</code>', 'Hur samma CSS reagerar när tillgängligt utrymme ändras.']] },
+    { type: 'tip', title: 'Skala först, optimera sedan', html: 'Börja med att skala canvasen till en realistisk storlek. Justera sedan mellanrum och justering. På så sätt fungerar den genererade CSS:en under verkliga förhållanden.' },
+    { type: 'title', text: 'Ren CSS som du kan anpassa', level: 3 },
+    { type: 'code', ariaLabel: 'Exempel på genererad 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: 'Varför visuell skalning är viktig', html: 'Många layoutbuggar uppträder bara när behållaren är smalare, högre eller fylld med olika antal objekt. Att skala medan CSS:en uppdateras live hjälper till att upptäcka besvärlig radbrytning och ömtåliga justeringsval.' },
+    { type: 'summary', title: 'Rekommenderat arbetsflöde', items: ['Välj en förinställning eller Flexbox för endimensionella flöden och Grid för tvådimensionell struktur.', 'Skala canvasen innan du kopierar CSS så att layouten överlever realistiska begränsningar.', 'Använd gap för mellanrum mellan objekt istället för att lägga till marginaler på varje barn.', 'Kopiera den genererade CSS:en som utgångspunkt och lägg sedan till projektspecifika selektorer och media queries.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/tr.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 = 'gorsel-css-grid-flexbox-olusturucu';
+const title = 'Görsel CSS Grid & Flexbox Düzen Oluşturucu';
+const description = 'Görsel blokları taşıyarak, kapsayıcıyı yeniden boyutlandırarak, hizalamayı ayarlayarak ve hazır ayarları kullanarak duyarlı düzenler tasarlayın  -  ardından temiz native CSS\'i anında kopyalayın.';
+
+const howTo = [
+  { name: 'Hazır ayar veya Flexbox / Grid seçin', text: 'Bir düzen hazır ayarıyla (navbar, cards, hero, sidebar, gallery) başlayın veya Flexbox ile Grid arasında manuel olarak geçiş yapın.' },
+  { name: 'Düzeni yeniden boyutlandırın', text: 'Tasarımın mevcut alana nasıl tepki verdiğini test etmek için kapsayıcıyı alt köşeden yeniden boyutlandırın.' },
+  { name: 'Hizalama kontrollerini ayarlayın', text: 'Yön, kaydırma, boşluk, sütunlar, justify-content, align-items, align-content, genişlik, yükseklik ve öğe boyutu için kaydırıcıları ve seçimleri kullanın.' },
+  { name: 'Üretime hazır CSS kopyalayın', text: 'Görsel sonuç istediğiniz yapıyla eşleştiğinde oluşturulan CSS\'i kopyalayın. Framework bağımlılığı yok.' },
+];
+
+const faq = [
+  { question: 'Flexbox yerine ne zaman CSS Grid kullanmalıyım?', answer: 'Tek boyutlu düzenler için Flexbox kullanın  -  gezinme çubukları, düğme grupları, kaydırılan kartlar, ortalanmış içerik. Satır ve sütunların birlikte önemli olduğu durumlarda Grid  -  panolar, galeriler, formlar, yapılandırılmış sayfa bölümleri.' },
+  { question: 'Bu oluşturucu duyarlı düzenler oluşturabilir mi?', answer: 'Evet. Oluşturulan CSS, yerel flex kaydırma veya tekrarlanan grid sütunları kullanır. Farklı boyutlarda boşluk ve hizalamayı test etmek için görsel tuvali yeniden boyutlandırın.' },
+  { question: 'Justify-content ve align-items neden grid ve flex\'te farklı hissediliyor?', answer: 'Flexbox, öğeleri bir ana eksen ve çapraz eksen boyunca dağıtır. Grid, öğeleri önce izlere yerleştirir, sonra içeriği bunların içinde hizalar. İki mod arasında geçiş yapmak bu farkı hemen görünür kılar.' },
+  { question: 'Oluşturulan CSS bir framework\'e bağlı mı?', answer: 'Hayır. Sonuç saf native CSS\'tir. Düz HTML, Astro, React, Vue, Svelte, Web Components veya standart CSS kabul eden herhangi bir projede kullanın.' },
+  { question: 'Düzen hazır ayarları ne işe yarar?', answer: 'Hazır ayarlar, sıfırdan başlamadan gerçekçi yapılandırmaları görmek için yaygın düzenleri hızlandırır. Her hazır ayar, gerçek bir desen için mod, yön, kaydırma, hizalama ve kapsayıcı boyutunu ayarlar.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Düzen modu',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Etkileşimli düzen tuvali',
+  addItem: 'Öğe ekle',
+  removeItem: 'Öğe kaldır',
+  resetLayout: 'Düzeni sıfırla',
+  gapLabel: 'Boşluk',
+  columnsLabel: 'Grid sütunları',
+  widthLabel: 'Kapsayıcı genişliği',
+  heightLabel: 'Kapsayıcı yüksekliği',
+  justifyLabel: 'Hizala',
+  alignLabel: 'Hizala',
+  itemSizeLabel: 'Öğe boyutu',
+  codeTitle: 'Oluşturulan CSS',
+  copyCode: 'CSS kopyala',
+  copied: 'Kopyalandı!',
+  dragHint: 'Tuvali köşeden yeniden boyutlandırın  -  CSS canlı güncellenir!',
+  outputLabel: 'Oluşturulan CSS çıktısı',
+  justifyStart: 'Başlangıç',
+  justifyCenter: 'Orta',
+  justifyEnd: 'Son',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Başlangıç',
+  alignCenter: 'Orta',
+  alignEnd: 'Son',
+  alignStretch: 'Uzat',
+  alignBaseline: 'Taban çizgisi',
+  itemPrefix: 'Blok',
+  directionLabel: 'Yön',
+  directionRow: 'Satır →',
+  directionRowReverse: '← Satır ters',
+  directionColumn: 'Sütun ↓',
+  directionColumnReverse: '↑ Sütun ters',
+  wrapLabel: 'Kaydırma',
+  wrapNoWrap: 'Kaydırma yok',
+  wrapWrap: 'Kaydır',
+  wrapWrapReverse: 'Ters kaydır',
+  alignContentLabel: 'İçeriği hizala',
+  alignContentStart: 'Başlangıç',
+  alignContentCenter: 'Orta',
+  alignContentEnd: 'Son',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Uzat',
+  presetsLabel: 'Hazır Ayarlar',
+  presetNavbar: 'Navbar',
+  presetCards: 'Kartlar',
+  presetHero: 'Hero',
+  presetSidebar: 'Kenar çubuğu',
+  presetGallery: 'Galeri',
+  shakeLimit: 'En az 2 öğe gerekli!',
+  spanHint: 'Grid modunda sütun aralığını (1-3) değiştirmek için öğeye çift tıklayın',
+};
+
+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 düzen oluşturucu SSS',
+  faq,
+  bibliographyTitle: 'CSS Grid ve Flexbox referansları',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'CSS düzenlerini özellikleri ezberleyerek değil, davranışı görerek oluşturun', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid ve Flexbox güçlüdür çünkü sabit koordinatlar yerine düzen ilişkilerini tanımlar. Zor olan, <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, yön, kaydırma, izler ve mevcut alanın nasıl etkileştiğini tahmin etmektir. Bu oluşturucu, soyut özellikleri hazır ayarlar ve gerçek zamanlı CSS ile canlı bir oyun alanına dönüştürür.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Hızlı başlangıç hazır ayarı', icon: 'mdi:view-grid-plus' }, { value: 'Canlı', label: 'Her değişiklikte CSS güncellenir', icon: 'mdi:code-braces' }, { value: '0', label: 'CSS\'te framework bağımlılığı', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: hizalamayı düzeltmeden önce modeli seçin', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Öğelerin bir satır veya sütunda sıralandığı ve doğal olarak kaydığı tek boyutlu akışlar için en iyisi.', icon: 'mdi:format-align-justify', highlight: true, points: ['Gezinme çubukları', 'Düğme grupları', 'Kaydırılan kartlar', 'Ortalanmış içerik'] }, { title: 'CSS Grid', description: 'Satır ve sütunların kompozisyonun şeklini tanımladığı iki boyutlu yapılar için en iyisi.', icon: 'mdi:grid', points: ['Panolar', 'Galeriler', 'Formlar', 'Editoryal bölümler'] }] },
+    { type: 'title', text: 'Her kontrol size ne öğretir', level: 3 },
+    { type: 'table', headers: ['Kontrol', 'CSS özelliği', 'Nelere dikkat etmeli'], rows: [['Yön', '<code>flex-direction</code>', 'Ana eksen nasıl akar  -  satırdan sütuna geçmek tüm düzen mantığını değiştirir.'], ['Kaydırma', '<code>flex-wrap</code>', 'Öğelerin tek satırda kalıp kalmadığı veya alan bitince yeni satırlara akıp akmadığı.'], ['Boşluk', '<code>gap</code>', 'Kenarlarda kırılmayan öğeler arası boşluk.'], ['Hizala', '<code>justify-content</code>', 'Boş alanın ana eksen boyunca nasıl dağıtıldığı.'], ['Hizala', '<code>align-items</code>', 'Öğelerin çapraz eksende nasıl konumlandığı.'], ['İçeriği hizala', '<code>align-content</code>', 'Kaydırılmış flex satırlarının veya grid satırlarının ek çapraz eksen alanını nasıl dağıttığı.'], ['Sütunlar', '<code>grid-template-columns</code>', 'Grid\'in öğeler başka bir satıra geçmeden önce kaç eşit iz oluşturduğu.'], ['Kapsayıcı boyutu', '<code>width</code> ve <code>min-height</code>', 'Aynı CSS\'in mevcut alan değiştiğinde nasıl tepki verdiği.']] },
+    { type: 'tip', title: 'Önce ölçeklendir, sonra optimize et', html: 'Önce tuvali gerçekçi bir boyuta ölçeklendirin. Ardından boşluk ve hizalamayı ayarlayın. Böylece oluşturulan CSS gerçek koşullarda çalışır.' },
+    { type: 'title', text: 'Uyarlayabileceğiniz temiz CSS', level: 3 },
+    { type: 'code', ariaLabel: 'Örnek oluşturulan 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: 'Görsel ölçeklendirme neden önemlidir', html: 'Birçok düzen hatası yalnızca kapsayıcı daha dar, daha yüksek veya farklı sayıda öğeyle doldurulduğunda ortaya çıkar. CSS canlı güncellenirken ölçeklendirmek, rahatsız edici kaydırmaları ve kırılgan hizalama seçimlerini tespit etmeye yardımcı olur.' },
+    { type: 'summary', title: 'Önerilen iş akışı', items: ['Tek boyutlu akışlar için bir hazır ayar veya Flexbox, iki boyutlu yapı için Grid seçin.', 'Düzenin gerçekçi kısıtlamalara dayanması için CSS\'i kopyalamadan önce tuvali ölçeklendirin.', 'Her çocuğa kenar boşluğu eklemek yerine öğeler arası boşluk için gap kullanın.', 'Oluşturulan CSS\'i başlangıç noktası olarak kopyalayın, ardından projeye özel seçiciler ve medya sorguları ekleyin.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/zh.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: '一维布局使用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,
+  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: '最适合一维流，项目按行或列排列并自然换行。', icon: 'mdi:format-align-justify', highlight: true, points: ['导航栏', '按钮组', '换行卡片', '居中内容'] }, { title: 'CSS Grid', description: '最适合二维结构，行和列定义组合的形状。', icon: 'mdi:grid', points: ['仪表板', '画廊', '表单', '编辑区域'] }] },
+    { type: 'title', text: '每个控件教给你的知识', level: 3 },
+    { type: 'table', headers: ['控件', 'CSS属性', '关注点'], rows: [['方向', '<code>flex-direction</code>', '主轴如何流动  -  从行切换到列会改变整个布局逻辑。'], ['换行', '<code>flex-wrap</code>', '项目保持在单行还是空间不足时流向新行。'], ['间距', '<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: ['一维流选择预设或Flexbox，二维结构选择Grid。', '在复制CSS之前缩放画布，使布局经受住现实的约束。', '使用gap作为项目之间的间距，而不是为每个子元素添加边距。', '以生成的CSS为起点进行复制，然后添加项目特定的选择器和媒体查询。'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/index.ts

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { visualCssGridFlexboxGenerator } from './entry';
+
+export * from './entry';
+
+export const VISUAL_CSS_GRID_FLEXBOX_GENERATOR_TOOL: ToolDefinition = {
+  entry: visualCssGridFlexboxGenerator,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};