@leviosa-ai/detail-page-editor 0.3.1 → 0.5.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/components/detail-page/detail-page-my-images-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, type ChangeEvent } from "react";
+import { useMemo, useRef, useState, type ChangeEvent } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ExternalLink, ImageOff, Loader2, Trash2, Upload } from "lucide-react";
 import Link from "next/link";
@@ -13,6 +13,14 @@ import type {
   BrandAssetKind,
 } from "./detail-page-host-context";
 import { insertPersonalImage } from "../../lib/detail-page/insert-image";
+import {
+  BRAND_IMAGE_CATEGORIES,
+  BRAND_IMAGE_CATEGORY_LABEL_KEY,
+  countBrandImages,
+  groupBrandImages,
+  takeBrandImages,
+  type BrandImageCategory,
+} from "../../lib/detail-page/brand-image-category";
 import { useProgressiveReveal } from "../../lib/detail-page/use-progressive-reveal";
 
 const UPLOAD_ACCEPT = "image/png,image/jpeg,image/webp,image/svg+xml";
@@ -102,6 +110,152 @@ function SourceTab({
   );
 }
 
+/**
+ * 갈래 토글. **비어 있는 갈래는 내지 않는다** — 눌러 봐야 빈 화면인 칸은 고르는
+ * 일을 돕는 게 아니라 늘린다. 숫자는 거르기 전 전체라 갈아타도 흔들리지 않는다.
+ */
+function CategoryFilter({
+  counts,
+  total,
+  value,
+  onChange,
+}: {
+  counts: Record<BrandImageCategory, number>;
+  total: number;
+  value: BrandImageCategory | "all";
+  onChange: (next: BrandImageCategory | "all") => void;
+}) {
+  const { t } = useTranslation("branding");
+  const available = BRAND_IMAGE_CATEGORIES.filter(
+    (category) => counts[category] > 0,
+  );
+  // 갈래가 하나뿐이면 토글은 전체와 같은 화면을 두 번 보여줄 뿐이다.
+  if (available.length < 2) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label={t("detailPage.brandAssets.filterLabel")}
+      className="mb-2 flex flex-wrap gap-1"
+    >
+      <FilterChip
+        label={t("detailPage.brandAssets.filterAll")}
+        count={total}
+        active={value === "all"}
+        onClick={() => onChange("all")}
+      />
+      {available.map((category) => (
+        <FilterChip
+          key={category}
+          label={t(BRAND_IMAGE_CATEGORY_LABEL_KEY[category])}
+          count={counts[category]}
+          active={value === category}
+          onClick={() => onChange(category)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function FilterChip({
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={
+        "rounded-dpe-lg border px-2 py-0.5 text-[11px] font-dpe-medium transition " +
+        (active
+          ? "border-dpe-ink-800 bg-dpe-ink-800 text-dpe-on-accent"
+          : "border-dpe-ink-200 text-dpe-ink-500 hover:border-dpe-ink-400 hover:text-dpe-ink-700")
+      }
+    >
+      {label}
+      <span className="ml-1 font-dpe-normal opacity-60">{count}</span>
+    </button>
+  );
+}
+
+/**
+ * 썸네일 한 칸.
+ *
+ * 높이를 ``img`` 가 아니라 **칸이** 잡는다. 사진은 뒤늦게(``loading="lazy"``) 도착
+ * 하는데 높이가 사진에 매달려 있으면 도착 전까지 칸이 납작하게 눌린다. 눌린 칸은
+ * 보기 나쁜 데서 끝나지 않는다 — 열두 장이 한 줌으로 접히면 바닥의 감시자가 계속
+ * 화면에 남아 다음 열두 장을 부르고, 그게 끝까지 이어져 결국 전부를 한꺼번에
+ * 불러온다. 스크롤한 만큼만 그리자는 얘기가 바로 여기서 무너진다.
+ */
+function BrandImageCard({
+  asset,
+  store,
+  onDelete,
+}: {
+  asset: BrandAsset;
+  store: unknown;
+  onDelete: () => void;
+}) {
+  const { brand } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+
+  return (
+    <div
+      data-dpe-part="asset-card"
+      className="group relative overflow-hidden rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-500"
+    >
+      <button
+        type="button"
+        disabled={!asset.download_url}
+        onClick={() =>
+          // presigned URL(download_url)은 15분이면 죽는다. 문서에 남는 주소는
+          // 만료 없는 경로여야 다시 열 때 403이 안 난다.
+          asset.download_url &&
+          insertPersonalImage(store, brand.brandAssetDocumentSrc(asset))
+        }
+        className="block h-24 w-full bg-dpe-ink-100 disabled:opacity-50"
+        title={t("detailPage.brandAssets.insertHint")}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={asset.download_url ?? ""}
+          crossOrigin="anonymous"
+          loading="lazy"
+          decoding="async"
+          alt={asset.display_name ?? asset.filename}
+          className="h-full w-full object-cover transition group-hover:opacity-90"
+        />
+      </button>
+      <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-dpe-sm bg-dpe-scrim/70 px-1.5 py-0.5 text-[10px] text-dpe-on-accent">
+        {asset.display_name ?? asset.filename}
+      </span>
+      <button
+        type="button"
+        onClick={onDelete}
+        className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-dpe-md bg-dpe-surface/95 text-dpe-ink-400 shadow-sm hover:text-dpe-danger-600 group-hover:flex"
+        aria-label={t("detailPage.brandAssets.delete")}
+      >
+        <Trash2 aria-hidden="true" size={13} />
+      </button>
+    </div>
+  );
+}
+
+/**
+ * 브랜드 자산 갈래. 안에서 다시 제품 · 모델 · 직접 생성 · 기타로 나눈다 —
+ * 무엇을 근거로 가르는지는 `lib/detail-page/brand-image-category.ts` 에 적혀 있다.
+ *
+ * 그리는 몫은 갈래 전체에 걸린 한 예산이고, 갈래를 갈아타면 예산도 처음으로
+ * 돌아간다. 나눠 놓고 여전히 200장을 굽는다면 나눈 값이 없다.
+ */
 function BrandAssetGallery({ store }: { store: unknown }) {
   const { brand, queryKeys, toast } = useDetailPageHost();
   const { t } = useTranslation("branding");
@@ -112,6 +266,7 @@ function BrandAssetGallery({ store }: { store: unknown }) {
     isLoading: brandsLoading,
   } = brand.useBrandWorkspace();
   const [error, setError] = useState<string | null>(null);
+  const [category, setCategory] = useState<BrandImageCategory | "all">("all");
   const fileRef = useRef<HTMLInputElement>(null);
   // GIF는 '브랜드 GIF' 패널이 맡는다 — 사진과 한 그리드에 섞이면 고르기 어렵다.
   const assetsQuery = useQuery({
@@ -120,9 +275,29 @@ function BrandAssetGallery({ store }: { store: unknown }) {
     enabled: Boolean(activeBrandId),
     staleTime: 4 * 60_000,
   });
-  const items = (assetsQuery.data ?? []).filter(isImageAsset);
-  // 브랜드를 옮기면 다시 처음부터 센다.
-  const reveal = useProgressiveReveal(items.length, { resetKey: activeBrandId });
+  const items = useMemo(
+    () => (assetsQuery.data ?? []).filter(isImageAsset),
+    [assetsQuery.data],
+  );
+  const counts = useMemo(() => countBrandImages(items), [items]);
+  const sections = useMemo(() => groupBrandImages(items), [items]);
+  const shown = useMemo(
+    () =>
+      category === "all"
+        ? sections
+        : sections.filter((section) => section.category === category),
+    [sections, category],
+  );
+  const shownTotal = shown.reduce(
+    (sum, section) => sum + section.items.length,
+    0,
+  );
+  // 브랜드를 옮기거나 갈래를 갈아타면 다시 처음부터 센다 — 200장을 보고 온 사람이
+  // 다른 갈래로 옮겨도 200장을 그대로 요청하면 서랍을 나눈 값이 사라진다.
+  const reveal = useProgressiveReveal(shownTotal, {
+    resetKey: `${activeBrandId ?? ""}:${category}`,
+  });
+  const revealed = takeBrandImages(shown, reveal.visible);
 
   const uploadMutation = useMutation({
     mutationFn: async (file: File) => {
@@ -209,58 +384,48 @@ function BrandAssetGallery({ store }: { store: unknown }) {
           </Link>
         </div>
       ) : (
-        <div className="grid grid-cols-2 gap-2 overflow-y-auto">
-          {items.slice(0, reveal.visible).map((asset) => (
-            <div
-              key={asset.id}
-              data-dpe-part="asset-card"
-              className="group relative overflow-hidden rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-500"
-            >
-              <button
-                type="button"
-                disabled={!asset.download_url}
-                onClick={() =>
-                  // presigned URL(download_url)은 15분이면 죽는다. 문서에 남는 주소는
-                  // 만료 없는 경로여야 다시 열 때 403이 안 난다.
-                  asset.download_url &&
-                  insertPersonalImage(store, brand.brandAssetDocumentSrc(asset))
-                }
-                className="block w-full disabled:opacity-50"
-                title={t("detailPage.brandAssets.insertHint")}
-              >
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={asset.download_url ?? ""}
-                  crossOrigin="anonymous"
-                  loading="lazy"
-                  decoding="async"
-                  alt={asset.display_name ?? asset.filename}
-                  className="h-24 w-full object-cover transition group-hover:opacity-90"
-                />
-              </button>
-              <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-dpe-sm bg-dpe-scrim/70 px-1.5 py-0.5 text-[10px] text-dpe-on-accent">
-                {asset.display_name ?? asset.filename}
-              </span>
-              <button
-                type="button"
-                onClick={() => deleteMutation.mutate(asset)}
-                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-dpe-md bg-dpe-surface/95 text-dpe-ink-400 shadow-sm hover:text-dpe-danger-600 group-hover:flex"
-                aria-label={t("detailPage.brandAssets.delete")}
+        <>
+          <CategoryFilter
+            counts={counts}
+            total={items.length}
+            value={category}
+            onChange={setCategory}
+          />
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {revealed.map((section) => (
+              <section key={section.category} className="mb-4 last:mb-0">
+                {/* 갈래를 하나만 볼 때는 제목이 토글과 같은 말을 두 번 한다. */}
+                {category === "all" && (
+                  <h3 className="mb-1.5 text-[11px] font-dpe-semibold text-dpe-ink-500">
+                    {t(BRAND_IMAGE_CATEGORY_LABEL_KEY[section.category])}
+                    <span className="ml-1 font-dpe-normal text-dpe-ink-300">
+                      {counts[section.category]}
+                    </span>
+                  </h3>
+                )}
+                <div className="grid grid-cols-2 gap-2">
+                  {section.items.map((asset) => (
+                    <BrandImageCard
+                      key={asset.id}
+                      asset={asset}
+                      store={store}
+                      onDelete={() => deleteMutation.mutate(asset)}
+                    />
+                  ))}
+                </div>
+              </section>
+            ))}
+            {reveal.hasMore && (
+              <div
+                ref={reveal.sentinelRef}
+                data-testid="brand-assets-sentinel"
+                className="flex h-10 items-center justify-center text-dpe-ink-300"
               >
-                <Trash2 aria-hidden="true" size={13} />
-              </button>
-            </div>
-          ))}
-          {reveal.hasMore && (
-            <div
-              ref={reveal.sentinelRef}
-              data-testid="brand-assets-sentinel"
-              className="col-span-2 flex h-10 items-center justify-center text-dpe-ink-300"
-            >
-              <Loader2 aria-hidden="true" className="animate-spin" size={16} />
-            </div>
-          )}
-        </div>
+                <Loader2 aria-hidden="true" className="animate-spin" size={16} />
+              </div>
+            )}
+          </div>
+        </>
       )}
     </div>
   );

package/i18n/en.json

@@ -369,7 +369,13 @@
         "uploadShape": "Upload brand SVG shape",
         "invalidShape": "Upload an SVG file up to 500KB.",
         "shapesEmpty": "No shapes saved for this brand.",
-        "refresh": "Refresh"
+        "refresh": "Refresh",
+        "filterLabel": "Image category",
+        "filterAll": "All",
+        "filterProduct": "Product",
+        "filterModel": "Model",
+        "filterGenerated": "Generated",
+        "filterOther": "Other"
       },
       "brandGifs": {
         "notAGif": "Only GIF files can be uploaded.",

package/i18n/ko.json

@@ -369,7 +369,13 @@
         "uploadShape": "브랜드 SVG 도형 업로드",
         "invalidShape": "500KB 이하 SVG 파일만 올릴 수 있어요.",
         "shapesEmpty": "이 브랜드에 저장된 도형이 없어요.",
-        "refresh": "새로고침"
+        "refresh": "새로고침",
+        "filterLabel": "이미지 갈래",
+        "filterAll": "전체",
+        "filterProduct": "제품",
+        "filterModel": "모델",
+        "filterGenerated": "직접 생성",
+        "filterOther": "기타"
       },
       "brandGifs": {
         "notAGif": "GIF 파일만 올릴 수 있어요.",

package/lib/detail-page/brand-image-category.ts

@@ -0,0 +1,121 @@
+/**
+ * 브랜드 사진을 셀러가 찾는 방식대로 갈래 짓는다 — 제품 · 모델 · 직접 생성 · 기타.
+ *
+ * 브랜드가 오래 살수록 이 서랍은 수백 장이 된다. 한 그리드에 통째로 쌓아 두면
+ * "그때 그 모델 컷"을 찾는 일이 스크롤 노동이 된다. 다행히 근거는 이미 자산에 박혀
+ * 있다 — 업로드할 때 고른 ``asset_type``(제품/모델)과, 서버가 생성물에 찍어 주는
+ * ``metadata.source``.
+ *
+ * **썸네일 바이트만 봐서는 알 수 없는 것들이다.** 제품 사진과 모델 사진은 화면에서
+ * 구분이 되지만 "내가 캔버스에서 구운 것"인지는 그림으로 드러나지 않는다. 그래서
+ * 만든 시점에 찍힌 태그가 유일한 근거이고, 태그가 없으면 없는 사실을 만들지 않고
+ * '기타'로 둔다.
+ */
+
+import type { BrandAsset } from "../../components/detail-page/detail-page-host-context";
+
+export type BrandImageCategory = "product" | "model" | "generated" | "other";
+
+/** 갈래 순서 = 화면 순서. 셀러가 부르는 순서대로 둔다. */
+export const BRAND_IMAGE_CATEGORIES: readonly BrandImageCategory[] = [
+  "product",
+  "model",
+  "generated",
+  "other",
+];
+
+export const BRAND_IMAGE_CATEGORY_LABEL_KEY: Record<
+  BrandImageCategory,
+  string
+> = {
+  product: "detailPage.brandAssets.filterProduct",
+  model: "detailPage.brandAssets.filterModel",
+  generated: "detailPage.brandAssets.filterGenerated",
+  other: "detailPage.brandAssets.filterOther",
+};
+
+/**
+ * 캔버스·저작이 구워 브랜드 버킷에 바로 쓴 자산인가.
+ *
+ * 서버가 찍는 값은 지금 ``canvas_generated`` 하나지만, 굽는 자리가 늘 때마다 이
+ * 목록을 따라 고치게 두면 새 생성물이 조용히 '기타'로 샌다. 접미사로 보는 이유다.
+ * 셀러가 직접 올린 것(``canvas_upload``)은 여기 걸리지 않는다.
+ */
+function isGeneratedAsset(asset: BrandAsset): boolean {
+  const source = asset.metadata?.source;
+  return typeof source === "string" && source.endsWith("generated");
+}
+
+/**
+ * 자산 하나의 갈래.
+ *
+ * ``asset_type`` 을 먼저 본다. 제품·모델은 올린 사람이 직접 고른 분류라 서버가
+ * 나중에 찍는 흔적보다 셀러의 의도에 가깝다 — 생성한 제품 컷을 제품 자리에서 못
+ * 찾으면 분류가 있으나 마나다.
+ */
+export function brandImageCategory(asset: BrandAsset): BrandImageCategory {
+  if (asset.asset_type === "product_image") return "product";
+  if (asset.asset_type === "model_image") return "model";
+  if (isGeneratedAsset(asset)) return "generated";
+  return "other";
+}
+
+export interface BrandImageSection {
+  category: BrandImageCategory;
+  items: BrandAsset[];
+}
+
+/**
+ * 갈래별 장수. 토글에 붙는 숫자라 **거르기 전 전체**를 세야 한다 — 제품만 보는
+ * 중에 모델 숫자가 0으로 바뀌면 숫자가 아니라 착시가 된다.
+ */
+export function countBrandImages(
+  assets: BrandAsset[],
+): Record<BrandImageCategory, number> {
+  const counts: Record<BrandImageCategory, number> = {
+    product: 0,
+    model: 0,
+    generated: 0,
+    other: 0,
+  };
+  for (const asset of assets) counts[brandImageCategory(asset)] += 1;
+  return counts;
+}
+
+/**
+ * 화면 구획으로 나눈다. **비어 있지 않은 갈래만** — 빈 제목만 네 줄 떠 있으면
+ * 패널이 고장 난 것처럼 보인다.
+ */
+export function groupBrandImages(assets: BrandAsset[]): BrandImageSection[] {
+  const buckets = new Map<BrandImageCategory, BrandAsset[]>();
+  for (const asset of assets) {
+    const key = brandImageCategory(asset);
+    const bucket = buckets.get(key);
+    if (bucket) bucket.push(asset);
+    else buckets.set(key, [asset]);
+  }
+  return BRAND_IMAGE_CATEGORIES.map((category) => ({
+    category,
+    items: buckets.get(category) ?? [],
+  })).filter((section) => section.items.length > 0);
+}
+
+/**
+ * 앞에서부터 ``visible`` 장까지만 남긴다.
+ *
+ * 그릴 몫은 구획별이 아니라 **패널 전체 예산**이다. 구획마다 따로 세면 갈래가 넷일
+ * 때 첫 화면에 48장이 깔린다 — 스크롤한 만큼만 그리자는 얘기가 무색해진다.
+ */
+export function takeBrandImages(
+  sections: BrandImageSection[],
+  visible: number,
+): BrandImageSection[] {
+  const taken: BrandImageSection[] = [];
+  let left = Math.max(0, visible);
+  for (const section of sections) {
+    if (left <= 0) break;
+    taken.push({ ...section, items: section.items.slice(0, left) });
+    left -= Math.min(left, section.items.length);
+  }
+  return taken;
+}

package/lib/detail-page/use-progressive-reveal.ts

@@ -47,11 +47,23 @@ export function useProgressiveReveal(
   const [count, setCount] = useState(initial);
   const [node, setNode] = useState<HTMLElement | null>(null);
 
-  // 목록이 갈아끼워지면(브랜드 전환·새로고침) 다시 처음부터 센다. 안 그러면 200장을
-  // 보고 온 사람이 다른 브랜드로 옮겨도 200장을 그대로 요청한다.
-  useEffect(() => {
+  // 목록이 갈아끼워지면(브랜드 전환·갈래 전환·새로고침) 다시 처음부터 센다. 안 그러면
+  // 200장을 보고 온 사람이 다른 목록으로 옮겨도 200장을 그대로 요청한다.
+  //
+  // effect 가 아니라 **렌더 중에** 되돌린다. effect 로 미루면 갈아탄 직후 한 프레임
+  // 동안 새 목록에 옛 숫자가 걸려, 열두 장만 보자고 나눈 목록이 그 프레임에 스물넷을
+  // 굽는다. 되돌릴 값이 렌더에 이미 있는데 그림을 한 번 내보낼 이유가 없다.
+  const [lastResetKey, setLastResetKey] = useState<unknown>(resetKey);
+  const [lastInitial, setLastInitial] = useState(initial);
+  // 되돌린 값은 이번 렌더가 바로 쓴다. `count` 는 다음 렌더에나 바뀌므로, 이걸
+  // 안 두면 되돌리기로 해 놓고 정작 이번 렌더는 옛 숫자를 내보낸다.
+  let revealed = count;
+  if (!Object.is(lastResetKey, resetKey) || lastInitial !== initial) {
+    setLastResetKey(resetKey);
+    setLastInitial(initial);
     setCount(initial);
-  }, [resetKey, initial]);
+    revealed = initial;
+  }
 
   useEffect(() => {
     if (!node || count >= total) return;
@@ -75,8 +87,8 @@ export function useProgressiveReveal(
   }, [node, count, total, step]);
 
   return {
-    visible: Math.min(count, total),
+    visible: Math.min(revealed, total),
     sentinelRef: setNode,
-    hasMore: count < total,
+    hasMore: revealed < total,
   };
 }

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.1",
+  "version": "0.5.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",