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

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-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/ui/button.tsx

@@ -5,20 +5,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 bg-dpe-surface shadow-xs hover:bg-dpe-ink-100 hover:text-dpe-ink-900 dark:bg-dpe-ink-100/30 dark:border-dpe-ink-200 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

@@ -63,8 +63,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 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",
           className,
         )}
         onOpenAutoFocus={(event) => {
@@ -79,7 +80,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 +148,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

@@ -37,7 +37,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 data-[placeholder]:text-dpe-ink-500 [&_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 +53,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 +99,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 +114,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",
+        "focus:bg-dpe-ink-100 focus:text-dpe-ink-900 [&_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 +139,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

@@ -39,13 +39,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 +53,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

@@ -17,7 +17,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-100 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 +25,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

@@ -39,16 +39,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-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",
           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/package.json

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