@leviosa-ai/detail-page-editor 0.3.0 → 0.4.0

package/components/detail-page/bubble-tail-overlay.tsx

@@ -14,7 +14,7 @@ import {
   readBubbleParams,
   type BubbleParams,
   type Pt,
-} from "../../lib/detail-page-canvas/bubble-path";
+} from "@leviosa-ai/canvas/paint/bubble-path";
 
 /**
  * 말풍선 꼬리 끝점을 드래그하는 핸들 — Canva/미리캔버스식.

package/components/detail-page/detail-page-konva-json-preview.tsx

@@ -11,13 +11,13 @@ import {
   Text,
 } from "react-konva/es/ReactKonvaCore";
 
-import { roundedRectPath } from "../../lib/detail-page-canvas/clip-rect";
+import { roundedRectPath } from "@leviosa-ai/canvas/paint/clip-rect";
 import {
   normalizeCanvasJsonForKonva,
   type ParsedGradient,
   type CanvasFallbackElement,
-} from "../../lib/detail-page-canvas/konva-fallback";
-import { computeHighlightBands } from "../../lib/detail-page-canvas/text-highlight-bands";
+} from "@leviosa-ai/canvas/paint/konva-fallback";
+import { computeHighlightBands } from "@leviosa-ai/canvas/paint/text-highlight-bands";
 import type { LeviosaCanvasDocument } from "../../types/detail-page-canvas";
 
 /** Konva gradient/shadow/cornerRadius props derived from a fallback element. */

package/lib/detail-page-canvas/export/ai.ts

@@ -1,4 +1,4 @@
-import { parseCssGradient, linearGradientKonvaProps, radialGradientKonvaProps } from "../konva-fallback";
+import { parseCssGradient, linearGradientKonvaProps, radialGradientKonvaProps } from "@leviosa-ai/canvas/paint/konva-fallback";
 import {
   documentWidth,
   pageHeight,

package/lib/detail-page-canvas/export/psd.ts

@@ -1,7 +1,7 @@
 import type { Layer, Psd } from "ag-psd";
 
 import { parseColor } from "./color";
-import { parseCssGradient } from "../konva-fallback";
+import { parseCssGradient } from "@leviosa-ai/canvas/paint/konva-fallback";
 import {
   documentWidth,
   pageHeight,

package/lib/detail-page-canvas/export/raster.ts

@@ -2,7 +2,7 @@ import {
   linearGradientKonvaProps,
   parseCssGradient,
   radialGradientKonvaProps,
-} from "../konva-fallback";
+} from "@leviosa-ai/canvas/paint/konva-fallback";
 import type { ExportElement } from "./document-model";
 import { cssFont, layoutText, normalizeFontWeight, transformText } from "./text-layout";
 

package/lib/detail-page-canvas/export/svg.ts

@@ -2,7 +2,7 @@ import {
   linearGradientKonvaProps,
   parseCssGradient,
   radialGradientKonvaProps,
-} from "../konva-fallback";
+} from "@leviosa-ai/canvas/paint/konva-fallback";
 import {
   documentWidth,
   pageHeight,

package/lib/detail-page-canvas/text-background-plan.ts

@@ -1,4 +1,5 @@
-import { parseCssGradient, type ParsedGradient } from "./konva-fallback";
+import { parseCssGradient, type ParsedGradient } from "@leviosa-ai/canvas/paint/konva-fallback";
+import { isTransparentColor } from "@leviosa-ai/canvas/paint/text-highlight-bands";
 
 /**
  * The Canvas SDK editor paints a text element's background as a per-line
@@ -56,19 +57,6 @@ export type TextBackgroundPlan =
     }
   | null;
 
-/** True for ``"transparent"`` or any colour whose alpha channel is 0. */
-export function isTransparentColor(value: unknown): boolean {
-  if (typeof value !== "string") return true;
-  const color = value.trim().toLowerCase();
-  if (!color || color === "transparent" || color === "none") return true;
-  const rgba = color.match(/^rgba?\(([^)]+)\)$/);
-  if (rgba) {
-    const parts = rgba[1].split(",").map((part) => part.trim());
-    if (parts.length === 4) return parseFloat(parts[3]) === 0;
-  }
-  return false;
-}
-
 /**
  * Decide what background rect (if any) to paint behind a Canvas text element.
  * Returns ``null`` when the stock per-line contour is already correct (e.g. a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -62,7 +62,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "^0.1.1",
+    "@leviosa-ai/canvas": "^0.1.4",
     "@leviosa-ai/konva": "^0.8.0",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",

package/lib/detail-page-canvas/bubble-path.ts

@@ -1,190 +0,0 @@
-/**
- * 말풍선 = 몸통 + 꼬리가 이어진 **하나의 닫힌 path**.
- *
- * 왜 하나의 path인가
- * ------------------
- * 꼬리를 별도 도형으로 얹고 몸통의 테두리를 fill로 "덮는" 방식은 반드시 깨진다.
- * 라운드·스트로크·안티에일리어싱이 조금만 어긋나도 이음매가 드러난다. 몸통과 꼬리를
- * 한 path로 뽑으면 fill/stroke가 그냥 이어지므로 덮을 테두리도 죽일 라운드도 없다.
- *
- * 꼬리는 각도가 아니라 **끝점(tip)** 으로 잡는다
- * ---------------------------------------------
- * tip을 자유 좌표로 두고, 둘레에서 tip에 가장 가까운 지점을 찾아 그 자리에 꼬리를
- * 끼워 넣는다. tip을 360도 어디로 끌어도 꼬리는 항상 몸통에 붙어 있고, 모서리에
- * 걸치면 두 변에 걸친 부리가 된다 — Canva/미리캔버스의 꼬리 드래그가 이 방식이다.
- *
- * 이 파일은 디컴포저 쪽 ``bubble_path.py``의 쌍둥이다. 두 구현이 같은 파라미터
- * (``custom.bubble``)로 같은 path를 내야 편집기 렌더가 원본 문서와 어긋나지 않는다.
- */
-
-export type Pt = [number, number];
-
-export type BubbleParams = {
-  /** 몸통 크기 (꼬리·스트로크 여백 pad는 제외한 순수 몸통). */
-  w: number;
-  h: number;
-  /** 몸통 모서리 라운드. */
-  r: number;
-  /** 꼬리·스트로크가 삐져나갈 여백. SVG 좌표계는 (-pad,-pad)에서 시작한다. */
-  pad: number;
-  fill: string;
-  stroke?: string | null;
-  strokeWidth?: number;
-  /** 꼬리 끝점(몸통 로컬 좌표). null이거나 몸통 안이면 꼬리 없음. */
-  tip?: Pt | null;
-  /** 꼬리 밑변의 둘레 위 길이 [선행, 후행]. 비대칭이어야 부리처럼 보인다. */
-  base?: [number, number];
-  /** 꼬리 후행 변을 몸통 쪽으로 판 깊이. 0이면 모서리를 비스듬히 깎은 모양이 된다. */
-  notch?: number;
-};
-
-const dist = (a: Pt, b: Pt) => Math.hypot(a[0] - b[0], a[1] - b[1]);
-
-/** 둥근 사각형 둘레를 촘촘한 폴리라인으로 샘플링(시계방향). */
-function perimeter(w: number, h: number, r0: number, step = 1.5): Pt[] {
-  const r = Math.max(0, Math.min(r0, w / 2, h / 2));
-  const pts: Pt[] = [];
-  const line = (a: Pt, b: Pt) => {
-    const n = Math.max(1, Math.round(dist(a, b) / step));
-    for (let i = 0; i < n; i++) {
-      const t = i / n; // 끝점은 다음 구간이 이어받는다(중복 방지)
-      pts.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]);
-    }
-  };
-  const arc = (cx: number, cy: number, a0: number, a1: number) => {
-    const n = Math.max(2, Math.round((Math.abs(a1 - a0) * r) / step));
-    for (let i = 0; i < n; i++) {
-      const t = a0 + ((a1 - a0) * i) / n;
-      pts.push([cx + r * Math.cos(t), cy + r * Math.sin(t)]);
-    }
-  };
-  const P = Math.PI;
-  line([r, 0], [w - r, 0]);
-  arc(w - r, r, -P / 2, 0);
-  line([w, r], [w, h - r]);
-  arc(w - r, h - r, 0, P / 2);
-  line([w - r, h], [r, h]);
-  arc(r, h - r, P / 2, P);
-  line([0, h - r], [0, r]);
-  arc(r, r, P, (3 * P) / 2);
-  return pts;
-}
-
-/** tip이 몸통 안이면 꼬리를 그리지 않는다(끝점을 안으로 끌면 꼬리가 사라지는 UX). */
-export function insideBody(w: number, h: number, r: number, p: Pt): boolean {
-  const [x, y] = p;
-  if (x < 0 || x > w || y < 0 || y > h) return false;
-  const cornerX = x < r || x > w - r;
-  const cornerY = y < r || y > h - r;
-  if (!cornerX || !cornerY) return true;
-  const cx = x < r ? r : w - r;
-  const cy = y < r ? r : h - r;
-  return dist([x, y], [cx, cy]) <= r;
-}
-
-export function bubblePathD(p: BubbleParams): string {
-  const { w, h, r } = p;
-  const pts = perimeter(w, h, r);
-  const tip = p.tip ?? null;
-  const d = (list: Pt[]) =>
-    list
-      .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`)
-      .join(" ") + " Z";
-
-  if (!tip || insideBody(w, h, r, tip)) return d(pts);
-
-  const n = pts.length;
-  const s: number[] = [0];
-  for (let i = 1; i < n; i++) s.push(s[i - 1] + dist(pts[i - 1], pts[i]));
-  const total = s[n - 1] + dist(pts[n - 1], pts[0]);
-
-  let anchor = 0;
-  let best = Infinity;
-  for (let i = 0; i < n; i++) {
-    const dd = dist(pts[i], tip);
-    if (dd < best) {
-      best = dd;
-      anchor = i;
-    }
-  }
-
-  /** 앵커에서 둘레를 따라 dist만큼 떨어진 점의 인덱스(래핑). s는 단조증가 → 이분탐색. */
-  const at = (delta: number): number => {
-    const target = ((((s[anchor] + delta) % total) + total) % total) as number;
-    let lo = 0;
-    let hi = n - 1;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (s[mid] < target) lo = mid + 1;
-      else hi = mid;
-    }
-    return lo % n;
-  };
-
-  const [before, after] = p.base ?? [34, 34];
-  const a = at(-Math.min(before, total / 4));
-  const b = at(Math.min(after, total / 4));
-
-  // b에서 시계방향으로 돌아 a까지가 몸통. a..b 구간을 꼬리가 대체한다.
-  const body: Pt[] = [];
-  for (let k = b; ; k = (k + 1) % n) {
-    body.push(pts[k]);
-    if (k === a) break;
-  }
-
-  const tail: Pt[] = [tip];
-  const notch = p.notch ?? 0;
-  if (notch > 0) {
-    // tip → b 변의 중간을 몸통 중심 쪽으로 당겨 오목하게 만든다.
-    const mx = (tip[0] + pts[b][0]) / 2;
-    const my = (tip[1] + pts[b][1]) / 2;
-    const vx = w / 2 - mx;
-    const vy = h / 2 - my;
-    const len = Math.hypot(vx, vy) || 1;
-    tail.push([mx + (vx / len) * notch, my + (vy / len) * notch]);
-  }
-  return d([...body, ...tail]);
-}
-
-export function bubbleSvgMarkup(p: BubbleParams): string {
-  const { w, h, pad } = p;
-  const st = p.stroke
-    ? ` stroke="${p.stroke}" stroke-width="${p.strokeWidth ?? 2}" stroke-linejoin="round"`
-    : "";
-  return (
-    `<svg viewBox="${-pad} ${-pad} ${w + 2 * pad} ${h + 2 * pad}" ` +
-    `width="${w + 2 * pad}" height="${h + 2 * pad}" xmlns="http://www.w3.org/2000/svg">` +
-    `<path d="${bubblePathD(p)}" fill="${p.fill}"${st}/></svg>`
-  );
-}
-
-/** 스톡 편집기의 svg 요소는 ``src``로 그린다 — 마크업을 data URL로 굽는다. */
-export function bubbleSvgDataUrl(p: BubbleParams): string {
-  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(bubbleSvgMarkup(p))))}`;
-}
-
-/** ``custom.bubble``을 안전하게 읽는다(형식이 어긋나면 null → 일반 svg로 취급). */
-export function readBubbleParams(custom: unknown): BubbleParams | null {
-  if (!custom || typeof custom !== "object") return null;
-  const b = (custom as Record<string, unknown>).bubble;
-  if (!b || typeof b !== "object") return null;
-  const o = b as Record<string, unknown>;
-  const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : null);
-  const w = num(o.w);
-  const h = num(o.h);
-  if (w === null || h === null || w <= 0 || h <= 0) return null;
-  const tip = Array.isArray(o.tip) && o.tip.length === 2 ? (o.tip.map(Number) as Pt) : null;
-  const base = Array.isArray(o.base) && o.base.length === 2 ? (o.base.map(Number) as [number, number]) : undefined;
-  return {
-    w,
-    h,
-    r: num(o.r) ?? 0,
-    pad: num(o.pad) ?? 0,
-    fill: typeof o.fill === "string" ? o.fill : "#fff",
-    stroke: typeof o.stroke === "string" ? o.stroke : null,
-    strokeWidth: num(o.strokeWidth) ?? 2,
-    tip: tip && tip.every(Number.isFinite) ? tip : null,
-    base,
-    notch: num(o.notch) ?? 0,
-  };
-}

package/lib/detail-page-canvas/clip-rect.ts

@@ -1,65 +0,0 @@
-/**
- * Pure helpers for clipping HTML-decomposed decoration to its owning card
- * rectangle. Kept free of React/Canvas/Konva imports so both the native Konva
- * preview and the Canvas SDK clip-aware shape component can reuse them, and so
- * they stay trivially unit-testable.
- */
-
-export type ClipRectShape = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  radius?: number;
-};
-
-/** A minimal Konva.Context — only the path ops the clip needs. */
-export type ClipContext = {
-  beginPath(): void;
-  moveTo(x: number, y: number): void;
-  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
-  closePath(): void;
-};
-
-/** Trace a rounded rectangle path used as the Konva clip region. */
-export function roundedRectPath(
-  ctx: ClipContext,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number,
-): void {
-  const r = Math.max(0, Math.min(radius, width / 2, height / 2));
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + width, y, x + width, y + height, r);
-  ctx.arcTo(x + width, y + height, x, y + height, r);
-  ctx.arcTo(x, y + height, x, y, r);
-  ctx.arcTo(x, y, x + width, y, r);
-  ctx.closePath();
-}
-
-/** Read a usable ``clipToRect`` off a Canvas element's ``custom`` payload. */
-export function readClipRect(element: unknown): ClipRectShape | null {
-  const custom =
-    element && typeof element === "object"
-      ? (element as { custom?: unknown }).custom
-      : null;
-  const clip =
-    custom && typeof custom === "object"
-      ? (custom as { clipToRect?: unknown }).clipToRect
-      : null;
-  if (!clip || typeof clip !== "object") return null;
-  const rect = clip as Record<string, unknown>;
-  const width = typeof rect.width === "number" ? rect.width : 0;
-  const height = typeof rect.height === "number" ? rect.height : 0;
-  if (!(width > 0) || !(height > 0)) return null;
-  return {
-    x: typeof rect.x === "number" ? rect.x : 0,
-    y: typeof rect.y === "number" ? rect.y : 0,
-    width,
-    height,
-    radius: typeof rect.radius === "number" ? rect.radius : 0,
-  };
-}

package/lib/detail-page-canvas/konva-fallback.ts

@@ -1,477 +0,0 @@
-export type CanvasFallbackElementKind = "text" | "image" | "rect" | "unknown";
-
-export type GradientStop = { offset: number; color: string };
-
-/**
- * A CSS gradient parsed into the values Konva needs. ``linear`` keeps the CSS
- * angle (0deg = upward, clockwise); ``radial`` keeps the focal point as a
- * 0..1 fraction of the element box.
- */
-export type ParsedGradient =
-  | { type: "linear"; angle: number; stops: GradientStop[] }
-  | { type: "radial"; cx: number; cy: number; stops: GradientStop[] };
-
-/** A CSS box-shadow parsed for Konva (spread is dropped — Konva has none). */
-export type ParsedShadow = {
-  color: string;
-  offsetX: number;
-  offsetY: number;
-  blur: number;
-};
-
-/** The rectangle a decorative element is clipped to (overflow:hidden parent). */
-export type ClipRect = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  radius: number;
-};
-
-export type CanvasFallbackElement = {
-  id: string;
-  kind: CanvasFallbackElementKind;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  text: string;
-  src: string;
-  fill: string;
-  stroke: string;
-  strokeWidth: number;
-  opacity: number;
-  rotation: number;
-  fontSize: number;
-  fontFamily: string;
-  fontWeight: string;
-  lineHeight: number;
-  align: "left" | "center" | "right";
-  verticalAlign: "top" | "middle" | "bottom";
-  /** Canvas text badge background (decomposer emits these in pixels). */
-  backgroundEnabled: boolean;
-  backgroundColor: string;
-  backgroundPadding: number;
-  backgroundCornerRadius: number;
-  /**
-   * A CSS gradient highlight behind the text (decomposer's
-   * ``custom.backgroundGradient``, e.g. a highlighter band drawn with
-   * ``linear-gradient(transparent 60%, <color> 60%)``). the stock editor's solid
-   * ``backgroundColor`` cannot express it, so it is carried separately and
-   * painted as a gradient-filled rect behind the glyphs.
-   */
-  backgroundGradient: ParsedGradient | null;
-  /**
-   * A user "marker" highlight (``custom.highlightColor``): painted as one band per
-   * wrapped line hugging that line's glyph width, not a single box. Owns the
-   * highlight instead of native ``backgroundEnabled`` so loose line-heights don't
-   * merge wrapped lines into a solid block.
-   */
-  highlightColor: string | null;
-  slot: string;
-  /** Native-renderable decoration the Canvas SDK ignores (carried in custom). */
-  cornerRadius: number;
-  gradient: ParsedGradient | null;
-  shadow: ParsedShadow | null;
-  clipToRect: ClipRect | null;
-};
-
-export type CanvasFallbackPage = {
-  id: string;
-  width: number;
-  height: number;
-  background: string;
-  elements: CanvasFallbackElement[];
-};
-
-type UnknownRecord = Record<string, unknown>;
-
-function asRecord(value: unknown): UnknownRecord {
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? (value as UnknownRecord)
-    : {};
-}
-
-function asArray(value: unknown): unknown[] {
-  return Array.isArray(value) ? value : [];
-}
-
-function finiteNumber(value: unknown, fallback: number): number {
-  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
-}
-
-function finiteString(value: unknown, fallback = ""): string {
-  return typeof value === "string" ? value : fallback;
-}
-
-function normalizeAlign(value: unknown): CanvasFallbackElement["align"] {
-  return value === "center" || value === "right" ? value : "left";
-}
-
-function normalizeVerticalAlign(
-  value: unknown,
-): CanvasFallbackElement["verticalAlign"] {
-  // The decomposer emits the stock editor's "center"; Konva's name for it is "middle".
-  if (value === "middle" || value === "center") return "middle";
-  if (value === "bottom") return "bottom";
-  return "top";
-}
-
-function normalizeKind(element: UnknownRecord): CanvasFallbackElementKind {
-  if (element.type === "text") return "text";
-  if (element.type === "image") return "image";
-  if (element.type === "figure" && element.subType === "rect") return "rect";
-  if (element.type === "svg" && finiteString(element.src)) return "image";
-  return "unknown";
-}
-
-/** Split on a separator that is not nested inside parentheses (e.g. rgb(…)). */
-function splitTopLevel(value: string, separator: string): string[] {
-  const parts: string[] = [];
-  let depth = 0;
-  let current = "";
-  for (const char of value) {
-    if (char === "(") depth += 1;
-    else if (char === ")") depth = Math.max(0, depth - 1);
-    if (char === separator && depth === 0) {
-      parts.push(current);
-      current = "";
-    } else {
-      current += char;
-    }
-  }
-  parts.push(current);
-  return parts.map((part) => part.trim()).filter(Boolean);
-}
-
-/** "rgb(255, 0, 0) 55%" -> { color, offset: 0.55 } (offset null when absent). */
-function parseColorStopToken(token: string): {
-  color: string;
-  offset: number | null;
-} {
-  const match = token.match(/\s(-?\d+(?:\.\d+)?)%\s*$/);
-  if (match && match.index !== undefined) {
-    return {
-      color: token.slice(0, match.index).trim(),
-      offset: parseFloat(match[1]) / 100,
-    };
-  }
-  return { color: token.trim(), offset: null };
-}
-
-/** Spread color stops evenly across 0..1 when CSS omits explicit positions. */
-function distributeStops(
-  raw: Array<{ color: string; offset: number | null }>,
-): GradientStop[] {
-  const usable = raw.filter((stop) => stop.color);
-  const count = usable.length;
-  return usable.map((stop, index) => ({
-    color: stop.color,
-    offset: stop.offset ?? (count <= 1 ? 0 : index / (count - 1)),
-  }));
-}
-
-/** Map a CSS linear-gradient direction (angle or keywords) to degrees. */
-function parseLinearAngle(direction: string): number {
-  const degMatch = direction.match(/(-?\d+(?:\.\d+)?)deg/);
-  if (degMatch) return parseFloat(degMatch[1]);
-  const dir = direction.toLowerCase();
-  const has = (keyword: string) => dir.includes(keyword);
-  if (has("top") && has("right")) return 45;
-  if (has("bottom") && has("right")) return 135;
-  if (has("bottom") && has("left")) return 225;
-  if (has("top") && has("left")) return 315;
-  if (has("right")) return 90;
-  if (has("bottom")) return 180;
-  if (has("left")) return 270;
-  if (has("top")) return 0;
-  return 180;
-}
-
-/**
- * Split a possibly-layered CSS gradient value into its individual
- * ``linear-gradient(...)``/``radial-gradient(...)`` functions. A compound value
- * like ``radial-gradient(…), linear-gradient(…)`` (a radial glow over a linear
- * base) must NOT be split on its top-level commas — those also separate colour
- * stops — so we walk balanced parentheses and take one whole function per layer.
- * Non-gradient layers (e.g. ``url(...)``) end the scan.
- */
-function splitGradientLayers(value: string): string[] {
-  const layers: string[] = [];
-  let i = 0;
-  while (i < value.length) {
-    while (i < value.length && (value[i] === "," || /\s/.test(value[i]))) i += 1;
-    const head = value.slice(i).match(/^(?:linear|radial)-gradient\(/i);
-    if (!head) break;
-    const open = i + head[0].length - 1; // index of the "("
-    let depth = 1;
-    let j = open + 1;
-    for (; j < value.length; j += 1) {
-      const char = value[j];
-      if (char === "(") depth += 1;
-      else if (char === ")") {
-        depth -= 1;
-        if (depth === 0) break;
-      }
-    }
-    layers.push(value.slice(i, j + 1));
-    i = j + 1;
-  }
-  return layers;
-}
-
-/** Parse a single ``linear-gradient``/``radial-gradient`` function for Konva. */
-function parseSingleGradient(trimmed: string): ParsedGradient | null {
-  const linear = trimmed.match(/^linear-gradient\((.*)\)$/);
-  if (linear) {
-    const args = splitTopLevel(linear[1], ",");
-    if (!args.length) return null;
-    let angle = 180;
-    let stopTokens = args;
-    if (/deg\s*$/.test(args[0]) || /^to\s/i.test(args[0])) {
-      angle = parseLinearAngle(args[0]);
-      stopTokens = args.slice(1);
-    }
-    const stops = distributeStops(stopTokens.map(parseColorStopToken));
-    if (!stops.length) return null;
-    return { type: "linear", angle, stops };
-  }
-
-  const radial = trimmed.match(/^radial-gradient\((.*)\)$/);
-  if (radial) {
-    const args = splitTopLevel(radial[1], ",");
-    if (!args.length) return null;
-    let cx = 0.5;
-    let cy = 0.5;
-    let stopTokens = args;
-    const first = args[0];
-    const isShape =
-      /(circle|ellipse|closest|farthest|\bat\b)/i.test(first) &&
-      !/^(rgb|rgba|hsl|hsla|#)/i.test(first);
-    if (isShape) {
-      const at = first.match(/at\s+(-?\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)%/i);
-      if (at) {
-        cx = parseFloat(at[1]) / 100;
-        cy = parseFloat(at[2]) / 100;
-      }
-      stopTokens = args.slice(1);
-    }
-    const stops = distributeStops(stopTokens.map(parseColorStopToken));
-    if (!stops.length) return null;
-    return { type: "radial", cx, cy, stops };
-  }
-
-  return null;
-}
-
-/**
- * Parse every gradient layer of a CSS value, foreground-first (CSS paints the
- * first-listed layer on top). Empty when the value is not a gradient.
- */
-export function parseCssGradientLayers(value: unknown): ParsedGradient[] {
-  if (typeof value !== "string") return [];
-  const trimmed = value.trim();
-  return splitGradientLayers(trimmed)
-    .map(parseSingleGradient)
-    .filter((gradient): gradient is ParsedGradient => gradient !== null);
-}
-
-/** Parse the first CSS gradient layer for Konva (see ``parseCssGradientLayers``). */
-export function parseCssGradient(value: unknown): ParsedGradient | null {
-  return parseCssGradientLayers(value)[0] ?? null;
-}
-
-/** Konva radial-gradient fill props for a parsed gradient in a w×h box. */
-export function radialGradientKonvaProps(
-  gradient: Extract<ParsedGradient, { type: "radial" }>,
-  width: number,
-  height: number,
-): {
-  fillRadialGradientStartPoint: { x: number; y: number };
-  fillRadialGradientStartRadius: number;
-  fillRadialGradientEndPoint: { x: number; y: number };
-  fillRadialGradientEndRadius: number;
-  fillRadialGradientColorStops: Array<number | string>;
-} {
-  const cx = gradient.cx * width;
-  const cy = gradient.cy * height;
-  const endRadius = Math.max(
-    Math.hypot(cx, cy),
-    Math.hypot(width - cx, cy),
-    Math.hypot(cx, height - cy),
-    Math.hypot(width - cx, height - cy),
-  );
-  return {
-    fillRadialGradientStartPoint: { x: cx, y: cy },
-    fillRadialGradientStartRadius: 0,
-    fillRadialGradientEndPoint: { x: cx, y: cy },
-    fillRadialGradientEndRadius: endRadius,
-    fillRadialGradientColorStops: gradient.stops.flatMap((stop) => [
-      stop.offset,
-      stop.color,
-    ]),
-  };
-}
-
-/** Konva linear-gradient fill props for a parsed gradient in a w×h box. */
-export function linearGradientKonvaProps(
-  gradient: Extract<ParsedGradient, { type: "linear" }>,
-  width: number,
-  height: number,
-): {
-  fillLinearGradientStartPoint: { x: number; y: number };
-  fillLinearGradientEndPoint: { x: number; y: number };
-  fillLinearGradientColorStops: Array<number | string>;
-} {
-  // CSS angle: 0deg points up, increasing clockwise. Project it across the box.
-  const radians = (gradient.angle * Math.PI) / 180;
-  const dx = Math.sin(radians);
-  const dy = -Math.cos(radians);
-  const length = Math.abs(width * dx) + Math.abs(height * dy);
-  const cx = width / 2;
-  const cy = height / 2;
-  return {
-    fillLinearGradientStartPoint: {
-      x: cx - (dx * length) / 2,
-      y: cy - (dy * length) / 2,
-    },
-    fillLinearGradientEndPoint: {
-      x: cx + (dx * length) / 2,
-      y: cy + (dy * length) / 2,
-    },
-    fillLinearGradientColorStops: gradient.stops.flatMap((stop) => [
-      stop.offset,
-      stop.color,
-    ]),
-  };
-}
-
-/** Parse a CSS ``box-shadow`` (color may lead or trail) for Konva. */
-export function parseCssShadow(value: unknown): ParsedShadow | null {
-  if (typeof value !== "string") return null;
-  const trimmed = value.trim();
-  if (!trimmed || trimmed === "none") return null;
-  const colorMatch = trimmed.match(
-    /(rgba?\([^)]*\)|hsla?\([^)]*\)|#[0-9a-fA-F]{3,8})/,
-  );
-  const color = colorMatch ? colorMatch[0] : "#000000";
-  const rest = colorMatch ? trimmed.replace(colorMatch[0], " ") : trimmed;
-  const lengths = (rest.match(/-?\d+(?:\.\d+)?px/g) ?? []).map((token) =>
-    parseFloat(token),
-  );
-  if (!lengths.length) return null;
-  const [offsetX = 0, offsetY = 0, blur = 0] = lengths;
-  return { color, offsetX, offsetY, blur };
-}
-
-/** Read the ``custom.clipToRect`` payload into a usable clip rectangle. */
-function parseClipRect(value: unknown): ClipRect | null {
-  const rect = asRecord(value);
-  if (!Object.keys(rect).length) return null;
-  const width = finiteNumber(rect.width, 0);
-  const height = finiteNumber(rect.height, 0);
-  if (width <= 0 || height <= 0) return null;
-  return {
-    x: finiteNumber(rect.x, 0),
-    y: finiteNumber(rect.y, 0),
-    width,
-    height,
-    radius: Math.max(0, finiteNumber(rect.radius, 0)),
-  };
-}
-
-function flattenElements(elements: unknown[]): UnknownRecord[] {
-  const flattened: UnknownRecord[] = [];
-  for (const candidate of elements) {
-    const element = asRecord(candidate);
-    if (!Object.keys(element).length) continue;
-    flattened.push(element);
-    flattened.push(...flattenElements(asArray(element.children)));
-  }
-  return flattened;
-}
-
-export function normalizeCanvasJsonForKonva(json: unknown): CanvasFallbackPage[] {
-  const root = asRecord(json);
-  const rootWidth = finiteNumber(root.width, 750);
-  const rootHeight = finiteNumber(root.height, 900);
-  const rootBackground = finiteString(
-    root.background ?? root.backgroundColor,
-    "#ffffff",
-  );
-  const pages = asArray(root.pages).map((candidate, pageIndex) => {
-    const page = asRecord(candidate);
-    const width = finiteNumber(page.width, rootWidth);
-    const height = finiteNumber(page.height, rootHeight);
-    const background = finiteString(
-      page.background ?? page.backgroundColor,
-      rootBackground,
-    );
-    const elements = flattenElements(asArray(page.children)).map(
-      (element, elementIndex): CanvasFallbackElement => {
-        const custom = asRecord(element.custom);
-        const widthValue = Math.max(1, finiteNumber(element.width, 1));
-        const heightValue = Math.max(1, finiteNumber(element.height, 1));
-        return {
-          id: finiteString(element.id, `page-${pageIndex + 1}-element-${elementIndex + 1}`),
-          kind: normalizeKind(element),
-          x: finiteNumber(element.x, 0),
-          y: finiteNumber(element.y, 0),
-          width: widthValue,
-          height: heightValue,
-          text: finiteString(element.text),
-          src: finiteString(element.src),
-          fill: finiteString(
-            element.fill ?? element.backgroundColor,
-            element.type === "text" ? "#111111" : "#f5f5f5",
-          ),
-          stroke: finiteString(element.stroke, "#d4d4d4"),
-          strokeWidth: finiteNumber(element.strokeWidth, 0),
-          opacity: Math.max(0, Math.min(1, finiteNumber(element.opacity, 1))),
-          rotation: finiteNumber(element.rotation, 0),
-          fontSize: Math.max(6, finiteNumber(element.fontSize, 24)),
-          fontFamily: finiteString(element.fontFamily, "Pretendard"),
-          fontWeight: String(element.fontWeight ?? element.fontStyle ?? "normal"),
-          lineHeight: Math.max(0.5, finiteNumber(element.lineHeight, 1.2)),
-          align: normalizeAlign(element.align),
-          verticalAlign: normalizeVerticalAlign(element.verticalAlign),
-          backgroundEnabled: element.backgroundEnabled === true,
-          backgroundColor: finiteString(element.backgroundColor, "#000000"),
-          backgroundPadding: Math.max(0, finiteNumber(element.backgroundPadding, 0)),
-          backgroundCornerRadius: Math.max(
-            0,
-            finiteNumber(element.backgroundCornerRadius, 0),
-          ),
-          backgroundGradient: parseCssGradient(custom.backgroundGradient),
-          highlightColor:
-            typeof custom.highlightColor === "string" && custom.highlightColor
-              ? custom.highlightColor
-              : null,
-          slot: finiteString(custom.leviosaSlot),
-          cornerRadius: Math.max(0, finiteNumber(element.cornerRadius, 0)),
-          gradient: parseCssGradient(custom.gradient),
-          shadow: parseCssShadow(custom.shadow),
-          clipToRect: parseClipRect(custom.clipToRect),
-        };
-      },
-    );
-    return {
-      id: finiteString(page.id, `page-${pageIndex + 1}`),
-      width,
-      height,
-      background,
-      elements,
-    };
-  });
-
-  if (pages.length) return pages;
-  return [
-    {
-      id: "page-1",
-      width: rootWidth,
-      height: rootHeight,
-      background: rootBackground,
-      elements: [],
-    },
-  ];
-}

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

@@ -1,127 +0,0 @@
-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 }];
-  });
-}