@leviosa-ai/detail-page-editor 0.2.2 → 0.3.0

package/components/detail-page/element-recents-strip.tsx

@@ -61,8 +61,8 @@ export function ElementRecentsStrip({ store }: { store: unknown }) {
   if (!items.length) return null;
 
   return (
-    <div className="shrink-0 border-b border-neutral-200 px-2 py-2">
-      <p className="mb-1.5 px-0.5 text-[11px] font-medium text-neutral-500">
+    <div className="shrink-0 border-b border-dpe-ink-200 px-2 py-2">
+      <p className="mb-1.5 px-0.5 text-[11px] font-dpe-medium text-dpe-ink-500">
         {t("detailPage.recents.title")}
       </p>
       <div className="flex gap-1.5 overflow-x-auto pb-0.5">
@@ -73,7 +73,7 @@ export function ElementRecentsStrip({ store }: { store: unknown }) {
               onClick={() => insert(entry)}
               title={entry.label ?? entry.key}
               aria-label={entry.label ?? entry.key}
-              className="flex h-11 w-11 items-center justify-center rounded-lg border border-neutral-200 bg-white p-1.5 hover:border-neutral-400"
+              className="flex h-11 w-11 items-center justify-center rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface p-1.5 hover:border-dpe-ink-400"
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
@@ -89,10 +89,10 @@ export function ElementRecentsStrip({ store }: { store: unknown }) {
                 isPinned ? "detailPage.recents.unpin" : "detailPage.recents.pin",
               )}
               aria-pressed={isPinned}
-              className={`absolute -right-1 -top-1 rounded-full border border-neutral-200 bg-white p-0.5 transition-opacity ${
+              className={`absolute -right-1 -top-1 rounded-full border border-dpe-ink-200 bg-dpe-surface p-0.5 transition-opacity ${
                 isPinned
-                  ? "text-amber-500 opacity-100"
-                  : "text-neutral-300 opacity-0 group-hover:opacity-100"
+                  ? "text-dpe-warn-500 opacity-100"
+                  : "text-dpe-ink-300 opacity-0 group-hover:opacity-100"
               }`}
             >
               <Star aria-hidden="true" size={10} fill={isPinned ? "currentColor" : "none"} />

package/components/detail-page/fill-control.tsx

@@ -166,8 +166,8 @@ export function FillControl({
           onClick={() => onChange(solid)}
           className={
             !isGradient
-              ? "h-8 rounded-md bg-neutral-900 text-xs font-semibold text-white"
-              : "h-8 rounded-md border border-neutral-200 text-xs font-medium text-neutral-600 hover:bg-neutral-50"
+              ? "h-8 rounded-dpe-md bg-dpe-ink-900 text-xs font-dpe-semibold text-dpe-on-accent"
+              : "h-8 rounded-dpe-md border border-dpe-ink-200 text-xs font-dpe-medium text-dpe-ink-600 hover:bg-dpe-ink-50"
           }
         >
           {t("detailPage.properties.fillSolid")}
@@ -177,8 +177,8 @@ export function FillControl({
           onClick={() => emit(g)}
           className={
             isGradient
-              ? "h-8 rounded-md bg-neutral-900 text-xs font-semibold text-white"
-              : "h-8 rounded-md border border-neutral-200 text-xs font-medium text-neutral-600 hover:bg-neutral-50"
+              ? "h-8 rounded-dpe-md bg-dpe-ink-900 text-xs font-dpe-semibold text-dpe-on-accent"
+              : "h-8 rounded-dpe-md border border-dpe-ink-200 text-xs font-dpe-medium text-dpe-ink-600 hover:bg-dpe-ink-50"
           }
         >
           {t("detailPage.properties.fillGradient")}
@@ -191,7 +191,7 @@ export function FillControl({
         <div className="flex flex-col gap-2">
           {/* 미리보기 바 */}
           <div
-            className="h-6 w-full rounded-md border border-neutral-200"
+            className="h-6 w-full rounded-dpe-md border border-dpe-ink-200"
             style={{ background: value }}
             aria-hidden="true"
           />
@@ -212,16 +212,16 @@ export function FillControl({
                     value={Math.round(clampPos(s.pos))}
                     onChange={(e) => setStop(i, { pos: Number(e.target.value) })}
                     aria-label={t("detailPage.properties.gradientStopPosition")}
-                    className="w-14 rounded-md border border-neutral-200 px-1.5 py-1 text-xs tabular-nums focus:border-neutral-400 focus:outline-none"
+                    className="w-14 rounded-dpe-md border border-dpe-ink-200 px-1.5 py-1 text-xs tabular-nums focus:border-dpe-ink-400 focus:outline-none"
                   />
-                  <span className="text-[11px] text-neutral-400">%</span>
+                  <span className="text-[11px] text-dpe-ink-400">%</span>
                 </div>
                 <button
                   type="button"
                   onClick={() => removeStop(i)}
                   disabled={g.stops.length <= 2}
                   aria-label={t("detailPage.properties.gradientRemoveStop")}
-                  className="rounded p-1 text-neutral-400 hover:text-neutral-700 disabled:cursor-not-allowed disabled:opacity-30"
+                  className="rounded p-1 text-dpe-ink-400 hover:text-dpe-ink-700 disabled:cursor-not-allowed disabled:opacity-30"
                 >
                   <X size={13} />
                 </button>
@@ -230,7 +230,7 @@ export function FillControl({
             <button
               type="button"
               onClick={addStop}
-              className="flex items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 py-1.5 text-[11px] font-medium text-neutral-500 hover:border-neutral-400 hover:bg-neutral-50"
+              className="flex items-center justify-center gap-1 rounded-dpe-md border border-dashed border-dpe-ink-300 py-1.5 text-[11px] font-dpe-medium text-dpe-ink-500 hover:border-dpe-ink-400 hover:bg-dpe-ink-50"
             >
               <Plus size={12} />
               {t("detailPage.properties.gradientAddStop")}
@@ -239,7 +239,7 @@ export function FillControl({
 
           {/* 각도 */}
           <label className="flex items-center gap-3">
-            <span className="w-8 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-8 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.properties.gradientAngle")}
             </span>
             <input
@@ -248,9 +248,9 @@ export function FillControl({
               max={360}
               value={g.angle}
               onChange={(e) => emit({ ...g, angle: Number(e.target.value) })}
-              className="min-w-0 flex-1 accent-neutral-900"
+              className="min-w-0 flex-1 accent-dpe-ink-900"
             />
-            <span className="w-10 text-right text-xs tabular-nums text-neutral-700">
+            <span className="w-10 text-right text-xs tabular-nums text-dpe-ink-700">
               {Math.round(g.angle)}°
             </span>
           </label>

package/components/detail-page/find-replace-panel.tsx

@@ -119,21 +119,21 @@ export const FindReplacePanel = observer(function FindReplacePanel({
   if (!open) return null;
 
   const field =
-    "h-8 w-full rounded-md border border-neutral-200 px-2 text-[13px] text-neutral-800 outline-none focus:border-neutral-400";
+    "h-8 w-full rounded-dpe-md border border-dpe-ink-200 px-2 text-[13px] text-dpe-ink-800 outline-none focus:border-dpe-ink-400";
   const button =
-    "flex h-8 items-center justify-center rounded-md border border-neutral-200 px-2.5 text-[12px] text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40";
+    "flex h-8 items-center justify-center rounded-dpe-md border border-dpe-ink-200 px-2.5 text-[12px] text-dpe-ink-700 transition-colors hover:bg-dpe-ink-50 disabled:cursor-not-allowed disabled:opacity-40";
 
   return (
     <div
       data-dp-find-replace
-      className="absolute right-4 top-4 z-40 w-[292px] rounded-lg border border-neutral-200 bg-white p-3 shadow-lg"
+      className="absolute right-4 top-4 z-40 w-[292px] rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface p-3 shadow-lg"
       onKeyDown={(e) => {
         if (e.key === "Escape") setOpen(false);
         if (e.key === "Enter") step(e.shiftKey ? -1 : 1);
       }}
     >
       <div className="mb-2 flex items-center justify-between">
-        <span className="text-[12px] font-medium text-neutral-500">
+        <span className="text-[12px] font-dpe-medium text-dpe-ink-500">
           {t("detailPage.findReplace.title")}
         </span>
         <button
@@ -141,7 +141,7 @@ export const FindReplacePanel = observer(function FindReplacePanel({
           aria-label={t("detailPage.findReplace.close")}
           data-dp-find-close
           onClick={() => setOpen(false)}
-          className="rounded p-0.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700"
+          className="rounded p-0.5 text-dpe-ink-400 hover:bg-dpe-ink-100 hover:text-dpe-ink-700"
         >
           <X size={14} />
         </button>
@@ -167,7 +167,7 @@ export const FindReplacePanel = observer(function FindReplacePanel({
           aria-pressed={caseSensitive}
           data-dp-find-case
           onClick={() => setCaseSensitive((v) => !v)}
-          className={`${button} shrink-0 ${caseSensitive ? "bg-neutral-900 text-white hover:bg-neutral-900" : ""}`}
+          className={`${button} shrink-0 ${caseSensitive ? "bg-dpe-ink-900 text-dpe-on-accent hover:bg-dpe-ink-900" : ""}`}
         >
           <CaseSensitive size={15} />
         </button>
@@ -189,7 +189,7 @@ export const FindReplacePanel = observer(function FindReplacePanel({
           data-dp-find-current={matches.length ? at + 1 : 0}
           data-dp-find-blocks={matches.length}
           data-dp-find-total={total}
-          className="text-[12px] tabular-nums text-neutral-500"
+          className="text-[12px] tabular-nums text-dpe-ink-500"
         >
           {matches.length
             ? t("detailPage.findReplace.count", {
@@ -244,7 +244,7 @@ export const FindReplacePanel = observer(function FindReplacePanel({
         </button>
       </div>
 
-      <p className="mt-2 text-[11px] leading-relaxed text-neutral-400">
+      <p className="mt-2 text-[11px] leading-relaxed text-dpe-ink-400">
         {t("detailPage.findReplace.chartHint")}
       </p>
     </div>

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

@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * 어두운(bg-neutral-900) 생성 버튼 위에 얹는 가짜 프로그레스 오버레이.
+ * 어두운(bg-dpe-ink-900) 생성 버튼 위에 얹는 가짜 프로그레스 오버레이.
  *
  * 진행 신호를 두 겹으로 준다: (1) 버튼 전체를 은은하게 채우는 반투명 면,
  * (2) 하단의 또렷한 3px 바. 둘 다 왼→오로 자라며, 라벨(퍼센트 포함)은 버튼이
@@ -15,15 +15,15 @@ export function GenerationProgressFill({ progress }: { progress: number }) {
     <>
       <span
         aria-hidden="true"
-        className="pointer-events-none absolute inset-y-0 left-0 bg-white/10"
+        className="pointer-events-none absolute inset-y-0 left-0 bg-dpe-surface/10"
         style={{ width: `${pct}%`, transition: "width 200ms ease-out" }}
       />
       <span
         aria-hidden="true"
-        className="pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-white/25"
+        className="pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-dpe-surface/25"
       >
         <span
-          className="block h-full bg-white"
+          className="block h-full bg-dpe-surface"
           style={{ width: `${pct}%`, transition: "width 200ms ease-out" }}
         />
       </span>

package/components/detail-page/gif-effect-picker.tsx

@@ -62,12 +62,12 @@ export function GifEffectPicker({
           disabled={disabled}
           aria-label={label}
           aria-expanded={open}
-          className="flex min-w-0 items-center justify-between gap-2 rounded-md border border-neutral-200 bg-white px-2 py-1.5 text-left text-sm text-neutral-900 outline-none hover:bg-neutral-50 focus:border-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex min-w-0 items-center justify-between gap-2 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 py-1.5 text-left text-sm text-dpe-ink-900 outline-none hover:bg-dpe-ink-50 focus:border-dpe-ink-400 disabled:cursor-not-allowed disabled:opacity-50"
         >
           <span className="min-w-0 truncate">{selected?.label ?? value}</span>
           <ChevronDown
             aria-hidden="true"
-            className="shrink-0 text-neutral-400"
+            className="shrink-0 text-dpe-ink-400"
             size={14}
           />
         </button>
@@ -78,13 +78,13 @@ export function GifEffectPicker({
           align="start"
           sideOffset={8}
           collisionPadding={12}
-          className="z-[120] w-[300px] overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-[0_10px_32px_rgba(0,0,0,0.14)]"
+          className="z-[120] w-[300px] overflow-hidden rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface shadow-[0_10px_32px_rgba(0,0,0,0.14)]"
         >
           <div className="max-h-[420px] overflow-y-auto p-1">
             {groups.map((group) => (
               <div key={group.name || "default"}>
                 {group.name ? (
-                  <p className="px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.06em] text-neutral-400">
+                  <p className="px-2 pb-1 pt-2 text-[10px] font-dpe-semibold uppercase tracking-[0.06em] text-dpe-ink-400">
                     {group.name}
                   </p>
                 ) : null}
@@ -97,9 +97,9 @@ export function GifEffectPicker({
                       onChange(option.id);
                       setOpen(false);
                     }}
-                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-neutral-50"
+                    className="flex w-full items-center gap-2 rounded-dpe-md px-2 py-1.5 text-left hover:bg-dpe-ink-50"
                   >
-                    <span className="flex h-12 w-[92px] shrink-0 items-center justify-center overflow-hidden rounded border border-neutral-100 bg-neutral-50">
+                    <span className="flex h-12 w-[92px] shrink-0 items-center justify-center overflow-hidden rounded border border-dpe-ink-100 bg-dpe-ink-50">
                       {/* 미리보기는 움직여야 의미가 있다 — 최적화(정지 프레임 변환)를 끈다. */}
                       <Image
                         src={option.previewSrc}
@@ -111,11 +111,11 @@ export function GifEffectPicker({
                       />
                     </span>
                     <span className="min-w-0 flex-1">
-                      <span className="block truncate text-sm text-neutral-900">
+                      <span className="block truncate text-sm text-dpe-ink-900">
                         {option.label}
                       </span>
                       {option.hint ? (
-                        <span className="mt-0.5 block text-[11px] leading-4 text-neutral-400">
+                        <span className="mt-0.5 block text-[11px] leading-4 text-dpe-ink-400">
                           {option.hint}
                         </span>
                       ) : null}
@@ -128,7 +128,7 @@ export function GifEffectPicker({
               </div>
             ))}
           </div>
-          <PopoverPrimitive.Arrow className="fill-white" />
+          <PopoverPrimitive.Arrow className="fill-dpe-on-accent" />
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>

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-xl border border-border bg-card">
+    <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-medium text-foreground">프롬프트로 편집</span>
+        <span className="text-xs font-dpe-medium text-foreground">프롬프트로 편집</span>
         {unlimited || badgeLimit > 0 ? (
           <EditUsageBadge used={badgeUsed} limit={badgeLimit} unlimited={unlimited} />
         ) : null}
@@ -138,7 +138,7 @@ export function GroupPromptEditPanel({
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
             aria-label="프롬프트로 수정"
           >
             {busy ? (

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

@@ -18,8 +18,8 @@ export function Section({
   children: React.ReactNode;
 }) {
   return (
-    <section className="border-t border-neutral-200 px-4 py-3 first:border-t-0">
-      <h4 className="mb-2 text-[11px] font-semibold uppercase tracking-[0.06em] text-neutral-400">
+    <section className="border-t border-dpe-ink-200 px-4 py-3 first:border-t-0">
+      <h4 className="mb-2 text-[11px] font-dpe-semibold uppercase tracking-[0.06em] text-dpe-ink-400">
         {title}
       </h4>
       {children}
@@ -105,7 +105,7 @@ export function NumberField({
   };
 
   return (
-    <div className="flex items-center rounded-md border border-neutral-200 bg-white pr-2 focus-within:border-neutral-400">
+    <div className="flex items-center rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface pr-2 focus-within:border-dpe-ink-400">
       {label ? (
         <span
           aria-hidden="true"
@@ -113,7 +113,7 @@ export function NumberField({
           onPointerMove={onScrubMove}
           onPointerUp={onScrubUp}
           onPointerCancel={onScrubUp}
-          className="cursor-ew-resize select-none touch-none py-1.5 pl-2 pr-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-600"
+          className="cursor-ew-resize select-none touch-none py-1.5 pl-2 pr-1.5 text-xs font-dpe-medium text-dpe-ink-400 hover:text-dpe-ink-600"
           title={`${label} — 좌우로 드래그해 값 조절 (Shift ×10)`}
         >
           {label}
@@ -139,9 +139,9 @@ export function NumberField({
             stepBy(-1);
           }
         }}
-        className="w-full min-w-0 bg-transparent py-1.5 text-sm tabular-nums text-neutral-900 outline-none"
+        className="w-full min-w-0 bg-transparent py-1.5 text-sm tabular-nums text-dpe-ink-900 outline-none"
       />
-      {suffix ? <span className="ml-1 text-xs text-neutral-400">{suffix}</span> : null}
+      {suffix ? <span className="ml-1 text-xs text-dpe-ink-400">{suffix}</span> : null}
     </div>
   );
 }
@@ -163,10 +163,10 @@ export function ToggleButton({
       title={title}
       onClick={onClick}
       className={[
-        "flex h-8 flex-1 items-center justify-center rounded-md border transition-colors",
+        "flex h-8 flex-1 items-center justify-center rounded-dpe-md border transition-colors",
         active
-          ? "border-neutral-800 bg-neutral-900 text-white"
-          : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50",
+          ? "border-dpe-ink-800 bg-dpe-ink-900 text-dpe-on-accent"
+          : "border-dpe-ink-200 bg-dpe-surface text-dpe-ink-600 hover:bg-dpe-ink-50",
       ].join(" ")}
     >
       {children}

package/components/detail-page/panel-search-input.tsx

@@ -34,7 +34,7 @@ export function PanelSearchInput({
       <Search
         aria-hidden="true"
         size={14}
-        className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400"
+        className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-dpe-ink-400"
       />
       <input
         type="search"
@@ -42,7 +42,7 @@ export function PanelSearchInput({
         onChange={(event) => onChange(event.target.value)}
         placeholder={placeholder}
         aria-label={label}
-        className="w-full appearance-none rounded-lg border border-neutral-200 py-2 pl-8 pr-2.5 text-sm leading-5 placeholder:text-neutral-400 focus:border-neutral-400 focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
+        className="w-full appearance-none rounded-dpe-lg border border-dpe-ink-200 py-2 pl-8 pr-2.5 text-sm leading-5 placeholder:text-dpe-ink-400 focus:border-dpe-ink-400 focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
       />
     </div>
   );

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-xl border border-border bg-card">
+    <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-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
+        <span className="text-xs font-dpe-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
         {unlimited || editLimit > 0 ? (
           <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
         ) : null}
@@ -129,7 +129,7 @@ export function PromptEditPanel({
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
             aria-label={t("detailPage.promptEdit.send")}
           >
             {busy ? (

package/components/detail-page/section-reauthor-controller.tsx

@@ -190,12 +190,12 @@ export function SectionReauthorController({
         onClose={close}
       />
       {notice ? (
-        <div className="fixed bottom-4 left-1/2 z-[110] -translate-x-1/2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2 text-xs text-amber-800 shadow-lg">
+        <div className="fixed bottom-4 left-1/2 z-[110] -translate-x-1/2 rounded-dpe-lg border border-dpe-warn-200 bg-dpe-warn-50 px-4 py-2 text-xs text-dpe-warn-800 shadow-lg">
           <span>{notice}</span>
           <button
             type="button"
             onClick={() => setNotice(null)}
-            className="ml-3 font-semibold underline"
+            className="ml-3 font-dpe-semibold underline"
           >
             {t("detailPage.annotate.close", { defaultValue: "닫기" })}
           </button>

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-xl border border-border bg-card">
+    <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-medium text-foreground">
+        <span className="text-xs font-dpe-medium text-foreground">
           {t("detailPage.promptEdit.header")}
         </span>
         {unlimited || editLimit > 0 ? (
@@ -158,7 +158,7 @@ export function SpecPromptEditPanel({
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
             aria-label={t("detailPage.promptEdit.send")}
           >
             {busy ? (

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-xl border border-border bg-card">
+    <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-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
+        <span className="text-xs font-dpe-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
         {unlimited || editLimit > 0 ? (
           <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
         ) : null}
@@ -122,7 +122,7 @@ export function SvgPromptEditPanel({
             type="button"
             onClick={send}
             disabled={busy || !input.trim()}
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-dpe-lg bg-primary text-primary-foreground disabled:opacity-40"
             aria-label={t("detailPage.promptEdit.send")}
           >
             {busy ? (

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

@@ -102,7 +102,7 @@ function Cell({
           (e.target as HTMLInputElement).blur();
         }
       }}
-      className="w-full min-w-0 rounded-md border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-900 outline-none focus:border-neutral-400"
+      className="w-full min-w-0 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 py-1.5 text-sm text-dpe-ink-900 outline-none focus:border-dpe-ink-400"
     />
   );
 }
@@ -212,10 +212,10 @@ export const TableInspector = observer(function TableInspector({
               type="button"
               aria-pressed={kind === spec.kind}
               onClick={() => apply({ kind })}
-              className={`h-8 rounded-md border text-xs transition-colors ${
+              className={`h-8 rounded-dpe-md border text-xs transition-colors ${
                 kind === spec.kind
-                  ? "border-neutral-300 bg-neutral-100 font-semibold text-neutral-900"
-                  : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
+                  ? "border-dpe-ink-300 bg-dpe-ink-100 font-dpe-semibold text-dpe-ink-900"
+                  : "border-dpe-ink-200 bg-dpe-surface text-dpe-ink-600 hover:bg-dpe-ink-50"
               }`}
             >
               {t(`detailPage.table.kinds.${kind}`)}
@@ -223,7 +223,7 @@ export const TableInspector = observer(function TableInspector({
           ))}
         </div>
         {spec.kind === "keyvalue" && spec.data.columns.length > 2 ? (
-          <p className="mt-2 text-[11px] text-amber-600">
+          <p className="mt-2 text-[11px] text-dpe-warn-600">
             {t("detailPage.table.hiddenColumns", {
               count: spec.data.columns.length - 2,
             })}
@@ -263,7 +263,7 @@ export const TableInspector = observer(function TableInspector({
                     },
                   })
                 }
-                className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30"
+                className="shrink-0 rounded-dpe-md p-1.5 text-dpe-ink-400 hover:bg-dpe-ink-100 hover:text-dpe-ink-700 disabled:opacity-30"
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </button>
@@ -292,7 +292,7 @@ export const TableInspector = observer(function TableInspector({
                   title={t("detailPage.table.removeRow")}
                   disabled={rowCount <= 1}
                   onClick={() => apply({ data: withRowRemoved(spec.data, row) })}
-                  className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30"
+                  className="shrink-0 rounded-dpe-md p-1.5 text-dpe-ink-400 hover:bg-dpe-ink-100 hover:text-dpe-ink-700 disabled:opacity-30"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </button>
@@ -305,7 +305,7 @@ export const TableInspector = observer(function TableInspector({
               type="button"
               disabled={rowCount >= MAX_ROWS}
               onClick={() => apply({ data: withRowAdded(spec.data) })}
-              className="flex flex-1 items-center justify-center gap-1 rounded-md border border-neutral-200 py-1.5 text-xs text-neutral-600 hover:bg-neutral-50 disabled:opacity-40"
+              className="flex flex-1 items-center justify-center gap-1 rounded-dpe-md border border-dpe-ink-200 py-1.5 text-xs text-dpe-ink-600 hover:bg-dpe-ink-50 disabled:opacity-40"
             >
               <Rows3 className="h-3.5 w-3.5" />
               {t("detailPage.table.addRow")}
@@ -315,14 +315,14 @@ export const TableInspector = observer(function TableInspector({
               disabled={!isGrid || columnCount >= MAX_COLUMNS}
               onClick={() => apply({ data: withColumnAdded(spec.data) })}
               title={isGrid ? undefined : t("detailPage.table.addColumnGridOnly")}
-              className="flex flex-1 items-center justify-center gap-1 rounded-md border border-neutral-200 py-1.5 text-xs text-neutral-600 hover:bg-neutral-50 disabled:opacity-40"
+              className="flex flex-1 items-center justify-center gap-1 rounded-dpe-md border border-dpe-ink-200 py-1.5 text-xs text-dpe-ink-600 hover:bg-dpe-ink-50 disabled:opacity-40"
             >
               <Columns3 className="h-3.5 w-3.5" />
               {t("detailPage.table.addColumn")}
             </button>
           </div>
 
-          <p className="mt-2 text-[11px] text-neutral-400">
+          <p className="mt-2 text-[11px] text-dpe-ink-400">
             {notice ?? `${t("detailPage.table.pasteHint")} ${t("detailPage.table.canvasHint")}`}
           </p>
         </div>
@@ -355,12 +355,12 @@ export const TableInspector = observer(function TableInspector({
               <button
                 type="button"
                 onClick={() => apply(autoColumnWidths(spec))}
-                className="flex items-center gap-1 rounded-md border border-neutral-200 px-2 py-1.5 text-xs text-neutral-600 hover:bg-neutral-50"
+                className="flex items-center gap-1 rounded-dpe-md border border-dpe-ink-200 px-2 py-1.5 text-xs text-dpe-ink-600 hover:bg-dpe-ink-50"
               >
                 <RotateCcw className="h-3.5 w-3.5" />
                 {t("detailPage.table.autoWidths")}
               </button>
-              <span className="text-[11px] text-neutral-400">
+              <span className="text-[11px] text-dpe-ink-400">
                 {t("detailPage.table.autoWidthsHint")}
               </span>
             </div>
@@ -389,7 +389,7 @@ export const TableInspector = observer(function TableInspector({
           )}
 
           <div className="flex items-center gap-1.5">
-            <span className="w-16 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-16 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.table.align")}
             </span>
             <div className="flex flex-1 gap-1">
@@ -405,10 +405,10 @@ export const TableInspector = observer(function TableInspector({
                     next[columnCount - 1] = align;
                     setOptions({ align: next });
                   }}
-                  className={`h-7 flex-1 rounded-md border text-[11px] ${
+                  className={`h-7 flex-1 rounded-dpe-md border text-[11px] ${
                     (spec.options.align[columnCount - 1] ?? "left") === align
-                      ? "border-neutral-300 bg-neutral-100 font-semibold text-neutral-900"
-                      : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
+                      ? "border-dpe-ink-300 bg-dpe-ink-100 font-dpe-semibold text-dpe-ink-900"
+                      : "border-dpe-ink-200 bg-dpe-surface text-dpe-ink-600 hover:bg-dpe-ink-50"
                   }`}
                 >
                   {t(`detailPage.table.aligns.${align}`)}
@@ -416,7 +416,7 @@ export const TableInspector = observer(function TableInspector({
               ))}
             </div>
           </div>
-          <p className="text-[11px] text-neutral-400">
+          <p className="text-[11px] text-dpe-ink-400">
             {t("detailPage.table.alignHint")}
           </p>
         </div>
@@ -490,7 +490,7 @@ export const TableInspector = observer(function TableInspector({
             ) : null}
           </div>
           <div className="flex items-center gap-2">
-            <span className="w-20 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-20 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.table.firstColor")}
             </span>
             <ColorInput
@@ -499,7 +499,7 @@ export const TableInspector = observer(function TableInspector({
             />
           </div>
           <div className="flex items-center gap-2">
-            <span className="w-20 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-20 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.table.textColor")}
             </span>
             <ColorInput
@@ -530,7 +530,7 @@ export const TableInspector = observer(function TableInspector({
       <Section title={t("detailPage.table.type")}>
         <div className="flex flex-col gap-2">
           <div className="flex items-center gap-2">
-            <span className="w-20 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-20 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.table.fontSize")}
             </span>
             <NumberField
@@ -542,7 +542,7 @@ export const TableInspector = observer(function TableInspector({
             />
           </div>
           <div className="flex items-center gap-2">
-            <span className="w-20 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-20 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.table.padX")}
             </span>
             <NumberField
@@ -554,7 +554,7 @@ export const TableInspector = observer(function TableInspector({
             />
           </div>
           <div className="flex items-center gap-2">
-            <span className="w-20 shrink-0 text-[11px] text-neutral-500">
+            <span className="w-20 shrink-0 text-[11px] text-dpe-ink-500">
               {t("detailPage.table.padY")}
             </span>
             <NumberField
@@ -572,12 +572,12 @@ export const TableInspector = observer(function TableInspector({
         <button
           type="button"
           onClick={() => detachTable(el)}
-          className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 py-1.5 text-xs text-neutral-600 hover:bg-neutral-50"
+          className="flex w-full items-center justify-center gap-1.5 rounded-dpe-md border border-dpe-ink-200 py-1.5 text-xs text-dpe-ink-600 hover:bg-dpe-ink-50"
         >
           <Unlink className="h-3.5 w-3.5" />
           {t("detailPage.table.detachAction")}
         </button>
-        <p className="mt-1.5 text-[11px] text-neutral-400">
+        <p className="mt-1.5 text-[11px] text-dpe-ink-400">
           {t("detailPage.table.detachHint")}
         </p>
       </Section>