@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/musicalTypography/i18n/nl.ts

@@ -0,0 +1,179 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'muzikale-typografische-schaal';
+const title = 'Muzikale Typografische Schaal. Modulaire Schaalcalculator';
+const description =
+  'Gratis onlinetool om harmonieuze visuele hiërarchiën te maken met modulaire schalen op basis van muzikale verhoudingen. Genereert kant-en-klare CSS-variabelen voor uw webdesign.';
+
+const faqData = [
+  {
+    question: 'Wat is een typografische modulaire schaal?',
+    answer:
+      'Dit is een methode om lettergroottes te bepalen op basis van een constante wiskundige verhouding. Net als in muziek, waar noten harmonische relaties hebben, creëert de modulaire schaal een evenwichtige en voorspelbare visuele hiërarchi.',
+  },
+  {
+    question: 'Waarom muzikale intervallen voor design gebruiken?',
+    answer:
+      'Muzikale intervallen zijn verhoudingen die het menselijk brein als harmonieus waarneemt. Ze toepassen op tekstgroottes creëert een visuele structuur die juist en professioneel aanvoelt, in plaats van willekeurig gekozen maten.',
+  },
+  {
+    question: 'Wat is de Gulden Snede in typografie?',
+    answer:
+      'Dit is de verhouding 1.618, ook wel de Gulden Sectie genoemd. Het creëert zeer dramatische en elegante schalen waar elke stap in de hiërarchi exponentieel groeit. Perfect voor portfolio- of kunstgerichte websites.',
+  },
+  {
+    question: 'Hoe implementeer ik de schaal in mijn CSS-bestand?',
+    answer:
+      'De tool genereert CSS-variabelen (tokens) in het formaat :root { --step-N: Xrem; }. Kopieer ze naar uw hoofd CSS-bestand en gebruik ze met var(--step-N) om typografische consistentie over uw site te handhaven.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Stel basisgrootte in',
+    text: 'Voer de lettergrootte voor uw lichaamstekst in (meestal 16px), die de fundamentele noot van uw schaal vormt.',
+  },
+  {
+    name: 'Kies het interval',
+    text: 'Selecteer een muzikale verhouding om te bepalen hoeveel ruimte er is tussen verschillende kopniveaus.',
+  },
+  {
+    name: 'Preview de hiërarchi',
+    text: 'Zie in real-time hoe de typografische niveaus zich gedragen om te verifiëren dat de visuele harmonie bij uw project past.',
+  },
+  {
+    name: 'Exporteer de code',
+    text: 'Klik Kopieer CSS-variabelen om het blok gereed voor rechtstreekse invoer in uw workflow te krijgen.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'nl',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Configuratie',
+  labelBaseSize: 'Basisgrootte (px)',
+  hintBaseSize: 'Uw paragraaftekstgrootte (meestal 16px).',
+  labelRatio: 'Muzikale Schaal (Verhouding)',
+  hintRatio: 'Bepaalt hoeveel de grootte bij elke stap toeneemt.',
+  labelCalculated: 'Berekende Waarden',
+  labelPreview: 'Preview',
+  btnCopyCss: 'Kopieer CSS-variabelen',
+  feedbackCopied: 'Variabelen naar klembord gekopieerd!',
+  previewText: 'Muzikale Typografie',
+  previewSubtext: 'Een perfecte harmonische schaal voor uw design.',
+  ratioSecundaMenor: 'Kleine Secunde',
+  ratioSegundaMayor: 'Grote Secunde',
+  ratioTerceraMenor: 'Kleine Terts',
+  ratioTerceraMayor: 'Grote Terts',
+  ratioCuartaPerfecta: 'Perfect Kwartal',
+  ratioCuartaAumentada: 'Verhoogd Kwartal',
+  ratioQuintaPerfecta: 'Perfect Kwintal',
+  ratioProporcionAurea: 'Gulden Snede',
+  ratioSextaMayor: 'Grote Sext',
+  ratioSeptimaMenor: 'Kleine Septiem',
+  ratioSeptimaMayor: 'Grote Septiem',
+  ratioOctava: 'Octaaf',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde Vragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenties',
+  bibliography: [
+    {
+      name: 'Bringhurst, R. The Elements of Typographic Style',
+      url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style',
+    },
+    {
+      name: 'Brown, T. More Meaningful Typography. A List Apart',
+      url: 'https://alistapart.com/article/more-meaningful-typography/',
+    },
+    {
+      name: 'Physics of Music. Musical Intervals and Scales',
+      url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'De onzichtbare harmonie van webdesign',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'De <strong>Muzikale Typografische Schaal</strong> past de wiskunde van muzikale intervallen toe op typografisch design. Net als dat een muziekcompositie wordt beheerst door precieze verhoudingen, profiteert een stevig design van een wiskundige structuur die alle maten met elkaar in verband stelt.',
+    },
+    {
+      type: 'title',
+      text: 'Hoe de modulaire schaal werkt',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'De formule',
+      html: '<p>De progressie is eenvoudig: <code>Size = Base × Ratio<sup>n</sup></code>. Stap 0 is uw basistekst. Stap 1 is een klein bijschrift. Stap 4 of 5 kan uw hoofd H1 zijn. Dezelfde vermenigvuldigingsconstante (de verhouding) garandeert dat alle relaties consistent zijn.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Waarom "Muzikaal"',
+      html: '<p>De Pythagoreeërs ontdekten dat het delen van een snaar in eenvoudige verhoudingen (1:2, 2:3, 3:4) medeklinker klanken voortbrengen. Deze intervallen, octaaf, perfect kwintal en perfect kwartal, zijn precies de typografische verhoudingen. U stelt visuele muziek samen.</p>',
+    },
+    {
+      type: 'title',
+      text: 'De juiste verhouding kiezen',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Voor dichte interfaces (dashboards, tabellen) gebruik kleine verhoudingen zoals <code>1.125</code> of <code>1.2</code>. Voor redactionele of portfoliowers, gebruik meer expressieve verhoudingen zoals <code>1.5</code> of <code>1.618</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Beperk de schaal niet alleen tot <code>font-size</code>. Dezelfde CSS-variabelen werken voor <code>margin</code>, <code>padding</code> en <code>gap</code>. Wanneer witruimte dezelfde wiskundige progressie volgt als de tekst, bereikt het ontwerp een coheesieniveau dat iedereen voelt maar weinigen kunnen uitleggen.',
+    },
+  ],
+};

package/src/tool/musicalTypography/i18n/pl.ts

@@ -0,0 +1,179 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'muzyczna-skala-typograficzna';
+const title = 'Muzyczna Skala Typograficzna. Kalkulator Skali Modularnej';
+const description =
+  'Darmowe narzędzie online do tworzenia harmonijnych hierarchii wizualnych przy użyciu skal modularnych opartych na proporcjach muzycznych. Generuje gotowe zmienne CSS do Twojego projektu webowego.';
+
+const faqData = [
+  {
+    question: 'Co to jest typograficzna skala modularna?',
+    answer:
+      'To metoda określania rozmiarów czcionek na podstawie stałego stosunku matematycznego. Podobnie jak w muzyce, gdzie nuty mają relacje harmoniczne, skala modularna tworzy zbalansowaną i przewidywalną hierarchię wizualną.',
+  },
+  {
+    question: 'Dlaczego używać interwałów muzycznych do projektowania?',
+    answer:
+      'Interwały muzyczne to proporcje, które ludzki mózg postrzega jako harmonijne. Zastosowanie ich do rozmiarów tekstu tworzy strukturę wizualną, która wydaje się poprawna i profesjonalna, zamiast przypadkowych rozmiarów.',
+  },
+  {
+    question: 'Co to jest Złota Proporcja w typografii?',
+    answer:
+      'To proporcja 1.618, znana jako Złota Sekcja. Tworzy bardzo dramatyczne i eleganckie skale, w których każdy krok hierarchii rośnie wykładniczo. Idealny dla portfela lub stron nastawionych na sztukę.',
+  },
+  {
+    question: 'Jak wdrożyć skalę w moim pliku CSS?',
+    answer:
+      'Narzędzie generuje zmienne CSS (tokeny) w formacie :root { --step-N: Xrem; }. Skopiuj je do głównego pliku CSS i używaj ich z var(--step-N), aby zachować konsystencję typograficzną na całej stronie.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Ustaw rozmiar bazowy',
+    text: 'Wprowadź rozmiar czcionki dla tekstu w treści (zwykle 16px), który będzie służyć jako fundamentalna nuta Twojej skali.',
+  },
+  {
+    name: 'Wybierz interwał',
+    text: 'Wybierz proporcję muzyczną, aby określić, ile miejsca jest między różnymi poziomami nagłówków.',
+  },
+  {
+    name: 'Podgląd hierarchii',
+    text: 'Obserwuj, jak zachowują się poziomy typograficzne w czasie rzeczywistym, aby zweryfikować, że wizualna harmonia pasuje do Twojego projektu.',
+  },
+  {
+    name: 'Eksportuj kod',
+    text: 'Kliknij Skopiuj zmienne CSS, aby uzyskać blok gotowy do wklejenia bezpośrednio do Twojego przepływu pracy.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'pl',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Konfiguracja',
+  labelBaseSize: 'Rozmiar Bazowy (px)',
+  hintBaseSize: 'Rozmiar tekstu w akapicie (zwykle 16px).',
+  labelRatio: 'Skala Muzyczna (Stosunek)',
+  hintRatio: 'Określa, jak bardzo rozmiar rośnie na każdym etapie.',
+  labelCalculated: 'Wartości Obliczone',
+  labelPreview: 'Podgląd',
+  btnCopyCss: 'Skopiuj Zmienne CSS',
+  feedbackCopied: 'Zmienne skopiowane do schowka!',
+  previewText: 'Muzyczna Typografia',
+  previewSubtext: 'Idealna harmoniczna skala do Twojego projektowania.',
+  ratioSecundaMenor: 'Sekunda Mała',
+  ratioSegundaMayor: 'Sekunda Duża',
+  ratioTerceraMenor: 'Tercja Mała',
+  ratioTerceraMayor: 'Tercja Duża',
+  ratioCuartaPerfecta: 'Kwarta Czysta',
+  ratioCuartaAumentada: 'Kwarta Powiększona',
+  ratioQuintaPerfecta: 'Kwinta Czysta',
+  ratioProporcionAurea: 'Złota Proporcja',
+  ratioSextaMayor: 'Seksta Duża',
+  ratioSeptimaMenor: 'Septyma Mała',
+  ratioSeptimaMayor: 'Septyma Duża',
+  ratioOctava: 'Oktawa',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Często Zadawane Pytania',
+  faq: faqData,
+  bibliographyTitle: 'Referencje',
+  bibliography: [
+    {
+      name: 'Bringhurst, R. The Elements of Typographic Style',
+      url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style',
+    },
+    {
+      name: 'Brown, T. More Meaningful Typography. A List Apart',
+      url: 'https://alistapart.com/article/more-meaningful-typography/',
+    },
+    {
+      name: 'Physics of Music. Musical Intervals and Scales',
+      url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Niewidzialna harmonia projektowania webowego',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '<strong>Muzyczna Skala Typograficzna</strong> stosuje matematykę interwałów muzycznych do projektowania typograficznego. Podobnie jak kompozycja muzyczna jest rządzona dokładnymi proporcjami, solidny design korzysta ze struktury matematycznej, która wiąże wszystkie rozmiary ze sobą.',
+    },
+    {
+      type: 'title',
+      text: 'Jak działa skala modularna',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'Wzór',
+      html: '<p>Progresja jest prosta: <code>Size = Base × Ratio<sup>n</sup></code>. Krok 0 to Twój tekst bazowy. Krok 1 to mały podtytuł. Krok 4 lub 5 może być Twoim głównym H1. Ta sama stała mnożenia (stosunek) zapewnia, że wszystkie relacje są spójne.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Dlaczego "Muzyczna"',
+      html: '<p>Pitagorejczycy odkryli, że podział struny na proste proporcje (1:2, 2:3, 3:4) wytwarzał spółgłoski. Te interwały, oktawa, kwinta czysta i kwarta czysta, to dokładnie typograficzne stosunki. Komponujesz wizualną muzykę.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Wybór właściwego stosunku',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'W gęstych interfejsach (pulpity nawigacyjne, tabele) używaj małych stosunków, takich jak <code>1.125</code> lub <code>1.2</code>. W przypadku redakcyjnych lub portfelowych stron internetowych używaj bardziej ekspresywnych stosunków, takich jak <code>1.5</code> lub <code>1.618</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Nie ograniczaj skali tylko do <code>font-size</code>. Te same zmienne CSS działają dla <code>margin</code>, <code>padding</code> i <code>gap</code>. Kiedy białe miejsce podąża za tą samą progresją matematyczną co tekst, design osiąga poziom koherencji, który wszyscy czują, ale niewielu potrafi wyjaśnić.',
+    },
+  ],
+};

package/src/tool/musicalTypography/i18n/pt.ts

@@ -0,0 +1,101 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'escala-tipografica-musical';
+const title = 'Escala Tipográfica Musical. Calculadora de Escala Modular';
+const description =
+  'Ferramenta online gratuita para criar hierarquias visuais harmoniosas usando escalas modulares baseadas em proporções musicais. Gera variáveis CSS prontas para usar no seu design web.';
+
+const faqData = [
+  { question: 'O que é uma escala tipográfica modular?', answer: 'É um método para determinar tamanhos de fonte com base em uma proporção matemática constante. Assim como na música, onde as notas têm relações harmônicas, a escala modular cria uma hierarquia visual equilibrada e previsível.' },
+  { question: 'Por que usar intervalos musicais para design?', answer: 'Intervalos musicais são proporções que o cérebro humano percebe como harmoniosas. Aplicá-los a tamanhos de texto cria uma estrutura visual que parece correta e profissional, em vez de escolher tamanhos aleatoriamente.' },
+  { question: 'Qual é a Razão Dourada em tipografia?', answer: 'É a proporção 1.618, conhecida como a Seção Dourada. Ela cria escalas muito dramáticas e elegantes, onde cada passo da hierarquia cresce exponencialmente. Perfeita para portfólios ou sites focados em arte.' },
+  { question: 'Como implemento a escala no meu arquivo CSS?', answer: 'A ferramenta gera variáveis CSS (tokens) no formato :root { --step-N: Xrem; }. Copie-as para seu arquivo CSS principal e use-as com var(--step-N) para manter consistência tipográfica em seu site.' },
+];
+
+const howToData = [
+  { name: 'Defina o tamanho base', text: 'Digite o tamanho da fonte para seu texto de corpo (geralmente 16px), que servirá como nota fundamental de sua escala.' },
+  { name: 'Escolha o intervalo', text: 'Selecione uma proporção musical para determinar quanto espaço existe entre diferentes níveis de título.' },
+  { name: 'Visualize a hierarquia', text: 'Veja em tempo real como os níveis tipográficos se comportam para verificar se a harmonia visual se ajusta ao seu projeto.' },
+  { name: 'Exporte o código', text: 'Clique em Copiar Variáveis CSS para obter o bloco pronto para colar diretamente em seu fluxo de trabalho.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({ '@type': 'HowToStep', position: i + 1, name: step.name, text: step.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'pt',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Configuração',
+  labelBaseSize: 'Tamanho Base (px)',
+  hintBaseSize: 'Seu tamanho de texto de parágrafo (geralmente 16px).',
+  labelRatio: 'Escala Musical (Razão)',
+  hintRatio: 'Determina quanto o tamanho cresce em cada etapa.',
+  labelCalculated: 'Valores Calculados',
+  labelPreview: 'Visualizar',
+  btnCopyCss: 'Copiar Variáveis CSS',
+  feedbackCopied: 'Variáveis copiadas para a área de transferência!',
+  previewText: 'Tipografia Musical',
+  previewSubtext: 'Uma escala harmônica perfeita para seu design.',
+  ratioSecundaMenor: 'Segunda Menor',
+  ratioSegundaMayor: 'Segunda Maior',
+  ratioTerceraMenor: 'Terça Menor',
+  ratioTerceraMayor: 'Terça Maior',
+  ratioCuartaPerfecta: 'Quarta Perfeita',
+  ratioCuartaAumentada: 'Quarta Aumentada',
+  ratioQuintaPerfecta: 'Quinta Perfeita',
+  ratioProporcionAurea: 'Razão Dourada',
+  ratioSextaMayor: 'Sexta Maior',
+  ratioSeptimaMenor: 'Sétima Menor',
+  ratioSeptimaMayor: 'Sétima Maior',
+  ratioOctava: 'Oitava',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  bibliographyTitle: 'Referências',
+  bibliography: [
+    { name: 'Bringhurst, R. The Elements of Typographic Style', url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style' },
+    { name: 'Brown, T. More Meaningful Typography. A List Apart', url: 'https://alistapart.com/article/more-meaningful-typography/' },
+    { name: 'Physics of Music. Musical Intervals and Scales', url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'A Harmonia Invisível do Web Design', level: 2 },
+    { type: 'paragraph', html: 'A <strong>Escala Tipográfica Musical</strong> aplica a matemática de intervalos musicais ao design tipográfico. Assim como uma composição musical é regida por proporções precisas, um design sólido se beneficia de uma estrutura matemática que relaciona todos os tamanhos.' },
+    { type: 'title', text: 'Como a escala modular funciona', level: 3 },
+    { type: 'grid', columns: 2 },
+    { type: 'card', title: 'A fórmula', html: '<p>A progressão é simples: <code>Size = Base × Ratio<sup>n</sup></code>. Etapa 0 é seu texto base. Etapa 1 é um pequeno subtítulo. Etapa 4 ou 5 pode ser seu H1 principal. A mesma constante multiplicadora (a razão) garante que todas as relações sejam consistentes.</p>' },
+    { type: 'card', title: 'Por que "Musical"', html: '<p>Os pitagóricos descobriram que dividir uma corda em proporções simples (1:2, 2:3, 3:4) produz sons consonantes. Esses intervalos, oitava, quinta perfeita e quarta perfeita, são exatamente as razões tipográficas. Você está compondo música visual.</p>' },
+    { type: 'title', text: 'Escolhendo a razão certa', level: 3 },
+    { type: 'tip', html: 'Para interfaces densas (painéis, tabelas) use razões pequenas como <code>1.125</code> ou <code>1.2</code>. Para sites editoriais ou de portfólio, use razões mais expressivas como <code>1.5</code> ou <code>1.618</code>.' },
+    { type: 'paragraph', html: 'Não limite a escala apenas a <code>font-size</code>. As mesmas variáveis CSS funcionam para <code>margin</code>, <code>padding</code> e <code>gap</code>. Quando o espaço em branco segue a mesma progressão matemática que o texto, o design atinge um nível de coesão que todos sentem mas poucos conseguem explicar.' },
+  ],
+};

package/src/tool/musicalTypography/i18n/ru.ts

@@ -0,0 +1,47 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'muzykalnaya-tipograficheskaya-shkala';
+const title = 'Музыкальная Типографическая Шкала. Калькулятор Модульной Шкалы';
+const description = 'Бесплатный онлайн-инструмент для создания гармоничных визуальных иерархий с использованием модульных шкал на основе музыкальных пропорций. Генерирует готовые CSS-переменные для вашего веб-дизайна.';
+
+const faqData = [
+  { question: 'Что такое типографическая модульная шкала?', answer: 'Это метод определения размеров шрифтов на основе постоянного математического соотношения. Подобно музыке, где ноты имеют гармонические отношения, модульная шкала создаёт сбалансированную и предсказуемую визуальную иерархию.' },
+  { question: 'Почему использовать музыкальные интервалы для дизайна?', answer: 'Музыкальные интервалы — это пропорции, которые человеческий мозг воспринимает как гармоничные. Применение их к размерам текста создаёт визуальную структуру, которая ощущается правильной и профессиональной, а не случайно выбранной.' },
+  { question: 'Что такое Золотое Сечение в типографии?', answer: 'Это пропорция 1.618, известная как Золотое Сечение. Она создаёт очень драматичные и элегантные шкалы, где каждый шаг иерархии растёт экспоненциально. Идеально для портфолио или сайтов, ориентированных на искусство.' },
+  { question: 'Как я могу применить шкалу в своём файле CSS?', answer: 'Инструмент генерирует CSS-переменные (токены) в формате :root { --step-N: Xrem; }. Скопируйте их в свой основной CSS-файл и используйте с var(--step-N), чтобы сохранить типографическую согласованность на всём сайте.' },
+];
+
+const howToData = [
+  { name: 'Установите базовый размер', text: 'Введите размер шрифта для текста вашего основного текста (обычно 16px), который будет служить основной нотой вашей шкалы.' },
+  { name: 'Выберите интервал', text: 'Выберите музыкальную пропорцию, чтобы определить, сколько пространства находится между разными уровнями заголовков.' },
+  { name: 'Предпросмотр иерархии', text: 'Смотрите в реальном времени, как ведут себя типографические уровни, чтобы проверить, соответствует ли визуальная гармония вашему проекту.' },
+  { name: 'Экспортируйте код', text: 'Нажмите Копировать CSS-переменные, чтобы получить блок, готовый для прямой вставки в ваш рабочий процесс.' },
+];
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqData.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowToThing> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howToData.map((step, i) => ({ '@type': 'HowToStep', position: i + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DesignApplication', operatingSystem: 'All', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' }, inLanguage: 'ru' };
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Конфигурация', labelBaseSize: 'Базовый Размер (px)', hintBaseSize: 'Размер вашего текста в параграфе (обычно 16px).', labelRatio: 'Музыкальная Шкала (Соотношение)', hintRatio: 'Определяет, насколько размер растёт на каждом шаге.', labelCalculated: 'Вычисленные Значения', labelPreview: 'Предпросмотр', btnCopyCss: 'Копировать CSS-Переменные', feedbackCopied: 'Переменные скопированы в буфер обмена!', previewText: 'Музыкальная Типография', previewSubtext: 'Идеальная гармоничная шкала для вашего дизайна.', ratioSecundaMenor: 'Малая Секунда', ratioSegundaMayor: 'Большая Секунда', ratioTerceraMenor: 'Малая Терция', ratioTerceraMayor: 'Большая Терция', ratioCuartaPerfecta: 'Чистая Кварта', ratioCuartaAumentada: 'Увеличенная Кварта', ratioQuintaPerfecta: 'Чистая Квинта', ratioProporcionAurea: 'Золотое Сечение', ratioSextaMayor: 'Большая Секста', ratioSeptimaMenor: 'Малая Септима', ratioSeptimaMayor: 'Большая Септима', ratioOctava: 'Октава',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug, title, description, ui, faqTitle: 'Часто Задаваемые Вопросы', faq: faqData, bibliographyTitle: 'Ссылки', bibliography: [
+    { name: 'Bringhurst, R. The Elements of Typographic Style', url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style' },
+    { name: 'Brown, T. More Meaningful Typography. A List Apart', url: 'https://alistapart.com/article/more-meaningful-typography/' },
+    { name: 'Physics of Music. Musical Intervals and Scales', url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes' },
+  ], howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [
+    { type: 'title', text: 'Невидимая гармония веб-дизайна', level: 2 },
+    { type: 'paragraph', html: '<strong>Музыкальная Типографическая Шкала</strong> применяет математику музыкальных интервалов к типографическому дизайну. Подобно тому, как музыкальная композиция управляется точными пропорциями, хороший дизайн выигрывает от математической структуры, которая связывает все размеры вместе.' },
+    { type: 'title', text: 'Как работает модульная шкала', level: 3 },
+    { type: 'grid', columns: 2 },
+    { type: 'card', title: 'Формула', html: '<p>Прогрессия простая: <code>Size = Base × Ratio<sup>n</sup></code>. Шаг 0 — это ваш базовый текст. Шаг 1 — маленький подзаголовок. Шаг 4 или 5 может быть вашим главным H1. Одна и та же постоянная умножения (соотношение) гарантирует, что все отношения согласованы.</p>' },
+    { type: 'card', title: 'Почему "Музыкальная"', html: '<p>Пифагорейцы открыли, что деление струны на простые пропорции (1:2, 2:3, 3:4) производит созвучные звуки. Эти интервалы, октава, чистая квинта и чистая кварта, — это ровно типографические соотношения. Вы сочиняете визуальную музыку.</p>' },
+    { type: 'title', text: 'Выбор правильного соотношения', level: 3 },
+    { type: 'tip', html: 'Для плотных интерфейсов (приборные панели, таблицы) используйте малые соотношения, такие как <code>1.125</code> или <code>1.2</code>. Для редакционных или портфельных сайтов используйте более выразительные соотношения, такие как <code>1.5</code> или <code>1.618</code>.' },
+    { type: 'paragraph', html: 'Не ограничивайте шкалу только <code>font-size</code>. Те же CSS-переменные работают для <code>margin</code>, <code>padding</code> и <code>gap</code>. Когда белое пространство следует той же математической прогрессии, что и текст, дизайн достигает уровня связности, который все ощущают, но мало кто может объяснить.' },
+  ],
+};

package/src/tool/musicalTypography/i18n/sv.ts

@@ -0,0 +1,29 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'musikal-typografi-skal';
+const title = 'Musikal Typografisk Skala. Modulär Skalakalkylator';
+const description = 'Gratis onlineverktyg för att skapa harmoniska visuella hierarkier med modulära skalor baserade på musikaliska proportioner. Genererar redo-att-använda CSS-variabler för din webdesign.';
+
+const faqData = [
+  { question: 'Vad är en typografisk modulär skala?', answer: 'Det är en metod för att bestämma teckenstorlekar baserat på ett konstant matematiskt förhållande. Precis som i musik, där noter har harmoniska relationer, skapar den modulära skalan en balanserad och förutsebar visuell hierarki.' },
+  { question: 'Varför använda musikaliska intervaller för design?', answer: 'Musikaliska intervaller är proportioner som den mänskliga hjärnan uppfattar som harmoniska. Att tillämpa dem på textstorlekar skapar en visuell struktur som känns korrekt och professionell, snarare än godtyckligt valda storlekar.' },
+  { question: 'Vad är det gyllene snittet i typografi?', answer: 'Det är proportionen 1.618, känd som den gyllene sektionen. Det skapar mycket dramatiska och eleganta skalor där varje steg i hierarkin växer exponentiellt. Perfekt för portfölj- eller konstfokuserade webbplatser.' },
+  { question: 'Hur implementerar jag skalan i min CSS-fil?', answer: 'Verktyget genererar CSS-variabler (tokens) i formatet :root { --step-N: Xrem; }. Kopiera dem till din huvudsakliga CSS-fil och använd dem med var(--step-N) för att bibehålla typografisk konsistens på din webbplats.' },
+];
+
+const howToData = [
+  { name: 'Ställ in basstorlek', text: 'Ange teckenstorleken för din brödtext (vanligtvis 16px) som kommer att fungera som grundnoten i din skala.' },
+  { name: 'Välj intervall', text: 'Välj en musikalisk proportion för att bestämma hur mycket utrymme det finns mellan olika rubriknivåer.' },
+  { name: 'Förhandsgranska hierarkin', text: 'Titta i realtid på hur de typografiska nivåerna beter sig för att verifiera att den visuella harmonin passar ditt projekt.' },
+  { name: 'Exportera koden', text: 'Klicka Kopiera CSS-variabler för att få blocket klart att klistra in direkt i ditt arbetsflöde.' },
+];
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqData.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowToThing> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howToData.map((step, i) => ({ '@type': 'HowToStep', position: i + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DesignApplication', operatingSystem: 'All', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' }, inLanguage: 'sv' };
+
+const ui: MusicalTypographyUI = { labelConfig: 'Konfiguration', labelBaseSize: 'Basstorlek (px)', hintBaseSize: 'Din styckestextstorlek (vanligtvis 16px).', labelRatio: 'Musikal Skala (Förhållande)', hintRatio: 'Bestämmer hur mycket storleken växer vid varje steg.', labelCalculated: 'Beräknade Värden', labelPreview: 'Förhandsvisning', btnCopyCss: 'Kopiera CSS-Variabler', feedbackCopied: 'Variabler kopierade till urklipp!', previewText: 'Musikal Typografi', previewSubtext: 'En perfekt harmonisk skala för din design.', ratioSecundaMenor: 'Liten Sekund', ratioSegundaMayor: 'Stor Sekund', ratioTerceraMenor: 'Liten Ters', ratioTerceraMayor: 'Stor Ters', ratioCuartaPerfecta: 'Perfekt Fjärdedel', ratioCuartaAumentada: 'Utökad Fjärdedel', ratioQuintaPerfecta: 'Perfekt Kvint', ratioProporcionAurea: 'Gyllene Snitt', ratioSextaMayor: 'Stor Sext', ratioSeptimaMenor: 'Liten Septim', ratioSeptimaMayor: 'Stor Septim', ratioOctava: 'Oktav' };
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = { slug, title, description, ui, faqTitle: 'Vanliga Frågor', faq: faqData, bibliographyTitle: 'Referenser', bibliography: [{ name: 'Bringhurst, R. The Elements of Typographic Style', url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style' }, { name: 'Brown, T. More Meaningful Typography. A List Apart', url: 'https://alistapart.com/article/more-meaningful-typography/' }, { name: 'Physics of Music. Musical Intervals and Scales', url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes' }], howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: 'Den osynliga harmonin inom webdesign', level: 2 }, { type: 'paragraph', html: 'Den <strong>Musikala Typografiska Skalan</strong> tillämpar matematiken för musikaliska intervaller på typografisk design. Precis som en musikkomposition styrs av exakta proportioner, gynnas en solid design av en matematisk struktur som relaterar alla storlekar till varandra.' }, { type: 'title', text: 'Hur den modulära skalan fungerar', level: 3 }, { type: 'grid', columns: 2 }, { type: 'card', title: 'Formeln', html: '<p>Progressionen är enkel: <code>Size = Base × Ratio<sup>n</sup></code>. Steg 0 är din bastex. Steg 1 är en liten undertext. Steg 4 eller 5 kan vara din huvudsakliga H1. Samma multiplikationskonstant (förhållandet) säkerställer att alla relationer är konsekventa.</p>' }, { type: 'card', title: 'Varför "Musikal"', html: '<p>Pythagoreerna upptäckte att delning av en sträng i enkla proportioner (1:2, 2:3, 3:4) producerade konsonanta ljud. Dessa intervaller, oktav, perfekt kvint och perfekt fjärdedel, är exakt de typografiska proportionerna. Du komponerar visuell musik.</p>' }, { type: 'title', text: 'Att välja rätt förhållande', level: 3 }, { type: 'tip', html: 'För täta gränssnitt (instrumentpaneler, tabeller) använd små förhållanden som <code>1.125</code> eller <code>1.2</code>. För redaktionella eller portföljwebbplatser, använd mer uttrycksfulla förhållanden som <code>1.5</code> eller <code>1.618</code>.' }, { type: 'paragraph', html: 'Begränsa inte skalan till bara <code>font-size</code>. Samma CSS-variabler fungerar för <code>margin</code>, <code>padding</code> och <code>gap</code>. När tomt utrymme följer samma matematiska progression som texten, uppnår designen en nivå av sammanhållning som alla känner men få kan förklara.' }] };

package/src/tool/musicalTypography/i18n/tr.ts

@@ -0,0 +1,29 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'muziksal-tipografi-olcegi';
+const title = 'Müziksel Tipografi Ölçeği. Modüler Ölçek Hesaplayıcısı';
+const description = 'Müziksel oranlarına dayalı modüler ölçekler kullanarak uyumlu görsel hiyerarşiler oluşturmak için ücretsiz çevrimiçi araç. Web tasarımınız için kullanıma hazır CSS değişkenleri oluşturur.';
+
+const faqData = [
+  { question: 'Tipografik modüler ölçek nedir?', answer: 'Sabit bir matematiksel orana dayalı olarak yazı tipi boyutlarını belirleme yöntemidir. Müzikte notaların uyumlu ilişkileri olduğu gibi, modüler ölçek dengeli ve öngörülebilir bir görsel hiyerarşi oluşturur.' },
+  { question: 'Tasarımda neden müzik intervallerini kullanmalı?', answer: 'Müzik aralıkları, insan beyninin uyumlu olarak algıladığı oranlarıdır. Bunları metin boyutlarına uygulamak, rastgele seçilen boyutlar yerine doğru ve profesyonel hissettiren bir görsel yapı oluşturur.' },
+  { question: 'Tipografide Altın Oran nedir?', answer: '1.618 oranıdır, Altın Bölüm olarak bilinir. Hiyerarşideki her adım üstel olarak büyüyen çok dramatik ve zarif ölçekler oluşturur. Portföy veya sanat odaklı web siteleri için mükemmeldir.' },
+  { question: 'CSS dosyamda ölçeği nasıl uygularım?', answer: 'Araç, :root { --step-N: Xrem; } biçiminde CSS değişkenleri (tokens) oluşturur. Bunları ana CSS dosyanıza kopyalayın ve web sitenizde tipografik tutarlılığı sağlamak için var(--step-N) ile kullanın.' },
+];
+
+const howToData = [
+  { name: 'Temel boyutu ayarlayın', text: 'Gövde metninizin yazı tipi boyutunu (genellikle 16px) girin, bu sizin ölçeğinizin temel notası olacak.' },
+  { name: 'Aralığı seçin', text: 'Farklı başlık seviyeleri arasında ne kadar alan olduğunu belirlemek için müzik oranı seçin.' },
+  { name: 'Hiyerarşiyi önizleyin', text: 'Görsel harmoni tasarımınıza uygun olduğunu doğrulamak için tipografik seviyelerin gerçek zamanlı nasıl davrandığını izleyin.' },
+  { name: 'Kodu dışa aktarın', text: 'Iş akışınıza doğrudan yapıştırmaya hazır blok almak için CSS Değişkenlerini Kopyala\'ya tıklayın.' },
+];
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqData.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowToThing> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howToData.map((step, i) => ({ '@type': 'HowToStep', position: i + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DesignApplication', operatingSystem: 'All', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' }, inLanguage: 'tr' };
+
+const ui: MusicalTypographyUI = { labelConfig: 'Yapılandırma', labelBaseSize: 'Temel Boyut (px)', hintBaseSize: 'Paragraf metin boyutunuz (genellikle 16px).', labelRatio: 'Müzik Ölçeği (Oran)', hintRatio: 'Boyutun her adımda ne kadar büyüdüğünü belirler.', labelCalculated: 'Hesaplanan Değerler', labelPreview: 'Önizleme', btnCopyCss: 'CSS Değişkenlerini Kopyala', feedbackCopied: 'Değişkenler panoya kopyalandı!', previewText: 'Müziksel Tipografi', previewSubtext: 'Tasarımınız için mükemmel uyumlu ölçek.', ratioSecundaMenor: 'Küçük İkinci', ratioSegundaMayor: 'Büyük İkinci', ratioTerceraMenor: 'Küçük Üçüncü', ratioTerceraMayor: 'Büyük Üçüncü', ratioCuartaPerfecta: 'Mükemmel Dördüncü', ratioCuartaAumentada: 'Arttırılmış Dördüncü', ratioQuintaPerfecta: 'Mükemmel Beşinci', ratioProporcionAurea: 'Altın Oran', ratioSextaMayor: 'Büyük Altıncı', ratioSeptimaMenor: 'Küçük Yedinci', ratioSeptimaMayor: 'Büyük Yedinci', ratioOctava: 'Sekizinci' };
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = { slug, title, description, ui, faqTitle: 'Sık Sorulan Sorular', faq: faqData, bibliographyTitle: 'Referanslar', bibliography: [{ name: 'Bringhurst, R. The Elements of Typographic Style', url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style' }, { name: 'Brown, T. More Meaningful Typography. A List Apart', url: 'https://alistapart.com/article/more-meaningful-typography/' }, { name: 'Physics of Music. Musical Intervals and Scales', url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes' }], howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: 'Web Tasarımının Görünmez Uyumu', level: 2 }, { type: 'paragraph', html: '<strong>Müziksel Tipografi Ölçeği</strong> müzik aralıklarının matematiğini tipografik tasarıma uygular. Müzik bestesi kesin oranlarla yönetildiği gibi, iyi tasarım tüm boyutları birbiriyle ilişkilendiren matematiksel bir yapıdan yararlanır.' }, { type: 'title', text: 'Modüler ölçek nasıl çalışır', level: 3 }, { type: 'grid', columns: 2 }, { type: 'card', title: 'Formül', html: '<p>İlerleme basittir: <code>Size = Base × Ratio<sup>n</sup></code>. Adım 0, temel metniniz. Adım 1, küçük bir altyazı. Adım 4 veya 5, ana H1\'iniz olabilir. Aynı çarpma sabiti (oran) tüm ilişkilerin tutarlı olmasını sağlar.</p>' }, { type: 'card', title: 'Neden "Müziksel"', html: '<p>Pythagorası, bir dizeyi basit oranlara (1:2, 2:3, 3:4) böldüğünde uyumlu sesler üretileceğini keşfetti. Bu aralıklar, sekizinci, mükemmel beşinci ve mükemmel dördüncü, tam olarak tipografik oranlarıdır. Görsel müzik besteliyorsunuz.</p>' }, { type: 'title', text: 'Doğru oranı seçme', level: 3 }, { type: 'tip', html: 'Yoğun arayüzler (panolar, tablolar) için <code>1.125</code> veya <code>1.2</code> gibi küçük oranlar kullanın. Editoryal veya portföy siteleri için <code>1.5</code> veya <code>1.618</code> gibi daha anlatımlı oranlar kullanın.' }, { type: 'paragraph', html: 'Ölçeği sadece <code>font-size</code> ile sınırlamayın. Aynı CSS değişkenleri <code>margin</code>, <code>padding</code> ve <code>gap</code> için çalışır. Boş alan, metin ile aynı matematiksel ilerlemeyi takip ettiğinde, tasarım herkesin hissettiği ancak çok azının açıklayabileceği bir tutarlılık düzeyine ulaşır.' }] };

package/src/tool/musicalTypography/i18n/zh.ts

@@ -0,0 +1,30 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'musical-typography';
+const title = '音乐性排版秤。模块化秤计算器';
+const description = '免费在线工具，使用基于音乐比例的模块化秤创建和谐的视觉层级。为您的网页设计生成现成的CSS变量。';
+
+const faqData = [
+  { question: '什么是排版模块化秤?', answer: '这是一种基于恒定数学比例来确定字体大小的方法。就像音乐中音符有和谐关系一样，模块化秤创建了平衡且可预测的视觉层级。' },
+  { question: '为什么在设计中使用音乐间隔?', answer: '音乐间隔是人脑感知为和谐的比例。将它们应用于文本大小会创建看起来正确和专业的视觉结构，而不是随意选择的大小。' },
+  { question: '排版中的黄金比例是什么?', answer: '这是比例1.618，称为黄金分割。它创建非常戏剧性和优雅的秤，其中层级中的每一步呈指数增长。非常适合投资组合或以艺术为中心的网站。' },
+  { question: '我如何在CSS文件中实施秤?', answer: '该工具以:root { --step-N: Xrem; }格式生成CSS变量（token）。将它们复制到主CSS文件中，并使用var(--step-N)来维护您网站上的排版一致性。' },
+];
+
+const howToData = [
+  { name: '设置基础大小', text: '输入正文的字体大小（通常为16px），它将作为您秤的基本音符。' },
+  { name: '选择间隔', text: '选择一个音乐比例来确定不同标题级别之间有多少空间。' },
+  { name: '预览层级', text: '实时查看排版级别的表现方式，以验证视觉和谐是否适合您的项目。' },
+  { name: '导出代码', text: '单击复制CSS变量获取准备好直接粘贴到工作流的块。' },
+];
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqData.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowToThing> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howToData.map((step, i) => ({ '@type': 'HowToStep', position: i + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DesignApplication', operatingSystem: 'All', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' }, inLanguage: 'zh' };
+
+const ui: MusicalTypographyUI = { labelConfig: '配置', labelBaseSize: '基础大小 (px)', hintBaseSize: '您的段落文本大小（通常16px）。', labelRatio: '音乐秤（比例）', hintRatio: '确定每个步骤的大小增长程度。', labelCalculated: '计算值', labelPreview: '预览', btnCopyCss: '复制CSS变量', feedbackCopied: '变量已复制到剪贴板！', previewText: '音乐排版', previewSubtext: '为您的设计提供完美的和谐秤。', ratioSecundaMenor: '小二度', ratioSegundaMayor: '大二度', ratioTerceraMenor: '小三度', ratioTerceraMayor: '大三度', ratioCuartaPerfecta: '完全四度', ratioCuartaAumentada: '增大四度', ratioQuintaPerfecta: '完全五度', ratioProporcionAurea: '黄金比例', ratioSextaMayor: '大六度', ratioSeptimaMenor: '小七度', ratioSeptimaMayor: '大七度', ratioOctava: '八度' };
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = { slug, title, description, ui, faqTitle: '常见问题', faq: faqData, bibliographyTitle: '参考', bibliography: [{ name: 'Bringhurst, R. The Elements of Typographic Style', url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style' }, { name: 'Brown, T. More Meaningful Typography. A List Apart', url: 'https://alistapart.com/article/more-meaningful-typography/' }, { name: 'Physics of Music. Musical Intervals and Scales', url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes' }], howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: '网页设计中看不见的和谐', level: 2 }, { type: 'paragraph', html: '<strong>音乐排版秤</strong>将音乐间隔的数学应用于排版设计。就像音乐作品受精确比例支配一样，一个好的设计受益于一个将所有大小联系起来的数学结构。' }, { type: 'title', text: '模块化秤如何工作', level: 3 }, { type: 'grid', columns: 2 }, { type: 'card', title: '公式', html: '<p>进度很简单：<code>Size = Base × Ratio<sup>n</sup></code>。第0步是您的基础文本。第1步是小字幕。第4或5步可能是您的主H1。相同的乘法常数（比例）确保所有关系一致。</p>' }, { type: 'card', title: '为什么是"音乐的"', html: '<p>毕达哥拉斯发现，将弦分成简单比例（1:2、2:3、3:4）会产生辅音。这些间隔、八度、完全五度和完全四度，正是排版比例。您正在组成视觉音乐。</p>' }, { type: 'title', text: '选择正确的比例', level: 3 }, { type: 'tip', html: '对于密集界面（仪表板、表格），使用小比例（如<code>1.125</code>或<code>1.2</code>）。对于编辑或投资组合网站，使用更富表现力的比例（如<code>1.5</code>或<code>1.618</code>）。' }, { type: 'paragraph', html: '不要将秤限制在仅<code>font-size</code>。相同的CSS变量适用于<code>margin</code>、<code>padding</code>和<code>gap</code>。当空白遵循与文本相同的数学进度时，设计达到所有人都能感受但很少有人能解释的凝聚力。' }] };
+