@jjlmoya/utils-developer 1.17.0 → 1.20.0

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

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

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

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

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