image-edit-tools 1.0.5 → 1.0.8

package/src/ops/clip-to-shape.ts

@@ -0,0 +1,63 @@
+import sharp from 'sharp';
+import { ClipToShapeOptions, ImageInput, ImageResult, ErrorCode } from '../types.js';
+import { loadImage } from '../utils/load-image.js';
+import { err, ok } from '../utils/result.js';
+import { getImageMetadata } from '../utils/validate.js';
+
+function buildClipSvg(width: number, height: number, options: ClipToShapeOptions): string {
+  const { shape } = options;
+  let clipContent: string;
+
+  switch (shape) {
+    case 'circle': {
+      const r = Math.min(width, height) / 2;
+      const cx = width / 2;
+      const cy = height / 2;
+      clipContent = `<circle cx="${cx}" cy="${cy}" r="${r}"/>`;
+      break;
+    }
+    case 'ellipse': {
+      clipContent = `<ellipse cx="${width / 2}" cy="${height / 2}" rx="${width / 2}" ry="${height / 2}"/>`;
+      break;
+    }
+    case 'rounded-rect': {
+      const radius = options.borderRadius ?? 32;
+      clipContent = `<rect width="${width}" height="${height}" rx="${radius}" ry="${radius}"/>`;
+      break;
+    }
+    default:
+      clipContent = `<rect width="${width}" height="${height}"/>`;
+  }
+
+  // Create an SVG mask: white shape on black = keep shape area
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+    ${clipContent.replace('/>', ' fill="white"/>')}
+  </svg>`;
+}
+
+export async function clipToShape(input: ImageInput, options: ClipToShapeOptions): Promise<ImageResult> {
+  try {
+    const buffer = await loadImage(input);
+    const meta = await getImageMetadata(buffer);
+    const { width, height } = meta;
+
+    const maskSvg = buildClipSvg(width, height, options);
+    const mask = await sharp(Buffer.from(maskSvg))
+      .resize(width, height)
+      .grayscale()
+      .toBuffer();
+
+    const output = await sharp(buffer)
+      .ensureAlpha()
+      .composite([{
+        input: mask,
+        blend: 'dest-in'
+      }])
+      .png()
+      .toBuffer();
+
+    return ok(output);
+  } catch (e: any) {
+    return err(e.message || 'Clip to shape failed', ErrorCode.PROCESSING_FAILED);
+  }
+}

package/src/ops/draw-shape.ts

@@ -0,0 +1,58 @@
+import sharp from 'sharp';
+import { DrawShapeOptions, ImageResult, ErrorCode } from '../types.js';
+import { err, ok } from '../utils/result.js';
+
+export async function drawShape(options: DrawShapeOptions): Promise<ImageResult> {
+  try {
+    const { width, height, shape } = options;
+    const fill = options.fill ?? 'transparent';
+    const fillOpacity = options.fillOpacity ?? 1;
+    const stroke = options.stroke ?? 'none';
+    const strokeWidth = options.strokeWidth ?? 0;
+    const borderRadius = options.borderRadius ?? 0;
+
+    let shapeEl: string;
+
+    switch (shape) {
+      case 'rect': {
+        shapeEl = `<rect x="${strokeWidth / 2}" y="${strokeWidth / 2}" width="${width - strokeWidth}" height="${height - strokeWidth}" rx="${borderRadius}" ry="${borderRadius}" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+        break;
+      }
+      case 'circle': {
+        const cx = options.cx ?? width / 2;
+        const cy = options.cy ?? height / 2;
+        const r = options.r ?? Math.min(width, height) / 2 - strokeWidth;
+        shapeEl = `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+        break;
+      }
+      case 'ellipse': {
+        const cx = options.cx ?? width / 2;
+        const cy = options.cy ?? height / 2;
+        const rx = options.r ?? width / 2 - strokeWidth;
+        const ry = options.ry ?? height / 2 - strokeWidth;
+        shapeEl = `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+        break;
+      }
+      case 'line': {
+        const x1 = options.x1 ?? 0;
+        const y1 = options.y1 ?? 0;
+        const x2 = options.x2 ?? width;
+        const y2 = options.y2 ?? height;
+        shapeEl = `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${stroke || fill}" stroke-width="${strokeWidth || 2}"/>`;
+        break;
+      }
+      default:
+        return err(`Unknown shape: ${shape}`, ErrorCode.INVALID_INPUT);
+    }
+
+    const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">${shapeEl}</svg>`;
+
+    const output = await sharp(Buffer.from(svg))
+      .png()
+      .toBuffer();
+
+    return ok(output);
+  } catch (e: any) {
+    return err(e.message || 'Draw shape failed', ErrorCode.PROCESSING_FAILED);
+  }
+}

package/src/ops/drop-shadow.ts

@@ -0,0 +1,60 @@
+import sharp from 'sharp';
+import { DropShadowOptions, ImageInput, ImageResult, ErrorCode } from '../types.js';
+import { loadImage } from '../utils/load-image.js';
+import { err, ok } from '../utils/result.js';
+import { getImageMetadata } from '../utils/validate.js';
+
+export async function dropShadow(input: ImageInput, options: DropShadowOptions = {}): Promise<ImageResult> {
+  try {
+    const buffer = await loadImage(input);
+    const meta = await getImageMetadata(buffer);
+    const { width, height } = meta;
+
+    const offsetX = options.offsetX ?? 4;
+    const offsetY = options.offsetY ?? 4;
+    const blurRadius = options.blur ?? 8;
+    const color = options.color ?? 'rgba(0,0,0,0.5)';
+    const expand = options.expand ?? true;
+
+    const expandPx = expand ? Math.ceil(blurRadius * 2 + Math.max(Math.abs(offsetX), Math.abs(offsetY))) : 0;
+    const canvasW = width + expandPx * 2;
+    const canvasH = height + expandPx * 2;
+
+    // Create shadow by making a silhouette of the source image
+    const silhouette = await sharp(buffer)
+      .ensureAlpha()
+      .png()
+      .toBuffer();
+
+    // Tint to create a colored, blurred shadow
+    const shadow = await sharp({
+      create: { width, height, channels: 4, background: color }
+    })
+      .png()
+      .toBuffer();
+
+    // Use source alpha as mask for the shadow color
+    const maskedShadow = await sharp(shadow)
+      .composite([{
+        input: silhouette,
+        blend: 'dest-in'
+      }])
+      .blur(Math.max(0.3, blurRadius))
+      .toBuffer();
+
+    // Assemble on canvas
+    const canvas = await sharp({
+      create: { width: canvasW, height: canvasH, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } }
+    })
+      .composite([
+        { input: maskedShadow, left: expandPx + offsetX, top: expandPx + offsetY, blend: 'over' },
+        { input: buffer, left: expandPx, top: expandPx, blend: 'over' }
+      ])
+      .png()
+      .toBuffer();
+
+    return ok(canvas);
+  } catch (e: any) {
+    return err(e.message || 'Drop shadow failed', ErrorCode.PROCESSING_FAILED);
+  }
+}

package/src/ops/gradient-overlay.ts

@@ -0,0 +1,62 @@
+import sharp from 'sharp';
+import { GradientOverlayOptions, ImageInput, ImageResult, ErrorCode } from '../types.js';
+import { loadImage } from '../utils/load-image.js';
+import { err, ok } from '../utils/result.js';
+import { getImageMetadata } from '../utils/validate.js';
+
+function buildGradientSvg(
+  width: number,
+  height: number,
+  direction: string,
+  color: string,
+  opacity: number,
+  coverage: number
+): string {
+  // Map direction to SVG linearGradient coordinates
+  const dirMap: Record<string, { x1: string; y1: string; x2: string; y2: string }> = {
+    'top':          { x1: '0%', y1: '0%',   x2: '0%', y2: '100%' },
+    'bottom':       { x1: '0%', y1: '100%', x2: '0%', y2: '0%' },
+    'left':         { x1: '0%', y1: '0%',   x2: '100%', y2: '0%' },
+    'right':        { x1: '100%', y1: '0%', x2: '0%', y2: '0%' },
+    'top-left':     { x1: '0%', y1: '0%',   x2: '100%', y2: '100%' },
+    'top-right':    { x1: '100%', y1: '0%', x2: '0%', y2: '100%' },
+    'bottom-left':  { x1: '0%', y1: '100%', x2: '100%', y2: '0%' },
+    'bottom-right': { x1: '100%', y1: '100%', x2: '0%', y2: '0%' },
+  };
+
+  const d = dirMap[direction] ?? dirMap['bottom'];
+  const stopOffset = Math.round(coverage * 100);
+
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="g" x1="${d.x1}" y1="${d.y1}" x2="${d.x2}" y2="${d.y2}">
+        <stop offset="0%" stop-color="${color}" stop-opacity="${opacity}"/>
+        <stop offset="${stopOffset}%" stop-color="${color}" stop-opacity="0"/>
+      </linearGradient>
+    </defs>
+    <rect width="${width}" height="${height}" fill="url(#g)"/>
+  </svg>`;
+}
+
+export async function gradientOverlay(input: ImageInput, options: GradientOverlayOptions = {}): Promise<ImageResult> {
+  try {
+    const buffer = await loadImage(input);
+    const meta = await getImageMetadata(buffer);
+    const { width, height } = meta;
+
+    const direction = options.direction ?? 'bottom';
+    const color = options.color ?? '#000000';
+    const opacity = options.opacity ?? 0.7;
+    const coverage = options.coverage ?? 0.5;
+
+    const svg = buildGradientSvg(width, height, direction, color, opacity, coverage);
+
+    const output = await sharp(buffer)
+      .composite([{ input: Buffer.from(svg), blend: 'over' }])
+      .toBuffer();
+
+    return ok(output);
+  } catch (e: any) {
+    return err(e.message || 'Gradient overlay failed', ErrorCode.PROCESSING_FAILED);
+  }
+}

package/src/ops/pipeline.ts

@@ -10,6 +10,10 @@ import { composite } from './composite.js';
 import { watermark } from './watermark.js';
 import { convert } from './convert.js';
 import { optimize } from './optimize.js';
+import { rotate } from './rotate.js';
+import { gradientOverlay } from './gradient-overlay.js';
+import { clipToShape } from './clip-to-shape.js';
+import { dropShadow } from './drop-shadow.js';
 
 export async function pipeline(input: ImageInput, operations: PipelineOperation[]): Promise<ImageResult & { step?: number }> {
   let currentImage = input;
@@ -31,6 +35,10 @@ export async function pipeline(input: ImageInput, operations: PipelineOperation[
         case 'watermark': result = await watermark(currentImage, op); break;
         case 'convert': result = await convert(currentImage, op); break;
         case 'optimize': result = await optimize(currentImage, op); break;
+        case 'rotate': result = await rotate(currentImage, op); break;
+        case 'gradientOverlay': result = await gradientOverlay(currentImage, op); break;
+        case 'clipToShape': result = await clipToShape(currentImage, op); break;
+        case 'dropShadow': result = await dropShadow(currentImage, op); break;
         case 'removeBg': {
           const { removeBg } = await import('./remove-bg.js');
           result = await removeBg(currentImage, op);
@@ -62,3 +70,4 @@ export async function pipeline(input: ImageInput, operations: PipelineOperation[
 
   return { ok: true, data: currentImage as Buffer };
 }
+

package/src/ops/rotate.ts

@@ -0,0 +1,27 @@
+import sharp from 'sharp';
+import { RotateOptions, ImageInput, ImageResult, ErrorCode } from '../types.js';
+import { loadImage } from '../utils/load-image.js';
+import { err, ok } from '../utils/result.js';
+
+export async function rotate(input: ImageInput, options: RotateOptions): Promise<ImageResult> {
+  try {
+    const buffer = await loadImage(input);
+    const angle = options.angle % 360;
+
+    if (angle === 0) return ok(buffer);
+
+    const bgColor = options.background ?? { r: 0, g: 0, b: 0, alpha: 0 };
+    const background = typeof bgColor === 'string'
+      ? bgColor
+      : bgColor;
+
+    const output = await sharp(buffer)
+      .rotate(angle, { background })
+      .png()
+      .toBuffer();
+
+    return ok(output);
+  } catch (e: any) {
+    return err(e.message || 'Rotation failed', ErrorCode.PROCESSING_FAILED);
+  }
+}

package/src/types.ts

@@ -112,6 +112,26 @@ export interface TextBackground {
   borderRadius?: number;
 }
 
+/**
+ * A styled inline span within a text layer.
+ * Each span maps to a single SVG `<tspan>` element.
+ * Unset fields inherit from the parent `TextLayer`.
+ */
+export interface TextSpan {
+  /** The text content for this span */
+  text: string;
+  /** Override color for this span. Inherits `layer.color` if omitted. */
+  color?: string;
+  /** If true, renders with `font-weight: bold` */
+  bold?: boolean;
+  /** If true, renders with `font-style: italic` */
+  italic?: boolean;
+  /** Override fontSize for this span. Inherits `layer.fontSize` if omitted. */
+  fontSize?: number;
+  /** Background highlight color for this span */
+  highlight?: string;
+}
+
 export interface TextLayer {
   text: string;
   x: number;
@@ -128,6 +148,23 @@ export interface TextLayer {
   maxWidth?: number;
   lineHeight?: number;
   background?: TextBackground;
+  /** Letter spacing in pixels. Default: 0 */
+  letterSpacing?: number;
+  /** Text stroke (outline) */
+  stroke?: { color: string; width: number };
+  /** Text shadow */
+  textShadow?: { color: string; offsetX: number; offsetY: number; blur?: number };
+  /**
+   * Inline mixed-style spans.
+   * When provided, `text` field is ignored and this array is rendered instead.
+   * Use `\n` within span text or a separate `{ text: '\n' }` span for line breaks.
+   * @example
+   * spans: [
+   *   { text: '캠핑장, 북스테이 등 ' },
+   *   { text: '다양한 주제별 숙소 추천', bold: true, color: '#1A1A1A' },
+   * ]
+   */
+  spans?: TextSpan[];
 }
 
 // ─── Composite ────────────────────────────────────────────────────────────────
@@ -245,6 +282,94 @@ export interface ImageMetadata {
   exif?: Record<string, unknown>;
 }
 
+// ─── Rotate ───────────────────────────────────────────────────────────────────
+
+export interface RotateOptions {
+  /** Rotation angle in degrees (0–360). Positive = clockwise. */
+  angle: number;
+  /** Background color for exposed areas. Default: 'transparent' */
+  background?: string;
+}
+
+// ─── GradientOverlay ──────────────────────────────────────────────────────────
+
+export type GradientDirection = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export interface GradientOverlayOptions {
+  /** Direction the gradient fades FROM (opaque end). Default: 'bottom' */
+  direction?: GradientDirection;
+  /** Gradient color. Default: '#000000' */
+  color?: string;
+  /** Opacity of the opaque end. 0–1. Default: 0.7 */
+  opacity?: number;
+  /** How much of the image the gradient covers. 0–1. Default: 0.5 */
+  coverage?: number;
+}
+
+// ─── ClipToShape ──────────────────────────────────────────────────────────────
+
+export type ClipShape = 'circle' | 'ellipse' | 'rounded-rect';
+
+export interface ClipToShapeOptions {
+  shape: ClipShape;
+  /** Border radius for 'rounded-rect'. Default: 32 */
+  borderRadius?: number;
+}
+
+// ─── DrawShape ────────────────────────────────────────────────────────────────
+
+export type ShapeType = 'rect' | 'circle' | 'ellipse' | 'line';
+
+export interface DrawShapeOptions {
+  /** Canvas width */
+  width: number;
+  /** Canvas height */
+  height: number;
+  /** Shape to draw */
+  shape: ShapeType;
+  /** Fill color. Default: 'transparent' */
+  fill?: string;
+  /** Fill opacity. 0–1. Default: 1 */
+  fillOpacity?: number;
+  /** Stroke color */
+  stroke?: string;
+  /** Stroke width. Default: 0 */
+  strokeWidth?: number;
+  /** Border radius (rect only). Default: 0 */
+  borderRadius?: number;
+  /** Circle/ellipse center X. Defaults to canvas center */
+  cx?: number;
+  /** Circle/ellipse center Y. Defaults to canvas center */
+  cy?: number;
+  /** Circle radius or ellipse rx */
+  r?: number;
+  /** Ellipse ry */
+  ry?: number;
+  /** Line start X */
+  x1?: number;
+  /** Line start Y */
+  y1?: number;
+  /** Line end X */
+  x2?: number;
+  /** Line end Y */
+  y2?: number;
+}
+
+// ─── DropShadow ───────────────────────────────────────────────────────────────
+
+export interface DropShadowOptions {
+  /** Shadow color. Default: 'rgba(0,0,0,0.5)' */
+  color?: string;
+  /** Shadow offset X. Default: 4 */
+  offsetX?: number;
+  /** Shadow offset Y. Default: 4 */
+  offsetY?: number;
+  /** Blur radius. Default: 8 */
+  blur?: number;
+  /** Expand canvas to fit shadow. Default: true */
+  expand?: boolean;
+}
+
 // ─── Pipeline ─────────────────────────────────────────────────────────────────
 
 export type PipelineOperation =
@@ -259,9 +384,14 @@ export type PipelineOperation =
   | ({ op: 'watermark' } & WatermarkOptions)
   | ({ op: 'convert' } & ConvertOptions)
   | ({ op: 'optimize' } & OptimizeOptions)
-  | ({ op: 'removeBg' } & RemoveBgOptions);
+  | ({ op: 'removeBg' } & RemoveBgOptions)
+  | ({ op: 'rotate' } & RotateOptions)
+  | ({ op: 'gradientOverlay' } & GradientOverlayOptions)
+  | ({ op: 'clipToShape' } & ClipToShapeOptions)
+  | ({ op: 'dropShadow' } & DropShadowOptions);
 
 export interface BatchOptions {
   concurrency?: number;
   onProgress?: (done: number, total: number) => void;
 }
+

package/src/utils/font-loader.ts

@@ -0,0 +1,119 @@
+import { createHash } from 'crypto';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { writeFile, access } from 'fs/promises';
+import fetch from 'node-fetch';
+
+const CACHE_DIR = tmpdir();
+const CACHE_PREFIX = 'iet-font-';
+
+/**
+ * Generates a deterministic cache file path for a given URL.
+ * Uses SHA-256 hash truncated to 16 hex chars to avoid filename collisions.
+ *
+ * @param url - The font binary URL to hash
+ * @returns Absolute path without extension in the OS temp directory
+ */
+function cacheKey(url: string): string {
+  return join(
+    CACHE_DIR,
+    CACHE_PREFIX + createHash('sha256').update(url).digest('hex').slice(0, 16),
+  );
+}
+
+/**
+ * Extracts the file extension from a URL, stripping query parameters.
+ *
+ * @param url - URL to extract extension from
+ * @returns File extension (e.g. 'woff2', 'ttf') or 'woff2' as default
+ */
+function extractExtension(url: string): string {
+  const lastSegment = url.split('/').pop() ?? '';
+  const withoutQuery = lastSegment.split('?')[0];
+  const ext = withoutQuery.split('.').pop() ?? 'woff2';
+  return ext;
+}
+
+/**
+ * Resolves a fontUrl to a local `file://` path usable by librsvg.
+ *
+ * Handles three cases:
+ * - `file://` or absolute path → returned as `file://` URI
+ * - `https://fonts.googleapis.com/css*` → fetches CSS, extracts font URL, downloads binary
+ * - Direct binary URL (`.woff`, `.woff2`, `.ttf`, `.otf`) → downloads and caches
+ *
+ * Cache is stored in `os.tmpdir()` with prefix `iet-font-`. No TTL (font files are immutable).
+ *
+ * @param fontUrl - The font URL to resolve
+ * @returns A `file://` URI pointing to a local font file
+ * @throws {Error} If network fetch fails or CSS contains no font URLs
+ *
+ * @example
+ * // Google Fonts CSS URL
+ * const path = await resolveFontUrl('https://fonts.googleapis.com/css2?family=Jua');
+ * // → 'file:///tmp/iet-font-abcdef1234567890.woff2'
+ *
+ * @example
+ * // Direct font binary URL
+ * const path = await resolveFontUrl('https://example.com/font.woff2');
+ * // → 'file:///tmp/iet-font-0123456789abcdef.woff2'
+ */
+export async function resolveFontUrl(fontUrl: string): Promise<string> {
+  // Already a local path — pass through
+  if (fontUrl.startsWith('file://')) {
+    return fontUrl;
+  }
+  if (fontUrl.startsWith('/')) {
+    return `file://${fontUrl}`;
+  }
+
+  // Determine the actual binary URL to download
+  let binaryUrl = fontUrl;
+
+  if (fontUrl.includes('fonts.googleapis.com/css')) {
+    // Google Fonts CSS endpoint — fetch CSS and extract the font binary URL
+    const cssRes = await fetch(fontUrl, {
+      headers: {
+        // Desktop UA ensures we get woff2 (most compact modern format)
+        'User-Agent':
+          'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+      },
+    });
+    if (!cssRes.ok) {
+      throw new Error(`Google Fonts CSS fetch failed: ${cssRes.status}`);
+    }
+
+    const css = await cssRes.text();
+
+    // Extract all url() references pointing to font binary files
+    const urls = [...css.matchAll(/url\((https[^)]+\.(?:woff2?|ttf|otf)[^)]*)\)/g)].map(
+      (m) => m[1],
+    );
+
+    if (urls.length === 0) {
+      throw new Error('No font URL found in Google Fonts CSS');
+    }
+
+    // Prefer woff2 for smaller file size, fallback to first match
+    binaryUrl = urls.find((u) => u.endsWith('.woff2')) ?? urls[0];
+  }
+
+  // Check cache before downloading
+  const ext = extractExtension(binaryUrl);
+  const cacheFile = `${cacheKey(binaryUrl)}.${ext}`;
+
+  try {
+    await access(cacheFile);
+    // Cache hit
+    return `file://${cacheFile}`;
+  } catch {
+    // Cache miss — download the binary
+    const res = await fetch(binaryUrl);
+    if (!res.ok) {
+      throw new Error(`Font download failed: ${res.status} ${binaryUrl}`);
+    }
+    const buf = Buffer.from(await res.arrayBuffer());
+    await writeFile(cacheFile, buf);
+    return `file://${cacheFile}`;
+  }
+}

package/tests/integration/font-url.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { addText } from '../../src/ops/add-text.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const fixture = (name: string) => readFileSync(join(__dirname, '../fixtures', name));
+
+describe('fontUrl integration', () => {
+  let samplePng: Buffer;
+
+  beforeAll(() => {
+    samplePng = fixture('sample.png');
+  });
+
+  it('renders text with Google Fonts URL (Korean)', async () => {
+    const result = await addText(samplePng, {
+      layers: [{
+        text: '한국어 테스트',
+        x: 20, y: 50,
+        fontSize: 32, color: '#000',
+        fontFamily: 'Jua',
+        fontUrl: 'https://fonts.googleapis.com/css2?family=Jua&display=swap',
+        anchor: 'top-left',
+      }]
+    });
+    expect(result.ok).toBe(true);
+  }, { timeout: 30000 });
+
+  it('renders text with direct woff2 font URL', async () => {
+    const result = await addText(samplePng, {
+      layers: [{
+        text: 'Direct Font Test',
+        x: 20, y: 50,
+        fontSize: 28, color: '#333',
+        fontFamily: 'Inter',
+        fontUrl: 'https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2',
+        anchor: 'top-left',
+      }]
+    });
+    expect(result.ok).toBe(true);
+  }, { timeout: 15000 });
+
+  it('renders spans with Google Fonts URL', async () => {
+    const result = await addText(samplePng, {
+      layers: [{
+        text: '',
+        x: 20, y: 50,
+        fontSize: 28, color: '#333',
+        fontFamily: 'Jua',
+        fontUrl: 'https://fonts.googleapis.com/css2?family=Jua&display=swap',
+        spans: [
+          { text: '캠핑장, 북스테이 등 ' },
+          { text: '다양한 주제별 숙소 추천', bold: true, color: '#1A1A1A' },
+        ]
+      }]
+    });
+    expect(result.ok).toBe(true);
+  }, { timeout: 30000 });
+});