From c82f31d68b24654f24a7dd56fc494c5c82d82eb0 Mon Sep 17 00:00:00 2001
From: varo6 <alvarohr2003@gmail.com>
Date: Fri, 6 Mar 2026 11:49:45 +0100
Subject: [PATCH] Add XTCH 2-bit conversion support

---
 src/components/ConverterPage.tsx       |   3 +-
 src/components/MergePage.tsx           |  14 +-
 src/components/Options.tsx             |  12 ++
 src/lib/conversion/types.ts            |   1 +
 src/lib/converter.ts                   |  84 +++++++-----
 src/lib/merge.ts                       |  84 ++----------
 src/lib/processing/dithering.ts        | 179 +++++++++++++++----------
 src/lib/processing/xtg.ts              |  79 +++++++++--
 src/lib/split.ts                       | 105 +--------------
 src/lib/workers/convert-page.worker.ts |  38 ++++--
 src/lib/xtc-format.ts                  |   7 +-
 src/routes/about.tsx                   |  13 +-
 src/routes/image.tsx                   |   2 +-
 src/routes/index.tsx                   |   2 +-
 src/routes/video.tsx                   |   2 +-
 15 files changed, 307 insertions(+), 318 deletions(-)

diff --git a/src/components/ConverterPage.tsx b/src/components/ConverterPage.tsx
index c13fc3d..900daff 100644
--- a/src/components/ConverterPage.tsx
+++ b/src/components/ConverterPage.tsx
@@ -125,6 +125,7 @@ export function ConverterPage({ fileType, notice }: ConverterPageProps) {
     device: 'X4',
     splitMode: (fileType === 'image' || fileType === 'video') ? 'nosplit' : 'overlap',
     dithering: fileType === 'pdf' ? 'atkinson' : 'floyd',
+    is2bit: false,
     contrast: fileType === 'pdf' ? 8 : 4,
     horizontalMargin: 0,
     verticalMargin: 0,
@@ -241,7 +242,7 @@ export function ConverterPage({ fileType, notice }: ConverterPageProps) {
         console.error(`Error converting ${file.name}:`, err)
         // Store error result
         await addResult({
-          name: file.name.replace(/\.[^/.]+$/i, '.xtc'),
+          name: file.name.replace(/\.[^/.]+$/i, options.is2bit ? '.xtch' : '.xtc'),
           error: normalizeUserErrorMessage(err instanceof Error ? err.message : 'Unknown error'),
         })
       }
diff --git a/src/components/MergePage.tsx b/src/components/MergePage.tsx
index 9e0b197..da3c7ab 100644
--- a/src/components/MergePage.tsx
+++ b/src/components/MergePage.tsx
@@ -89,7 +89,7 @@ export function MergePage() {
 
       const type = detectFileType(file)
       if (type === 'unknown') {
-        setTypeError('Unsupported file type. Use CBZ, PDF, or XTC files.')
+        setTypeError('Unsupported file type. Use CBZ, PDF, XTC, or XTCH files.')
         return
       }
 
@@ -318,14 +318,14 @@ export function MergePage() {
                 {mode === 'merge' ? 'Drop files to merge' : 'Drop a file to split'}
               </span>
               <span className="dropzone-secondary">
-                CBZ, PDF, or XTC {mode === 'merge' ? '(same type only)' : ''}
+                CBZ, PDF, or XTC/XTCH {mode === 'merge' ? '(same type only)' : ''}
               </span>
             </div>
           </div>
           <input
             id="merge-file-input"
             type="file"
-            accept=".cbz,.CBZ,.pdf,.PDF,.xtc,.XTC"
+            accept=".cbz,.CBZ,.pdf,.PDF,.xtc,.XTC,.xtch,.XTCH"
             multiple={mode === 'merge'}
             hidden
             onChange={handleFileInput}
@@ -391,7 +391,7 @@ export function MergePage() {
                 value={xtcOutputFormat}
                 onChange={(e) => setXtcOutputFormat(e.target.value as OutputFormat)}
               >
-                <option value="xtc">XTC (E-Reader)</option>
+                <option value="xtc">XTC/XTCH (E-Reader)</option>
                 <option value="cbz">CBZ (Archive)</option>
               </select>
             </div>
@@ -404,7 +404,7 @@ export function MergePage() {
               <div className="output-info">
                 <span className="output-format-badge">CBZ</span>
                 <span className="output-hint">
-                  Move to converter to create XTC
+                  Move to converter to create XTC/XTCH
                 </span>
               </div>
             </div>
@@ -417,7 +417,7 @@ export function MergePage() {
               <div className="output-info">
                 <span className="output-format-badge">PDF</span>
                 <span className="output-hint">
-                  Move to converter to create XTC
+                  Move to converter to create XTC/XTCH
                 </span>
               </div>
             </div>
@@ -599,7 +599,7 @@ export function MergePage() {
                 className="btn-move-converter"
                 onClick={handleMoveToConverter}
               >
-                Convert {selectedResults.length > 1 ? `${selectedResults.length} files` : ''} to XTC
+                Convert {selectedResults.length > 1 ? `${selectedResults.length} files` : ''} to XTC/XTCH
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                   <path d="M5 12h14M12 5l7 7-7 7"/>
                 </svg>
diff --git a/src/components/Options.tsx b/src/components/Options.tsx
index 2a48690..0579b4c 100644
--- a/src/components/Options.tsx
+++ b/src/components/Options.tsx
@@ -142,6 +142,18 @@ export function Options({ options, onChange, fileType = 'cbz' }: OptionsProps) {
           </select>
         </div>
 
+        <div className="option option-checkbox">
+          <label htmlFor="is2bit" className="checkbox-label">
+            <input
+              type="checkbox"
+              id="is2bit"
+              checked={options.is2bit}
+              onChange={(e) => onChange({ ...options, is2bit: e.target.checked })}
+            />
+            <span>Use XTCH 2-bit grayscale output</span>
+          </label>
+        </div>
+
         <div className="options-actions">
           <button
             type="button"
diff --git a/src/lib/conversion/types.ts b/src/lib/conversion/types.ts
index b2c7089..4e6a275 100644
--- a/src/lib/conversion/types.ts
+++ b/src/lib/conversion/types.ts
@@ -2,6 +2,7 @@ export interface ConversionOptions {
   device: 'X4' | 'X3'
   splitMode: string
   dithering: string
+  is2bit: boolean
   contrast: number
   horizontalMargin: number
   verticalMargin: number
diff --git a/src/lib/converter.ts b/src/lib/converter.ts
index 7496e79..2eb59d3 100644
--- a/src/lib/converter.ts
+++ b/src/lib/converter.ts
@@ -6,7 +6,7 @@ import unrarWasm from 'node-unrar-js/esm/js/unrar.wasm?url'
 import { applyDithering } from './processing/dithering'
 import { toGrayscale, applyContrast, calculateOverlapSegments } from './processing/image'
 import { rotateCanvas, extractAndRotate, resizeWithPadding, getTargetDimensions } from './processing/canvas'
-import { imageDataToXtg } from './processing/xtg'
+import { imageDataToXtg, imageDataToXth } from './processing/xtg'
 import { buildXtcFromXtgPages } from './xtc-format'
 import { extractPdfMetadata } from './metadata/pdf-outline'
 import { parseComicInfo } from './metadata/comicinfo'
@@ -222,12 +222,12 @@ async function blobToDataUrl(blob: Blob): Promise<string> {
   })
 }
 
-function encodeCanvasPage(page: ProcessedPage): EncodedPage {
+function encodeCanvasPage(page: ProcessedPage, options: ConversionOptions): EncodedPage {
   const ctx = page.canvas.getContext('2d')!
   const imageData = ctx.getImageData(0, 0, page.canvas.width, page.canvas.height)
   return {
     name: page.name,
-    xtg: imageDataToXtg(imageData)
+    xtg: options.is2bit ? imageDataToXth(imageData) : imageDataToXtg(imageData)
   }
 }
 
@@ -236,7 +236,8 @@ async function finalizeConversionResult(
   encodedPages: EncodedPage[],
   mappingCtx: PageMappingContext,
   metadata: BookMetadata,
-  sampledPreviews: string[]
+  sampledPreviews: string[],
+  options: ConversionOptions
 ): Promise<ConversionResult> {
   encodedPages.sort((a, b) => a.name.localeCompare(b.name))
 
@@ -244,7 +245,10 @@ async function finalizeConversionResult(
     metadata.toc = adjustTocForMapping(metadata.toc, mappingCtx)
   }
 
-  const xtcData = await buildXtcFromXtgPages(encodedPages.map((page) => page.xtg), { metadata })
+  const xtcData = await buildXtcFromXtgPages(encodedPages.map((page) => page.xtg), {
+    metadata,
+    is2bit: options.is2bit
+  })
 
   return {
     name: outputName,
@@ -256,6 +260,17 @@ async function finalizeConversionResult(
   }
 }
 
+function getOutputExtension(options: ConversionOptions): '.xtc' | '.xtch' {
+  return options.is2bit ? '.xtch' : '.xtc'
+}
+
+function replaceOutputExtension(fileName: string, options: ConversionOptions): string {
+  const extension = getOutputExtension(options)
+  const dot = fileName.lastIndexOf('.')
+  if (dot <= 0) return `${fileName}${extension}`
+  return `${fileName.slice(0, dot)}${extension}`
+}
+
 async function processArchiveSourcePages(
   totalPages: number,
   getBlob: (index: number) => Promise<Blob>,
@@ -327,7 +342,7 @@ async function processArchiveSourcePages(
 
       if (pageResults.length === 0) {
         const pages = await processImage(imgBlob, pageNum, pageOptions)
-        pageResults = pages.map(encodeCanvasPage)
+        pageResults = pages.map((page) => encodeCanvasPage(page, pageOptions))
 
         if (includePreview && pages.length > 0 && pages[0].canvas) {
           const previewDataUrl = pages[0].canvas.toDataURL('image/jpeg', PREVIEW_JPEG_QUALITY)
@@ -447,11 +462,12 @@ export async function convertCbzToXtc(
   )
 
   return finalizeConversionResult(
-    file.name.replace(/\.cbz$/i, '.xtc'),
+    replaceOutputExtension(file.name, options),
     encodedPages,
     mappingCtx,
     metadata,
-    sampledPreviews
+    sampledPreviews,
+    options
   )
 }
 
@@ -531,20 +547,15 @@ export async function convertCbrToXtc(
   )
 
   return finalizeConversionResult(
-    file.name.replace(/\.cbr$/i, '.xtc'),
+    replaceOutputExtension(file.name, options),
     encodedPages,
     mappingCtx,
     metadata,
-    sampledPreviews
+    sampledPreviews,
+    options
   )
 }
 
-function getOutputName(fileName: string): string {
-  const dot = fileName.lastIndexOf('.')
-  if (dot <= 0) return `${fileName}.xtc`
-  return `${fileName.slice(0, dot)}.xtc`
-}
-
 /**
  * Convert a single image file to XTC.
  */
@@ -562,7 +573,7 @@ export async function convertImageToXtc(
     throw new Error('Failed to decode image')
   }
 
-  const encodedPages = imagePages.map(encodeCanvasPage)
+  const encodedPages = imagePages.map((page) => encodeCanvasPage(page, options))
   const mappingCtx = new PageMappingContext()
   mappingCtx.addOriginalPage(1, imagePages.length)
 
@@ -575,11 +586,12 @@ export async function convertImageToXtc(
   onProgress(1, previewUrl)
 
   return finalizeConversionResult(
-    getOutputName(file.name),
+    replaceOutputExtension(file.name, options),
     encodedPages,
     mappingCtx,
     { toc: [] },
-    sampledPreviews
+    sampledPreviews,
+    options
   )
 }
 
@@ -673,7 +685,7 @@ export async function convertVideoToXtc(
       captureCtx.drawImage(video, 0, 0, captureCanvas.width, captureCanvas.height)
 
       const pages = processCanvasAsImage(captureCanvas, i + 1, frameOptions)
-      encodedPages.push(...pages.map(encodeCanvasPage))
+      encodedPages.push(...pages.map((page) => encodeCanvasPage(page, options)))
       mappingCtx.addOriginalPage(i + 1, pages.length)
 
       const includePreview = options.showProgressPreview &&
@@ -689,11 +701,12 @@ export async function convertVideoToXtc(
     }
 
     return finalizeConversionResult(
-      getOutputName(file.name),
+      replaceOutputExtension(file.name, options),
       encodedPages,
       mappingCtx,
       { toc: [] },
-      sampledPreviews
+      sampledPreviews,
+      options
     )
   } finally {
     URL.revokeObjectURL(url)
@@ -741,7 +754,7 @@ async function convertPdfToXtc(
     }).promise
 
     const pages = processCanvasAsImage(canvas, i, options)
-    encodedPages.push(...pages.map(encodeCanvasPage))
+    encodedPages.push(...pages.map((page) => encodeCanvasPage(page, options)))
     mappingCtx.addOriginalPage(i, pages.length)
 
     const includePreview = options.showProgressPreview &&
@@ -761,11 +774,12 @@ async function convertPdfToXtc(
   }
 
   return finalizeConversionResult(
-    file.name.replace(/\.pdf$/i, '.xtc'),
+    replaceOutputExtension(file.name, options),
     encodedPages,
     mappingCtx,
     metadata,
-    sampledPreviews
+    sampledPreviews,
+    options
   )
 }
 
@@ -810,7 +824,7 @@ function processCanvasAsImage(
       options.imageMode,
       255
     )
-    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
 
     results.push({
       name: `${String(pageNum).padStart(4, '0')}_0_page.png`,
@@ -829,7 +843,7 @@ function processCanvasAsImage(
         const letter = String.fromCharCode(97 + idx)
         const pageCanvas = extractAndRotate(canvas, seg.x, seg.y, seg.w, seg.h, landscapeRotation)
         const finalCanvas = resizeWithPadding(pageCanvas, 255, targetWidth, targetHeight)
-        applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+        applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
 
         results.push({
           name: `${String(pageNum).padStart(4, '0')}_3_${letter}.png`,
@@ -841,7 +855,7 @@ function processCanvasAsImage(
 
       const topCanvas = extractAndRotate(canvas, 0, 0, width, halfHeight, landscapeRotation)
       const topFinal = resizeWithPadding(topCanvas, 255, targetWidth, targetHeight)
-      applyDithering(topFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+      applyDithering(topFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
       results.push({
         name: `${String(pageNum).padStart(4, '0')}_2_a.png`,
         canvas: topFinal
@@ -849,7 +863,7 @@ function processCanvasAsImage(
 
       const bottomCanvas = extractAndRotate(canvas, 0, halfHeight, width, halfHeight, landscapeRotation)
       const bottomFinal = resizeWithPadding(bottomCanvas, 255, targetWidth, targetHeight)
-      applyDithering(bottomFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+      applyDithering(bottomFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
       results.push({
         name: `${String(pageNum).padStart(4, '0')}_2_b.png`,
         canvas: bottomFinal
@@ -858,7 +872,7 @@ function processCanvasAsImage(
   } else {
     const rotatedCanvas = rotateCanvas(canvas, landscapeRotation)
     const finalCanvas = resizeWithPadding(rotatedCanvas, 255, targetWidth, targetHeight)
-    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
 
     results.push({
       name: `${String(pageNum).padStart(4, '0')}_0_spread.png`,
@@ -936,7 +950,7 @@ function processLoadedImage(
       options.imageMode,
       255
     )
-    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
 
     results.push({
       name: `${String(pageNum).padStart(4, '0')}_0_page.png`,
@@ -955,7 +969,7 @@ function processLoadedImage(
         const letter = String.fromCharCode(97 + idx)
         const pageCanvas = extractAndRotate(canvas, seg.x, seg.y, seg.w, seg.h, landscapeRotation)
         const finalCanvas = resizeWithPadding(pageCanvas, 255, targetWidth, targetHeight)
-        applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+        applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
 
         results.push({
           name: `${String(pageNum).padStart(4, '0')}_3_${letter}.png`,
@@ -967,7 +981,7 @@ function processLoadedImage(
 
       const topCanvas = extractAndRotate(canvas, 0, 0, width, halfHeight, landscapeRotation)
       const topFinal = resizeWithPadding(topCanvas, 255, targetWidth, targetHeight)
-      applyDithering(topFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+      applyDithering(topFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
       results.push({
         name: `${String(pageNum).padStart(4, '0')}_2_a.png`,
         canvas: topFinal
@@ -975,7 +989,7 @@ function processLoadedImage(
 
       const bottomCanvas = extractAndRotate(canvas, 0, halfHeight, width, halfHeight, landscapeRotation)
       const bottomFinal = resizeWithPadding(bottomCanvas, 255, targetWidth, targetHeight)
-      applyDithering(bottomFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+      applyDithering(bottomFinal.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
       results.push({
         name: `${String(pageNum).padStart(4, '0')}_2_b.png`,
         canvas: bottomFinal
@@ -984,7 +998,7 @@ function processLoadedImage(
   } else {
     const rotatedCanvas = rotateCanvas(canvas, landscapeRotation)
     const finalCanvas = resizeWithPadding(rotatedCanvas, 255, targetWidth, targetHeight)
-    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering)
+    applyDithering(finalCanvas.getContext('2d')!, targetWidth, targetHeight, options.dithering, options.is2bit)
 
     results.push({
       name: `${String(pageNum).padStart(4, '0')}_0_spread.png`,
diff --git a/src/lib/merge.ts b/src/lib/merge.ts
index f6a1ba9..ed322a4 100644
--- a/src/lib/merge.ts
+++ b/src/lib/merge.ts
@@ -2,7 +2,7 @@
 
 import JSZip from 'jszip'
 import { PDFDocument } from 'pdf-lib'
-import { buildXtc } from './xtc-format'
+import { buildXtc, buildXtcFromBuffers } from './xtc-format'
 import { extractXtcPages, extractXtcRawPages, parseXtcFile } from './xtc-reader'
 import { loadPdfDocument } from './pdfjs'
 import { TARGET_WIDTH, TARGET_HEIGHT } from './processing/canvas'
@@ -39,6 +39,7 @@ export function detectFileType(file: File): FileType {
     case 'pdf':
       return 'pdf'
     case 'xtc':
+    case 'xtch':
       return 'xtc'
     default:
       return 'unknown'
@@ -320,8 +321,9 @@ export async function mergeXtcFiles(
   onProgress: (progress: MergeProgress) => void
 ): Promise<MergeResult> {
   if (outputFormat === 'xtc') {
-    // Fast path: concatenate raw XTG data without decoding
+    // Fast path: concatenate raw XTG/XTH data without decoding.
     const allXtgData: ArrayBuffer[] = []
+    let is2bit: boolean | null = null
 
     for (let fileIdx = 0; fileIdx < files.length; fileIdx++) {
       const file = files[fileIdx]
@@ -333,6 +335,12 @@ export async function mergeXtcFiles(
       })
 
       const buffer = await file.arrayBuffer()
+      const parsed = await parseXtcFile(buffer, 0)
+      if (is2bit === null) {
+        is2bit = parsed.header.is2bit
+      } else if (parsed.header.is2bit !== is2bit) {
+        throw new Error('Cannot merge XTC and XTCH files together')
+      }
       const rawPages = await extractXtcRawPages(buffer)
       allXtgData.push(...rawPages)
 
@@ -344,9 +352,9 @@ export async function mergeXtcFiles(
       })
     }
 
-    const data = buildXtcFromRawPages(allXtgData)
+    const data = await buildXtcFromBuffers(allXtgData, { is2bit: is2bit ?? false })
     return {
-      name: 'merged.xtc',
+      name: `merged.${is2bit ? 'xtch' : 'xtc'}`,
       data,
       size: data.byteLength,
       pageCount: allXtgData.length,
@@ -436,74 +444,6 @@ export async function splitPdf(
   return results
 }
 
-/**
- * Build XTC from raw XTG page data (fast path for XTC merge)
- */
-function buildXtcFromRawPages(xtgBlobs: ArrayBuffer[]): ArrayBuffer {
-  const pageCount = xtgBlobs.length
-  const headerSize = 48
-  const indexEntrySize = 16
-  const indexOffset = headerSize
-  const dataOffset = indexOffset + pageCount * indexEntrySize
-
-  let totalSize = dataOffset
-  for (const blob of xtgBlobs) {
-    totalSize += blob.byteLength
-  }
-
-  const buffer = new ArrayBuffer(totalSize)
-  const view = new DataView(buffer)
-  const uint8 = new Uint8Array(buffer)
-
-  // Header: XTC magic number
-  uint8[0] = 0x58; uint8[1] = 0x54; uint8[2] = 0x43; uint8[3] = 0x00
-  view.setUint16(4, 1, true) // version
-  view.setUint16(6, pageCount, true)
-  view.setUint8(8, 0)
-  view.setUint8(9, 0)
-  view.setUint8(10, 0)
-  view.setUint8(11, 0)
-  view.setUint32(12, 0, true)
-
-  setBigUint64(view, 16, 0n)
-  setBigUint64(view, 24, BigInt(indexOffset))
-  setBigUint64(view, 32, BigInt(dataOffset))
-  setBigUint64(view, 40, 0n)
-
-  // Write index entries
-  let relOffset = dataOffset
-  for (let i = 0; i < pageCount; i++) {
-    const blob = xtgBlobs[i]
-    const entryOffset = indexOffset + i * indexEntrySize
-
-    setBigUint64(view, entryOffset, BigInt(relOffset))
-    view.setUint32(entryOffset + 8, blob.byteLength, true)
-    view.setUint16(entryOffset + 12, TARGET_WIDTH, true)
-    view.setUint16(entryOffset + 14, TARGET_HEIGHT, true)
-
-    relOffset += blob.byteLength
-  }
-
-  // Write page data
-  let writeOffset = dataOffset
-  for (const blob of xtgBlobs) {
-    uint8.set(new Uint8Array(blob), writeOffset)
-    writeOffset += blob.byteLength
-  }
-
-  return buffer
-}
-
-/**
- * Helper to set 64-bit unsigned integer (little-endian)
- */
-function setBigUint64(view: DataView, offset: number, value: bigint): void {
-  const low = Number(value & 0xFFFFFFFFn)
-  const high = Number(value >> 32n)
-  view.setUint32(offset, low, true)
-  view.setUint32(offset + 4, high, true)
-}
-
 /**
  * Convert image blobs to canvases (resized for XTC)
  */
diff --git a/src/lib/processing/dithering.ts b/src/lib/processing/dithering.ts
index ed9f47c..4ce3504 100644
--- a/src/lib/processing/dithering.ts
+++ b/src/lib/processing/dithering.ts
@@ -1,6 +1,16 @@
 // Dithering algorithms optimized for manga on e-ink displays
 // Each algorithm has different characteristics for handling manga art
 
+function quantizePixel(value: number, is2bit: boolean): number {
+  if (!is2bit) {
+    return value >= 128 ? 255 : 0
+  }
+  if (value < 42) return 0
+  if (value < 127) return 85
+  if (value < 212) return 170
+  return 255
+}
+
 /**
  * Applies the selected dithering algorithm to canvas
  */
@@ -8,41 +18,42 @@ export function applyDithering(
   ctx: CanvasRenderingContext2D,
   width: number,
   height: number,
-  algorithm: string
+  algorithm: string,
+  is2bit = false
 ): void {
-  const imageData = ctx.getImageData(0, 0, width, height);
-  const data = imageData.data;
+  const imageData = ctx.getImageData(0, 0, width, height)
+  const data = imageData.data
 
   switch (algorithm) {
     case 'none':
-      applyThreshold(data);
-      break;
+      applyThreshold(data, is2bit)
+      break
     case 'sierra-lite':
-      applySierraLite(data, width, height);
-      break;
+      applySierraLite(data, width, height, is2bit)
+      break
     case 'atkinson':
-      applyAtkinson(data, width, height);
-      break;
+      applyAtkinson(data, width, height, is2bit)
+      break
     case 'floyd':
-      applyFloydSteinberg(data, width, height);
-      break;
+      applyFloydSteinberg(data, width, height, is2bit)
+      break
     case 'ordered':
-      applyOrdered(data, width, height);
-      break;
+      applyOrdered(data, width, height, is2bit)
+      break
     default:
-      applyFloydSteinberg(data, width, height);
+      applyFloydSteinberg(data, width, height, is2bit)
   }
 
-  ctx.putImageData(imageData, 0, 0);
+  ctx.putImageData(imageData, 0, 0)
 }
 
 /**
  * Simple threshold - no dithering
  */
-function applyThreshold(data: Uint8ClampedArray): void {
+function applyThreshold(data: Uint8ClampedArray, is2bit: boolean): void {
   for (let i = 0; i < data.length; i += 4) {
-    const val = data[i] >= 128 ? 255 : 0;
-    data[i] = data[i + 1] = data[i + 2] = val;
+    const val = quantizePixel(data[i], is2bit)
+    data[i] = data[i + 1] = data[i + 2] = val
   }
 }
 
@@ -54,32 +65,36 @@ function applyThreshold(data: Uint8ClampedArray): void {
  *     1   1
  * Divider: 4
  */
-function applySierraLite(data: Uint8ClampedArray, width: number, height: number): void {
-  const pixels = new Float32Array(width * height);
+function applySierraLite(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  is2bit: boolean
+): void {
+  const pixels = new Float32Array(width * height)
   for (let i = 0; i < pixels.length; i++) {
-    pixels[i] = data[i * 4];
+    pixels[i] = data[i * 4]
   }
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const idx = y * width + x;
-      const oldPixel = pixels[idx];
-      const newPixel = oldPixel >= 128 ? 255 : 0;
-      pixels[idx] = newPixel;
-      const error = oldPixel - newPixel;
-
-      // Distribute error
-      if (x + 1 < width) pixels[idx + 1] += error * 2 / 4;
+      const idx = y * width + x
+      const oldPixel = pixels[idx]
+      const newPixel = quantizePixel(oldPixel, is2bit)
+      pixels[idx] = newPixel
+      const error = oldPixel - newPixel
+
+      if (x + 1 < width) pixels[idx + 1] += error * 2 / 4
       if (y + 1 < height) {
-        if (x > 0) pixels[idx + width - 1] += error * 1 / 4;
-        pixels[idx + width] += error * 1 / 4;
+        if (x > 0) pixels[idx + width - 1] += error * 1 / 4
+        pixels[idx + width] += error * 1 / 4
       }
     }
   }
 
   for (let i = 0; i < pixels.length; i++) {
-    const val = Math.max(0, Math.min(255, pixels[i]));
-    data[i * 4] = data[i * 4 + 1] = data[i * 4 + 2] = val;
+    const val = Math.max(0, Math.min(255, pixels[i]))
+    data[i * 4] = data[i * 4 + 1] = data[i * 4 + 2] = val
   }
 }
 
@@ -88,36 +103,41 @@ function applySierraLite(data: Uint8ClampedArray, width: number, height: number)
  * Creates lighter images, good for preventing dark pages
  * Only distributes 75% of error (6/8)
  */
-function applyAtkinson(data: Uint8ClampedArray, width: number, height: number): void {
-  const pixels = new Float32Array(width * height);
+function applyAtkinson(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  is2bit: boolean
+): void {
+  const pixels = new Float32Array(width * height)
   for (let i = 0; i < pixels.length; i++) {
-    pixels[i] = data[i * 4];
+    pixels[i] = data[i * 4]
   }
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const idx = y * width + x;
-      const oldPixel = pixels[idx];
-      const newPixel = oldPixel >= 128 ? 255 : 0;
-      pixels[idx] = newPixel;
-      const error = (oldPixel - newPixel) / 8;
-
-      if (x + 1 < width) pixels[idx + 1] += error;
-      if (x + 2 < width) pixels[idx + 2] += error;
+      const idx = y * width + x
+      const oldPixel = pixels[idx]
+      const newPixel = quantizePixel(oldPixel, is2bit)
+      pixels[idx] = newPixel
+      const error = (oldPixel - newPixel) / 8
+
+      if (x + 1 < width) pixels[idx + 1] += error
+      if (x + 2 < width) pixels[idx + 2] += error
       if (y + 1 < height) {
-        if (x > 0) pixels[idx + width - 1] += error;
-        pixels[idx + width] += error;
-        if (x + 1 < width) pixels[idx + width + 1] += error;
+        if (x > 0) pixels[idx + width - 1] += error
+        pixels[idx + width] += error
+        if (x + 1 < width) pixels[idx + width + 1] += error
       }
       if (y + 2 < height) {
-        pixels[idx + width * 2] += error;
+        pixels[idx + width * 2] += error
       }
     }
   }
 
   for (let i = 0; i < pixels.length; i++) {
-    const val = Math.max(0, Math.min(255, pixels[i]));
-    data[i * 4] = data[i * 4 + 1] = data[i * 4 + 2] = val;
+    const val = Math.max(0, Math.min(255, pixels[i]))
+    data[i * 4] = data[i * 4 + 1] = data[i * 4 + 2] = val
   }
 }
 
@@ -125,32 +145,37 @@ function applyAtkinson(data: Uint8ClampedArray, width: number, height: number):
  * Floyd-Steinberg dithering
  * The classic algorithm, good balance
  */
-function applyFloydSteinberg(data: Uint8ClampedArray, width: number, height: number): void {
-  const pixels = new Float32Array(width * height);
+function applyFloydSteinberg(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  is2bit: boolean
+): void {
+  const pixels = new Float32Array(width * height)
   for (let i = 0; i < pixels.length; i++) {
-    pixels[i] = data[i * 4];
+    pixels[i] = data[i * 4]
   }
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const idx = y * width + x;
-      const oldPixel = pixels[idx];
-      const newPixel = oldPixel >= 128 ? 255 : 0;
-      pixels[idx] = newPixel;
-      const error = oldPixel - newPixel;
+      const idx = y * width + x
+      const oldPixel = pixels[idx]
+      const newPixel = quantizePixel(oldPixel, is2bit)
+      pixels[idx] = newPixel
+      const error = oldPixel - newPixel
 
-      if (x + 1 < width) pixels[idx + 1] += error * 7 / 16;
+      if (x + 1 < width) pixels[idx + 1] += error * 7 / 16
       if (y + 1 < height) {
-        if (x > 0) pixels[idx + width - 1] += error * 3 / 16;
-        pixels[idx + width] += error * 5 / 16;
-        if (x + 1 < width) pixels[idx + width + 1] += error * 1 / 16;
+        if (x > 0) pixels[idx + width - 1] += error * 3 / 16
+        pixels[idx + width] += error * 5 / 16
+        if (x + 1 < width) pixels[idx + width + 1] += error * 1 / 16
       }
     }
   }
 
   for (let i = 0; i < pixels.length; i++) {
-    const val = Math.max(0, Math.min(255, pixels[i]));
-    data[i * 4] = data[i * 4 + 1] = data[i * 4 + 2] = val;
+    const val = Math.max(0, Math.min(255, pixels[i]))
+    data[i * 4] = data[i * 4 + 1] = data[i * 4 + 2] = val
   }
 }
 
@@ -158,20 +183,34 @@ function applyFloydSteinberg(data: Uint8ClampedArray, width: number, height: num
  * Ordered/Bayer dithering
  * Creates regular patterns
  */
-function applyOrdered(data: Uint8ClampedArray, width: number, height: number): void {
+function applyOrdered(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  is2bit: boolean
+): void {
   const bayer = [
     [0, 8, 2, 10],
     [12, 4, 14, 6],
     [3, 11, 1, 9],
     [15, 7, 13, 5]
-  ];
+  ]
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const idx = (y * width + x) * 4;
-      const threshold = (bayer[y % 4][x % 4] / 16) * 255;
-      const val = data[idx] > threshold ? 255 : 0;
-      data[idx] = data[idx + 1] = data[idx + 2] = val;
+      const idx = (y * width + x) * 4
+      const matrixValue = bayer[y % 4][x % 4]
+
+      let val: number
+      if (is2bit) {
+        const adjusted = data[idx] + ((matrixValue + 0.5) / 16 - 0.5) * 64
+        val = quantizePixel(Math.max(0, Math.min(255, adjusted)), true)
+      } else {
+        const threshold = (matrixValue / 16) * 255
+        val = data[idx] > threshold ? 255 : 0
+      }
+
+      data[idx] = data[idx + 1] = data[idx + 2] = val
     }
   }
 }
diff --git a/src/lib/processing/xtg.ts b/src/lib/processing/xtg.ts
index 252e871..87cce34 100644
--- a/src/lib/processing/xtg.ts
+++ b/src/lib/processing/xtg.ts
@@ -1,5 +1,13 @@
+function createDigestSeed(data: Uint8Array): Uint8Array {
+  const digest = new Uint8Array(8)
+  for (let i = 0; i < Math.min(8, data.length); i++) {
+    digest[i] = data[i]
+  }
+  return digest
+}
+
 /**
- * Convert ImageData to XTG format (XTEink Graphics).
+ * Convert ImageData to XTG format (XTEink Graphics, 1-bit row-major).
  */
 export function imageDataToXtg(imageData: ImageData): ArrayBuffer {
   const w = imageData.width
@@ -21,27 +29,76 @@ export function imageDataToXtg(imageData: ImageData): ArrayBuffer {
     }
   }
 
-  // Create MD5-like digest (simplified)
-  const md5digest = new Uint8Array(8)
-  for (let i = 0; i < Math.min(8, pixelData.length); i++) {
-    md5digest[i] = pixelData[i]
+  return buildPageBuffer('XTG', w, h, pixelData)
+}
+
+/**
+ * Convert ImageData to XTH format (XTEink 2-bit grayscale, planar vertical scan).
+ * Layout matches the reference encoders in cbz2xtc and xtcjsapp:
+ * columns are stored right-to-left, then split into two bitplanes.
+ */
+export function imageDataToXth(imageData: ImageData): ArrayBuffer {
+  const w = imageData.width
+  const h = imageData.height
+  const data = imageData.data
+
+  const colBytes = Math.ceil(h / 8)
+  const planeSize = colBytes * w
+  const plane0 = new Uint8Array(planeSize)
+  const plane1 = new Uint8Array(planeSize)
+
+  for (let x = 0; x < w; x++) {
+    const targetCol = w - 1 - x
+    const colOffset = targetCol * colBytes
+
+    for (let y = 0; y < h; y++) {
+      const idx = (y * w + x) * 4
+      const val = get2BitLevel(data[idx])
+      const byteIdx = colOffset + (y >> 3)
+      const bitIdx = 7 - (y & 7)
+
+      if (val & 1) {
+        plane0[byteIdx] |= 1 << bitIdx
+      }
+      if (val & 2) {
+        plane1[byteIdx] |= 1 << bitIdx
+      }
+    }
   }
 
+  const pixelData = new Uint8Array(planeSize * 2)
+  pixelData.set(plane0, 0)
+  pixelData.set(plane1, planeSize)
+
+  return buildPageBuffer('XTH', w, h, pixelData)
+}
+
+function get2BitLevel(value: number): number {
+  if (value >= 212) return 0
+  if (value >= 127) return 1
+  if (value >= 42) return 2
+  return 3
+}
+
+function buildPageBuffer(magic: 'XTG' | 'XTH', width: number, height: number, pixelData: Uint8Array): ArrayBuffer {
+  const digest = createDigestSeed(pixelData)
   const headerSize = 22
   const totalSize = headerSize + pixelData.length
   const buffer = new ArrayBuffer(totalSize)
   const view = new DataView(buffer)
   const uint8 = new Uint8Array(buffer)
 
-  // XTG header
-  uint8[0] = 0x58; uint8[1] = 0x54; uint8[2] = 0x47; uint8[3] = 0x00
-  view.setUint16(4, w, true)
-  view.setUint16(6, h, true)
+  uint8[0] = magic.charCodeAt(0)
+  uint8[1] = magic.charCodeAt(1)
+  uint8[2] = magic.charCodeAt(2)
+  uint8[3] = 0x00
+  view.setUint16(4, width, true)
+  view.setUint16(6, height, true)
   view.setUint8(8, 0)
   view.setUint8(9, 0)
   view.setUint32(10, pixelData.length, true)
-  uint8.set(md5digest, 14)
-
+  uint8.set(digest, 14)
   uint8.set(pixelData, headerSize)
+
   return buffer
 }
diff --git a/src/lib/split.ts b/src/lib/split.ts
index 003e22c..99ac276 100644
--- a/src/lib/split.ts
+++ b/src/lib/split.ts
@@ -1,8 +1,8 @@
 // Split logic for CBZ, PDF, and XTC files
 
 import JSZip from 'jszip'
-import { buildXtc } from './xtc-format'
-import { parseXtcFile } from './xtc-reader'
+import { buildXtc, buildXtcFromBuffers } from './xtc-format'
+import { decodeXtcPageToCanvas, parseXtcFile } from './xtc-reader'
 import { buildCbz, splitPdf, type OutputFormat, detectFileType } from './merge'
 import { loadPdfDocument } from './pdfjs'
 import { TARGET_WIDTH, TARGET_HEIGHT } from './processing/canvas'
@@ -376,8 +376,9 @@ async function splitXtcFile(
 ): Promise<SplitResult[]> {
   const buffer = await file.arrayBuffer()
   const parsed = await parseXtcFile(buffer)
+  const is2bit = parsed.header.is2bit
 
-  const baseName = file.name.replace(/\.xtc$/i, '')
+  const baseName = file.name.replace(/\.xtch?$/i, '')
   const results: SplitResult[] = []
 
   for (let rangeIdx = 0; rangeIdx < ranges.length; rangeIdx++) {
@@ -394,16 +395,16 @@ async function splitXtcFile(
     const rangePages = parsed.pageData.slice(range.start - 1, range.end)
 
     if (outputFormat === 'xtc') {
-      const data = buildXtcFromRawPages(rangePages)
+      const data = await buildXtcFromBuffers(rangePages, { is2bit })
       results.push({
-        name: `${baseName}_part${rangeIdx + 1}.xtc`,
+        name: `${baseName}_part${rangeIdx + 1}.${is2bit ? 'xtch' : 'xtc'}`,
         data,
         size: data.byteLength,
         pageCount: rangePages.length,
       })
     } else {
       // Decode to CBZ
-      const canvases = rangePages.map(data => decodeXtgToCanvas(data))
+      const canvases = rangePages.map(data => decodeXtcPageToCanvas(data))
       const images = canvases.map((canvas, i) => ({
         name: `${String(i + 1).padStart(5, '0')}.png`,
         blob: dataURLtoBlob(canvas.toDataURL('image/png')),
@@ -429,98 +430,6 @@ async function splitXtcFile(
   return results
 }
 
-/**
- * Decode XTG to canvas (inline to avoid import cycle)
- */
-function decodeXtgToCanvas(xtgBuffer: ArrayBuffer): HTMLCanvasElement {
-  const view = new DataView(xtgBuffer)
-  const uint8 = new Uint8Array(xtgBuffer)
-
-  const width = view.getUint16(4, true)
-  const height = view.getUint16(6, true)
-  const pixelDataSize = view.getUint32(10, true)
-
-  const headerSize = 22
-  const pixelData = new Uint8Array(xtgBuffer, headerSize, pixelDataSize)
-
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d')!
-
-  const imageData = ctx.createImageData(width, height)
-  const data = imageData.data
-
-  const rowBytes = Math.ceil(width / 8)
-
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const byteIndex = y * rowBytes + Math.floor(x / 8)
-      const bitIndex = 7 - (x % 8)
-      const bit = (pixelData[byteIndex] >> bitIndex) & 1
-
-      const idx = (y * width + x) * 4
-      const color = bit ? 255 : 0
-      data[idx] = color
-      data[idx + 1] = color
-      data[idx + 2] = color
-      data[idx + 3] = 255
-    }
-  }
-
-  ctx.putImageData(imageData, 0, 0)
-  return canvas
-}
-
-/**
- * Build XTC from raw XTG page data
- */
-function buildXtcFromRawPages(xtgBlobs: ArrayBuffer[]): ArrayBuffer {
-  const pageCount = xtgBlobs.length
-  const headerSize = 48
-  const indexEntrySize = 16
-  const indexOffset = headerSize
-  const dataOffset = indexOffset + pageCount * indexEntrySize
-
-  let totalSize = dataOffset
-  for (const blob of xtgBlobs) totalSize += blob.byteLength
-
-  const buffer = new ArrayBuffer(totalSize)
-  const view = new DataView(buffer)
-  const uint8 = new Uint8Array(buffer)
-
-  uint8[0] = 0x58; uint8[1] = 0x54; uint8[2] = 0x43; uint8[3] = 0x00
-  view.setUint16(4, 1, true)
-  view.setUint16(6, pageCount, true)
-
-  setBigUint64(view, 24, BigInt(indexOffset))
-  setBigUint64(view, 32, BigInt(dataOffset))
-
-  let relOffset = dataOffset
-  for (let i = 0; i < pageCount; i++) {
-    const blob = xtgBlobs[i]
-    const entryOffset = indexOffset + i * indexEntrySize
-    setBigUint64(view, entryOffset, BigInt(relOffset))
-    view.setUint32(entryOffset + 8, blob.byteLength, true)
-    view.setUint16(entryOffset + 12, TARGET_WIDTH, true)
-    view.setUint16(entryOffset + 14, TARGET_HEIGHT, true)
-    relOffset += blob.byteLength
-  }
-
-  let writeOffset = dataOffset
-  for (const blob of xtgBlobs) {
-    uint8.set(new Uint8Array(blob), writeOffset)
-    writeOffset += blob.byteLength
-  }
-
-  return buffer
-}
-
-function setBigUint64(view: DataView, offset: number, value: bigint): void {
-  view.setUint32(offset, Number(value & 0xFFFFFFFFn), true)
-  view.setUint32(offset + 4, Number(value >> 32n), true)
-}
-
 async function blobsToCanvases(blobs: Blob[]): Promise<HTMLCanvasElement[]> {
   return Promise.all(blobs.map(blobToCanvas))
 }
diff --git a/src/lib/workers/convert-page.worker.ts b/src/lib/workers/convert-page.worker.ts
index 653a08e..e834c95 100644
--- a/src/lib/workers/convert-page.worker.ts
+++ b/src/lib/workers/convert-page.worker.ts
@@ -1,6 +1,6 @@
 import { applyDithering } from '../processing/dithering'
 import { applyContrast, calculateOverlapSegments, toGrayscale } from '../processing/image'
-import { imageDataToXtg } from '../processing/xtg'
+import { imageDataToXtg, imageDataToXth } from '../processing/xtg'
 import type { ConversionOptions } from '../conversion/types'
 
 interface CropRect {
@@ -124,10 +124,12 @@ async function buildWorkerPage(
   canvas: OffscreenCanvas,
   includePreview: boolean,
   targetWidth: number,
-  targetHeight: number
+  targetHeight: number,
+  is2bit: boolean
 ): Promise<WorkerPageResult> {
   const ctx = canvas.getContext('2d', { alpha: false })!
-  const xtg = imageDataToXtg(ctx.getImageData(0, 0, targetWidth, targetHeight))
+  const imageData = ctx.getImageData(0, 0, targetWidth, targetHeight)
+  const xtg = is2bit ? imageDataToXth(imageData) : imageDataToXtg(imageData)
 
   if (!includePreview) {
     return { name, xtg }
@@ -185,14 +187,16 @@ async function processBitmap(
       asCanvas2d(finalCanvas.getContext('2d', { alpha: false })!),
       targetWidth,
       targetHeight,
-      options.dithering
+      options.dithering,
+      options.is2bit
     )
     results.push(await buildWorkerPage(
       `${String(pageNum).padStart(4, '0')}_0_page.png`,
       finalCanvas,
       includePreview,
       targetWidth,
-      targetHeight
+      targetHeight,
+      options.is2bit
     ))
     return results
   }
@@ -213,7 +217,8 @@ async function processBitmap(
           asCanvas2d(finalCanvas.getContext('2d', { alpha: false })!),
           targetWidth,
           targetHeight,
-          options.dithering
+          options.dithering,
+          options.is2bit
         )
 
         results.push(await buildWorkerPage(
@@ -221,7 +226,8 @@ async function processBitmap(
           finalCanvas,
           includePreview && !previewAssigned,
           targetWidth,
-          targetHeight
+          targetHeight,
+          options.is2bit
         ))
         previewAssigned = true
       }
@@ -234,14 +240,16 @@ async function processBitmap(
         asCanvas2d(topFinal.getContext('2d', { alpha: false })!),
         targetWidth,
         targetHeight,
-        options.dithering
+        options.dithering,
+        options.is2bit
       )
       results.push(await buildWorkerPage(
         `${String(pageNum).padStart(4, '0')}_2_a.png`,
         topFinal,
         includePreview && !previewAssigned,
         targetWidth,
-        targetHeight
+        targetHeight,
+        options.is2bit
       ))
       previewAssigned = true
 
@@ -251,14 +259,16 @@ async function processBitmap(
         asCanvas2d(bottomFinal.getContext('2d', { alpha: false })!),
         targetWidth,
         targetHeight,
-        options.dithering
+        options.dithering,
+        options.is2bit
       )
       results.push(await buildWorkerPage(
         `${String(pageNum).padStart(4, '0')}_2_b.png`,
         bottomFinal,
         includePreview && !previewAssigned,
         targetWidth,
-        targetHeight
+        targetHeight,
+        options.is2bit
       ))
     }
   } else {
@@ -268,14 +278,16 @@ async function processBitmap(
       asCanvas2d(finalCanvas.getContext('2d', { alpha: false })!),
       targetWidth,
       targetHeight,
-      options.dithering
+      options.dithering,
+      options.is2bit
     )
     results.push(await buildWorkerPage(
       `${String(pageNum).padStart(4, '0')}_0_spread.png`,
       finalCanvas,
       includePreview,
       targetWidth,
-      targetHeight
+      targetHeight,
+      options.is2bit
     ))
   }
 
diff --git a/src/lib/xtc-format.ts b/src/lib/xtc-format.ts
index 90c07a0..43ccea0 100644
--- a/src/lib/xtc-format.ts
+++ b/src/lib/xtc-format.ts
@@ -1,7 +1,7 @@
 // XTC format generation for XTEink X4 e-reader
 
 import type { BookMetadata, TocEntry } from './metadata/types';
-import { imageDataToXtg } from './processing/xtg';
+import { imageDataToXtg, imageDataToXth } from './processing/xtg';
 
 interface ProcessedPage {
   name: string;
@@ -47,8 +47,11 @@ export async function buildXtc(
   pages: ProcessedPage[],
   options: XtcBuildOptions = {}
 ): Promise<ArrayBuffer> {
+  const is2bit = options.is2bit || false
   const xtgBlobs = pages.map(page =>
-    imageDataToXtg(page.canvas.getContext('2d')!.getImageData(0, 0, page.canvas.width, page.canvas.height))
+    is2bit
+      ? imageDataToXth(page.canvas.getContext('2d')!.getImageData(0, 0, page.canvas.width, page.canvas.height))
+      : imageDataToXtg(page.canvas.getContext('2d')!.getImageData(0, 0, page.canvas.width, page.canvas.height))
   );
 
   return buildXtcFromXtgPages(xtgBlobs, options);
diff --git a/src/routes/about.tsx b/src/routes/about.tsx
index ee2a2cb..c38de65 100644
--- a/src/routes/about.tsx
+++ b/src/routes/about.tsx
@@ -11,7 +11,7 @@ function AboutPage() {
         <h1>About XTC.js</h1>
         <p>
           XTC.js is a free, browser-based converter that transforms your CBZ comic archives and PDF documents
-          into XTC format, optimized for the <strong>XTEink X4 e-reader</strong>. 
+          into XTC or XTCH format, optimized for the <strong>XTEink X4 e-reader</strong>.
           It runs entirely in your browser — your files never leave your device, ensuring complete privacy.
         </p>
       </section>
@@ -20,7 +20,8 @@ function AboutPage() {
         <h2>Features</h2>
         <ul className="feature-list">
           <li><strong>Privacy-first:</strong> All processing happens locally in your browser. No uploads, no servers, no tracking.</li>
-          <li><strong>Multiple formats:</strong> Convert CBZ (manga/comics) and PDF documents to XTC.</li>
+          <li><strong>Multiple formats:</strong> Convert CBZ (manga/comics), PDFs, images, and video frames to XTC or XTCH.</li>
+          <li><strong>XTCH 2-bit mode:</strong> Use 4 grayscale levels for smoother screentones and cleaner gradients on supported devices.</li>
           <li><strong>Dithering options:</strong> Choose from Floyd-Steinberg, Atkinson, Sierra-Lite, Ordered, or no dithering for optimal e-ink display.</li>
           <li><strong>Contrast adjustment:</strong> Fine-tune contrast levels for better readability on e-ink screens.</li>
           <li><strong>Smart splitting:</strong> Automatically splits landscape pages for portrait e-reader displays.</li>
@@ -35,16 +36,16 @@ function AboutPage() {
           <li><strong>Select files:</strong> Drag and drop your CBZ or PDF files, or click to browse.</li>
           <li><strong>Adjust settings:</strong> Choose your preferred dithering algorithm and contrast level.</li>
           <li><strong>Convert:</strong> Click the convert button and watch the real-time preview.</li>
-          <li><strong>Download:</strong> Save your XTC files and transfer them to your XTEink X4.</li>
+          <li><strong>Download:</strong> Save your XTC or XTCH files and transfer them to your XTEink X4.</li>
         </ol>
       </section>
 
       <section className="content-section">
         <h2>About the XTC Format</h2>
         <p>
-          XTC is the native format for the XTEink X4 e-reader. It contains optimized 1-bit (black and white)
-          images at 480×800 resolution, specifically designed for e-ink displays. The format uses efficient
-          compression to minimize file size while maintaining excellent readability for manga, comics, and documents.
+          XTC is the native 1-bit format for the XTEink X4 e-reader. XTCH is its 2-bit grayscale variant and can
+          preserve screentones and shaded artwork more cleanly. Both formats use 480×800 pages designed for e-ink
+          displays and are optimized for manga, comics, and documents.
         </p>
       </section>
 
diff --git a/src/routes/image.tsx b/src/routes/image.tsx
index 4fffc8b..f4283ee 100644
--- a/src/routes/image.tsx
+++ b/src/routes/image.tsx
@@ -9,7 +9,7 @@ function ImagePage() {
   return (
     <ConverterPage
       fileType="image"
-      notice="Convert image files to XTC with dedicated scaling modes for wallpapers and covers."
+      notice="Convert image files to XTC or XTCH with dedicated scaling modes for wallpapers and covers."
     />
   )
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 01dfa63..1d4fb25 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -9,7 +9,7 @@ function MangaPage() {
   return (
     <ConverterPage
       fileType="cbz"
-      notice="A CBZ -> XTC converter for your manga. Recommended settings are selected by default"
+      notice="A CBZ -> XTC/XTCH converter for your manga. Recommended settings are selected by default."
     />
   )
 }
diff --git a/src/routes/video.tsx b/src/routes/video.tsx
index be1deca..6efcd9f 100644
--- a/src/routes/video.tsx
+++ b/src/routes/video.tsx
@@ -9,7 +9,7 @@ function VideoPage() {
   return (
     <ConverterPage
       fileType="video"
-      notice="Extract frames from video files and convert them to XTC for animated reading sequences."
+      notice="Extract frames from video files and convert them to XTC or XTCH for animated reading sequences."
     />
   )
 }