feat: deploy quote-api to Hugging Face Spaces

.dockerignore

@@ -0,0 +1,48 @@
+# Dependencies
+node_modules
+
+# Git
+.git
+.gitignore
+
+# Environment
+.env
+.env.*
+!.env.example
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
+
+# Testing & Coverage
+coverage
+.nyc_output
+
+# Documentation
+*.md
+!README.md
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Build artifacts
+build
+dist
+
+# Docker (don't copy docker files into image)
+Dockerfile
+docker-compose*.yml
+.dockerignore
+nginx*.conf
+
+# Dev tools
+.eslintrc*
+.editorconfig
+.github

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2

.env.example

@@ -0,0 +1,3 @@
+PORT="4888"
+BOT_TOKEN=""
+EMOJI_DOMAIN="https://emojipedia.org/"

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "env": {
+        "es6": true,
+        "node": true
+    },
+    "extends": "standard",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

.gitattributes

@@ -0,0 +1,7 @@
+assets/emoji/*.json filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

.github/workflows/docker.yml

@@ -0,0 +1,55 @@
+name: Docker
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+                type=raw,value=latest
+                type=ref,event=tag
+                type=sha
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.gitignore

@@ -0,0 +1,44 @@
+# Dependencies
+node_modules/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+
+# Runtime
+pids/
+*.pid
+*.pid.lock
+
+# Coverage
+coverage/
+.nyc_output/
+
+# Build
+build/
+dist/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Project specific
+assets/fonts/*
+assets/emojis/*
+!.gitkeep
+.superpowers/
+test-output/
+assets/fonts/*.ttf

Dockerfile

@@ -0,0 +1,44 @@
+# Hugging Face Spaces — quote-api
+# Port wajib 7860 sesuai requirement HF Spaces Docker.
+FROM node:22-bookworm AS builder
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential g++ make python3 \
+    libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev libpixman-1-dev pkg-config \
+ && rm -rf /var/lib/apt/lists/*
+
+COPY package*.json ./
+RUN npm ci --omit=dev
+
+# ── Runtime stage ──────────────────────────────────────────────
+FROM node:22-bookworm-slim
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+# HF Spaces hanya expose port 7860
+ENV PORT=7860
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    fonts-noto fonts-noto-cjk fonts-noto-extra fontconfig \
+    libcairo2 libpango-1.0-0 libpangocairo-1.0-0 libjpeg62-turbo libgif7 librsvg2-2 libpixman-1-0 libvips42 \
+    ffmpeg curl \
+ && rm -rf /var/lib/apt/lists/* \
+ && fc-cache -f -v
+
+# HF Spaces menjalankan container sebagai user 1000 (non-root)
+RUN groupadd -r appuser && useradd -r -g appuser -u 1000 appuser
+
+COPY --from=builder /app/node_modules ./node_modules
+COPY --chown=appuser:appuser . .
+
+USER appuser
+
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+CMD ["node", "index.js"]

README.md

@@ -0,0 +1,30 @@
+---
+title: Quote API
+emoji: 💬
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+short_description: Quote image generation API for Telegram bots
+---
+
+# Quote API
+
+REST API untuk generate gambar quote, digunakan oleh Telegram bot.
+
+## Endpoint
+
+```
+POST /generate
+GET  /health
+```
+
+## Environment Variables (Secrets)
+
+| Nama | Keterangan |
+|---|---|
+| `BOT_TOKEN` | Token bot Telegram (untuk bypass rate limit) |
+| `EMOJI_DOMAIN` | Domain emoji (default: `https://emojipedia.org/`) |
+
+> Port yang digunakan: **7860** (wajib untuk HF Spaces Docker).

app.js

@@ -0,0 +1,71 @@
+const logger = require('koa-logger')
+const responseTime = require('koa-response-time')
+const bodyParser = require('koa-bodyparser')
+const ratelimit = require('koa-ratelimit')
+const Router = require('koa-router')
+const Koa = require('koa')
+const { loadFonts } = require('./utils')
+
+const app = new Koa()
+
+app.use(logger())
+app.use(responseTime())
+app.use(bodyParser())
+
+const ratelimitDb = new Map()
+
+app.use(ratelimit({
+  driver: 'memory',
+  db: ratelimitDb,
+  duration: 1000 * 55,
+  errorMessage: {
+    ok: false,
+    error: {
+      code: 429,
+      message: 'Rate limit exceeded. See "Retry-After"'
+    }
+  },
+  id: (ctx) => ctx.ip,
+  headers: {
+    remaining: 'Rate-Limit-Remaining',
+    reset: 'Rate-Limit-Reset',
+    total: 'Rate-Limit-Total'
+  },
+  max: 20,
+  disableHeader: false,
+  whitelist: (ctx) => {
+    // The bot sends its token in the request body (kept out of the URL/access
+    // logs); accept either location so its own requests stay un-throttled.
+    const token = ctx.query.botToken || (ctx.request.body && ctx.request.body.botToken)
+    return token === process.env.BOT_TOKEN
+  },
+  blacklist: (ctx) => {
+  }
+}))
+
+app.use(require('./helpers').helpersApi)
+
+const route = new Router()
+
+const routes = require('./routes')
+
+// Health check endpoint for Docker/Coolify
+route.get('/health', (ctx) => {
+  ctx.status = 200
+  ctx.body = { status: 'ok', timestamp: Date.now() }
+})
+
+route.use('/*', routes.routeApi.routes())
+
+app.use(route.routes())
+
+const port = process.env.PORT || 3000
+
+async function start () {
+  await loadFonts()
+  app.listen(port, () => {
+    console.log('Listening on localhost, port', port)
+  })
+}
+
+start()

assets/emoji/emoji-apple-image.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3d4ea82dc010845551aaea65da156fff95389b6f35a0194281a3e7363d9ad7f
+size 29380588

assets/emoji/emoji-blob-image.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d24c3f079ea99585e6005e66cf3d8f1efd0feee5af58a0474084a4dbed264d83
+size 2092162

assets/emoji/emoji-google-image.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cbfd8c3b184e5d3f5d456ce488c2a13f5e9cba7b45d92acc490b12234716328
+size 18892340

assets/emoji/emoji-joypixels-image.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f9f1323fddae35bd891dfbe5ad218380e78d197834e4a250a073257d487faad
+size 18326902

assets/emoji/emoji-twitter-image.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:17b49c2d0b80e62d383ee6a9798da668106b4bf4a5ab56a56a370f96c280c453
+size 14470600

helpers/api.js

@@ -0,0 +1,47 @@
+module.exports = async (ctx, next) => {
+  ctx.props = Object.assign({}, ctx.query || {}, ctx.request.body || {})
+
+  try {
+    await next()
+
+    if (!ctx.body) {
+      ctx.assert(ctx.result, 404, 'Not Found')
+
+      if (ctx.result.error) {
+        ctx.status = 400
+        ctx.body = {
+          ok: false,
+          error: {
+            code: 400,
+            message: ctx.result.error
+          }
+        }
+      } else {
+        if (ctx.result.ext) {
+          if (ctx.result.ext === 'webp') ctx.response.set('content-type', 'image/webp')
+          if (ctx.result.ext === 'png') ctx.response.set('content-type', 'image/png')
+          ctx.response.set('quote-type', ctx.result.type)
+          ctx.response.set('quote-width', ctx.result.width)
+          ctx.response.set('quote-height', ctx.result.height)
+          ctx.body = ctx.result.image
+        } else {
+          ctx.body = {
+            ok: true,
+            result: ctx.result
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error(error)
+    ctx.status = error.statusCode || error.status || 500
+    ctx.body = {
+      ok: false,
+      error: {
+        code: ctx.status,
+        message: error.message,
+        description: error.description
+      }
+    }
+  }
+}

helpers/index.js

@@ -0,0 +1,5 @@
+const helpersApi = require('./api')
+
+module.exports = {
+  helpersApi
+}

index.js

@@ -0,0 +1,2 @@
+require('dotenv').config({ path: './.env' })
+require('./app')

methods/generate.js

@@ -0,0 +1,339 @@
+const path = require('path')
+const { QuoteGenerate } = require('../utils')
+const { createCanvas, loadImage } = require('canvas')
+const sharp = require('sharp')
+const { parseBackgroundColor, colorLuminance, lightOrDark, hexToHsl, hslToHex } = require('../utils/quote-generate/color')
+const { brands: emojiBrands } = require('../utils/emoji-image')
+
+const ALLOWED_EMOJI_BRANDS = new Set(Object.keys(emojiBrands))
+
+let cachedPatternImage = null
+async function getPatternImage () {
+  if (!cachedPatternImage) {
+    cachedPatternImage = await loadImage(path.join(__dirname, '..', 'assets', 'pattern_02.png'))
+  }
+  return cachedPatternImage
+}
+
+const imageAlpha = (image, alpha) => {
+  const canvas = createCanvas(image.width, image.height)
+  const canvasCtx = canvas.getContext('2d')
+  canvasCtx.globalAlpha = alpha
+  canvasCtx.drawImage(image, 0, 0)
+  return canvas
+}
+
+function normalizeMessage (message) {
+  if (!message.from) {
+    message.from = { id: 0 }
+  }
+  if (!message.from.photo) {
+    message.from.photo = {}
+  }
+  if (message.from.name !== false && !message.from.name && (message.from.first_name || message.from.last_name)) {
+    message.from.name = [message.from.first_name, message.from.last_name]
+      .filter(Boolean)
+      .join(' ')
+  }
+  if (message.replyMessage) {
+    if (!message.replyMessage.chatId) {
+      message.replyMessage.chatId = message.from.id || 0
+    }
+    if (!message.replyMessage.entities) {
+      message.replyMessage.entities = []
+    }
+    if (!message.replyMessage.from) {
+      message.replyMessage.from = {
+        name: message.replyMessage.name,
+        photo: {}
+      }
+    } else if (!message.replyMessage.from.photo) {
+      message.replyMessage.from.photo = {}
+    }
+  }
+}
+
+async function drawPatternBackground (canvas, centerColor, edgeColor, patternImage, patternAlpha) {
+  const ctx = canvas.getContext('2d')
+
+  const gradient = ctx.createRadialGradient(
+    canvas.width / 2, canvas.height / 2, 0,
+    canvas.width / 2, canvas.height / 2, canvas.width / 2
+  )
+  gradient.addColorStop(0, centerColor)
+  gradient.addColorStop(1, edgeColor)
+
+  ctx.fillStyle = gradient
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  const pattern = ctx.createPattern(imageAlpha(patternImage, patternAlpha), 'repeat')
+  ctx.fillStyle = pattern
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+}
+
+// Wallpaper colors derived from the bubble color. The bubble must sit ON the
+// wallpaper, not dissolve into it:
+//  • dark bubbles → a much darker backdrop (luminance drop + vignette);
+//  • light bubbles → a PASTEL backdrop, like Telegram's light wallpapers:
+//    saturate the hue and keep lightness high — darkening a near-white just
+//    makes mud. Near-gray inputs fall back to a soft Telegram-ish blue.
+function wallpaperColors (colorOne) {
+  if (lightOrDark(colorOne) === 'dark') {
+    return {
+      center: colorLuminance(colorOne, -0.35),
+      edge: colorLuminance(colorOne, -0.6),
+      patternAlpha: 0.22
+    }
+  }
+  let [h, s] = hexToHsl(colorOne)
+  if (s < 0.08) {
+    h = 207 // washed-out gray/white → soft blue
+    s = 0.45
+  } else {
+    s = Math.min(1, Math.max(s * 1.8, 0.35))
+  }
+  return {
+    center: hslToHex(h, s, 0.8),
+    edge: hslToHex(h, s, 0.62),
+    patternAlpha: 0.18
+  }
+}
+
+module.exports = async (parm) => {
+  if (!parm) return { error: 'query_empty' }
+  if (!Array.isArray(parm.messages) || parm.messages.length < 1) return { error: 'messages_empty' }
+
+  const botToken = parm.botToken || process.env.BOT_TOKEN
+  const quoteGenerate = new QuoteGenerate(botToken)
+  const rawScale = parseFloat(parm.scale) || 2
+  const scale = Math.min(20, Math.max(1, Number.isFinite(rawScale) ? rawScale : 2))
+  const rawBrand = parm.emojiBrand || 'apple'
+  const emojiBrand = ALLOWED_EMOJI_BRANDS.has(rawBrand) ? rawBrand : 'apple'
+
+  const background = parseBackgroundColor(parm.backgroundColor)
+
+  // Normalize all messages first (sync, no I/O)
+  const validMessages = parm.messages.filter(Boolean)
+  for (const message of validMessages) {
+    normalizeMessage(message)
+  }
+
+  // Same-sender runs render with grouped corners (small radii between
+  // neighbours), like consecutive messages in Telegram. The avatar (and with
+  // it the bubble tail) belongs to the LAST message of a group only — the
+  // reserved left column keeps the other bubbles aligned.
+  for (let i = 0; i < validMessages.length; i++) {
+    const prevSame = i > 0 && validMessages[i - 1].chatId === validMessages[i].chatId
+    const nextSame = i < validMessages.length - 1 && validMessages[i + 1].chatId === validMessages[i].chatId
+    validMessages[i].groupPos = prevSame && nextSame ? 'middle' : prevSame ? 'last' : nextSame ? 'first' : 'single'
+    if (nextSame) validMessages[i].avatar = false
+  }
+
+  // Generate quotes with concurrency limit to avoid Telegram API rate limits
+  const CONCURRENCY = 3
+  const quoteImages = new Array(validMessages.length).fill(null)
+  let running = 0
+  let nextIndex = 0
+
+  await new Promise((resolve) => {
+    function runNext () {
+      while (running < CONCURRENCY && nextIndex < validMessages.length) {
+        const index = nextIndex++
+        running++
+
+        quoteGenerate.generate(
+          background.colorOne,
+          background.colorTwo,
+          validMessages[index],
+          parm.width,
+          parm.height,
+          scale,
+          emojiBrand
+        ).then((canvas) => {
+          if (canvas) quoteImages[index] = canvas
+          else console.warn('Failed to generate quote for message, skipping')
+        }).catch((error) => {
+          console.error('Error generating quote for message:', error.message)
+        }).finally(() => {
+          running--
+          if (nextIndex >= validMessages.length && running === 0) resolve()
+          else runNext()
+        })
+      }
+      if (validMessages.length === 0) resolve()
+    }
+    runNext()
+  })
+
+  // Filter nulls (failed messages) while preserving order, keeping each
+  // image paired with its source message (for grouped-margin decisions).
+  const pairs = validMessages
+    .map((message, i) => ({ message, image: quoteImages[i] }))
+    .filter((p) => p.image)
+  const filteredImages = pairs.map((p) => p.image)
+
+  if (filteredImages.length === 0) {
+    return { error: 'empty_messages' }
+  }
+
+  let canvasQuote
+
+  if (filteredImages.length > 1) {
+    let width = 0
+    let height = 0
+
+    for (let index = 0; index < filteredImages.length; index++) {
+      if (filteredImages[index].width > width) width = filteredImages[index].width
+      height += filteredImages[index].height
+    }
+
+    // Tighter spacing inside a same-sender group, roomier between groups.
+    const margins = []
+    let totalMargin = 0
+    for (let index = 0; index < pairs.length - 1; index++) {
+      const grouped = pairs[index].message.chatId === pairs[index + 1].message.chatId
+      const m = (grouped ? 2 : 6) * scale
+      margins.push(m)
+      totalMargin += m
+    }
+
+    const canvas = createCanvas(width, height + totalMargin)
+    const canvasCtx = canvas.getContext('2d')
+
+    let imageY = 0
+    for (let index = 0; index < filteredImages.length; index++) {
+      canvasCtx.drawImage(filteredImages[index], 0, imageY)
+      imageY += filteredImages[index].height + (margins[index] || 0)
+    }
+    canvasQuote = canvas
+  } else {
+    canvasQuote = filteredImages[0]
+  }
+
+  let quoteImage
+
+  let { type, format, ext } = parm
+
+  if (!type && ext) type = 'png'
+  if (type !== 'image' && type !== 'stories' && canvasQuote.height > 1024 * 2) type = 'png'
+
+  if (type === 'quote') {
+    const downPadding = 75
+    const maxWidth = 512
+    const maxHeight = 512
+
+    const imageQuoteSharp = sharp(canvasQuote.toBuffer())
+
+    if (canvasQuote.height > canvasQuote.width) imageQuoteSharp.resize({ height: maxHeight })
+    else imageQuoteSharp.resize({ width: maxWidth })
+
+    const canvasImage = await loadImage(await imageQuoteSharp.toBuffer())
+
+    const canvasPadding = createCanvas(canvasImage.width, canvasImage.height + downPadding)
+    const canvasPaddingCtx = canvasPadding.getContext('2d')
+    canvasPaddingCtx.drawImage(canvasImage, 0, 0)
+
+    const imageSharp = sharp(canvasPadding.toBuffer())
+
+    if (canvasPadding.height >= canvasPadding.width) imageSharp.resize({ height: maxHeight })
+    else imageSharp.resize({ width: maxWidth })
+
+    if (format === 'png') quoteImage = await imageSharp.png().toBuffer()
+    else quoteImage = await imageSharp.webp({ lossless: true, force: true }).toBuffer()
+  } else if (type === 'image') {
+    const heightPadding = 75 * scale
+    const widthPadding = 95 * scale
+
+    // Draw canvas-to-canvas directly — no need for toBuffer() -> loadImage() round-trip
+    const canvasPic = createCanvas(canvasQuote.width + widthPadding, canvasQuote.height + heightPadding)
+    const canvasPicCtx = canvasPic.getContext('2d')
+
+    const patternImage = await getPatternImage()
+    const wp = wallpaperColors(background.colorOne)
+    await drawPatternBackground(canvasPic, wp.center, wp.edge, patternImage, wp.patternAlpha)
+
+    canvasPicCtx.shadowOffsetX = 8
+    canvasPicCtx.shadowOffsetY = 8
+    canvasPicCtx.shadowBlur = 13
+    canvasPicCtx.shadowColor = 'rgba(0, 0, 0, 0.5)'
+
+    canvasPicCtx.drawImage(canvasQuote, widthPadding / 2, heightPadding / 2)
+
+    canvasPicCtx.shadowOffsetX = 0
+    canvasPicCtx.shadowOffsetY = 0
+    canvasPicCtx.shadowBlur = 0
+    canvasPicCtx.shadowColor = 'rgba(0, 0, 0, 0)'
+
+    canvasPicCtx.fillStyle = 'rgba(0, 0, 0, 0.3)'
+    canvasPicCtx.font = `${8 * scale}px Noto Sans`
+    canvasPicCtx.textAlign = 'right'
+    canvasPicCtx.fillText('@QuotLyBot', canvasPic.width - 25, canvasPic.height - 25)
+
+    quoteImage = await sharp(canvasPic.toBuffer()).png({ lossless: true, force: true }).toBuffer()
+  } else if (type === 'stories') {
+    const canvasPic = createCanvas(720, 1280)
+    const canvasPicCtx = canvasPic.getContext('2d')
+
+    const patternImage = await getPatternImage()
+    const storyWp = wallpaperColors(background.colorOne)
+    await drawPatternBackground(canvasPic, storyWp.center, storyWp.edge, patternImage, storyWp.patternAlpha)
+
+    canvasPicCtx.shadowOffsetX = 8
+    canvasPicCtx.shadowOffsetY = 8
+    canvasPicCtx.shadowBlur = 13
+    canvasPicCtx.shadowColor = 'rgba(0, 0, 0, 0.5)'
+
+    const minPadding = 110
+    const maxW = canvasPic.width - minPadding * 2
+    const maxH = canvasPic.height - minPadding * 2
+
+    // Use canvas dimensions directly to decide if resize is needed — avoid toBuffer() -> loadImage()
+    let drawSource = canvasQuote
+    if (canvasQuote.width > maxW || canvasQuote.height > maxH) {
+      const resizedBuffer = await sharp(canvasQuote.toBuffer()).resize({
+        width: maxW,
+        height: maxH,
+        fit: 'contain',
+        background: { r: 0, g: 0, b: 0, alpha: 0 }
+      }).toBuffer()
+      drawSource = await loadImage(resizedBuffer)
+    }
+
+    const imageX = (canvasPic.width - drawSource.width) / 2
+    const imageY = (canvasPic.height - drawSource.height) / 2
+
+    canvasPicCtx.drawImage(drawSource, imageX, imageY)
+
+    canvasPicCtx.shadowOffsetX = 0
+    canvasPicCtx.shadowOffsetY = 0
+    canvasPicCtx.shadowBlur = 0
+
+    canvasPicCtx.fillStyle = 'rgba(0, 0, 0, 0.4)'
+    canvasPicCtx.font = `${16 * scale}px Noto Sans`
+    canvasPicCtx.textAlign = 'center'
+    canvasPicCtx.translate(70, canvasPic.height / 2)
+    canvasPicCtx.rotate(-Math.PI / 2)
+    canvasPicCtx.fillText('@QuotLyBot', 0, 0)
+
+    quoteImage = await sharp(canvasPic.toBuffer()).png({ lossless: true, force: true }).toBuffer()
+  } else {
+    quoteImage = canvasQuote.toBuffer()
+  }
+
+  // Use sharp metadata only when we went through sharp pipeline, otherwise use canvas dimensions
+  let width, height
+  if (type === 'quote' || type === 'image' || type === 'stories') {
+    const imageMetadata = await sharp(quoteImage).metadata()
+    width = imageMetadata.width
+    height = imageMetadata.height
+  } else {
+    width = canvasQuote.width
+    height = canvasQuote.height
+  }
+
+  let image
+  if (ext) image = quoteImage
+  else image = quoteImage.toString('base64')
+
+  return { image, type, width, height, ext }
+}

methods/index.js

@@ -0,0 +1,38 @@
+const crypto = require('crypto')
+const LRU = require('lru-cache')
+const sizeof = require('object-sizeof')
+
+const generate = require('./generate')
+
+const methods = {
+  generate
+}
+
+const cache = new LRU({
+  max: 1000 * 1000 * 1000,
+  length: (n) => { return sizeof(n) },
+  maxAge: 1000 * 60 * 45
+})
+
+module.exports = async (method, parm) => {
+  if (methods[method]) {
+    let methodResult = {}
+
+    let cacheString = crypto.createHash('md5').update(JSON.stringify({ method, parm })).digest('hex')
+    const methodResultCache = cache.get(cacheString)
+
+    if (!methodResultCache) {
+      methodResult = await methods[method](parm)
+
+      if (!methodResult.error) cache.set(cacheString, methodResult)
+    } else {
+      methodResult = methodResultCache
+    }
+
+    return methodResult
+  } else {
+    return {
+      error: 'method not found'
+    }
+  }
+}

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "quote-api",
+  "version": "0.14.0",
+  "description": "Quote image generation API",
+  "main": "index.js",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "lint": "eslint --ext js .",
+    "lint:fix": "eslint --fix --ext js .",
+    "test": "node test-metrics.js && node test-style.js && node test-attachments.js && node test-fixes.js",
+    "test:visual": "node test-real.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LyoSU/quote-api.git"
+  },
+  "author": "LyoSU",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/LyoSU/quote-api/issues"
+  },
+  "homepage": "https://github.com/LyoSU/quote-api#readme",
+  "dependencies": {
+    "canvas": "^2.8.0",
+    "dotenv": "^7.0.0",
+    "emoji-db": "^16.0.1",
+    "jimp": "^1.6.0",
+    "jsdom": "^16.5.3",
+    "koa": "^2.11.0",
+    "koa-bodyparser": "^4.2.1",
+    "koa-logger": "^3.2.1",
+    "koa-ratelimit": "^4.2.1",
+    "koa-response-time": "^2.1.0",
+    "koa-router": "^7.4.0",
+    "lru-cache": "^5.1.1",
+    "object-sizeof": "^1.6.0",
+    "runes": "^0.4.3",
+    "sharp": "^0.32.5",
+    "smartcrop-sharp": "^2.0.7",
+    "telegraf": "^3.38.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.6.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-standard": "^4.0.0"
+  }
+}

routes/api.js

@@ -0,0 +1,14 @@
+const Router = require('koa-router')
+const api = new Router()
+
+const method = require('../methods')
+
+const apiHandle = async (ctx) => {
+  const methodWithExt = ctx.params[0].match(/(.*).(png|webp)/)
+  if (methodWithExt) ctx.props.ext = methodWithExt[2]
+  ctx.result = await method(methodWithExt ? methodWithExt[1] : ctx.params[0], ctx.props)
+}
+
+api.post('/', apiHandle)
+
+module.exports = api

routes/index.js

@@ -0,0 +1,5 @@
+const routeApi = require('./api')
+
+module.exports = {
+  routeApi
+}

scripts/send-preview-stickers.js

@@ -0,0 +1,100 @@
+// Надсилає прев'ю-стікери редизайну в Telegram.
+// Run: node scripts/send-preview-stickers.js [chat_id]
+
+require('dotenv').config()
+const { Telegram } = require('telegraf')
+const generate = require('../methods/generate')
+
+const CHAT_ID = Number(process.argv[2] || 66478514)
+const BOT_TOKEN = process.env.BOT_TOKEN
+const BG = '//#252e44' // gradient pair (lighten/darken) → glass bubble
+
+async function main () {
+  if (!BOT_TOKEN) throw new Error('BOT_TOKEN missing in .env')
+  const telegram = new Telegram(BOT_TOKEN)
+
+  const cases = [
+    ['текст + реплай', [{
+      chatId: 101,
+      avatar: true,
+      from: { id: 101, name: 'Олена Ковальчук' },
+      replyMessage: { name: 'Андрій', text: 'давай завтра о 10:00?', chatId: 102 },
+      text: 'Домовились, скину нагадування 🔥'
+    }]],
+    ['voice', [{
+      chatId: 103,
+      avatar: true,
+      from: { id: 103, name: 'Макс Голос' },
+      voice: { waveform: Array.from({ length: 60 }, (_, i) => 4 + ((i * 13) % 28), 0), duration: 83 }
+    }]],
+    ['документ', [{
+      chatId: 104,
+      avatar: true,
+      from: { id: 104, name: 'Бухгалтерія' },
+      document: { file_name: 'квартальний_звіт_2026.pdf', file_size: 2.4 * 1024 * 1024 },
+      text: 'фінальна версія'
+    }]],
+    ['музика', [{
+      chatId: 105,
+      avatar: true,
+      from: { id: 105, name: 'Меломан' },
+      audio: { title: 'Водограй', performer: 'Володимир Івасюк', duration: 215 }
+    }]],
+    ['відео', [{
+      chatId: 106,
+      avatar: true,
+      from: { id: 106, name: 'Відеограф' },
+      media: { url: 'https://picsum.photos/seed/quoteapi/640/360' },
+      mediaType: 'video',
+      mediaDuration: 42,
+      text: 'подивіться до кінця 🔥'
+    }]],
+    ['діалог (групування)', [
+      {
+        chatId: 107,
+        avatar: true,
+        from: { id: 107, name: 'assasinfil' },
+        text: 'Хто знає як зробити NFC клон?'
+      },
+      {
+        chatId: 107,
+        avatar: true,
+        from: { id: 107, name: 'assasinfil' },
+        text: 'Треба Flipper Zero для цього'
+      },
+      {
+        chatId: 108,
+        avatar: true,
+        from: { id: 108, name: 'nowiks' },
+        replyMessage: { name: 'assasinfil', text: 'Хто знає як зробити NFC клон?', chatId: 107 },
+        text: 'Ну получить можна… не понял..'
+      }
+    ]]
+  ]
+
+  await telegram.sendMessage(CHAT_ID, '🎨 Прев\'ю редизайну цитат — глянь стікери нижче')
+
+  for (const [label, messages] of cases) {
+    try {
+      const result = await generate({
+        botToken: BOT_TOKEN,
+        messages,
+        type: 'quote',
+        format: 'webp',
+        ext: 'webp',
+        scale: 2,
+        backgroundColor: BG
+      })
+      if (result.error) throw new Error(result.error)
+      await telegram.sendSticker(CHAT_ID, { source: Buffer.from(result.image) })
+      console.log(`✓ ${label} (${result.width}x${result.height})`)
+    } catch (err) {
+      console.error(`✗ ${label}: ${err.message}`)
+    }
+  }
+}
+
+main().catch((err) => {
+  console.error('FAIL:', err.message)
+  process.exit(1)
+})

scripts/update-emoji.js

@@ -0,0 +1,185 @@
+#!/usr/bin/env node
+
+/**
+ * Downloads emoji images from emoji-datasource CDN (jsdelivr) and saves them
+ * as base64 JSON files for each brand.
+ *
+ * Supported brands via emoji-datasource: apple, google, twitter
+ * Unsupported (kept as-is): joypixels, blob
+ *
+ * Usage:
+ *   node scripts/update-emoji.js              # update all supported brands
+ *   node scripts/update-emoji.js apple         # update only apple
+ *   node scripts/update-emoji.js google twitter # update specific brands
+ */
+
+const path = require('path')
+const fs = require('fs')
+const https = require('https')
+
+const EmojiDbLib = require('emoji-db')
+const emojiDb = new EmojiDbLib({ useDefaultDb: true })
+
+const EMOJI_DIR = path.resolve(__dirname, '../assets/emoji/')
+
+const CDN_VERSION = '16.0.0'
+const CDN_SIZE = 64 // px
+const CONCURRENCY = 50
+
+const SUPPORTED_BRANDS = {
+  apple: {
+    pkg: 'emoji-datasource-apple',
+    folder: 'apple'
+  },
+  google: {
+    pkg: 'emoji-datasource-google',
+    folder: 'google'
+  },
+  twitter: {
+    pkg: 'emoji-datasource-twitter',
+    folder: 'twitter'
+  }
+}
+
+const BRAND_JSON_FILES = {
+  apple: 'emoji-apple-image.json',
+  google: 'emoji-google-image.json',
+  twitter: 'emoji-twitter-image.json',
+  joypixels: 'emoji-joypixels-image.json',
+  blob: 'emoji-blob-image.json'
+}
+
+function fetchBuffer (url) {
+  return new Promise((resolve, reject) => {
+    const req = https.get(url, (res) => {
+      if (res.statusCode !== 200) {
+        res.resume()
+        return reject(new Error(`HTTP ${res.statusCode} for ${url}`))
+      }
+      const chunks = []
+      res.on('data', (chunk) => chunks.push(chunk))
+      res.on('end', () => resolve(Buffer.concat(chunks)))
+      res.on('error', reject)
+    })
+    req.on('error', reject)
+    req.setTimeout(10000, () => {
+      req.destroy()
+      reject(new Error(`Timeout for ${url}`))
+    })
+  })
+}
+
+function getCdnUrl (brand, emojiCode) {
+  const config = SUPPORTED_BRANDS[brand]
+  return `https://cdn.jsdelivr.net/npm/${config.pkg}@${CDN_VERSION}/img/${config.folder}/${CDN_SIZE}/${emojiCode}.png`
+}
+
+async function runPool (tasks, concurrency) {
+  const results = []
+  let index = 0
+
+  async function worker () {
+    while (index < tasks.length) {
+      const i = index++
+      results[i] = await tasks[i]().catch(() => null)
+    }
+  }
+
+  const workers = Array.from({ length: Math.min(concurrency, tasks.length) }, () => worker())
+  await Promise.all(workers)
+  return results
+}
+
+async function updateBrand (brand) {
+  const config = SUPPORTED_BRANDS[brand]
+  if (!config) {
+    console.log(`  Skipping ${brand} — not supported by emoji-datasource (keeping existing JSON)`)
+    return
+  }
+
+  const jsonFile = path.join(EMOJI_DIR, BRAND_JSON_FILES[brand])
+
+  // Load existing data
+  let existing = {}
+  try {
+    if (fs.existsSync(jsonFile)) {
+      existing = JSON.parse(fs.readFileSync(jsonFile, 'utf8'))
+    }
+  } catch (err) {
+    console.warn(`  Warning: could not read existing ${jsonFile}: ${err.message}`)
+  }
+
+  const dbData = emojiDb.dbData
+  const codes = Object.keys(dbData).filter(k => !dbData[k].qualified)
+
+  // Find missing emoji codes
+  const missing = codes.filter(code => !existing[code])
+  const total = codes.length
+  const alreadyHave = total - missing.length
+
+  console.log(`  ${brand}: ${total} emoji total, ${alreadyHave} cached, ${missing.length} to download`)
+
+  if (missing.length === 0) {
+    console.log(`  ${brand}: up to date`)
+    return
+  }
+
+  let downloaded = 0
+  let failed = 0
+
+  const tasks = missing.map(code => async () => {
+    try {
+      const url = getCdnUrl(brand, code)
+      const buffer = await fetchBuffer(url)
+      const base64 = buffer.toString('base64')
+
+      if (base64.length > 0) {
+        downloaded++
+        if (downloaded % 100 === 0) process.stdout.write(`  ${brand}: ${downloaded}/${missing.length}\r`)
+        return { code, base64 }
+      }
+    } catch (err) {
+      failed++
+      return null
+    }
+  })
+
+  const results = await runPool(tasks, CONCURRENCY)
+
+  for (const result of results) {
+    if (result) existing[result.code] = result.base64
+  }
+
+  console.log(`  ${brand}: downloaded ${downloaded}, failed ${failed}, total ${Object.keys(existing).length}`)
+
+  // Write atomically
+  const tmpFile = jsonFile + '.tmp'
+  fs.writeFileSync(tmpFile, JSON.stringify(existing))
+  fs.renameSync(tmpFile, jsonFile)
+
+  console.log(`  ${brand}: saved to ${path.basename(jsonFile)}`)
+}
+
+async function main () {
+  const args = process.argv.slice(2)
+  const brands = args.length > 0 ? args : Object.keys(BRAND_JSON_FILES)
+
+  console.log('Emoji updater — CDN: emoji-datasource@' + CDN_VERSION + ' via jsdelivr')
+  console.log('Brands to update:', brands.join(', '))
+  console.log()
+
+  for (const brand of brands) {
+    if (!BRAND_JSON_FILES[brand]) {
+      console.error(`Unknown brand: ${brand}`)
+      continue
+    }
+    await updateBrand(brand)
+  }
+
+  console.log('\nDone.')
+}
+
+main().catch(err => {
+  console.error('Fatal error:', err)
+  process.exit(1)
+})

test-attachments.js

@@ -0,0 +1,112 @@
+// Numeric assertions for attachment rows and media badges.
+// Run: node test-attachments.js  → exits non-zero on any failed assertion.
+
+const assert = require('assert')
+const { createCanvas } = require('canvas')
+const {
+  loadIcons, drawVoiceRow, drawDocumentRow, drawAudioRow,
+  formatDuration, formatFileSize, resampleWaveform, ROW
+} = require('./utils/quote-generate/attachments')
+const { drawQuote } = require('./utils/quote-generate/composer')
+const { fontMetrics } = require('./utils/quote-generate/text-prepare')
+
+const ACCENT = '#ffa357' // r=255 g=163 b=87
+
+function px (canvas, x, y) {
+  const d = canvas.getContext('2d').getImageData(Math.round(x), Math.round(y), 1, 1).data
+  return { r: d[0], g: d[1], b: d[2], a: d[3] }
+}
+
+function isAccent (p) {
+  return Math.abs(p.r - 255) <= 8 && Math.abs(p.g - 163) <= 12 && Math.abs(p.b - 87) <= 12 && p.a > 200
+}
+
+async function main () {
+  const loaded = await loadIcons()
+  assert.ok(loaded && loaded.play && loaded.file && loaded.note, 'official icon sprites must rasterize')
+
+  // 1. Formatters — pure math.
+  assert.strictEqual(formatDuration(0), '0:00')
+  assert.strictEqual(formatDuration(65), '1:05')
+  assert.strictEqual(formatDuration(3661), '61:01')
+  assert.strictEqual(formatFileSize(999), '999 B')
+  assert.strictEqual(formatFileSize(2048), '2.0 KB')
+  assert.strictEqual(formatFileSize(5.3 * 1024 * 1024), '5.3 MB')
+  assert.strictEqual(formatFileSize(1.5 * 1024 * 1024 * 1024), '1.5 GB')
+
+  // 2. Waveform resampling: averages buckets, normalizes to 0..1.
+  assert.deepStrictEqual(resampleWaveform([31, 31, 0, 0], 2), [1, 0])
+  assert.strictEqual(resampleWaveform(Array(100).fill(31), 40).length, 40)
+
+  // 3. Voice row: height = disc, width within cap, disc center & bars accent.
+  const scale = 2
+  const maxW = 600
+  const wave = Array.from({ length: 50 }, (_, i) => (i * 11) % 32)
+  const voice = drawVoiceRow(wave, 42, ACCENT, '#fff', scale, maxW)
+  const d = ROW.disc * scale
+  assert.strictEqual(voice.height, d, `voice row height ${voice.height} != disc ${d}`)
+  assert.ok(voice.width <= maxW, `voice row ${voice.width} > cap ${maxW}`)
+  assert.ok(isAccent(px(voice, d / 2, d / 2 - d * 0.3)), 'play disc must be accent')
+  // First bar column: bars start at d+gap; min height 4·s ensures ink at center.
+  const barX = d + ROW.gap * scale + (ROW.bar * scale) / 2
+  assert.ok(isAccent(px(voice, barX, d / 2)), 'first waveform bar must be accent')
+
+  // 4. Document row height: max(disc, two metric text lines) — exact math.
+  const titleH = Math.max(1, Math.ceil(fontMetrics(ROW.title * scale).ascent + fontMetrics(ROW.title * scale).descent))
+  const metaH = Math.max(1, Math.ceil(fontMetrics(ROW.meta * scale).ascent + fontMetrics(ROW.meta * scale).descent))
+  const expRowH = Math.max(d, titleH + ROW.lineGap * scale + metaH)
+  const doc = drawDocumentRow({ file_name: 'звіт.pdf', file_size: 2.4 * 1024 * 1024 }, ACCENT, '#fff', scale, maxW)
+  assert.strictEqual(doc.height, expRowH, `doc row ${doc.height} != max(disc, texts) ${expRowH}`)
+  const docDisc = px(doc, d / 2, doc.height / 2)
+  assert.ok(docDisc.r > 240 && docDisc.g > 240 && docDisc.b > 240, 'page glyph must be white at disc center')
+  assert.ok(isAccent(px(doc, d / 2, (doc.height - d) / 2 + d * 0.08)), 'disc rim must be accent')
+
+  // 5. Audio row without thumb: accent note disc; with thumb: thumb pixels.
+  const audio = drawAudioRow({ title: 'Пісня', performer: 'Гурт', duration: 215 }, ACCENT, '#fff', scale, maxW)
+  assert.strictEqual(audio.height, expRowH, `audio row ${audio.height} != ${expRowH}`)
+  assert.ok(isAccent(px(audio, d * 0.15, audio.height / 2)), 'note disc must be accent')
+
+  const thumb = createCanvas(100, 100)
+  thumb.getContext('2d').fillStyle = '#00ff00'
+  thumb.getContext('2d').fillRect(0, 0, 100, 100)
+  const audioT = drawAudioRow({ title: 'X' }, ACCENT, '#fff', scale, maxW, thumb)
+  const cover = px(audioT, d / 2, audioT.height / 2)
+  assert.ok(cover.g > 200 && cover.r < 60, 'cover must show the thumb image')
+
+  // 6. Media badges through the composer (destination-space overlay).
+  //    Red 600×300 media, maxSize 200 → drawn 200×100. Bubble is media-only:
+  //    x = (50+10)·s? scale 1 → 60, y = shadowPadTop 4.
+  const red = createCanvas(600, 300)
+  red.getContext('2d').fillStyle = '#ff0000'
+  red.getContext('2d').fillRect(0, 0, 600, 300)
+  const q = drawQuote({
+    scale: 1,
+    background: { colorOne: '#1b1429', colorTwo: '#1b1429', textColor: '#fff' },
+    media: { canvas: red, type: 'video', maxSize: 200, badge: { play: true, label: '0:42' } }
+  })
+  const mx = 60
+  const my = 4
+  const cx = mx + 100
+  const cy = my + 50
+  // Center: white play triangle.
+  const center = px(q, cx, cy)
+  assert.ok(center.g > 180 && center.b > 180, `center must be white triangle, got ${JSON.stringify(center)}`)
+  // Inside the dark disc, left of the triangle: red dimmed by ~50% black.
+  const ring = px(q, cx - 14, cy)
+  assert.ok(ring.r > 100 && ring.r < 170 && ring.g < 60, `ring must be dimmed red, got ${JSON.stringify(ring)}`)
+  // Outside the disc: pure media.
+  const raw = px(q, mx + 30, cy)
+  assert.ok(raw.r > 240 && raw.g < 15, `media must stay untouched, got ${JSON.stringify(raw)}`)
+  // Duration chip bottom-left: dark backdrop over red.
+  const chip = px(q, mx + 6 + 4, my + 100 - 6 - 6)
+  assert.ok(chip.r < 200 && chip.g < 80, `chip backdrop missing, got ${JSON.stringify(chip)}`)
+
+  console.log('OK: attachment assertions passed')
+  console.log(`  voice ${voice.width}x${voice.height}, doc ${doc.width}x${doc.height}, audio ${audio.width}x${audio.height}`)
+  console.log(`  badge pixels: center=${JSON.stringify(center)} ring=${JSON.stringify(ring)}`)
+}
+
+main().catch((err) => {
+  console.error('FAIL:', err.message)
+  process.exit(1)
+})

test-emoji-gif.js

@@ -0,0 +1,103 @@
+// Assertions for the two rendering bugs:
+//  1. Emoji in the user name must keep their own colors (gradientTint used to
+//     recolor them into flat silhouettes via source-in).
+//  2. An animation that arrives as a raw video file (mp4, no thumbnail) must
+//     still produce a media canvas — first frame extracted via ffmpeg.
+// Run: node test-emoji-gif.js  → exits non-zero on any failed assertion.
+
+const assert = require('assert')
+const http = require('http')
+const { execFileSync } = require('child_process')
+const fs = require('fs')
+const os = require('os')
+const path = require('path')
+const { loadImage, createCanvas } = require('canvas')
+const generateMethod = require('./methods/generate')
+const { downloadMediaImage } = require('./utils/quote-generate/media')
+
+function pixels (img) {
+  const c = createCanvas(img.width, img.height)
+  const ctx = c.getContext('2d')
+  ctx.drawImage(img, 0, 0)
+  return ctx.getImageData(0, 0, img.width, img.height).data
+}
+
+// Count pixels matching a predicate over {r,g,b,a}
+function countPx (data, fn) {
+  let n = 0
+  for (let i = 0; i < data.length; i += 4) {
+    if (fn({ r: data[i], g: data[i + 1], b: data[i + 2], a: data[i + 3] })) n++
+  }
+  return n
+}
+
+async function testNameEmojiKeepsColor () {
+  // Name with the Ukrainian flag: a correct render contains BOTH saturated
+  // blue and saturated yellow pixels. The tinted-silhouette bug leaves only
+  // the (pink-ish) name-color pixels.
+  const r = await generateMethod({
+    messages: [{
+      chatId: 125,
+      avatar: false,
+      from: { id: 125, name: 'Yūri 🇺🇦 💜', photo: {} },
+      text: 'x'
+    }],
+    scale: 2,
+    backgroundColor: '#1b1429'
+  })
+  assert.ok(!r.error, `generate failed: ${r.error}`)
+  const data = pixels(await loadImage(Buffer.from(r.image, 'base64')))
+
+  const blue = countPx(data, p => p.a > 200 && p.b > 120 && p.b - p.r > 60 && p.b - p.g > 40)
+  const yellow = countPx(data, p => p.a > 200 && p.r > 180 && p.g > 140 && p.r - p.b > 100)
+  assert.ok(blue > 30, `flag blue missing in name (got ${blue} px) — emoji recolored by gradientTint?`)
+  assert.ok(yellow > 30, `flag yellow missing in name (got ${yellow} px) — emoji recolored by gradientTint?`)
+  console.log(`  name emoji: blue=${blue}px yellow=${yellow}px — colors preserved`)
+}
+
+async function testVideoBufferDecodesToFrame () {
+  let ffmpegOk = true
+  try { execFileSync('ffmpeg', ['-version'], { stdio: 'ignore' }) } catch (e) { ffmpegOk = false }
+  if (!ffmpegOk) {
+    console.log('  video frame: ffmpeg not installed — skipping')
+    return
+  }
+
+  // Solid-red 64x64 mp4, like a Telegram animation without thumbnail.
+  const tmp = path.join(os.tmpdir(), `quote-test-${process.pid}.mp4`)
+  execFileSync('ffmpeg', [
+    '-y', '-f', 'lavfi', '-i', 'color=c=red:s=64x64:d=0.2:r=5',
+    '-pix_fmt', 'yuv420p', tmp
+  ], { stdio: 'ignore' })
+  const mp4 = fs.readFileSync(tmp)
+
+  const server = http.createServer((req, res) => {
+    res.writeHead(200, { 'Content-Type': 'video/mp4' })
+    res.end(mp4)
+  })
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
+  const url = `http://127.0.0.1:${server.address().port}/anim.mp4`
+
+  try {
+    const img = await downloadMediaImage(url, 512, 'url', false, null)
+    assert.ok(img, 'downloadMediaImage returned null for an mp4 animation')
+    const data = pixels(img)
+    const red = countPx(data, p => p.a > 200 && p.r > 180 && p.g < 80 && p.b < 80)
+    assert.ok(red > 1000, `decoded frame is not the red video frame (red=${red}px)`)
+    console.log(`  video frame: decoded ${img.width}x${img.height}, red=${red}px`)
+  } finally {
+    server.close()
+    fs.unlinkSync(tmp)
+  }
+}
+
+async function main () {
+  await testNameEmojiKeepsColor()
+  await testVideoBufferDecodesToFrame()
+  console.log('OK: emoji/gif assertions passed')
+}
+
+main().catch((err) => {
+  console.error('FAIL:', err.message)
+  process.exit(1)
+})

test-fixes.js

@@ -0,0 +1,102 @@
+// Numeric assertions for the group-avatar and media-scale fixes.
+// Run: node test-fixes.js  → exits non-zero on any failed assertion.
+
+const assert = require('assert')
+const { loadImage, createCanvas } = require('canvas')
+const generateMethod = require('./methods/generate')
+const QuoteGenerate = require('./utils/quote-generate')
+
+// Count opaque pixels in the left avatar column (x < colW) of a PNG buffer.
+function leftColumnInk (img, colW) {
+  const canvas = createCanvas(img.width, img.height)
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(img, 0, 0)
+  const data = ctx.getImageData(0, 0, colW, img.height).data
+  let n = 0
+  for (let i = 3; i < data.length; i += 4) if (data[i] > 32) n++
+  return n
+}
+
+async function main () {
+  const scale = 2
+  const msg = (chatId, text) => ({
+    chatId,
+    avatar: true,
+    from: { id: chatId, name: `User ${chatId}`, photo: {} },
+    text
+  })
+
+  // 1. Same-sender group renders ONE avatar (on the last bubble); the
+  //    two-sender variant renders two. Avatar circles are solid disks of
+  //    d = 50·scale, so the grouped left column must hold roughly half the
+  //    opaque pixels of the ungrouped one (±25% for the tail overlap).
+  const grouped = await generateMethod({ messages: [msg(7, 'перше'), msg(7, 'друге')], scale })
+  const ungrouped = await generateMethod({ messages: [msg(7, 'перше'), msg(8, 'друге')], scale })
+  assert.ok(!grouped.error && !ungrouped.error, 'generate failed')
+
+  const colW = 50 * scale
+  const inkGrouped = leftColumnInk(await loadImage(Buffer.from(grouped.image, 'base64')), colW)
+  const inkUngrouped = leftColumnInk(await loadImage(Buffer.from(ungrouped.image, 'base64')), colW)
+  const ratio = inkGrouped / inkUngrouped
+  assert.ok(ratio > 0.35 && ratio < 0.65,
+    `grouped/ungrouped avatar ink ratio ${ratio.toFixed(2)} — expected ≈ 0.5 (one avatar of two)`)
+
+  // 2. Voice renders as an in-bubble attachment row capped at ⅔ of the
+  //    target width. The bubble width is fully deterministic:
+  //    (avatar 50 + gap 10)·s + (rowW + 2·padX 16·s) + shadowPad 12·s,
+  //    where rowW comes from the same drawVoiceRow inputs.
+  const { drawVoiceRow } = require('./utils/quote-generate/attachments')
+  const { NAME_COLORS_DARK } = require('./utils/quote-generate/constants')
+  const waveform = Array.from({ length: 60 }, (_, i) => (i * 7) % 32)
+  const qg = new QuoteGenerate('0:x')
+  const voice = await qg.generate('#1b1429', '#1b1429', {
+    from: { id: 1, name: 'V' },
+    voice: { waveform, duration: 42 },
+    avatar: false
+  }, 512, 512, scale, 'apple')
+  // from.id=1 → NAME_COLORS_DARK[1]; dark background → textColor #fff
+  const row = drawVoiceRow(waveform, 42, NAME_COLORS_DARK[1], '#fff', scale, 512 * scale * 2 / 3)
+  assert.ok(row.width <= Math.ceil(512 * scale * 2 / 3), `voice row ${row.width} exceeds ⅔ cap`)
+  const expectedW = (50 + 10) * scale + (row.width + 2 * 16 * scale) + 12 * scale
+  assert.ok(Math.abs(voice.width - expectedW) <= 2,
+    `voice bubble width ${voice.width} != expected ${expectedW}`)
+
+  // 3. Image mode: the wallpaper must contrast with the bubble, not blend.
+  //    Sample the wallpaper corner vs the bubble interior; perceived
+  //    brightness (BT.601) must differ noticeably for dark AND light themes.
+  const brightness = (p) => (p.r * 299 + p.g * 587 + p.b * 114) / 1000
+  for (const [bgColor, label] of [['#252e44', 'dark'], ['#e8ecf3', 'light']]) {
+    const img = await generateMethod({ messages: [msg(7, 'контраст фону')], scale, type: 'image', backgroundColor: bgColor })
+    assert.ok(!img.error, 'image generate failed')
+    const pic = await loadImage(Buffer.from(img.image, 'base64'))
+    const c = createCanvas(pic.width, pic.height)
+    const cx = c.getContext('2d')
+    cx.drawImage(pic, 0, 0)
+    const get = (x, y) => {
+      const d = cx.getImageData(x, y, 1, 1).data
+      return { r: d[0], g: d[1], b: d[2] }
+    }
+    // Wallpaper near the corner; bubble interior right of the avatar column
+    // ((50+10+16)·s + margin, vertical center).
+    const wallPx = get(8, 8)
+    const wall = brightness(wallPx)
+    const bubble = brightness(get(95 * scale / 2 + (50 + 10 + 20) * scale, Math.round(pic.height / 2)))
+    assert.ok(Math.abs(bubble - wall) >= 18,
+      `${label}: bubble (${bubble.toFixed(0)}) blends into wallpaper (${wall.toFixed(0)})`)
+    // Light wallpapers must be pastel, not gray: require visible chroma.
+    if (label === 'light') {
+      const chroma = Math.max(wallPx.r, wallPx.g, wallPx.b) - Math.min(wallPx.r, wallPx.g, wallPx.b)
+      assert.ok(chroma >= 15, `light wallpaper is gray (chroma ${chroma}) — expected a pastel tint`)
+    }
+    console.log(`  image/${label}: bubble ${bubble.toFixed(0)} vs wallpaper ${wall.toFixed(0)} (Δ${Math.abs(bubble - wall).toFixed(0)})`)
+  }
+
+  console.log('OK: fixes assertions passed')
+  console.log(`  avatar ink ratio grouped/ungrouped = ${ratio.toFixed(3)} (≈0.5)`)
+  console.log(`  voice bubble width = ${voice.width} (expected ${expectedW}, row ${row.width})`)
+}
+
+main().catch((err) => {
+  console.error('FAIL:', err.message)
+  process.exit(1)
+})

test-metrics.js

@@ -0,0 +1,92 @@
+// Numeric assertions for the metric text layout: line geometry must be a
+// constant of the font (em box), never of the glyph shapes drawn.
+// Run: node test-metrics.js  → exits non-zero on any failed assertion.
+
+const assert = require('assert')
+const { createCanvas } = require('canvas')
+const { drawMultilineText } = require('./utils/quote-generate/text-renderer')
+const { drawLabel } = require('./utils/quote-generate/canvas-utils')
+const { leaf } = require('./utils/quote-generate/layout-box')
+const { fontMetrics } = require('./utils/quote-generate/text-prepare')
+
+const FS = 24
+
+async function main () {
+  const { ascent, descent } = fontMetrics(FS)
+  const lineHeight = FS * 1.2
+  const W = 2000
+  const H = 2000
+
+  // 1. Glyph shapes must not change the canvas height (the old ink-trim bug):
+  //    no ascenders/descenders vs full ascenders/descenders/diacritics.
+  const low = await drawMultilineText('осе ссс еео', [], FS, '#fff', 0, FS, W, H, 'apple', null)
+  const tall = await drawMultilineText('Іфj Ďjq Ції', [], FS, '#fff', 0, FS, W, H, 'apple', null)
+  assert.strictEqual(low.height, tall.height,
+    `single line: ${low.height} (low ink) != ${tall.height} (tall ink)`)
+
+  // 2. Single line height is exactly the font em box.
+  assert.strictEqual(low.height, Math.max(1, Math.ceil(ascent + descent)),
+    `single line height ${low.height} != ceil(ascent+descent) ${Math.ceil(ascent + descent)}`)
+
+  // 3. n-line text: height = (n-1)*lineHeight + ascent + descent, regardless of glyphs.
+  for (const n of [2, 3, 5]) {
+    const lowText = Array(n).fill('ооо').join('\n')
+    const tallText = Array(n).fill('Іфj').join('\n')
+    const a = await drawMultilineText(lowText, [], FS, '#fff', 0, FS, W, H, 'apple', null)
+    const b = await drawMultilineText(tallText, [], FS, '#fff', 0, FS, W, H, 'apple', null)
+    const expected = Math.ceil((n - 1) * lineHeight + ascent + descent)
+    assert.strictEqual(a.height, expected, `${n} lines (low): ${a.height} != ${expected}`)
+    assert.strictEqual(b.height, expected, `${n} lines (tall): ${b.height} != ${expected}`)
+  }
+
+  // 4. leaf() takes canvases at face value (no ink scanning) and drops 1×1 stubs.
+  const l = leaf(low)
+  assert.strictEqual(l.h, low.height, 'leaf height must equal canvas height')
+  assert.strictEqual(l.srcY, 0, 'leaf must not crop the top')
+  const stub = await drawMultilineText('', [], FS, '#fff', 0, FS, W, H, 'apple', null)
+  assert.strictEqual(leaf(stub), null, 'empty-text stub must resolve to null leaf')
+
+  // 5. drawLabel: same metric rule at label sizes, glyph-independent.
+  const em13 = fontMetrics(13)
+  const lab1 = drawLabel('ооо', 13, '#fff')
+  const lab2 = drawLabel('Іфj', 13, '#fff')
+  assert.strictEqual(lab1.height, lab2.height, 'label heights must match')
+  assert.strictEqual(lab1.height, Math.max(1, Math.ceil(em13.ascent + em13.descent)),
+    `label height ${lab1.height} != em box ${Math.ceil(em13.ascent + em13.descent)}`)
+
+  // 6. The line box covers everything that gets drawn into it (no clipping):
+  //    emoji images span [baseline−0.85·fs, baseline+0.30·fs]; probe glyph ink
+  //    must fit too. Checked directly against the measured extents.
+  const probeCtx = createCanvas(1, 1).getContext('2d')
+  probeCtx.font = `${FS}px NotoSans`
+  const inkAsc = probeCtx.measureText('ẤÅЇĎ').actualBoundingBoxAscent
+  const inkDesc = probeCtx.measureText('jqyḑộ').actualBoundingBoxDescent
+  assert.ok(ascent >= FS * 0.85, `ascent ${ascent} < emoji top ${FS * 0.85}`)
+  assert.ok(descent >= FS * 0.3, `descent ${descent} < emoji bottom ${FS * 0.3}`)
+  assert.ok(ascent >= inkAsc, `ascent ${ascent} < probe ink ascent ${inkAsc}`)
+  assert.ok(descent >= inkDesc, `descent ${descent} < probe ink descent ${inkDesc}`)
+
+  // 7. End-to-end: two messages with identical structure but different ink
+  //    extents must produce pixel-identical bubble dimensions.
+  const QuoteGenerate = require('./utils/quote-generate')
+  const qg = new QuoteGenerate('0:x')
+  const mk = (text) => qg.generate('#1b1429', '#1b1429', {
+    from: { id: 42, name: 'Тест Тестенко' },
+    text,
+    avatar: false
+  }, 512, 512, 2, 'apple')
+  const qLow = await mk('осе ссс еео')
+  const qTall = await mk('Іфj Ďjq Ції')
+  assert.strictEqual(qLow.height, qTall.height,
+    `bubble heights differ: ${qLow.height} vs ${qTall.height}`)
+
+  console.log('OK: metric layout assertions passed')
+  console.log(`  e2e bubble: ${qLow.width}x${qLow.height} == ${qTall.width}x${qTall.height}`)
+  console.log(`  font em box @${FS}px: ascent=${ascent} descent=${descent} lineHeight=${lineHeight}`)
+  console.log(`  1 line=${low.height}px, n lines=(n-1)*${lineHeight}+${ascent}+${descent}`)
+}
+
+main().catch((err) => {
+  console.error('FAIL:', err.message)
+  process.exit(1)
+})

test-real.js

@@ -0,0 +1,515 @@
+// Real rendering test using actual drawMultilineText
+// Run: node test-real.js
+
+const fs = require('fs')
+const path = require('path')
+const { createCanvas } = require('canvas')
+const { drawQuote } = require('./utils/quote-generate/composer')
+const { loadFonts, gradientTint } = require('./utils/quote-generate/index')
+const { avatarImageLetters } = require('./utils/quote-generate/avatar')
+const { drawAvatar } = require('./utils/quote-generate/avatar')
+const { AVATAR_COLORS } = require('./utils/quote-generate/constants')
+const { colorLuminance } = require('./utils/quote-generate/color')
+const { loadIcons, drawVoiceRow, drawDocumentRow, drawAudioRow } = require('./utils/quote-generate/attachments')
+
+const OUT = path.join(__dirname, 'test-output')
+fs.mkdirSync(OUT, { recursive: true })
+
+function makeAvatar (color1, color2, letter) {
+  const size = 100
+  const canvas = createCanvas(size, size)
+  const ctx = canvas.getContext('2d')
+  const grad = ctx.createLinearGradient(0, 0, size, size)
+  grad.addColorStop(0, color1)
+  grad.addColorStop(1, color2)
+  ctx.fillStyle = grad
+  ctx.beginPath()
+  ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2)
+  ctx.fill()
+  ctx.fillStyle = '#fff'
+  ctx.font = `bold ${size * 0.45}px sans-serif`
+  ctx.textAlign = 'center'
+  ctx.fillText(letter, size / 2, size / 2 + size * 0.16)
+  return canvas
+}
+
+async function main () {
+  await loadFonts()
+  await loadIcons()
+  const { drawMultilineText } = require('./utils/quote-generate/text-renderer')
+
+  const scale = 2
+  const width = 512 * scale
+  const height = 512 * scale
+  const tg = { getCustomEmojiStickers: async () => [] }
+
+  // Mirrors the production scale in utils/quote-generate/index.js
+  const nameSize = 18 * scale
+  const fontSize = 24 * scale
+  const replyNameSize = 14 * scale
+  const replyTextSize = 15 * scale
+
+  async function mkName (text, color) {
+    const canvas = await drawMultilineText(text, [{ type: 'bold', offset: 0, length: text.length }], nameSize, color, 0, nameSize, width, nameSize, 'apple', tg)
+    return gradientTint(canvas, color, colorLuminance(color, 0.25))
+  }
+  async function mkText (text, color) {
+    return drawMultilineText(text, [], fontSize, color || '#fff', 0, fontSize, width, height, 'apple', tg)
+  }
+  async function mkReplyName (text, color) {
+    return drawMultilineText(text, 'bold', replyNameSize, color, 0, replyNameSize, width * 0.9, replyNameSize, 'apple', tg)
+  }
+  async function mkReplyText (text, color) {
+    return drawMultilineText(text, [], replyTextSize, color || '#fff', 0, replyTextSize, width * 0.9, replyTextSize, 'apple', tg)
+  }
+
+  const bg = { colorOne: '#292232', colorTwo: '#292232', textColor: '#fff' }
+  const bgLight = { colorOne: '#e8e8e8', colorTwo: '#e8e8e8', textColor: '#000' }
+  const bgGrad = { colorOne: '#667eea', colorTwo: '#764ba2', textColor: '#fff' }
+
+  const tests = []
+
+  // 1. Basic dark
+  tests.push({
+    name: 'real-01-basic',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#FF885E', '#FF516A', 'A'),
+      name: await mkName('assasinfil', '#FF8E86'),
+      text: await mkText('Переполнение вошло в чат'),
+      nameColor: '#FF8E86'
+    }
+  })
+
+  // 2. Basic light
+  tests.push({
+    name: 'real-02-light',
+    opts: {
+      scale, background: bgLight,
+      avatar: makeAvatar('#72D5FD', '#2A9EF1', 'N'),
+      name: await mkName('nowiks', '#3CA5EC'),
+      text: await mkText('Ну получить можно... не понял..', '#000'),
+      nameColor: '#3CA5EC'
+    }
+  })
+
+  // Debug reply canvas sizes
+  const dbgReplyName = await mkReplyName('Виталий', '#B18FFF')
+  const dbgReplyText = await mkReplyText('не понял..')
+  console.log(`Reply name canvas: ${dbgReplyName.width}x${dbgReplyName.height}`)
+  console.log(`Reply text canvas: ${dbgReplyText.width}x${dbgReplyText.height}`)
+
+  // 3. Reply
+  tests.push({
+    name: 'real-03-reply',
+    opts: {
+      scale, background: { colorOne: '#1a1a2e', colorTwo: '#16213e', textColor: '#fff' },
+      avatar: makeAvatar('#FF885E', '#FF516A', 'A'),
+      reply: {
+        name: await mkReplyName('Виталий', '#B18FFF'),
+        nameColor: '#B18FFF',
+        text: await mkReplyText('не понял..')
+      },
+      name: await mkName('assasinfil', '#FF8E86'),
+      text: await mkText('Переполнение вошло в чат'),
+      nameColor: '#FF8E86'
+    }
+  })
+
+  // 4. No avatar, no name (continuation)
+  tests.push({
+    name: 'real-04-noname',
+    opts: {
+      scale, background: bg,
+      avatar: null, name: null,
+      text: await mkText('понял..')
+    }
+  })
+
+  // 5. Gradient bg
+  tests.push({
+    name: 'real-05-gradient',
+    opts: {
+      scale, background: bgGrad,
+      avatar: makeAvatar('#FFCD6A', '#FFA85C', 'Y'),
+      name: await mkName('Yuri', '#FFCD6A'),
+      text: await mkText('This is a gradient background test with a longer message that wraps across multiple lines'),
+      nameColor: '#FFCD6A'
+    }
+  })
+
+  // 6. Forward
+  tests.push({
+    name: 'real-06-forward',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#A0DE7E', '#54CB68', 'P'),
+      name: await mkName('Pavel Durov', '#4DD6BF'),
+      text: await mkText('Telegram is the most secure messenger in the world.'),
+      isForward: true,
+      forwardLabel: 'Forwarded from Durov\'s Channel',
+      nameColor: '#4DD6BF'
+    }
+  })
+
+  // 7. Forward + reply
+  tests.push({
+    name: 'real-07-fwd-reply',
+    opts: {
+      scale, background: { colorOne: '#1e1e2e', colorTwo: '#1e1e2e', textColor: '#fff' },
+      avatar: makeAvatar('#53EDD6', '#28C9B7', 'M'),
+      reply: {
+        name: await mkReplyName('Alice', '#7AC9FF'),
+        nameColor: '#7AC9FF',
+        text: await mkReplyText('What did he say?')
+      },
+      name: await mkName('Mike', '#45E8D1'),
+      text: await mkText('He said something very interesting about the project roadmap'),
+      isForward: true,
+      forwardLabel: 'Forwarded from Project Updates',
+      nameColor: '#45E8D1'
+    }
+  })
+
+  // 8. Sender tag
+  tests.push({
+    name: 'real-08-tag',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#FF885E', '#FF516A', 'A'),
+      name: await mkName('Admin User', '#FF8E86'),
+      text: await mkText('Welcome to the group! Please read the rules.'),
+      nameColor: '#FF8E86',
+      senderTag: 'Admin'
+    }
+  })
+
+  // 9. Tag + forward
+  tests.push({
+    name: 'real-09-tag-fwd',
+    opts: {
+      scale, background: { colorOne: '#0d1117', colorTwo: '#161b22', textColor: '#e6edf3' },
+      avatar: makeAvatar('#FFA8A8', '#FF719A', 'C'),
+      name: await mkName('Channel Bot', '#FF7FD5'),
+      text: await mkText('Important announcement: server maintenance scheduled for tonight at 3 AM UTC'),
+      isForward: true,
+      forwardLabel: 'Forwarded from System Alerts',
+      nameColor: '#FF7FD5',
+      senderTag: 'NFC/SubGHz Dev'
+    }
+  })
+
+  // 10. Long text with reply
+  tests.push({
+    name: 'real-10-long-reply',
+    opts: {
+      scale, background: { colorOne: '#2d2d44', colorTwo: '#2d2d44', textColor: '#fff' },
+      avatar: makeAvatar('#72D5FD', '#2A9EF1', 'L'),
+      reply: {
+        name: await mkReplyName('Previous User', '#3CA5EC'),
+        nameColor: '#3CA5EC',
+        text: await mkReplyText('Can you explain?')
+      },
+      name: await mkName('Long Text User', '#7AC9FF'),
+      text: await mkText('So basically what happens is that the system processes the input through several stages. First it validates the data, then transforms it, and finally persists it to the database.'),
+      nameColor: '#7AC9FF'
+    }
+  })
+
+  // 11. Short text
+  tests.push({
+    name: 'real-11-short',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#FFCD6A', '#FFA85C', 'S'),
+      name: await mkName('User', '#FFA357'),
+      text: await mkText('ok'),
+      nameColor: '#FFA357'
+    }
+  })
+
+  // 12. Long name + tag
+  tests.push({
+    name: 'real-12-longname-tag',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#E0A2F3', '#D669ED', 'X'),
+      name: await mkName('Alexander Superlong Name', '#B18FFF'),
+      text: await mkText('Testing a very long name with a tag'),
+      nameColor: '#B18FFF',
+      senderTag: 'Lead Developer & Architect'
+    }
+  })
+
+  // 13. Partial quote (isQuote)
+  tests.push({
+    name: 'real-13-quote',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#72D5FD', '#2A9EF1', 'Q'),
+      reply: {
+        name: await mkReplyName('Original Author', '#7AC9FF'),
+        nameColor: '#7AC9FF',
+        text: await mkReplyText('only this part was quoted')
+      },
+      name: await mkName('Quoter', '#45E8D1'),
+      text: await mkText('Exactly, this part is the key insight'),
+      nameColor: '#45E8D1',
+      isQuote: true
+    }
+  })
+
+  // 14. Reply no avatar
+  tests.push({
+    name: 'real-14-reply-noavatar',
+    opts: {
+      scale, background: bg,
+      avatar: null,
+      reply: {
+        name: await mkReplyName('Someone', '#FF8E86'),
+        nameColor: '#FF8E86',
+        text: await mkReplyText('Original message text here')
+      },
+      name: null,
+      text: await mkText('Reply to that')
+    }
+  })
+
+  // Helper: make circular avatar from avatarImageLetters (same as drawAvatar does)
+  function makeRealAvatar (letters, colorIndex) {
+    const avatarCanvas = avatarImageLetters(letters, AVATAR_COLORS[colorIndex % 7])
+    const size = avatarCanvas.height
+    const circle = createCanvas(size, size)
+    const cctx = circle.getContext('2d')
+    cctx.beginPath()
+    cctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2, true)
+    cctx.clip()
+    cctx.drawImage(avatarCanvas, 0, 0, size, size)
+    return circle
+  }
+
+  // 16. Initials avatar — two letters
+  tests.push({
+    name: 'real-16-initials-2',
+    opts: {
+      scale, background: bg,
+      avatar: makeRealAvatar('YL', 3),
+      name: await mkName('Yuri Ly', '#4DD6BF'),
+      text: await mkText('Testing two-letter initials avatar'),
+      nameColor: '#4DD6BF'
+    }
+  })
+
+  // 17. Initials avatar — one letter
+  tests.push({
+    name: 'real-17-initials-1',
+    opts: {
+      scale, background: bg,
+      avatar: makeRealAvatar('А', 5),
+      name: await mkName('Антон', '#B18FFF'),
+      text: await mkText('Тестуємо аватарку з одною літерою'),
+      nameColor: '#B18FFF'
+    }
+  })
+
+  // 18. Initials avatar — Cyrillic two letters
+  tests.push({
+    name: 'real-18-initials-cyrillic',
+    opts: {
+      scale, background: bgLight,
+      avatar: makeRealAvatar('ВН', 2),
+      name: await mkName('Виктор Никитчук', '#3CA5EC'),
+      text: await mkText('Кириллические буквы в аватарке'),
+      nameColor: '#3CA5EC'
+    }
+  })
+
+  // 19. Standalone avatar renders (for direct comparison)
+  const avatarTests = [
+    { letters: 'YL', idx: 0 },
+    { letters: 'А', idx: 1 },
+    { letters: 'ВН', idx: 2 },
+    { letters: 'JD', idx: 3 },
+    { letters: 'М', idx: 4 },
+    { letters: '?', idx: 5 },
+    { letters: 'PD', idx: 6 }
+  ]
+  const avSize = 200
+  const avPad = 20
+  const avRow = createCanvas(avatarTests.length * (avSize + avPad), avSize)
+  const avCtx = avRow.getContext('2d')
+  for (let i = 0; i < avatarTests.length; i++) {
+    const av = makeRealAvatar(avatarTests[i].letters, avatarTests[i].idx)
+    avCtx.drawImage(av, i * (avSize + avPad), 0, avSize, avSize)
+  }
+  fs.writeFileSync(path.join(OUT, 'real-19-avatars-row.png'), avRow.toBuffer('image/png'))
+  console.log(`  ✓ real-19-avatars-row (${avRow.width}x${avRow.height})`)
+
+  // 20. Voice message
+  tests.push({
+    name: 'real-20-voice',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#FF885E', '#FF516A', 'A'),
+      name: await mkName('assasinfil', '#FF8E86'),
+      attachment: { canvas: drawVoiceRow(Array.from({ length: 50 }, (_, i) => 6 + ((i * 13) % 26), 0), 83, '#FF8E86', '#fff', scale, width * 2 / 3) },
+      nameColor: '#FF8E86'
+    }
+  })
+
+  // 21. Document
+  tests.push({
+    name: 'real-21-document',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#72D5FD', '#2A9EF1', 'N'),
+      name: await mkName('nowiks', '#7AC9FF'),
+      attachment: { canvas: drawDocumentRow({ file_name: 'квартальний_звіт_2026.pdf', file_size: 2.4 * 1024 * 1024 }, '#7AC9FF', '#fff', scale, width * 2 / 3) },
+      nameColor: '#7AC9FF'
+    }
+  })
+
+  // 22. Audio (no cover → note disc)
+  tests.push({
+    name: 'real-22-audio',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#A0DE7E', '#54CB68', 'M'),
+      name: await mkName('Музика', '#4DD6BF'),
+      attachment: { canvas: drawAudioRow({ title: 'Водограй', performer: 'Володимир Івасюк', duration: 215 }, '#4DD6BF', '#fff', scale, width * 2 / 3) },
+      nameColor: '#4DD6BF'
+    }
+  })
+
+  // 23. Video with play badge + duration, plus caption
+  const videoFrame = createCanvas(800, 450)
+  {
+    const vctx = videoFrame.getContext('2d')
+    const grad = vctx.createLinearGradient(0, 0, 800, 450)
+    grad.addColorStop(0, '#2b5876')
+    grad.addColorStop(1, '#4e4376')
+    vctx.fillStyle = grad
+    vctx.fillRect(0, 0, 800, 450)
+  }
+  tests.push({
+    name: 'real-23-video',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#FFCD6A', '#FFA85C', 'V'),
+      name: await mkName('Відеограф', '#FFA357'),
+      media: { canvas: videoFrame, type: 'video', maxSize: width * 2 / 3, badge: { play: true, label: '0:42' } },
+      text: await mkText('подивіться до кінця 🔥'),
+      nameColor: '#FFA357'
+    }
+  })
+
+  // 24. GIF (no caption → flush media with GIF chip)
+  const gifFrame = createCanvas(640, 360)
+  {
+    const gctx = gifFrame.getContext('2d')
+    const grad = gctx.createLinearGradient(0, 360, 640, 0)
+    grad.addColorStop(0, '#f83600')
+    grad.addColorStop(1, '#f9d423')
+    gctx.fillStyle = grad
+    gctx.fillRect(0, 0, 640, 360)
+  }
+  tests.push({
+    name: 'real-24-gif',
+    opts: {
+      scale, background: bg,
+      avatar: makeAvatar('#E0A2F3', '#D669ED', 'G'),
+      name: await mkName('Гіфка', '#B18FFF'),
+      media: { canvas: gifFrame, type: 'animation', maxSize: width * 2 / 3, badge: { label: 'GIF' } },
+      nameColor: '#B18FFF'
+    }
+  })
+
+  // Generate single tests
+  for (const test of tests) {
+    try {
+      const canvas = drawQuote(test.opts)
+      fs.writeFileSync(path.join(OUT, `${test.name}.png`), canvas.toBuffer('image/png'))
+      console.log(`  ✓ ${test.name} (${canvas.width}x${canvas.height})`)
+    } catch (err) {
+      console.error(`  ✗ ${test.name}: ${err.message}`)
+    }
+  }
+
+  // 15. MULTI-MESSAGE DIALOG
+  const dialogOpts = [
+    {
+      scale, background: bg,
+      avatar: null, // avatar rides on the LAST message of a streak
+      name: await mkName('assasinfil', '#FF8E86'),
+      text: await mkText('Хто знає як зробити NFC клон?'),
+      nameColor: '#FF8E86',
+      senderTag: 'NFC/SubGHz Dev',
+      groupPos: 'first'
+    },
+    {
+      scale, background: bg,
+      avatar: makeAvatar('#FF885E', '#FF516A', 'A'),
+      name: null,
+      text: await mkText('Треба Flipper Zero для цього'),
+      groupPos: 'last'
+    },
+    {
+      scale, background: bg,
+      avatar: makeAvatar('#72D5FD', '#2A9EF1', 'N'),
+      reply: {
+        name: await mkReplyName('assasinfil', '#FF8E86'),
+        nameColor: '#FF8E86',
+        text: await mkReplyText('Хто знає як зробити NFC клон?')
+      },
+      name: await mkName('nowiks', '#7AC9FF'),
+      text: await mkText('Ну получить можно... не понял..'),
+      nameColor: '#7AC9FF',
+      isQuote: true
+    },
+    {
+      scale, background: bg,
+      avatar: makeAvatar('#E0A2F3', '#D669ED', 'В'),
+      name: await mkName('Виктор Никитчук', '#B18FFF'),
+      text: await mkText('Звучит очень по гейски'),
+      isForward: true,
+      forwardLabel: 'Forwarded from Misha Myte',
+      nameColor: '#B18FFF'
+    },
+    {
+      scale, background: bg,
+      avatar: makeAvatar('#FF885E', '#FF516A', 'A'),
+      name: await mkName('assasinfil', '#FF8E86'),
+      text: await mkText('Переполнение вошло в чат'),
+      nameColor: '#FF8E86',
+      senderTag: 'NFC/SubGHz Dev'
+    },
+    {
+      scale, background: bg,
+      avatar: makeAvatar('#72D5FD', '#2A9EF1', 'N'),
+      name: await mkName('nowiks', '#7AC9FF'),
+      text: await mkText('понял..'),
+      nameColor: '#7AC9FF'
+    }
+  ]
+
+  const quoteMargin = 5 * scale
+  const dialogCanvases = dialogOpts.map(o => drawQuote(o))
+  let totalW = 0, totalH = 0
+  for (const c of dialogCanvases) {
+    if (c.width > totalW) totalW = c.width
+    totalH += c.height + quoteMargin
+  }
+  const dialogCanvas = createCanvas(totalW, totalH)
+  const dctx = dialogCanvas.getContext('2d')
+  let y = 0
+  for (const c of dialogCanvases) {
+    dctx.drawImage(c, 0, y)
+    y += c.height + quoteMargin
+  }
+  fs.writeFileSync(path.join(OUT, 'real-15-dialog.png'), dialogCanvas.toBuffer('image/png'))
+  console.log(`  ✓ real-15-dialog (${dialogCanvas.width}x${dialogCanvas.height})`)
+
+  console.log('\nDone!')
+}
+
+main().catch(console.error)

test-style.js

@@ -0,0 +1,51 @@
+// Numeric assertions for the glass bubble style — pixel samples and
+// geometry math, no eyeballing.
+// Run: node test-style.js  → exits non-zero on any failed assertion.
+
+const assert = require('assert')
+const { drawRoundRect } = require('./utils/quote-generate/canvas-utils')
+const { SP } = require('./utils/quote-generate/composer')
+
+function px (canvas, x, y) {
+  const d = canvas.getContext('2d').getImageData(x, y, 1, 1).data
+  return { r: d[0], g: d[1], b: d[2], a: d[3] }
+}
+
+// Fill #222b3c → r=34. Glass adds white on top edge and a hairline border.
+const FILL = { r: 34, g: 43, b: 60 }
+const W = 200
+const H = 100
+const c = drawRoundRect('#222b3c', W, H, 20, 0, 1.25)
+
+// 1. Middle of the bubble is the pure fill (glass must not wash the body).
+const mid = px(c, W / 2, H / 2)
+assert.strictEqual(mid.r, FILL.r, `body tinted: r=${mid.r} != ${FILL.r}`)
+
+// 2. Top edge is brighter than the body (top highlight, alpha ≈ .16+.07).
+const top = px(c, W / 2, 1)
+assert.ok(top.r > mid.r + 15, `top edge not highlighted: r=${top.r} vs body ${mid.r}`)
+
+// 3. Side edge carries the hairline border. Math: inner stroke is
+//    glassLw 1.25px wide from x=0, so pixel column 0 is fully covered:
+//    expected r ≈ 34 + (255−34)·0.07 ≈ 49.
+const side = px(c, 0, H / 2)
+assert.ok(side.r > mid.r + 8, `side border missing: r=${side.r} vs body ${mid.r}`)
+
+// 4. Highlight fades: at 70% height the edge pixel is border-only (≈ side).
+const lower = px(c, 0, Math.round(H * 0.7))
+assert.ok(Math.abs(lower.r - side.r) <= 6,
+  `highlight must fade out by 40% height: lower-edge r=${lower.r}, side r=${side.r}`)
+
+// 5. Without glassLw the canvas is untouched fill (back-compat for chips).
+const plain = drawRoundRect('#222b3c', W, H, 20, 0)
+assert.strictEqual(px(plain, W / 2, 1).r, FILL.r, 'plain rect must have no glass')
+
+// 6. Shadow headroom math: blur spills (blur − offsetY) above the bubble;
+//    the top margin must cover it. (composer: blur 6, offsetY 2 — logical px)
+assert.ok(SP.shadowPadTop >= 6 - 2,
+  `shadowPadTop ${SP.shadowPadTop} < blur−offset 4 — shadow clips at the top`)
+assert.ok(SP.shadowPad >= 6 + 2,
+  `shadowPad ${SP.shadowPad} < blur+offset 8 — shadow clips at the bottom`)
+
+console.log('OK: glass style assertions passed')
+console.log(`  body r=${mid.r}, top r=${top.r}, side r=${side.r}, lower r=${lower.r}`)

utils/emoji-db.js

@@ -0,0 +1,3 @@
+const EmojiDbLib = require('emoji-db')
+
+module.exports = new EmojiDbLib({ useDefaultDb: true })

utils/emoji-image.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const fs = require('fs')
+const emojiDb = require('./emoji-db')
+
+const emojiJFilesDir = '../assets/emoji/'
+
+const emojiJsonByBrand = {
+  apple: 'emoji-apple-image.json',
+  google: 'emoji-google-image.json',
+  twitter: 'emoji-twitter-image.json',
+  joypixels: 'emoji-joypixels-image.json',
+  blob: 'emoji-blob-image.json'
+}
+
+// Lazy-loaded emoji data — only apple is loaded eagerly (default brand)
+const emojiImageByBrand = {}
+
+function loadBrand (brand) {
+  if (emojiImageByBrand[brand]) return emojiImageByBrand[brand]
+
+  const jsonFile = emojiJsonByBrand[brand]
+  if (!jsonFile) return {}
+
+  const filePath = path.resolve(__dirname, emojiJFilesDir + jsonFile)
+
+  try {
+    if (fs.existsSync(filePath)) {
+      emojiImageByBrand[brand] = require(filePath)
+    } else {
+      emojiImageByBrand[brand] = {}
+    }
+  } catch (error) {
+    console.error('Failed to load emoji brand', brand, error.message)
+    emojiImageByBrand[brand] = {}
+  }
+
+  return emojiImageByBrand[brand]
+}
+
+// Eager-load apple (default brand) at startup
+loadBrand('apple')
+
+module.exports = { loadBrand, brands: emojiJsonByBrand }

utils/image-load-path.js

@@ -0,0 +1,10 @@
+const fs = require('fs')
+
+module.exports = (filePath) => {
+  return new Promise((resolve, reject) => {
+    fs.readFile(filePath, (error, data) => {
+      if (error) reject(error)
+      else resolve(data)
+    })
+  })
+}

utils/image-load-url.js

@@ -0,0 +1,70 @@
+const https = require('https')
+const http = require('http')
+
+const REQUEST_TIMEOUT_MS = 10_000
+const MAX_RESPONSE_BYTES = 20 * 1024 * 1024
+const MAX_REDIRECTS = 5
+
+function doRequest (url, filter, redirectCount) {
+  return new Promise((resolve, reject) => {
+    const parsed = new URL(url)
+    const transport = parsed.protocol === 'https:' ? https : http
+
+    if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') {
+      return reject(new Error(`Unsupported protocol ${parsed.protocol} for ${url}`))
+    }
+
+    const options = {
+      hostname: parsed.hostname,
+      port: parsed.port,
+      path: parsed.pathname + parsed.search,
+      headers: { 'User-Agent': 'curl/8.4.0' }
+    }
+
+    const req = transport.get(options, (res) => {
+      // Follow redirects (301, 302, 307, 308)
+      if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+        res.resume()
+        if (redirectCount >= MAX_REDIRECTS) {
+          return reject(new Error(`Too many redirects (${MAX_REDIRECTS}) for ${url}`))
+        }
+        const redirectUrl = new URL(res.headers.location, url).href
+        return resolve(doRequest(redirectUrl, filter, redirectCount + 1))
+      }
+
+      if (res.statusCode < 200 || res.statusCode >= 300) {
+        res.resume()
+        return reject(new Error(`HTTP ${res.statusCode} for ${url}`))
+      }
+
+      if (filter && filter(res.headers)) {
+        res.resume()
+        return resolve(Buffer.concat([]))
+      }
+
+      const chunks = []
+      let totalBytes = 0
+
+      res.on('error', (err) => reject(err))
+      res.on('data', (chunk) => {
+        totalBytes += chunk.length
+        if (totalBytes > MAX_RESPONSE_BYTES) {
+          req.destroy()
+          res.destroy()
+          return reject(new Error(`Response exceeded ${MAX_RESPONSE_BYTES} bytes for ${url}`))
+        }
+        chunks.push(chunk)
+      })
+      res.on('end', () => resolve(Buffer.concat(chunks)))
+    })
+
+    req.setTimeout(REQUEST_TIMEOUT_MS, () => {
+      req.destroy()
+      reject(new Error(`Request timed out after ${REQUEST_TIMEOUT_MS}ms for ${url}`))
+    })
+
+    req.on('error', (err) => reject(err))
+  })
+}
+
+module.exports = (url, filter = false) => doRequest(url, filter, 0)

utils/index.js

@@ -0,0 +1,10 @@
+const QuoteGenerate = require('./quote-generate/index')
+
+module.exports = {
+  QuoteGenerate,
+  loadFonts: QuoteGenerate.loadFonts,
+  loadImageFromUrl: require('./image-load-url'),
+  loadImageFromPath: require('./image-load-path'),
+  promiseAllStepN: require('./promise-concurrent'),
+  userName: require('./user-name')
+}

utils/promise-concurrent.js

@@ -0,0 +1,29 @@
+function promiseAllStepN (n, list) {
+  let tail = list.splice(n)
+  let head = list
+  let resolved = []
+  let processed = 0
+  return new Promise(resolve => {
+    head.forEach(x => {
+      let res = x()
+      resolved.push(res)
+      res.then(y => {
+        runNext()
+        return y
+      })
+    })
+    function runNext () {
+      if (processed == tail.length) {
+        resolve(Promise.all(resolved))
+      } else {
+        resolved.push(tail[processed]().then(x => {
+          runNext()
+          return x
+        }))
+        processed++
+      }
+    }
+  })
+}
+
+module.exports = n => list => promiseAllStepN(n, list)

utils/quote-generate/attachments.js

@@ -0,0 +1,406 @@
+// utils/quote-generate/attachments.js
+//
+// Row-style attachments rendered inside the bubble (voice, document, audio)
+// and overlay badges for media (video play button, duration/GIF chips).
+// All sizes below are logical px — multiplied by `scale` at use.
+
+const fs = require('fs')
+const path = require('path')
+const { createCanvas, loadImage } = require('canvas')
+const sharp = require('sharp')
+const { drawLabel } = require('./canvas-utils')
+
+// Official Material Design icons (Apache-2.0), vendored as-is from
+// @material-design-icons/svg into assets/icons/. Rasterized once at 256px
+// white via sharp and drawn scaled; the geometric fallbacks below only kick
+// in if SVG rasterization is unavailable.
+const ICON_FILES = {
+  play: 'play_arrow.svg',
+  file: 'insert_drive_file.svg',
+  note: 'music_note.svg'
+}
+const ICONS_DIR = path.resolve(__dirname, '../../assets/icons')
+
+let icons = null
+let iconsLoading = null
+
+// Warm the white icon sprites (256px). Call (and await) once before any
+// drawVoiceRow/drawDocumentRow/drawAudioRow/paintMediaBadges usage.
+async function loadIcons () {
+  if (icons) return icons
+  if (!iconsLoading) {
+    iconsLoading = (async () => {
+      const out = {}
+      for (const [key, file] of Object.entries(ICON_FILES)) {
+        const svg = await fs.promises.readFile(path.join(ICONS_DIR, file), 'utf8')
+        // The vendored icons carry no fill (default black) — paint them white.
+        const white = svg.replace('<svg ', '<svg fill="#ffffff" ')
+        out[key] = await loadImage(
+          await sharp(Buffer.from(white), { density: 256 / 24 * 72 }).resize(256, 256).png().toBuffer()
+        )
+      }
+      icons = out
+      return icons
+    })().catch((err) => {
+      console.warn('Icon rasterization failed, using geometric fallbacks:', err.message)
+      iconsLoading = null
+      return null
+    })
+  }
+  return iconsLoading
+}
+
+// Draws a warmed white icon centered in a box, or runs the fallback painter.
+function paintIcon (ctx, name, x, y, size, fallback) {
+  if (icons && icons[name]) {
+    ctx.imageSmoothingEnabled = true
+    ctx.imageSmoothingQuality = 'high'
+    ctx.drawImage(icons[name], x, y, size, size)
+  } else {
+    fallback()
+  }
+}
+
+const ROW = {
+  disc: 40, // play/file/cover disc side
+  gap: 11, // disc → texts/waveform
+  title: 16, // first line (file name, track title)
+  meta: 13, // second line (size, performer, duration)
+  metaAlpha: 0.55,
+  lineGap: 4, // between the two text lines
+  bar: 3, // waveform bar width
+  barGap: 2.5, // waveform bar pitch gap
+  barMin: 4, // shortest bar
+  barMax: 26, // tallest bar
+  cover: 8 // audio cover corner radius
+}
+
+// m:ss (Telegram never shows hours on voice/audio chips)
+function formatDuration (seconds) {
+  const total = Math.max(0, Math.round(Number(seconds) || 0))
+  const m = Math.floor(total / 60)
+  const s = total % 60
+  return `${m}:${String(s).padStart(2, '0')}`
+}
+
+// Binary units, one decimal from KB up: 999 B, 2.0 KB, 5.3 MB, 1.2 GB
+function formatFileSize (bytes) {
+  const b = Math.max(0, Number(bytes) || 0)
+  if (b < 1024) return `${Math.round(b)} B`
+  const units = ['KB', 'MB', 'GB']
+  let v = b
+  let u = -1
+  do {
+    v /= 1024
+    u++
+  } while (v >= 1024 && u < units.length - 1)
+  return `${v.toFixed(1)} ${units[u]}`
+}
+
+// Solid disc with a white play icon — the voice row lead-in.
+function drawPlayDisc (d, accent) {
+  const canvas = createCanvas(d, d)
+  const ctx = canvas.getContext('2d')
+  ctx.fillStyle = accent
+  ctx.beginPath()
+  ctx.arc(d / 2, d / 2, d / 2, 0, Math.PI * 2)
+  ctx.fill()
+  const size = d * 0.62
+  paintIcon(ctx, 'play', (d - size) / 2, (d - size) / 2, size, () => {
+    // Triangle fallback: optical center sits slightly right of geometric.
+    const r = d * 0.22
+    const cx = d * 0.54
+    const cy = d / 2
+    ctx.fillStyle = '#fff'
+    ctx.beginPath()
+    ctx.moveTo(cx - r * 0.7, cy - r)
+    ctx.lineTo(cx - r * 0.7, cy + r)
+    ctx.lineTo(cx + r * 1.1, cy)
+    ctx.closePath()
+    ctx.fill()
+  })
+  return canvas
+}
+
+// Solid disc with a white file icon — the document lead-in.
+function drawFileDisc (d, accent) {
+  const canvas = createCanvas(d, d)
+  const ctx = canvas.getContext('2d')
+  ctx.fillStyle = accent
+  ctx.beginPath()
+  ctx.arc(d / 2, d / 2, d / 2, 0, Math.PI * 2)
+  ctx.fill()
+  const size = d * 0.55
+  paintIcon(ctx, 'file', (d - size) / 2, (d - size) / 2, size, () => {
+    // Page-with-folded-corner fallback
+    const w = d * 0.34
+    const h = d * 0.44
+    const x = (d - w) / 2
+    const y = (d - h) / 2
+    const fold = w * 0.38
+    ctx.fillStyle = '#fff'
+    ctx.beginPath()
+    ctx.moveTo(x, y)
+    ctx.lineTo(x + w - fold, y)
+    ctx.lineTo(x + w, y + fold)
+    ctx.lineTo(x + w, y + h)
+    ctx.lineTo(x, y + h)
+    ctx.closePath()
+    ctx.fill()
+    ctx.fillStyle = accent
+    ctx.beginPath()
+    ctx.moveTo(x + w - fold, y)
+    ctx.lineTo(x + w - fold, y + fold)
+    ctx.lineTo(x + w, y + fold)
+    ctx.closePath()
+    ctx.fill()
+  })
+  return canvas
+}
+
+// Disc with a white music note icon — audio fallback cover.
+function drawNoteDisc (d, accent) {
+  const canvas = createCanvas(d, d)
+  const ctx = canvas.getContext('2d')
+  ctx.fillStyle = accent
+  ctx.beginPath()
+  ctx.arc(d / 2, d / 2, d / 2, 0, Math.PI * 2)
+  ctx.fill()
+  const size = d * 0.55
+  paintIcon(ctx, 'note', (d - size) / 2, (d - size) / 2, size, () => {
+    // Geometric eighth-note fallback (no font dependency)
+    ctx.fillStyle = '#fff'
+    const headR = d * 0.09
+    const hx = d * 0.42
+    const hy = d * 0.66
+    const stemH = d * 0.34
+    const stemW = Math.max(1, d * 0.045)
+    ctx.beginPath()
+    ctx.ellipse(hx, hy, headR * 1.25, headR, -0.4, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.fillRect(hx + headR * 1.1 - stemW, hy - stemH, stemW, stemH)
+    ctx.beginPath()
+    ctx.moveTo(hx + headR * 1.1, hy - stemH)
+    ctx.quadraticCurveTo(d * 0.62, hy - stemH + d * 0.07, d * 0.58, hy - stemH + d * 0.2)
+    ctx.quadraticCurveTo(d * 0.56, hy - stemH + d * 0.12, hx + headR * 1.1, hy - stemH + d * 0.1)
+    ctx.closePath()
+    ctx.fill()
+  })
+  return canvas
+}
+
+// Resamples a Telegram waveform (values 0..31) to `n` buckets by averaging.
+function resampleWaveform (data, n) {
+  if (data.length <= n) return data.map((v) => v / 31)
+  const out = []
+  for (let i = 0; i < n; i++) {
+    const from = Math.floor(i * data.length / n)
+    const to = Math.max(from + 1, Math.floor((i + 1) * data.length / n))
+    let sum = 0
+    for (let j = from; j < to; j++) sum += data[j]
+    out.push(sum / (to - from) / 31)
+  }
+  return out
+}
+
+/**
+ * Voice message row: [accent play disc] [rounded waveform bars] [duration].
+ * `maxWidth` caps the full row (device px); bars resample to fit.
+ */
+function drawVoiceRow (waveform, duration, accent, textColor, scale, maxWidth) {
+  const s = (v) => v * scale
+  const d = s(ROW.disc)
+  const durLabel = drawLabel(formatDuration(duration), s(ROW.meta), textColor, { alpha: ROW.metaAlpha })
+
+  const pitch = s(ROW.bar) + s(ROW.barGap)
+  const barsAvail = Math.max(pitch * 8, (maxWidth || s(220)) - d - s(ROW.gap) * 2 - durLabel.width)
+  const barCount = Math.min(Math.max(8, waveform.length), Math.floor(barsAvail / pitch))
+  const heights = resampleWaveform(waveform, barCount)
+  const barsW = barCount * pitch - s(ROW.barGap)
+
+  const w = Math.ceil(d + s(ROW.gap) + barsW + s(ROW.gap) + durLabel.width)
+  const h = d
+  const canvas = createCanvas(w, h)
+  const ctx = canvas.getContext('2d')
+
+  ctx.drawImage(drawPlayDisc(d, accent), 0, 0)
+
+  ctx.fillStyle = accent
+  const cy = h / 2
+  for (let i = 0; i < barCount; i++) {
+    const bh = Math.max(s(ROW.barMin), heights[i] * s(ROW.barMax))
+    const x = d + s(ROW.gap) + i * pitch
+    roundedVBar(ctx, x, cy - bh / 2, s(ROW.bar), bh)
+  }
+
+  ctx.drawImage(durLabel, d + s(ROW.gap) + barsW + s(ROW.gap), Math.round((h - durLabel.height) / 2))
+  return canvas
+}
+
+/**
+ * Document row: [accent file disc] [file name / size · EXT].
+ */
+function drawDocumentRow (doc, accent, textColor, scale, maxWidth) {
+  const s = (v) => v * scale
+  const d = s(ROW.disc)
+  const name = String(doc.file_name || 'File')
+  const ext = name.includes('.') ? name.split('.').pop().toUpperCase() : ''
+  const metaText = [doc.file_size != null ? formatFileSize(doc.file_size) : null, ext || null]
+    .filter(Boolean).join(' · ')
+
+  const title = drawLabel(name, s(ROW.title), textColor, { bold: true })
+  const meta = metaText ? drawLabel(metaText, s(ROW.meta), textColor, { alpha: ROW.metaAlpha }) : null
+  return assembleRow(drawFileDisc(d, accent), title, meta, scale, maxWidth)
+}
+
+/**
+ * Audio row: [cover or accent note disc] [title / performer · duration].
+ * `thumb` is an optional Image/Canvas (already loaded).
+ */
+function drawAudioRow (audio, accent, textColor, scale, maxWidth, thumb) {
+  const s = (v) => v * scale
+  const d = s(ROW.disc)
+
+  let lead
+  if (thumb) {
+    lead = createCanvas(d, d)
+    const ctx = lead.getContext('2d')
+    const r = s(ROW.cover)
+    ctx.beginPath()
+    ctx.moveTo(r, 0)
+    ctx.arcTo(d, 0, d, d, r)
+    ctx.arcTo(d, d, 0, d, r)
+    ctx.arcTo(0, d, 0, 0, r)
+    ctx.arcTo(0, 0, d, 0, r)
+    ctx.closePath()
+    ctx.clip()
+    ctx.imageSmoothingEnabled = true
+    ctx.imageSmoothingQuality = 'high'
+    const side = Math.min(thumb.width, thumb.height)
+    ctx.drawImage(thumb, (thumb.width - side) / 2, (thumb.height - side) / 2, side, side, 0, 0, d, d)
+  } else {
+    lead = drawNoteDisc(d, accent)
+  }
+
+  const metaText = [audio.performer || null, audio.duration != null ? formatDuration(audio.duration) : null]
+    .filter(Boolean).join(' · ')
+  const title = drawLabel(String(audio.title || 'Audio'), s(ROW.title), textColor, { bold: true })
+  const meta = metaText ? drawLabel(metaText, s(ROW.meta), textColor, { alpha: ROW.metaAlpha }) : null
+  return assembleRow(lead, title, meta, scale, maxWidth)
+}
+
+// [disc] + up to two text lines, vertically centered against the disc.
+function assembleRow (disc, title, meta, scale, maxWidth) {
+  const s = (v) => v * scale
+  const gap = s(ROW.gap)
+  const textW = Math.max(title.width, meta ? meta.width : 0)
+  let w = Math.ceil(disc.width + gap + textW)
+  if (maxWidth && w > maxWidth) w = Math.ceil(maxWidth)
+  const textsH = title.height + (meta ? s(ROW.lineGap) + meta.height : 0)
+  const h = Math.max(disc.height, textsH)
+
+  const canvas = createCanvas(w, h)
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(disc, 0, Math.round((h - disc.height) / 2))
+
+  const maxTextW = w - disc.width - gap
+  let ty = Math.round((h - textsH) / 2)
+  ctx.drawImage(clampWidth(title, maxTextW), disc.width + gap, ty)
+  ty += title.height + s(ROW.lineGap)
+  if (meta) ctx.drawImage(clampWidth(meta, maxTextW), disc.width + gap, ty)
+  return canvas
+}
+
+// Hard-crops a label canvas with a trailing fade (same look as layout-box).
+function clampWidth (canvas, maxW) {
+  if (canvas.width <= maxW) return canvas
+  const w = Math.max(1, Math.floor(maxW))
+  const out = createCanvas(w, canvas.height)
+  const ctx = out.getContext('2d')
+  ctx.drawImage(canvas, 0, 0)
+  const fadeW = Math.min(w, Math.round(canvas.height * 0.9))
+  const grad = ctx.createLinearGradient(w - fadeW, 0, w, 0)
+  grad.addColorStop(0, 'rgba(0, 0, 0, 0)')
+  grad.addColorStop(1, 'rgba(0, 0, 0, 1)')
+  ctx.globalCompositeOperation = 'destination-out'
+  ctx.fillStyle = grad
+  ctx.fillRect(w - fadeW, 0, fadeW, canvas.height)
+  return out
+}
+
+function roundedVBar (ctx, x, y, w, h) {
+  const r = w / 2
+  ctx.beginPath()
+  ctx.moveTo(x, y + r)
+  ctx.arcTo(x, y, x + w, y, r)
+  ctx.arcTo(x + w, y, x + w, y + h, r)
+  ctx.lineTo(x + w, y + h - r)
+  ctx.arcTo(x + w, y + h, x, y + h, r)
+  ctx.arcTo(x, y + h, x, y + h - r, r)
+  ctx.closePath()
+  ctx.fill()
+}
+
+/**
+ * Overlay badges for media, painted in DESTINATION space (after the media
+ * is scaled into the bubble): centered play button and/or a bottom-left chip
+ * ("GIF", "0:42"). `ctx` is the final canvas, (x, y, w, h) the media rect.
+ */
+function paintMediaBadges (ctx, x, y, w, h, badge, scale) {
+  const s = (v) => v * scale
+  if (!badge) return
+  ctx.save()
+  if (badge.play) {
+    const d = Math.min(s(44), w * 0.45, h * 0.45)
+    const cx = x + w / 2
+    const cy = y + h / 2
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
+    ctx.beginPath()
+    ctx.arc(cx, cy, d / 2, 0, Math.PI * 2)
+    ctx.fill()
+    const size = d * 0.62
+    paintIcon(ctx, 'play', cx - size / 2, cy - size / 2, size, () => {
+      const r = d * 0.24
+      ctx.fillStyle = '#fff'
+      ctx.beginPath()
+      ctx.moveTo(cx - r * 0.62, cy - r)
+      ctx.lineTo(cx - r * 0.62, cy + r)
+      ctx.lineTo(cx + r * 1.05, cy)
+      ctx.closePath()
+      ctx.fill()
+    })
+  }
+  if (badge.label) {
+    const label = drawLabel(badge.label, s(13), '#fff')
+    const padX = s(7)
+    const padY = s(2)
+    const bw = label.width + padX * 2
+    const bh = label.height + padY * 2
+    const bx = x + s(6)
+    const by = y + h - bh - s(6)
+    const r = bh / 2
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.45)'
+    ctx.beginPath()
+    ctx.moveTo(bx + r, by)
+    ctx.arcTo(bx + bw, by, bx + bw, by + bh, r)
+    ctx.arcTo(bx + bw, by + bh, bx, by + bh, r)
+    ctx.arcTo(bx, by + bh, bx, by, r)
+    ctx.arcTo(bx, by, bx + bw, by, r)
+    ctx.closePath()
+    ctx.fill()
+    ctx.drawImage(label, bx + padX, by + padY)
+  }
+  ctx.restore()
+}
+
+module.exports = {
+  loadIcons,
+  drawVoiceRow,
+  drawDocumentRow,
+  drawAudioRow,
+  paintMediaBadges,
+  formatDuration,
+  formatFileSize,
+  resampleWaveform,
+  ROW
+}

utils/quote-generate/avatar.js

@@ -0,0 +1,168 @@
+// utils/quote-generate/avatar.js
+
+const { createCanvas, loadImage } = require('canvas')
+const LRU = require('lru-cache')
+const runes = require('runes')
+const loadImageFromUrl = require('../image-load-url')
+const { AVATAR_COLORS } = require('./constants')
+
+const avatarCache = new LRU({
+  max: 20,
+  maxAge: 1000 * 60 * 5
+})
+
+function avatarImageLetters (letters, color) {
+  const size = 500
+  const canvas = createCanvas(size, size)
+  const context = canvas.getContext('2d')
+
+  const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height)
+  gradient.addColorStop(0, color[0])
+  gradient.addColorStop(1, color[1])
+
+  context.fillStyle = gradient
+  context.fillRect(0, 0, canvas.width, canvas.height)
+
+  const letterCount = runes(letters).length
+  const fontSize = letterCount > 1 ? size * 0.38 : size * 0.48
+  context.font = `600 ${fontSize}px NotoSans`
+  context.fillStyle = '#FFF'
+  context.textAlign = 'center'
+  context.textBaseline = 'middle'
+  context.fillText(letters, size / 2, size / 2)
+
+  return canvas
+}
+
+async function downloadAvatarImage (user, telegram) {
+  let avatarImage
+
+  let nameLetters
+  if (user.first_name && user.last_name) {
+    nameLetters = runes(user.first_name)[0] + (runes(user.last_name || '')[0])
+  } else {
+    let name = user.first_name || (user.name && user.name !== false && user.name) || user.title || '?'
+    if (typeof name !== 'string') name = String(name)
+    name = name.toUpperCase()
+    const nameWord = name.split(' ')
+
+    if (nameWord.length > 1) nameLetters = runes(nameWord[0])[0] + runes(nameWord[nameWord.length - 1])[0]
+    else nameLetters = runes(nameWord[0])[0]
+  }
+
+  const cacheKey = user.id != null ? user.id : `noId:${user.username || nameLetters}`
+  const avatarImageCached = avatarCache.get(cacheKey)
+  const nameIndex = user.id != null ? Math.abs(user.id) % 7 : 0
+  const avatarColor = AVATAR_COLORS[nameIndex]
+
+  if (avatarImageCached) {
+    return avatarImageCached
+  }
+
+  if (user.photo && user.photo.url) {
+    avatarImage = await loadImage(user.photo.url).catch(() => null)
+  }
+
+  if (!avatarImage) {
+    try {
+      let userPhoto, userPhotoUrl
+
+      if (user.photo && user.photo.big_file_id) {
+        userPhotoUrl = await telegram.getFileLink(user.photo.big_file_id).catch(() => {})
+      }
+
+      if (!userPhotoUrl) {
+        const getChat = user.id != null
+          ? await telegram.getChat(user.id).catch(() => {})
+          : null
+
+        if (getChat) {
+          // Use chat data to fix missing initials
+          if (nameLetters === '?') {
+            const chatName = getChat.first_name || getChat.title
+            if (chatName) {
+              const upper = chatName.toUpperCase()
+              const words = upper.split(' ')
+              if (words.length > 1) nameLetters = runes(words[0])[0] + runes(words[words.length - 1])[0]
+              else nameLetters = runes(words[0])[0]
+            }
+          }
+
+          if (getChat.photo && getChat.photo.big_file_id) {
+            userPhoto = getChat.photo.big_file_id
+          }
+        }
+
+        if (userPhoto) {
+          userPhotoUrl = await telegram.getFileLink(userPhoto).catch(() => {})
+        } else if (user.username) {
+          userPhotoUrl = `https://telega.one/i/userpic/320/${user.username}.jpg`
+        }
+      }
+
+      if (userPhotoUrl) {
+        const imageBuffer = await loadImageFromUrl(userPhotoUrl).catch((error) => {
+          console.warn('Failed to load user photo from URL:', error.message)
+          return null
+        })
+
+        if (imageBuffer) {
+          avatarImage = await loadImage(imageBuffer).catch((error) => {
+            console.warn('Failed to process user photo buffer:', error.message)
+            return null
+          })
+        }
+      }
+
+      if (avatarImage) {
+        avatarCache.set(cacheKey, avatarImage)
+      }
+    } catch (error) {
+      console.warn('Error getting user photo:', error.message)
+      avatarImage = null
+    }
+  }
+
+  // Final fallback — initials avatar
+  if (!avatarImage) {
+    try {
+      avatarImage = avatarImageLetters(nameLetters, avatarColor)
+      avatarCache.set(cacheKey, avatarImage)
+    } catch (error) {
+      console.warn('Failed to create letters avatar:', error.message)
+      avatarImage = null
+    }
+  }
+
+  return avatarImage
+}
+
+async function drawAvatar (user, telegram) {
+  try {
+    const avatarImage = await downloadAvatarImage(user, telegram)
+
+    if (avatarImage) {
+      const avatarSize = avatarImage.naturalHeight || avatarImage.height
+
+      const canvas = createCanvas(avatarSize, avatarSize)
+      const canvasCtx = canvas.getContext('2d')
+
+      canvasCtx.beginPath()
+      canvasCtx.arc(avatarSize / 2, avatarSize / 2, avatarSize / 2, 0, Math.PI * 2, true)
+      canvasCtx.save()
+      canvasCtx.clip()
+      canvasCtx.closePath()
+      canvasCtx.drawImage(avatarImage, 0, 0, avatarSize, avatarSize)
+      canvasCtx.restore()
+
+      return canvas
+    }
+    console.warn('No avatar image available for user')
+    return null
+  } catch (error) {
+    console.warn('Error drawing avatar:', error.message)
+    return null
+  }
+}
+
+module.exports = { drawAvatar, downloadAvatarImage, avatarImageLetters }

utils/quote-generate/canvas-utils.js

@@ -0,0 +1,243 @@
+const { createCanvas } = require('canvas')
+
+// Draws the bubble path. When tailSize > 0, the bottom-left corner
+// becomes a tail: flat bottom extending left, rounded top curving up.
+// `r` is a single radius or per-corner {tl, tr, br, bl} (grouped bubbles
+// flatten the corners that face their neighbours, like Telegram).
+function bubblePath (ctx, w, h, r, tailSize) {
+  let { tl, tr, br, bl } = typeof r === 'number' ? { tl: r, tr: r, br: r, bl: r } : r
+  const cap = (v) => Math.min(v, w / 2, h / 2)
+  tl = cap(tl)
+  tr = cap(tr)
+  br = cap(br)
+  bl = cap(bl)
+
+  ctx.beginPath()
+  ctx.moveTo(tl, 0)
+  // top-right corner
+  ctx.arcTo(w, 0, w, h, tr)
+  // bottom-right corner
+  ctx.arcTo(w, h, 0, h, br)
+
+  if (tailSize > 0) {
+    const t = tailSize
+
+    // Bottom edge continues FLAT to the left, past the bubble edge
+    ctx.lineTo(-t, h)
+
+    // Rounded curve going up-right, back to the left edge of the bubble.
+    // Bottom stays flat, top is smoothly rounded.
+    ctx.bezierCurveTo(
+      -t * 0.4, h,
+      0, h - bl * 0.3,
+      0, h - bl
+    )
+  } else {
+    // Normal bottom-left rounded corner
+    ctx.arcTo(0, h, 0, 0, bl)
+  }
+
+  // top-left corner
+  ctx.arcTo(0, 0, w, 0, tl)
+  ctx.closePath()
+}
+
+// Frosted-glass finish over the bubble fill: a hairline inner border plus a
+// light top edge that fades out — both clipped to the bubble path so they
+// follow the corners and the tail. `lw` is the hairline width in device px.
+function paintGlass (ctx, w, h, r, tailSize, lw) {
+  ctx.save()
+  bubblePath(ctx, w, h, r, tailSize)
+  ctx.clip()
+
+  // Uniform hairline border. Stroke is centered on the path; with the clip
+  // active only the inner half remains, so double the width.
+  bubblePath(ctx, w, h, r, tailSize)
+  ctx.lineWidth = lw * 2
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.07)'
+  ctx.stroke()
+
+  // Light top edge fading out by ~40% of the height.
+  const grad = ctx.createLinearGradient(0, 0, 0, h * 0.4)
+  grad.addColorStop(0, 'rgba(255, 255, 255, 0.16)')
+  grad.addColorStop(1, 'rgba(255, 255, 255, 0)')
+  ctx.lineWidth = lw * 2.6
+  ctx.strokeStyle = grad
+  ctx.stroke()
+  ctx.restore()
+}
+
+function drawRoundRect (color, w, h, r, tailSize = 0, glassLw = 0) {
+  const extraLeft = tailSize > 0 ? Math.ceil(tailSize * 0.8) : 0
+  const canvas = createCanvas(w + extraLeft, h)
+  const ctx = canvas.getContext('2d')
+  ctx.translate(extraLeft, 0)
+  ctx.fillStyle = color
+  bubblePath(ctx, w, h, r, tailSize)
+  ctx.fill()
+  if (glassLw > 0) paintGlass(ctx, w, h, r, tailSize, glassLw)
+  canvas._tailOffset = extraLeft
+  return canvas
+}
+
+function drawGradientRoundRect (colorOne, colorTwo, w, h, r, tailSize = 0, glassLw = 0) {
+  const extraLeft = tailSize > 0 ? Math.ceil(tailSize * 0.8) : 0
+  const canvas = createCanvas(w + extraLeft, h)
+  const ctx = canvas.getContext('2d')
+  ctx.translate(extraLeft, 0)
+  const gradient = ctx.createLinearGradient(0, 0, w, h)
+  gradient.addColorStop(0, colorOne)
+  gradient.addColorStop(1, colorTwo)
+  ctx.fillStyle = gradient
+  bubblePath(ctx, w, h, r, tailSize)
+  ctx.fill()
+  if (glassLw > 0) paintGlass(ctx, w, h, r, tailSize, glassLw)
+  canvas._tailOffset = extraLeft
+  return canvas
+}
+
+// Rounds an image's corners. `r` is a single radius or per-corner
+// {tl, tr, br, bl} — flush media inherits the bubble's corner radii on the
+// edges it touches while keeping the small media radius elsewhere.
+function roundImage (image, r) {
+  const w = image.width
+  const h = image.height
+  const canvas = createCanvas(w, h)
+  const ctx = canvas.getContext('2d')
+  ctx.imageSmoothingEnabled = true
+  ctx.imageSmoothingQuality = 'high'
+  let { tl, tr, br, bl } = typeof r === 'number' ? { tl: r, tr: r, br: r, bl: r } : r
+  const cap = (v) => Math.min(v, w / 2, h / 2)
+  tl = cap(tl)
+  tr = cap(tr)
+  br = cap(br)
+  bl = cap(bl)
+  ctx.beginPath()
+  ctx.moveTo(tl, 0)
+  ctx.arcTo(w, 0, w, h, tr)
+  ctx.arcTo(w, h, 0, h, br)
+  ctx.arcTo(0, h, 0, 0, bl)
+  ctx.arcTo(0, 0, w, 0, tl)
+  ctx.save()
+  ctx.clip()
+  ctx.closePath()
+  ctx.drawImage(image, 0, 0)
+  ctx.restore()
+  return canvas
+}
+
+function drawReplyLine (lineWidth, height, color) {
+  const r = lineWidth
+  const w = lineWidth
+  const h = height + lineWidth
+  const x = 5
+  const canvas = createCanvas(w + 10, h)
+  const ctx = canvas.getContext('2d')
+
+  ctx.fillStyle = color
+  ctx.beginPath()
+  // Top-left: rounded
+  ctx.moveTo(x, r)
+  ctx.arcTo(x, 0, x + w, 0, r)
+  // Top-right: square
+  ctx.lineTo(x + w, 0)
+  // Right edge straight down
+  ctx.lineTo(x + w, h)
+  // Bottom-right: square
+  ctx.lineTo(x + r, h)
+  // Bottom-left: rounded
+  ctx.arcTo(x, h, x, 0, r)
+  ctx.closePath()
+  ctx.fill()
+
+  return canvas
+}
+
+function drawQuoteIcon (size, color, alpha = 0.15) {
+  const canvas = createCanvas(size, size)
+  const ctx = canvas.getContext('2d')
+
+  // Draw as a single combined path so nothing overlaps
+  ctx.fillStyle = color
+  ctx.globalAlpha = alpha
+
+  const s = size
+  const r = s * 0.09
+  const gapX = s * 0.36
+
+  // Build one unified path for both quote marks
+  ctx.beginPath()
+  addQuoteMarkPath(ctx, s * 0.08, s * 0.15, r, s)
+  addQuoteMarkPath(ctx, s * 0.08 + gapX, s * 0.15, r, s)
+  ctx.fill()
+
+  return canvas
+}
+
+function addQuoteMarkPath (ctx, x, y, r, s) {
+  // Comma-shaped glyph: circle on top, tail curving down-left
+  const cx = x + r
+  const cy = y + r
+  // Circle
+  ctx.moveTo(cx + r, cy)
+  ctx.arc(cx, cy, r, 0, Math.PI * 2)
+  // Tail
+  ctx.moveTo(x + r * 2, cy)
+  ctx.quadraticCurveTo(x + r * 2.2, y + s * 0.35, x + r * 0.3, y + s * 0.4)
+  ctx.lineTo(x + r * 0.3, y + s * 0.32)
+  ctx.quadraticCurveTo(x + r * 1.5, y + s * 0.27, x + r * 0.8, cy)
+  ctx.closePath()
+}
+
+// Vertical ink bounds of a canvas (rows with any non-transparent pixel),
+// or null for a blank canvas. Text canvases from drawMultilineText carry
+// transparent slack (~0.8×fontSize below the last baseline), so geometry
+// that should follow the VISIBLE glyphs must use these bounds instead of
+// canvas height.
+function inkBounds (canvas) {
+  const w = canvas.width
+  const h = canvas.height
+  // Plain Images (loadImage results) have no getContext — callers must not
+  // trim those; treat them as fully opaque.
+  if (w < 1 || h < 1 || typeof canvas.getContext !== 'function') return null
+  const data = canvas.getContext('2d').getImageData(0, 0, w, h).data
+  const rowHasInk = (y) => {
+    const off = y * w * 4 + 3
+    for (let x = 0; x < w; x++) if (data[off + x * 4] > 8) return true
+    return false
+  }
+  // Scan from both ends — skips the (usually large) solid middle.
+  let top = -1
+  for (let y = 0; y < h; y++) if (rowHasInk(y)) { top = y; break }
+  if (top === -1) return null
+  let bottom = top
+  for (let y = h - 1; y > top; y--) if (rowHasInk(y)) { bottom = y; break }
+  return { top, bottom }
+}
+
+// One-line label drawn at metric size: canvas height = ascent + descent of
+// the font em box, baseline at ascent. Same geometry rules as multiline
+// text — glyph shapes never change the box.
+function drawLabel (text, fontSize, color, opts = {}) {
+  // Lazy require — canvas-utils is loaded by layout-box before text-prepare.
+  const { fontMetrics } = require('./text-prepare')
+  const { ascent, descent } = fontMetrics(fontSize)
+  const font = `${opts.bold ? 'bold ' : ''}${fontSize}px NotoSans`
+  const measure = createCanvas(1, 1).getContext('2d')
+  measure.font = font
+  const m = measure.measureText(text)
+
+  const canvas = createCanvas(Math.max(1, Math.ceil(m.width)), Math.max(1, Math.ceil(ascent + descent)))
+  const ctx = canvas.getContext('2d')
+  ctx.font = font
+  ctx.fillStyle = color
+  if (opts.alpha !== undefined) ctx.globalAlpha = opts.alpha
+  ctx.fillText(text, 0, ascent)
+  return canvas
+}
+
+function drawForwardLabel (text, fontSize, color) {
+  return drawLabel(text, fontSize, color, { bold: true })
+}
+
+module.exports = { drawRoundRect, drawGradientRoundRect, roundImage, drawReplyLine, drawQuoteIcon, drawLabel, drawForwardLabel, inkBounds }

utils/quote-generate/color.js

@@ -0,0 +1,167 @@
+const { createCanvas } = require('canvas')
+
+class ColorContrast {
+  constructor () {
+    this.brightnessThreshold = 175
+  }
+
+  getBrightness (color) {
+    const [r, g, b] = hexToRgb(color)
+    return (r * 299 + g * 587 + b * 114) / 1000
+  }
+
+  adjustBrightness (color, amount) {
+    const [r, g, b] = hexToRgb(color)
+    const newR = Math.max(0, Math.min(255, r + amount))
+    const newG = Math.max(0, Math.min(255, g + amount))
+    const newB = Math.max(0, Math.min(255, b + amount))
+    return rgbToHex([newR, newG, newB])
+  }
+
+  getContrastRatio (background, foreground) {
+    const brightness1 = this.getBrightness(background)
+    const brightness2 = this.getBrightness(foreground)
+    const lightest = Math.max(brightness1, brightness2)
+    const darkest = Math.min(brightness1, brightness2)
+    return (lightest + 0.05) / (darkest + 0.05)
+  }
+
+  adjustContrast (background, foreground) {
+    const contrastRatio = this.getContrastRatio(background, foreground)
+    const brightnessDiff = this.getBrightness(background) - this.getBrightness(foreground)
+    if (contrastRatio >= 4.5) {
+      return foreground
+    } else if (brightnessDiff >= 0) {
+      const amount = Math.ceil((this.brightnessThreshold - this.getBrightness(foreground)) / 2)
+      return this.adjustBrightness(foreground, amount)
+    } else {
+      const amount = Math.ceil((this.getBrightness(foreground) - this.brightnessThreshold) / 2)
+      return this.adjustBrightness(foreground, -amount)
+    }
+  }
+}
+
+function hexToRgb (hex) {
+  hex = String(hex).replace(/^#/, '')
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+  return [r, g, b]
+}
+
+function rgbToHex ([r, g, b]) {
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+}
+
+const normalizeColorCache = new Map()
+const NORMALIZE_COLOR_CACHE_MAX = 1000
+
+function normalizeColor (color) {
+  const cached = normalizeColorCache.get(color)
+  if (cached !== undefined) return cached
+
+  const canvas = createCanvas(0, 0)
+  const canvasCtx = canvas.getContext('2d')
+  canvasCtx.fillStyle = color
+  const result = canvasCtx.fillStyle
+
+  if (normalizeColorCache.size >= NORMALIZE_COLOR_CACHE_MAX) {
+    const firstKey = normalizeColorCache.keys().next().value
+    normalizeColorCache.delete(firstKey)
+  }
+  normalizeColorCache.set(color, result)
+
+  return result
+}
+
+function colorLuminance (hex, lum) {
+  hex = String(hex).replace(/[^0-9a-f]/gi, '')
+  if (hex.length < 6) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+  lum = lum || 0
+  let rgb = '#'
+  for (let i = 0; i < 3; i++) {
+    let c = parseInt(hex.substr(i * 2, 2), 16)
+    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16)
+    rgb += ('00' + c).substr(c.length)
+  }
+  return rgb
+}
+
+function lightOrDark (color) {
+  let r, g, b
+  if (color.match(/^rgb/)) {
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)
+    r = color[1]
+    g = color[2]
+    b = color[3]
+  } else {
+    color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'))
+    r = color >> 16
+    g = color >> 8 & 255
+    b = color & 255
+  }
+  const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))
+  return hsp > 127.5 ? 'light' : 'dark'
+}
+
+function parseBackgroundColor (backgroundColor) {
+  if (typeof backgroundColor !== 'string') backgroundColor = null
+  backgroundColor = backgroundColor || '//#292232'
+  const split = backgroundColor.split('/')
+  if (split.length > 1 && split[0] !== '') {
+    return { colorOne: normalizeColor(split[0]), colorTwo: normalizeColor(split[1]) }
+  } else if (backgroundColor.startsWith('//')) {
+    const base = normalizeColor(backgroundColor.replace('//', ''))
+    return { colorOne: colorLuminance(base, 0.35), colorTwo: colorLuminance(base, -0.15) }
+  } else {
+    const base = normalizeColor(backgroundColor)
+    return { colorOne: base, colorTwo: base }
+  }
+}
+
+function hexToHsl (hex) {
+  const [r, g, b] = hexToRgb(hex).map((v) => v / 255)
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  if (max === min) return [0, 0, l]
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  else if (max === g) h = ((b - r) / d + 2) / 6
+  else h = ((r - g) / d + 4) / 6
+  return [h * 360, s, l]
+}
+
+function hslToHex (h, s, l) {
+  h = ((h % 360) + 360) % 360 / 360
+  const hue2rgb = (p, q, t) => {
+    if (t < 0) t += 1
+    if (t > 1) t -= 1
+    if (t < 1 / 6) return p + (q - p) * 6 * t
+    if (t < 1 / 2) return q
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+    return p
+  }
+  let r, g, b
+  if (s === 0) {
+    r = g = b = l
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+  return rgbToHex([Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)])
+}
+
+module.exports = {
+  ColorContrast, hexToRgb, rgbToHex, normalizeColor, colorLuminance, lightOrDark, parseBackgroundColor, hexToHsl, hslToHex
+}