@spectrabrain/eds 0.3.1 → 0.4.0

package/AI.md

@@ -4,16 +4,16 @@
 
 ## 공개 범위
 
-- light theme, `AI_CONTEXT.json`의 `components`에 있는 컴포넌트(현재 `Button`), 공개 semantic color·typography·spacing·radius token과 token runtime API(`@spectrabrain/eds/tokens`)를 제공합니다.
-- 패키지는 Tailwind preset·plugin을 export하지 않습니다. `eds sync`는 공개 semantic token alias를 `src/styles/eds-tokens.css`에 추가합니다. 일반 Tailwind utility는 소비처 설정에 따라 함께 쓸 수 있습니다.
-- dark theme과 목록 밖 컴포넌트는 지원 범위 밖입니다. EDS component가 없거나 필요한 prop·variant·state·slot contract가 맞지 않으면 소비처에서 로컬 UI를 구현하고, 공개 token으로 색상·typography·spacing·radius를 지정합니다.
+- light theme, `AI_CONTEXT.json`의 `components`에 있는 컴포넌트(현재 `Button`), 공개 semantic color·typography token과 token runtime API(`@spectrabrain/eds/tokens`)를 제공합니다.
+- 패키지는 Tailwind preset·plugin을 export하지 않습니다. `eds sync`는 공개 semantic token alias를 `src/styles/eds-tokens.css`에 추가합니다. spacing·radius token은 제공하지 않으며, 해당 값에는 Tailwind CSS v4 기본 utility를 권장합니다(`TOKEN_CONTEXT.md`).
+- dark theme과 목록 밖 컴포넌트는 지원 범위 밖입니다. EDS component가 없거나 필요한 prop·variant·state·slot contract가 맞지 않으면 소비처에서 로컬 UI를 구현하고, 색상·typography에는 공개 token을 사용합니다.
 - CSS 진입점 구성은 `CONSUMER_AGENT.md` 「font 정책」을 따릅니다.
 
 ## 사용 경계
 
 - 문서·`spec.json`·`tokens.json`에 있는 API·prop·variant·token·export 경로만 씁니다. component 여부와 사용 계약은 `AI_CONTEXT.json.components`, component README, TypeScript contract로 확인합니다. 아이콘 이름 확인이나 기계 판독 계약이 필요할 때만 `spec.json`을 읽습니다. contract가 맞지 않으면 `QUICKSTART.md`의 컴포넌트 선택 기준에 따라 소비처 로컬 UI로 분기합니다.
 - EDS 컴포넌트의 native element·accessible name·keyboard 동작은 그대로 둡니다. icon-only Button에는 비어 있지 않은 `aria-label`(또는 `aria-labelledby`)을 지정합니다.
-- 이름으로 지정하는 아이콘은 allowlist(`spec.json`의 `api.iconNames`)만 받고, 목록 밖 아이콘은 ReactElement 슬롯으로 전달합니다. 버전 선언과 보고 방법은 `dist/components/Button/README.md` 「Layout과 아이콘」에 있습니다.
+- Button 이름 슬롯은 `ButtonIconName`이 제공하는 `lucide-react` 아이콘 이름과 alias를 받습니다. custom 아이콘은 ReactElement 슬롯을 사용합니다. 전체 계약은 `dist/components/Button/README.md` 「Layout과 아이콘」에 있습니다.
 
 ## 문서와 manifest
 

package/AI_CONTEXT.json

@@ -30,7 +30,7 @@
       "specifier": "@spectrabrain/eds/TOKEN_CONTEXT.md",
       "kind": "token-selection",
       "required": false,
-      "when": "A color, typography, spacing or radius token is written or changed outside EDS component props, including CSS variables or cssVar() without Tailwind"
+      "when": "Choose an EDS color or typography token, or spacing/radius utilities outside an EDS component"
     },
     {
       "file": "TAILWIND_V4.md",
@@ -58,7 +58,7 @@
       "specifier": "@spectrabrain/eds/components/{name}/README.md",
       "kind": "component-guide",
       "required": false,
-      "when": "A requested UI may fit an EDS component; read its usage context and selection guidance before deciding. If selected, follow its props and accessibility contract; check icons outside the allowlist as needed."
+      "when": "A requested UI may fit an EDS component; read its usage context and selection guidance before deciding. If selected, follow its props and accessibility contract."
     },
     {
       "file": "dist/components/{name}/spec.json",

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @spectrabrain/eds
 
+## 0.4.0
+
+### Minor Changes
+
+- 863888b: 소비처 조치: 없습니다.
+
+  Button 이름 슬롯에서 설치된 `lucide-react`의 모든 아이콘 component 이름과 alias를 사용할 수 있습니다. custom 아이콘의 ReactElement 슬롯은 그대로 지원합니다.
+
+- 0a3ed23: 소비처 조치: `p-eds-spacing-*`·`rounded-eds-radius-*`와 spacing·radius용 `cssVar()` 호출을 `p-4`·`rounded-lg` 같은 Tailwind CSS v4 기본 utility로 바꿉니다. Tailwind CSS를 쓰지 않는 화면은 기존 CSS 규칙을 따릅니다.
+
+  Breaking change: 소비처용 semantic spacing·radius token, CSS 변수, Tailwind 별칭과 TypeScript 이름을 제거합니다.
+
 ## 0.3.1
 
 ### Patch Changes

package/CONSUMER_AGENT.md

@@ -81,7 +81,7 @@ EDS CLI는 가장 가까운 lockfile(현재 디렉터리부터 git 루트까지)
 
 sync는 모든 변경을 먼저 계산하고, 계산 중 하나라도 실패하면 어떤 파일도 바꾸지 않습니다. 쓰는 내용은 다음과 같습니다.
 
-1. `src/styles/eds-tokens.css`를 생성하고, Tailwind root의 마지막 Tailwind import 바로 다음 줄에 `@import "@spectrabrain/eds/styles.css";`와 생성 CSS의 상대 경로 `@import`를 추가합니다. 이미 있는 import는 다시 추가하지 않습니다. 생성 CSS의 `@theme inline`에는 공개 color·spacing·radius alias와 `--font-sans: var(--eds-typography-body1-fontFamily);`가 들어갑니다. root CSS 예시는 `TAILWIND_V4.md`에 있습니다.
+1. `src/styles/eds-tokens.css`를 생성하고, Tailwind root의 마지막 Tailwind import 바로 다음 줄에 `@import "@spectrabrain/eds/styles.css";`와 생성 CSS의 상대 경로 `@import`를 추가합니다. 이미 있는 import는 다시 추가하지 않습니다. 생성 CSS의 `@theme inline`에는 공개 color alias와 `--font-sans: var(--eds-typography-body1-fontFamily);`가 들어갑니다. Typography utility도 함께 생성됩니다. root CSS 예시는 `TAILWIND_V4.md`에 있습니다.
 2. `src/` 아래 JS·TS 파일에서 `eds-tokens.css`를 import하는 줄을 제거합니다. Tailwind는 JS에서 import한 CSS를 compile하지 않기 때문입니다.
 3. `AGENTS.md` managed block을 넣거나 갱신합니다.
 4. `CLAUDE.md`가 있으면 `@AGENTS.md`, `CLAUDE.md` 없이 `.claude/CLAUDE.md`가 있으면 `@../AGENTS.md`, `GEMINI.md`가 있으면 `@./AGENTS.md` import를 `<!-- EDS:CLAUDE:BEGIN/END -->`·`<!-- EDS:GEMINI:BEGIN/END -->` marker로 감싸 파일 끝에 한 번 추가합니다. sync는 이 marker로 import를 찾으므로 marker와 import를 함께 유지합니다. 파일이 없으면 만들지 않고, `AGENTS.md`와 같은 파일(symlink)이면 추가하지 않습니다.
@@ -117,7 +117,7 @@ EDS text style은 font family `Pretendard`를 참조하며, 이 family는 `@spec
 | `missing:`·`stale:`·`legacy:`(생성 CSS, root CSS import, `AGENTS.md` block, `CLAUDE.md`·`GEMINI.md` import) | `npm run sync:eds`로 고칩니다. `sync:eds`가 등록되지 않았으면 `eds doctor`가 출력한 `init` 명령을 실행합니다. 이 명령이 script를 등록하고 sync합니다.                                                                                                                                                                                 |
 | `missing:` EDS font import(Tailwind root가 없는 저장소)                                                     | 앱 진입점에서 `@spectrabrain/eds/styles.css`를 import합니다. 이 경우 sync는 CSS를 고치지 않습니다.                                                                                                                                                                                                                                    |
 | `scripts:`                                                                                                  | 등록되지 않았으면 「첫 setup 절차」의 `init`으로 등록합니다(init이 sync까지 실행합니다). 같은 이름의 다른 script이면 init이 덮어쓰지 않으므로, 그 script가 `eds sync`·`eds doctor`를 실행하도록 고치거나 이름을 바꾼 뒤 init을 실행합니다.                                                                                            |
-| `unknown: <파일:줄> <class>`                                                                                | 공개 token이 없는 `eds-*` class입니다. Tailwind는 이런 class를 조용히 버리므로 `src/styles/eds-tokens.css`에 있는 class로 고칩니다. class 이름은 color token이 `<utility>-eds-<이름>`, `typography-<style>-*`가 `eds-typography-<style>`, spacing·radius가 `p-eds-spacing-0-5`·`rounded-eds-radius-1`처럼 되는 규칙으로 만들어집니다. |
+| `unknown: <파일:줄> <class>`                                                                                | 공개 token이 없는 `eds-*` class입니다. Tailwind는 이런 class를 조용히 버리므로 `src/styles/eds-tokens.css`에 있는 class로 고칩니다. EDS class는 color token의 `<utility>-eds-<이름>`과 typography utility `eds-typography-<style>`입니다. padding·margin·gap·radius에는 Tailwind CSS v4 기본 utility를 씁니다. |
 | `invalid:`                                                                                                  | `AGENTS.md`의 EDS marker가 중복되거나 한쪽만 있습니다. sync는 이 상태를 고치지 않습니다. 출력에 적힌 줄에서 BEGIN 한 줄과 그 뒤의 END 한 줄만 남기고 나머지 marker 줄을 지운 뒤 sync를 다시 실행합니다.                                                                                                                               |
 
 `npm run eds:doctor -- --warn`과 `EDS_DOCTOR=warn`은 같은 출력에 warn mode 경고를 더하고 exit 0으로 끝나며, `EDS_DOCTOR=off`는 출력 없이 exit 0으로 끝납니다. 이 설정은 hook을 잠시 풀어야 할 때 사용자가 쓰는 것이며, 이 상태의 exit 0은 완료가 아닙니다.

package/FRONTEND_CONVENTIONS.md

@@ -25,7 +25,7 @@ EVA 서비스의 Vite + React 프론트엔드 규칙입니다. `eds align`은
 | client-state | `zustand` 5 | `redux`, `@reduxjs/toolkit`, `jotai`, `recoil`, `mobx` | `entities/<domain>/stores`에 둡니다. 저장이 필요하면 `persist`와 `partialize`를 씁니다. |
 | form | `useState` 또는 Context + `useReducer` | `react-hook-form`, `formik` | 단순한 form은 `useState`, 여러 단계 form은 feature의 `lib/<Name>FormContext.tsx`에 Context + `useReducer`를 둡니다. |
 | validation | TypeScript 타입과 검증 함수 | `zod`, `yup`, `valibot` | 검증 함수는 화면에 표시할 오류 문구를 돌려줍니다. backend 코드가 import하는 validation 라이브러리는 패키지를 유지하고, 프론트엔드 코드만 검증 함수로 옮깁니다. |
-| styling | Tailwind CSS 4 + EDS token | `styled-components`, `@emotion/*`, `sass`, CSS Modules | 스타일은 `className`으로 쓰고 전역 CSS는 `app/styles/index.css` 하나에 둡니다. |
+| styling | Tailwind CSS 4 + EDS color·typography token | `styled-components`, `@emotion/*`, `sass`, CSS Modules | spacing·radius에는 Tailwind CSS v4 기본 utility를 씁니다. 스타일은 `className`으로 쓰고 전역 CSS는 `app/styles/index.css` 하나에 둡니다. |
 | ui-kit | EDS `Button` + shadcn/ui(Radix) | `@mui/material`, `@chakra-ui/react`, `antd`, `@mantine/core` | 버튼은 EDS `Button`, 그 밖의 UI 요소는 `shared/ui`의 shadcn/ui 컴포넌트를 씁니다. |
 | icon | `lucide-react` | `react-icons`, `@heroicons/react`, `@fortawesome/*` | EDS `Button`의 아이콘은 `dist/components/Button/README.md` 「Layout과 아이콘」의 슬롯 규칙을 따릅니다. `lucide-react`는 EDS package root `package.json`의 `dependencies["lucide-react"]`와 같은 버전으로 선언합니다. |
 | toast | `sonner` | `react-toastify`, `react-hot-toast` | `app/App.tsx`에 `<Toaster position="top-right" richColors />`를 한 번 둡니다. |

package/QUICKSTART.md

@@ -12,7 +12,7 @@
 
 1. 사용자의 명시적 요청에 따르고 접근성·보안·framework 제약을 지킵니다. 그 안에서 문서화된 소비처 제품 요구를 우선합니다. 이를 충족하는 같은 역할의 EDS component(현재 `Button`)가 있고 공개 contract도 맞으면 쓰고, 아니면 소비처 로컬 UI를 씁니다.
 2. `AI_CONTEXT.json.components`의 후보를 확인하고, 요청에 맞는지 판단하기 전에 component `README.md`의 사용 맥락·선택 기준을 읽습니다. 필요한 prop·variant·state·slot이 README와 TypeScript contract에 모두 맞아야 합니다. 후보가 없거나 맞지 않으면 로컬 UI를 쓰고, `spec.json`은 아이콘 이름이나 기계 판독 계약 확인에만 씁니다.
-3. 색상·typography·spacing·radius는 공개 token으로 지정합니다. EDS와 sync한 Tailwind CSS v4 root에서는 `text-eds-fg-*`·`bg-eds-bg-*`·`border-eds-stroke-*`·`p-eds-spacing-0-5`·`rounded-eds-radius-1` 등 EDS class를 쓰고, 그 밖에는 `var(--eds-color-*)`·`var(--eds-typography-*)` 또는 `cssVar("spacing-0.5")`를 씁니다.
+3. 색상·typography는 EDS token을 씁니다. sync한 Tailwind v4 root에서는 `text-eds-fg-*`·`bg-eds-bg-*`·`border-eds-stroke-*`·`eds-typography-*`, 그 밖에는 `var(--eds-color-*)`·`var(--eds-typography-*)` 또는 `cssVar()`를 씁니다. padding·margin·gap·radius에는 Tailwind v4 기본(`p-4`·`m-2`·`gap-3`·`rounded-lg`)을 권장합니다. EDS spacing·radius token은 없으며, Tailwind v4가 없으면 소비처 CSS 규칙을 따릅니다. `TOKEN_CONTEXT.md`를 따릅니다.
 4. raw 색상·typography 값, 비공개 CSS variable, 패키지 비공개 경로는 쓰지 않습니다. EDS component의 `className`은 바깥 배치에만 씁니다.
 5. Tailwind를 쓰는 저장소에서는 EDS 밖 요소도 `className`으로 쓰고, `index.css` 같은 전역 CSS에 컴포넌트별 규칙을 추가하지 않습니다.
 

package/README.md

@@ -24,11 +24,11 @@ npx @spectrabrain/eds init
 ## 현재 제공 범위
 
 - foreground, background, stroke 역할의 semantic color token을 제공합니다.
-- 소비처 로컬 UI에서도 사용할 수 있는 spacing·radius semantic scale을 제공합니다. public 이름의 소수점은 유지하며 Tailwind CSS v4에서는 CSS-safe alias를 제공합니다.
+- 소비처 padding·margin·gap·radius token은 제공하지 않습니다. Tailwind CSS v4를 쓰는 앱에는 기본 utility(예: `p-4`, `rounded-lg`) 사용을 권장합니다.
 - Display, Heading, Title, Body, Caption semantic text style을 제공합니다. 각 style은 font family, weight, size, line height, letter spacing token으로 구성합니다.
 - `styles.css`에서 사용할 수 있는 Pretendard Variable v1.3.9 webfont를 제공합니다.
 - 자동완성을 지원하는 TypeScript token API와 CSS custom property를 제공합니다.
-- React `Button` 컴포넌트를 제공합니다. 이름으로 지정하는 lucide 아이콘은 승인된 allowlist로 제한합니다.
+- React `Button` 컴포넌트를 제공합니다. 이름 슬롯은 설치된 `lucide-react`의 모든 아이콘 이름과 alias를 지원합니다.
 - 소비처 setup용 `eds` CLI(`npx @spectrabrain/eds init`, `npm run sync:eds`, `npm run eds:doctor`)를 제공합니다.
 - Vite + React 프로토타입을 EVA 프론트엔드 컨벤션에 맞추는 일회성 명령 `npx @spectrabrain/eds align`과 컨벤션 문서를 제공합니다.
 
@@ -49,7 +49,7 @@ export function SaveButton() {
 }
 ~~~
 
-허용 role·variant 조합, `neutral/link`의 `href` 필수 조건, 이름 아이콘 allowlist와 ReactElement 슬롯, 접근성·loading 동작은 설치된 버전의 `@spectrabrain/eds/components/Button/README.md`와 `@spectrabrain/eds/components/Button/spec.json`(package root의 `dist/components/Button/`)이 기준입니다.
+허용 role·variant 조합, `neutral/link`의 `href` 필수 조건, 이름 아이콘과 ReactElement 슬롯, 접근성·loading 동작은 설치된 버전의 `@spectrabrain/eds/components/Button/README.md`와 `@spectrabrain/eds/components/Button/spec.json`(package root의 `dist/components/Button/`)이 기준입니다.
 
 ## 토큰 사용
 
@@ -63,8 +63,6 @@ const token: SemanticTokenName = "color-fg-brand-contrast";
 const color = cssVar(token); // var(--eds-color-fg-brand-contrast)
 ~~~
 
-`spacing-0.5`처럼 소수점이 있는 public 이름은 `cssVar("spacing-0.5")`로 전달합니다. 반환되는 CSS reference는 `var(--eds-spacing-0\.5)`처럼 점을 escape합니다. Tailwind CSS v4에서는 `p-eds-spacing-0-5`, `rounded-eds-radius-1` 같은 CSS-safe alias를 사용합니다.
-
 TypeScript의 `moduleResolution`이 `node`(node10), `node16` 또는 `bundler`인 소비처에서도 `@spectrabrain/eds/tokens`의 타입을 사용할 수 있습니다.
 
 역할에 맞는 exact token이 없을 때 가까운 공개 token을 고르는 순서는 [TOKEN_CONTEXT.md](TOKEN_CONTEXT.md)에 있습니다. 그래도 없으면 임의 색상값을 만들지 않고 디자인 시스템 담당자에게 요청합니다.
@@ -73,7 +71,7 @@ TypeScript의 `moduleResolution`이 `node`(node10), `node16` 또는 `bundler`인
 
 ## Tailwind CSS v4에서 token 사용
 
-EDS는 Tailwind preset·plugin을 제공하지 않습니다. Tailwind CSS v4 저장소에서는 `npm run sync:eds`가 `tokens.json`에서 `src/styles/eds-tokens.css`를 생성해 `@import "tailwindcss"`가 있는 Tailwind root CSS에 연결합니다. 이 파일에서 `text-eds-fg-*`, `bg-eds-bg-*`, `border-eds-stroke-*`, `eds-typography-*`, `p-eds-spacing-0-5`, `rounded-eds-radius-1` class를 사용할 수 있습니다. 일반 Tailwind utility는 소비처 설정에 따라 함께 쓸 수 있습니다. 생성된 `@theme inline`에는 `--font-sans: var(--eds-typography-body1-fontFamily);`도 들어가므로 Tailwind의 기본 sans font가 Pretendard가 됩니다. 설정 방법은 [Tailwind CSS v4 token 설정 가이드](./TAILWIND_V4.md)를 확인합니다.
+EDS는 Tailwind preset·plugin을 제공하지 않습니다. Tailwind CSS v4 저장소에서는 `npm run sync:eds`가 `tokens.json`에서 `src/styles/eds-tokens.css`를 생성해 `@import "tailwindcss"`가 있는 Tailwind root CSS에 연결합니다. 이 파일에서 `text-eds-fg-*`, `bg-eds-bg-*`, `border-eds-stroke-*`, `eds-typography-*` class를 사용할 수 있습니다. padding·margin·gap·radius에는 Tailwind CSS v4 기본 utility를 씁니다. 생성된 `@theme inline`에는 `--font-sans: var(--eds-typography-body1-fontFamily);`도 들어가므로 Tailwind의 기본 sans font가 Pretendard가 됩니다. 설정 방법은 [Tailwind CSS v4 token 설정 가이드](./TAILWIND_V4.md)를 확인합니다.
 
 ## Text style 사용
 

package/TAILWIND_V4.md

@@ -66,8 +66,6 @@ sync는 설치된 package의 공개 `@spectrabrain/eds/tokens.json`에서 token
 /* Generated from @spectrabrain/eds@<version>. Do not edit manually. */
 @theme inline {
   --color-eds-fg-brand: var(--eds-color-fg-brand);
-  --spacing-eds-spacing-0-5: var(--eds-spacing-0\.5);
-  --radius-eds-radius-1: var(--eds-radius-1);
   --font-sans: var(--eds-typography-body1-fontFamily);
 }
 
@@ -81,7 +79,7 @@ sync는 설치된 package의 공개 `@spectrabrain/eds/tokens.json`에서 token
 ```
 
 - `--font-sans`는 `@theme inline`의 마지막 줄이며 Tailwind의 기본 sans font를 EDS body1 font family로 바꿉니다.
-- 공개 spacing·radius token은 Tailwind CSS-safe alias로 연결합니다. `spacing-0.5`는 `p-eds-spacing-0-5`, `radius-1`은 `rounded-eds-radius-1`처럼 사용합니다. alias의 점은 `-`로 바뀌며, 생성 CSS의 `var(--eds-spacing-0\.5)`에서만 점을 escape합니다.
+- padding·margin·gap·radius에는 Tailwind CSS v4 기본 utility를 씁니다. 예: `p-4`, `m-2`, `gap-3`, `rounded-lg`. EDS token 별칭은 색상과 typography에만 생성합니다. 선택 기준은 `TOKEN_CONTEXT.md`를 따릅니다.
 - `@theme`의 EDS alias는 sync가 생성한 `var(--eds-*)` 참조만 두고, EDS를 업데이트할 때마다 `npm run sync:eds`로 다시 생성합니다.
 - `eds-tokens.css`는 `@theme`·`@utility`를 담으므로 Tailwind root CSS에서만 import합니다. `@spectrabrain/eds/styles.css`와 `eds-tokens.css`는 각각 한 곳에서만 import합니다.
 - `src/styles/eds-tokens.css`는 생성물이지만 저장소에 commit합니다. install은 이 파일을 만들지 않으므로, 파일이 없으면 Tailwind root의 `@import`가 깨지고, `pretypecheck`·`prebuild` hook(yarn berry는 `typecheck`·`build` 앞의 `eds doctor`)과 `--print-ci` CI job의 `eds doctor`가 `missing:`으로 실패합니다.

package/TOKEN_CONTEXT.md

@@ -90,25 +90,9 @@ import { cssVar } from "@spectrabrain/eds/tokens";
 
 ## Spacing과 radius
 
-소비처 로컬 UI와 EDS component 밖의 배치에는 공개 spacing·radius token을 씁니다. 현재 scale 전체를 공개하며, 이름의 소수점은 유지합니다.
-
-- spacing: `spacing-none`, `spacing-0.5`, `spacing-1`, `spacing-1.5`, `spacing-2`, `spacing-2.5`, `spacing-3`, `spacing-3.5`, `spacing-4`, `spacing-4.5`, `spacing-5`, `spacing-6`, `spacing-7`, `spacing-7.5`, `spacing-8`, `spacing-9`, `spacing-10`, `spacing-11`, `spacing-12`
-- radius: `radius-none`, `radius-1`, `radius-2`, `radius-3`, `radius-4`, `radius-5`, `radius-6`, `radius-7`, `radius-8`, `radius-9`, `radius-10`
-
-EDS와 sync한 Tailwind CSS v4 root가 있는 저장소에서는 CSS-safe alias를 사용합니다. `spacing-0.5`는 `p-eds-spacing-0-5`, `radius-1`은 `rounded-eds-radius-1`처럼 씁니다. `0.5`·`1.5`·`2.5`·`3.5`·`4.5`·`7.5`의 점은 alias에서 `-`로 바뀝니다.
-
-Tailwind CSS v4 alias를 사용하지 않는 저장소에서는 `@spectrabrain/eds/tokens`의 `SemanticTokenName` 자동완성과 `cssVar()`를 사용합니다. public 이름은 `spacing-0.5`로 전달하고, CSS reference에서만 점이 escape됩니다.
-
-```tsx
-import { cssVar } from "@spectrabrain/eds/tokens";
-
-<div style={{ padding: cssVar("spacing-0.5"), borderRadius: cssVar("radius-1") }}>…</div>;
-// var(--eds-spacing-0\.5), var(--eds-radius-1)
-```
-
-직접 CSS를 쓸 때도 `tokens.json`의 `tokens.<name>.$extensions.eds.cssVariable` mapping을 따릅니다. CSS custom property 선언과 `var()` reference에서만 `.`을 escape하며, public token 이름은 바꾸지 않습니다.
+padding, margin, gap, radius에는 Tailwind CSS v4 기본 utility를 권장합니다(예: `p-4`, `m-2`, `gap-3`, `rounded-lg`). EDS는 spacing·radius token과 utility를 제공하지 않습니다. Tailwind CSS v4를 쓰지 않는 소비처는 기존 CSS 규칙을 따릅니다.
 
 ## 확인 목록
 
-- 새로 쓴 CSS variable이 `tokens.json`의 `cssVariable` mapping과 일치하는지 확인합니다. dotted public name은 `var(--eds-spacing-0\.5)`처럼 CSS reference에서만 escape합니다. `eds doctor`는 Tailwind CSS v4 root가 있을 때만 `eds-*` class를 검사하고, typecheck는 `cssVar()` 인자를 검사합니다.
+- 공개 CSS variable은 설치된 `tokens.json`의 `cssVariable` mapping을 따릅니다. `eds doctor`는 Tailwind CSS v4 root가 있을 때만 `eds-*` class를 검사하고, typecheck는 `cssVar()` 인자를 검사합니다.
 - typography는 preset 하나(`eds-typography-*` class 또는 같은 preset의 변수 다섯 개)로 지정합니다.

package/consumer/generate-tailwind.mjs

@@ -11,10 +11,6 @@ const propertyNames = [
 
 export const fontSansStyleName = "body1";
 
-function safeTailwindAlias(name) {
-  return "eds-" + name.replace(/\./g, "-");
-}
-
 function cssVariableForToken(manifest, name) {
   const cssVariable = manifest.tokens?.[name]?.$extensions?.eds?.cssVariable;
   if (typeof cssVariable === "string") {
@@ -24,27 +20,9 @@ function cssVariableForToken(manifest, name) {
   return "--eds-" + name.replace(/\./g, "\\.");
 }
 
-function collectDimensionAliases(manifest, prefix) {
-  const aliases = new Map();
-
-  for (const name of Object.keys(manifest.tokens ?? {}).filter((entry) => entry.startsWith(prefix))) {
-    const alias = safeTailwindAlias(name);
-    const existing = aliases.get(alias);
-    if (existing !== undefined && existing !== name) {
-      throw new Error(`Tailwind alias collision: ${existing} and ${name} both map to ${alias}.`);
-    }
-
-    aliases.set(alias, name);
-  }
-
-  return [...aliases.entries()].sort(([left], [right]) => left.localeCompare(right));
-}
-
 export function renderTailwindCss(manifest, version) {
   const tokens = Object.keys(manifest.tokens ?? {});
   const colorNames = tokens.filter((name) => name.startsWith("color-"));
-  const spacingAliases = collectDimensionAliases(manifest, "spacing-");
-  const radiusAliases = collectDimensionAliases(manifest, "radius-");
   const typography = new Map();
 
   for (const name of tokens.filter((entry) => entry.startsWith("typography-"))) {
@@ -74,12 +52,6 @@ export function renderTailwindCss(manifest, version) {
   const colorAliases = colorNames
     .map((name) => `  --color-eds-${name.slice("color-".length)}: var(${cssVariableForToken(manifest, name)});`)
     .join("\n");
-  const spacingThemeAliases = spacingAliases
-    .map(([alias, name]) => `  --spacing-${alias}: var(${cssVariableForToken(manifest, name)});`)
-    .join("\n");
-  const radiusThemeAliases = radiusAliases
-    .map(([alias, name]) => `  --radius-${alias}: var(${cssVariableForToken(manifest, name)});`)
-    .join("\n");
   // Last line of the @theme block: Tailwind's default font family becomes the EDS body font.
   const fontSans = `  --font-sans: var(--eds-typography-${fontSansStyleName}-fontFamily);`;
   const typographyUtilities = [...typography.keys()].sort().map((styleName) => [
@@ -96,8 +68,6 @@ export function renderTailwindCss(manifest, version) {
     `/* Generated from @spectrabrain/eds@${version}. Do not edit manually. */`,
     "@theme inline {",
     colorAliases,
-    spacingThemeAliases,
-    radiusThemeAliases,
     fontSans,
     "}",
     "",

package/consumer/scan-classes.mjs

@@ -10,9 +10,10 @@ const opacity = "(?:/[0-9]{1,3})?";
 
 const edsColorClass = new RegExp(boundaryBefore + variantPrefix + colorUtility + "-eds-([A-Za-z0-9-]+)" + opacity + boundaryAfter, "g");
 const edsTypographyClass = new RegExp(boundaryBefore + variantPrefix + "eds-typography-([A-Za-z0-9-]+)" + boundaryAfter, "g");
-const dimensionUtility = "(?:p|px|py|ps|pe|pt|pr|pb|pl|m|mx|my|ms|me|mt|mr|mb|ml|gap|gap-x|gap-y|space-x|space-y|inset|inset-x|inset-y|start|end|top|right|bottom|left|w|min-w|max-w|h|min-h|max-h|size|basis|scroll-m|scroll-p)";
-const edsSpacingClass = new RegExp(boundaryBefore + variantPrefix + dimensionUtility + "-eds-(spacing-[A-Za-z0-9-]+)" + boundaryAfter, "g");
-const edsRadiusClass = new RegExp(boundaryBefore + variantPrefix + "rounded(?:-(?:s|e|t|r|b|l|ss|se|ee|es|tl|tr|br|bl))?-eds-(radius-[A-Za-z0-9-]+)" + boundaryAfter, "g");
+const retiredDimensionClass = new RegExp(
+  boundaryBefore + variantPrefix + "-?[A-Za-z0-9-]+-eds-(?:spacing|radius)-[A-Za-z0-9-]+" + boundaryAfter,
+  "g",
+);
 const rawColorClass = new RegExp(
   boundaryBefore + variantPrefix + colorUtility +
     "-(?:(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-[0-9]{2,3}|white|black|\\[(?:#|rgba?\\(|hsla?\\(|oklch\\(|oklab\\(|color\\()[^\\]]*\\])" +
@@ -20,11 +21,10 @@ const rawColorClass = new RegExp(
   "g",
 );
 
-// The public class names are derived exactly like eds sync derives the Tailwind aliases from tokens.json.
+// EDS publishes color and typography utilities. Spacing and radius use Tailwind CSS v4 defaults.
 export function publicClassNames(manifest) {
   const colors = new Set();
   const typography = new Set();
-  const dimensions = new Set();
   for (const name of Object.keys(manifest.tokens ?? {})) {
     if (name.startsWith("color-")) {
       colors.add("eds-" + name.slice("color-".length));
@@ -35,18 +35,15 @@ export function publicClassNames(manifest) {
       typography.add(match[1]);
       continue;
     }
-    if (name.startsWith("spacing-") || name.startsWith("radius-")) {
-      dimensions.add("eds-" + name.replace(/\./g, "-"));
-    }
   }
-  return { colors, typography, dimensions };
+  return { colors, typography };
 }
 
 // files: [{ path, contents }] as readSources() lists them (the generated eds-tokens.css is not among them).
 // unknown: eds-* classes that no public token backs (always a mistake, Tailwind silently drops them).
 // raw: Tailwind palette, white/black and arbitrary color classes that bypass the EDS tokens (informational).
 export function scanClassNames({ consumerRoot, manifest, files }) {
-  const { colors, typography, dimensions } = publicClassNames(manifest);
+  const { colors, typography } = publicClassNames(manifest);
   const unknown = [];
   const raw = [];
   for (const file of files) {
@@ -70,15 +67,8 @@ export function scanClassNames({ consumerRoot, manifest, files }) {
           unknown.push({ location, className: match[0] });
         }
       }
-      for (const match of line.matchAll(edsSpacingClass)) {
-        if (match[1] !== undefined && !dimensions.has("eds-" + match[1])) {
-          unknown.push({ location, className: match[0] });
-        }
-      }
-      for (const match of line.matchAll(edsRadiusClass)) {
-        if (match[1] !== undefined && !dimensions.has("eds-" + match[1])) {
-          unknown.push({ location, className: match[0] });
-        }
+      for (const match of line.matchAll(retiredDimensionClass)) {
+        unknown.push({ location, className: match[0] });
       }
       for (const match of line.matchAll(rawColorClass)) {
         raw.push({ location, className: match[0] });

package/dist/components/Button/README.md

@@ -65,10 +65,8 @@ Layout은 prop으로 지정하지 않고 슬롯 조합에서 추론합니다.
 | `iconBoth` | `children`과 앞·뒤 아이콘을 모두 지정합니다. | 양쪽 아이콘이 모두 의미를 더하는 명확한 경우에만 사용합니다. |
 | `iconOnly` | `children` 없이 `icon` 또는 `iconName`과 `aria-label`을 지정합니다. | |
 
-- 이름 슬롯(`iconName`·`startIconName`·`endIconName`)은 승인된 아이콘 목록의 lucide PascalCase 전체 이름만 받습니다. `ButtonIconName`이 이 목록과 같은 union이라 목록에 없는 이름은 TypeScript 오류이고, 런타임에 전달되면 render 오류입니다. 전체 목록은 설치된 패키지 `spec.json`의 `api.iconNames`에 있습니다.
-- 목록은 `lucide-react`의 canonical 이름만 포함하며 `AlertCircle`처럼 deprecated된 alias는 허용하지 않습니다.
-- 목록 밖 아이콘은 `icon`, `startIcon`, `endIcon`에 `ReactElement`로 전달하며, 같은 슬롯에 이름과 custom element를 함께 지정하지 않습니다. `lucide-react`에서 직접 import할 때는 EDS package root `package.json`의 `dependencies["lucide-react"]`와 같은 exact 버전을 소비처 `package.json`에 선언합니다. pnpm처럼 엄격한 node_modules에서는 선언 없이 resolve되지 않고, 버전이 다르면 아이콘 코드가 두 벌 번들됩니다. custom lucide 아이콘은 lucide 기본 stroke를 그대로 써서 이름으로 지정한 아이콘과 맞춥니다.
-- 목록 밖 아이콘을 `ReactElement`로 썼다면 완료 보고에 아이콘 이름과 사용 파일을 allowlist 추가 후보로 적습니다.
+- 이름 슬롯(`iconName`·`startIconName`·`endIconName`)은 설치된 `lucide-react`의 실제 아이콘 component 이름과 alias를 모두 받습니다. `ButtonIconName`이 이 목록을 자동완성하며, 전체 이름은 `spec.json`의 `api.iconNames`에 있습니다. 잘못된 이름은 TypeScript 오류이고 런타임에도 render 오류입니다.
+- custom 아이콘은 `icon`·`startIcon`·`endIcon`에 `ReactElement`로 전달합니다. 같은 슬롯에 이름과 custom element를 함께 지정하지 않습니다. `lucide-react`에서 직접 import할 때는 EDS package root `package.json`의 `dependencies["lucide-react"]`와 같은 exact 버전을 소비처 `package.json`에 선언합니다. pnpm처럼 엄격한 node_modules에서는 선언 없이 resolve되지 않고, 버전이 다르면 아이콘 코드가 두 벌 번들됩니다. 이름 슬롯은 설치된 아이콘 크기와 stroke를 사용합니다.
 
 ### State