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

package/components/ui/button.tsx

@@ -5,13 +5,13 @@ import { Slot } from "radix-ui"
 import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-dpe-md text-sm font-dpe-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-dpe-on-accent hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
@@ -22,11 +22,11 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        xs: "h-6 gap-1 rounded-dpe-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-dpe-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-dpe-md px-6 has-[>svg]:px-4",
         icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-6 rounded-dpe-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
       },

package/components/ui/command.tsx

@@ -20,7 +20,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "flex h-full w-full flex-col overflow-hidden rounded-dpe-md bg-popover text-popover-foreground",
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const CommandDialog = ({
             Search and run available commands.
           </DialogDescription>
         </DialogHeader>
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-dpe-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -66,7 +66,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-dpe-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -109,7 +109,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-dpe-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}
@@ -137,7 +137,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-dpe-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
       className,
     )}
     {...props}

package/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[115] bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[115] bg-dpe-scrim/50",
         className,
       )}
       {...props}
@@ -64,7 +64,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[115] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[115] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-dpe-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className,
         )}
         onOpenAutoFocus={(event) => {
@@ -134,7 +134,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg leading-none font-dpe-semibold", className)}
       {...props}
     />
   );

package/components/ui/label.tsx

@@ -13,7 +13,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-dpe-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}

package/components/ui/select.tsx

@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-dpe-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-dpe-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -109,7 +109,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-dpe-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}

package/components/ui/slider.tsx

@@ -53,7 +53,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-dpe-surface shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>

package/components/ui/tooltip.tsx

@@ -42,7 +42,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-dpe-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className
         )}
         {...props}

package/lib/detail-page/use-progressive-reveal.ts

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * 긴 목록을 스크롤한 만큼만 그리는 훅.
+ *
+ * 브랜드 자산 서랍은 목록을 통째로 그렸다. 항목 하나가 곧 `<img>` 하나라 브랜드에
+ * 쌓인 사진이 수백 장이면 패널을 여는 순간 그만큼의 요청이 한꺼번에 나갔다. 편집기가
+ * 정작 필요한 것(문서 이미지·폰트)을 그 뒤에 줄 세우는 셈이다.
+ *
+ * 그래서 처음엔 한 화면 분량만 그리고, 바닥에 둔 감시자가 보일 때마다 조금씩 늘린다.
+ *
+ * **다 드러난 뒤에도 감시를 붙여 두면 안 된다.** 그리고 늘어난 뒤에는 감시자를 다시
+ * 붙여야 한다 — IntersectionObserver 는 "보이는 상태가 바뀔 때" 부르지, 계속 보이는
+ * 동안 다시 부르지 않는다. 짧은 목록에서 감시자가 화면에 남아 있으면 한 번 늘리고
+ * 멈춰 버린다. 아래 effect 가 `count` 마다 감시자를 새로 만드는 이유다.
+ */
+
+export const REVEAL_INITIAL = 12;
+export const REVEAL_STEP = 12;
+
+/** 다음에 몇 개까지 보일지. 전체를 넘지 않는다. */
+export function nextRevealCount(
+  current: number,
+  total: number,
+  step: number = REVEAL_STEP,
+): number {
+  return Math.min(total, current + Math.max(1, step));
+}
+
+export interface ProgressiveReveal {
+  /** 지금 그려야 할 개수. `items.slice(0, visible)`. */
+  visible: number;
+  /** 목록 바닥에 둘 감시자. 더 없으면 그리지 않는다. */
+  sentinelRef: (node: HTMLElement | null) => void;
+  hasMore: boolean;
+}
+
+export function useProgressiveReveal(
+  total: number,
+  opts?: { initial?: number; step?: number; resetKey?: unknown },
+): ProgressiveReveal {
+  const initial = opts?.initial ?? REVEAL_INITIAL;
+  const step = opts?.step ?? REVEAL_STEP;
+  const resetKey = opts?.resetKey;
+  const [count, setCount] = useState(initial);
+  const [node, setNode] = useState<HTMLElement | null>(null);
+
+  // 목록이 갈아끼워지면(브랜드 전환·새로고침) 다시 처음부터 센다. 안 그러면 200장을
+  // 보고 온 사람이 다른 브랜드로 옮겨도 200장을 그대로 요청한다.
+  useEffect(() => {
+    setCount(initial);
+  }, [resetKey, initial]);
+
+  useEffect(() => {
+    if (!node || count >= total) return;
+    // 서버 렌더나 옛 브라우저처럼 감시자가 없는 곳에서는 그냥 다 그린다 — 안 그리면
+    // 스크롤해도 영영 안 나온다.
+    if (typeof IntersectionObserver === "undefined") {
+      setCount(total);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setCount((current) => nextRevealCount(current, total, step));
+        }
+      },
+      // 바닥에 닿기 전에 미리 굽는다 — 스크롤이 빈칸에 부딪히지 않게.
+      { rootMargin: "200px" },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node, count, total, step]);
+
+  return {
+    visible: Math.min(count, total),
+    sentinelRef: setNode,
+    hasMore: count < total,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface.",
   "type": "module",
   "license": "UNLICENSED",
@@ -17,6 +17,8 @@
   "exports": {
     ".": "./index.ts",
     "./package.json": "./package.json",
+    "./tokens.css": "./styles/tokens.css",
+    "./canvas-bridge.css": "./styles/canvas-bridge.css",
     "./host": "./components/detail-page/detail-page-host-context.tsx",
     "./types": "./types/detail-page-canvas.ts",
     "./i18n": "./i18n/index.ts",
@@ -34,6 +36,7 @@
   },
   "files": [
     "index.ts",
+    "styles",
     "components",
     "config",
     "i18n",

package/styles/canvas-bridge.css

@@ -0,0 +1,35 @@
+/**
+ * 캔버스 껍데기(좌측 레일 · 배율 버튼)를 편집기 토큰에 물린다.
+ *
+ * 레일은 `@leviosa-ai/canvas` 가 그리고, 그쪽은 Tailwind 를 안 쓴다(인라인 style 이다).
+ * 그래서 자기 변수 `--lc-*` 를 따로 읽는다. 이 파일은 그 변수를 편집기 토큰으로 이어
+ * 주므로, `--color-dpe-*` 하나만 바꿔도 레일까지 같이 따라온다.
+ *
+ *   @import "@leviosa-ai/detail-page-editor/tokens.css";
+ *   @import "@leviosa-ai/detail-page-editor/canvas-bridge.css";
+ *
+ * **기본으로 딸려 오지 않는 이유**: 이어 붙이면 색 공간이 달라 지금 화면과 아주 조금
+ * 어긋난다(레일 활성 배경이 sRGB 혼합 → oklab 혼합). 갈아입힐 사람에게는 무의미한
+ * 차이지만, 그대로 쓰는 앱의 화면을 말없이 바꿀 이유는 없다. 그래서 부르는 쪽이 고른다.
+ *
+ * 이걸 안 쓰고 레일만 따로 잡고 싶으면 딱지를 쓴다:
+ *
+ *   [data-lc-part="rail"] { ... }
+ *   [data-lc-part="rail-tab"] { ... }
+ *   [data-lc-part="panel"] { ... }
+ *   [data-lc-part="zoom"] { ... }
+ */
+[data-dpe-root] {
+  --lc-surface: var(--color-dpe-surface);
+  --lc-border: var(--color-dpe-ink-200);
+  --lc-fg: var(--color-dpe-ink-700);
+  --lc-fg-muted: var(--color-dpe-ink-500);
+  --lc-tab-fg: var(--color-dpe-ink-600);
+  --lc-tab-active-fg: var(--color-dpe-active-700);
+  --lc-tab-active-bg: color-mix(
+    in oklab,
+    var(--color-dpe-active-600) 10%,
+    transparent
+  );
+  --lc-radius: var(--radius-dpe-md);
+}

package/styles/tokens.css

@@ -0,0 +1,103 @@
+/**
+ * 편집기 크롬의 디자인 토큰.
+ *
+ * 소비자 앱이 자기 globals.css 에서 이 파일을 @import 하면 `dpe-*` 유틸리티가 생긴다.
+ *
+ *   @import "@leviosa-ai/detail-page-editor/tokens.css";
+ *
+ * 기본값은 지금까지의 색 그대로다 — 아무것도 안 하면 겉보기가 안 바뀐다.
+ *
+ * 갈아 끼우는 법은 두 가지다.
+ *
+ * 1. 값만 바꾼다. 편집기 뿌리에만 먹이려면 `[data-dpe-root]` 로 좁힌다:
+ *
+ *      [data-dpe-root] {
+ *        --color-dpe-surface: #faf8f5;
+ *        --color-dpe-ink-200: #e0dbd4;
+ *        --radius-dpe-md: 0;
+ *      }
+ *
+ * 2. 토큰으로 안 되는 것(간격·테두리 유무·글꼴)은 `data-dpe-part` 딱지를 CSS 로 잡는다:
+ *
+ *      [data-dpe-part="header"] { border-bottom: none; }
+ *      [data-dpe-part="inspector"] { font-family: var(--font-serif); }
+ *
+ * 글꼴은 토큰이 없다 — 편집기는 글꼴을 지정하지 않고 물려받으므로,
+ * `[data-dpe-root] { font-family: ... }` 한 줄이면 전부 따라온다.
+ */
+@theme {
+  /* 면과 글자의 회색 램프. 편집기 크롬 대부분이 여기 달려 있다. */
+  --color-dpe-ink-50: oklch(98.5% 0 0);
+  --color-dpe-ink-100: oklch(97% 0 0);
+  --color-dpe-ink-200: oklch(92.2% 0 0);
+  --color-dpe-ink-300: oklch(87% 0 0);
+  --color-dpe-ink-400: oklch(70.8% 0 0);
+  --color-dpe-ink-500: oklch(55.6% 0 0);
+  --color-dpe-ink-600: oklch(43.9% 0 0);
+  --color-dpe-ink-700: oklch(37.1% 0 0);
+  --color-dpe-ink-800: oklch(26.9% 0 0);
+  --color-dpe-ink-900: oklch(20.5% 0 0);
+  --color-dpe-ink-950: oklch(14.5% 0 0);
+
+  /* 면(패널·카드·헤더)의 바탕. */
+  --color-dpe-surface: #ffffff;
+
+  /* 어두운 바탕 위 글자·아이콘. */
+  --color-dpe-on-accent: #ffffff;
+
+  /* 오버레이 막. 투명도는 쓰는 쪽이 `/70` 처럼 붙인다. */
+  --color-dpe-scrim: #000000;
+
+  /* 지우기·실패. */
+  --color-dpe-danger-50: oklch(97.1% 0.013 17.38);
+  --color-dpe-danger-100: oklch(93.6% 0.032 17.717);
+  --color-dpe-danger-200: oklch(88.5% 0.062 18.334);
+  --color-dpe-danger-500: oklch(63.7% 0.237 25.331);
+  --color-dpe-danger-600: oklch(57.7% 0.245 27.325);
+  --color-dpe-danger-700: oklch(50.5% 0.213 27.518);
+
+  /* 주의·한도. */
+  --color-dpe-warn-50: oklch(98.7% 0.022 95.277);
+  --color-dpe-warn-100: oklch(96.2% 0.059 95.617);
+  --color-dpe-warn-200: oklch(92.4% 0.12 95.746);
+  --color-dpe-warn-500: oklch(76.9% 0.188 70.08);
+  --color-dpe-warn-600: oklch(66.6% 0.179 58.318);
+  --color-dpe-warn-700: oklch(55.5% 0.163 48.998);
+  --color-dpe-warn-800: oklch(47.3% 0.137 46.201);
+
+  /* 저장됨·성공. */
+  --color-dpe-ok-50: oklch(97.9% 0.021 166.113);
+  --color-dpe-ok-100: oklch(95% 0.052 163.051);
+  --color-dpe-ok-600: oklch(59.6% 0.145 163.225);
+  --color-dpe-ok-700: oklch(50.8% 0.118 165.612);
+
+  /* 선택·드롭 위치 표시. */
+  --color-dpe-select-50: oklch(97.7% 0.013 236.62);
+  --color-dpe-select-100: oklch(95.1% 0.026 236.824);
+  --color-dpe-select-200: oklch(90.1% 0.058 230.902);
+  --color-dpe-select-400: oklch(74.6% 0.16 232.661);
+  --color-dpe-select-500: oklch(68.5% 0.169 237.323);
+  --color-dpe-select-900: oklch(39.1% 0.09 240.876);
+  --color-dpe-select-950: oklch(29.3% 0.066 243.157);
+
+  /* 켜져 있는 상태. */
+  --color-dpe-active-50: oklch(97% 0.014 254.604);
+  --color-dpe-active-600: oklch(54.6% 0.245 262.881);
+  --color-dpe-active-700: oklch(48.8% 0.243 264.376);
+
+  /* AI 표식(생성·재작성). */
+  --color-dpe-ai: oklch(66.7% 0.295 322.15);
+  --color-dpe-ai-alt: oklch(60.6% 0.25 292.717);
+
+  /* 모서리. `rounded-full` 은 알약·아바타라 토큰이 아니다. */
+  --radius-dpe-lg: 0.5rem;
+  --radius-dpe-md: 0.375rem;
+  --radius-dpe-sm: 0.25rem;
+  --radius-dpe-xl: 0.75rem;
+
+  /* 글자 굵기. */
+  --font-weight-dpe-bold: 700;
+  --font-weight-dpe-medium: 500;
+  --font-weight-dpe-normal: 400;
+  --font-weight-dpe-semibold: 600;
+}