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

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/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"
@@ -13,7 +26,7 @@ const buttonVariants = cva(
         destructive:
           "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-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",
+          "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-dpe-ink-100 text-dpe-ink-900 hover:bg-dpe-ink-100/80",
         ghost:

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";
@@ -65,7 +70,7 @@ function DialogContent({
         data-slot="dialog-content"
         data-dpe-root=""
         className={cn(
-          "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",
+          "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) => {

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-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",
+        "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}
@@ -114,7 +127,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "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",
+        "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}

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"
 

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-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",
+        "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}

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"
 
@@ -43,7 +50,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "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",
+          "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}

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.12.0",
+  "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",