@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page-canvas/text-highlight-bands.ts

@@ -0,0 +1,127 @@
+import Konva from "konva";
+
+import { isTransparentColor } from "./text-background-plan";
+
+/**
+ * A per-line "marker" highlight: instead of one box behind the whole text (which,
+ * with a loose paragraph line-height, balloons into a solid block that swallows the
+ * gap between wrapped lines), we paint ONE band per visual line, each hugging that
+ * line's own text width. That reads as a highlighter pen — bands differ in width and
+ * a gap shows between lines.
+ *
+ * The line breaks MUST match what the editor/preview actually render, so we measure
+ * with an offscreen ``Konva.Text`` configured identically (same font, width, wrap,
+ * line-height). Konva populates ``textArr`` (its wrapped-line layout) in the
+ * constructor without needing a stage, so this is synchronous and deterministic —
+ * and, being the same engine, it wraps Korean no-space runs by character exactly as
+ * the visible text does.
+ *
+ * The band is stored on the element as ``custom.highlightColor`` (a single source of
+ * truth); the stock editor's native ``backgroundEnabled`` box is left off so the two never
+ * double up. Both renderers — the SDK editor (``BackgroundAwareText``) and the Konva
+ * export/preview — draw bands from the same computation here.
+ */
+
+export type HighlightBand = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  cornerRadius: number;
+};
+
+export type HighlightBandInput = {
+  text: string;
+  fontSize: number;
+  fontFamily?: string;
+  fontWeight?: unknown;
+  fontStyle?: unknown;
+  /** The text box width the visible text wraps against. */
+  boxWidth: number;
+  /** Unitless line-height ratio (px strings must be resolved by the caller). */
+  lineHeightRatio: number;
+  align?: string;
+  color?: unknown;
+};
+
+// Band geometry, all relative to fontSize so it scales with the text.
+const PAD_X_RATIO = 0.16; // horizontal overhang past the glyphs on each side
+const BAND_H_RATIO = 1.3; // band height around the glyphs (tight, not the line box)
+
+/** Resolve a Canvas/CSS line-height (number ratio or ``"30.78px"``) to a ratio. */
+export function lineHeightRatioFor(raw: unknown, fontSize: number): number {
+  if (typeof raw === "number" && Number.isFinite(raw) && raw > 0) return raw;
+  if (typeof raw === "string") {
+    const px = /^(-?\d*\.?\d+)px$/.exec(raw.trim());
+    if (px && fontSize > 0) {
+      const ratio = parseFloat(px[1]) / fontSize;
+      if (Number.isFinite(ratio) && ratio > 0) return ratio;
+    }
+    const n = parseFloat(raw);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return 1.2;
+}
+
+function konvaFontStyle(fontWeight: unknown, fontStyle: unknown): string {
+  const bold = /(bold|[6-9]00)/i.test(String(fontWeight ?? ""));
+  const italic = String(fontStyle ?? "") === "italic";
+  return [bold ? "bold" : "", italic ? "italic" : ""].join(" ").trim() || "normal";
+}
+
+/** Wrapped lines with their pixel widths, via an offscreen Konva.Text. */
+export function measureHighlightLines(
+  input: HighlightBandInput,
+): { text: string; width: number }[] {
+  const node = new Konva.Text({
+    text: String(input.text ?? ""),
+    fontSize: input.fontSize,
+    fontFamily: input.fontFamily || "Arial",
+    fontStyle: konvaFontStyle(input.fontWeight, input.fontStyle),
+    lineHeight: input.lineHeightRatio,
+    width: input.boxWidth > 0 ? input.boxWidth : undefined,
+    wrap: input.boxWidth > 0 ? "word" : "none",
+  });
+  const arr = (node.textArr ?? []) as Array<{ text?: string; width?: number }>;
+  const lines = arr.map((l) => ({
+    text: String(l.text ?? ""),
+    width: Number(l.width) || 0,
+  }));
+  const fallbackWidth = (() => {
+    try {
+      return node.getTextWidth();
+    } catch {
+      return 0;
+    }
+  })();
+  node.destroy();
+  return lines.length
+    ? lines
+    : [{ text: String(input.text ?? ""), width: fallbackWidth }];
+}
+
+/**
+ * Per-line marker bands in the text's LOCAL coordinate space (origin at the text
+ * box's top-left, before the element's own x/y/rotation transform). Blank lines
+ * produce no band. Returns [] when there is nothing to paint.
+ */
+export function computeHighlightBands(input: HighlightBandInput): HighlightBand[] {
+  const fs = input.fontSize;
+  if (!(fs > 0) || isTransparentColor(input.color)) return [];
+  const lineH = fs * input.lineHeightRatio;
+  const padX = fs * PAD_X_RATIO;
+  const bandH = Math.min(fs * BAND_H_RATIO, lineH); // never taller than the line box
+  const cornerRadius = Math.min(bandH * 0.28, 6);
+  const align = String(input.align ?? "left").toLowerCase();
+  const boxWidth = input.boxWidth;
+
+  return measureHighlightLines(input).flatMap((line, i) => {
+    if (!line.text.trim()) return [];
+    const w = Math.max(0, line.width) + padX * 2;
+    let x = -padX; // left / start
+    if (align === "center") x = (boxWidth - line.width) / 2 - padX;
+    else if (align === "right" || align === "end") x = boxWidth - line.width - padX;
+    const yCenter = i * lineH + lineH / 2;
+    return [{ x, y: yCenter - bandH / 2, width: w, height: bandH, cornerRadius }];
+  });
+}

package/lib/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@leviosa-ai/detail-page-editor",
+  "version": "0.1.0",
+  "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Leviosa-AI/leviosa-canvas.git",
+    "directory": "packages/detail-page-editor"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": "./index.ts",
+    "./package.json": "./package.json",
+    "./host": "./components/detail-page/detail-page-host-context.tsx",
+    "./types": "./types/detail-page-canvas.ts",
+    "./api-types": "./types/detail-page-api.ts",
+    "./commerce-types": "./types/commerce.ts",
+    "./components/canvas-store-facade": "./components/detail-page/canvas-store-facade.ts",
+    "./components/editor-history": "./components/detail-page/editor-history.ts",
+    "./components/hovered-layer": "./components/detail-page/hovered-layer.ts",
+    "./components/element-rects": "./components/detail-page/element-rects.ts",
+    "./components/detail-page-selection": "./components/detail-page/detail-page-selection.ts",
+    "./components/detail-page-thumbnail-bus": "./components/detail-page/detail-page-thumbnail-bus.ts",
+    "./components/*": "./components/detail-page/*.tsx",
+    "./lib/*": "./lib/detail-page/*.ts",
+    "./canvas/*": "./lib/detail-page-canvas/*.ts"
+  },
+  "files": [
+    "index.ts",
+    "components",
+    "config",
+    "lib",
+    "types",
+    "!**/__tests__"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "ag-psd": "^28.5.1",
+    "fontkit": "^2.0.4",
+    "gifenc": "^1.0.3",
+    "gifuct-js": "^2.1.2",
+    "jszip": "^3.10.1",
+    "mp4-muxer": "^5.2.2",
+    "qrcode-generator": "^2.0.4",
+    "woff2-encoder": "2.0.0"
+  },
+  "peerDependencies": {
+    "@leviosa-ai/canvas": "^0.1.1",
+    "@leviosa-ai/konva": "^0.8.0",
+    "@tanstack/react-query": "^5.100.3",
+    "konva": "^10.0.0",
+    "lucide-react": "^0.563.0",
+    "next": "^16.0.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^16.0.0",
+    "react-konva": "^19.0.0"
+  }
+}

package/types/commerce.ts

@@ -0,0 +1,171 @@
+/**
+ * 편집기가 커머스 플랫폼 응답에서 **실제로 읽는 것**만.
+ *
+ * 프리필(업로드 3루트)이 카페24·네이버·쿠팡 상품을 읽어 설문을 채운다. 그래서 편집기는
+ * 이 응답들의 모양을 어느 정도 알아야 한다 — 완전히 불투명하게 두면 프리필이 못 선다.
+ *
+ * 다만 앱의 커머스 타입 전체(수백 줄)를 여기 옮기지는 않았다. 편집기는 카페24 클라이언트가
+ * 아니고, 소비자(agency)는 그 타입을 갖고 있지도 않다. 그래서 **읽는 필드만** 선언한다.
+ *
+ * ## 드리프트는 어떻게 잡히나
+ *
+ * 앱이 자기 진짜 타입으로 `DetailPageHost` 를 구현할 때 tsc 가 대입 가능성을 잰다.
+ * 앱 쪽에서 여기 적힌 필드가 사라지면 그 자리에서 즉시 죽는다 — 우리가 앱 타입을
+ * 직접 가져오지 않고도 계약이 지켜지는 이유다. 반대로 앱에 필드가 **더** 있는 것은
+ * 아무 문제가 없다(구조적 타이핑).
+ *
+ * 여는 쪽은 전부 옵셔널로 뒀다. 편집기 코드가 이미 옵셔널 체이닝과 방어적 문자열
+ * 추출로 읽고 있어서, 여기서 필수로 못 박으면 앱의 진짜 타입이 더 느슨할 때 대입이
+ * 깨진다. 이 파일은 "최소한 이만큼은 온다"가 아니라 "이만큼을 본다"는 선언이다.
+ */
+
+/** 진열·판매 플래그. */
+export type Cafe24Flag = "T" | "F";
+
+// ── 카페24 ────────────────────────────────────────────────────
+
+export interface Cafe24ProductListParams {
+  page?: number;
+  page_size?: number;
+  query?: string;
+  category_name?: string;
+  include_sub_category?: boolean;
+  display?: Cafe24Flag;
+  selling?: Cafe24Flag;
+  include_details?: boolean;
+}
+
+/**
+ * 목록 한 줄.
+ *
+ * 번호와 이름이 **필수**인 것은 우리가 그렇게 정해서가 아니라, 호스트가 꽂아 줄
+ * `getCafe24ProductNo` 가 그 둘을 요구하기 때문이다. 여기서 옵셔널로 열어 두면 앱이
+ * 자기 함수를 못 꽂는다 — 인자는 반변이라 우리 쪽이 더 느슨하면 대입이 깨진다.
+ */
+export interface Cafe24ProductSummary {
+  product_no: number;
+  origin_product_no: number;
+  product_name: string;
+  name: string;
+  list_image?: string | null;
+  tiny_image?: string | null;
+  small_image?: string | null;
+  detail_image?: string | null;
+  /**
+   * 카페24 목록은 계정 설정에 따라 필드가 늘고 준다. 앱의 타입도 이 서명을 갖고 있고,
+   * 없으면 앱 함수를 못 꽂는다 — 색인 서명이 있는 타입에는 없는 타입을 못 넣는다.
+   */
+  [key: string]: unknown;
+}
+
+export interface Cafe24ProductListPage {
+  items: Cafe24ProductSummary[];
+  page_size: number;
+  total: number;
+}
+
+/**
+ * 상세. 나머지 필드는 코드가 `Record<string, unknown>` 으로 캐스팅해 방어적으로 읽으므로
+ * 여기 적힌 것이 편집기가 **타입으로** 아는 전부다.
+ */
+export interface Cafe24ProductDetailPayload {
+  _cafe24_raw?: unknown;
+  originProduct?: {
+    name?: string | null;
+    summary_description?: string | null;
+    simple_description?: string | null;
+    detailContent?: string | null;
+    images?: { representativeImage?: { url?: string | null } | null } | null;
+  } | null;
+}
+
+/** 새로고침 힌트. 상세·옵션·카테고리 조회가 공유한다. */
+export interface Cafe24RefreshParams {
+  force_refresh?: boolean;
+  known_product_info_version?: string;
+}
+
+// ── 네이버 ────────────────────────────────────────────────────
+
+export interface NaverProductListParams {
+  page?: number;
+  size?: number;
+}
+
+export interface NaverProductListPage {
+  contents: Array<{
+    originProductNo: number | string;
+    channelProducts?: Array<{
+      name?: string | null;
+      representativeImage?: { url?: string | null } | null;
+    }> | null;
+  }>;
+  totalPages?: number | null;
+}
+
+export interface NaverProductDetailPayload {
+  originProduct?: {
+    name?: string | null;
+    detailContent?: string | null;
+    leafCategoryId?: string | number | null;
+    images?: {
+      representativeImage?: { url?: string | null } | null;
+      optionalImages?: Array<{ url?: string | null } | null> | null;
+    } | null;
+    detailAttribute?: {
+      optionInfo?: {
+        optionSimple?: Array<{
+          groupName?: string | null;
+          name?: string | null;
+        }> | null;
+      } | null;
+      originAreaInfo?: { content?: string | null } | null;
+      naverShoppingSearchInfo?: { brandName?: string | null } | null;
+      seoInfo?: { sellerTags?: Array<{ text?: string | null }> | null } | null;
+    } | null;
+    deliveryInfo?: {
+      deliveryCompany?: string | null;
+      deliveryFee?: { baseFee?: number | string | null } | null;
+      claimDeliveryInfo?: { returnDeliveryFee?: number | string | null } | null;
+    } | null;
+  } | null;
+}
+
+// ── 쿠팡 ──────────────────────────────────────────────────────
+//
+// 쿠팡만 소싱 서버가 아니라 자체 클라이언트다. 그래서 호출 모양도 다르다
+// (`{ signal }` 을 옵션 객체로 받는다).
+
+export interface CoupangListListingsParams {
+  nextToken?: string;
+  maxPerPage?: number;
+  name?: string;
+  signal?: AbortSignal;
+}
+
+export interface CoupangListingListPage {
+  data: Array<{
+    sellerProductId: number | string;
+    sellerProductName?: string | null;
+    representativeImage?: string | null;
+  }>;
+  nextToken?: string | null;
+}
+
+export interface CoupangListingDetail {
+  data: {
+    sellerProductName?: string | null;
+    displayCategoryCode?: string | number | null;
+    items?: Array<{
+      attributes?: Array<{
+        attributeTypeName?: string | null;
+        attributeValueName?: string | null;
+      }> | null;
+    }> | null;
+    images?: Array<{
+      imageOrder?: number | null;
+      cdnPath?: string | null;
+      vendorPath?: string | null;
+    }> | null;
+  };
+}

package/types/detail-page-api.ts

@@ -0,0 +1,200 @@
+/**
+ * 편집기가 소싱 서버와 주고받는 모양.
+ *
+ * 이 타입들은 **편집기의 도메인**이다 — 상세페이지 판독 결과, 프롬프트 편집 결과,
+ * 도형 라이브러리, 편집 한도. 그래서 정의가 여기 산다. 소싱 서버 클라이언트를 쓰는
+ * 앱(leviosa-frontend)은 이걸 패키지에서 가져다 쓴다. 정의를 양쪽에 두면 그날부터
+ * 갈라지므로, 옮긴 것이지 복제한 것이 아니다.
+ *
+ * 호출 **방법**(base URL·토큰·재시도)은 여기 없다. 그건 호스트가 안다 —
+ * `components/detail-page/detail-page-host-context.tsx`.
+ */
+
+export interface DetailPagePersonalShapeItem {
+  asset_id: string;
+  svg: string;
+  view_box: string;
+  width: number;
+  height: number;
+  origin?: string;
+  created_at?: string;
+}
+
+export type DetailPageReferenceImageUploadUrlResponse = Record<string, unknown>;
+
+export interface DetailPagePromptEditResult {
+  slot_role: string;
+  text: string;
+  edits_used?: number;
+  edit_limit?: number;
+}
+
+export interface DetailPageSvgPromptEditResult {
+  slot_role: string;
+  svg: string;
+  edits_used?: number;
+  edit_limit?: number;
+}
+
+export interface DetailPageEditUsageResult {
+  svg_used: number;
+  svg_limit: number;
+  text_used: number;
+  text_limit: number;
+  unlimited: boolean;
+}
+
+/** 편집 한도 초과(429) 오류 본문. 프론트 하드 차단 + 추가구매 안내에 사용. */
+export interface DetailPageEditQuotaDetail {
+  error: "edit_quota_exceeded";
+  kind: "svg" | "text";
+  used: number;
+  limit: number;
+}
+
+/** 그룹 프롬프트 편집: 대상 요소 한 개(텍스트/도형/차트·표)의 입력 형태. */
+export interface DetailPageGroupEditItem {
+  id: string;
+  kind: "text" | "svg" | "data";
+  current_text?: string;
+  current_svg?: string;
+  slot_role?: string;
+  render_kind?: string;
+  max_length?: number;
+  /**
+   * 차트·표(``kind: "data"``)일 때의 스펙.
+   *
+   * 자식 글자가 아니라 스펙을 주고받는다 — 차트·표의 자식은 스펙에서 매번 다시
+   * 그려지므로, 글자를 고쳐 받으면 다음 편집 한 번에 덮인다.
+   */
+  spec_kind?: "chart" | "table";
+  current_spec?: unknown;
+}
+
+/** 그룹 프롬프트 편집 결과: 요소별 수정 결과. */
+export interface DetailPageGroupEditResultItem {
+  id: string;
+  kind: "text" | "svg" | "data";
+  text?: string | null;
+  svg?: string | null;
+  /** data일 때 수정된 스펙. 변경이 없으면 안 온다(원본 유지). */
+  spec?: unknown;
+}
+
+export interface DetailPageGroupPromptEditResult {
+  results: DetailPageGroupEditResultItem[];
+  text_used: number;
+  text_limit: number;
+  svg_used: number;
+  svg_limit: number;
+}
+
+export interface DetailPageImageEditResult {
+  success: boolean;
+  message?: string;
+  slot_role?: string;
+  asset_id?: string;
+  url?: string;
+  s3_key?: string;
+  tier?: string;
+  provider_model?: string;
+  credit_feature?: string;
+  credit_remaining?: number;
+}
+
+/** 크레딧 부족(402) 오류 본문. 프론트 부족 안내 + 추가구매 CTA에 사용. */
+export interface DetailPageInsufficientCreditsDetail {
+  error: "insufficient_credits";
+  feature: string;
+  remaining: number;
+  message: string;
+}
+
+// --- 도형(SVG) 라이브러리 -----------------------------------------------------
+
+/** 공용 도형 라이브러리 한 건(정적 카탈로그, 인라인 SVG 마크업). */
+export interface DetailPageShapeLibraryItem {
+  id: string;
+  category: string;
+  view_box: string;
+  width: number;
+  height: number;
+  svg: string;
+}
+
+/** 도형 저장 결과(동일 도형은 duplicate=true로 기존 재사용). */
+export interface DetailPagePersonalShapeSaveResult
+  extends DetailPagePersonalShapeItem {
+  success: boolean;
+  message?: string;
+  duplicate?: boolean;
+}
+
+/**
+ * 레퍼런스 한 장 + 그 장에서 따라갈 축.
+ *
+ * ``aspects`` 는 닫힌 어휘다(palette · typography · layout · content · mood ·
+ * decoration). 비우면 예전처럼 배치와 구성만 참고한다. ``content`` 는 문구가 아니라
+ * **다루는 정보 항목과 순서**다.
+ */
+export interface DesignReferenceInput {
+  url: string;
+  aspects?: string[];
+  note?: string;
+}
+
+/** 레퍼런스 판독 결과 — 설문이 이미 아는 어휘로 옮긴 것. 빈 값은 "모른다"다. */
+export interface DetailPageDesignBrief {
+  tone: string;
+  density: string;
+  bg_color: string;
+  primary_colors: string[];
+  typography: string;
+  layout: string;
+  /** 다루는 정보 항목과 순서 한 줄. 문구가 아니다. */
+  content: string;
+  summary: string;
+  reference_count: number;
+  aspects: string[][];
+}
+
+/** 판독 응답. 차감 크레딧은 화면이 셀러에게 되돌려 줘야 하는 숫자다. */
+export interface DetailPageDesignBriefResult {
+  brief: DetailPageDesignBrief;
+  model: string;
+  /** 차감한 크레딧(붙인 그림 크기로 정해짐). 과금이 꺼져 있으면 0. */
+  credit_charged?: number;
+  /** 차감 뒤 잔여 크레딧. 과금을 건너뛰었으면 -1. */
+  credit_remaining?: number;
+}
+
+/** 브랜드 버킷에 저장해 둔 레퍼런스 자산 한 건. */
+export interface DetailPageBrandReferenceItem {
+  asset_id: string;
+  url: string;
+  /** 만료 없는 서명 경로. 문서에 박을 주소는 이쪽이어야 다시 열 때 403 이 안 난다. */
+  stable_path: string;
+  display_name: string;
+  mime: string;
+  created_at: string;
+  /** screen(화면 캡쳐) | document(편집기 문서). 그림으로 걸 수 있는 것은 screen 뿐이다. */
+  role: string;
+  reference_group: string;
+  reference_name: string;
+  generated_id: string;
+  template_id: string;
+  screen_label: string;
+  screen_index: number;
+  screen_count: number;
+}
+
+/** 화면 재저작 결과: 갈아 끼울 Canvas 페이지 하나 + 규약 린트 리포트. */
+export interface DetailPageSectionReauthorResult {
+  label: string;
+  page: Record<string, unknown>;
+  lint_ok: boolean;
+  lint_findings: Array<Record<string, unknown>>;
+  rounds: number;
+  text_used: number;
+  text_limit: number;
+}

package/types/detail-page-canvas.ts

@@ -0,0 +1,20 @@
+export type CanvasSlotBinding = {
+  page_id?: string | null;
+  element_id: string;
+  kind: "text" | "image" | "number" | "html" | "rich";
+};
+
+export type LeviosaCanvasDocument = {
+  schema_version: "leviosa-canvas-detail-page-v1";
+  renderer: "leviosa_canvas_detail_page";
+  template_id?: string | null;
+  template_version?: number | null;
+  canvas: {
+    width: number;
+    background: string;
+  };
+  slot_bindings: Record<string, CanvasSlotBinding>;
+  canvas_json: Record<string, unknown>;
+  fonts: Array<Record<string, unknown>>;
+  source: "leviosa_canvas_editor";
+};

package/types/fontkit.d.ts

@@ -0,0 +1,42 @@
+declare module "fontkit" {
+  export type FontkitGlyph = {
+    id: number;
+    advanceWidth: number;
+  };
+
+  export type FontkitSubset = {
+    includeGlyph(glyph: FontkitGlyph | number): number;
+    encode(): Uint8Array;
+  };
+
+  export type FontkitFont = {
+    postscriptName?: string | null;
+    unitsPerEm: number;
+    ascent: number;
+    descent: number;
+    capHeight: number;
+    italicAngle: number;
+    bbox: {
+      minX: number;
+      minY: number;
+      maxX: number;
+      maxY: number;
+    };
+    glyphForCodePoint(codePoint: number): FontkitGlyph;
+    createSubset(): FontkitSubset;
+    directory?: { tables: Record<string, unknown> };
+    _glyphs?: unknown[];
+    readonly ["OS/2"]?: {
+      fsType?: {
+        noEmbedding?: boolean;
+        viewOnly?: boolean;
+        editable?: boolean;
+        noSubsetting?: boolean;
+        bitmapOnly?: boolean;
+      };
+    };
+    readonly ["CFF "]?: unknown;
+  };
+
+  export function create(buffer: Uint8Array): FontkitFont;
+}

package/types/gifenc.d.ts

@@ -0,0 +1,51 @@
+// Minimal typings for gifenc (ships no declarations). Covers only the surface
+// the detail-page GIF exporter uses: quantize → applyPalette → GIFEncoder.
+declare module "gifenc" {
+  type PixelBuffer = Uint8Array | Uint8ClampedArray;
+  type Palette = number[][];
+  type PixelFormat = "rgb565" | "rgb444" | "rgba4444";
+
+  export function quantize(
+    rgba: PixelBuffer,
+    maxColors: number,
+    options?: {
+      format?: PixelFormat;
+      oneBitAlpha?: boolean | number;
+      clearAlpha?: boolean;
+      clearAlphaThreshold?: number;
+      clearAlphaColor?: number;
+    },
+  ): Palette;
+
+  export function applyPalette(
+    rgba: PixelBuffer,
+    palette: Palette,
+    format?: PixelFormat,
+  ): Uint8Array;
+
+  export interface GifEncoderInstance {
+    writeFrame(
+      index: Uint8Array,
+      width: number,
+      height: number,
+      options?: {
+        palette?: Palette;
+        delay?: number;
+        repeat?: number;
+        transparent?: boolean;
+        transparentIndex?: number;
+        dispose?: number;
+        first?: boolean;
+      },
+    ): void;
+    finish(): void;
+    bytes(): Uint8Array;
+    bytesView(): Uint8Array;
+    reset(): void;
+  }
+
+  export function GIFEncoder(options?: {
+    auto?: boolean;
+    initialCapacity?: number;
+  }): GifEncoderInstance;
+}