@leviosa-ai/detail-page-editor 0.17.2 → 0.18.0

package/components/detail-page/detail-page-layers-panel.tsx

@@ -342,6 +342,18 @@ export function matchLayers<
   );
 }
 
+/**
+ * ⇧클릭의 기준점 — 기억해 둔 줄이 아직 선택에 있으면(또는 아무것도 안 골랐으면) 그것,
+ * 아니면 지금 선택의 마지막 것.
+ */
+export function shiftAnchor(
+  anchorId: string | null,
+  selected: readonly string[],
+): string | null {
+  if (anchorId && (!selected.length || selected.includes(anchorId))) return anchorId;
+  return selected[selected.length - 1] ?? null;
+}
+
 /** 누른 줄 하나를 선택에서 넣거나 뺀다(⌘/Ctrl 클릭). */
 export function toggleId(selected: readonly string[], id: string): string[] {
   return selected.includes(id)
@@ -636,8 +648,13 @@ export const DetailPageLayersPanel = observer(function DetailPageLayersPanel({
    */
   const onSelect = (id: string, mods: { shift: boolean; meta: boolean }) => {
     if (mods.shift) {
-      s.selectElements(rangeIds(rows, anchorId, id));
-      // 기준점은 그대로 둔다 — 범위를 잡았다 놨다 하며 늘릴 수 있어야 한다.
+      // 기준점은 목록에서 마지막으로 누른 줄인데, 그사이 캔버스에서 다른 걸 골랐으면
+      // 낡은 값이다(없거나 선택 밖). 그때 그대로 쓰면 누른 줄 하나만 잡혀 ⇧클릭이
+      // «가끔 안 되는» 것처럼 보인다 — 지금 선택의 마지막 것을 기준점으로 삼는다.
+      const anchor = shiftAnchor(anchorId, selectedIds) ?? id;
+      s.selectElements(rangeIds(rows, anchor, id));
+      // 기준점은 옮기지 않는다 — 범위를 잡았다 놨다 하며 늘릴 수 있어야 한다.
+      setAnchorId(anchor);
       return;
     }
     if (mods.meta) {

package/components/detail-page/detail-page-properties-panel.tsx

@@ -72,6 +72,9 @@ import {
   extractSvgColors,
 } from "../../lib/detail-page/svg-colors";
 import { readColorReplace } from "@leviosa-ai/canvas/render/svg-source";
+import { elementRect, type Rect, type RectSource } from "@leviosa-ai/canvas/edit/rect";
+import { groupResizePatches } from "@leviosa-ai/canvas/render/interaction";
+import type { CanvasElement } from "@leviosa-ai/canvas/store";
 import { selectedElementsDeep } from "./detail-page-selection";
 import { useEditorAi } from "./editor-ai-context";
 import { parseAuthoringImageSrc } from "../../lib/detail-page/authoring-image-src";
@@ -97,8 +100,6 @@ import { setZ as setElementZ, zOrderOf } from "../../lib/detail-page/z-order";
 import {
   canDistribute,
   distributeCoords,
-  toItems,
-  type DistributeElement,
 } from "../../lib/detail-page/distribute";
 import { useDetailPageHost } from "./detail-page-host-context";
 import type {
@@ -236,8 +237,9 @@ export function groupFrame(
   let lo = Infinity;
   let hi = -Infinity;
   for (const sib of siblings) {
-    const start = num(axis === "x" ? sib.x : sib.y);
-    const size = num(axis === "x" ? sib.width : sib.height);
+    const rect = rectOf(sib);
+    const start = axis === "x" ? rect.x : rect.y;
+    const size = axis === "x" ? rect.width : rect.height;
     lo = Math.min(lo, start);
     hi = Math.max(hi, start + size);
   }
@@ -245,6 +247,20 @@ export function groupFrame(
   return { start: lo, size: hi - lo };
 }
 
+/**
+ * 요소가 **보이는** 네모(부모 좌표). 그룹은 자기 x/y·폭·높이를 안 믿으므로(자식이 좌표를
+ * 들고, 그룹 폭·높이는 0일 수 있다) x/width를 그대로 읽으면 정렬이 그룹을 날려 보낸다.
+ * 캔버스가 정렬·스냅에 쓰는 `elementRect`로 잰다.
+ */
+function rectOf(el: unknown): Rect {
+  return elementRect(el as RectSource);
+}
+
+/** 보이는 네모의 축 시작이 `coord`에 오게 하는 x(또는 y) 값. */
+function placeAt(el: ElementLike, axis: AlignAxis, coord: number): number {
+  return num(el[axis]) + coord - rectOf(el)[axis];
+}
+
 /** Where a box of `size` lands when aligned inside `frame`. */
 export function alignedCoord(
   frame: AlignFrame,
@@ -287,8 +303,9 @@ function alignInFrame(
     for (const el of els) {
       const frame = frameOf(store, el, axis);
       if (!frame) continue;
-      const size = num(axis === "x" ? el.width : el.height);
-      const coord = Math.round(alignedCoord(frame, size, where));
+      const rect = rectOf(el);
+      const size = axis === "x" ? rect.width : rect.height;
+      const coord = Math.round(placeAt(el, axis, alignedCoord(frame, size, where)));
       el.set(axis === "x" ? { x: coord } : { y: coord });
     }
   });
@@ -307,9 +324,10 @@ function currentAlign(
   for (const el of els) {
     const frame = frameOf(store, el, axis);
     if (!frame) return null;
-    const size = num(axis === "x" ? el.width : el.height);
+    const rect = rectOf(el);
+    const size = axis === "x" ? rect.width : rect.height;
     if (frame.size - size < 1) return null; // 상자를 꽉 채움: 정렬 구분 무의미
-    const coord = num(axis === "x" ? el.x : el.y);
+    const coord = rect[axis];
     let where: AlignWhere | null = null;
     for (const w of ["start", "center", "end"] as const) {
       if (Math.abs(alignedCoord(frame, size, w) - coord) <= 1) {
@@ -326,14 +344,19 @@ function currentAlign(
 
 // 선택 요소끼리 간격을 고르게. 양 끝은 그대로 두고 사이 여백만 나눈다(distribute.ts).
 function spreadEvenly(els: ElementLike[], axis: "x" | "y") {
-  const items = toItems(els as DistributeElement[], axis);
-  const coords = items && distributeCoords(items);
+  // 보이는 네모로 잰다 — 그룹이 섞여 있어도 같은 자로 벌린다.
+  const items = els.map((el) => {
+    const rect = rectOf(el);
+    return { id: el.id, start: rect[axis], size: axis === "x" ? rect.width : rect.height };
+  });
+  const coords = distributeCoords(items);
   if (!coords) return;
   transact(historyOf(els[0]), () => {
     for (const el of els) {
       const coord = coords.get(el.id);
       if (coord == null) continue;
-      el.set(axis === "x" ? { x: coord } : { y: coord });
+      const next = Math.round(placeAt(el, axis, coord));
+      el.set(axis === "x" ? { x: next } : { y: next });
     }
   });
 }
@@ -741,13 +764,21 @@ const SizeSection = observer(function SizeSection({ els }: { els: ElementLike[]
   const { t } = useTranslation("branding");
   const el = els[0];
   if (!el) return null;
+  // 그룹은 자기 x/y·폭·높이를 안 믿는다 — 보이는 네모를 보여 주고, 고치면 그 네모가
+  // 움직이거나 커지게 한다(자손까지 같이). 잎은 제 값 그대로.
+  const group = el.type === "group" && Array.isArray(el.children);
+  const rect = group ? rectOf(el) : null;
   const field = (label: string, key: "width" | "height" | "x" | "y") => (
     <NumberField
       label={label}
-      value={num(el[key])}
+      value={rect ? Math.round(rect[key] * 100) / 100 : num(el[key])}
       min={key === "width" || key === "height" ? 1 : undefined}
       history={historyOf(el)}
-      onChange={(v) => el.set({ [key]: Math.round(v) })}
+      onChange={(v) => {
+        if (!rect) el.set({ [key]: Math.round(v) });
+        else if (key === "x" || key === "y") el.set({ [key]: Math.round(placeAt(el, key, v)) });
+        else resizeGroup(el, key, v);
+      }}
     />
   );
   return (
@@ -763,6 +794,29 @@ const SizeSection = observer(function SizeSection({ els }: { els: ElementLike[]
 });
 SizeSection.displayName = "SizeSection";
 
+/** 그룹의 보이는 폭(또는 높이)을 `size`로 — 자손을 같이 늘리고 왼쪽 위는 제자리에 둔다. */
+function resizeGroup(el: ElementLike, key: "width" | "height", size: number) {
+  const before = rectOf(el);
+  const scale = size / (key === "width" ? before.width : before.height);
+  if (!Number.isFinite(scale) || scale <= 0) return;
+  const group = el as unknown as CanvasElement;
+  transact(historyOf(el), () => {
+    const patches = groupResizePatches(group, {
+      x: num(el.x),
+      y: num(el.y),
+      width: num(el.width),
+      height: num(el.height),
+      rotation: num(el.rotation),
+      scaleX: key === "width" ? scale : 1,
+      scaleY: key === "height" ? scale : 1,
+    });
+    for (const { id, patch } of patches) group.store.getElementById(id)?.set(patch);
+    // 자손 좌표는 그룹 원점 기준으로 곱해지므로 보이는 왼쪽 위가 밀린다 — 되돌린다.
+    const after = rectOf(el);
+    el.set({ x: num(el.x) + before.x - after.x, y: num(el.y) + before.y - after.y });
+  });
+}
+
 function DeleteRow({ store, els }: { store: StoreLike; els: ElementLike[] }) {
   const { t } = useTranslation("branding");
   // A single selected group can be split back into its elements. Mirrors the

package/components/detail-page/image-crop-overlay.tsx

@@ -57,6 +57,8 @@ export type CropElement = {
   width?: unknown;
   height?: unknown;
   rotation?: unknown;
+  flipX?: unknown;
+  flipY?: unknown;
   set: (patch: Record<string, unknown>) => void;
 };
 
@@ -64,8 +66,8 @@ const ACCENT = "rgb(0, 161, 255)";
 const HANDLE = 10;
 /** 자르기 밖을 덮는 그림자의 짙기. 잘려 나가는 부분이 보이되 상자 안이 또렷해야 한다. */
 const OUTSIDE_OPACITY = 0.5;
-/** 조작 줄을 작업 영역 안에 남기는 여백/높이. */
-const BAR_MARGIN = 180;
+/** 조작 줄을 작업 영역 안에 남기는 여백/높이. 여백은 줄 너비의 반에 이만큼을 더한다. */
+const BAR_MARGIN = 8;
 const BAR_HEIGHT = 56;
 
 const CORNERS: CropHandle[] = ["nw", "ne", "sw", "se"];
@@ -123,6 +125,8 @@ export function ImageCropOverlay({
   const [presetId, setPresetId] = useState<CropPresetId>("custom");
   const [menuOpen, setMenuOpen] = useState(false);
   const drag = useRef<DragState | null>(null);
+  // 조작 줄의 실제 너비 — 언어에 따라 달라서 재야 가장자리에서 안 잘린다.
+  const barRef = useRef<HTMLDivElement | null>(null);
 
   // 그림은 캔버스가 이미 받아 둔 것을 그대로 꺼내 쓴다 — 다시 받으면 같은 그림이 두 벌
   // 디코드되고, 교차 출처 설정이 달라 알파 판정이 어긋날 수 있다.
@@ -236,6 +240,20 @@ export function ImageCropOverlay({
     setRect(applyAspect(rect, start.image, resolveAspect(next, natural)));
   };
 
+  const [barWidth, setBarWidth] = useState(0);
+  const barShown = Boolean(start && rect && box);
+  useLayoutEffect(() => {
+    const node = barRef.current;
+    if (!node) return;
+    const measure = () => setBarWidth(node.offsetWidth);
+    measure();
+    // 글꼴·스타일이 늦게 붙으면 너비가 바뀐다.
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [barShown]);
+
   if (!start || !rect || !box) return null;
 
   const scale = box.scale || 1;
@@ -243,6 +261,10 @@ export function ImageCropOverlay({
   const cos = Math.cos(radians);
   const sin = Math.sin(radians);
   const zoom = rectZoom(rect, start.image, aspect);
+  // 뒤집힌 사진은 화면에서도 뒤집혀 있다 — 오버레이도 상자 가운데를 축으로 같이 뒤집어야
+  // 보이는 자리와 자르는 자리가 맞는다. 끈 양도 그 축으로 되돌린다.
+  const flipX = el.flipX === true;
+  const flipY = el.flipY === true;
 
   const begin = (event: ReactPointerEvent<HTMLElement>, handle: CropHandle) => {
     event.preventDefault();
@@ -264,8 +286,8 @@ export function ImageCropOverlay({
     const screenX = event.clientX - state.startX;
     const screenY = event.clientY - state.startY;
     // 화면에서 끈 양을 요소 좌표로 되돌린다(배율을 나누고 회전을 되감는다).
-    const dx = (screenX * cos + screenY * sin) / scale;
-    const dy = (-screenX * sin + screenY * cos) / scale;
+    const dx = ((screenX * cos + screenY * sin) / scale) * (flipX ? -1 : 1);
+    const dy = ((-screenX * sin + screenY * cos) / scale) * (flipY ? -1 : 1);
     setRect(dragCrop(state.rect, state.handle, dx, dy, start.image, { aspect }));
   };
 
@@ -294,10 +316,12 @@ export function ImageCropOverlay({
   const host = containerRef.current;
   const hostWidth = host?.clientWidth ?? 0;
   const hostHeight = host?.clientHeight ?? 0;
-  const barCenter = box.left + view.left + view.width / 2;
+  const barCenter =
+    box.left + (flipX ? box.width - view.left - view.width : view.left) + view.width / 2;
+  const barEdge = barWidth / 2 + BAR_MARGIN;
   const barPosition = {
     left: hostWidth
-      ? Math.max(BAR_MARGIN, Math.min(barCenter, hostWidth - BAR_MARGIN))
+      ? Math.max(barEdge, Math.min(barCenter, hostWidth - barEdge))
       : barCenter,
     top: hostHeight
       ? Math.min(box.top + view.top + view.height + 12, hostHeight - BAR_HEIGHT)
@@ -327,7 +351,11 @@ export function ImageCropOverlay({
           top: box.top,
           width: box.width,
           height: box.height,
-          transform: `rotate(${box.rotation}deg)`,
+          transform: [
+            `rotate(${box.rotation}deg)`,
+            flipX ? `translateX(${box.width}px) scaleX(-1)` : "",
+            flipY ? `translateY(${box.height}px) scaleY(-1)` : "",
+          ].join(" "),
           transformOrigin: "0 0",
         }}
       >
@@ -416,7 +444,13 @@ export function ImageCropOverlay({
                 background: "#fff",
                 border: `1px solid ${ACCENT}`,
                 boxSizing: "border-box",
-                cursor: CURSOR[handle],
+                // 한 번 뒤집힌 상자에서는 대각선 손잡이가 반대 대각선에 놓인다.
+                cursor:
+                  flipX !== flipY && (handle === "nw" || handle === "se")
+                    ? "nesw-resize"
+                    : flipX !== flipY && (handle === "ne" || handle === "sw")
+                      ? "nwse-resize"
+                      : CURSOR[handle],
                 touchAction: "none",
               }}
             />
@@ -426,6 +460,7 @@ export function ImageCropOverlay({
 
       {/* 조작 줄은 회전과 무관하게 세워 둔다 — 기울어진 버튼은 누르기 어렵다. */}
       <div
+        ref={barRef}
         data-dp-crop-bar=""
         onPointerDown={(event) => event.stopPropagation()}
         style={{ position: "absolute", ...barPosition, transform: "translateX(-50%)" }}

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

@@ -22,7 +22,7 @@ import {
 import { showTextOps } from "./pdf/text-ops";
 import { fmt, PdfBuilder } from "./pdf/writer";
 import { decodeSvgDataUri } from "./svg";
-import { elementMatrix, IDENTITY } from "./frame";
+import { elementMatrix, IDENTITY, isIdentity, leafMatrix } from "./frame";
 import {
   highlightBands,
   isItalic,
@@ -106,29 +106,13 @@ function shadingSpec(
   };
 }
 
-/** Rotate around the element's own origin, the way Konva does. */
+/** Rotate (and flip) around the element's own origin, the way Konva does. */
 function rotationOps(el: ExportElement): { open: string[]; close: string[] } {
-  if (el.type === "group") {
-    // 그룹은 옮기고 돌린 자리가 자식들의 원점이다(자식 좌표는 그룹 원점 기준).
-    const m = elementMatrix(el, IDENTITY);
-    if (m.every((v, i) => v === IDENTITY[i])) return { open: [], close: [] };
-    return { open: ["q", `${m.map(fmt).join(" ")} cm`], close: ["Q"] };
-  }
-  const degrees = num(el.rotation);
-  if (!degrees) return { open: [], close: [] };
-  const rad = (degrees * Math.PI) / 180;
-  const cos = Math.cos(rad);
-  const sin = Math.sin(rad);
-  const x = num(el.x);
-  const y = num(el.y);
-  return {
-    open: [
-      "q",
-      `${fmt(cos)} ${fmt(sin)} ${fmt(-sin)} ${fmt(cos)} ` +
-        `${fmt(x - x * cos + y * sin)} ${fmt(y - x * sin - y * cos)} cm`,
-    ],
-    close: ["Q"],
-  };
+  // 그룹은 옮기고 돌린 자리가 자식들의 원점이다(자식 좌표는 그룹 원점 기준). 잎은 제 x/y에
+  // 그려지므로 그 자리를 축으로 돌리고 뒤집는다.
+  const m = el.type === "group" ? elementMatrix(el, IDENTITY) : leafMatrix(el);
+  if (isIdentity(m)) return { open: [], close: [] };
+  return { open: ["q", `${m.map(fmt).join(" ")} cm`], close: ["Q"] };
 }
 
 function figureOps(el: ExportElement, env: AiEnv): string[] {

package/lib/detail-page-canvas/export/document-model.ts

@@ -20,6 +20,9 @@ export type ExportElement = {
   width?: number;
   height?: number;
   rotation?: number;
+  /** 상자 가운데를 축으로 좌우·상하 뒤집기(`@leviosa-ai/canvas/edit/rect`의 `flipArea`). */
+  flipX?: boolean;
+  flipY?: boolean;
   opacity?: number;
   visible?: boolean;
   fill?: string;

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

@@ -10,6 +10,7 @@
  *    언젠가 둘이 갈라진다.
  */
 
+import { flipArea } from "@leviosa-ai/canvas/edit/rect";
 import {
   hasDocumentCrop,
   imageFrame,
@@ -54,15 +55,40 @@ export function isTranslation(m: Matrix): boolean {
 }
 
 /**
- * 요소의 로컬 좌표(상자 왼쪽 위가 0,0) → 부모 좌표. `parent · T(x, y) · R(rotation)`.
+ * 요소의 로컬 좌표(상자 왼쪽 위가 0,0) → 부모 좌표. `parent · T(x, y) · R(rotation) · F`.
  * 그룹이면 이 행렬이 자식들의 부모 행렬이 된다.
+ *
+ * `F`는 `flipX`/`flipY` — 화면(element-view `flipped`)처럼 `flipArea` 가운데를 축으로
+ * 안쪽만 뒤집는다.
  */
 export function elementMatrix(el: ExportElement, parent: Matrix = IDENTITY): Matrix {
   const rad = (num(el.rotation) * Math.PI) / 180;
   // 0°·90° 같은 각에서 cos/sin 꼬리(6e-17)가 붙어 isTranslation이 틀리지 않게 다듬는다.
   const cos = Math.abs(Math.cos(rad)) < 1e-12 ? 0 : Math.cos(rad);
   const sin = Math.abs(Math.sin(rad)) < 1e-12 ? 0 : Math.sin(rad);
-  return multiply(parent, [cos, sin, -sin, cos, num(el.x), num(el.y)]);
+  const placed = multiply(parent, [cos, sin, -sin, cos, num(el.x), num(el.y)]);
+  if (el.flipX !== true && el.flipY !== true) return placed;
+  const area = flipArea(el);
+  return multiply(placed, [
+    el.flipX === true ? -1 : 1,
+    0,
+    0,
+    el.flipY === true ? -1 : 1,
+    el.flipX === true ? area.x * 2 + area.width : 0,
+    el.flipY === true ? area.y * 2 + area.height : 0,
+  ]);
+}
+
+/**
+ * 잎 요소를 **제 x/y 그대로** 그릴 때 씌울 행렬 — `elementMatrix · T(−x, −y)`. 회전·뒤집기가
+ * 없으면 단위 행렬이다(그리기 함수들이 부모 좌표 x/y에 그리므로).
+ */
+export function leafMatrix(el: ExportElement): Matrix {
+  return multiply(elementMatrix(el), [1, 0, 0, 1, -num(el.x), -num(el.y)]);
+}
+
+export function isIdentity(m: Matrix): boolean {
+  return m.every((v, i) => Math.abs(v - IDENTITY[i]) < 1e-9);
 }
 
 /**

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

@@ -12,7 +12,7 @@ import {
   type ExportElement,
   type ExportPage,
 } from "./document-model";
-import { documentCropFrame, type Size } from "./frame";
+import { documentCropFrame, elementMatrix, leafMatrix, type Matrix, type Size } from "./frame";
 import {
   highlightBands,
   isItalic,
@@ -161,12 +161,14 @@ function elementMarkup(el: ExportElement, env: SvgEnv): string | null {
     const gx = num(el.x);
     const gy = num(el.y);
     const r = num(el.rotation);
-    const transform = [
-      gx || gy ? `translate(${fmt(gx)} ${fmt(gy)})` : "",
-      r ? `rotate(${fmt(r)})` : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
+    const transform = flipped(el)
+      ? matrixAttr(elementMatrix(el))
+      : [
+          gx || gy ? `translate(${fmt(gx)} ${fmt(gy)})` : "",
+          r ? `rotate(${fmt(r)})` : "",
+        ]
+          .filter(Boolean)
+          .join(" ");
     return `<g ${attrs({ id: el.name || el.id, opacity: opacityAttr(el), transform })}>\n${inner}\n</g>`;
   }
   if (el.type === "text") return textMarkup(el, env);
@@ -174,15 +176,29 @@ function elementMarkup(el: ExportElement, env: SvgEnv): string | null {
   if (el.type === "svg") {
     const inline = inlineSvgMarkup(el);
     // 중첩 <svg>의 transform은 SVG 2에만 있다 — 돌아간 아이콘은 <g>로 감싸 돌린다.
-    if (inline) return num(el.rotation) ? `<g ${attrs(rotateAttr(el))}>${inline}</g>` : inline;
+    if (inline) {
+      return num(el.rotation) || flipped(el) ? `<g ${attrs(rotateAttr(el))}>${inline}</g>` : inline;
+    }
     return imageMarkup(el, env);
   }
   if (el.type === "image") return imageMarkup(el, env);
   return null;
 }
 
-/** 요소 회전 — 화면(Konva)처럼 요소의 왼쪽 위(x, y)를 축으로 돈다. */
+function flipped(el: ExportElement): boolean {
+  return el.flipX === true || el.flipY === true;
+}
+
+function matrixAttr(m: Matrix): string {
+  return `matrix(${m.map(fmt).join(" ")})`;
+}
+
+/**
+ * 요소 회전 — 화면(Konva)처럼 요소의 왼쪽 위(x, y)를 축으로 돈다. 뒤집힌 요소는 회전과
+ * 뒤집기를 합친 행렬로 쓴다(`frame.ts`의 `leafMatrix`).
+ */
 function rotateAttr(el: ExportElement): { transform?: string } {
+  if (flipped(el)) return { transform: matrixAttr(leafMatrix(el)) };
   const r = num(el.rotation);
   return r ? { transform: `rotate(${fmt(r)} ${fmt(num(el.x))} ${fmt(num(el.y))})` } : {};
 }
@@ -351,7 +367,7 @@ function sameLineRun(a: ExportElement, b: ExportElement, env: SvgEnv): boolean {
   // 흐르고, 위로 띄운 첨자(sup)는 선이 다르니 제 자리에 남는다.
   if (Math.abs(baselineOf(a, env) - baselineOf(b, env)) > 0.3 * fs) return false;
   if ((a.fontFamily || "") !== (b.fontFamily || "")) return false;
-  if (num(a.rotation) || num(b.rotation)) return false;
+  if (num(a.rotation) || num(b.rotation) || flipped(a) || flipped(b)) return false;
   // 형광펜 띠는 런마다 따로 그려야 한다 — 한 줄로 합치면 띠가 사라진다.
   if (a.custom?.highlightColor || b.custom?.highlightColor) return false;
   if (num(a.opacity, 1) !== num(b.opacity, 1)) return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.17.2",
+  "version": "0.18.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, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -68,7 +68,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "0.9.1",
+    "@leviosa-ai/canvas": "0.10.0",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",