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

package/components/detail-page/detail-page-font-picker.tsx

@@ -87,14 +87,14 @@ export function DetailPageFontPicker({
         />
       </span>
       {font.latinOnly ? (
-        <span className="shrink-0 rounded border border-neutral-200 px-1 py-0.5 text-[10px] leading-none text-neutral-500">
+        <span className="shrink-0 rounded border border-dpe-ink-200 px-1 py-0.5 text-[10px] leading-none text-dpe-ink-500">
           {t("detailPage.properties.fontLatinOnly")}
         </span>
       ) : null}
       {loading === font.family ? (
         <LoaderCircle
           aria-label={t("detailPage.properties.fontLoading")}
-          className="shrink-0 animate-spin text-neutral-500"
+          className="shrink-0 animate-spin text-dpe-ink-500"
           size={15}
         />
       ) : value === font.family ? (
@@ -116,10 +116,10 @@ export function DetailPageFontPicker({
           type="button"
           aria-label={t("detailPage.properties.chooseFont")}
           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"
+          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"
         >
           <span className="min-w-0 truncate">{selected?.label ?? value}</span>
-          <ChevronDown aria-hidden="true" className="shrink-0 text-neutral-400" size={14} />
+          <ChevronDown aria-hidden="true" className="shrink-0 text-dpe-ink-400" size={14} />
         </button>
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
@@ -128,12 +128,12 @@ export function DetailPageFontPicker({
           align="start"
           sideOffset={8}
           collisionPadding={12}
-          className="z-[120] w-[340px] overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-[0_10px_32px_rgba(0,0,0,0.14)]"
+          className="z-[120] w-[340px] overflow-hidden rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface shadow-[0_10px_32px_rgba(0,0,0,0.14)]"
         >
           <div
             role="group"
             aria-label={t("detailPage.properties.fontTagFilter")}
-            className="flex flex-wrap gap-1 border-b border-neutral-100 px-2 py-2"
+            className="flex flex-wrap gap-1 border-b border-dpe-ink-100 px-2 py-2"
           >
             <button
               type="button"
@@ -141,8 +141,8 @@ export function DetailPageFontPicker({
               onClick={() => setTags([])}
               className={`rounded-full border px-2 py-0.5 text-[11px] leading-4 transition-colors ${
                 tags.length === 0
-                  ? "border-neutral-900 bg-neutral-900 text-white"
-                  : "border-neutral-200 text-neutral-600 hover:bg-neutral-50"
+                  ? "border-dpe-ink-900 bg-dpe-ink-900 text-dpe-on-accent"
+                  : "border-dpe-ink-200 text-dpe-ink-600 hover:bg-dpe-ink-50"
               }`}
             >
               {t("detailPage.properties.fontTagAll")}
@@ -155,8 +155,8 @@ export function DetailPageFontPicker({
                 onClick={() => toggleTag(tag)}
                 className={`rounded-full border px-2 py-0.5 text-[11px] leading-4 transition-colors ${
                   tags.includes(tag)
-                    ? "border-neutral-900 bg-neutral-900 text-white"
-                    : "border-neutral-200 text-neutral-600 hover:bg-neutral-50"
+                    ? "border-dpe-ink-900 bg-dpe-ink-900 text-dpe-on-accent"
+                    : "border-dpe-ink-200 text-dpe-ink-600 hover:bg-dpe-ink-50"
                 }`}
               >
                 {t(`detailPage.fontTags.${tag}`)}
@@ -202,17 +202,17 @@ export function DetailPageFontPicker({
             </CommandList>
           </Command>
           {error ? (
-            <p role="alert" className="border-t border-red-100 bg-red-50 px-3 py-2 text-xs text-red-600">
+            <p role="alert" className="border-t border-dpe-danger-100 bg-dpe-danger-50 px-3 py-2 text-xs text-dpe-danger-600">
               {t("detailPage.properties.fontLoadFailed")}
             </p>
           ) : null}
           {selected ? (
-            <div className="border-t border-neutral-100 px-3 py-2 text-[11px] leading-4 text-neutral-500">
+            <div className="border-t border-dpe-ink-100 px-3 py-2 text-[11px] leading-4 text-dpe-ink-500">
               <a
                 href={selected.licenseUrl}
                 target="_blank"
                 rel="noreferrer"
-                className="font-medium text-neutral-700 underline decoration-neutral-300 underline-offset-2"
+                className="font-dpe-medium text-dpe-ink-700 underline decoration-dpe-ink-300 underline-offset-2"
               >
                 {t("detailPage.properties.fontLicense")}: {selected.licenseName}
               </a>
@@ -223,7 +223,7 @@ export function DetailPageFontPicker({
               ) : null}
             </div>
           ) : null}
-          <PopoverPrimitive.Arrow className="fill-white" />
+          <PopoverPrimitive.Arrow className="fill-dpe-on-accent" />
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>

package/components/detail-page/detail-page-history-buttons.tsx

@@ -46,10 +46,10 @@ function HistoryButton({
       disabled={disabled}
       onClick={onClick}
       className={[
-        "flex h-9 w-9 items-center justify-center rounded-md transition-colors",
+        "flex h-9 w-9 items-center justify-center rounded-dpe-md transition-colors",
         disabled
-          ? "cursor-not-allowed text-neutral-300"
-          : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900",
+          ? "cursor-not-allowed text-dpe-ink-300"
+          : "text-dpe-ink-600 hover:bg-dpe-ink-100 hover:text-dpe-ink-900",
       ].join(" ")}
     >
       {children}

package/components/detail-page/detail-page-host-context.tsx

@@ -429,6 +429,69 @@ export interface DetailPageHostSlots {
    * 도메인을 알아야 묶이므로 앱이 꽂는다. 안 꽂으면 탭 없이 브랜드 자산만 뜬다.
    */
   AuthoredImagesPanel?: ComponentType<{ store: unknown }>;
+
+  /**
+   * 상단 헤더를 통째로 갈아 끼운다.
+   *
+   * 색·모서리는 토큰(`tokens.css`)으로 바꾸면 되지만, "무엇이 어디에 놓이는가" 는
+   * 토큰이 못 바꾼다. 앱마다 헤더에 걸고 싶은 것이 다르므로 여기서 연다.
+   *
+   * 어려운 조각(되돌리기·내보내기 대화상자)은 만들어서 `parts` 로 넘긴다 — 그것까지
+   * 다시 만들라고 하면 슬롯이 아니라 포크가 된다.
+   */
+  EditorHeader?: ComponentType<EditorHeaderSlotProps>;
+
+  /**
+   * 우측 인스펙터를 감싸거나 갈아 끼운다. 기본 인스펙터는 `defaultInspector` 로 온다 —
+   * 자기 크롬만 두르고 속은 그대로 쓰는 것이 보통이다.
+   */
+  EditorInspector?: ComponentType<EditorInspectorSlotProps>;
+
+  /**
+   * 좌측 레일+패널 껍데기를 갈아 끼운다. 섹션 목록(탭·패널 컴포넌트)은 그대로 넘어가므로
+   * 앱은 배치만 다시 짜면 된다.
+   */
+  EditorSidebar?: ComponentType<EditorSidebarSlotProps>;
+}
+
+/** 헤더 슬롯이 받는 것. */
+export interface EditorHeaderSlotProps {
+  /** 표시용 이름. 비어 있으면 편집기가 기본 문구를 채워서 준다. */
+  productName: string;
+  onBack?: () => void;
+  save: {
+    run: () => void;
+    saving: boolean;
+    /** 방금 저장됐다. 잠시 뒤 스스로 꺼진다. */
+    ok: boolean;
+    error: string | null;
+  };
+  /** 편집기가 만들어 주는 조각들. 자리만 정하면 된다. */
+  parts: {
+    history: ReactNode;
+    download: ReactNode;
+    /** 앱이 `headerActions` 로 넘긴 것(크레딧·알림·언어). */
+    actions: ReactNode;
+  };
+}
+
+/** 인스펙터 슬롯이 받는 것. */
+export interface EditorInspectorSlotProps {
+  store: unknown;
+  defaultInspector: ReactNode;
+}
+
+/** 좌측 껍데기 슬롯이 받는 것. */
+export interface EditorSidebarSlotProps {
+  store: unknown;
+  sections: ReadonlyArray<{
+    name: string;
+    Tab: ComponentType<Record<string, unknown>>;
+    Panel: ComponentType<{ store: unknown }>;
+    visibleInList?: boolean;
+  }>;
+  /** 처음 열어 둘 섹션 이름. */
+  defaultSection: string;
 }
 
 export interface DetailPageHost {

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

@@ -142,20 +142,20 @@ export function DetailPageIconsPanel({ store }: { store: unknown }) {
 
       {group === "logos" ? (
         // 파일은 CC0지만 로고 자체는 상표다. 안내를 지우면 이용 조건을 어기는 쪽으로 샌다.
-        <p className="mx-3 mt-2 shrink-0 rounded-md bg-amber-50 px-2 py-1.5 text-[11px] leading-relaxed text-amber-800">
+        <p className="mx-3 mt-2 shrink-0 rounded-dpe-md bg-dpe-warn-50 px-2 py-1.5 text-[11px] leading-relaxed text-dpe-warn-800">
           {t("detailPage.icons.logoTrademark")}
         </p>
       ) : null}
 
       <div ref={scrollRef} className="mt-3 min-h-0 flex-1 overflow-y-auto px-3">
         {icons.isPending ? (
-          <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>
         ) : icons.isError ? (
-          <p className="text-xs text-red-600">{t("detailPage.icons.failed")}</p>
+          <p className="text-xs text-dpe-danger-600">{t("detailPage.icons.failed")}</p>
         ) : cells.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.icons.empty")}</p>
           </div>
@@ -169,7 +169,7 @@ export function DetailPageIconsPanel({ store }: { store: unknown }) {
                   onClick={() => insert(item, markup)}
                   title={t("detailPage.shapes.insertHint")}
                   aria-label={item.id}
-                  className="flex aspect-square items-center justify-center rounded-lg border border-neutral-200 p-1.5 hover:border-neutral-400"
+                  className="flex aspect-square items-center justify-center rounded-dpe-lg border border-dpe-ink-200 p-1.5 hover:border-dpe-ink-400"
                 >
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
@@ -182,7 +182,7 @@ export function DetailPageIconsPanel({ store }: { store: unknown }) {
             </div>
             <div ref={sentinelRef} aria-hidden="true" className="h-px" />
             {isFetchingNextPage ? (
-              <div className="flex justify-center py-3 text-neutral-400">
+              <div className="flex justify-center py-3 text-dpe-ink-400">
                 <Loader2 aria-hidden="true" className="animate-spin" size={16} />
               </div>
             ) : hasNextPage ? (
@@ -190,13 +190,13 @@ export function DetailPageIconsPanel({ store }: { store: unknown }) {
               <button
                 type="button"
                 onClick={() => void fetchNextPage()}
-                className="mt-2 w-full rounded-md border border-neutral-200 py-1.5 text-[11px] font-medium text-neutral-500 hover:bg-neutral-50"
+                className="mt-2 w-full rounded-dpe-md border border-dpe-ink-200 py-1.5 text-[11px] font-dpe-medium text-dpe-ink-500 hover:bg-dpe-ink-50"
               >
                 {t("detailPage.icons.loadMore")}
               </button>
             ) : truncated ? (
               // 조용히 자르면 "이게 전부"로 읽힌다.
-              <p className="mt-2 px-1 text-[11px] text-neutral-400">
+              <p className="mt-2 px-1 text-[11px] text-dpe-ink-400">
                 {t("detailPage.icons.truncated")}
               </p>
             ) : null}
@@ -204,7 +204,7 @@ export function DetailPageIconsPanel({ store }: { store: unknown }) {
         )}
       </div>
 
-      <p className="shrink-0 border-t border-neutral-100 px-3 py-2 text-[11px] leading-relaxed text-neutral-500">
+      <p className="shrink-0 border-t border-dpe-ink-100 px-3 py-2 text-[11px] leading-relaxed text-dpe-ink-500">
         {t("detailPage.icons.licenseHint")}
       </p>
     </div>
@@ -226,7 +226,7 @@ function SegmentedGroup<T extends string>({
     <div
       role="group"
       aria-label={label}
-      className="flex flex-1 rounded-md border border-neutral-200 p-0.5"
+      className="flex flex-1 rounded-dpe-md border border-dpe-ink-200 p-0.5"
     >
       {options.map((option) => {
         const active = option.value === value;
@@ -236,10 +236,10 @@ function SegmentedGroup<T extends string>({
             type="button"
             aria-pressed={active}
             onClick={() => onChange(option.value)}
-            className={`flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors ${
+            className={`flex-1 rounded px-2 py-1 text-[11px] font-dpe-medium transition-colors ${
               active
-                ? "bg-neutral-900 text-white"
-                : "text-neutral-500 hover:bg-neutral-100"
+                ? "bg-dpe-ink-900 text-dpe-on-accent"
+                : "text-dpe-ink-500 hover:bg-dpe-ink-100"
             }`}
           >
             {option.label}

package/components/detail-page/detail-page-konva-json-preview.tsx

@@ -415,30 +415,30 @@ export function DetailPageKonvaJsonPreview({
   const scale = 0.48;
 
   return (
-    <div className="h-screen overflow-auto bg-neutral-100">
-      <div className="sticky top-0 z-10 flex h-12 items-center justify-between border-b border-neutral-200 bg-white px-4">
+    <div className="h-screen overflow-auto bg-dpe-ink-100">
+      <div className="sticky top-0 z-10 flex h-12 items-center justify-between border-b border-dpe-ink-200 bg-dpe-surface px-4">
         <div>
-          <p className="text-sm font-semibold text-neutral-950">Native Konva JSON Preview</p>
-          <p className="text-xs text-neutral-500">
+          <p className="text-sm font-dpe-semibold text-dpe-ink-950">Native Konva JSON Preview</p>
+          <p className="text-xs text-dpe-ink-500">
             Canvas 없이 JSON을 직접 렌더링하는 최소 fallback
           </p>
         </div>
         <button
           type="button"
           onClick={() => setShowSlots((value) => !value)}
-          className="inline-flex h-8 items-center rounded-md border border-neutral-200 px-3 text-xs font-semibold text-neutral-700"
+          className="inline-flex h-8 items-center rounded-dpe-md border border-dpe-ink-200 px-3 text-xs font-dpe-semibold text-dpe-ink-700"
         >
           {showSlots ? "Hide slots" : "Show slots"}
         </button>
       </div>
       <div className="mx-auto flex w-full max-w-[480px] flex-col gap-6 px-4 py-6">
         {pages.map((page, pageIndex) => (
-          <section key={page.id} className="overflow-hidden rounded-md border border-neutral-200 bg-white shadow-sm">
-            <div className="flex items-center justify-between border-b border-neutral-200 px-3 py-2">
-              <span className="text-xs font-semibold text-neutral-800">
+          <section key={page.id} className="overflow-hidden rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface shadow-sm">
+            <div className="flex items-center justify-between border-b border-dpe-ink-200 px-3 py-2">
+              <span className="text-xs font-dpe-semibold text-dpe-ink-800">
                 {page.id || `page-${pageIndex + 1}`}
               </span>
-              <span className="text-xs text-neutral-500">
+              <span className="text-xs text-dpe-ink-500">
                 {Math.round(page.width)} x {Math.round(page.height)}
               </span>
             </div>

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

@@ -167,10 +167,10 @@ function IconButton({
       }}
       className={[
         "flex h-6 w-6 items-center justify-center rounded transition-colors",
-        active ? "text-neutral-800" : "text-neutral-400",
+        active ? "text-dpe-ink-800" : "text-dpe-ink-400",
         disabled
           ? "cursor-not-allowed opacity-30"
-          : "hover:bg-neutral-200/70 hover:text-neutral-800",
+          : "hover:bg-dpe-ink-200/70 hover:text-dpe-ink-800",
       ].join(" ")}
     >
       {children}
@@ -394,15 +394,15 @@ const LayerRow = observer(function LayerRow({
           }
         }}
         className={[
-          "group relative flex items-center gap-1 rounded-md pr-1.5 text-neutral-700",
+          "group relative flex items-center gap-1 rounded-dpe-md pr-1.5 text-dpe-ink-700",
           "min-h-[30px] cursor-default select-none",
           dragging ? "opacity-40" : "",
-          over === "inside" ? "ring-2 ring-inset ring-sky-400" : "",
+          over === "inside" ? "ring-2 ring-inset ring-dpe-select-400" : "",
           selected
-            ? "bg-sky-200 text-sky-950"
+            ? "bg-dpe-select-200 text-dpe-select-950"
             : context.has(el.id)
-              ? "bg-sky-50 text-sky-900 hover:bg-sky-100"
-              : "hover:bg-neutral-100",
+              ? "bg-dpe-select-50 text-dpe-select-900 hover:bg-dpe-select-100"
+              : "hover:bg-dpe-ink-100",
         ].join(" ")}
         style={{ paddingLeft: 6 + depth * 14 }}
       >
@@ -411,7 +411,7 @@ const LayerRow = observer(function LayerRow({
             aria-hidden="true"
             data-testid={`drop-line-${over}`}
             className={[
-              "pointer-events-none absolute inset-x-1 h-0.5 rounded-full bg-sky-500",
+              "pointer-events-none absolute inset-x-1 h-0.5 rounded-full bg-dpe-select-500",
               over === "before" ? "top-0" : "bottom-0",
             ].join(" ")}
           />
@@ -426,7 +426,7 @@ const LayerRow = observer(function LayerRow({
               e.stopPropagation();
               onToggle(el.id);
             }}
-            className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-neutral-400 hover:bg-neutral-200/70 hover:text-neutral-700"
+            className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-dpe-ink-400 hover:bg-dpe-ink-200/70 hover:text-dpe-ink-700"
           >
             {isCollapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
           </button>
@@ -436,13 +436,13 @@ const LayerRow = observer(function LayerRow({
 
         <Icon
           size={14}
-          className={["shrink-0", selected ? "text-sky-500" : "text-neutral-400"].join(" ")}
+          className={["shrink-0", selected ? "text-dpe-select-500" : "text-dpe-ink-400"].join(" ")}
         />
 
         <span
           className={[
             "flex-1 truncate text-[13px]",
-            hidden ? "text-neutral-300 line-through" : "",
+            hidden ? "text-dpe-ink-300 line-through" : "",
           ].join(" ")}
           title={label}
         >
@@ -583,17 +583,17 @@ export const DetailPageLayersPanel = observer(function DetailPageLayersPanel({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex items-center justify-between px-3 py-2.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-neutral-400">
+      <div className="flex items-center justify-between px-3 py-2.5 text-[11px] font-dpe-semibold uppercase tracking-[0.06em] text-dpe-ink-400">
         <span>{t("detailPage.layers.title")}</span>
         {/* 머리글 숫자는 **맨 위 층의 줄 수**다. 그룹을 펴면 줄은 늘지만 레이어 수는
             그대로다 — 펼침 상태에 따라 숫자가 오르내리면 그건 개수가 아니다. */}
-        <span className="tabular-nums text-neutral-300">
+        <span className="tabular-nums text-dpe-ink-300">
           {rows.filter((row) => row.depth === 0).length}
         </span>
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto px-1.5 pb-4">
         {rows.length === 0 ? (
-          <p className="px-2 py-6 text-center text-xs text-neutral-400">
+          <p className="px-2 py-6 text-center text-xs text-dpe-ink-400">
             {t("detailPage.layers.empty")}
           </p>
         ) : (

package/components/detail-page/detail-page-my-images-panel.tsx

@@ -13,6 +13,7 @@ import type {
   BrandAssetKind,
 } from "./detail-page-host-context";
 import { insertPersonalImage } from "../../lib/detail-page/insert-image";
+import { useProgressiveReveal } from "../../lib/detail-page/use-progressive-reveal";
 
 const UPLOAD_ACCEPT = "image/png,image/jpeg,image/webp,image/svg+xml";
 const MAX_UPLOAD_BYTES = 20 * 1024 * 1024;
@@ -52,7 +53,7 @@ export function DetailPageMyImagesPanel({ store }: { store: unknown }) {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex gap-1 border-b border-neutral-200 px-4 pt-3">
+      <div className="flex gap-1 border-b border-dpe-ink-200 px-4 pt-3">
         <SourceTab
           label={t("detailPage.brandAssets.sourceBrand")}
           active={source === "brand"}
@@ -90,10 +91,10 @@ function SourceTab({
       onClick={onClick}
       aria-pressed={active}
       className={
-        "-mb-px border-b-2 px-2.5 pb-2 text-[11px] font-medium " +
+        "-mb-px border-b-2 px-2.5 pb-2 text-[11px] font-dpe-medium " +
         (active
-          ? "border-neutral-800 text-neutral-800"
-          : "border-transparent text-neutral-400 hover:text-neutral-600")
+          ? "border-dpe-ink-800 text-dpe-ink-800"
+          : "border-transparent text-dpe-ink-400 hover:text-dpe-ink-600")
       }
     >
       {label}
@@ -120,6 +121,8 @@ function BrandAssetGallery({ store }: { store: unknown }) {
     staleTime: 4 * 60_000,
   });
   const items = (assetsQuery.data ?? []).filter(isImageAsset);
+  // 브랜드를 옮기면 다시 처음부터 센다.
+  const reveal = useProgressiveReveal(items.length, { resetKey: activeBrandId });
 
   const uploadMutation = useMutation({
     mutationFn: async (file: File) => {
@@ -163,7 +166,7 @@ function BrandAssetGallery({ store }: { store: unknown }) {
     <div className="flex h-full flex-col p-4">
       <BrandPanelHeader onRefresh={() => void assetsQuery.refetch()} />
 
-      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 text-neutral-400 hover:border-neutral-400 hover:text-neutral-600">
+      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-dpe-md border border-dashed border-dpe-ink-300 text-dpe-ink-400 hover:border-dpe-ink-400 hover:text-dpe-ink-600">
         {uploadMutation.isPending ? (
           <Loader2 aria-hidden="true" className="animate-spin" size={18} />
         ) : (
@@ -182,24 +185,24 @@ function BrandAssetGallery({ store }: { store: unknown }) {
       </label>
 
       {brandsLoading || assetsQuery.isLoading ? (
-        <div className="flex flex-1 items-center justify-center text-neutral-400">
+        <div className="flex flex-1 items-center justify-center text-dpe-ink-400">
           <Loader2 aria-hidden="true" className="animate-spin" size={22} />
         </div>
       ) : error || assetsQuery.error ? (
-        <p className="text-xs font-medium text-red-600">
+        <p className="text-xs font-dpe-medium text-dpe-danger-600">
           {error ?? t("detailPage.brandAssets.loadFailed")}
         </p>
       ) : !activeBrand ? (
-        <p className="text-xs text-neutral-400">
+        <p className="text-xs text-dpe-ink-400">
           {t("detailPage.brandAssets.noBrand")}
         </p>
       ) : items.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-neutral-400">
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-dpe-ink-400">
           <ImageOff aria-hidden="true" size={22} />
           <p className="text-xs">{t("detailPage.brandAssets.imagesEmpty")}</p>
           <Link
             href="/branding/moodboard"
-            className="inline-flex items-center gap-1 text-[11px] font-medium text-neutral-600 underline underline-offset-2"
+            className="inline-flex items-center gap-1 text-[11px] font-dpe-medium text-dpe-ink-600 underline underline-offset-2"
           >
             {t("detailPage.brandAssets.openMoodboard")}
             <ExternalLink size={11} />
@@ -207,10 +210,11 @@ function BrandAssetGallery({ store }: { store: unknown }) {
         </div>
       ) : (
         <div className="grid grid-cols-2 gap-2 overflow-y-auto">
-          {items.map((asset) => (
+          {items.slice(0, reveal.visible).map((asset) => (
             <div
               key={asset.id}
-              className="group relative overflow-hidden rounded-md border border-neutral-200 hover:border-neutral-500"
+              data-dpe-part="asset-card"
+              className="group relative overflow-hidden rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-500"
             >
               <button
                 type="button"
@@ -228,23 +232,34 @@ function BrandAssetGallery({ store }: { store: unknown }) {
                 <img
                   src={asset.download_url ?? ""}
                   crossOrigin="anonymous"
+                  loading="lazy"
+                  decoding="async"
                   alt={asset.display_name ?? asset.filename}
                   className="h-24 w-full object-cover transition group-hover:opacity-90"
                 />
               </button>
-              <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-sm bg-black/70 px-1.5 py-0.5 text-[10px] text-white">
+              <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-dpe-sm bg-dpe-scrim/70 px-1.5 py-0.5 text-[10px] text-dpe-on-accent">
                 {asset.display_name ?? asset.filename}
               </span>
               <button
                 type="button"
                 onClick={() => deleteMutation.mutate(asset)}
-                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-md bg-white/95 text-neutral-400 shadow-sm hover:text-red-600 group-hover:flex"
+                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-dpe-md bg-dpe-surface/95 text-dpe-ink-400 shadow-sm hover:text-dpe-danger-600 group-hover:flex"
                 aria-label={t("detailPage.brandAssets.delete")}
               >
                 <Trash2 aria-hidden="true" size={13} />
               </button>
             </div>
           ))}
+          {reveal.hasMore && (
+            <div
+              ref={reveal.sentinelRef}
+              data-testid="brand-assets-sentinel"
+              className="col-span-2 flex h-10 items-center justify-center text-dpe-ink-300"
+            >
+              <Loader2 aria-hidden="true" className="animate-spin" size={16} />
+            </div>
+          )}
         </div>
       )}
     </div>

package/components/detail-page/detail-page-my-shapes-panel.tsx

@@ -84,7 +84,7 @@ export function DetailPageMyShapesPanel({ store }: { store: unknown }) {
     <div className="flex h-full flex-col p-4">
       <BrandPanelHeader onRefresh={() => void assetsQuery.refetch()} />
 
-      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 text-neutral-400 hover:border-neutral-400 hover:text-neutral-600">
+      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-dpe-md border border-dashed border-dpe-ink-300 text-dpe-ink-400 hover:border-dpe-ink-400 hover:text-dpe-ink-600">
         {uploadMutation.isPending ? (
           <Loader2 aria-hidden="true" className="animate-spin" size={18} />
         ) : (
@@ -115,19 +115,19 @@ export function DetailPageMyShapesPanel({ store }: { store: unknown }) {
       </label>
 
       {brandsLoading || assetsQuery.isLoading ? (
-        <div className="flex flex-1 items-center justify-center text-neutral-400">
+        <div className="flex flex-1 items-center justify-center text-dpe-ink-400">
           <Loader2 aria-hidden="true" className="animate-spin" size={22} />
         </div>
       ) : assetsQuery.error ? (
-        <p className="text-xs font-medium text-red-600">
+        <p className="text-xs font-dpe-medium text-dpe-danger-600">
           {t("detailPage.brandAssets.loadFailed")}
         </p>
       ) : !activeBrand ? (
-        <p className="text-xs text-neutral-400">
+        <p className="text-xs text-dpe-ink-400">
           {t("detailPage.brandAssets.noBrand")}
         </p>
       ) : items.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-neutral-400">
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-dpe-ink-400">
           <Shapes aria-hidden="true" size={22} />
           <p className="text-xs">{t("detailPage.brandAssets.shapesEmpty")}</p>
         </div>
@@ -136,7 +136,7 @@ export function DetailPageMyShapesPanel({ store }: { store: unknown }) {
           {items.map((asset) => (
             <div
               key={asset.id}
-              className="group relative aspect-square rounded-md border border-neutral-200 hover:border-neutral-500"
+              className="group relative aspect-square rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-500"
             >
               <button
                 type="button"
@@ -146,7 +146,7 @@ export function DetailPageMyShapesPanel({ store }: { store: unknown }) {
                 title={t("detailPage.brandAssets.insertHint")}
               >
                 {insertingId === asset.id ? (
-                  <Loader2 className="animate-spin text-neutral-400" size={18} />
+                  <Loader2 className="animate-spin text-dpe-ink-400" size={18} />
                 ) : (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
@@ -160,7 +160,7 @@ export function DetailPageMyShapesPanel({ store }: { store: unknown }) {
               <button
                 type="button"
                 onClick={() => deleteMutation.mutate(asset)}
-                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-md bg-white/95 text-neutral-400 shadow-sm hover:text-red-600 group-hover:flex"
+                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-dpe-md bg-dpe-surface/95 text-dpe-ink-400 shadow-sm hover:text-dpe-danger-600 group-hover:flex"
                 aria-label={t("detailPage.brandAssets.delete")}
               >
                 <Trash2 aria-hidden="true" size={13} />