@jjlmoya/utils-developer 1.16.0 → 1.18.0

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

package/src/tool/visualCssGridFlexboxGenerator/interactions.ts

@@ -0,0 +1,45 @@
+import type { LayoutMode } from './logic';
+
+export function setupSpanHandler(
+  canvas: HTMLElement,
+  modeFn: () => LayoutMode,
+  itemPrefix: string,
+  onUpdate: () => void,
+) {
+  canvas.addEventListener('dblclick', (e: MouseEvent) => {
+    const item = (e.target as HTMLElement).closest('.vcg-item') as HTMLElement | null;
+    if (!item || modeFn() !== 'grid') return;
+    const cur = Number(item.dataset.span ?? '1');
+    const next = cur >= 3 ? 1 : cur + 1;
+    item.dataset.span = String(next);
+    const label = item.querySelector('span');
+    if (label) {
+      const num = item.dataset.item;
+      label.textContent = next > 1 ? `${itemPrefix} ${num} (${next}x)` : `${itemPrefix} ${num}`;
+    }
+    onUpdate();
+  });
+}
+
+export function spawnConfetti(x: number, y: number) {
+  const container = document.createElement('div');
+  container.className = 'vcg-confetti-container';
+  const colors = ['#2dd4bf', '#fbbf24', '#6366f1', '#f472b6', '#34d399', '#f97316', '#a78bfa', '#22d3ee', '#fde047'];
+  for (let i = 0; i < 32; i++) {
+    const p = document.createElement('div');
+    p.className = 'vcg-confetti-piece';
+    p.style.left = `${x}px`;
+    p.style.top = `${y}px`;
+    p.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]!;
+    p.style.width = `${5 + Math.random() * 7}px`;
+    p.style.height = `${5 + Math.random() * 7}px`;
+    const a = Math.random() * Math.PI * 2;
+    const d = 40 + Math.random() * 80;
+    p.style.setProperty('--cx', `${Math.cos(a) * d}px`);
+    p.style.setProperty('--cy', `${Math.sin(a) * d - 30}px`);
+    p.style.setProperty('--cr', `${Math.random() * 720 - 360}deg`);
+    container.append(p);
+  }
+  document.body.append(container);
+  setTimeout(() => container.remove(), 900);
+}

package/src/tool/visualCssGridFlexboxGenerator/logic.ts

@@ -0,0 +1,49 @@
+export type LayoutMode = 'flex' | 'grid';
+
+export interface LayoutState {
+  mode: LayoutMode;
+  gap: number;
+  columns: number;
+  width: number;
+  height: number;
+  itemSize: number;
+  justifyContent: string;
+  alignItems: string;
+  flexDirection: string;
+  flexWrap: string;
+  alignContent: string;
+  itemSpans: Record<string, number>;
+}
+
+function buildSpanRules(spans: Record<string, number>): string[] {
+  const lines: string[] = [];
+  for (const [id, span] of Object.entries(spans)) {
+    if (span > 1) {
+      lines.push(`.layout-item[data-item="${id}"] {`, `  grid-column: span ${span};`, '}');
+    }
+  }
+  return lines;
+}
+
+export function buildLayoutCss(state: LayoutState): string {
+  const lines: string[] = ['.layout-playground {'];
+
+  if (state.mode === 'grid') {
+    lines.push('  display: grid;', `  grid-template-columns: repeat(${state.columns}, minmax(0, 1fr));`);
+  } else {
+    lines.push('  display: flex;', `  flex-direction: ${state.flexDirection};`, `  flex-wrap: ${state.flexWrap};`);
+  }
+
+  lines.push(`  gap: ${state.gap}px;`, `  justify-content: ${state.justifyContent};`, `  align-items: ${state.alignItems};`);
+
+  if (state.mode === 'flex' && state.flexWrap !== 'nowrap') {
+    lines.push(`  align-content: ${state.alignContent};`);
+  }
+
+  lines.push(`  width: ${state.width}px;`, `  min-height: ${state.height}px;`, '}', '', '.layout-item {', `  min-width: ${state.itemSize}px;`, `  min-height: ${state.itemSize}px;`, '}');
+
+  if (state.mode === 'grid') {
+    lines.push(...buildSpanRules(state.itemSpans));
+  }
+  return lines.join('\n');
+}

package/src/tool/visualCssGridFlexboxGenerator/presets.ts

@@ -0,0 +1,63 @@
+import type { LayoutMode } from './logic';
+import { getAllItems, clearPresetActive } from './canvas';
+
+type PresetCfg = Partial<{
+  mode: LayoutMode;
+  gap: number; columns: number; width: number; height: number; itemSize: number;
+  justifyContent: string; alignItems: string; flexDirection: string;
+  flexWrap: string; alignContent: string;
+}>;
+
+export const PRESETS: Record<string, PresetCfg> = {
+  navbar: { mode: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: 12, justifyContent: 'space-between', alignItems: 'center', alignContent: 'stretch', width: 760, height: 220, itemSize: 80 },
+  cards: { mode: 'grid', columns: 3, gap: 24, justifyContent: 'center', alignItems: 'center', width: 760, height: 420, itemSize: 100 },
+  hero: { mode: 'flex', flexDirection: 'column', flexWrap: 'nowrap', gap: 20, justifyContent: 'center', alignItems: 'center', alignContent: 'center', width: 600, height: 500, itemSize: 120 },
+  sidebar: { mode: 'grid', columns: 2, gap: 16, justifyContent: 'start', alignItems: 'stretch', width: 760, height: 460, itemSize: 100 },
+  gallery: { mode: 'grid', columns: 4, gap: 12, justifyContent: 'center', alignItems: 'start', width: 760, height: 400, itemSize: 80 },
+};
+
+interface PresetCtrls {
+  gapInput: HTMLInputElement;
+  columnsInput: HTMLInputElement;
+  widthInput: HTMLInputElement;
+  heightInput: HTMLInputElement;
+  itemSizeInput: HTMLInputElement;
+  justifySelect: HTMLSelectElement;
+  alignSelect: HTMLSelectElement;
+  directionSelect: HTMLSelectElement;
+  wrapSelect: HTMLSelectElement;
+  alignContentSelect: HTMLSelectElement;
+}
+
+const KEY_MAP: Record<string, keyof PresetCtrls> = {
+  gap: 'gapInput', columns: 'columnsInput', width: 'widthInput', height: 'heightInput',
+  itemSize: 'itemSizeInput', justifyContent: 'justifySelect', alignItems: 'alignSelect',
+  flexDirection: 'directionSelect', flexWrap: 'wrapSelect', alignContent: 'alignContentSelect',
+};
+
+interface PresetContext {
+  canvas: HTMLElement;
+  ctrls: PresetCtrls;
+  setMode: (m: LayoutMode) => void;
+  update: () => void;
+}
+
+export function applyPreset(name: string, ctx: PresetContext) {
+  const cfg = PRESETS[name];
+  if (!cfg) return;
+
+  clearPresetActive();
+  const btn = document.querySelector(`[data-preset="${name}"]`);
+  if (btn) btn.classList.add('vcg-preset-active');
+
+  getAllItems(ctx.canvas).forEach((item) => { item.dataset.span = '1'; });
+  if (cfg.mode) ctx.setMode(cfg.mode);
+
+  for (const [key, value] of Object.entries(cfg)) {
+    if (key === 'mode') continue;
+    const ck = KEY_MAP[key] as keyof PresetCtrls | undefined;
+    if (ck && ctx.ctrls[ck]) ctx.ctrls[ck].value = String(value);
+  }
+
+  ctx.update();
+}

package/src/tool/visualCssGridFlexboxGenerator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { visualCssGridFlexboxGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await visualCssGridFlexboxGenerator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/visualCssGridFlexboxGenerator/ui.ts

@@ -0,0 +1,58 @@
+export interface VisualCssGridFlexboxGeneratorUI extends Record<string, string> {
+  modeLabel: string;
+  flexMode: string;
+  gridMode: string;
+  canvasLabel: string;
+  addItem: string;
+  removeItem: string;
+  resetLayout: string;
+  gapLabel: string;
+  columnsLabel: string;
+  widthLabel: string;
+  heightLabel: string;
+  justifyLabel: string;
+  alignLabel: string;
+  itemSizeLabel: string;
+  codeTitle: string;
+  copyCode: string;
+  copied: string;
+  dragHint: string;
+  outputLabel: string;
+  justifyStart: string;
+  justifyCenter: string;
+  justifyEnd: string;
+  justifyBetween: string;
+  justifyAround: string;
+  justifyEvenly: string;
+  alignStart: string;
+  alignCenter: string;
+  alignEnd: string;
+  alignStretch: string;
+  alignBaseline: string;
+  itemPrefix: string;
+  directionLabel: string;
+  directionRow: string;
+  directionRowReverse: string;
+  directionColumn: string;
+  directionColumnReverse: string;
+  wrapLabel: string;
+  wrapNoWrap: string;
+  wrapWrap: string;
+  wrapWrapReverse: string;
+  alignContentLabel: string;
+  alignContentStart: string;
+  alignContentCenter: string;
+  alignContentEnd: string;
+  alignContentBetween: string;
+  alignContentAround: string;
+  alignContentEvenly: string;
+  alignContentStretch: string;
+  presetsLabel: string;
+  presetNavbar: string;
+  presetCards: string;
+  presetHero: string;
+  presetSidebar: string;
+  presetGallery: string;
+  shakeLimit: string;
+  spanHint: string;
+}