@leviosa-ai/detail-page-editor 0.11.8 → 0.12.1

package/components/cardnews/color-input.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Pipette } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { useTranslation } from "react-i18next";
 
 // ── Preset palette — popular colors for cardnews/social media ──────────────
@@ -21,8 +21,6 @@ const PRESET_COLORS = [
 
 const RECENT_COLORS_KEY = "leviosa-recent-colors";
 const MAX_RECENT = 8;
-const POPOVER_WIDTH = 224; // w-56 = 14rem = 224px
-const POPOVER_HEIGHT_ESTIMATE = 320;
 
 /** Checkerboard SVG data URI for transparent backgrounds */
 export const CHECKER_BG = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23ccc'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ccc'/%3E%3Crect x='4' width='4' height='4' fill='%23fff'/%3E%3Crect y='4' width='4' height='4' fill='%23fff'/%3E%3C/svg%3E")`;
@@ -52,35 +50,6 @@ function addRecentColor(color: string): string[] {
   return recent;
 }
 
-/** Calculate popover position with viewport boundary clamping */
-function calcPopoverPos(
-  anchorRect: DOMRect,
-  align: "start" | "end",
-  side: "auto" | "top" | "bottom",
-): { top: number; left: number } {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-
-  let top = side === "top"
-    ? anchorRect.top - POPOVER_HEIGHT_ESTIMATE - 6
-    : anchorRect.bottom + 6;
-  let left = align === "end" ? anchorRect.right - POPOVER_WIDTH : anchorRect.left;
-
-  // Flip upward if overflowing bottom
-  if (side === "auto" && top + POPOVER_HEIGHT_ESTIMATE > vh) {
-    top = anchorRect.top - POPOVER_HEIGHT_ESTIMATE - 6;
-  }
-  // Clamp to viewport edges
-  if (top < 4) top = 4;
-  if (left + POPOVER_WIDTH > vw) left = vw - POPOVER_WIDTH - 4;
-  if (left < 4) left = 4;
-
-  return { top, left };
-}
-
-// ── Global: close other ColorInput popovers when a new one opens ──────────
-const colorInputCloseCallbacks = new Set<() => void>();
-
 function isTransparent(v: string): boolean {
   return v === "transparent" || v === "rgba(0,0,0,0)" || v === "rgba(0, 0, 0, 0)";
 }
@@ -130,10 +99,6 @@ interface ColorInputProps {
   size?: "sm" | "md";
   /** Allow transparent color selection (default: false) */
   allowTransparent?: boolean;
-  /** Horizontal popover alignment relative to the swatch (default: "end") */
-  popoverAlign?: "start" | "end";
-  /** Vertical popover placement preference (default: "auto") */
-  popoverSide?: "auto" | "top" | "bottom";
 }
 
 /**
@@ -144,17 +109,11 @@ export function ColorInput({
   onChange,
   size = "sm",
   allowTransparent = false,
-  popoverAlign = "end",
-  popoverSide = "auto",
 }: ColorInputProps) {
   const { t } = useTranslation("marketing");
   const [open, setOpen] = useState(false);
-  const [measured, setMeasured] = useState(false);
   const [hexInput, setHexInput] = useState("");
   const [recentColors, setRecentColors] = useState<string[]>([]);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [popoverPos, setPopoverPos] = useState<{ top: number; left: number } | null>(null);
   const swatchPx = size === "md" ? "w-8 h-8" : "w-7 h-7";
 
   const isTransparentValue = isTransparent(value);
@@ -165,88 +124,12 @@ export function ColorInput({
     [isTransparentValue, value],
   );
 
-  const closePopover = useCallback(() => setOpen(false), []);
-
-  // Register/unregister close callback for mutual exclusion
+  // 열릴 때만 최근 색과 hex 칸을 채운다. 닫힌 채로 값이 바뀌어도 다음에 열 때 맞다.
   useEffect(() => {
-    colorInputCloseCallbacks.add(closePopover);
-    return () => { colorInputCloseCallbacks.delete(closePopover); };
-  }, [closePopover]);
-
-  const openPopover = useCallback(() => {
-    // Close all other open ColorInput popovers
-    colorInputCloseCallbacks.forEach((cb) => { if (cb !== closePopover) cb(); });
-
+    if (!open) return;
     setRecentColors(getRecentColors());
     setHexInput(isTransparentValue ? "" : safeColor);
-    setMeasured(false);
-    if (containerRef.current) {
-      setPopoverPos(calcPopoverPos(containerRef.current.getBoundingClientRect(), popoverAlign, popoverSide));
-    }
-    setOpen(true);
-  }, [safeColor, isTransparentValue, closePopover, popoverAlign, popoverSide]);
-
-  // Track scroll & resize to reposition popover
-  useEffect(() => {
-    if (!open) return;
-    const reposition = () => {
-      if (containerRef.current) {
-        setPopoverPos(calcPopoverPos(containerRef.current.getBoundingClientRect(), popoverAlign, popoverSide));
-      }
-    };
-    // Capture phase to catch scrolls in any container (e.g. layer panel overflow-y-auto)
-    window.addEventListener("scroll", reposition, true);
-    window.addEventListener("resize", reposition);
-    return () => {
-      window.removeEventListener("scroll", reposition, true);
-      window.removeEventListener("resize", reposition);
-    };
-  }, [open, popoverAlign, popoverSide]);
-
-  // After popover renders, re-measure actual height and adjust position
-  useEffect(() => {
-    if (!open || !popoverRef.current || !containerRef.current) return;
-    const popoverEl = popoverRef.current;
-    const anchorRect = containerRef.current.getBoundingClientRect();
-    const actualHeight = popoverEl.offsetHeight;
-    const vh = window.innerHeight;
-    const vw = window.innerWidth;
-
-    let top = popoverSide === "top"
-      ? anchorRect.top - actualHeight - 6
-      : anchorRect.bottom + 6;
-    let left = popoverAlign === "end" ? anchorRect.right - POPOVER_WIDTH : anchorRect.left;
-
-    if (popoverSide === "auto" && top + actualHeight > vh) {
-      top = anchorRect.top - actualHeight - 6;
-    }
-    if (top < 4) top = 4;
-    if (left + POPOVER_WIDTH > vw) left = vw - POPOVER_WIDTH - 4;
-    if (left < 4) left = 4;
-
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setPopoverPos({ top, left });
-    setMeasured(true);
-  }, [open, popoverAlign, popoverSide]);
-
-  // Close on outside click (check both swatch container and portal popover)
-  useEffect(() => {
-    if (!open) return;
-    const handle = (e: MouseEvent | TouchEvent) => {
-      const target = e.target as Node;
-      if (
-        containerRef.current && !containerRef.current.contains(target) &&
-        popoverRef.current && !popoverRef.current.contains(target)
-      ) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handle);
-    document.addEventListener("touchstart", handle);
-    return () => {
-      document.removeEventListener("mousedown", handle);
-      document.removeEventListener("touchstart", handle);
-    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   const selectColor = useCallback((color: string) => {
@@ -273,28 +156,38 @@ export function ColorInput({
   }, [hexInput, selectColor]);
 
   return (
-    <div ref={containerRef} className="relative inline-block">
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
       {/* Swatch button */}
-      <button
-        type="button"
-        onClick={() => open ? setOpen(false) : openPopover()}
-        className={`${swatchPx} rounded-dpe-lg border-2 border-[var(--color-border)] cursor-pointer shrink-0 transition-all hover:border-[var(--color-primary)] hover:shadow-md hover:scale-105 active:scale-95`}
-        style={{
-          backgroundColor: isTransparentValue ? undefined : safeColor,
-          backgroundImage: isTransparentValue ? CHECKER_BG : undefined,
-          backgroundSize: isTransparentValue ? "8px 8px" : undefined,
-          boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
-        }}
-        title={isTransparentValue ? "transparent" : safeColor}
-      />
-
-      {/* Popover — rendered via portal to escape overflow:hidden containers */}
-      {open && popoverPos && createPortal(
-        <div
-          ref={popoverRef}
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          className={`${swatchPx} rounded-dpe-md border border-dpe-ink-200 cursor-pointer shrink-0 transition-colors hover:border-dpe-ink-400`}
+          style={{
+            backgroundColor: isTransparentValue ? undefined : safeColor,
+            backgroundImage: isTransparentValue ? CHECKER_BG : undefined,
+            backgroundSize: isTransparentValue ? "8px 8px" : undefined,
+            boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
+          }}
+          title={isTransparentValue ? "transparent" : safeColor}
+        />
+      </PopoverPrimitive.Trigger>
+
+      {/* 자리는 Radix 가 잡는다 — 스와치 바로 아래에 붙이고, 자리가 없으면 알아서 뒤집는다.
+          예전에는 좌표를 손으로 재서 `fixed` 로 찍었는데, 스크롤되는 패널 안에서 스와치와
+          어긋난 자리에 떴다.
+
+          포털은 body 로 나가므로 편집기 뿌리 딱지를 다시 달아 준다 — 안 달면 소비자 앱이
+          `[data-dpe-root]` 로 좁혀 둔 색·모서리 토큰이 이 팝오버에만 안 먹어서, 각진
+          인스펙터 위에 둥근 카드가 하나 뜬다. */}
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
           data-layer-panel
-          className={`fixed z-[200] w-56 bg-[var(--color-background)] border border-[var(--color-border)] rounded-dpe-xl shadow-lg p-3 space-y-2.5 transition-opacity duration-75 ${measured ? "opacity-100" : "opacity-0 pointer-events-none"}`}
-          style={{ top: popoverPos.top, left: popoverPos.left }}
+          data-dpe-root=""
+          side="bottom"
+          align="start"
+          sideOffset={6}
+          collisionPadding={8}
+          className="z-[200] w-56 bg-dpe-surface border border-dpe-ink-200 rounded-dpe-md shadow-[0_12px_40px_rgba(0,0,0,0.16)] p-3 space-y-2.5"
         >
           {/* Transparent + Preset palette */}
           <div className="grid grid-cols-6 gap-1.5">
@@ -302,7 +195,7 @@ export function ColorInput({
               <button
                 type="button"
                 onClick={() => selectColor("transparent")}
-                className={`w-7 h-7 rounded-dpe-md border transition-transform hover:scale-110 active:scale-95 relative overflow-hidden ${
+                className={`w-7 h-7 rounded-dpe-md border transition-colors relative overflow-hidden ${
                   isTransparentValue ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                 }`}
                 style={{ backgroundImage: CHECKER_BG, backgroundSize: "8px 8px" }}
@@ -319,7 +212,7 @@ export function ColorInput({
                 key={color}
                 type="button"
                 onClick={() => selectColor(color)}
-                className={`w-7 h-7 rounded-dpe-md border transition-transform hover:scale-110 active:scale-95 ${
+                className={`w-7 h-7 rounded-dpe-md border transition-colors ${
                   !isTransparentValue && safeColor.toUpperCase() === color ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                 }`}
                 style={{ backgroundColor: color }}
@@ -338,7 +231,7 @@ export function ColorInput({
                     key={color}
                     type="button"
                     onClick={() => selectColor(color)}
-                    className={`size-5 rounded-dpe-md border transition-transform hover:scale-110 active:scale-95 ${
+                    className={`size-5 rounded-dpe-md border transition-colors ${
                       !isTransparentValue && safeColor.toUpperCase() === color ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                     }`}
                     style={{ backgroundColor: color }}
@@ -356,7 +249,7 @@ export function ColorInput({
               <button
                 type="button"
                 onClick={openEyeDropper}
-                className="flex shrink-0 items-center gap-1 rounded-dpe-lg px-1.5 py-1.5 text-[11px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
+                className="flex shrink-0 items-center gap-1 rounded-dpe-md px-1.5 py-1.5 text-[11px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
                 title={t("cardnews.colorInput.eyedropper")}
               >
                 <Pipette className="w-3.5 h-3.5" />
@@ -369,12 +262,11 @@ export function ColorInput({
               onChange={(e) => setHexInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && handleHexSubmit()}
               placeholder="#000000"
-              className="min-w-0 flex-1 rounded-dpe-lg border border-[var(--color-border)] px-2 py-1.5 text-xs font-mono focus:outline-none focus:border-[var(--color-primary)]"
+              className="min-w-0 flex-1 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 py-1.5 text-xs font-mono text-dpe-ink-900 focus:outline-none focus:border-dpe-ink-400"
             />
           </div>
-        </div>,
-        document.body
-      )}
-    </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
   );
 }

package/components/detail-page/canvas-context-menu.tsx

@@ -200,6 +200,9 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
       <div
         role="menu"
         data-dp-canvas-menu
+        // 포털이 body 로 나가 편집기 뿌리 밖에 놓인다 — 딱지를 다시 달아야 소비자 앱이
+        // `[data-dpe-root]` 로 좁혀 둔 색·모서리 토큰이 이 메뉴에도 먹는다.
+        data-dpe-root=""
         style={{ left, top, width: MENU_WIDTH }}
         className="fixed z-[71] rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface py-1 shadow-lg"
       >

package/components/detail-page/detail-page-download-dialog.tsx

@@ -58,7 +58,8 @@ type ExportStoreLike = {
 };
 
 // 등록 플랫폼은 파일명 접미사에만 반영된다(상세페이지 폭은 750px 고정). 셀러가
-// 어디에 올릴지 고르며 맥락을 잡도록 노출한다.
+// 어디에 올릴지 고르며 맥락을 잡도록 노출한다. 캐러셀은 인스타그램 한 곳으로만
+// 나가므로 이 목록을 아예 안 띄운다 — `profile.registerPlatform` 이 그것을 정한다.
 const PLATFORMS = [
   { value: "naver", label: "네이버 스마트 스토어" },
   { value: "coupang", label: "쿠팡" },
@@ -220,7 +221,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
     setError(null);
     const mime = format === "png" ? "image/png" : "image/jpeg";
     const ext = format === "png" ? "png" : "jpg";
-    const base = `${fileName}-${platform}`;
+    const base = profile.registerPlatform ? `${fileName}-${platform}` : fileName;
     try {
       if (format === "psd" || format === "svg" || format === "ai") {
         // 문서 JSON 기반 내보내기. ag-psd 포함 모듈은 이 시점에만 로드한다.
@@ -384,23 +385,25 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
               </Select>
             </div>
 
-            <div className="space-y-1.5">
-              <Label className="text-xs text-dpe-ink-500">
-                {t("editor.registerPlatform")}
-              </Label>
-              <Select value={platform} onValueChange={setPlatform}>
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {PLATFORMS.map((p) => (
-                    <SelectItem key={p.value} value={p.value}>
-                      {p.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+            {profile.registerPlatform && (
+              <div className="space-y-1.5">
+                <Label className="text-xs text-dpe-ink-500">
+                  {t("editor.registerPlatform")}
+                </Label>
+                <Select value={platform} onValueChange={setPlatform}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PLATFORMS.map((p) => (
+                      <SelectItem key={p.value} value={p.value}>
+                        {p.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
 
             <div className="space-y-1.5">
               <Label className="text-xs text-dpe-ink-500">{t("editor.pageScope")}</Label>

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

@@ -1509,13 +1509,18 @@ const TextGifSection = observer(function TextGifSection({
   );
 });
 
-/** 칸 모양 선택지. 서버 `GET /images/data-gif-effects` 의 SHAPES 와 같아야 한다. */
-const CELL_SHAPES: Array<{ id: string; label: string }> = [
-  { id: "circle", label: "동그라미" },
-  { id: "square", label: "네모" },
-  { id: "rounded", label: "둥근 네모" },
-  { id: "diamond", label: "마름모" },
-  { id: "hexagon", label: "육각형" },
+/**
+ * 칸 모양 선택지. 서버 `GET /images/data-gif-effects` 의 SHAPES 와 같아야 한다.
+ *
+ * 이름은 도형 패널이 이미 번역해 둔 것을 그대로 쓴다 — 같은 도형을 두 벌 번역해 두면
+ * 한쪽만 언어를 타서 목록에 한국어와 영어가 섞인다. `square` 만 그쪽 이름이 `rect` 다.
+ */
+const CELL_SHAPES: Array<{ id: string; labelKey: string }> = [
+  { id: "circle", labelKey: "detailPage.shapes.basic.circle" },
+  { id: "square", labelKey: "detailPage.shapes.basic.rect" },
+  { id: "rounded", labelKey: "detailPage.shapes.basic.rounded" },
+  { id: "diamond", labelKey: "detailPage.shapes.basic.diamond" },
+  { id: "hexagon", labelKey: "detailPage.shapes.basic.hexagon" },
 ];
 
 /**
@@ -1756,7 +1761,7 @@ const CellGridGifSection = observer(function CellGridGifSection({
           >
             {CELL_SHAPES.map((option) => (
               <option key={option.id} value={option.id}>
-                {option.label}
+                {t(option.labelKey)}
               </option>
             ))}
           </select>

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

@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { BookmarkPlus, ImageOff, Loader2 } from "lucide-react";
 
 import { BrandPanelHeader } from "./detail-page-brand-panel-header";
@@ -38,6 +39,7 @@ export function DetailPageReferencesPanel({
   generatedId?: string;
 }) {
   const { api, brand, toast } = useDetailPageHost();
+  const { t } = useTranslation("branding");
   const queryClient = useQueryClient();
   const { activeBrand, activeBrandId, isLoading: brandsLoading } = brand.useBrandWorkspace();
   const [error, setError] = useState<string | null>(null);
@@ -62,10 +64,10 @@ export function DetailPageReferencesPanel({
     }
     return [...byGroup.entries()].map(([key, items]) => ({
       key,
-      name: items[0]?.reference_name || "상세페이지",
+      name: items[0]?.reference_name || t("detailPage.references.untitled"),
       items: [...items].sort((a, b) => a.screen_index - b.screen_index),
     }));
-  }, [listQuery.data]);
+  }, [listQuery.data, t]);
 
   const saveMutation = useMutation({
     mutationFn: async () => {
@@ -76,7 +78,7 @@ export function DetailPageReferencesPanel({
     onSuccess: async (result) => {
       setError(null);
       const screens = result.assets.filter((asset) => asset.role === "screen").length;
-      toast.success(`레퍼런스로 저장했어요 (화면 ${screens}장).`);
+      toast.success(t("detailPage.references.saved", { count: screens }));
       await queryClient.invalidateQueries({
         queryKey: [REFERENCES_QUERY_ROOT, activeBrandId],
       });
@@ -85,7 +87,7 @@ export function DetailPageReferencesPanel({
       setError(
         err instanceof Error && err.message !== "no-instance"
           ? err.message
-          : "레퍼런스로 저장하지 못했어요.",
+          : t("detailPage.references.saveFailed"),
       );
     },
   });
@@ -106,7 +108,7 @@ export function DetailPageReferencesPanel({
           ) : (
             <BookmarkPlus aria-hidden="true" size={18} />
           )}
-          <span className="text-[11px]">이 상세페이지를 레퍼런스로 저장</span>
+          <span className="text-[11px]">{t("detailPage.references.saveThis")}</span>
         </button>
       ) : null}
 
@@ -119,18 +121,15 @@ export function DetailPageReferencesPanel({
           <Loader2 aria-hidden="true" className="animate-spin" size={22} />
         </div>
       ) : !activeBrand ? (
-        <p className="text-xs text-dpe-ink-400">브랜드를 먼저 골라 주세요.</p>
+        <p className="text-xs text-dpe-ink-400">{t("detailPage.references.pickBrand")}</p>
       ) : listQuery.error ? (
         <p className="text-xs font-dpe-medium text-dpe-danger-600">
-          레퍼런스를 불러오지 못했어요.
+          {t("detailPage.references.loadFailed")}
         </p>
       ) : groups.length === 0 ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-dpe-ink-400">
           <ImageOff aria-hidden="true" size={22} />
-          <p className="text-xs">
-            아직 저장한 레퍼런스가 없어요. 마음에 드는 상세페이지를 저장해 두면 다음
-            상품에서 바로 참고할 수 있어요.
-          </p>
+          <p className="text-xs">{t("detailPage.references.empty")}</p>
         </div>
       ) : (
         <div className="space-y-4 overflow-y-auto">
@@ -138,7 +137,9 @@ export function DetailPageReferencesPanel({
             <section key={group.key}>
               <h3 className="mb-1.5 truncate text-[11px] font-dpe-medium text-dpe-ink-600">
                 {group.name}
-                <span className="ml-1 text-dpe-ink-400">{group.items.length}장</span>
+                <span className="ml-1 text-dpe-ink-400">
+                  {t("detailPage.references.screenCount", { count: group.items.length })}
+                </span>
               </h3>
               <div className="grid grid-cols-2 gap-2">
                 {group.items.map((item) => (

package/components/detail-page/edit-quota-ui.tsx

@@ -90,7 +90,7 @@ export function EditUsageBadge({
   if (unlimited) {
     return (
       <span
-        className="ml-auto text-[11px] tabular-nums text-muted-foreground"
+        className="ml-auto text-[11px] tabular-nums text-dpe-ink-500"
         title={t("detailPage.editQuota.unlimitedTitle")}
       >
         {t("detailPage.editQuota.usedUnlimited", { used })}
@@ -104,10 +104,10 @@ export function EditUsageBadge({
       className={
         "ml-auto text-[11px] tabular-nums " +
         (remaining === 0
-          ? "text-destructive"
+          ? "text-dpe-danger-600"
           : warn
             ? "text-dpe-warn-500"
-            : "text-muted-foreground")
+            : "text-dpe-ink-500")
       }
       title={t("detailPage.editQuota.remainingTitle", { remaining })}
     >
@@ -130,17 +130,17 @@ export function EditQuotaBlock({
       : t("detailPage.editQuota.textEdit");
   return (
     <div className="flex flex-col items-center gap-2 px-4 py-4 text-center">
-      <p className="text-[13px] font-dpe-medium text-foreground">
+      <p className="text-[13px] font-dpe-medium text-dpe-ink-900">
         {t("detailPage.editQuota.quotaExhausted", { label })}
       </p>
-      <p className="text-[11px] leading-4 text-muted-foreground">
+      <p className="text-[11px] leading-4 text-dpe-ink-500">
         {t("detailPage.editQuota.quotaHint")}
       </p>
       <button
         type="button"
         onClick={onBuyMore}
         disabled={!onBuyMore}
-        className="mt-1 inline-flex items-center gap-1.5 rounded-dpe-lg bg-primary px-3 py-1.5 text-xs font-dpe-medium text-primary-foreground disabled:opacity-40"
+        className="mt-1 inline-flex items-center gap-1.5 rounded-dpe-lg bg-dpe-ink-900 px-3 py-1.5 text-xs font-dpe-medium text-dpe-on-accent disabled:opacity-40"
       >
         <Sparkles size={13} />
         {t("detailPage.editQuota.buyCredits")}

package/components/detail-page/generation-progress-fill.tsx

@@ -38,18 +38,18 @@ export function progressPercent(progress: number): number {
 
 /**
  * 밝은 배경 패널(카피·SVG 프롬프트 편집)의 하단에 얹는 얇은 프로그레스 라인.
- * 테마 토큰(primary) 기반이라 라이트/다크 모두 자연스럽다. 부모는 `relative`여야
- * 하며, 이 요소는 컨테이너 하단에 절대배치된다.
+ * 색은 AI 표식 토큰(`dpe-ai`)이다 — 이 선이 도는 동안 일어나는 일이 생성이기
+ * 때문이다. 부모는 `relative`여야 하며, 이 요소는 컨테이너 하단에 절대배치된다.
  */
 export function GenerationProgressLine({ progress }: { progress: number }) {
   const pct = progressPercent(progress);
   return (
     <span
       aria-hidden="true"
-      className="pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-primary/15"
+      className="pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-dpe-ai/15"
     >
       <span
-        className="block h-full bg-primary"
+        className="block h-full bg-dpe-ai"
         style={{ width: `${pct}%`, transition: "width 200ms ease-out" }}
       />
     </span>

package/components/detail-page/group-prompt-edit-panel.tsx

@@ -106,10 +106,10 @@ export function GroupPromptEditPanel({
   const badgeLimit = hasText ? textLimit : svgLimit;
 
   return (
-    <div className="flex flex-col overflow-hidden rounded-dpe-xl border border-border bg-card">
-      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
-        <Sparkles size={13} className="text-primary" />
-        <span className="text-xs font-dpe-medium text-foreground">프롬프트로 편집</span>
+    <div className="flex flex-col overflow-hidden rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface">
+      <div className="flex items-center gap-1.5 border-b border-dpe-ink-200 px-3 py-2">
+        <Sparkles size={13} className="text-dpe-ai" />
+        <span className="text-xs font-dpe-medium text-dpe-ink-900">프롬프트로 편집</span>
         {unlimited || badgeLimit > 0 ? (
           <EditUsageBadge used={badgeUsed} limit={badgeLimit} unlimited={unlimited} />
         ) : null}
@@ -132,13 +132,13 @@ export function GroupPromptEditPanel({
               busy ? "수정 중…" : '어떻게 바꿀까요? (예: "더 힘있게", "톤을 통일해서")'
             }
             disabled={busy}
-            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-dpe-ink-900 outline-none placeholder:text-dpe-ink-400 disabled:opacity-60"
           />
           <button
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-dpe-ink-900 text-dpe-on-accent disabled:opacity-40"
             aria-label="프롬프트로 수정"
           >
             {busy ? (

package/components/detail-page/prompt-edit-panel.tsx

@@ -97,10 +97,10 @@ export function PromptEditPanel({
   }, [api, toast, input, busy, blocked, generatedId, slotRole, currentText, maxLength, renderKind, onApplied, onUsage, t]);
 
   return (
-    <div className="relative flex flex-col overflow-hidden rounded-dpe-xl border border-border bg-card">
-      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
-        <Sparkles size={13} className="text-primary" />
-        <span className="text-xs font-dpe-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
+    <div className="relative flex flex-col overflow-hidden rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface">
+      <div className="flex items-center gap-1.5 border-b border-dpe-ink-200 px-3 py-2">
+        <Sparkles size={13} className="text-dpe-ai" />
+        <span className="text-xs font-dpe-medium text-dpe-ink-900">{t("detailPage.promptEdit.header")}</span>
         {unlimited || editLimit > 0 ? (
           <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
         ) : null}
@@ -123,13 +123,13 @@ export function PromptEditPanel({
               busy ? t("detailPage.promptEdit.editing") : t("detailPage.promptEdit.textPlaceholder")
             }
             disabled={busy}
-            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-dpe-ink-900 outline-none placeholder:text-dpe-ink-400 disabled:opacity-60"
           />
           <button
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-dpe-ink-900 text-dpe-on-accent disabled:opacity-40"
             aria-label={t("detailPage.promptEdit.send")}
           >
             {busy ? (

package/components/detail-page/spec-prompt-edit-panel.tsx

@@ -122,10 +122,10 @@ export function SpecPromptEditPanel({
   ]);
 
   return (
-    <div className="relative flex flex-col overflow-hidden rounded-dpe-xl border border-border bg-card">
-      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
-        <Sparkles size={13} className="text-primary" />
-        <span className="text-xs font-dpe-medium text-foreground">
+    <div className="relative flex flex-col overflow-hidden rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface">
+      <div className="flex items-center gap-1.5 border-b border-dpe-ink-200 px-3 py-2">
+        <Sparkles size={13} className="text-dpe-ai" />
+        <span className="text-xs font-dpe-medium text-dpe-ink-900">
           {t("detailPage.promptEdit.header")}
         </span>
         {unlimited || editLimit > 0 ? (
@@ -152,13 +152,13 @@ export function SpecPromptEditPanel({
                 : t(`detailPage.specPromptEdit.placeholder.${specKind}`)
             }
             disabled={busy}
-            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-dpe-ink-900 outline-none placeholder:text-dpe-ink-400 disabled:opacity-60"
           />
           <button
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-dpe-ink-900 text-dpe-on-accent disabled:opacity-40"
             aria-label={t("detailPage.promptEdit.send")}
           >
             {busy ? (
@@ -170,7 +170,7 @@ export function SpecPromptEditPanel({
         </div>
       )}
       {busy ? <GenerationProgressLine progress={progress} /> : null}
-      <p className="px-3 pb-2 text-[11px] leading-relaxed text-muted-foreground">
+      <p className="px-3 pb-2 text-[11px] leading-relaxed text-dpe-ink-500">
         {t("detailPage.specPromptEdit.hint")}
       </p>
     </div>

package/components/detail-page/svg-prompt-edit-panel.tsx

@@ -90,10 +90,10 @@ export function SvgPromptEditPanel({
   }, [api, toast, input, busy, blocked, generatedId, slotRole, currentSvg, onApplied, onUsage, t]);
 
   return (
-    <div className="relative flex flex-col overflow-hidden rounded-dpe-xl border border-border bg-card">
-      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
-        <Sparkles size={13} className="text-primary" />
-        <span className="text-xs font-dpe-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
+    <div className="relative flex flex-col overflow-hidden rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface">
+      <div className="flex items-center gap-1.5 border-b border-dpe-ink-200 px-3 py-2">
+        <Sparkles size={13} className="text-dpe-ai" />
+        <span className="text-xs font-dpe-medium text-dpe-ink-900">{t("detailPage.promptEdit.header")}</span>
         {unlimited || editLimit > 0 ? (
           <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
         ) : null}
@@ -116,13 +116,13 @@ export function SvgPromptEditPanel({
               busy ? t("detailPage.promptEdit.editing") : t("detailPage.svgPromptEdit.placeholder")
             }
             disabled={busy}
-            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-dpe-ink-900 outline-none placeholder:text-dpe-ink-400 disabled:opacity-60"
           />
           <button
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-dpe-ink-900 text-dpe-on-accent disabled:opacity-40"
             aria-label={t("detailPage.promptEdit.send")}
           >
             {busy ? (

package/components/ui/button.tsx

@@ -1,3 +1,16 @@
+/**
+ * 편집기 버튼.
+ *
+ * 색은 **편집기 토큰(`dpe-*`)만** 쓴다. `bg-primary` · `text-primary-foreground` 는
+ * 소비자 앱의 CSS 변수를 읽는 이름이고, leviosa-agency 는 `--color-primary-foreground`
+ * 를 안 둔다. 그래서 글자색 클래스가 한 줄도 안 구워졌고, 글자가 본문
+ * (`--color-fg: #1a1a1a`)을 물려받아 호출부가 덮은 배경(`bg-dpe-ink-900`, 같은 앱에서
+ * `#1a1a1a`)과 정확히 같은 값이 됐다 — 다운로드 팝오버의 저장 버튼이 검은 판때기로
+ * 보인 이유다.
+ *
+ * 테두리도 같다. 색 없는 `border` 는 currentColor 라, 글자색이 어두우면 테두리가
+ * 통째로 먹으로 나온다. 색을 쓰는 자리마다 토큰을 적는다.
+ */
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
@@ -5,20 +18,20 @@ import { Slot } from "radix-ui"
 import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-dpe-md text-sm font-dpe-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-dpe-md text-sm font-dpe-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-dpe-ink-400 focus-visible:ring-dpe-ink-300/50 focus-visible:ring-[3px] aria-invalid:ring-dpe-danger-500/20 dark:aria-invalid:ring-dpe-danger-500/40 aria-invalid:border-dpe-danger-500",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-dpe-ink-900 text-dpe-on-accent hover:bg-dpe-ink-900/90",
         destructive:
-          "bg-destructive text-dpe-on-accent hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-dpe-danger-500 text-dpe-on-accent hover:bg-dpe-danger-500/90 focus-visible:ring-dpe-danger-500/20 dark:focus-visible:ring-dpe-danger-500/40 dark:bg-dpe-danger-500/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-dpe-ink-200 bg-dpe-surface text-dpe-ink-900 shadow-xs hover:bg-dpe-ink-100 dark:bg-dpe-ink-100/30 dark:hover:bg-dpe-ink-100/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-dpe-ink-100 text-dpe-ink-900 hover:bg-dpe-ink-100/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          "hover:bg-dpe-ink-100 hover:text-dpe-ink-900 dark:hover:bg-dpe-ink-100/50",
+        link: "text-dpe-ink-900 underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",

package/components/ui/dialog.tsx

@@ -1,5 +1,10 @@
 "use client";
 
+/**
+ * 편집기 모달. 포털이 body 로 나가므로 `data-dpe-root` 를 다시 달고(아래), 판의
+ * 글자색과 테두리색은 물려받지 않고 적는다 — 색 없는 `border` 는 currentColor 다.
+ * 이유는 select.tsx 주석에 있다.
+ */
 import * as React from "react";
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
@@ -63,8 +68,9 @@ function DialogContent({
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-dpe-root=""
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[115] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-dpe-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-dpe-surface text-dpe-ink-900 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[115] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-dpe-lg border border-dpe-ink-200 p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className,
         )}
         onOpenAutoFocus={(event) => {
@@ -79,7 +85,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-3 right-3 flex size-11 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 hover:bg-accent active:bg-accent focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
+            className="ring-offset-dpe-surface focus:ring-dpe-ink-300 data-[state=open]:bg-dpe-ink-100 data-[state=open]:text-dpe-ink-500 absolute top-3 right-3 flex size-11 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 hover:bg-dpe-ink-100 active:bg-dpe-ink-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -147,7 +153,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-dpe-ink-500 text-sm", className)}
       {...props}
     />
   );

package/components/ui/select.tsx

@@ -1,5 +1,18 @@
 "use client"
 
+/**
+ * Radix Select 위에 얹은 드롭다운.
+ *
+ * 색은 **편집기 토큰(`dpe-*`)만** 쓴다. shadcn 원본이 달고 온 `bg-popover` ·
+ * `text-popover-foreground` · `border-input` · `bg-accent` · `text-muted-foreground`
+ * 는 전부 소비자 앱의 팔레트를 읽는 이름이라, 이 패키지가 그 값을 정할 방법이 없다.
+ * leviosa-agency 는 `--color-popover` 를 아예 안 두므로 그 유틸리티가 한 줄도 안
+ * 구워졌고, 목록 판이 **투명해져** 뒤의 라벨과 글자가 겹쳐 보였다.
+ *
+ * 글자색은 물려받지 않고 판마다 적는다(`text-dpe-ink-900`). 이 버그가 아픈 이유가
+ * 정확히 "안 적으면 바깥 것을 물려받는다" 였다 — 판은 토큰으로 칠하면서 글자를
+ * 물려받게 두면 갈아입힌 앱에서 같은 자리에 같은 일이 다시 난다.
+ */
 import * as React from "react"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
@@ -37,7 +50,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-dpe-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-dpe-ink-200 text-dpe-ink-900 data-[placeholder]:text-dpe-ink-400 [&_svg:not([class*='text-'])]:text-dpe-ink-500 focus-visible:border-dpe-ink-400 focus-visible:ring-dpe-ink-300/50 aria-invalid:ring-dpe-danger-500/20 dark:aria-invalid:ring-dpe-danger-500/40 aria-invalid:border-dpe-danger-500 dark:bg-dpe-ink-100/30 dark:hover:bg-dpe-ink-100/50 flex w-fit items-center justify-between gap-2 rounded-dpe-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -53,16 +66,21 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position = "item-aligned",
-  align = "center",
+  // 트리거 **아래**에 붙인다. Radix 기본값(`item-aligned`)은 고른 항목이 트리거를 덮게
+  // 얹어서, 목록이 트리거 위로 겹쳐 뜬다.
+  position = "popper",
+  align = "start",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
+        // 포털이 body 로 나가 편집기 뿌리 밖에 선다 — 딱지를 다시 달아야 소비자 앱이
+        // `[data-dpe-root]` 로 좁혀 둔 토큰이 이 목록에도 먹는다.
+        data-dpe-root=""
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-dpe-md border shadow-md",
+          "bg-dpe-surface text-dpe-ink-900 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-dpe-md border border-dpe-ink-200 shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -94,7 +112,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("text-dpe-ink-500 px-2 py-1.5 text-xs", className)}
       {...props}
     />
   )
@@ -109,7 +127,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-dpe-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "text-dpe-ink-900 focus:bg-dpe-ink-100 [&_svg:not([class*='text-'])]:text-dpe-ink-500 relative flex w-full cursor-default items-center gap-2 rounded-dpe-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -134,7 +152,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("bg-dpe-ink-200 pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
   )

package/components/ui/slider.tsx

@@ -1,5 +1,10 @@
 "use client"
 
+/**
+ * 해상도 배율 같은 값 슬라이더. 궤도·채움·손잡이 전부 편집기 토큰이다 — 원본의
+ * `bg-muted` · `bg-primary` 는 소비자 앱의 이름이라, 그 앱이 안 두면 채운 구간이
+ * 통째로 안 보인다(select.tsx 주석 참고).
+ */
 import * as React from "react"
 import { Slider as SliderPrimitive } from "radix-ui"
 
@@ -39,13 +44,13 @@ function Slider({
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+          "bg-dpe-ink-200 relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
         )}
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "bg-dpe-ink-900 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
           )}
         />
       </SliderPrimitive.Track>
@@ -53,7 +58,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-dpe-surface shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          className="border-dpe-ink-900 ring-dpe-ink-300/50 block size-4 shrink-0 rounded-full border bg-dpe-surface shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>

package/components/ui/switch.tsx

@@ -1,5 +1,12 @@
 "use client"
 
+/**
+ * 켬/끔 스위치. 켠 색은 먹(`dpe-ink-900`), 끈 색은 `dpe-ink-300` 이다.
+ *
+ * 끈 색이 `ink-100` 이면 흰 패널(`dpe-surface`) 위에서 궤도가 거의 안 보인다 —
+ * 손잡이도 흰색이고 테두리는 투명이라, 꺼진 스위치가 통째로 사라진다. 한 단계
+ * 내려서 꺼짐이 꺼짐으로 읽히게 한다.
+ */
 import * as React from "react"
 import { Switch as SwitchPrimitive } from "radix-ui"
 
@@ -17,7 +24,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        "peer data-[state=checked]:bg-dpe-ink-900 data-[state=unchecked]:bg-dpe-ink-300 focus-visible:border-dpe-ink-400 focus-visible:ring-dpe-ink-300/50 dark:data-[state=unchecked]:bg-dpe-ink-100/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
         className
       )}
       {...props}
@@ -25,7 +32,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "bg-dpe-surface dark:data-[state=unchecked]:bg-dpe-ink-900 dark:data-[state=checked]:bg-dpe-on-accent pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
         )}
       />
     </SwitchPrimitive.Root>

package/components/ui/tooltip.tsx

@@ -1,5 +1,12 @@
 "use client"
 
+/**
+ * 말풍선 도움말. 어두운 판(`dpe-ink-900`) 위 `dpe-on-accent` 글자다.
+ *
+ * `text-background` 는 소비자 앱의 이름이라, 그 앱이 안 두면 클래스가 아예 안 구워지고
+ * 글자색이 물려받은 값(먹)으로 남는다 — 어두운 판 위 어두운 글자. 판만 토큰으로
+ * 옮기고 글자를 안 옮기면 오히려 원본보다 안 보인다.
+ */
 import * as React from "react"
 import { Tooltip as TooltipPrimitive } from "radix-ui"
 
@@ -39,16 +46,17 @@ function TooltipContent({
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
+        data-dpe-root=""
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-dpe-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-dpe-md bg-dpe-ink-900 px-3 py-1.5 text-xs text-balance text-dpe-on-accent fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-dpe-ink-900 fill-dpe-ink-900" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

package/i18n/en.json

@@ -888,6 +888,16 @@
         "texts": "Rewrite every text in this group with one prompt.",
         "shapes": "Redraw every shape in this group with one prompt.",
         "both": "Rewrite the texts and redraw the shapes in this group with one prompt."
+      },
+      "references": {
+        "untitled": "Detail page",
+        "saveThis": "Save this detail page as a reference",
+        "saved": "Saved as a reference ({{count}} screens).",
+        "saveFailed": "Could not save it as a reference.",
+        "pickBrand": "Pick a brand first.",
+        "loadFailed": "Could not load your references.",
+        "empty": "No saved references yet. Save a detail page you like and it is ready to reference on your next product.",
+        "screenCount": "{{count}} screens"
       }
     }
   },

package/i18n/ko.json

@@ -888,6 +888,16 @@
         "texts": "그룹 안 텍스트를 한 번에 프롬프트로 다시 씁니다.",
         "shapes": "그룹 안 도형을 프롬프트로 함께 수정합니다.",
         "both": "그룹 안 텍스트와 도형을 한 번에 프롬프트로 수정합니다."
+      },
+      "references": {
+        "untitled": "상세페이지",
+        "saveThis": "이 상세페이지를 레퍼런스로 저장",
+        "saved": "레퍼런스로 저장했어요 (화면 {{count}}장).",
+        "saveFailed": "레퍼런스로 저장하지 못했어요.",
+        "pickBrand": "브랜드를 먼저 골라 주세요.",
+        "loadFailed": "레퍼런스를 불러오지 못했어요.",
+        "empty": "아직 저장한 레퍼런스가 없어요. 마음에 드는 상세페이지를 저장해 두면 다음 상품에서 바로 참고할 수 있어요.",
+        "screenCount": "{{count}}장"
       }
     }
   },

package/lib/detail-page/editor-profile.ts

@@ -10,6 +10,13 @@ export type DetailPageEditorProfile = {
   };
   maxPages: number;
   exports: readonly DetailPageEditorFormat[];
+  /**
+   * 다운로드 팝오버에 "등록 플랫폼"을 물어볼지. 그 답은 파일명 접미사에만 쓰이고,
+   * 셀러가 상품을 어디에 올릴지 고르며 맥락을 잡으라고 있는 것이다. 캐러셀은
+   * 인스타그램 한 곳으로 나가므로 물어볼 것이 없다 — 고를 수 없는 선택지를
+   * 남겨 두면 접미사만 거짓말을 한다(`-naver` 붙은 인스타 이미지).
+   */
+  registerPlatform: boolean;
   wording: "section" | "plate";
 };
 
@@ -17,13 +24,19 @@ const DETAIL_PAGE_PROFILE: DetailPageEditorProfile = {
   page: { width: "document", height: "auto", fixed: false },
   maxPages: Number.POSITIVE_INFINITY,
   exports: ["png", "jpeg", "psd", "ai", "svg"],
+  registerPlatform: true,
   wording: "section",
 };
 
 const CAROUSEL_PROFILE: DetailPageEditorProfile = {
   page: { width: 1080, height: 1350, fixed: true },
   maxPages: 10,
-  exports: ["jpeg"],
+  // 상세페이지와 같은 다섯 가지다. 한때 JPG 하나로 좁혀 뒀던 것은 인스타그램이
+  // JPG 로 받는다는 이유였는데, 내보낸 파일이 곧장 업로드로만 가는 것이 아니다 —
+  // 투명 배경을 살리려면 PNG 가, 다른 도구로 넘겨 손보려면 PSD·AI·SVG 가 필요하다.
+  // 첫 항목이 기본값이므로 JPG 를 앞에 둬서 지금까지의 기본 동작은 그대로 둔다.
+  exports: ["jpeg", "png", "psd", "ai", "svg"],
+  registerPlatform: false,
   wording: "plate",
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.11.8",
+  "version": "0.12.1",
   "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",
@@ -67,7 +67,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "0.4.0",
+    "@leviosa-ai/canvas": "0.5.0",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",