sh-ui-cli 0.98.0 → 0.109.1

package/src/create/theme/presets.js

@@ -8,8 +8,8 @@
 
 const NEUTRAL_LIGHT = {
   'background': '#FFFFFF',
-  'background-subtle': '#FAFAFA',
-  'background-muted': '#F5F5F5',
+  'background-subtle': '#F5F5F5',
+  'background-muted': '#E5E5E5',
   'background-inverse': '#0A0A0A',
   'foreground': '#0A0A0A',
   'foreground-muted': '#525252',
@@ -20,6 +20,10 @@ const NEUTRAL_LIGHT = {
   'primary': '#171717',
   'primary-foreground': '#FAFAFA',
   'primary-hover': '#262626',
+  // accent — 디폴트는 primary 와 동일. 사용자가 분리하고 싶을 때만 별 값으로 override.
+  'accent': '#171717',
+  'accent-foreground': '#FAFAFA',
+  'accent-hover': '#262626',
   'danger': '#DC2626',
   'danger-foreground': '#FFFFFF',
   'danger-hover': '#B91C1C',
@@ -30,10 +34,10 @@ const NEUTRAL_LIGHT = {
   'warning-foreground': '#FFFFFF',
   'info': '#2563EB',
   'info-foreground': '#FFFFFF',
-  'sidebar-bg': '#FAFAFA',
+  'sidebar-bg': '#F5F5F5',
   'sidebar-fg': '#0A0A0A',
   'sidebar-border': '#E5E5E5',
-  'sidebar-accent': '#F5F5F5',
+  'sidebar-accent': '#E5E5E5',
   'sidebar-accent-fg': '#0A0A0A',
 };
 
@@ -51,6 +55,10 @@ const NEUTRAL_DARK = {
   'primary': '#FAFAFA',
   'primary-foreground': '#171717',
   'primary-hover': '#E5E5E5',
+  // accent — 디폴트는 primary 와 동일. 사용자가 분리하고 싶을 때만 별 값으로 override.
+  'accent': '#FAFAFA',
+  'accent-foreground': '#171717',
+  'accent-hover': '#E5E5E5',
   'danger': '#DC2626',
   'danger-foreground': '#FFFFFF',
   'danger-hover': '#EF4444',
@@ -79,8 +87,8 @@ export const THEME_PRESETS = {
     label: '슬레이트 — 차분한 슬레이트 + 인디고 (정보 밀도)',
     light: {
       'background': '#FFFFFF',
-      'background-subtle': '#F8FAFC',
-      'background-muted': '#F1F5F9',
+      'background-subtle': '#F1F5F9',
+      'background-muted': '#E2E8F0',
       'background-inverse': '#0F172A',
       'foreground': '#0F172A',
       'foreground-muted': '#475569',
@@ -91,6 +99,9 @@ export const THEME_PRESETS = {
       'primary': '#4F46E5',
       'primary-foreground': '#FFFFFF',
       'primary-hover': '#4338CA',
+      'accent': '#4F46E5',
+      'accent-foreground': '#FFFFFF',
+      'accent-hover': '#4338CA',
       'danger': '#DC2626',
       'danger-foreground': '#FFFFFF',
       'danger-hover': '#B91C1C',
@@ -101,10 +112,10 @@ export const THEME_PRESETS = {
       'warning-foreground': '#FFFFFF',
       'info': '#2563EB',
       'info-foreground': '#FFFFFF',
-      'sidebar-bg': '#F8FAFC',
+      'sidebar-bg': '#F1F5F9',
       'sidebar-fg': '#0F172A',
       'sidebar-border': '#E2E8F0',
-      'sidebar-accent': '#F1F5F9',
+      'sidebar-accent': '#E2E8F0',
       'sidebar-accent-fg': '#0F172A',
     },
     dark: {
@@ -121,6 +132,11 @@ export const THEME_PRESETS = {
       'primary': '#818CF8',
       'primary-foreground': '#1E1B4B',
       'primary-hover': '#A5B4FC',
+      // accent chroma 상향 — primary 보다 한 단계 lighter+saturated 한 indigo-300.
+      // 어두운 배경 위에서 highlight (링크/선택 상태) 가독성 ↑ (v0.109.0+).
+      'accent': '#A5B4FC',
+      'accent-foreground': '#1E1B4B',
+      'accent-hover': '#C7D2FE',
       'danger': '#F87171',
       'danger-foreground': '#450A0A',
       'danger-hover': '#FCA5A5',
@@ -149,12 +165,19 @@ export const THEME_PRESETS = {
       'primary': '#E11D48',
       'primary-foreground': '#FFF1F2',
       'primary-hover': '#BE123C',
+      'accent': '#E11D48',
+      'accent-foreground': '#FFF1F2',
+      'accent-hover': '#BE123C',
     },
     dark: {
       ...NEUTRAL_DARK,
       'primary': '#FB7185',
       'primary-foreground': '#4C0519',
       'primary-hover': '#FDA4AF',
+      // accent chroma 상향 — rose-300 (v0.109.0+).
+      'accent': '#FDA4AF',
+      'accent-foreground': '#4C0519',
+      'accent-hover': '#FECDD3',
     },
     radius: 0.75,
     // 큰 모서리 + 큼직한 컨트롤 — 소비자 앱 / 캐주얼 인상
@@ -167,12 +190,19 @@ export const THEME_PRESETS = {
       'primary': '#059669',
       'primary-foreground': '#ECFDF5',
       'primary-hover': '#047857',
+      'accent': '#059669',
+      'accent-foreground': '#ECFDF5',
+      'accent-hover': '#047857',
     },
     dark: {
       ...NEUTRAL_DARK,
       'primary': '#34D399',
       'primary-foreground': '#022C22',
       'primary-hover': '#6EE7B7',
+      // accent chroma 상향 — emerald-300 (v0.109.0+).
+      'accent': '#6EE7B7',
+      'accent-foreground': '#022C22',
+      'accent-hover': '#A7F3D0',
     },
     radius: 0.5,
   },
@@ -183,12 +213,19 @@ export const THEME_PRESETS = {
       'primary': '#7C3AED',
       'primary-foreground': '#F5F3FF',
       'primary-hover': '#6D28D9',
+      'accent': '#7C3AED',
+      'accent-foreground': '#F5F3FF',
+      'accent-hover': '#6D28D9',
     },
     dark: {
       ...NEUTRAL_DARK,
       'primary': '#A78BFA',
       'primary-foreground': '#1E1B4B',
       'primary-hover': '#C4B5FD',
+      // accent chroma 상향 — violet-300 (v0.109.0+).
+      'accent': '#C4B5FD',
+      'accent-foreground': '#1E1B4B',
+      'accent-hover': '#DDD6FE',
     },
     radius: 0.625,
     // 살짝 큰 컨트롤 + 진한 강조 보더 (creative/디자인 도구 인상)

package/src/css-bundle.mjs

@@ -88,6 +88,66 @@ export function stripStylesImport(tsxText) {
   );
 }
 
+/**
+ * 크로스컴포넌트 상대 import 매칭 정규식 생성 (호출마다 새 RegExp — lastIndex 상태 회피).
+ *
+ * 매칭: `... from "../<comp>..."` / `... from "../<comp>/index.tsx"` 형태.
+ *   - group1: `from` 키워드 + 공백 (re-export `export {…} from` 도 포함)
+ *   - group2: 따옴표
+ *   - 리터럴 `../` 다음 negative-lookahead `(?!\.)` — `../../` / `../.x` 는 제외
+ *     (sh-ui 컴포넌트는 항상 형제 디렉터리라 정확히 한 단계 `../`)
+ *   - group3: 컴포넌트 경로 (따옴표/개행 없음, subpath 포함 가능: `form/types`)
+ * 같은 디렉터리(`./styles.css` 등)와 side-effect import(`import "..."`)는 매칭 안 됨.
+ */
+function crossComponentImportRe() {
+  return /(\bfrom\s+)(["'])\.\.\/(?!\.)([^"'\n]+)\2/g;
+}
+
+/**
+ * 컴포넌트 소스에 다른 sh-ui 컴포넌트를 가리키는 상대 import 가 있는지.
+ * add 시 aliases.components 미설정을 사전 차단하는 게이트로 사용.
+ */
+export function hasCrossComponentImport(content) {
+  return crossComponentImportRe().test(content);
+}
+
+/**
+ * registry 컴포넌트의 크로스컴포넌트 상대 import 를 사용자 config 의
+ * `aliases.components` 경유 모듈 스펙으로 재작성.
+ *
+ * 왜: registry 소스는 가독성을 위해 형제 컴포넌트를 `import … from "../popover"`
+ * 처럼 상대경로로 적는다. 이게 그대로 소비자 프로젝트에 emit 되면
+ * `moduleResolution: "NodeNext"`/`"Node16"` 환경에서 깨진다 — NodeNext 는
+ * 확장자 없는/디렉터리 상대 import 를 허용하지 않고, 과거 일부 버전이 emit 한
+ * `"../popover/index.tsx"` 는 명시적 `.tsx` 확장자라 TS5097 로 막힌다. 소비자는
+ * `allowImportingTsExtensions`+`noEmit` 같은 침습적 tsconfig 변경을 강요당한다.
+ * `@SH_UI_UTILS@` 가 `aliases.utils` 로 치환되는 것과 동일하게, 크로스컴포넌트
+ * import 도 add 시점에 `aliases.components` 로 재작성하면 Bundler/NodeNext
+ * 양쪽에서 소비자 tsconfig 변경 없이 resolve 된다.
+ *
+ * 변환 규칙: `../<rest>` → `<componentsAlias>/<rest>` (선행 `../` 제거),
+ * 그리고 말미의 `/index`(+`.tsx|.ts|.jsx|.js`)는 제거 — `../popover`,
+ * `../popover/index.tsx`, `../form/types` 가 모두 동일하게
+ * `<alias>/popover`, `<alias>/form/types` 로 정규화된다.
+ *
+ * `componentsAlias` 가 falsy 면 그대로 반환 (remove.mjs 의 best-effort 재생 replay
+ * 처럼 alias 미설정 컨텍스트에서 throw 하지 않기 위함 — 검증/차단은 add.mjs 책임).
+ *
+ * @param {string} content 컴포넌트 소스
+ * @param {string} componentsAlias 예: `@workspace/ui-core/components`
+ * @returns {string} 재작성된 소스
+ */
+export function rewriteCrossComponentImports(content, componentsAlias) {
+  if (!componentsAlias) return content;
+  return content.replace(
+    crossComponentImportRe(),
+    (_m, fromKw, quote, spec) => {
+      const rest = spec.replace(/\/index(\.[tj]sx?)?$/, "");
+      return `${fromKw}${quote}${componentsAlias}/${rest}${quote}`;
+    },
+  );
+}
+
 /**
  * registry 의 file 엔트리가 CSS 변종인지 (bundled 모드에서 별도 처리 대상).
  */

package/src/mcp.mjs

@@ -93,6 +93,34 @@ const INIT_DESCRIPTIONS = {
     tailwind: "Tailwind v4 utility class — class-variance-authority 기반",
     "css-modules": "CSS Modules — .module.css + styles.X 참조, 빌드 타임 hash 격리",
   },
+  // theme 프리셋 — sh_ui_create_project 의 theme 인자에 그대로 전달 가능.
+  // 사용자가 "다크 모던" / "따뜻한 종이" 같이 자연어로 의도를 표현하면 아래 keywordHints 로 매핑.
+  theme: {
+    neutral: "뉴트럴 — 흑백 강조 (sh-ui 기본). 어떤 브랜드에도 무난.",
+    slate: "슬레이트 — 차분한 슬레이트 + 인디고 (정보 밀도). 대시보드/관리자 인상.",
+    rose: "로즈 — 핑크 강조 + 둥근 모서리 (친근·여유). 소비자 앱·캐주얼.",
+    emerald: "에메랄드 — 그린 강조. 자연·금융·헬스 인상.",
+    violet: "바이올렛 — 퍼플 강조 + 살짝 라운드 (모던·또렷). 크리에이티브/디자인 도구.",
+  },
+  // 자연어 의도 → enum/preset 매핑 힌트 (한국어 표현 위주).
+  // 사용자가 "다크 모던" / "따뜻한 종이" / "한국 핀테크 스타일" 같이 의도만 던지면 AI 가
+  // 이 사전을 보고 platform/base/radius/mode/theme 조합으로 매핑한다.
+  keywordHints: {
+    "다크 모던 / dark modern / 검정 모던": "base=zinc · mode=dark · radius=sm · theme=neutral",
+    "라이트 모던 / 밝은 모던 / clean": "base=zinc · mode=light · radius=sm · theme=neutral",
+    "따뜻한 / 따뜻한 종이 / warm paper / 종이": "theme=rose 또는 neutral · radius=md · mode=light-dark",
+    "친근한 / 캐주얼 / 부드러운 / 동글동글 / soft": "theme=rose · radius=lg · mode=light-dark",
+    "한국 핀테크 / 핀테크 / fintech / 금융": "theme=slate (indigo) 또는 violet · radius=sm · mode=light-dark",
+    "기업 관리자 / 관리자 / 어드민 / admin / MES / ERP / 백오피스": "theme=slate · arch=mes · radius=sm",
+    "차분한 / 프로페셔널 / 푸른빛 / 정보 밀도": "base=slate 또는 theme=slate · radius=sm",
+    "그린 강조 / 자연 / 헬스 / 환경": "theme=emerald · radius=md",
+    "퍼플 강조 / 크리에이티브 / 디자인 도구": "theme=violet · radius=lg · borders=두꺼움",
+    "쇼핑몰 / 커머스 / 소비자 앱": "theme=rose 또는 emerald · radius=lg · mode=light-dark",
+    "데이터 대시보드 / 차트 / 분석 도구": "theme=slate · base=slate · radius=sm · 정보 밀도 ↑",
+    "AI / 챗봇 / 생성형": "theme=violet 또는 neutral · radius=md · mode=light-dark",
+    "스타트업 / 모던 / 트렌디": "theme=violet 또는 rose · radius=md",
+    "교육 / 학습 / 친근": "theme=rose 또는 emerald · radius=lg",
+  },
 };
 
 /** stdout 으로 출력되는 console.* 호출을 버퍼에 캡처해 텍스트로 반환. */
@@ -419,8 +447,10 @@ export async function startMcpServer() {
     "sh_ui_describe_init",
     {
       description:
-        "sh-ui init 의 4개 축(platform/base/radius/mode) 선택지와 한글 설명 반환. " +
-        "사용자의 자연어 의도(\"다크 모던\", \"따뜻한 느낌\")를 enum 값으로 매핑할 때 먼저 호출.",
+        "sh-ui init 의 선택지 사전 — platform/base/radius/mode/cssFramework/theme 의 enum + 한글 설명, " +
+        "그리고 사용자 자연어 의도 (\"다크 모던\" / \"따뜻한 종이\" / \"한국 핀테크 스타일\" 등) 를 " +
+        "enum/preset 조합으로 매핑하는 keywordHints 사전을 함께 반환. " +
+        "사용자가 톤을 자연어로 던지면 이 툴을 먼저 호출해 매핑 후 sh_ui_create_project 의 theme/base/radius 인자에 반영. v0.106.0+ 에서 theme + keywordHints 키 추가.",
       inputSchema: {},
     },
     async () => jsonResult(INIT_DESCRIPTIONS),
@@ -478,6 +508,17 @@ export async function startMcpServer() {
           ),
         port: z.string().optional()
           .describe("monorepo 첫 앱의 dev 포트. 기본 '3000'. structure=monorepo 일 때만 의미."),
+        gitInit: z.boolean().optional()
+          .describe(
+            "git init 실행 여부. 기본 auto — parent 가 이미 git tree 안이면 자동 스킵 (nested .git 충돌 방지), 밖이면 init. " +
+            "true 로 nested 강제, false 로 명시 스킵. v0.102.0+ 신규.",
+          ),
+        locale: z.enum(["default", "ko"]).optional()
+          .describe(
+            "사용자 지역 디폴트 가정. 'ko' 선택 시 globals.css 에 Pretendard 폰트가 자동 적용 (CDN @import + body font-family). " +
+            "한국어 사용자가 init 직후 거의 100% 첫 작업이라 한 옵션으로 자동화. " +
+            "locales (복수) 와 다름 — locales 는 i18n 활성화 시 생성할 locale 코드 목록. v0.103.0+ 신규.",
+          ),
       },
     },
     async (input) => {
@@ -537,6 +578,8 @@ export async function startMcpServer() {
             locales: input.locales,
             appName: input.appName,
             port: input.port,
+            gitInit: input.gitInit,
+            locale: input.locale,
             yes: true, // 사전 검사를 마쳤으니 generator 의 confirm 프롬프트 우회
           }),
         );
@@ -802,8 +845,9 @@ export async function startMcpServer() {
       success: HEX.optional(), "success-foreground": HEX.optional(),
       warning: HEX.optional(), "warning-foreground": HEX.optional(),
       info: HEX.optional(), "info-foreground": HEX.optional(),
+      accent: HEX.optional(), "accent-foreground": HEX.optional(), "accent-hover": HEX.optional(),
     })
-    .describe("15개 필수 색 토큰 + 옵셔널 6개(success/warning/info × -foreground). 각 값은 #RRGGBB hex");
+    .describe("15개 필수 색 토큰 + 옵셔널 9개(success/warning/info × -foreground + accent/accent-foreground/accent-hover). 각 값은 #RRGGBB hex");
 
   server.registerTool(
     "sh_ui_encode_theme",

package/src/remove.mjs

@@ -2,7 +2,13 @@ import { readFile, rm, rmdir, readdir, writeFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
 import { dirname, resolve, relative } from "node:path";
 import { getRegistryRoot } from "./paths.mjs";
-import { removeSection, isStyleFile, stripStylesImport, isTsxFile } from "./css-bundle.mjs";
+import {
+  removeSection,
+  isStyleFile,
+  stripStylesImport,
+  isTsxFile,
+  rewriteCrossComponentImports,
+} from "./css-bundle.mjs";
 
 /** registry file 엔트리가 현재 cssFramework 와 호환되는지 (add.mjs 와 동일 규칙). */
 function frameworkMatches(entry, cssFramework) {
@@ -105,6 +111,9 @@ export async function remove({ cwd, names, force = false, dryRun = false }) {
         if (config.aliases?.utils) {
           out = out.replaceAll("@SH_UI_UTILS@", config.aliases.utils);
         }
+        if (config.aliases?.components) {
+          out = rewriteCrossComponentImports(out, config.aliases.components);
+        }
         if (bundled && isTsxFile(file)) out = stripStylesImport(out);
         return out;
       };

package/src/theme-extract.mjs

@@ -55,6 +55,7 @@ const TOKEN_KEYS_OPTIONAL = [
   "info", "info-foreground",
   "danger-hover",
   "ring",
+  "accent", "accent-foreground", "accent-hover",
 ];
 
 const HEX_RE = /^#[0-9A-Fa-f]{6}$/;

package/templates/nextjs-standalone/_arch/flat/app/globals.css

@@ -31,6 +31,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -46,10 +49,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-fg: var(--sidebar-accent-fg);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 @layer base {

package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css

@@ -1,11 +1,13 @@
 /* Generated by @sh-ui/tokens — do not edit directly */
+/* Input:     sh-ui.config.json (theme block) */
+/* Regenerate: npx sh-ui-cli tokens upgrade --replace */
 /* base=neutral radius=md mode=light-dark */
 
 /* sh-ui:theme-colors-start */
 :root {
   --background: #FFFFFF;
-  --background-subtle: #FAFAFA;
-  --background-muted: #F5F5F5;
+  --background-subtle: #F5F5F5;
+  --background-muted: #E5E5E5;
   --background-inverse: #0A0A0A;
   --foreground: #0A0A0A;
   --foreground-muted: #525252;
@@ -16,6 +18,9 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --accent: #171717;
+  --accent-foreground: #FAFAFA;
+  --accent-hover: #262626;
   --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
@@ -26,10 +31,10 @@
   --warning-foreground: #FFFFFF;
   --info: #2563EB;
   --info-foreground: #FFFFFF;
-  --sidebar-bg: #FAFAFA;
+  --sidebar-bg: #F5F5F5;
   --sidebar-fg: #0A0A0A;
   --sidebar-border: #E5E5E5;
-  --sidebar-accent: #F5F5F5;
+  --sidebar-accent: #E5E5E5;
   --sidebar-accent-fg: #0A0A0A;
 }
 @media (prefers-color-scheme: dark) {
@@ -47,6 +52,9 @@
     --primary: #FAFAFA;
     --primary-foreground: #171717;
     --primary-hover: #E5E5E5;
+    --accent: #FAFAFA;
+    --accent-foreground: #171717;
+    --accent-hover: #E5E5E5;
     --danger: #DC2626;
     --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
     --danger-foreground: #FFFFFF;
@@ -77,6 +85,9 @@
   --primary: #FAFAFA;
   --primary-foreground: #171717;
   --primary-hover: #E5E5E5;
+  --accent: #FAFAFA;
+  --accent-foreground: #171717;
+  --accent-hover: #E5E5E5;
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
   --danger-foreground: #FFFFFF;
@@ -97,6 +108,16 @@
 :root {
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
+  /* sh-ui:theme-radius-scale-start — Tailwind utility rounded-sm/md/lg/xl/full 의 값과 일치.
+   * v0.106.0+ — 사용자 base radius (--radius) 와 별개의 절대값 scale.
+   * --radius 변경은 컴포넌트 default (input/button 등) 만 영향,
+   * rounded-* utility 는 아래 scale 값을 그대로 따른다. */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  /* sh-ui:theme-radius-scale-end */
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
   --space-0: 0;
@@ -133,6 +154,9 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
   --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
@@ -142,6 +166,13 @@
   /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-tracking-start */
+  --tracking-tighter: -0.04em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.04em;
+  /* sh-ui:theme-tracking-end */
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;

package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css

@@ -1,11 +1,13 @@
 /* Generated by @sh-ui/tokens — do not edit directly */
+/* Input:     sh-ui.config.json (theme block) */
+/* Regenerate: npx sh-ui-cli tokens upgrade --replace */
 /* base=neutral radius=md mode=light-dark */
 
 /* sh-ui:theme-colors-start */
 :root {
   --background: #FFFFFF;
-  --background-subtle: #FAFAFA;
-  --background-muted: #F5F5F5;
+  --background-subtle: #F5F5F5;
+  --background-muted: #E5E5E5;
   --background-inverse: #0A0A0A;
   --foreground: #0A0A0A;
   --foreground-muted: #525252;
@@ -16,6 +18,9 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --accent: #171717;
+  --accent-foreground: #FAFAFA;
+  --accent-hover: #262626;
   --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
@@ -26,10 +31,10 @@
   --warning-foreground: #FFFFFF;
   --info: #2563EB;
   --info-foreground: #FFFFFF;
-  --sidebar-bg: #FAFAFA;
+  --sidebar-bg: #F5F5F5;
   --sidebar-fg: #0A0A0A;
   --sidebar-border: #E5E5E5;
-  --sidebar-accent: #F5F5F5;
+  --sidebar-accent: #E5E5E5;
   --sidebar-accent-fg: #0A0A0A;
 }
 @media (prefers-color-scheme: dark) {
@@ -47,6 +52,9 @@
     --primary: #FAFAFA;
     --primary-foreground: #171717;
     --primary-hover: #E5E5E5;
+    --accent: #FAFAFA;
+    --accent-foreground: #171717;
+    --accent-hover: #E5E5E5;
     --danger: #DC2626;
     --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
     --danger-foreground: #FFFFFF;
@@ -77,6 +85,9 @@
   --primary: #FAFAFA;
   --primary-foreground: #171717;
   --primary-hover: #E5E5E5;
+  --accent: #FAFAFA;
+  --accent-foreground: #171717;
+  --accent-hover: #E5E5E5;
   --danger: #DC2626;
   --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
   --danger-foreground: #FFFFFF;
@@ -97,6 +108,16 @@
 :root {
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
+  /* sh-ui:theme-radius-scale-start — Tailwind utility rounded-sm/md/lg/xl/full 의 값과 일치.
+   * v0.106.0+ — 사용자 base radius (--radius) 와 별개의 절대값 scale.
+   * --radius 변경은 컴포넌트 default (input/button 등) 만 영향,
+   * rounded-* utility 는 아래 scale 값을 그대로 따른다. */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  /* sh-ui:theme-radius-scale-end */
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
   --space-0: 0;
@@ -133,6 +154,9 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
   --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.12);
   /* sh-ui:theme-shadow-end */
   /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
@@ -142,6 +166,13 @@
   /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-tracking-start */
+  --tracking-tighter: -0.04em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.04em;
+  /* sh-ui:theme-tracking-end */
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;

package/templates/nextjs-standalone/_arch/mes/app/globals.css

@@ -31,6 +31,9 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
   --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-hover: var(--danger-hover);
@@ -46,10 +49,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-fg: var(--sidebar-accent-fg);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-toast: var(--shadow-toast);
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-wider: var(--tracking-wider);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 @layer base {