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

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

@@ -67,10 +67,10 @@ function IconButton({
         onClick();
       }}
       className={[
-        "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
+        "flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors",
         disabled
-          ? "cursor-not-allowed text-neutral-300"
-          : "text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900",
+          ? "cursor-not-allowed text-dpe-ink-300"
+          : "text-dpe-ink-500 hover:bg-dpe-ink-100 hover:text-dpe-ink-900",
       ].join(" ")}
     >
       {children}
@@ -110,7 +110,7 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
   };
 
   return (
-    <div className="flex flex-col items-center gap-0.5 rounded-2xl border border-neutral-200 bg-white/95 px-1 py-1.5 shadow-md backdrop-blur-sm">
+    <div className="flex flex-col items-center gap-0.5 rounded-2xl border border-dpe-ink-200 bg-dpe-surface/95 px-1 py-1.5 shadow-md backdrop-blur-sm">
       <button
         type="button"
         title={t("detailPage.pageToolbar.aiGenerate")}
@@ -119,9 +119,9 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
           e.stopPropagation();
           s.openSidePanel?.("ai-generate");
         }}
-        className="flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-100"
+        className="flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors hover:bg-dpe-ink-100"
       >
-        <Sparkles size={17} className="text-fuchsia-500" />
+        <Sparkles size={17} className="text-dpe-ai" />
       </button>
 
       {/* 이 화면만 마크업째 다시 만든다 — 슬롯 카피 편집과 달리 칸 수·표 같은 구조가
@@ -139,13 +139,13 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
             e.stopPropagation();
             requestSectionReauthor(p.id);
           }}
-          className="flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-100"
+          className="flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors hover:bg-dpe-ink-100"
         >
-          <Wand2 size={16} className="text-violet-500" />
+          <Wand2 size={16} className="text-dpe-ai-alt" />
         </button>
       ) : null}
 
-      <hr className="my-0.5 w-5 border-neutral-200" />
+      <hr className="my-0.5 w-5 border-dpe-ink-200" />
 
       <IconButton label={t("detailPage.pageToolbar.moveUp")} onClick={() => p.setZIndex(index - 1)} disabled={isFirst}>
         <ChevronUp size={17} />
@@ -160,7 +160,7 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
         <Plus size={17} />
       </IconButton>
 
-      <hr className="my-0.5 w-5 border-neutral-200" />
+      <hr className="my-0.5 w-5 border-dpe-ink-200" />
 
       <IconButton label={t("detailPage.pageToolbar.delete")} onClick={() => s.deletePages([p.id])} disabled={!canDelete}>
         <Trash2 size={16} />

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

@@ -138,12 +138,12 @@ const PageRow = observer(function PageRow({
         if (!isDragging) store.selectPage(page.id);
       }}
       className={[
-        "select-none rounded-xl border bg-white p-2 transition-shadow",
+        "select-none rounded-dpe-xl border bg-dpe-surface p-2 transition-shadow",
         isDragging
-          ? "border-neutral-800 shadow-lg"
+          ? "border-dpe-ink-800 shadow-lg"
           : active
-            ? "cursor-pointer border-neutral-800 shadow-sm"
-            : "cursor-pointer border-neutral-200 hover:border-neutral-300",
+            ? "cursor-pointer border-dpe-ink-800 shadow-sm"
+            : "cursor-pointer border-dpe-ink-200 hover:border-dpe-ink-300",
       ].join(" ")}
     >
       <div className="flex items-center gap-2">
@@ -151,14 +151,14 @@ const PageRow = observer(function PageRow({
         {...listeners}
         aria-label={t("detailPage.pages.reorderHandle")}
         className={[
-          "shrink-0 touch-none rounded text-neutral-300 hover:text-neutral-500",
+          "shrink-0 touch-none rounded text-dpe-ink-300 hover:text-dpe-ink-500",
           isDragging ? "cursor-grabbing" : "cursor-grab",
         ].join(" ")}
       >
         <GripVertical aria-hidden="true" size={16} />
       </span>
       <div
-        className="relative shrink-0 overflow-hidden rounded-md border border-neutral-100 bg-neutral-50"
+        className="relative shrink-0 overflow-hidden rounded-dpe-md border border-dpe-ink-100 bg-dpe-ink-50"
         style={{ width: 64, height: Math.min(80, Math.max(40, 64 * ratio)) }}
       >
         {thumb ? (
@@ -173,11 +173,11 @@ const PageRow = observer(function PageRow({
       </div>
       <div className="min-w-0 flex-1">
         <p className="truncate text-sm">
-          <span className="text-neutral-400">{role}</span>
+          <span className="text-dpe-ink-400">{role}</span>
           {title ? (
             <>
-              <span className="mx-1 text-neutral-300">|</span>
-              <span className="font-bold text-neutral-900">{title}</span>
+              <span className="mx-1 text-dpe-ink-300">|</span>
+              <span className="font-dpe-bold text-dpe-ink-900">{title}</span>
             </>
           ) : null}
         </p>
@@ -196,13 +196,13 @@ const PageRow = observer(function PageRow({
         aria-label={t("detailPage.pages.background")}
         aria-expanded={editingBackground}
         title={t("detailPage.pages.background")}
-        className="h-6 w-6 shrink-0 rounded-md border border-neutral-200 hover:border-neutral-400"
+        className="h-6 w-6 shrink-0 rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-400"
         style={{ background }}
       />
       </div>
       {editingBackground ? (
         <div
-          className="mt-2 border-t border-neutral-100 pt-2"
+          className="mt-2 border-t border-dpe-ink-100 pt-2"
           onClick={(event) => event.stopPropagation()}
         >
           <FillControl
@@ -260,10 +260,10 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-baseline justify-between px-4 py-3">
-        <p className="text-base font-bold text-neutral-900">
+        <p className="text-base font-dpe-bold text-dpe-ink-900">
           {t("detailPage.pages.totalPages", { count: s.pages.length })}
         </p>
-        <p className="text-xs text-neutral-400">
+        <p className="text-xs text-dpe-ink-400">
           {width} × {totalHeight} px
         </p>
       </div>

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

@@ -41,7 +41,7 @@ export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline
   return (
     <div
       data-dp-pages-timeline=""
-      className="pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex items-center gap-1.5 overflow-x-auto border-t border-neutral-200 bg-white/95 px-3 py-1.5 backdrop-blur-sm"
+      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) => {
         const active = page.id === activeId;
@@ -54,10 +54,10 @@ export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline
             aria-current={active ? "true" : undefined}
             title={typeof page.name === "string" ? page.name : `${index + 1}`}
             className={[
-              "flex h-10 w-8 shrink-0 items-center justify-center overflow-hidden rounded border text-[11px] font-semibold transition-colors",
+              "flex h-10 w-8 shrink-0 items-center justify-center overflow-hidden rounded border text-[11px] font-dpe-semibold transition-colors",
               active
-                ? "border-neutral-900 bg-neutral-900 text-white"
-                : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-400",
+                ? "border-dpe-ink-900 bg-dpe-ink-900 text-dpe-on-accent"
+                : "border-dpe-ink-200 bg-dpe-surface text-dpe-ink-500 hover:border-dpe-ink-400",
             ].join(" ")}
           >
             {thumb ? (

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

@@ -116,7 +116,7 @@ export function DetailPagePhotosPanel({
         type="button"
         disabled={!uploadFile || busy}
         onClick={() => inputRef.current?.click()}
-        className="flex items-center justify-center gap-2 rounded-lg border border-dashed border-neutral-300 px-3 py-4 text-sm font-medium text-neutral-600 hover:border-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
+        className="flex items-center justify-center gap-2 rounded-dpe-lg border border-dashed border-dpe-ink-300 px-3 py-4 text-sm font-dpe-medium text-dpe-ink-600 hover:border-dpe-ink-400 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {busy ? (
           <Loader2 aria-hidden="true" className="animate-spin" size={16} />
@@ -137,7 +137,7 @@ export function DetailPagePhotosPanel({
         }}
       />
 
-      {error ? <p className="text-xs text-red-600">{error}</p> : null}
+      {error ? <p className="text-xs text-dpe-danger-600">{error}</p> : null}
 
       {recent.length ? (
         <div className="grid grid-cols-3 gap-2">
@@ -146,7 +146,7 @@ export function DetailPagePhotosPanel({
               key={url}
               type="button"
               onClick={() => insertPersonalImage(store, url)}
-              className="aspect-square overflow-hidden rounded-lg border border-neutral-200 hover:border-neutral-400"
+              className="aspect-square overflow-hidden rounded-dpe-lg border border-dpe-ink-200 hover:border-dpe-ink-400"
               title={t("detailPage.shapes.insertHint")}
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -164,19 +164,19 @@ export function DetailPagePhotosPanel({
       />
 
       {!configured ? (
-        <p className="px-1 text-xs leading-relaxed text-neutral-500">
+        <p className="px-1 text-xs leading-relaxed text-dpe-ink-500">
           {t("detailPage.photos.stockUnavailable")}
         </p>
       ) : stock.isLoading ? (
-        <div className="flex justify-center py-6 text-neutral-400">
+        <div className="flex justify-center py-6 text-dpe-ink-400">
           <Loader2 aria-hidden="true" className="animate-spin" size={20} />
         </div>
       ) : stock.error ? (
-        <p className="text-xs text-red-600">
+        <p className="text-xs text-dpe-danger-600">
           {t("detailPage.photos.stockFailed")}
         </p>
       ) : photos.length === 0 ? (
-        <div className="flex flex-col items-center gap-2 py-6 text-center text-neutral-400">
+        <div className="flex flex-col items-center gap-2 py-6 text-center text-dpe-ink-400">
           <ImageOff aria-hidden="true" size={20} />
           <p className="text-xs">{t("detailPage.photos.stockEmpty")}</p>
         </div>
@@ -186,7 +186,7 @@ export function DetailPagePhotosPanel({
             {photos.map((photo) => (
               <div
                 key={photo.id}
-                className="group relative overflow-hidden rounded-lg border border-neutral-200 hover:border-neutral-400"
+                className="group relative overflow-hidden rounded-dpe-lg border border-dpe-ink-200 hover:border-dpe-ink-400"
               >
                 <button
                   type="button"
@@ -203,10 +203,10 @@ export function DetailPagePhotosPanel({
                     className="h-24 w-full object-cover transition group-hover:opacity-90"
                   />
                   {inserting === photo.id ? (
-                    <span className="absolute inset-0 flex items-center justify-center bg-white/70">
+                    <span className="absolute inset-0 flex items-center justify-center bg-dpe-surface/70">
                       <Loader2
                         aria-hidden="true"
-                        className="animate-spin text-neutral-500"
+                        className="animate-spin text-dpe-ink-500"
                         size={18}
                       />
                     </span>
@@ -217,7 +217,7 @@ export function DetailPagePhotosPanel({
                   href={photo.pageUrl}
                   target="_blank"
                   rel="noreferrer noopener"
-                  className="absolute bottom-0 left-0 right-0 hidden truncate bg-black/60 px-1.5 py-1 text-[10px] text-white group-hover:block hover:underline"
+                  className="absolute bottom-0 left-0 right-0 hidden truncate bg-dpe-scrim/60 px-1.5 py-1 text-[10px] text-dpe-on-accent group-hover:block hover:underline"
                 >
                   {photo.photographer}
                 </a>
@@ -230,7 +230,7 @@ export function DetailPagePhotosPanel({
               type="button"
               disabled={stock.isFetchingNextPage}
               onClick={() => void stock.fetchNextPage()}
-              className="mx-auto flex items-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:border-neutral-400 disabled:opacity-50"
+              className="mx-auto flex items-center gap-1.5 rounded-dpe-md border border-dpe-ink-200 px-3 py-1.5 text-xs font-dpe-medium text-dpe-ink-600 hover:border-dpe-ink-400 disabled:opacity-50"
             >
               {stock.isFetchingNextPage ? (
                 <Loader2 aria-hidden="true" className="animate-spin" size={12} />
@@ -241,7 +241,7 @@ export function DetailPagePhotosPanel({
         </>
       )}
 
-      <p className="mt-auto px-1 pt-1 text-xs leading-relaxed text-neutral-500">
+      <p className="mt-auto px-1 pt-1 text-xs leading-relaxed text-dpe-ink-500">
         {t("detailPage.photos.hint")}{" "}
         <a
           href="https://www.pexels.com"