sellmate-design-system-react 4.2.0 → 4.3.1

package/dist/lib/global-overlay.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 모달 위에 뜨는 전역 레이어(토스트·로딩)의 표식.
+ *
+ * 이 레이어들은 모달보다 위(Z_INDEX.toast/loading > Z_INDEX.modalHost)에 뜨지만 DOM 상으로는
+ * body 직속이라, Radix Dialog 입장에서는 '모달 바깥'이다. 표식이 없으면 토스트 닫기 버튼을
+ * 누르는 것만으로 바깥 클릭으로 처리돼 persistent 모달은 흔들리고 일반 모달은 닫혀버린다.
+ */
+export declare const GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
+/** 전역 레이어 루트에 펼쳐 넣는다. */
+export declare const globalOverlayProps: {
+    "data-s-global-overlay": string;
+};
+/**
+ * Radix 의 outside 이벤트(pointerDownOutside/focusOutside/interactOutside)가
+ * 전역 레이어에서 비롯됐는지 판별한다. Radix 는 원본 이벤트를 `detail.originalEvent` 에 담는다.
+ */
+export declare function isFromGlobalOverlay(event: Event): boolean;

package/dist/llms-full.txt

@@ -161,6 +161,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-16`, `mt-sd-12`. 숫자 = px 다.
   접두를 빼면 Tailwind 기본 스케일이 적용된다(`gap-8` = 32px). 접두는 속성 뒤, 숫자 앞에 온다.
 - 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 44 48 56 60 62 80`
+- **스케일에 없는 간격이 필요하면 임의 값(`p-[64px]`)으로 우회하지 않는다.** 가까운 스케일 값으로 맞추거나, 디자인상 그 값이어야 하면 **토큰 추가를 요청한다.** 이미 있는 토큰을 정확히 써야 할 때만 `gap-[var(--토큰명)]` 으로 참조한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
@@ -498,6 +499,8 @@ const columns: STableColumn[] = [
 | 테이블 **행 내부** 인라인 액션 | `xs` |
 | 화면·목록 액션 (툴바, `STableBar`) | `sm` |
 | **모달·위저드 푸터** | `md` |
+| **페이지 하단 실행 버튼** (폼 저장·상세 수정 등) | `md` |
+| 스크롤 시 헤더로 승격된 버튼 | `sm` (최대) |
 
 `lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
 
@@ -630,11 +633,12 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
 | --- | --- | --- | --- |
 | `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
-| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** | 로고 오른쪽 남는 폭 전체 |
+| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
 
 - `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색·계정 메뉴·알림처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
 - `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `onLauncherClick` 을 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
 
 ```tsx
 <SLayout type="box" header="full">
@@ -955,6 +959,8 @@ export default function ProductDetailPage() {
 
 `gap-sd-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. 반대로 접두를 빠뜨린 `gap-8` 은 Tailwind 기본 스케일이라 **32px 이 적용된다**. 둘 다 "간격이 왜 이러지" 로만 보이므로 반드시 `sd-` 접두 스케일 값을 쓴다. (린트는 기본값에서 앞쪽만 잡는다 — 뒤쪽까지 강제하려면 `requirePrefix: true`)
 
+접두 누락은 **자동 수정되지 않는다.** `p-16` 은 지금 64px 로 동작하는 코드라 `p-sd-16`(16px)으로 바꾸면 여백이 달라지기 때문이다. 린트는 "숫자를 px 로 의도했나(`p-sd-16`)" 와 "현재 값을 유지할 건가(스케일에 있으면 그 값)" 를 제안으로 내놓으니 **의도에 맞는 쪽을 골라 적용한다.**
+
 린트가 잡지 못하는 것(§3 컴포넌트 선택, §4 페이지 골격, 버튼 배치)은 §5 체크리스트로 직접 확인한다.
 
 
@@ -1269,6 +1275,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
  - [SActionModal](../SActionModal)
  - [SConfirmModal](../SConfirmModal)
+ - [SDrawer](../SDrawer)
  - [SDropdownButton](../SDropdownButton)
  - [SKeyValueTable](../SKeyValueTable)
  - [SLoadingModal](../SLoadingModal)
@@ -1843,6 +1850,44 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ---
 
+# SDrawer
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDrawer
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | — | 표시 여부 |
+| `persistent?` | `boolean` | `false` | true면 backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. |
+| `title?` | `string` | `''` | 접근성 제목 및 헤더 제목 |
+| `width?` | `number \| string` | `572` | Drawer 너비. 기본값은 Figma drawer 기준 572px이다. |
+| `footerLeft?` | `ReactNode` | — | footer 좌측 슬롯 |
+| `button?` | `SDrawerButton` | — | 우측 기본 액션 버튼 |
+| `children?` | `ReactNode` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onOpenChange` | `(open: boolean) => void` | 표시 상태 변경 |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+---
+
 # SDropdownButton
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -2158,6 +2203,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SDrawer](../SDrawer)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)

package/dist/llms.txt

@@ -162,6 +162,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - **간격 유틸리티는 `sd-` 접두를 붙인다** — `gap-sd-8`, `p-sd-16`, `mt-sd-12`. 숫자 = px 다.
   접두를 빼면 Tailwind 기본 스케일이 적용된다(`gap-8` = 32px). 접두는 속성 뒤, 숫자 앞에 온다.
 - 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 44 48 56 60 62 80`
+- **스케일에 없는 간격이 필요하면 임의 값(`p-[64px]`)으로 우회하지 않는다.** 가까운 스케일 값으로 맞추거나, 디자인상 그 값이어야 하면 **토큰 추가를 요청한다.** 이미 있는 토큰을 정확히 써야 할 때만 `gap-[var(--토큰명)]` 으로 참조한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
@@ -499,6 +500,8 @@ const columns: STableColumn[] = [
 | 테이블 **행 내부** 인라인 액션 | `xs` |
 | 화면·목록 액션 (툴바, `STableBar`) | `sm` |
 | **모달·위저드 푸터** | `md` |
+| **페이지 하단 실행 버튼** (폼 저장·상세 수정 등) | `md` |
+| 스크롤 시 헤더로 승격된 버튼 | `sm` (최대) |
 
 `lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
 
@@ -631,11 +634,12 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
 | --- | --- | --- | --- |
 | `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
-| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** | 로고 오른쪽 남는 폭 전체 |
+| `"full"` | `[런처 · 폴드 · 로고 · topContent]` — 상단바가 화면 전폭 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
 
 - `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색·계정 메뉴·알림처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
 - `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `onLauncherClick` 을 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
 
 ```tsx
 <SLayout type="box" header="full">
@@ -956,6 +960,8 @@ export default function ProductDetailPage() {
 
 `gap-sd-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. 반대로 접두를 빠뜨린 `gap-8` 은 Tailwind 기본 스케일이라 **32px 이 적용된다**. 둘 다 "간격이 왜 이러지" 로만 보이므로 반드시 `sd-` 접두 스케일 값을 쓴다. (린트는 기본값에서 앞쪽만 잡는다 — 뒤쪽까지 강제하려면 `requirePrefix: true`)
 
+접두 누락은 **자동 수정되지 않는다.** `p-16` 은 지금 64px 로 동작하는 코드라 `p-sd-16`(16px)으로 바꾸면 여백이 달라지기 때문이다. 린트는 "숫자를 px 로 의도했나(`p-sd-16`)" 와 "현재 값을 유지할 건가(스케일에 있으면 그 값)" 를 제안으로 내놓으니 **의도에 맞는 쪽을 골라 적용한다.**
+
 린트가 잡지 못하는 것(§3 컴포넌트 선택, §4 페이지 골격, 버튼 배치)은 §5 체크리스트로 직접 확인한다.
 
 
@@ -1125,7 +1131,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-link-accent
 --sys-color-navigation-gnb-bg-dark
 
-## 3. 컴포넌트 인덱스 (61종)
+## 3. 컴포넌트 인덱스 (62종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -1134,4 +1140,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree
+SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree

package/dist/styles.css

@@ -377,6 +377,7 @@
     --animate-modal-in: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     --animate-modal-out: modal-out 0.2s ease-in;
     --animate-modal-shake: modal-shake 0.3s ease-out;
+    --animate-drawer-shake: drawer-shake 0.22s ease-out;
     --animate-floating-in-top: floating-in-top 0.35s ease-out;
     --animate-floating-in-bottom: floating-in-bottom 0.35s ease-out;
     --animate-floating-in-left: floating-in-left 0.35s ease-out;
@@ -751,6 +752,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -772,6 +776,9 @@
   .mt-sd-32 {
     margin-top: var(--spacing-sd-32);
   }
+  .mt-sd-36 {
+    margin-top: var(--spacing-sd-36);
+  }
   .-mr-px {
     margin-right: -1px;
   }
@@ -1225,6 +1232,10 @@
     --tw-translate-x: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1247,6 +1258,9 @@
   .animate-circle-spin {
     animation: var(--animate-circle-spin);
   }
+  .animate-drawer-shake {
+    animation: var(--animate-drawer-shake);
+  }
   .animate-linear-indeterminate {
     animation: var(--animate-linear-indeterminate);
   }
@@ -1532,6 +1546,9 @@
   .gap-\[var\(--cmp-textinput-sm-gap\)\] {
     gap: var(--cmp-textinput-sm-gap);
   }
+  .gap-\[var\(--토큰명\)\] {
+    gap: var(--토큰명);
+  }
   .gap-sd-2 {
     gap: var(--spacing-sd-2);
   }
@@ -1824,6 +1841,9 @@
   .\!border-\[\#93C4FF\] {
     border-color: #93C4FF !important;
   }
+  .\!border-border-accentLight {
+    border-color: var(--color-border-accentLight) !important;
+  }
   .border-\(--cmp-listDraggableItem-border-default\) {
     border-color: var(--cmp-listDraggableItem-border-default);
   }
@@ -1884,6 +1904,9 @@
   .border-\[color\:var\(--cmp-datepicker-border-default\)\] {
     border-color: var(--cmp-datepicker-border-default);
   }
+  .border-\[color\:var\(--cmp-drawer-body-border\)\] {
+    border-color: var(--cmp-drawer-body-border);
+  }
   .border-\[color\:var\(--cmp-listBoxItem-depth1-border-color\)\] {
     border-color: var(--cmp-listBoxItem-depth1-border-color);
   }
@@ -2061,6 +2084,9 @@
   .bg-\[var\(--cmp-datepicker-calendar-time-bg-selected\)\] {
     background-color: var(--cmp-datepicker-calendar-time-bg-selected);
   }
+  .bg-\[var\(--cmp-drawer-bg\)\] {
+    background-color: var(--cmp-drawer-bg);
+  }
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
@@ -2079,6 +2105,12 @@
   .bg-\[var\(--cmp-modal-bg\)\] {
     background-color: var(--cmp-modal-bg);
   }
+  .bg-\[var\(--cmp-overlay-footer-bg-default\)\] {
+    background-color: var(--cmp-overlay-footer-bg-default);
+  }
+  .bg-\[var\(--cmp-overlay-header-bg\)\] {
+    background-color: var(--cmp-overlay-header-bg);
+  }
   .bg-\[var\(--cmp-pagination-item-bg-selected\)\] {
     background-color: var(--cmp-pagination-item-bg-selected);
   }
@@ -2199,6 +2231,9 @@
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
+  .p-64 {
+    padding: calc(var(--spacing) * 64);
+  }
   .p-\[2px\] {
     padding: 2px;
   }
@@ -2214,6 +2249,12 @@
   .p-\[16px\] {
     padding: 16px;
   }
+  .p-\[24px\] {
+    padding: 24px;
+  }
+  .p-\[64px\] {
+    padding: 64px;
+  }
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
@@ -2244,6 +2285,9 @@
   .p-sd-32 {
     padding: var(--spacing-sd-32);
   }
+  .p-sd-62 {
+    padding: var(--spacing-sd-62);
+  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -2316,6 +2360,9 @@
   .px-\[var\(--cmp-overlay-footer-paddingX\)\] {
     padding-inline: var(--cmp-overlay-footer-paddingX);
   }
+  .px-\[var\(--cmp-overlay-header-paddingX\)\] {
+    padding-inline: var(--cmp-overlay-header-paddingX);
+  }
   .px-\[var\(--cmp-pagination-paddingX\)\] {
     padding-inline: var(--cmp-pagination-paddingX);
   }
@@ -2988,6 +3035,10 @@
     --tw-shadow: 5px 0 8px 0 var(--tw-shadow-color, rgba(34,34,34,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--shadow-overlay\)\] {
+    --tw-shadow: var(--shadow-overlay);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3065,6 +3116,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .duration-\[400ms\] {
     --tw-duration: 400ms;
     transition-duration: 400ms;
@@ -3394,13 +3449,6 @@
       }
     }
   }
-  .hover\:border-\[\#AAAAAA\] {
-    &:hover {
-      @media (hover: hover) {
-        border-color: #AAAAAA;
-      }
-    }
-  }
   .hover\:border-\[color\:var\(--cmp-checkbox-unchecked-border-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3429,6 +3477,13 @@
       }
     }
   }
+  .hover\:border-border-strong {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-strong);
+      }
+    }
+  }
   .hover\:\!bg-\[var\(--cmp-radioButton-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3716,6 +3771,12 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=closed\]\:translate-x-full {
+    &[data-state="closed"] {
+      --tw-translate-x: 100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=closed\]\:animate-modal-out {
     &[data-state="closed"] {
       animation: var(--animate-modal-out);
@@ -3810,6 +3871,12 @@
       }
     }
   }
+  .data-\[state\=open\]\:translate-x-0 {
+    &[data-state="open"] {
+      --tw-translate-x: 0;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=open\]\:animate-modal-in {
     &[data-state="open"] {
       animation: var(--animate-modal-in);
@@ -3873,6 +3940,16 @@
       transition-property: none;
     }
   }
+  .md\:p-4 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:p-sd-16 {
+    @media (width >= 48rem) {
+      padding: var(--spacing-sd-16);
+    }
+  }
   .md\:px-sd-24 {
     @media (width >= 48rem) {
       padding-inline: var(--spacing-sd-24);
@@ -4004,9 +4081,9 @@
       border-left: 1px solid var(--sys-color-border-default);
     }
   }
-  .\[\&\:has\(\>button\:hover\)\]\:border-\[\#AAAAAA\] {
+  .\[\&\:has\(\>button\:hover\)\]\:border-border-strong {
     &:has(>button:hover) {
-      border-color: #AAAAAA;
+      border-color: var(--color-border-strong);
     }
   }
   .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
@@ -5484,6 +5561,17 @@
     transform: scale(1.01);
   }
 }
+@keyframes drawer-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(-3px);
+  }
+  70% {
+    transform: translateX(2px);
+  }
+}
 @keyframes floating-in-top {
   from {
     opacity: 0;

package/dist/theme.css

@@ -1743,6 +1743,7 @@
   --animate-modal-in: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   --animate-modal-out: modal-out 0.2s ease-in;
   --animate-modal-shake: modal-shake 0.3s ease-out;
+  --animate-drawer-shake: drawer-shake 0.22s ease-out;
 
   /* floating(툴팁·팝오버) placement 방향별 슬라이드+페이드 (sd-floating-portal 포팅) */
   --animate-floating-in-top: floating-in-top 0.35s ease-out;
@@ -1783,6 +1784,12 @@
   50% { transform: scale(0.97); }
   75% { transform: scale(1.01); }
 }
+/* persistent Drawer에서 닫기 시도 시 사용하는 낮은 진폭의 흔들림 */
+@keyframes drawer-shake {
+  0%, 100% { transform: translateX(0); }
+  40% { transform: translateX(-3px); }
+  70% { transform: translateX(2px); }
+}
 /* floating(툴팁·팝오버): placement 방향에서 4px 슬라이드 + 페이드 (sd-floating-slide-* 포팅) */
 @keyframes floating-in-top { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes floating-in-bottom { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

package/eslint/rules/no-off-scale-spacing.mjs

@@ -9,6 +9,11 @@
  * 소비 앱이 원래 쓰던 Tailwind 코드이기 때문이다. 간격을 디자인 시스템 스케일로
  * 통일하는 팀만 `requirePrefix: true` 로 켠다.
  *
+ * 접두가 없는 클래스는 **깨진 코드가 아니라 다른 값으로 정상 동작하는 코드**다
+ * (`p-16` = 64px). 그래서 `sd-` 로 옮기는 것은 표기 정규화가 아니라 값 변경이고,
+ * 자동 수정(fix)이 아니라 제안(suggestion)으로만 낸다. 일괄 마이그레이션이
+ * 필요한 팀은 `unsafeFix: true` 로 명시적으로 켠다.
+ *
  * AGENTS.md §2-2.
  */
 import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
@@ -23,28 +28,47 @@ const SPACING_PREFIXES = [
 ];
 
 const ALLOWED = new Set([0, ...SPACING]);
+const MAX = Math.max(...SPACING);
+
+/** Tailwind 기본 스케일에서 `p-<n>` 이 실제로 만드는 px (`--spacing` = 0.25rem) */
+const RENDERED_PX = (value) => value * 4;
 
 const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
+/**
+ * 토큰 시작 경계 — 앞은 공백이거나 문자열 따옴표(= 문자열의 시작)여야 한다.
+ * `(?<![\w-])` 만 쓰면 `md:p-4 p-4` 에서 `p-4` 를 찾을 때 variant 안쪽(`md:` 뒤)이
+ * 먼저 걸려 엉뚱한 클래스를 고친다.
+ */
+const TOKEN_START = "(?<![^\\s'\"`])";
+
 export default {
   meta: {
     type: "problem",
     docs: {
       description: "간격 유틸리티는 sd- 접두가 붙은 토큰 스케일 값만 사용",
     },
+    // 스케일 밖 값(`gap-sd-13`)에는 fix 를 내지 않는다. `unsafeFix` 를 켠 팀의
+    // 접두 누락 수정에만 쓰이지만, 선언은 정적이어야 하므로 여기 남는다.
     fixable: "code",
+    hasSuggestions: true,
     schema: [
       {
         type: "object",
         properties: {
           /**
            * 접두 없는 간격 유틸리티(`p-16`)도 잡는다. 기본 false.
-           *
-           * ⚠️ 자동 수정은 "클래스의 숫자 = px" 를 전제로 `p-16` → `p-sd-16` 로 바꾼다.
-           * 기본 Tailwind 스케일(`p-4` = 16px)로 쓰던 앱에서 켜면 여백이 1/4 로 줄어드니,
-           * 이전 버전의 디자인 시스템 스케일을 쓰던 앱에서만 켠다.
+           * 기본값에서는 두 해석(`p-sd-16` = 16px / 현재 값 유지)을 제안으로만 낸다.
            */
           requirePrefix: { type: "boolean" },
+          /**
+           * 접두 누락을 "클래스의 숫자 = px" 로 단정하고 `p-16` → `p-sd-16` 자동 수정한다.
+           *
+           * ⚠️ **여백 값이 바뀐다.** 기본 Tailwind 스케일(`p-4` = 16px)로 쓰던 앱에서
+           * 켜면 여백이 1/4 로 줄어든다. 이전 버전의 디자인 시스템 스케일을 쓰던 앱을
+           * 한 번에 옮길 때만 켜고, 마이그레이션이 끝나면 다시 끈다.
+           */
+          unsafeFix: { type: "boolean" },
         },
         additionalProperties: false,
       },
@@ -52,32 +76,57 @@ export default {
     messages: {
       offScale:
         "`{{token}}` 의 {{value}} 는 간격 스케일에 없어 스타일이 적용되지 않습니다. 가까운 값: {{nearest}}. (AGENTS.md §2-2)",
-      missingPrefix:
-        "`{{token}}` 은 Tailwind 기본 스케일이라 {{actual}}px 이 적용됩니다. 디자인 시스템 간격 {{value}}px 을 쓰려면 `{{suggestion}}` 로 적으세요. (AGENTS.md §2-2)",
-      missingPrefixOffScale:
-        "`{{token}}` 은 Tailwind 기본 스케일이라 {{actual}}px 이 적용됩니다. {{value}} 는 간격 스케일에도 없으니 가까운 값으로 `{{prefix}}-sd-{{nearest}}` 를 쓰세요. (AGENTS.md §2-2)",
+      // 접두 누락 — 어느 해석이 스케일에 있느냐로 갈린다.
+      // `p-16` 은 지금 64px 이므로 "16px 의도" 와 "64px 유지" 가 서로 다른 결과다.
+      missingPrefixBoth:
+        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px 을 의도했다면 → `{{asLiteral}}` · {{actual}}px 을 유지하려면 → `{{asRendered}}` (AGENTS.md §2-2)",
+      missingPrefixLiteral:
+        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px 을 의도했다면 → `{{asLiteral}}`. {{actual}}px 유지는 간격 스케일에 값이 없습니다. {{fallback}} (AGENTS.md §2-2)",
+      missingPrefixRendered:
+        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{actual}}px 을 유지하려면 → `{{asRendered}}`. {{value}}px 은 간격 스케일에 없습니다. (AGENTS.md §2-2)",
+      missingPrefixNone:
+        "`{{token}}` 은 현재 {{actual}}px 입니다 (Tailwind 기본 스케일). {{value}}px·{{actual}}px 둘 다 간격 스케일에 없습니다. {{fallback}} (AGENTS.md §2-2)",
+      // 제안(suggestion) 설명 — 편집기 목록에 그대로 뜬다
+      useLiteral: "`{{to}}` 적용 — 숫자를 px 로 해석 ({{actual}}px → {{value}}px, 여백이 바뀝니다)",
+      useRendered: "`{{to}}` 적용 — 현재 {{actual}}px 유지",
     },
   },
 
   create(context) {
     const sourceCode = context.sourceCode ?? context.getSourceCode();
     const requirePrefix = context.options[0]?.requirePrefix ?? false;
+    const unsafeFix = context.options[0]?.unsafeFix ?? false;
 
     /** 토큰 문자열을 소스에서 찾아 치환하는 fixer (없으면 null) */
     const replaceToken = (valueNode, token, fixed) => (fixer) => {
       const text = sourceCode.getText(valueNode);
-      const idx = text.search(new RegExp(`(?<![\\w-])${escapeRegExp(token)}(?![\\w-])`));
+      const idx = text.search(new RegExp(`${TOKEN_START}${escapeRegExp(token)}(?![\\w-])`));
       if (idx === -1) return null;
       const start = valueNode.range[0] + idx;
       return fixer.replaceTextRange([start, start + token.length], fixed);
     };
 
-    /** 스케일에서 value 에 가장 가까운 값 두 개 */
-    const nearestOf = (value) =>
-      [...ALLOWED]
-        .sort((a, b) => Math.abs(a - value) - Math.abs(b - value))
-        .slice(0, 2)
-        .sort((a, b) => a - b);
+    /** 스케일을 value 와의 거리순으로 (동률이면 작은 값 먼저) */
+    const byDistance = (value) =>
+      [...ALLOWED].sort((a, b) => Math.abs(a - value) - Math.abs(b - value) || a - b);
+
+    /** 가장 가까운 값 하나 — 거리순 배열을 다시 정렬하면 안 된다 (64 → 62 지 60 이 아니다) */
+    const nearestOne = (value) => byDistance(value)[0];
+
+    /** 스케일에서 value 에 가장 가까운 값 두 개 (표시용이라 오름차순) */
+    const nearestOf = (value) => byDistance(value).slice(0, 2).sort((a, b) => a - b);
+
+    /**
+     * 대응 토큰이 없을 때의 안내. 기준은 클래스에 적힌 숫자가 아니라 **실제 렌더 px** 다.
+     * 스케일 최대를 넘으면 가까운 값을 권하는 것 자체가 무의미하므로 토큰 추가로 안내한다.
+     */
+    const fallbackFor = (prefix, renderedPx) => {
+      if (renderedPx > MAX) {
+        return `간격 스케일 최대가 ${MAX}px 이라 대응 토큰이 없습니다 — 토큰 추가를 요청하세요.`;
+      }
+      const near = nearestOne(renderedPx);
+      return `가까운 \`${prefix}-sd-${near}\`(${near}px) 를 검토하거나 토큰 추가를 요청하세요.`;
+    };
 
     return {
       JSXAttribute(node) {
@@ -99,31 +148,61 @@ export default {
             const value = Number(raw);
             if (value === 0) continue; // p-0 은 스케일과 무관하게 0
 
-            // 스케일에 없는 값은 sd- 를 붙여도 동작하지 않으므로 자동 수정하지 않는다
-            if (!ALLOWED.has(value)) {
-              context.report({
-                node: valueNode,
-                messageId: "missingPrefixOffScale",
-                data: {
-                  token,
-                  value: raw,
-                  actual: String(value * 4),
-                  prefix,
-                  nearest: String(nearestOf(value)[0]),
-                },
+            const rendered = RENDERED_PX(value);
+            /** `md:p-4` → `md:p-sd-16` — variant·부호 접두는 그대로 두고 뒤만 갈아낀다 */
+            const rewrite = (px) =>
+              token.replace(
+                new RegExp(`${escapeRegExp(`${prefix}-${raw}`)}$`),
+                `${prefix}-sd-${px}`,
+              );
+
+            // 두 해석 — 숫자를 px 로 읽는 쪽(값이 바뀐다)과 현재 렌더 값을 지키는 쪽.
+            // 스케일에 없는 해석은 후보에서 빠진다 (sd- 를 붙여도 스타일이 안 생긴다).
+            const asLiteral = ALLOWED.has(value) ? rewrite(value) : null;
+            const asRendered = ALLOWED.has(rendered) ? rewrite(rendered) : null;
+
+            const data = {
+              token,
+              value: raw,
+              actual: String(rendered),
+              asLiteral: asLiteral ?? "",
+              asRendered: asRendered ?? "",
+              fallback: fallbackFor(prefix, rendered),
+            };
+
+            const suggest = [];
+            if (asLiteral) {
+              suggest.push({
+                messageId: "useLiteral",
+                data: { to: asLiteral, actual: String(rendered), value: raw },
+                fix: replaceToken(valueNode, token, asLiteral),
+              });
+            }
+            if (asRendered) {
+              suggest.push({
+                messageId: "useRendered",
+                data: { to: asRendered, actual: String(rendered) },
+                fix: replaceToken(valueNode, token, asRendered),
               });
-              continue;
             }
 
-            const suggestion = token.replace(
-              new RegExp(`${escapeRegExp(`${prefix}-${raw}`)}$`),
-              `${prefix}-sd-${raw}`,
-            );
+            const messageId = asLiteral
+              ? asRendered
+                ? "missingPrefixBoth"
+                : "missingPrefixLiteral"
+              : asRendered
+                ? "missingPrefixRendered"
+                : "missingPrefixNone";
+
             context.report({
               node: valueNode,
-              messageId: "missingPrefix",
-              data: { token, value: raw, actual: String(value * 4), suggestion },
-              fix: replaceToken(valueNode, token, suggestion),
+              messageId,
+              data,
+              suggest,
+              // 마이그레이션용 옵트인 — "숫자 = px" 를 단정하므로 여백 값이 바뀐다
+              ...(unsafeFix && asLiteral
+                ? { fix: replaceToken(valueNode, token, asLiteral) }
+                : {}),
             });
             continue;
           }