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

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

@@ -19,6 +19,7 @@ import {
 } from "../ui/select";
 import type { ExportDocument } from "../../lib/detail-page-canvas/export/document-model";
 import { detectGifPages } from "../../lib/detail-page-canvas/export/gif-plan";
+import { activeFramePages } from "../../lib/detail-page/frame-pages";
 import { isMp4EncodeSupported } from "../../lib/detail-page-canvas/export/mp4-support";
 import {
   detailPageEditorProfile,
@@ -43,6 +44,8 @@ type ExportPageLike = {
   id: string;
   computedWidth: number;
   computedHeight: number;
+  /** 이 판이 속한 프레임 이름이 여기 산다(`custom.frame`). */
+  custom?: unknown;
 };
 
 type ExportStoreLike = {
@@ -58,7 +61,8 @@ type ExportStoreLike = {
 };
 
 // 등록 플랫폼은 파일명 접미사에만 반영된다(상세페이지 폭은 750px 고정). 셀러가
-// 어디에 올릴지 고르며 맥락을 잡도록 노출한다.
+// 어디에 올릴지 고르며 맥락을 잡도록 노출한다. 캐러셀은 인스타그램 한 곳으로만
+// 나가므로 이 목록을 아예 안 띄운다 — `profile.registerPlatform` 이 그것을 정한다.
 const PLATFORMS = [
   { value: "naver", label: "네이버 스마트 스토어" },
   { value: "coupang", label: "쿠팡" },
@@ -198,7 +202,10 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
 
   const selectedPages = useMemo(() => {
     if (scope === "current" && s.activePage) return [s.activePage];
-    return s.pages;
+    // 후보 여러 벌이 한 문서에 있으면 «전체»는 문서 전체가 아니라 **보고 있는 한 벌**
+    // 이다. 넷을 다 내보내면 마흔 장짜리 묶음이 나오고, 그걸 원해서 누르는 사람은
+    // 없다. 꼬리표 없는 문서에서는 지금까지처럼 전부다.
+    return activeFramePages(s.pages, s.activePage?.id);
   }, [scope, s.activePage, s.pages]);
 
   const docWidth = useMemo(
@@ -220,7 +227,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 +391,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-editor.tsx

@@ -117,6 +117,16 @@ export type DetailPageEditorProps = {
   structurePanel?: ReactNode;
   /** 헤더에 표시할 현재 상품/상세페이지 이름. 없으면 기본 라벨. */
   productName?: string;
+  /**
+   * 결과물이 될 벌 — 내려받기·발행이 향하는 곳.
+   *
+   * 문서에 안 적고 밖에서 받는다. 후보를 담은 화면은 이미 서버가 «고른 후보»를
+   * 들고 있고(목록 썸네일과 레퍼런스가 읽는 자리가 그것이다), 두 곳에 적어 두면
+   * 언젠가 서로 다른 답을 한다.
+   */
+  chosenFrame?: string;
+  /** 안 주면 벌에 체크를 안 그린다. */
+  onChooseFrame?: (frameKey: string) => void;
   /** 헤더 좌측 "뒤로가기" 동작. 없으면 버튼을 숨긴다. */
   onBack?: () => void;
   /**
@@ -152,6 +162,8 @@ export function DetailPageEditor({
   generatedId,
   structurePanel,
   productName,
+  chosenFrame,
+  onChooseFrame,
   onBack,
   headerActions,
 }: DetailPageEditorProps) {
@@ -289,14 +301,19 @@ export function DetailPageEditor({
           />
         )}
         <div className="relative min-w-0 flex-1">
-          <LeviosaCanvasWorkspace store={store} gap={4}>
+          <LeviosaCanvasWorkspace
+            store={store}
+            gap={4}
+            chosenFrame={chosenFrame}
+            onChooseFrame={onChooseFrame}
+          >
             {findReplace}
             <DetailPagePagesTimeline store={store} />
           </LeviosaCanvasWorkspace>
         </div>
       </div>
     );
-  }, [store, sidebarSections, SidebarSlot]);
+  }, [store, sidebarSections, SidebarSlot, chosenFrame, onChooseFrame]);
 
   const aiValue = useMemo(
     () => ({

package/components/detail-page/detail-page-frame-header.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * 벌 위에 붙는 것 — **이게 결과물인가**, 그리고 **바꾸는 길**.
+ *
+ * ## 화면에 라벨은 최대 둘
+ *
+ * 넷에 다 라벨을 달면 «라벨 넷»으로 읽히고, 무엇이 상태이고 무엇이 행동인지 모양으로
+ * 구분이 안 된다. Shopify 의 테마 목록도 Vercel 의 배포 목록도 반대로 한다 — 지금
+ * 나가는 것 **하나에만** 표를 달고, 바꾸는 행동은 조용한 곳에 둔다.
+ *
+ *   대표인 벌     →  «대표»          글씨. 누를 것이 아니라 상태다
+ *   보고 있는 벌  →  «대표로 지정»    테두리 버튼. 누르면 바뀐다
+ *   나머지        →  아무것도 없음
+ *
+ * 고르려면 먼저 그 벌을 본다 — 이미 하던 동작이라 클릭이 하나 느는 것이 아니다.
+ *
+ * ## 뱃지에 손잡이를 달지 않는다
+ *
+ * 상태를 나타내는 표는 누르는 것이 아니고, 누르는 것은 버튼처럼 생겨야 한다. 둘을
+ * 같은 모양으로 두면 어느 쪽이 무엇인지 읽어 봐야 안다. 그래서 대표는 **글씨**,
+ * 지정은 **테두리 있는 버튼**이다.
+ *
+ * ## 왜 «최종»이 아닌가
+ *
+ * 언제든 바꾸는 값인데 «최종»이라 적으면 되돌릴 수 없다는 느낌을 준다 — 누르기 전에
+ * 한 번 망설이게 된다. 게다가 계속 고칠 문서라 최종도 아니다. «대표»는 여럿 중 밖으로
+ * 나가는 하나라는 뜻이 이미 붙어 있는 말이고(대표 사진), 실제로 이 값이 목록 카드
+ * 썸네일과 레퍼런스로 나가는 판까지 정한다.
+ *
+ * ## 흰 판 위가 아니라 회색 바닥 위
+ *
+ * 작업물을 가리지 않는 자리다. 피그마가 프레임 이름을 두는 그 자리이기도 하다.
+ */
+
+/** 이 줄이 차지하는 높이(화면 px). 배율과 무관하게 읽혀야 하므로 안 줄인다. */
+export const FRAME_HEAD_HEIGHT = 22;
+
+const COPY = {
+  chosen: "대표",
+  choose: "대표로 지정",
+  hint: "내려받기와 발행은 대표만 나갑니다",
+};
+
+export function DetailPageFrameHeader({
+  chosen,
+  selected,
+  onChoose,
+}: {
+  chosen: boolean;
+  /** 지금 보고 있는 벌인가. 여기에만 바꾸는 버튼이 뜬다. */
+  selected: boolean;
+  /** 안 주면 아무것도 안 그린다 — 고를 것이 없는 문서도 있다. */
+  onChoose?: () => void;
+}) {
+  if (!onChoose) return null;
+
+  const place = {
+    position: "absolute" as const,
+    left: 2,
+    bottom: "100%" as const,
+    marginBottom: 4,
+    height: FRAME_HEAD_HEIGHT - 4,
+    whiteSpace: "nowrap" as const,
+  };
+
+  if (chosen) {
+    return (
+      <span
+        style={place}
+        title={COPY.hint}
+        className="flex items-center gap-1 text-[11px] font-dpe-bold text-dpe-ink-900"
+      >
+        <svg width="11" height="11" viewBox="0 0 16 16" aria-hidden="true">
+          <path
+            d="M3 8.5 6.5 12 13 4.5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        {COPY.chosen}
+      </span>
+    );
+  }
+
+  // 보고 있지 않은 벌은 아무 말도 안 한다. 누르면 보게 되고, 그때 이 버튼이 뜬다.
+  if (!selected) return null;
+
+  return (
+    <button
+      type="button"
+      style={place}
+      title={COPY.hint}
+      onClick={onChoose}
+      className="flex items-center rounded-full border border-dpe-ink-400 bg-dpe-surface px-2 text-[11px] font-dpe-semibold text-dpe-ink-700 transition-colors hover:border-dpe-ink-900 hover:text-dpe-ink-900"
+    >
+      {COPY.choose}
+    </button>
+  );
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
+import { activeFramePages } from "../../lib/detail-page/frame-pages";
 
 import { Fragment, useCallback, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
@@ -151,11 +152,14 @@ const PageRow = observer(function PageRow({
   store,
   page,
   index,
+  canDuplicate,
   thumb,
 }: {
   store: StoreLike;
   page: PageLike;
   index: number;
+  /** 이 벌에 한 장을 더 넣을 수 있는가. 세는 것은 목록이 한다. */
+  canDuplicate: boolean;
   thumb: string | undefined;
 }) {
   const { t } = useTranslation("branding");
@@ -171,7 +175,6 @@ const PageRow = observer(function PageRow({
   const active = store.activePage?.id === page.id;
   const ratio = page.computedHeight / Math.max(1, page.computedWidth);
   const { role, title } = pageLabel(page, index, t);
-  const maxPages = detailPageEditorProfile().maxPages;
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -238,7 +241,7 @@ const PageRow = observer(function PageRow({
         <div className="flex shrink-0 flex-col gap-1">
           <button
             type="button"
-            disabled={store.pages.length >= maxPages}
+            disabled={!canDuplicate}
             onClick={(event) => {
               event.stopPropagation();
               page.clone?.();
@@ -311,22 +314,26 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
   // 합계가 곧 문서 높이지만, 캐러셀은 판이 따로따로라 합계가 아무 뜻이 없다 —
   // 8판짜리가 1080×10800 으로 보였다.
   const profile = detailPageEditorProfile();
-  const width = Math.round(s.pages[0]?.computedWidth ?? 0);
+  // 목록은 «지금 보고 있는 한 벌»만 담는다. 후보 넷을 담은 문서에서 마흔 줄을
+  // 늘어놓으면 어느 줄이 어느 벌인지 알 수가 없다.
+  const pages = activeFramePages(s.pages, s.activePage?.id);
+  const width = Math.round(pages[0]?.computedWidth ?? 0);
   const shownHeight = profile.page.fixed
     ? Math.round(
         typeof profile.page.height === "number"
           ? profile.page.height
-          : (s.pages[0]?.computedHeight ?? 0),
+          : (pages[0]?.computedHeight ?? 0),
       )
-    : Math.round(s.pages.reduce((acc, p) => acc + p.computedHeight, 0));
+    : Math.round(pages.reduce((acc, p) => acc + p.computedHeight, 0));
 
-  const canAdd = s.pages.length < profile.maxPages;
+  // 장 수 상한도 프레임마다다 — 한 벌이 열 장이라고 다른 벌까지 막을 이유가 없다.
+  const canAdd = pages.length < profile.maxPages;
 
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-baseline justify-between px-4 py-3">
         <p className="text-base font-dpe-bold text-dpe-ink-900">
-          {t("detailPage.pages.totalPages", { count: s.pages.length })}
+          {t("detailPage.pages.totalPages", { count: pages.length })}
         </p>
         <p className="text-xs text-dpe-ink-400">
           {width} × {shownHeight} px
@@ -341,17 +348,18 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
           onDragEnd={handleDragEnd}
         >
           <SortableContext
-            items={s.pages.map((p) => p.id)}
+            items={pages.map((p) => p.id)}
             strategy={verticalListSortingStrategy}
           >
             <div className="space-y-2">
-              {s.pages.map((page, index) => (
+              {pages.map((page, index) => (
                 <Fragment key={page.id}>
                   <PageRow
                     store={s}
                     page={page}
                     index={index}
-                    thumb={detailPageThumbnailBus.get(page.id)}
+                    canDuplicate={canAdd}
+                    thumb={detailPageThumbnailBus.get(s, page.id)}
                   />
                   {/* 새 화면은 «어디에» 가 먼저다. 목록 끝에 버튼 하나를 두면 넣고 나서
                       다시 끌어 옮기게 되므로, 넣을 자리마다 하나씩 둔다. */}

package/components/detail-page/detail-page-pages-timeline.tsx

@@ -15,6 +15,7 @@ import { useSyncExternalStore } from "react";
 
 import { detailPageThumbnailBus } from "./detail-page-thumbnail-bus";
 import { observer } from "./canvas-observer";
+import { activeFramePages } from "../../lib/detail-page/frame-pages";
 
 type PageLike = { id: string; name?: unknown };
 type StoreLike = {
@@ -48,6 +49,8 @@ export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline
     () => 0,
   );
   const activeId = s.activePage?.id;
+  // 아래 띠도 목록과 같은 것을 본다 — 둘 다 «지금 어디 있나»를 말하는 물건이다.
+  const pages = activeFramePages(s.pages, activeId);
 
   if (!pagesTimelineVisible(s)) return null;
 
@@ -57,9 +60,9 @@ export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline
       style={{ minHeight: PAGES_TIMELINE_HEIGHT }}
       className="pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex items-center gap-1.5 overflow-x-auto border-t border-dpe-ink-200 bg-dpe-surface/95 px-3 py-1.5 backdrop-blur-sm"
     >
-      {s.pages.map((page, index) => {
+      {pages.map((page, index) => {
         const active = page.id === activeId;
-        const thumb = detailPageThumbnailBus.get(page.id);
+        const thumb = detailPageThumbnailBus.get(s, page.id);
         return (
           <button
             key={page.id}

package/components/detail-page/detail-page-thumbnail-bus.ts

@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * Tiny cross-component cache for page thumbnails (data URLs), keyed by page id.
+ * Tiny cross-component cache for page thumbnails (data URLs), keyed by store + page id.
  *
  * The stacked workspace owns the live Konva canvases (it renders the real
  * ``<Page>`` components), so it captures thumbnails from the DOM canvas there and
@@ -12,22 +12,33 @@
  * download for the same reason — real exports are server-side).
  */
 
-const cache = new Map<string, string>();
+// 캐러셀마다 `p01`부터 다시 쓰므로 page id만 키로 쓰면 다른 문서의 그림이 섞인다.
+// WeakMap이면 편집기를 닫았을 때 그 문서의 data URL도 같이 버려진다.
+const cache = new WeakMap<object, Map<string, string>>();
 const listeners = new Set<() => void>();
 let version = 0;
 
+function entries(scope: object): Map<string, string> {
+  const found = cache.get(scope);
+  if (found) return found;
+  const created = new Map<string, string>();
+  cache.set(scope, created);
+  return created;
+}
+
 export const detailPageThumbnailBus = {
-  get(id: string): string | undefined {
-    return cache.get(id);
+  get(scope: object, id: string): string | undefined {
+    return cache.get(scope)?.get(id);
   },
-  set(id: string, dataUrl: string): void {
-    if (cache.get(id) === dataUrl) return;
-    cache.set(id, dataUrl);
+  set(scope: object, id: string, dataUrl: string): void {
+    const scoped = entries(scope);
+    if (scoped.get(id) === dataUrl) return;
+    scoped.set(id, dataUrl);
     version += 1;
     listeners.forEach((l) => l());
   },
-  has(id: string): boolean {
-    return cache.has(id);
+  has(scope: object, id: string): boolean {
+    return cache.get(scope)?.has(id) ?? false;
   },
   // Monotonic version for useSyncExternalStore — changes whenever a thumbnail lands.
   getVersion(): number {

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/frame-drag-bus.ts

@@ -0,0 +1,65 @@
+/**
+ * 손잡이와 끌기 층을 잇는 한 줄.
+ *
+ * 손잡이는 **판 상자 안**에 그려진다(엔진의 판 위 슬롯). 끌리는 동안 보이는 것들은
+ * 모든 판 **위**에 뜬 층이 그린다. 둘은 트리에서 멀리 떨어져 있는데, 그 사이로
+ * props 를 나르자고 여러 겹을 뚫는 것보다 이 한 줄이 싸다 — 이 저장소가 썸네일과
+ * 화면 다시 만들기를 잇는 방식과 같다.
+ */
+
+type Starter = (pageId: string, event: React.PointerEvent) => void;
+
+let starter: Starter | null = null;
+
+/**
+ * 지금 끼어들 자리. 판들이 **밀려나며** 만드는 빈칸이라, 이 값은 판을 그리는 쪽이
+ * 읽어야 한다 — 위에 겹쳐 그리면 밑에 있는 판을 가릴 뿐이고 «사이가 벌어졌다»가
+ * 안 된다.
+ */
+export type FrameInsert = {
+  frameKey: string;
+  /** 그 벌 안에서 몇 번째 자리인가. */
+  at: number;
+  /** 빈칸 높이(화면 px) — 끌고 있는 판의 높이다. */
+  height: number;
+  /** 넘쳐서 못 놓는 자리인가. */
+  full: boolean;
+} | null;
+
+let insert: FrameInsert = null;
+const listeners = new Set<() => void>();
+
+export function setFrameInsert(next: FrameInsert): void {
+  const same =
+    insert === next ||
+    (insert &&
+      next &&
+      insert.frameKey === next.frameKey &&
+      insert.at === next.at &&
+      insert.full === next.full &&
+      insert.height === next.height);
+  if (same) return;
+  insert = next;
+  for (const listener of [...listeners]) listener();
+}
+
+export function getFrameInsert(): FrameInsert {
+  return insert;
+}
+
+export function subscribeFrameInsert(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** 끌기 층이 자기를 걸어 둔다. */
+export function setFrameDragStarter(fn: Starter | null): void {
+  starter = fn;
+}
+
+/** 손잡이가 부른다. 층이 없으면 아무 일도 안 일어난다. */
+export function startFrameDrag(pageId: string, event: React.PointerEvent): void {
+  starter?.(pageId, event);
+}

package/components/detail-page/frame-drag-grip.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+/**
+ * 판을 다른 벌로 끌 때 잡는 자리.
+ *
+ * **판 상자 안에** 산다. 예전에는 마우스 자리를 재어 판 위에 띄웠는데, 손잡이가 판
+ * 모서리에 있다 보니 바깥에서 다가가는 손은 «판 밖»을 지나 온다 — 그때마다 사라져서
+ * 잡으러 가는 내내 깜빡였다. 크기를 키워도 그대로였다. 안에 있으면 잴 것이 없고
+ * 깜빡일 일도 없다.
+ *
+ * **흐리게 두지 않는다.** 옅게 깔아 두면 «있는 줄 몰라서 못 잡는» 물건이 된다.
+ * 20px 짜리라 늘 또렷해도 시끄럽지 않다.
+ */
+
+import { GripVertical } from "lucide-react";
+
+import { startFrameDrag } from "./frame-drag-bus";
+
+export function FrameDragGrip({ pageId }: { pageId: string }) {
+  return (
+    <button
+      type="button"
+      data-dp-frame-grip=""
+      title="다른 벌로 끌어오기"
+      aria-label="이 판을 다른 벌로 끌어오기"
+      onPointerDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        startFrameDrag(pageId, event);
+      }}
+      style={{ position: "absolute", left: 5, top: 5, width: 20, height: 20, zIndex: 6 }}
+      className="flex cursor-grab items-center justify-center rounded bg-dpe-surface/80 text-dpe-ink-800 transition-colors hover:bg-dpe-ink-900 hover:text-dpe-on-accent"
+    >
+      <GripVertical aria-hidden="true" size={13} />
+    </button>
+  );
+}