@jjlmoya/utils-developer 1.16.0 → 1.18.0

package/src/tool/visualCssGridFlexboxGenerator/i18n/ko.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>', '아이템이 한 줄에 머무는지 공간이 부족하면 새 줄로 넘어가는지.'], ['간격', '<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를 시작점으로 복사한 다음 프로젝트별 선택자와 미디어 쿼리를 추가하세요.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/nl.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 = 'visuele-css-grid-flexbox-generator';
+const title = 'Visuele CSS Grid & Flexbox Layout Generator';
+const description = 'Ontwerp responsive layouts door visuele blokken te verplaatsen, de container te schalen, uitlijning aan te passen en presets te gebruiken  -  kopieer dan direct schone native CSS.';
+
+const howTo = [
+  { name: 'Kies een preset of Flexbox / Grid', text: 'Begin met een layout-preset (navbar, cards, hero, sidebar, gallery) of schakel handmatig tussen Flexbox en Grid.' },
+  { name: 'Schaal de layout', text: 'Schaal de container via de onderste hoek om te testen hoe het ontwerp reageert op beschikbare ruimte.' },
+  { name: 'Pas uitlijning aan', text: 'Gebruik schuifregelaars en dropdowns voor richting, wrap, tussenruimte, kolommen, justify-content, align-items, align-content, breedte, hoogte en itemgrootte.' },
+  { name: 'Kopieer productieklaar CSS', text: 'Kopieer de gegenereerde CSS wanneer het visuele resultaat overeenkomt met de gewenste structuur. Geen framework-afhankelijkheden.' },
+];
+
+const faq = [
+  { question: 'Wanneer gebruik ik Flexbox in plaats van CSS Grid?', answer: 'Gebruik Flexbox voor eendimensionale layouts  -  navigatiebalken, knoppengroepen, omslaande cards, gecentreerde inhoud. Grid wanneer rijen en kolommen samen belangrijk zijn  -  dashboards, galerijen, formulieren, gestructureerde paginagedeelten.' },
+  { question: 'Kan deze generator responsive layouts maken?', answer: 'Ja. De gegenereerde CSS gebruikt native flex wrapping of grid repeat-kolommen. Schaal het visuele canvas om afstanden en uitlijning op verschillende formaten te testen.' },
+  { question: 'Waarom voelen justify-content en align-items anders in grid en flex?', answer: 'Flexbox verdeelt items langs een hoofdas en dwarsas. Grid plaatst items eerst in tracks en lijnt daarna de inhoud daarbinnen uit. Schakelen tussen beide modi maakt dat verschil direct zichtbaar.' },
+  { question: 'Is de gegenereerde CSS gebonden aan een framework?', answer: 'Nee. Het resultaat is pure native CSS. Gebruik het in gewone HTML, Astro, React, Vue, Svelte, Web Components of elk project dat standaard CSS accepteert.' },
+  { question: 'Waar dienen de layout-presets voor?', answer: 'Presets versnellen veelvoorkomende layouts zodat je realistische configuraties ziet zonder vanaf nul te beginnen. Elke preset stelt modus, richting, wrap, uitlijning en containergrootte in voor een praktijkpatroon.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Layoutmodus',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Interactief layoutcanvas',
+  addItem: 'Item toevoegen',
+  removeItem: 'Item verwijderen',
+  resetLayout: 'Layout herstellen',
+  gapLabel: 'Tussenruimte',
+  columnsLabel: 'Grid-kolommen',
+  widthLabel: 'Containerbreedte',
+  heightLabel: 'Containerhoogte',
+  justifyLabel: 'Uitlijnen',
+  alignLabel: 'Uitlijnen',
+  itemSizeLabel: 'Itemgrootte',
+  codeTitle: 'Gegenereerde CSS',
+  copyCode: 'CSS kopiëren',
+  copied: 'Gekopieerd!',
+  dragHint: 'Schaal het canvas via de hoek  -  CSS wordt live bijgewerkt!',
+  outputLabel: 'Gegenereerde CSS-uitvoer',
+  justifyStart: 'Start',
+  justifyCenter: 'Midden',
+  justifyEnd: 'Einde',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Start',
+  alignCenter: 'Midden',
+  alignEnd: 'Einde',
+  alignStretch: 'Rekken',
+  alignBaseline: 'Basislijn',
+  itemPrefix: 'Blok',
+  directionLabel: 'Richting',
+  directionRow: 'Rij →',
+  directionRowReverse: '← Rij omg',
+  directionColumn: 'Kolom ↓',
+  directionColumnReverse: '↑ Kol omg',
+  wrapLabel: 'Omslaan',
+  wrapNoWrap: 'Niet omslaan',
+  wrapWrap: 'Omslaan',
+  wrapWrapReverse: 'Omslaan omg',
+  alignContentLabel: 'Inhoud uitlijnen',
+  alignContentStart: 'Start',
+  alignContentCenter: 'Midden',
+  alignContentEnd: 'Einde',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Rekken',
+  presetsLabel: 'Presets',
+  presetNavbar: 'Navbar',
+  presetCards: 'Kaarten',
+  presetHero: 'Hero',
+  presetSidebar: 'Zijbalk',
+  presetGallery: 'Galerij',
+  shakeLimit: 'Minstens 2 items nodig!',
+  spanHint: 'Dubbelklik op een item om de kolomspanwijdte (1-3) te wijzigen in Grid-modus',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<VisualCssGridFlexboxGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS layout generator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Grid en Flexbox referenties',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Bouw CSS-layouts door het gedrag te zien, niet door eigenschappen te onthouden', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid en Flexbox zijn krachtig omdat ze layoutrelaties beschrijven in plaats van vaste coördinaten. Het moeilijke is voorspellen hoe <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, richting, omslaan, tracks en beschikbare ruimte samenwerken. Deze generator verandert abstracte eigenschappen in een live speeltuin met presets en realtime CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Snelle layout-presets', icon: 'mdi:view-grid-plus' }, { value: 'Live', label: 'CSS-update bij elke wijziging', icon: 'mdi:code-braces' }, { value: '0', label: 'Framework-afhankelijkheden in CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: kies het model voor je de uitlijning verfijnt', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Beste voor eendimensionale stromen waar items in een rij of kolom uitlijnen en natuurlijk omslaan.', icon: 'mdi:format-align-justify', highlight: true, points: ['Navigatiebalken', 'Knoppengroepen', 'Omslaande cards', 'Gecentreerde inhoud'] }, { title: 'CSS Grid', description: 'Beste voor tweedimensionale structuren waar rijen en kolommen de vorm van de compositie bepalen.', icon: 'mdi:grid', points: ['Dashboards', 'Galerijen', 'Formulieren', 'Redactionele secties'] }] },
+    { type: 'title', text: 'Wat elke bediening je leert', level: 3 },
+    { type: 'table', headers: ['Bediening', 'CSS-eigenschap', 'Waar op te letten'], rows: [['Richting', '<code>flex-direction</code>', 'Hoe de hoofdas stroomt  -  wissel van rij naar kolom om de hele logica te veranderen.'], ['Omslaan', '<code>flex-wrap</code>', 'Of items op één regel blijven of naar nieuwe regels omslaan bij ruimtegebrek.'], ['Tussenruimte', '<code>gap</code>', 'De ruimte tussen items zonder marges die aan randen breken.'], ['Uitlijnen', '<code>justify-content</code>', 'Hoe vrije ruimte wordt verdeeld langs de hoofdas.'], ['Uitlijnen', '<code>align-items</code>', 'Hoe items op de dwarsas zitten.'], ['Inhoud uitlijnen', '<code>align-content</code>', 'Hoe omgeslagen regels of grid-rijen extra dwarsruimte verdelen.'], ['Kolommen', '<code>grid-template-columns</code>', 'Hoeveel gelijke tracks het grid maakt voordat items naar de volgende rij omslaan.'], ['Containergrootte', '<code>width</code> en <code>min-height</code>', 'Hoe dezelfde CSS reageert bij veranderende beschikbare ruimte.']] },
+    { type: 'tip', title: 'Schaal eerst, optimaliseer daarna', html: 'Begin met het canvas te schalen naar een realistische grootte. Pas daarna tussenruimte en uitlijning aan. Zo werkt de gegenereerde CSS onder echte omstandigheden.' },
+    { type: 'title', text: 'Schone CSS die je kunt aanpassen', level: 3 },
+    { type: 'code', ariaLabel: 'Voorbeeld gegenereerde 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: 'Waarom visueel schalen belangrijk is', html: 'Veel layoutbugs verschijnen alleen als de container smaller, hoger of anders gevuld is. Schalen terwijl de CSS live bijwerkt helpt bij het ontdekken van onhandig omslaan en fragiele uitlijningskeuzes.' },
+    { type: 'summary', title: 'Aanbevolen workflow', items: ['Kies een preset of Flexbox voor eendimensionale stromen en Grid voor tweedimensionale structuur.', 'Schaal het canvas voordat je CSS kopieert zodat de layout realistische beperkingen overleeft.', 'Gebruik gap voor tussenruimte in plaats van marges aan elk kind toe te voegen.', 'Kopieer de gegenereerde CSS als startpunt en voeg projectspecifieke selectors en media queries toe.'] },
+  ],
+};

package/src/tool/visualCssGridFlexboxGenerator/i18n/pl.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 = 'wizualny-generator-css-grid-flexbox';
+const title = 'Wizualny Generator Układów CSS Grid & Flexbox';
+const description = 'Projektuj responsywne układy, przesuwając wizualne bloki, skalując kontener, dostosowując wyrównanie i używając presetów  -  następnie kopiuj czysty natywny CSS natychmiast.';
+
+const howTo = [
+  { name: 'Wybierz preset lub Flexbox / Grid', text: 'Zacznij od presetu układu (navbar, cards, hero, sidebar, gallery) lub przełączaj się między Flexbox a Grid ręcznie.' },
+  { name: 'Skaluj układ', text: 'Skaluj kontener za dolny róg, aby przetestować, jak projekt reaguje na dostępną przestrzeń.' },
+  { name: 'Dostosuj kontrolki wyrównania', text: 'Użyj suwaków i list rozwijanych dla kierunku, zawijania, odstępu, kolumn, justify-content, align-items, align-content, szerokości, wysokości i rozmiaru elementów.' },
+  { name: 'Kopiuj gotowy CSS', text: 'Kopiuj wygenerowany CSS, gdy wynik wizualny odpowiada pożądanej strukturze. Bez zależności od frameworków.' },
+];
+
+const faq = [
+  { question: 'Kiedy używać Flexbox zamiast CSS Grid?', answer: 'Używaj Flexbox do układów jednowymiarowych  -  paski nawigacyjne, grupy przycisków, zawijane karty, wyśrodkowana zawartość. Grid, gdy wiersze i kolumny mają znaczenie razem  -  dashboardy, galerie, formularze, ustrukturyzowane sekcje stron.' },
+  { question: 'Czy ten generator może tworzyć układy responsywne?', answer: 'Tak. Wygenerowany CSS używa natywnego zawijania flex lub powtarzanych kolumn grid. Skaluj wizualne płótno, aby przetestować odstępy i wyrównanie przy różnych rozmiarach.' },
+  { question: 'Dlaczego justify-content i align-items działają inaczej w grid i flex?', answer: 'Flexbox rozdziela elementy wzdłuż osi głównej i poprzecznej. Grid najpierw umieszcza elementy w ścieżkach, a następnie wyrównuje zawartość wewnątrz nich. Przełączanie między trybami czyni tę różnicę natychmiast widoczną.' },
+  { question: 'Czy wygenerowany CSS jest powiązany z jakimś frameworkiem?', answer: 'Nie. Wynik to czysty natywny CSS. Używaj go w zwykłym HTML, Astro, React, Vue, Svelte, Web Components lub dowolnym projekcie akceptującym standardowy CSS.' },
+  { question: 'Do czego służą presety układu?', answer: 'Presety przyspieszają typowe układy, aby zobaczyć realistyczne konfiguracje bez zaczynania od zera. Każdy preset ustawia tryb, kierunek, zawijanie, wyrównanie i rozmiar kontenera dla rzeczywistego wzorca.' },
+];
+
+const ui: VisualCssGridFlexboxGeneratorUI = {
+  modeLabel: 'Tryb układu',
+  flexMode: 'Flexbox',
+  gridMode: 'Grid',
+  canvasLabel: 'Interaktywne płótno układu',
+  addItem: 'Dodaj element',
+  removeItem: 'Usuń element',
+  resetLayout: 'Resetuj układ',
+  gapLabel: 'Odstęp',
+  columnsLabel: 'Kolumny grid',
+  widthLabel: 'Szerokość kontenera',
+  heightLabel: 'Wysokość kontenera',
+  justifyLabel: 'Wyrównaj',
+  alignLabel: 'Wyrównaj',
+  itemSizeLabel: 'Rozmiar elementu',
+  codeTitle: 'Wygenerowany CSS',
+  copyCode: 'Kopiuj CSS',
+  copied: 'Skopiowano!',
+  dragHint: 'Skaluj płótno za róg  -  CSS aktualizuje się na żywo!',
+  outputLabel: 'Wyjście wygenerowanego CSS',
+  justifyStart: 'Początek',
+  justifyCenter: 'Środek',
+  justifyEnd: 'Koniec',
+  justifyBetween: 'Space between',
+  justifyAround: 'Space around',
+  justifyEvenly: 'Space evenly',
+  alignStart: 'Początek',
+  alignCenter: 'Środek',
+  alignEnd: 'Koniec',
+  alignStretch: 'Rozciągnij',
+  alignBaseline: 'Linia bazowa',
+  itemPrefix: 'Blok',
+  directionLabel: 'Kierunek',
+  directionRow: 'Wiersz →',
+  directionRowReverse: '← Wiersz odw',
+  directionColumn: 'Kolumna ↓',
+  directionColumnReverse: '↑ Kol odw',
+  wrapLabel: 'Zawijanie',
+  wrapNoWrap: 'Bez zawijania',
+  wrapWrap: 'Zawijaj',
+  wrapWrapReverse: 'Zawijaj odw',
+  alignContentLabel: 'Wyrównaj zawartość',
+  alignContentStart: 'Początek',
+  alignContentCenter: 'Środek',
+  alignContentEnd: 'Koniec',
+  alignContentBetween: 'Space between',
+  alignContentAround: 'Space around',
+  alignContentEvenly: 'Space evenly',
+  alignContentStretch: 'Rozciągnij',
+  presetsLabel: 'Presety',
+  presetNavbar: 'Navbar',
+  presetCards: 'Karty',
+  presetHero: 'Hero',
+  presetSidebar: 'Boczny',
+  presetGallery: 'Galeria',
+  shakeLimit: 'Potrzeba co najmniej 2 elementów!',
+  spanHint: 'Kliknij dwukrotnie element, aby zmienić rozpiętość kolumny (1-3) w trybie 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 generatora układów CSS',
+  faq,
+  bibliographyTitle: 'Referencje CSS Grid i Flexbox',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Buduj układy CSS, obserwując zachowanie, nie zapamiętując właściwości', level: 2 },
+    { type: 'paragraph', html: 'CSS Grid i Flexbox są potężne, ponieważ opisują relacje układu zamiast stałych współrzędnych. Trudność polega na przewidywaniu, jak <strong>gap</strong>, <strong>justify-content</strong>, <strong>align-items</strong>, kierunek, zawijanie, ścieżki i dostępna przestrzeń współdziałają. Ten generator zamienia abstrakcyjne właściwości w żywy plac zabaw z presetami i CSS w czasie rzeczywistym.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Szybkie presety układów', icon: 'mdi:view-grid-plus' }, { value: 'Na żywo', label: 'CSS aktualizuje się przy każdej zmianie', icon: 'mdi:code-braces' }, { value: '0', label: 'Zależności od frameworków w CSS', icon: 'mdi:language-css3' }] },
+    { type: 'title', text: 'Flexbox vs Grid: wybierz model przed dopracowaniem wyrównania', level: 3 },
+    { type: 'comparative', columns: 2, items: [{ title: 'Flexbox', description: 'Najlepszy dla przepływów jednowymiarowych, gdzie elementy układają się w wierszu lub kolumnie i naturalnie się zawijają.', icon: 'mdi:format-align-justify', highlight: true, points: ['Paski nawigacyjne', 'Grupy przycisków', 'Zawijane karty', 'Wyśrodkowana zawartość'] }, { title: 'CSS Grid', description: 'Najlepszy dla struktur dwuwymiarowych, gdzie wiersze i kolumny definiują kształt kompozycji.', icon: 'mdi:grid', points: ['Dashboardy', 'Galerie', 'Formularze', 'Sekcje redakcyjne'] }] },
+    { type: 'title', text: 'Czego uczy każda kontrolka', level: 3 },
+    { type: 'table', headers: ['Kontrolka', 'Właściwość CSS', 'Na co zwrócić uwagę'], rows: [['Kierunek', '<code>flex-direction</code>', 'Jak płynie oś główna  -  zmiana z wiersza na kolumnę zmienia całą logikę układu.'], ['Zawijanie', '<code>flex-wrap</code>', 'Czy elementy zostają w jednej linii, czy przechodzą do nowych wierszy.'], ['Odstęp', '<code>gap</code>', 'Przestrzeń między elementami bez marginesów łamiących się na krawędziach.'], ['Wyrównaj', '<code>justify-content</code>', 'Jak wolna przestrzeń jest rozdzielana wzdłuż osi głównej.'], ['Wyrównaj', '<code>align-items</code>', 'Jak elementy osadzają się na osi poprzecznej.'], ['Wyrównaj zawartość', '<code>align-content</code>', 'Jak zawinięte linie flex lub wiersze grid rozdzielają dodatkową przestrzeń.'], ['Kolumny', '<code>grid-template-columns</code>', 'Ile równych ścieżek tworzy grid, zanim elementy przejdą do następnego wiersza.'], ['Rozmiar kontenera', '<code>width</code> i <code>min-height</code>', 'Jak ten sam CSS reaguje, gdy zmienia się dostępna przestrzeń.']] },
+    { type: 'tip', title: 'Najpierw skaluj, potem optymalizuj', html: 'Zacznij od przeskalowania płótna do realistycznego rozmiaru. Następnie dostosuj odstęp i wyrównanie. Dzięki temu wygenerowany CSS działa w rzeczywistych warunkach.' },
+    { type: 'title', text: 'Czysty CSS, który możesz dostosować', level: 3 },
+    { type: 'code', ariaLabel: 'Przykład wygenerowanego 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: 'Dlaczego wizualne skalowanie ma znaczenie', html: 'Wiele błędów układu pojawia się dopiero, gdy kontener jest węższy, wyższy lub wypełniony inną liczbą elementów. Skalowanie podczas aktualizacji CSS na żywo pomaga wykryć niewygodne zawijanie i kruche decyzje dotyczące wyrównania.' },
+    { type: 'summary', title: 'Zalecany przepływ pracy', items: ['Wybierz preset lub Flexbox dla przepływów jednowymiarowych i Grid dla struktury dwuwymiarowej.', 'Skaluj płótno przed skopiowaniem CSS, aby układ przetrwał realistyczne ograniczenia.', 'Używaj gap do odstępów między elementami zamiast dodawania marginesów do każdego dziecka.', 'Kopiuj wygenerowany CSS jako punkt wyjścia, a następnie dodaj selektory specyficzne dla projektu i media queries.'] },
+  ],
+};

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 как отправную точку, затем добавьте специфичные для проекта селекторы и медиа-запросы.'] },
+  ],
+};