@jjlmoya/utils-audiovisual 1.7.0 → 1.9.0

package/src/tests/slug_uniqueness.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import type { ToolLocaleContent } from '../types';
+
+const sharingLocales = ['ja', 'ko', 'zh'];
+
+interface ValidateParams {
+  toolId: string;
+  locale: string;
+  content: ToolLocaleContent;
+  enSlug: string;
+  slugs: Map<string, string>;
+}
+
+const validateLocaleSlug = ({
+  toolId,
+  locale,
+  content,
+  enSlug,
+  slugs,
+}: ValidateParams) => {
+  expect(
+    content.slug,
+    `Tool "${toolId}" locale "${locale}" has an invalid slug ("${content.slug}"). Slugs must be transliterated (only a-z, 0-9, and -).`,
+  ).toMatch(/^[a-z0-9-]+$/);
+
+  if (locale === 'en') {
+    return;
+  }
+
+  if (sharingLocales.includes(locale)) {
+    expect(
+      content.slug,
+      `Tool "${toolId}" locale "${locale}" must use the same slug as "en" ("${enSlug}").`,
+    ).toBe(enSlug);
+  } else {
+    expect(
+      content.slug,
+      `Tool "${toolId}" locale "${locale}" has the same slug as "en" ("${enSlug}"). Cada slug tiene que estar en su propia idioma`,
+    ).not.toBe(enSlug);
+
+    if (slugs.has(content.slug)) {
+      const previousLocale = slugs.get(content.slug);
+      expect(
+        false,
+        `Tool "${toolId}" locales "${locale}" and "${previousLocale}" share the same slug ("${content.slug}"). Cada slug tiene que estar en su propia idioma`,
+      ).toBe(true);
+    }
+    slugs.set(content.slug, locale);
+  }
+};
+
+describe('Slug Localization and Uniqueness Validation', () => {
+  ALL_TOOLS.forEach((tool) => {
+    describe(`Tool: ${tool.entry.id}`, () => {
+      it('every locale should have a unique, translated slug', async () => {
+        const slugs = new Map<string, string>();
+        const locales = Object.keys(tool.entry.i18n);
+
+        let enSlug = '';
+        if (locales.includes('en')) {
+          const enLoader = tool.entry.i18n['en' as keyof typeof tool.entry.i18n];
+          const enContent = (await enLoader?.()) as ToolLocaleContent;
+          enSlug = enContent.slug;
+        }
+
+        for (const locale of locales) {
+          const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
+          const content = (await loader?.()) as ToolLocaleContent;
+          validateLocaleSlug({
+            toolId: tool.entry.id,
+            locale,
+            content,
+            enSlug,
+            slugs,
+          });
+        }
+      });
+    });
+  });
+});

package/src/tool/chromaticLens/i18n/de.ts

@@ -0,0 +1,246 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
+
+const slug = 'chromatic-lens-farbpaletten-extraktion-online';
+const title = 'Chromatic Lens: Online Extraktion von Farbpaletten';
+const description = 'Extrahieren Sie kostenlos professionelle Farbpaletten aus jedem Bild. Identifizieren Sie dominante Farben in Ihren Fotos mithilfe mathematischer Algorithmen.';
+
+const ui: ChromaticLensUI = {
+    dropTitle: "Farben analysieren",
+    dropSubtitle: "Ziehen Sie ein Bild hierher, um seine chromatische DNA zu extrahieren.",
+    processingLabel: "Palette wird extrahiert...",
+    paletteTitle: "Extrahierte Palette",
+    copyLabel: "HEX kopieren",
+    copiedLabel: "Kopiert!",
+    colorCountLabel: "Anzahl der Farben",
+    changeImage: "Bild ändern",
+    faqTitle: "Häufig gestellte Fragen zur Farbetraktion",
+    bibliographyTitle: "Ressourcen und technische Dokumentation"
+};
+
+const faq: ChromaticLensLocaleContent['faq'] = [
+    {
+        question: "Wie funktioniert die Farbetraktion?",
+        answer: "Wir verwenden den 'Median Cut' Algorithmus, der Bildpixel basierend auf ihrer Nähe im RGB-Farbraum gruppiert, um die repräsentativsten Töne zu finden.",
+    },
+    {
+        question: "Kann ich Farben in meinen Design-Editor kopieren?",
+        answer: "Ja, durch Klicken auf jede Farbe wird der HEX-Code automatisch in Ihre Zwischenablage kopiert, bereit zum Einfügen in Photoshop, Figma oder CSS.",
+    },
+    {
+        question: "Welche Bildtypen kann ich analysieren?",
+        answer: "Jede JPG-, PNG- oder WebP-Datei. Die Verarbeitung erfolgt lokal, sodass auch große Bilder schnell ohne Netzwerkkosten analysiert werden.",
+    },
+];
+
+const howTo: ChromaticLensLocaleContent['howTo'] = [
+    {
+        name: "Bild hochladen",
+        text: "Laden Sie das Foto hoch, aus dem Sie chromatische Inspiration extrahieren möchten.",
+    },
+    {
+        name: "Präzision anpassen",
+        text: "Wählen Sie aus, wie viele dominante Farben das Tool identifizieren soll (von 3 bis 12).",
+    },
+    {
+        name: "Ergebnis analysieren",
+        text: "Die Palette erscheint sofort mit den entsprechenden Hexadezimal Codes.",
+    },
+    {
+        name: "Kopieren und verwenden",
+        text: "Klicken Sie auf die Töne, um sie zu speichern und in Ihrem Designprojekt anzuwenden.",
+    },
+];
+
+const bibliography: ChromaticLensLocaleContent['bibliography'] = [
+    {
+        name: "Median Cut Algorithm - Wikipedia",
+        url: "https://en.wikipedia.org/wiki/Median_cut",
+    },
+    {
+        name: "Farblehre für Designer",
+        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
+    },
+];
+
+const seo: ChromaticLensLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Intelligente Extraktion von Farbpaletten',
+        items: [
+            'Professioneller Median-Cut-Algorithmus zur Farbanalyse',
+            'Extraktion von 3–12 dominanten Farben aus jedem Bild',
+            'HEX-Codes direkt in die Zwischenablage kopierbar',
+            '100% lokale Verarbeitung – ideal für Kreative'
+        ]
+    },
+    { type: 'title', text: 'Farbetraktion: Wissenschaft und Design', level: 2 },
+    { type: 'paragraph', html: 'Haben Sie sich jemals gefragt, warum ein Filmfoto so harmonisch wirkt? Das ist kein Zufall, sondern angewandte Farblehre. Chromatic Lens ermöglicht es Ihnen, diese Harmonie direkt aus den Pixeln zu extrahieren und in HEX-Codes umzuwandeln, die Sie in Ihren Designprojekten verwenden können.' },
+
+    { type: 'stats', items: [
+        { value: 'Sofort', label: 'Farbanalyse', icon: 'mdi:lightning-bolt' },
+        { value: '100%', label: 'Lokale Privatsphäre', icon: 'mdi:lock' },
+        { value: 'RGB', label: 'Präziser Farbraum', icon: 'mdi:palette' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Der Median Cut Algorithmus erklärt', level: 3 },
+    { type: 'paragraph', html: 'Die intelligente Palettenextraktion ist keine einfache Zufallsauswahl von Pixeln. Sie nutzt den Median-Cut-Algorithmus, eine rekursive Zerlegungstechnik, die eine originalgetreue Darstellung gewährleistet:' },
+    { type: 'list', items: [
+        '<strong>Rekursive Teilung:</strong> Der RGB-\"Farbwürfel\" des Bildes wird rekursiv in kleinere Boxen unterteilt.',
+        '<strong>Volumen-Balance:</strong> Jede Partition sucht nach Gruppen von Pixeln aus dem gleichen Farbraum mit ähnlichen Volumina.',
+        '<strong>Gewichteter Durchschnitt:</strong> Die resultierende Farbe jeder Box ist der Durchschnitt aller darin enthaltenen Pixel.',
+        '<strong>Originalgetreue Darstellung:</strong> Die dominanten Farben spiegeln die reale visuelle Atmosphäre des Bildes wider, nicht nur eine simple Stichprobe.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Kreativer Workflow', html: 'Ideal für Webentwickler, UX/UI-Designer, digitale Künstler und Kreative, die die visuelle Essenz eines Fotos, Films oder einer Vorlage sofort erfassen möchten, um sie in ihren Interfaces, Illustrationen oder Markenpaletten anzuwenden.' },
+
+    { type: 'title', text: 'Anwendungsfälle im digitalen Design', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'UX/UI Designer',
+            description: 'Paletten aus Hero-Images extrahieren, um stimmige Interfaces zu erstellen',
+            icon: 'mdi:palette',
+            points: [
+                'Harmonische Hintergrundfarben',
+                'Buttons und sekundäre Elemente',
+                'Automatisch berechneter Kontrast'
+            ]
+        },
+        {
+            title: 'Webentwickler',
+            description: 'CSS-Stylesheets direkt aus visuellen Referenzen erstellen',
+            icon: 'mdi:code-braces',
+            points: [
+                'HEX direkt in CSS kopieren',
+                'Farbvariablen in SCSS/CSS',
+                'Konsistente Themes ohne vorheriges Design'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Digitale Künstler und Illustratoren',
+            description: 'Chromatische Referenzen aus Filmen, Natur oder Kunst einfangen',
+            icon: 'mdi:brush',
+            points: [
+                'Referenzpaletten aus Meisterwerken',
+                'Cineastische Farbstudien',
+                'Sofortige visuelle Inspiration'
+            ]
+        },
+        {
+            title: 'Branding Spezialisten',
+            description: 'Visuelle Identitäten basierend auf Beispielfotos entwickeln',
+            icon: 'mdi:tag-multiple',
+            points: [
+                'Markenfarben aus Bildern extrahieren',
+                'Professionelle Farb-Guides erstellen',
+                'Visuelle Konsistenz gewährleisten'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Angewandte Farblehre', level: 3 },
+    { type: 'table', headers: ['Farbkonzept', 'Definition', 'Praktische Anwendung'], rows: [
+        ['Farharmonie', 'Farbkombination, die visuell ausgewogen ist', 'Konsistente visuelle Identität im UI'],
+        ['Kontrast', 'Helligkeitsunterschied zwischen Farben', 'Lesbarkeit und visuelle Hierarchie'],
+        ['Sättigung', 'Farbintensität eines Tons', 'Professionalität (niedrig) vs. Energie (hoch)'],
+        ['Farbtemperatur', 'Warme Farben (Rot) vs. kühle Farben (Blau)', 'Emotionspsychologie im Design'],
+        ['Monochromatische Palette', 'Variationen eines einzelnen Tons', 'Eleganz und Minimalismus']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Mathematische Präzision bei der Extraktion – keine ungefähre visuelle Auswahl',
+            con: 'Kaum sichtbare Farben können enthalten sein, wenn sie viele Pixel haben'
+        },
+        {
+            pro: 'Sofortiges Kopieren in die Zwischenablage – perfekte Integration in den Workflow',
+            con: 'Benötigt einen modernen Browser, der mit der Canvas-API kompatibel ist'
+        },
+        {
+            pro: 'Vollständige Privatsphäre – 100% lokale Analyse ohne Datenübermittlung',
+            con: 'Kein Verlauf früherer Analysen gespeichert'
+        },
+        {
+            pro: 'Kompatibel mit jedem digitalen Bildformat',
+            con: 'Endgültige Farben hängen von der Bildkompression und Qualität ab'
+        }
+    ], proTitle: 'Vorteile', conTitle: 'Einschränkungen' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Realistische Farbdarstellung', icon: 'mdi:check-circle-outline', badge: 'Fortgeschrittener Algorithmus', html: 'Im Gegensatz zu Tools, die einfach zufällige Pixel abfragen, verwendet unser System den Median-Cut-Algorithmus, der die gesamte Pixelanzahl jedes Tons gewichtet. So wird sichergestellt, dass die resultierende Palette die visuelle Atmosphäre und Farbpsychologie des Originalbildes originalgetreu widerspiegelt.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Median Cut',
+            definition: 'Farbauswahl-Algorithmus, der den RGB-Raum rekursiv in Boxen unterteilt und so eine gleichmäßige Verteilung gewährleistet. Historisch für GIF- und indizierte Farbtechnologien genutzt.'
+        },
+        {
+            term: 'RGB-Farbraum',
+            definition: 'Farbmodell basierend auf Rot, Grün und Blau. Jede Farbe wird als Kombination dieser drei Werte (0–255) dargestellt. Standard für Bildschirme und Web.'
+        },
+        {
+          term: 'HEX-Code',
+          definition: '6-stellige hexadezimale Notation (#RRGGBB) zur Darstellung von Farben im Web: #FF0000 (Rot), #00FF00 (Grün), #0000FF (Blau). Universell in CSS, Figma und Adobe.'
+        },
+        {
+            term: 'Farbsättigung',
+            definition: 'Intensität oder Reinheit der Farbe. Hohe Sättigung = lebendige Farbe; niedrige Sättigung = gräuliche Farbe. Beeinflusst die emotionale Wahrnehmung.'
+        },
+        {
+            term: 'Farbharmonie',
+            definition: 'Auswahl und Kombination von Farben, die zu einem visuell ansprechenden Ergebnis führen. Kann monochromatisch, komplementär, analog oder triadisch sein.'
+        }
+    ] },
+
+    { type: 'message', title: 'Professionelle Farbanalyse', ariaLabel: 'Technische Informationen zur Farbanalyse', html: 'Chromatic Lens verwandelt manuelle visuelle Analyse in algorithmische Präzision. Es extrahiert nicht nur Farben: Es fängt die emotionale und visuelle Essenz jedes Bildes ein und legt sie als einsatzbereite HEX-Codes direkt in Ihre Zwischenablage. Volle Privatsphäre, keine Limits.' },
+
+    { type: 'title', text: 'Design aus visueller Inspiration', level: 3 },
+    { type: 'paragraph', html: 'Die beste Farbpalette ist diejenige, die die visuelle Absicht Ihrer Referenz einfängt. Chromatic Lens automatisiert den ehemals manuellen Prozess: beobachten, analysieren, notieren. Jetzt ziehen Sie einfach ein Bild und erhalten in Sekunden professionelle HEX-Codes.' }
+];
+
+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) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'de',
+};
+
+export const content: ChromaticLensLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Häufig gestellte Fragen",
+    faq,
+    bibliographyTitle: "Referenzen",
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/chromaticLens/i18n/id.ts

@@ -0,0 +1,246 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
+
+const slug = 'chromatic-lens-ekstraksi-palet-warna-online';
+const title = 'Chromatic Lens: Ekstraksi Palet Warna Online';
+const description = 'Ekstrak palet warna profesional dari gambar apa pun secara gratis. Identifikasi warna dominan dalam foto Anda menggunakan algoritma matematika.';
+
+const ui: ChromaticLensUI = {
+    dropTitle: "Analisis Warna",
+    dropSubtitle: "Seret gambar untuk mengekstrak DNA kromatiknya.",
+    processingLabel: "Mengekstrak palet...",
+    paletteTitle: "Palet yang Diekstrak",
+    copyLabel: "Salin HEX",
+    copiedLabel: "Tersalin!",
+    colorCountLabel: "Jumlah warna",
+    changeImage: "Ganti gambar",
+    faqTitle: "Pertanyaan umum tentang ekstraksi warna",
+    bibliographyTitle: "Sumber daya dan dokumentasi teknis"
+};
+
+const faq: ChromaticLensLocaleContent['faq'] = [
+    {
+        question: "Bagaimana cara kerja ekstraksi warna?",
+        answer: "Kami menggunakan algoritma 'Median Cut', yang mengelompokkan piksel gambar berdasarkan kedekatannya dalam ruang warna RGB untuk menemukan nada yang paling representatif.",
+    },
+    {
+        question: "Dapatkah saya menyalin warna ke editor desain saya?",
+        answer: "Ya, dengan mengeklik setiap warna, kode HEX akan disalin secara otomatis ke papan klip Anda, siap ditempelkan ke Photoshop, Figma, atau CSS.",
+    },
+    {
+        question: "Jenis gambar apa yang bisa saya analisis?",
+        answer: "Semua file JPG, PNG, atau WebP. Pemrosesan dilakukan secara lokal, sehingga gambar besar akan dianalisis dengan cepat tanpa menghabiskan data jaringan.",
+    },
+];
+
+const howTo: ChromaticLensLocaleContent['howTo'] = [
+    {
+        name: "Unggah gambar",
+        text: "Unggah foto yang ingin Anda ambil inspirasi kromatiknya.",
+    },
+    {
+        name: "Sesuaikan presisi",
+        text: "Pilih berapa banyak warna dominan yang ingin diidentifikasi oleh alat ini (dari 3 hingga 12).",
+    },
+    {
+        name: "Analisis hasilnya",
+        text: "Palet akan muncul secara instan dengan kode heksadesimal yang sesuai.",
+    },
+    {
+        name: "Salin dan gunakan",
+        text: "Klik pada nada warna untuk menyimpannya dan menerapkannya pada proyek desain Anda.",
+    },
+];
+
+const bibliography: ChromaticLensLocaleContent['bibliography'] = [
+    {
+        name: "Median Cut Algorithm - Wikipedia",
+        url: "https://en.wikipedia.org/wiki/Median_cut",
+    },
+    {
+        name: "Teori Warna untuk Desainer",
+        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
+    },
+];
+
+const seo: ChromaticLensLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Ekstraksi Palet Warna Cerdas',
+        items: [
+            'Algoritma Median Cut profesional untuk analisis warna',
+            'Ekstrak 3-12 warna dominan dari gambar apa pun',
+            'Kode HEX dapat disalin langsung ke papan klip',
+            'Pemrosesan lokal 100% - ideal untuk kreatif'
+        ]
+    },
+    { type: 'title', text: 'Ekstraksi Palet Warna: Sains dan Desain', level: 2 },
+    { type: 'paragraph', html: 'Pernahkah Anda bertanya-tanya mengapa foto film terasa begitu harmonis? Itu bukan kebetulan; itu adalah teori warna yang sedang beraksi. Chromatic Lens memungkinkan Anda mengekstrak harmoni itu langsung dari piksel, mengubahnya menjadi kode HEX yang dapat digunakan dalam proyek desain Anda.' },
+
+    { type: 'stats', items: [
+        { value: 'Instan', label: 'Analisis Warna', icon: 'mdi:lightning-bolt' },
+        { value: '100%', label: 'Privasi Lokal', icon: 'mdi:lock' },
+        { value: 'RGB', label: 'Ruang Warna Presisi', icon: 'mdi:palette' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Penjelasan Algoritma Median Cut', level: 3 },
+    { type: 'paragraph', html: 'Ekstraksi palet cerdas bukanlah pengambilan sampel piksel acak yang sederhana. Ia menggunakan algoritma Median Cut, teknik partisi rekursif yang memastikan representasi setia:' },
+    { type: 'list', items: [
+        '<strong>Pembagian Rekursif:</strong> \"Kubus warna\" RGB dari gambar dibagi secara rekursif menjadi kotak-kotak yang lebih kecil.',
+        '<strong>Keseimbangan Volume:</strong> Setiap partisi berusaha mengelompokkan piksel dari ruang warna yang sama dengan volume yang serupa.',
+        '<strong>Rata-rata Tertimbang:</strong> Warna yang dihasilkan dari setiap kotak adalah rata-rata dari semua piksel yang dikandungnya.',
+        '<strong>Representasi Setia:</strong> Warna dominan mencerminkan suasana visual nyata dari gambar, bukan sekadar sampel sederhana.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Alur Kerja Kreatif', html: 'Ideal untuk pengembang web, desainer UX/UI, seniman digital, dan kreatif yang ingin menangkap esensi visual foto, film, atau referensi visual secara instan untuk diterapkan dalam antarmuka, ilustrasi, atau palet merek mereka.' },
+
+    { type: 'title', text: 'Kasus Penggunaan dalam Desain Digital', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Desainer UX/UI',
+            description: 'Ekstrak palet dari gambar utama untuk membuat antarmuka yang kohesif',
+            icon: 'mdi:palette',
+            points: [
+                'Warna latar belakang yang harmonis',
+                'Tombol dan elemen sekunder',
+                'Kontras yang dihitung secara otomatis'
+            ]
+        },
+        {
+            title: 'Pengembang Web',
+            description: 'Buat lembar gaya CSS langsung dari referensi visual',
+            icon: 'mdi:code-braces',
+            points: [
+                'Salin HEX langsung ke CSS',
+                'Variabel warna dalam SCSS/CSS',
+                'Tema yang kohesif tanpa desain sebelumnya'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Seniman Digital dan Ilustrator',
+            description: 'Tangkap referensi kromatik dari film, alam, atau seni',
+            icon: 'mdi:brush',
+            points: [
+                'Palet referensi dari mahakarya',
+                'Studi warna sinematik',
+                'Inspirasi visual instan'
+            ]
+        },
+        {
+            title: 'Spesialis Branding',
+            description: 'Kembangkan identitas visual berdasarkan foto panduan',
+            icon: 'mdi:tag-multiple',
+            points: [
+                'Ekstrak warna merek dari gambar',
+                'Buat panduan kromatik profesional',
+                'Pastikan konsistensi visual'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Teori Warna Terapan', level: 3 },
+    { type: 'table', headers: ['Konsep Warna', 'Definisi', 'Aplikasi Praktis'], rows: [
+        ['Harmoni Kromatik', 'Kombinasi warna yang seimbang secara visual', 'Identitas visual yang kohesif dalam UI'],
+        ['Kontras', 'Perbedaan kecerahan antar warna', 'Keterbacaan dan hierarki visual'],
+        ['Saturasi', 'Intensitas warna dari sebuah nada', 'Profesionalisme (rendah) vs Energi (tinggi)'],
+        ['Temperatur Warna', 'Warna hangat (merah) vs warna dingin (biru)', 'Psikologi emosional desain'],
+        ['Palet Monokromatik', 'Variasi dari satu nada warna', 'Elegan dan minimalis']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Presisi matematis dalam ekstraksi - bukan pilihan visual perkiraan',
+            con: 'Warna yang nyaris tidak terlihat dapat disertakan jika memiliki banyak piksel'
+        },
+        {
+            pro: 'Salin instan ke papan klip - integrasi sempurna dengan alur kerja',
+            con: 'Memerlukan browser modern yang kompatibel dengan Canvas API'
+        },
+        {
+            pro: 'Privasi total - analisis lokal 100% tanpa pengiriman data',
+            con: 'Tidak ada riwayat analisis sebelumnya yang disimpan'
+        },
+        {
+            pro: 'Kompatibel dengan semua format gambar digital',
+            con: 'Warna akhir bergantung pada kompresi dan kualitas gambar'
+        }
+    ], proTitle: 'Keunggulan', conTitle: 'Batasan' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Representasi Warna Realistis', icon: 'mdi:check-circle-outline', badge: 'Algoritma Canggih', html: 'Berbeda dengan alat yang hanya mengambil sampel piksel acak, sistem kami menggunakan algoritma Median Cut yang menimbang seluruh jumlah piksel dari setiap nada, memastikan palet yang dihasilkan secara setia mencerminkan suasana visual dan psikologi warna dari gambar aslinya.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Median Cut',
+            definition: 'Algoritma kuantisasi warna yang membagi ruang RGB secara rekursif menjadi kotak-kotak, memastikan distribusi yang seragam. Secara historis digunakan dalam teknologi warna GIF dan terindeks.'
+        },
+        {
+            term: 'Ruang Warna RGB',
+            definition: 'Model warna berdasarkan merah, hijau, dan biru. Setiap warna direpresentasikan sebagai kombinasi dari ketiga nilai ini (0-255). Standar pada layar digital dan web.'
+        },
+        {
+            term: 'Kode HEX',
+          definition: 'Notasi heksadesimal 6 digit (#RRGGBB) yang mewakili warna di web: #FF0000 (merah), #00FF00 (hijau), #0000FF (biru). Universal di CSS, Figma, dan Adobe.'
+        },
+        {
+            term: 'Saturasi Warna',
+            definition: 'Intensitas atau kemurnian warna. Saturasi tinggi = warna cerah; saturasi rendah = warna keabu-abuan. Mempengaruhi persepsi emosional desain.'
+        },
+        {
+            term: 'Harmoni Kromatik',
+            definition: 'Pemilihan dan kombinasi warna yang menghasilkan hasil yang menyenangkan secara visual. Bisa berupa monokromatik, komplementer, analog, atau triadik.'
+        }
+    ] },
+
+    { type: 'message', title: 'Analisis Kromatik Profesional', ariaLabel: 'Informasi teknis tentang analisis warna', html: 'Chromatic Lens mengubah analisis visual manual menjadi presisi algoritmik. Alat ini tidak hanya mengekstrak warna: ia menangkap esensi emosional dan visual dari gambar apa pun, menempatkannya langsung di papan klip Anda sebagai kode HEX yang siap digunakan. Privasi total, tanpa batas volume analisis.' },
+
+    { type: 'title', text: 'Desain dari Inspirasi Visual', level: 3 },
+    { type: 'paragraph', html: 'Palet warna terbaik adalah yang menangkap maksud visual dari referensi Anda. Chromatic Lens mengotomatiskan apa yang dulunya merupakan proses manual: mengamati, menganalisis, mencatat. Sekarang, cukup seret gambar dan dapatkan kode HEX profesional dalam hitungan detik.' }
+];
+
+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) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'id',
+};
+
+export const content: ChromaticLensLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Pertanyaan yang Sering Diajukan",
+    faq,
+    bibliographyTitle: "Referensi",
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};