@leviosa-ai/detail-page-editor 0.7.2 → 0.7.4

package/components/detail-page/ai-generate-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState, type ChangeEvent } from "react";
+import { useCallback, useMemo, useState, type ChangeEvent } from "react";
 import { ImagePlus, Info, Loader2, Pencil, Sparkles, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -8,11 +8,11 @@ import { AnnotationDialog } from "./annotation-dialog";
 import { toDrawableDataUri } from "../../lib/detail-page/image-data-uri";
 
 import {
-  DEFAULT_IMAGE_TIER,
-  IMAGE_TIERS,
   IMAGE_TIER_META,
   isImageCreditBlocked,
   imageCreditRequired,
+  resolveDefaultImageTier,
+  resolveImageTiers,
   type ImageTier,
 } from "../../lib/detail-page/image-credit";
 import {
@@ -246,6 +246,12 @@ type AiGeneratePanelProps = {
    * 계산한다. 단일 값 `creditCost`보다 우선. 데모(dev-canvas)는 대체 단가 맵을 넘긴다.
    */
   costByTier?: Partial<Record<ImageTier, number>>;
+  /**
+   * 고르게 할 티어. 안 주면 셋 다(`IMAGE_TIERS`). 요금표에서 은퇴한 티어를 가진
+   * 소비자가 드롭다운에서 그 항목을 빼는 자리다 — 값이 없는 티어가 남아 있으면
+   * 누를 수는 있는데 아무도 청구를 못 한다.
+   */
+  tiers?: readonly ImageTier[];
   /**
    * (레거시) 단일 티어 크레딧. `costByTier` 미주입 시 선택 티어 관계없이 이 값을 쓴다.
    * 0/미지정이면 크레딧 UI 숨김.
@@ -286,6 +292,7 @@ export function AiGeneratePanel({
   uploadFile,
   onResult,
   costByTier,
+  tiers,
   creditCost = 0,
   creditBalance = 0,
   onBuyCredits,
@@ -296,7 +303,17 @@ export function AiGeneratePanel({
     // GIF 생성이 배선된 경우에만 gif 초기값을 존중(미배선이면 토글이 없어 갇힘).
     initialMode === "gif" && onGenerateGif ? "gif" : "image",
   );
-  const [tier, setTier] = useState<ImageTier>(DEFAULT_IMAGE_TIER);
+  // 목록은 props 로 오지만 배열이라 매 렌더 새 참조다. 여기서 한 번 정규화해
+  // 아래 `useMemo`·초기값이 같은 값을 본다.
+  const tierOptions = useMemo(() => resolveImageTiers(tiers), [tiers]);
+  const [tier, setTier] = useState<ImageTier>(() =>
+    resolveDefaultImageTier(resolveImageTiers(tiers)),
+  );
+  // 목록이 좁아졌는데 고른 것이 그 밖이면(소비자가 티어를 은퇴시킨 뒤 열린 패널)
+  // 목록 안으로 되돌린다. 안 그러면 트리거가 빈 채로 뜨고 생성은 사라진 티어로 나간다.
+  const activeTier = tierOptions.includes(tier)
+    ? tier
+    : resolveDefaultImageTier(tierOptions);
   const [transparent, setTransparent] = useState(true);
   const [refUrl, setRefUrl] = useState<string | null>(null);
   const [refUploading, setRefUploading] = useState(false);
@@ -314,7 +331,7 @@ export function AiGeneratePanel({
   );
 
   // 활성 단가: GIF 모드는 단일 gifCreditCost, 이미지 모드는 선택 티어 단가.
-  const tierCost = costByTier?.[tier] ?? creditCost;
+  const tierCost = costByTier?.[activeTier] ?? creditCost;
   const activeCost = isGif ? gifCreditCost : tierCost;
 
   // 잔액이 비용의 1.5배 미만이면 생성 차단(비용 0=미구성이면 게이트 비활성).
@@ -380,7 +397,7 @@ export function AiGeneratePanel({
             prompt: finalPrompt,
             referenceImages,
             mode: refUrl ? "new_reference" : "based_on_existing",
-            tier,
+            tier: activeTier,
             brandId,
             annotatedImage,
           });
@@ -408,7 +425,7 @@ export function AiGeneratePanel({
     } finally {
       setLoading(false);
     }
-  }, [prompt, loading, blocked, isGif, gifMissingRef, transparent, onGenerate, onGenerateGif, refUrl, store, onResult, tier, t]);
+  }, [prompt, loading, blocked, isGif, gifMissingRef, transparent, onGenerate, onGenerateGif, refUrl, store, onResult, activeTier, t]);
 
   const handleGenerate = useCallback(() => {
     void runGenerate();
@@ -529,7 +546,7 @@ export function AiGeneratePanel({
             <TooltipContent side="left" className="max-w-[240px] text-left">
               <p className="mb-1 font-dpe-semibold">{t("detailPage.aiGenerate.modelTooltipTitle")}</p>
               <ul className="space-y-1">
-                {IMAGE_TIERS.map((tk) => (
+                {tierOptions.map((tk) => (
                   <li key={tk}>
                     <span className="font-dpe-medium">{IMAGE_TIER_META[tk].label}</span>
                     <span className="opacity-80"> · {IMAGE_TIER_META[tk].quality}</span>
@@ -539,12 +556,12 @@ export function AiGeneratePanel({
             </TooltipContent>
           </Tooltip>
         </div>
-        <Select value={tier} onValueChange={(v) => setTier(v as ImageTier)}>
+        <Select value={activeTier} onValueChange={(v) => setTier(v as ImageTier)}>
           <SelectTrigger className="h-10 w-full text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {IMAGE_TIERS.map((tk) => {
+            {tierOptions.map((tk) => {
               const meta = IMAGE_TIER_META[tk];
               const cost = costByTier?.[tk];
               return (
@@ -573,7 +590,7 @@ export function AiGeneratePanel({
           </SelectContent>
         </Select>
         <p className="mt-1.5 text-[11px] leading-4 text-dpe-ink-500">
-          {IMAGE_TIER_META[tier].description}
+          {IMAGE_TIER_META[activeTier].description}
         </p>
       </div>
 

package/components/detail-page/canvas-selection-tools.tsx

@@ -15,7 +15,11 @@ import { useTranslation } from "react-i18next";
 import { observer } from "./canvas-observer";
 import { CANVAS_MENU_ICONS } from "./canvas-context-menu";
 import { ImageCropOverlay, type CropElement } from "./image-crop-overlay";
-import { SelectionQuickToolbar, type QuickToolbarItem } from "./selection-quick-toolbar";
+import {
+  SelectionQuickToolbar,
+  useQuickPopoverPlacement,
+  type QuickToolbarItem,
+} from "./selection-quick-toolbar";
 import { selectedElementsDeep, type SelectableElement } from "./detail-page-selection";
 import { useEditorAi } from "./editor-ai-context";
 import {
@@ -39,7 +43,13 @@ type ToolStore = CanvasMenuStore & {
   getElementById?: (id: string) => SelectableElement | undefined;
 };
 
-/** 창 하나. 띠 바로 아래에 붙고, 안에 들어가는 것은 우측 패널이 쓰던 부품 그대로다. */
+/**
+ * 창 하나. 안에 들어가는 것은 우측 패널이 쓰던 부품 그대로다.
+ *
+ * 붙는 자리는 띠가 정한다(`useQuickPopoverPlacement`). 아래가 좁으면 위로 뒤집고,
+ * 높이는 그 자리에 실제로 남은 만큼으로 잘린다 — 넘치는 만큼은 스스로 스크롤한다.
+ * 60vh·520px 상한은 그대로 두되, 남은 자리가 더 좁으면 그쪽이 이긴다.
+ */
 function Popover({
   children,
   width = 360,
@@ -47,11 +57,16 @@ function Popover({
   children: React.ReactNode;
   width?: number;
 }) {
+  const { side, maxHeight } = useQuickPopoverPlacement();
   return (
     <div
       data-dp-quick-popover=""
-      style={{ width, maxHeight: "min(60vh, 520px)" }}
-      className="mt-1.5 overflow-y-auto rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface shadow-lg"
+      data-dp-quick-popover-side={side}
+      style={{ width, maxHeight: `min(60vh, 520px, ${maxHeight}px)` }}
+      className={[
+        "overflow-y-auto rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface shadow-lg",
+        side === "above" ? "absolute bottom-full left-0 mb-1.5" : "mt-1.5",
+      ].join(" ")}
     >
       {children}
     </div>

package/components/detail-page/detail-page-editor.tsx

@@ -92,6 +92,14 @@ export type DetailPageEditorProps = {
    * 쓴다. 인증된 호스트가 공유 훅으로 feature_costs에서 계산해 주입한다.
    */
   imageCostByTier?: Partial<Record<ImageTier, number>>;
+  /**
+   * 고르게 할 이미지 티어. 안 주면 셋 다(basic/pro/max).
+   *
+   * 요금표에서 티어를 은퇴시킨 소비자가 쓰는 자리다 — 값이 없는 티어를 드롭다운에
+   * 남겨 두면 누를 수는 있는데 아무도 청구를 못 하고, 그 상태는 화면 어디에도 안
+   * 보인다. 에이전시는 `["pro", "max"]` 를 준다.
+   */
+  imageTiers?: readonly ImageTier[];
   /**
    * 생성 인스턴스 ID. 주어지면 텍스트 요소 선택 시 우측에 "프롬프트로 편집"이
    * 노출된다(소싱 서버 카피 엔진 호출). dev 하네스는 scratch ID를 주입한다.
@@ -435,6 +443,7 @@ export function DetailPageEditor({
   imageCreditCost = 0,
   imageCreditBalance = 0,
   imageCostByTier,
+  imageTiers,
   generatedId,
   structurePanel,
   productName,
@@ -662,6 +671,7 @@ export function DetailPageEditor({
         imageCreditCost,
         imageCreditBalance,
         imageCostByTier,
+        imageTiers,
         onBuyImageCredits: () => setPricingOpen(true),
         structurePanel,
         generatedId,
@@ -675,6 +685,7 @@ export function DetailPageEditor({
       imageCreditCost,
       imageCreditBalance,
       imageCostByTier,
+      imageTiers,
       structurePanel,
       generatedId,
     ],
@@ -721,6 +732,7 @@ export function DetailPageEditor({
       imageCreditCost,
       imageCreditBalance,
       imageCostByTier,
+      imageTiers,
       onGenerateGif,
       gifCreditCost,
       onRemoveBackground,
@@ -733,6 +745,7 @@ export function DetailPageEditor({
       imageCreditCost,
       imageCreditBalance,
       imageCostByTier,
+      imageTiers,
       onGenerateGif,
       gifCreditCost,
       onRemoveBackground,

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

@@ -2370,6 +2370,7 @@ export const ElementAiEditPanel = observer(function ElementAiEditPanel({
           initialMode={isGif ? "gif" : "image"}
           onResult={(src) => single.set({ src })}
           costByTier={ai.imageCostByTier}
+          tiers={ai.imageTiers}
           creditCost={ai.imageCreditCost}
           creditBalance={ai.imageCreditBalance}
           onBuyCredits={ai.onBuyCredits}

package/components/detail-page/detail-page-sidebar-sections.tsx

@@ -138,6 +138,7 @@ export type BuildSectionsOptions = {
   imageCreditBalance?: number;
   /** 티어별(basic/pro/max) 크레딧 단가. 모델 드롭다운의 각 항목 비용에 쓴다. */
   imageCostByTier?: Partial<Record<ImageTier, number>>;
+  imageTiers?: readonly ImageTier[];
   /** 크레딧 부족 시 "크레딧 추가하기" 목적지(레비오사 pricing). */
   onBuyImageCredits?: () => void;
   /** AI 생성 결과를 현재 브랜드 중앙 에셋에 미러링. */
@@ -167,6 +168,7 @@ export function buildDetailPageSections({
   imageCreditCost,
   imageCreditBalance,
   imageCostByTier,
+  imageTiers,
   onBuyImageCredits,
   structurePanel,
   generatedId,
@@ -225,6 +227,7 @@ export function buildDetailPageSections({
         gifCreditCost={gifCreditCost}
         uploadFile={uploadFile}
         costByTier={imageCostByTier}
+        tiers={imageTiers}
         creditCost={imageCreditCost}
         creditBalance={imageCreditBalance}
         onBuyCredits={onBuyImageCredits}

package/components/detail-page/editor-ai-context.tsx

@@ -29,6 +29,7 @@ export type EditorAiValue = {
   imageCreditCost?: number;
   imageCreditBalance?: number;
   imageCostByTier?: Partial<Record<ImageTier, number>>;
+  imageTiers?: readonly ImageTier[];
   onGenerateGif?: GenerateGifFn;
   gifCreditCost?: number;
   onRemoveBackground?: RemoveBackgroundFn;

package/components/detail-page/selection-quick-toolbar.tsx

@@ -13,7 +13,9 @@
  */
 
 import {
+  createContext,
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -42,6 +44,10 @@ const GAP = 10;
 const EDGE = 8;
 /** 띠의 대략 높이. 실측 전 첫 프레임에만 쓴다. */
 const BAR_HEIGHT = 40;
+/** 띠와 그 아래(또는 위) 창 사이의 여백(px). 클래스의 `mt-1.5`/`mb-1.5`와 같은 값이다. */
+const POPOVER_GAP = 6;
+/** 창이 이보다 낮아지면 접힌 것과 다름없다 — 스스로 스크롤하게 두고 이 높이는 지킨다. */
+const POPOVER_MIN = 200;
 
 /**
  * 띠의 자리. 위가 모자라면 아래로 뒤집고, 좌우는 작업 영역 안으로 민다.
@@ -63,6 +69,40 @@ export function toolbarPosition(
   };
 }
 
+/**
+ * 창이 띠의 위에 설지 아래에 설지, 그리고 얼마나 높을 수 있는지.
+ *
+ * 자리 계산이 재는 것은 **띠**뿐이라(`size`가 `barRef` 것이다) 창은 지금까지 아무에게도
+ * 안 물어보고 띠 아래로 흘렀다. 상세페이지 사진은 대개 한 섹션을 통째로 덮어서 띠가
+ * 작업 영역 맨 아래에 붙는데, 그러면 창은 통째로 화면 밖에 그려진다 — 열려 있고,
+ * 접근성 트리에도 있고, 눈에는 없다. 그 자리에서는 위로 뒤집는다.
+ */
+export function popoverPlacement(
+  barTop: number,
+  barHeight: number,
+  hostHeight: number,
+): { side: "above" | "below"; maxHeight: number } {
+  const below = hostHeight - (barTop + barHeight) - POPOVER_GAP - EDGE;
+  const above = barTop - POPOVER_GAP - EDGE;
+  const side = below >= above ? "below" : "above";
+  return {
+    side,
+    maxHeight: Math.max(POPOVER_MIN, side === "below" ? below : above),
+  };
+}
+
+export type QuickPopoverPlacement = ReturnType<typeof popoverPlacement>;
+
+const QuickPopoverContext = createContext<QuickPopoverPlacement>({
+  side: "below",
+  maxHeight: 520,
+});
+
+/** 창을 그리는 쪽이 자기 자리를 집는 곳. 띠 밖에서 부르면 기본값(아래)이다. */
+export function useQuickPopoverPlacement(): QuickPopoverPlacement {
+  return useContext(QuickPopoverContext);
+}
+
 export function SelectionQuickToolbar({
   els,
   items,
@@ -179,6 +219,7 @@ export function SelectionQuickToolbar({
     { width: host.clientWidth, height: host.clientHeight },
     size,
   );
+  const placement = popoverPlacement(top, size.height, host.clientHeight);
 
   return (
     <div
@@ -217,7 +258,9 @@ export function SelectionQuickToolbar({
           </div>
         ))}
       </div>
-      {children}
+      <QuickPopoverContext.Provider value={placement}>
+        {children}
+      </QuickPopoverContext.Provider>
     </div>
   );
 }

package/lib/detail-page/image-credit.ts

@@ -13,6 +13,27 @@ export type ImageTier = "basic" | "pro" | "max";
 /** 선택 UI에 노출할 티어 순서(저→고 품질). */
 export const IMAGE_TIERS: ImageTier[] = ["basic", "pro", "max"];
 
+/**
+ * 이 편집기가 실제로 고르게 할 티어.
+ *
+ * 소비자마다 파는 것이 다르다. 소싱은 셋을 다 팔지만, 에이전시 요금표는 basic 을
+ * 은퇴시키고 pro 를 기본으로 뒀다 — 값이 없는 티어를 드롭다운에 남겨 두면 사용자는
+ * 고를 수 있는데 아무도 청구를 못 하는 자리가 생긴다.
+ *
+ * 안 주면 지금까지대로 셋 다. 준 값이 비었거나 아는 티어가 하나도 없으면 그것도
+ * 셋 다로 되돌린다 — 빈 드롭다운은 "AI 이미지를 못 만드는 편집기"이고, 그건 소비자가
+ * 배열 하나를 잘못 넘겨서 벌어질 만한 일이 아니다.
+ */
+export function resolveImageTiers(allowed?: readonly ImageTier[]): ImageTier[] {
+  const picked = IMAGE_TIERS.filter((tier) => allowed?.includes(tier));
+  return picked.length > 0 ? picked : IMAGE_TIERS;
+}
+
+/** 목록 안의 기본 티어. 기본값이 빠진 목록이면 그 목록의 첫 항목. */
+export function resolveDefaultImageTier(tiers: readonly ImageTier[]): ImageTier {
+  return tiers.includes(DEFAULT_IMAGE_TIER) ? DEFAULT_IMAGE_TIER : tiers[0];
+}
+
 export const IMAGE_FEATURE_KEYS: Record<ImageTier, string> = {
   basic: "detail_page_image_basic",
   pro: "detail_page_image_pro",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "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": "UNLICENSED",