@leviosa-ai/detail-page-editor 0.16.1 → 0.17.0

package/LICENSE

@@ -0,0 +1,83 @@
+Copyright © 2026 주식회사레비오사에이아이. All rights reserved.
+
+PROPRIETARY SOFTWARE — SOURCE VISIBLE; NOT OPEN SOURCE
+
+This notice applies to the software, source code, documentation, and other
+materials distributed in this repository or in packages published from it
+(collectively, the "Software"), except for Third-Party Materials as described
+below.
+
+NO GENERAL LICENSE
+
+The Software may be publicly accessible through services such as GitHub and
+npm for distribution and operational convenience. Public accessibility does
+not place the Software in the public domain and does not, by itself, grant a
+license under the copyright or other intellectual property rights of
+주식회사레비오사에이아이 ("Leviosa").
+
+Except:
+
+(a) as expressly authorized by a separate written agreement authorized by
+    Leviosa;
+
+(b) for rights granted under the applicable terms of GitHub, npm, or another
+    distribution platform, solely to the extent and for the purposes provided
+    by those terms; or
+
+(c) to the extent applicable law permits an act notwithstanding this notice,
+
+no license or permission is granted, expressly, implicitly, by estoppel, or
+otherwise, to reproduce, copy, modify, adapt, translate, merge, prepare
+derivative works from, publish, distribute, sublicense, sell, transmit,
+publicly display, publicly perform, or incorporate the Software, in whole or
+in part, into any other product or service.
+
+Leviosa does not intend public availability of the Software, documentation,
+installation instructions, package metadata, or other related materials to
+constitute an implied license beyond the rights expressly identified above.
+
+THIRD-PARTY MATERIALS
+
+The distribution may contain or bundle software, fonts, assets, or other
+materials owned by third parties ("Third-Party Materials"). Third-Party
+Materials are excluded from the proprietary license restrictions in this
+notice to the extent they are governed by their own licenses.
+
+Third-Party Materials remain subject to their applicable copyright notices,
+license terms, and other accompanying notices. Nothing in this notice
+restricts any right granted under an applicable third-party license. In the
+event of a conflict between this notice and an applicable third-party license
+with respect to Third-Party Materials, the third-party license controls with
+respect to those materials.
+
+NO WARRANTY
+
+TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, AND EXCEPT AS EXPRESSLY
+PROVIDED IN A SEPARATE WRITTEN AGREEMENT, THE SOFTWARE IS PROVIDED "AS IS"
+AND "AS AVAILABLE," WITHOUT WARRANTY OF ANY KIND, EXPRESS, IMPLIED, OR
+STATUTORY, INCLUDING WITHOUT LIMITATION WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, TITLE, OR NON-INFRINGEMENT.
+
+LIMITATION OF LIABILITY
+
+TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, AND EXCEPT AS EXPRESSLY
+PROVIDED IN A SEPARATE WRITTEN AGREEMENT, LEVIOSA SHALL NOT BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, CONSEQUENTIAL, OR
+OTHER DAMAGES OR LIABILITIES ARISING FROM OR IN CONNECTION WITH THE
+SOFTWARE OR ITS USE.
+
+NOTHING IN THIS NOTICE EXCLUDES OR LIMITS ANY LIABILITY TO THE EXTENT THAT
+SUCH LIABILITY CANNOT LAWFULLY BE EXCLUDED OR LIMITED.
+
+TRADEMARKS
+
+No license or other right to use any trademark, service mark, trade name,
+logo, or other source identifier of Leviosa is granted by this notice.
+
+LICENSING INQUIRIES
+
+For permission to use or license the Software, contact:
+leviosaai2025@leviosa.ai.kr
+
+A Korean convenience translation is provided in LICENSE.ko.md. The English
+text of this notice controls.

package/LICENSE.ko.md

@@ -0,0 +1,71 @@
+> 이 문서는 `LICENSE` 의 참고용 한국어 번역이다. 내용이 다르면 영문 `LICENSE` 가 우선한다.
+
+저작권 © 2026 주식회사레비오사에이아이. 모든 권리 보유.
+
+독점 소프트웨어 — 소스 열람 가능; 오픈소스 아님
+
+본 고지는 아래에서 정하는 제3자 자료를 제외하고, 본 저장소 또는 본 저장소에서
+배포되는 패키지에 포함된 소프트웨어, 소스 코드, 문서 및 그 밖의 자료(이하 통칭하여
+"소프트웨어")에 적용됩니다.
+
+## 일반적 라이선스의 부여 없음
+
+소프트웨어는 배포 및 운영상의 편의를 위해 GitHub, npm 등의 서비스를 통하여
+공개적으로 접근 가능할 수 있습니다. 이러한 공개적 접근 가능성은 소프트웨어를 퍼블릭
+도메인에 귀속시키지 않으며, 그 자체로 주식회사레비오사에이아이(이하 "Leviosa")의
+저작권 또는 그 밖의 지식재산권에 관한 라이선스를 부여하지 않습니다.
+
+다음 각 호의 경우를 제외하고,
+
+(a) Leviosa가 승인한 별도의 서면 계약에 따라 명시적으로 허용된 경우,
+
+(b) GitHub, npm 또는 그 밖의 배포 플랫폼의 적용 가능한 이용약관에 따라 부여되는
+    권리의 범위 및 목적 내에서 이용하는 경우, 또는
+
+(c) 본 고지에도 불구하고 적용 법률에 따라 허용되는 경우,
+
+소프트웨어의 전부 또는 일부를 복제, 복사, 수정, 개작, 번역, 병합하거나, 2차적
+저작물을 작성하거나, 출판, 배포, 재라이선스, 판매, 송신, 공개 전시, 공개 실행하거나
+다른 제품 또는 서비스에 포함할 수 있는 어떠한 명시적 또는 묵시적 라이선스나 허락도
+부여되지 않습니다. 금반언 등에 의한 라이선스 역시 부여되지 않습니다.
+
+Leviosa는 소프트웨어의 공개적 접근 가능성, 문서, 설치 방법, 패키지 메타데이터 또는
+관련 자료가 위에서 명시적으로 인정한 권리를 초과하는 묵시적 라이선스를 구성하도록
+의도하지 않습니다.
+
+## 제3자 자료
+
+본 배포물에는 제3자가 소유하는 소프트웨어, 폰트, 자산 또는 그 밖의 자료(이하 "제3자
+자료")가 포함되거나 번들될 수 있습니다. 제3자 자료가 자체 라이선스의 적용을 받는
+범위에서는 본 고지의 독점 소프트웨어 제한사항이 해당 제3자 자료에 적용되지 않습니다.
+
+제3자 자료에는 해당 제3자의 저작권 고지, 라이선스 조건 및 그 밖의 관련 고지가
+적용됩니다. 본 고지의 어떠한 내용도 해당 제3자 라이선스가 부여하는 권리를 제한하지
+않습니다. 제3자 자료에 관하여 본 고지와 해당 제3자 라이선스가 충돌하는 경우에는 해당
+제3자 자료에 한하여 제3자 라이선스가 우선합니다.
+
+## 보증의 부인
+
+적용 법률이 허용하는 최대 범위에서, 그리고 별도의 서면 계약에서 명시적으로 달리 정한
+경우를 제외하고, 소프트웨어는 상품성, 특정 목적에의 적합성, 권원 및 비침해성에 관한
+보증을 포함하여 명시적, 묵시적 또는 법정의 어떠한 보증도 없이 "있는 그대로(AS IS)" 및
+"이용 가능한 상태로(AS AVAILABLE)" 제공됩니다.
+
+## 책임의 제한
+
+적용 법률이 허용하는 최대 범위에서, 그리고 별도의 서면 계약에서 명시적으로 달리 정한
+경우를 제외하고, Leviosa는 소프트웨어 또는 그 사용으로부터 발생하거나 이와 관련하여
+발생하는 직접, 간접, 부수적, 특별, 징벌적, 결과적 손해 또는 그 밖의 손해나 책임에
+대하여 책임을 부담하지 않습니다.
+
+본 고지의 어떠한 내용도 적용 법률상 배제하거나 제한할 수 없는 책임을 배제하거나
+제한하지 않습니다.
+
+## 상표
+
+본 고지는 Leviosa의 상표, 서비스표, 상호, 로고 또는 그 밖의 출처표시에 관한 어떠한
+라이선스나 사용권도 부여하지 않습니다.
+
+## 라이선스 문의
+
+소프트웨어의 사용 또는 라이선스 허락에 관한 문의: leviosaai2025@leviosa.ai.kr

package/components/cardnews/color-input.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import { Pipette } from "lucide-react";

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

@@ -1,6 +1,7 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
-import { useCallback, useMemo, useState, type ChangeEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
 import { ImagePlus, Info, Loader2, Pencil, Sparkles, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -69,6 +70,8 @@ export type GenerateImageInput = {
    * 막혀도 이미지는 만들어졌는데 브랜드 버킷엔 아무것도 안 남았다.
    */
   brandId?: string;
+  /** 사용자가 취소하면 끊긴다. 호스트는 요청에 그대로 넘기면 된다. */
+  signal?: AbortSignal;
 };
 
 export type GenerateImageFn = (input: GenerateImageInput) => Promise<string[]>;
@@ -80,6 +83,8 @@ export type GenerateGifInput = {
   transparent: boolean;
   /** 이미지와 같다. 저장 위치는 start 시점에 확정된다. */
   brandId?: string;
+  /** 사용자가 취소하면 끊긴다. */
+  signal?: AbortSignal;
 };
 
 export type GenerateGifFn = (input: GenerateGifInput) => Promise<string[]>;
@@ -298,7 +303,10 @@ export function AiGeneratePanel({
   onBuyCredits,
 }: AiGeneratePanelProps) {
   const { t } = useTranslation("branding");
-  const { brand } = useDetailPageHost();
+  const { brand, api } = useDetailPageHost();
+  // 진행 중 생성의 취소 손잡이. 패널이 닫혀도 끊는다.
+  const abortRef = useRef<AbortController | null>(null);
+  useEffect(() => () => abortRef.current?.abort(), []);
   const [mode, setMode] = useState<"image" | "gif">(
     // GIF 생성이 배선된 경우에만 gif 초기값을 존중(미배선이면 토글이 없어 갇힘).
     initialMode === "gif" && onGenerateGif ? "gif" : "image",
@@ -356,7 +364,9 @@ export function AiGeneratePanel({
       try {
         setRefUrl(await uploadFile(file));
       } catch (err) {
-        setError(err instanceof Error ? err.message : t("detailPage.aiGenerate.uploadFailed"));
+        // 원문은 콘솔로만. 서버·네트워크 문구를 그대로 띄우면 번역도 안 되고 읽히지도 않는다.
+        console.error("Reference upload failed", err);
+        setError(t("detailPage.aiGenerate.uploadFailed"));
       } finally {
         setRefUploading(false);
       }
@@ -383,6 +393,9 @@ export function AiGeneratePanel({
     setLoading(true);
     setError(null);
     setInsufficient(false);
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const { signal } = controller;
     try {
       const referenceImages = refUrl ? [refUrl] : [];
       const brandId = brand.getStoredActiveBrandId() ?? undefined;
@@ -392,6 +405,7 @@ export function AiGeneratePanel({
             referenceImages,
             transparent,
             brandId,
+            signal,
           })
         : await onGenerate!({
             prompt: finalPrompt,
@@ -400,7 +414,10 @@ export function AiGeneratePanel({
             tier: activeTier,
             brandId,
             annotatedImage,
+            signal,
           });
+      // 취소했으면 늦게 온 결과를 넣지 않는다(호스트가 신호를 무시했어도).
+      if (signal.aborted) return;
       const url = urls[0];
       if (url) {
         // GIF는 항상 페이지에 삽입(우측 이미지 교체 대상 아님) + 애니 태깅.
@@ -414,18 +431,28 @@ export function AiGeneratePanel({
             : t("detailPage.aiGenerate.noImage"),
         );
     } catch (err) {
-      // 생성기가 크레딧 부족을 알리면(422/402 등) 별도로 표기해 CTA를 띄운다.
-      const maybe = err as { insufficientCredits?: boolean };
-      if (maybe && maybe.insufficientCredits) {
+      if (signal.aborted) return; // 사용자가 끊었다 — 오류가 아니다.
+      // 크레딧 부족은 호스트 판별기(402 본문)로 먼저 가리고, 생성기가 직접 붙인
+      // `insufficientCredits` 표시도 계속 받는다(우측 편집 경로가 그렇게 던진다).
+      const marked = (err as { insufficientCredits?: boolean } | null)?.insufficientCredits;
+      if (api.asInsufficientCreditsError(err) || marked) {
         setInsufficient(true);
         setError(t("detailPage.aiGenerate.insufficientCredits"));
       } else {
-        setError(err instanceof Error ? err.message : t("detailPage.aiGenerate.generateFailed"));
+        console.error("AI generation failed", err);
+        setError(t("detailPage.aiGenerate.generateFailed"));
       }
     } finally {
-      setLoading(false);
+      if (abortRef.current === controller) abortRef.current = null;
+      if (!signal.aborted) setLoading(false);
     }
-  }, [prompt, loading, blocked, isGif, gifMissingRef, transparent, onGenerate, onGenerateGif, refUrl, store, onResult, activeTier, t]);
+  }, [prompt, loading, blocked, isGif, gifMissingRef, transparent, onGenerate, onGenerateGif, refUrl, store, onResult, activeTier, t, api, brand]);
+
+  const cancelGenerate = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setLoading(false);
+  }, []);
 
   const handleGenerate = useCallback(() => {
     void runGenerate();
@@ -759,6 +786,15 @@ export function AiGeneratePanel({
           ) : null}
         </span>
       </button>
+      {loading ? (
+        <button
+          type="button"
+          onClick={cancelGenerate}
+          className="h-8 rounded-le-md border border-le-ink-200 text-xs font-le-medium text-le-ink-600 hover:bg-le-ink-50"
+        >
+          {t("detailPage.aiGenerate.cancel")}
+        </button>
+      ) : null}
 
       <AnnotationDialog
         open={annotateOpen}

package/components/detail-page/annotation-canvas.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import {
@@ -18,6 +19,7 @@ import {
   Type,
   Undo2,
 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 /**
  * 그림으로 가리키는 편집 — 이미지·화면 위에 덧그리는 주석 캔버스.
@@ -119,7 +121,7 @@ function loadImage(src: string): Promise<HTMLImageElement> {
     // 동일 출처 프록시를 타는 경우에도 캔버스 오염을 막으려면 명시해야 한다.
     img.crossOrigin = "anonymous";
     img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error("이미지를 불러오지 못했습니다."));
+    img.onerror = () => reject(new Error(`annotation image failed to load: ${src.slice(0, 64)}`));
     img.src = src;
   });
 }
@@ -261,6 +263,10 @@ export const AnnotationCanvas = forwardRef<
   { imageUrl, maxEdge = 2048, onChange, labels },
   ref,
 ) {
+  const { t } = useTranslation("branding");
+  // 라벨을 안 넘겨도 번역된 기본값이 나온다. 넘기면 그것이 이긴다.
+  const label = (key: Tool | "color" | "undo" | "redo" | "note") =>
+    labels?.[key] ?? t(`detailPage.annotate.tools.${key}`);
   const wrapRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement>(null);
   const svgRef = useRef<SVGSVGElement>(null);
@@ -666,12 +672,12 @@ export const AnnotationCanvas = forwardRef<
   const selectedBox = selected ? annotationBox(selected) : null;
 
   const TOOLS: [Tool, string, React.ReactNode][] = [
-    ["pen", labels?.pen ?? "그리기", <Pencil key="p" size={16} />],
-    ["rect", labels?.rect ?? "박스", <Square key="r" size={16} />],
-    ["arrow", labels?.arrow ?? "화살표", <ArrowUpRight key="a" size={16} />],
-    ["text", labels?.text ?? "메모", <Type key="t" size={16} />],
-    ["eraser", labels?.eraser ?? "지우개", <Eraser key="e" size={16} />],
-    ["select", labels?.select ?? "이동", <MousePointer2 key="s" size={16} />],
+    ["pen", label("pen"), <Pencil key="p" size={16} />],
+    ["rect", label("rect"), <Square key="r" size={16} />],
+    ["arrow", label("arrow"), <ArrowUpRight key="a" size={16} />],
+    ["text", label("text"), <Type key="t" size={16} />],
+    ["eraser", label("eraser"), <Eraser key="e" size={16} />],
+    ["select", label("select"), <MousePointer2 key="s" size={16} />],
   ];
 
   return (
@@ -765,7 +771,7 @@ export const AnnotationCanvas = forwardRef<
               <input
                 autoFocus
                 value={textEditor.value}
-                placeholder={labels?.note ?? "메모 입력"}
+                placeholder={label("note")}
                 onChange={(e) =>
                   setTextEditor({ ...textEditor, value: e.target.value })
                 }
@@ -816,7 +822,7 @@ export const AnnotationCanvas = forwardRef<
             <button
               key={c}
               type="button"
-              aria-label={`${labels?.color ?? "색상"} ${c}`}
+              aria-label={`${label("color")} ${c}`}
               aria-pressed={color === c}
               onClick={() => setColor(c)}
               className="flex h-8 w-6 items-center justify-center"
@@ -834,8 +840,8 @@ export const AnnotationCanvas = forwardRef<
           <span className="mx-1 h-5 w-px bg-le-ink-200" />
           <button
             type="button"
-            title={labels?.undo ?? "실행 취소"}
-            aria-label={labels?.undo ?? "실행 취소"}
+            title={label("undo")}
+            aria-label={label("undo")}
             disabled={!history.past.length}
             onClick={undo}
             className="flex h-8 w-8 items-center justify-center rounded-le-lg text-le-ink-500 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:cursor-not-allowed disabled:opacity-30"
@@ -844,8 +850,8 @@ export const AnnotationCanvas = forwardRef<
           </button>
           <button
             type="button"
-            title={labels?.redo ?? "다시 실행"}
-            aria-label={labels?.redo ?? "다시 실행"}
+            title={label("redo")}
+            aria-label={label("redo")}
             disabled={!history.future.length}
             onClick={redo}
             className="flex h-8 w-8 items-center justify-center rounded-le-lg text-le-ink-500 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:cursor-not-allowed disabled:opacity-30"

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

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";

package/components/detail-page/bubble-tail-overlay.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent, type RefObject } from "react";

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

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import { useCallback, useEffect, useState, type RefObject } from "react";

package/components/detail-page/canvas-insert-toolbar.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 /**

package/components/detail-page/canvas-observer.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 /**

package/components/detail-page/canvas-overlay-host.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import { useMemo, useSyncExternalStore, type RefObject } from "react";

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

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 /**

package/components/detail-page/canvas-store-facade.ts

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 import type { SelectableElement } from "./detail-page-selection";
 import type { StoreLike } from "../../lib/detail-page/spec-group/sync";
 import type { CanvasStore } from "@leviosa-ai/canvas/store";

package/components/detail-page/chart-inspector.tsx

@@ -1,3 +1,4 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
 import { useEffect, useState } from "react";
@@ -10,6 +11,7 @@ import { SpecPromptEditPanel } from "./spec-prompt-edit-panel";
 import type { SpecEditPrompting } from "./table-inspector";
 import {
   NumberField,
+  historyOf,
   Section,
   ToggleButton,
 } from "./inspector-controls";
@@ -335,6 +337,7 @@ export const ChartInspector = observer(function ChartInspector({
               {t("detailPage.chart.decimals")}
             </span>
             <NumberField
+              history={historyOf(store)}
               value={spec.options.decimals}
               min={0}
               max={3}
@@ -388,6 +391,7 @@ export const ChartInspector = observer(function ChartInspector({
               </button>
             ) : (
               <NumberField
+                history={historyOf(store)}
                 value={spec.options.max}
                 min={1}
                 onChange={(max) => setOptions({ max })}
@@ -495,6 +499,7 @@ export const ChartInspector = observer(function ChartInspector({
               {t("detailPage.chart.barSize")}
             </span>
             <NumberField
+              history={historyOf(store)}
               value={spec.style.barSize}
               min={1}
               onChange={(barSize) => setStyle({ barSize })}
@@ -505,6 +510,7 @@ export const ChartInspector = observer(function ChartInspector({
               {t("detailPage.chart.gap")}
             </span>
             <NumberField
+              history={historyOf(store)}
               value={spec.style.gap}
               min={0}
               onChange={(gap) => setStyle({ gap })}

package/components/detail-page/confirm-delete-button.tsx

@@ -0,0 +1,82 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * 지우기 전에 한 번 묻는 버튼.
+ *
+ * 서버 자산·화면처럼 되돌릴 수 없는(또는 되돌리기 번거로운) 것을 한 번 눌러 지우면
+ * 휴지통 아이콘을 스치기만 해도 사라진다. `window.confirm` 은 쓰지 않는다 — 앱 크롬
+ * 밖의 OS 대화상자가 뜨고, 호스트에 확인 대화상자 계약도 없다. 대신 그 자리에서
+ * «삭제? 확인 / 취소» 로 바뀐다.
+ */
+export function ConfirmDeleteButton({
+  label,
+  onConfirm,
+  disabled,
+  className,
+  confirmClassName = "",
+  children,
+}: {
+  /** 휴지통 버튼의 이름(aria-label·title). */
+  label: string;
+  onConfirm: () => void;
+  disabled?: boolean;
+  className?: string;
+  /** 묻는 동안의 자리. 평소 버튼이 호버에만 보이는 자리라면 여기서 늘 보이게 한다. */
+  confirmClassName?: string;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation("branding");
+  const [asking, setAsking] = useState(false);
+
+  if (!asking) {
+    return (
+      <button
+        type="button"
+        aria-label={label}
+        title={label}
+        disabled={disabled}
+        onClick={(event) => {
+          event.stopPropagation();
+          setAsking(true);
+        }}
+        className={className}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <span
+      role="group"
+      aria-label={label}
+      // 줄·카드 자체의 클릭(선택·삽입)으로 새지 않게 막는다.
+      onClick={(event) => event.stopPropagation()}
+      className={`flex items-center gap-1 rounded-le-md border border-le-ink-200 bg-le-surface px-1.5 py-0.5 text-[11px] shadow-sm ${confirmClassName}`}
+    >
+      <span className="text-le-ink-600">{t("detailPage.confirmDelete.ask")}</span>
+      <button
+        type="button"
+        autoFocus
+        onClick={() => {
+          setAsking(false);
+          onConfirm();
+        }}
+        className="font-le-semibold text-le-danger-600 hover:underline"
+      >
+        {t("detailPage.confirmDelete.confirm")}
+      </button>
+      <button
+        type="button"
+        onClick={() => setAsking(false)}
+        className="text-le-ink-500 hover:underline"
+      >
+        {t("detailPage.confirmDelete.cancel")}
+      </button>
+    </span>
+  );
+}