@jjlmoya/utils-games-development 1.55.0 → 1.57.0

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

@@ -0,0 +1,225 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-swapper',
+  title: 'ドット絵パレットスワッパー',
+  description: 'スプライトやスプライトシートをクラシックなゲーム機のパレットやカスタムカラーにブラウザ上で変換。',
+  ui: {
+    uploadTitle: 'スプライトをドラッグ＆ドロップ',
+    uploadHint: 'PNG、JPEG、WebPをローカル環境で処理します',
+    chooseImage: '画像を選択',
+    replaceImage: '画像を差し替え',
+    paletteTitle: 'パレットを選択',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES風',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'カスタムカラー',
+    customPaletteHint: 'Hexカラーコードをカンマ、スペース、改行で区切って入力。',
+    applyCustomPalette: 'パレットを適用',
+    resetCustomPalette: 'リセット',
+    sourcePreview: 'オリジナル',
+    resultPreview: '変換結果',
+    waitingForImage: '画像を選択してください',
+    uploadToPreview: '画像をアップロードするとプレビューが表示されます',
+    resultEmpty: '元の画像と減色後の画像が左右に並んで表示されます。',
+    downloadPng: 'PNGをダウンロード',
+    downloadDisabled: '画像をアップロードしてエクスポートを有効化。',
+    colorCount: '元の色数',
+    mappedCount: '使用色数',
+    imageSize: '画像サイズ',
+    paletteCount: 'パレット色数',
+    preserveAlpha: '透過を維持',
+    zoomLabel: 'ズーム',
+    processing: 'ピクセルを減色中',
+    invalidPalette: '有効なHexカラーコードを入力してください',
+    invalidImage: 'PNG、JPEG、WebP形式の画像を選択してください',
+    readyStatus: '準備完了',
+    dropActive: 'ドロップして読み込み',
+    mappedSummary: '{source}色の元画像を{mapped}色のパレットに変換しました',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'ドット絵をレトロゲーム機のカラーパレットに即座に変換',
+    },
+    {
+      type: 'paragraph',
+      html: '限られた色数はドット絵にレトロゲーム独特の魅力を与えます。Game Boy、NES、PICO-8などのパレットに一括変換できます。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '減色処理の仕組み',
+    },
+    {
+      type: 'paragraph',
+      html: '各ピクセルのRGB値を解析し、選択されたパレットの中で最も近い色に置き換えます。透明度も保持されます。',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'パレット制限',
+          description: '元の色を最も近いパレット色へ変換。',
+          points: [
+            'スプライトやタイルセットに最適',
+            '元の解像度とピクセル位置を維持',
+            '使用色数を簡単に管理',
+          ],
+        },
+        {
+          title: 'パレットスワップ',
+          description: '色違いバージョンを簡単に作成。',
+          points: [
+            '2Pカラーや属性違いのキャラ作成に',
+            '独自のHexカラーリストにも対応',
+            '即座にPNGとして書き出し可能',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'レトロパレット比較',
+    },
+    {
+      type: 'table',
+      headers: ['パレット', '色数', '特徴', '注意点'],
+      rows: [
+        ['Game Boy', '4', 'モノクロ携帯ゲーム機風', '明暗差が少ないとディテールが潰れやすい'],
+        ['NES風', '16', 'アーケード風の鮮やかな発色', '彩度の高い色の扱いに注意'],
+        ['PICO-8', '16', '現代的なポピュラーカラー', '鮮やかな色のコントラストを考慮'],
+        ['Commodore 64', '16', 'シックなレトロPCテイスト', '明確なシルエット作りが効果的'],
+        ['DawnBringer 16', '16', '汎用性の高い人気パレット', '光源の意識が必要'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'スプライトシートの作業フロー',
+    },
+    {
+      type: 'paragraph',
+      html: '画像を読み込み、ズーム機能を使って拡大しながら細部の潰れがないか確認してください。',
+    },
+    {
+      type: 'tip',
+      title: '色数えらびのコツ',
+      html: '最初は4〜16色程度に抑えると統一感が出やすくなります。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '書き出し前のチェックリスト',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'ゲームへの組み込み前に',
+      html: '原寸サイズで表示を確認し、透過部分に余計なピクセルが入っていないかチェックしましょう。',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'カラー減色（Quantization）',
+          definition: '多くの色で描かれた画像を限られた色数に変換する処理。',
+        },
+        {
+          term: 'パレットランプ（Ramp）',
+          definition: '陰影をつけるために段階的に並べられた同系色の系列。',
+        },
+        {
+          term: 'インデックスカラー',
+          definition: '各ピクセルがカラーテーブルの番号を参照する形式。',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: '画像はサーバーに送信されますか？',
+      answer: 'いいえ。すべての処理はお使いのブラウザ上でローカルに行われます。',
+    },
+    {
+      question: '自作のパレットを使用できますか？',
+      answer: 'はい。Hexコードを入力して「パレットを適用」をクリックしてください。',
+    },
+  ],
+  howTo: [
+    {
+      name: '画像をロード',
+      text: 'PNG、JPEG、WebP画像をドラッグ＆ドロップします。',
+    },
+    {
+      name: 'パレットを選択',
+      text: 'プリセットを選択するか、カスタムコードを入力します。',
+    },
+    {
+      name: 'エクスポート',
+      text: '変換後のPNGファイルをダウンロードします。',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'ドット絵パレットスワッパー',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '画像はサーバーに送信されますか？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'いいえ。すべての処理はお使いのブラウザ上でローカルに行われます。',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: '自作のパレットを使用できますか？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'はい。Hexコードを入力して「パレットを適用」をクリックしてください。',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'ドット絵をレトロパレットに変換する方法',
+      step: [
+        { '@type': 'HowToStep', name: '画像をロード', text: '画像をドラッグ＆ドロップします。' },
+        { '@type': 'HowToStep', name: 'パレットを選択', text: 'プリセットを選択するかカスタムコードを入力します。' },
+        { '@type': 'HowToStep', name: 'エクスポート', text: '変換後のPNGファイルをダウンロードします。' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};

package/src/tool/pixelArtPaletteSwapper/i18n/ko.ts

@@ -0,0 +1,225 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-swapper',
+  title: '도트 그래픽 팔레트 스왑 도구',
+  description: '스프라이트와 스프라이트 시트의 색상을 레트로 콘솔 팔레트나 사용자 지정 Hex 색상으로 브라우저에서 직접 변경하세요.',
+  ui: {
+    uploadTitle: '스프라이트 파일 드래그 앤 드롭',
+    uploadHint: 'PNG, JPEG, WebP 파일이 브라우저에서 안전하게 처리됩니다',
+    chooseImage: '이미지 선택',
+    replaceImage: '이미지 교체',
+    paletteTitle: '팔레트 선택',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES 스타일',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: '사용자 지정 색상',
+    customPaletteHint: 'Hex 색상 코드를 쉼표, 공백 또는 줄바꿈으로 구분하여 입력하세요.',
+    applyCustomPalette: '팔레트 적용',
+    resetCustomPalette: '초기화',
+    sourcePreview: '원본',
+    resultPreview: '변환 결과',
+    waitingForImage: '이미지 대기 중',
+    uploadToPreview: '이미지를 업로드하면 미리보기가 표시됩니다',
+    resultEmpty: '원본과 색상이 변환된 이미지가 나란히 표시됩니다.',
+    downloadPng: 'PNG 다운로드',
+    downloadDisabled: '내보내기를 활성화하려면 이미지를 업로드하세요.',
+    colorCount: '원본 색상 수',
+    mappedCount: '사용된 색상 수',
+    imageSize: '이미지 크기',
+    paletteCount: '팔레트 색상 수',
+    preserveAlpha: '투명도 유지',
+    zoomLabel: '확대',
+    processing: '픽셀 색상 변환 중',
+    invalidPalette: '올바른 Hex 색상 코드를 1개 이상 입력하세요',
+    invalidImage: 'PNG, JPEG 또는 WebP 이미지를 선택하세요',
+    readyStatus: '준비 완료',
+    dropActive: '파일을 놓아 업로드',
+    mappedSummary: '{source}개의 원본 색상을 {mapped}개의 팔레트 색상으로 변환했습니다',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: '도트 그래픽을 레트로 감성의 팔레트로 즉시 변환',
+    },
+    {
+      type: 'paragraph',
+      html: '제한된 색상 수 팔레트는 도트 그래픽에 독특한 레트로 분위기를 더해줍니다. Game Boy, NES, PICO-8 팔레트로 손쉽게 변환해 보세요.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '색상 변환 알고리즘 작동 방식',
+    },
+    {
+      type: 'paragraph',
+      html: '각 픽셀의 RGB 값을 분석하여 선택한 팔레트에서 가장 가까운 색상으로 대체하며 투명도 채널은 그대로 유지됩니다.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: '팔레트 제한',
+          description: '원본 색상을 가장 가까운 팔레트 색으로 변경.',
+          points: [
+            '스프라이트 및 타일셋 작업에 최적화',
+            '원본 해상도와 픽셀 위치 유지',
+            '색상 수 관리가 용이함',
+          ],
+        },
+        {
+          title: '팔레트 스왑',
+          description: '동일 디자인의 다양한 색상 버전 생성.',
+          points: [
+            '2P 컬러 및 속성 변경 캐릭터 제작에 유용',
+            '사용자 지정 Hex 코드 지원',
+            '즉시 PNG 파일로 내보내기 가능',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '레트로 콘솔 팔레트 비교',
+    },
+    {
+      type: 'table',
+      headers: ['팔레트', '색상 수', '추천 용도', '주의할 점'],
+      rows: [
+        ['Game Boy', '4', '흑백 휴대용 게임기 느낌', '명암 차가 적으면 디테일이 뭉개질 수 있음'],
+        ['NES 스타일', '16', '아케이드풍 도트 그래픽', '채도가 높은 색상의 균형 필요'],
+        ['PICO-8', '16', '트렌디하고 선명한 아기자기한 스타일', '강렬한 색상 간의 대비 고려'],
+        ['Commodore 64', '16', '고전 PC 게임 감성', '명확한 실루엣 표현이 효과적'],
+        ['DawnBringer 16', '16', '범용성 높은 세련된 팔레트', '명확한 광원 표현이 필요함'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '스프라이트 시트 작업 흐름',
+    },
+    {
+      type: 'paragraph',
+      html: '이미지를 불러온 후 확대 기능을 사용하여 픽셀 디테일이나 경계선이 뭉개지지 않았는지 확인하세요.',
+    },
+    {
+      type: 'tip',
+      title: '색상 구성 팁',
+      html: '4개에서 16개 사이의 색상을 사용하는 것이 깔끔한 디테일을 유지하는 데 좋습니다.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '내보내기 전 체크리스트',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: '게임 적용 전 확인',
+      html: '100% 원본 비율에서 외곽선과 투명 배경 부분이 깨끗한지 점검하세요.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: '색상 양자화 (Quantization)',
+          definition: '많은 수의 색상을 제한된 색상 집합으로 줄이는 과정.',
+        },
+        {
+          term: '팔레트 램프 (Ramp)',
+          definition: '음영을 표현하기 위해 음영 단계별로 정리된 색상 계열.',
+        },
+        {
+          term: '인덱스 팔레트',
+          definition: '픽셀이 직접 색상 코드를 갖는 대신 색상표 번호를 참조하는 방식.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: '이미지가 서버로 전송되나요?',
+      answer: '아니요. 모든 작업은 사용자의 브라우저 내부에서 안전하게 진행됩니다.',
+    },
+    {
+      question: '원하는 팔레트를 직접 입력할 수 있나요?',
+      answer: '네. Hex 색상 코드를 입력하고 「팔레트 적용」을 클릭하세요.',
+    },
+  ],
+  howTo: [
+    {
+      name: '이미지 불러오기',
+      text: 'PNG, JPEG 또는 WebP 이미지를 드래그 앤 드롭합니다.',
+    },
+    {
+      name: '팔레트 선택',
+      text: '프리셋을 선택하거나 직접 Hex 코드를 입력합니다.',
+    },
+    {
+      name: '내보내기',
+      text: '색상이 변환된 PNG 이미지를 다운로드합니다.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: '도트 그래픽 팔레트 스왑 도구',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '이미지가 서버로 전송되나요?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: '아니요. 모든 작업은 사용자의 브라우저 내부에서 안전하게 진행됩니다.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: '원하는 팔레트를 직접 입력할 수 있나요?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: '네. Hex 색상 코드를 입력하고 「팔레트 적용」을 클릭하세요.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: '도트 그래픽 색상 변환 방법',
+      step: [
+        { '@type': 'HowToStep', name: '이미지 불러오기', text: '이미지를 드래그 앤 드롭합니다.' },
+        { '@type': 'HowToStep', name: '팔레트 선택', text: '프리셋을 선택하거나 직접 Hex 코드를 입력합니다.' },
+        { '@type': 'HowToStep', name: '내보내기', text: '색상이 변환된 PNG 이미지를 다운로드합니다.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};

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

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palet-wisselaar',
+  title: 'Pixel Art Palet Wisselaar',
+  description: 'Reduceer sprites en spritesheets tot klassieke consolepaletten of een aangepaste lijst hex-kleuren direct in je browser.',
+  ui: {
+    uploadTitle: 'Sleep een sprite of spritesheet',
+    uploadHint: 'PNG, JPEG of WebP worden lokaal verwerkt',
+    chooseImage: 'Afbeelding kiezen',
+    replaceImage: 'Afbeelding vervangen',
+    paletteTitle: 'Kies palet',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'Geïnspireerd op NES',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Aangepaste kleuren',
+    customPaletteHint: 'Scheid hex-waarden met komma s, spaties of nieuwe regels.',
+    applyCustomPalette: 'Palet toepassen',
+    resetCustomPalette: 'Herstellen',
+    sourcePreview: 'Origineel',
+    resultPreview: 'Gereduceerd resultaat',
+    waitingForImage: 'Wachten op een afbeelding',
+    uploadToPreview: 'Upload een afbeelding voor een voorbeeld',
+    resultEmpty: 'Originele en gereduceerde versie verschijnen naast elkaar.',
+    downloadPng: 'PNG downloaden',
+    downloadDisabled: 'Upload een afbeelding om te exporteren.',
+    colorCount: 'Bronkleuren',
+    mappedCount: 'Gebruikte kleuren',
+    imageSize: 'Afbeeldingsgrootte',
+    paletteCount: 'paletkleuren',
+    preserveAlpha: 'Transparantie behouden',
+    zoomLabel: 'Zoom',
+    processing: 'Pixels toewijzen',
+    invalidPalette: 'Voeg minimaal één geldige hex-kleur toe',
+    invalidImage: 'Kies een PNG-, JPEG- of WebP-afbeelding',
+    readyStatus: 'Klaar',
+    dropActive: 'Loslaten om te laden',
+    mappedSummary: '{source} bronkleuren omgezet naar {mapped} paletkleuren',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Zet een Volledig Gekleurde Sprite om naar een Doordacht Retropalet',
+    },
+    {
+      type: 'paragraph',
+      html: 'Een beperkt kleurenpalet is meer dan een technische beperking. Het geeft een sprite een herkenbare kleurentaal, zorgt ervoor dat elementen in een scène als één geheel voelen en roept het visuele karakter van een specifieke console of retro-hardware op. Met deze online paletwisselaar kun je het originele beeld vergelijken met de gereduceerde versie terwijl je experimenteert met Game Boy, NES-geïnspireerde, PICO-8, Commodore 64, DawnBringer 16 en eigen paletten.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Hoe Conversie via Dichtstbijzijnde Kleur Werkt',
+    },
+    {
+      type: 'paragraph',
+      html: 'De tool leest de rood-, groen- en blauwkanalen voor elke zichtbare pixel en vergelijkt die kleur met elke kleur in het gekozen palet. Het kiest de paletwaarde met de kleinste kwadratische RGB-afstand en schrijft de vervangende kleur naar een nieuwe canvasbuffer. Het alfakanaal blijft gescheiden, zodat transparante pixels transparant blijven en half-transparante randen hun originele dekking behouden wanneer Transparantie behouden is ingeschakeld.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Paletbeperking',
+          description: 'Elke bronkleur wordt vervangen door de dichtstbijzijnde beschikbare kleurwaarde.',
+          points: [
+            'Snel en voorspelbaar voor sprites, iconen, tegels en interface-elementen',
+            'Behoudt de originele afmetingen en pixelposities exact',
+            'Maakt het eenvoudig om een vastgesteld kleurenbudget te controleren',
+          ],
+        },
+        {
+          title: 'Palette Swapping',
+          description: 'Hetzelfde artwork kan worden omgezet naar een andere zorgvuldig gekozen set kleuren.',
+          points: [
+            'Handig voor alternatieve outfits, omgevingen en schade-statussen',
+            'Aangepaste hex-lijsten sluiten naadloos aan op je eigen artistieke richting',
+            'Het gedownloade PNG-bestand kan direct weer in je editor worden geïmporteerd',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Een Palet Kiezen voor Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Palet', 'Kleuren', 'Geschikt voor', 'Let op'],
+      rows: [
+        ['Game Boy', '4', 'Monochroom handheld-gevoel en duidelijke contraststudies', 'Een klein bereik kan nabijgelegen materialen samenvoegen'],
+        ['Geïnspireerd op NES', '16', 'Karakteristieke arcade-sprites, personages en tegels', 'Zeer felle kleuren kunnen kleine details overheersen'],
+        ['PICO-8', '16', 'Moderne pixel art met volle, verzadigde accenten', 'Sterk verzadigde tinten vragen om bewust contrast'],
+        ['Commodore 64', '16', 'Zachte retro-scènes en klassieke computergame-esthetiek', 'Laag contrast werkt het beste met duidelijke silhouetten'],
+        ['DawnBringer 16', '16', 'Veelzijdig handgekozen palet voor algemene pixel art', 'Kleurverlopen hebben nog steeds een duidelijke lichtrichting nodig'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Praktische Werkwijze voor Spritesheets',
+    },
+    {
+      type: 'paragraph',
+      html: 'Begin met het grootste bronbestand dat je prettig kunt bewerken en upload de geëxporteerde sprite of spritesheet hier. Kies een preset om een richting te bepalen of plak een eigen hex-lijst. Inspecteer beide schermen op een hogere zoom om te controleren op verloren gelaatstrekken, samengevoegde omtrekken of highlights. Als het resultaat wazig oogt, probeer dan een palet met grotere contraststappen of voeg één bewuste accentkleur toe.',
+    },
+    {
+      type: 'tip',
+      title: 'Houd het Palet Doordacht',
+      html: 'Een grotere kleurenlijst is niet automatisch beter. Begin met 4 tot 16 kleuren, geef elke kleur een duidelijke functie en bewaar de brightste waarden voor focuspunten of goed leesbare accenten. Het algoritme behoudt de pixelposities, maar kan niet bepalen welke kleuren de visuele hiërarchie van je sprite moeten dragen.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Export-Checklist voor Pixel Art',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Vóór het Importeren van het Gereduceerde PNG bestand',
+      html: 'Controleer het resultaat op 100 procent en op de uiteindelijke schaal in de game, zorg dat transparante randen schoon blijven, controleer of belangrijke silhouetten goed leesbaar blijven en bewaar het originele bronbestand naast de export om het palet aan te passen zonder opnieuw te hoeven beginnen.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Kleurkwantisatie',
+          definition: 'Het proces van het reduceren van een grote set bronkleuren tot een kleinere, vastgestelde set.',
+        },
+        {
+          term: 'Kleurgradiënt (Ramp)',
+          definition: 'Een geordende reeks van donkere, middelste en lichte tinten om een oppervlak te schaduwen.',
+        },
+        {
+          term: 'Geïndexeerd palet',
+          definition: 'Een compacte kleurentabel waarin pixels verwijzen naar indexen in een lijst in plaats van volledige kleurwaarden op te slaan.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Worden mijn afbeeldingen geüpload naar een server?',
+      answer: 'Nee. De afbeelding wordt in je browser op een canvas gedecodeerd, lokaal verwerkt met JavaScript en direct geëxporteerd als PNG. De tool heeft geen uploadstap.',
+    },
+    {
+      question: 'Kan ik mijn eigen palet gebruiken?',
+      answer: 'Ja. Plak 6-cijferige of 3-cijferige hex-kleuren in het veld Aangepaste kleuren, gescheiden door komma s, spaties of nieuwe regels, en kies Palet toepassen.',
+    },
+    {
+      question: 'Wordt de grootte van mijn sprite aangepast?',
+      answer: 'Nee. De uitvoer behoudt de originele breedte, hoogte, pixelposities en alfawaarden wanneer Transparantie behouden is ingeschakeld.',
+    },
+    {
+      question: 'Welk algoritme wordt er gebruikt?',
+      answer: 'Elke zichtbare pixel wordt toegewezen aan de dichtstbijzijnde kleur in het gekozen palet via kwadratische euclidische afstand in RGB-ruimte. Het is snel, deterministisch en eenvoudig te bekijken, maar gebruikt geen dithering of perceptuele Lab-kleurcorrectie.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Sprite laden',
+      text: 'Sleep een PNG-, JPEG- of WebP-sprite of spritesheet naar het werkgebied of gebruik Afbeelding kiezen.',
+    },
+    {
+      name: 'Palet kiezen',
+      text: 'Kies een klassieke preset of voer je eigen hex-kleuren in. Het resultaat wordt direct bijgewerkt.',
+    },
+    {
+      name: 'Vergelijken en exporteren',
+      text: 'Inspecteer het originele en het gereduceerde scherm, pas de zoom aan en download het resultaat als PNG.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Pixel Art Palet Wisselaar',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Worden mijn afbeeldingen geüpload naar een server?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Nee. De afbeelding wordt lokaal verwerkt in de browser en direct als PNG geëxporteerd.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Kan ik mijn eigen palet gebruiken?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Ja. Plak hex-kleuren in het veld Aangepaste kleuren en kies Palet toepassen.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Hoe reduceer je een sprite naar een retropalet',
+      step: [
+        { '@type': 'HowToStep', name: 'Sprite laden', text: 'Sleep een bestand naar het werkgebied.' },
+        { '@type': 'HowToStep', name: 'Palet kiezen', text: 'Kies een preset of voer hex-kleuren in.' },
+        { '@type': 'HowToStep', name: 'Vergelijken en exporteren', text: 'Inspecteer het resultaat en download de PNG.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};