sh-ui-cli 0.58.8 → 0.59.1

package/data/changelog/versions.json

@@ -2,6 +2,35 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.59.1",
+      "date": "2026-05-06",
+      "title": "접근성 라운드 1 — text-wrap: balance + 모바일 터치 타겟",
+      "type": "patch",
+      "highlights": [
+        "**`Card.Title` / `Dialog.Title` / `Popover.Title` 에 `text-wrap: balance` 추가** — 헤딩 텍스트가 두 줄 이상으로 wrap 될 때 마지막 줄에 단어 1~2개만 남는 orphan 문제 해소. 단어가 두 줄에 균등 분포. 한국어처럼 단어 길이 다양한 언어에서 효과 큼. 한 줄에 들어가면 no-op.",
+        "**모바일 터치 타겟 자동 보정 (WCAG 2.5.5)** — tokens.css 에 `@media (hover: none) and (pointer: coarse)` 블록 추가. 손가락 입력 환경에서 `--control-sm` (32px) / `--control-md` (40px) 가 자동으로 44px 로 확장. 모든 Button/Input 등 control-* 토큰을 사용하는 컴포넌트가 자동 적용. 데스크탑 (마우스/트랙패드) 은 영향 없음.",
+        "**`--control-lg`** (48px) 는 이미 44px 초과라 변경 불필요.",
+        "**4 variant + 듀얼 카피본 + pactrack 동기화** — Tailwind/plain/module/vanilla-extract + apps/docs + cli/templates."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.1"
+    },
+    {
+      "version": "0.59.0",
+      "date": "2026-05-06",
+      "title": "토큰 정책 전환 — px → rem (접근성 / 유저 글꼴 확대 반응)",
+      "type": "minor",
+      "highlights": [
+        "**dimension 토큰을 PX → REM 으로 일괄 전환** — `--space-2: 0.5rem`, `--text-sm: 0.875rem`, `--control-md: 2.5rem` 등. 1rem = 16px 가정. 사용자가 브라우저 글꼴 키울 때 컴포넌트가 비례 반응 (WCAG 1.4.4 준수). 사용자 root font-size 안 건드리면 시각적 no-op.",
+        "**PX 유지 예외** — `--border-width: 1px/2px` (1px 미만 정밀도), shadow offset (`--shadow-sm: 0 1px 2px ...`), breakpoint (`640px/768px/...`, MQ 호환성). 거의 1~2 token 한정.",
+        "**`packages/tokens/src/primitives.json` 마이그레이션** — spacing/fontSize/controlHeight 의 \"4px\" 등 dimension 값을 rem 으로 변경. build.mjs 의 dimensionToDart 가 \"0\" 도 처리.",
+        "**`inject.js` 의 spacing/typography/controls emit 함수에 toRem 헬퍼 추가** — 1rem=16px 변환 + trailing zero 제거 (0.50→0.5, 1.00→1).",
+        "**Dart (Flutter) 측은 PX 유지** — Flutter 는 logical pixel 단위라 dimension 그대로. CSS 만 rem 화.",
+        "**CLAUDE.md 규칙 v2** — \"토큰 정의부 PX 허용\" → \"토큰 정의부 REM 사용 (border/shadow 만 PX 예외)\". 향후 신규 토큰도 이 정책 따라야 함.",
+        "**기존 사용자 마이그레이션 가이드** — 기존 프로젝트의 정적 tokens.css 는 그대로 동작 (PX). REM 의 이점을 받으려면 `sh-ui add tokens` 재설치 또는 수동 마이그레이션 필요. patch release 가 아닌 minor 라 대응 시간 확보."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.0"
+    },
     {
       "version": "0.58.8",
       "date": "2026-05-06",

package/data/registry/react/components/card/index.tailwind.tsx

@@ -38,7 +38,7 @@ export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
     <div
       ref={ref}
       className={cn(
-        "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight",
+        "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight text-balance",
         className,
       )}
       {...props}

package/data/registry/react/components/card/styles.css

@@ -28,6 +28,7 @@
   font-weight: var(--weight-semibold);
   line-height: 1.25;
   letter-spacing: -0.01em;
+  text-wrap: balance;
 }
 
 .sh-ui-card__description {

package/data/registry/react/components/card/styles.module.css

@@ -28,6 +28,7 @@
   font-weight: var(--weight-semibold);
   line-height: 1.25;
   letter-spacing: -0.01em;
+  text-wrap: balance;
 }
 
 .description {

package/data/registry/react/components/dialog/index.tailwind.tsx

@@ -69,7 +69,7 @@ export const DialogTitle = React.forwardRef<
     <BaseDialog.Title
       ref={ref}
       className={cn(
-        "m-0 mb-[var(--space-1)] font-semibold text-[length:var(--text-lg)] leading-snug",
+        "m-0 mb-[var(--space-1)] font-semibold text-[length:var(--text-lg)] leading-snug text-balance",
         className,
       )}
       {...props}

package/data/registry/react/components/dialog/styles.css

@@ -62,6 +62,7 @@
   font-weight: var(--weight-semibold);
   font-size: var(--text-lg);
   line-height: 1.4;
+  text-wrap: balance;
 }
 
 /* ── Description ── */

package/data/registry/react/components/dialog/styles.module.css

@@ -62,6 +62,7 @@
   font-weight: var(--weight-semibold);
   font-size: var(--text-lg);
   line-height: 1.4;
+  text-wrap: balance;
 }
 
 /* ── Description ── */

package/data/registry/react/components/popover/index.tailwind.tsx

@@ -55,7 +55,7 @@ export const PopoverTitle = React.forwardRef<
   return (
     <BasePopover.Title
       ref={ref}
-      className={cn("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem]", className)}
+      className={cn("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem] text-balance", className)}
       {...props}
     />
   );

package/data/registry/react/components/popover/styles.css

@@ -46,6 +46,7 @@
   margin: 0 0 var(--space-1);
   font-weight: var(--weight-semibold);
   font-size: 0.9375rem;
+  text-wrap: balance;
 }
 
 .sh-ui-popover__description {

package/data/registry/react/components/popover/styles.module.css

@@ -46,6 +46,7 @@
   margin: 0 0 var(--space-1);
   font-weight: var(--weight-semibold);
   font-size: 0.9375rem;
+  text-wrap: balance;
 }
 
 .popover__description {

package/data/tokens/build.mjs

@@ -194,8 +194,9 @@ function cssColorToDart(css) {
   throw new Error(`지원하지 않는 CSS 색상: ${css}`);
 }
 
-/** "0.5rem" → 8.0, "16px" → 16.0 */
+/** "0.5rem" → 8.0, "16px" → 16.0, "0" → 0.0 */
 function dimensionToDart(value) {
+  if (value === "0" || value === 0) return "0.0";
   const rem = /^(-?\d*\.?\d+)rem$/.exec(value);
   if (rem) return (parseFloat(rem[1]) * 16).toFixed(1);
   const px = /^(-?\d*\.?\d+)px$/.exec(value);

package/data/tokens/src/primitives.json

@@ -53,17 +53,17 @@
   },
 
   "spacing": {
-    "0":  { "$value": "0px",   "$type": "dimension" },
-    "1":  { "$value": "4px",   "$type": "dimension" },
-    "2":  { "$value": "8px",   "$type": "dimension" },
-    "3":  { "$value": "12px",  "$type": "dimension" },
-    "4":  { "$value": "16px",  "$type": "dimension" },
-    "5":  { "$value": "20px",  "$type": "dimension" },
-    "6":  { "$value": "24px",  "$type": "dimension" },
-    "8":  { "$value": "32px",  "$type": "dimension" },
-    "10": { "$value": "40px",  "$type": "dimension" },
-    "12": { "$value": "48px",  "$type": "dimension" },
-    "16": { "$value": "64px",  "$type": "dimension" }
+    "0":  { "$value": "0",         "$type": "dimension" },
+    "1":  { "$value": "0.25rem",   "$type": "dimension" },
+    "2":  { "$value": "0.5rem",    "$type": "dimension" },
+    "3":  { "$value": "0.75rem",   "$type": "dimension" },
+    "4":  { "$value": "1rem",      "$type": "dimension" },
+    "5":  { "$value": "1.25rem",   "$type": "dimension" },
+    "6":  { "$value": "1.5rem",    "$type": "dimension" },
+    "8":  { "$value": "2rem",      "$type": "dimension" },
+    "10": { "$value": "2.5rem",    "$type": "dimension" },
+    "12": { "$value": "3rem",      "$type": "dimension" },
+    "16": { "$value": "4rem",      "$type": "dimension" }
   },
 
   "radius": {
@@ -76,14 +76,14 @@
   },
 
   "fontSize": {
-    "xs":  { "$value": "12px", "$type": "dimension" },
-    "sm":  { "$value": "14px", "$type": "dimension" },
-    "base":{ "$value": "16px", "$type": "dimension" },
-    "lg":  { "$value": "18px", "$type": "dimension" },
-    "xl":  { "$value": "20px", "$type": "dimension" },
-    "2xl": { "$value": "24px", "$type": "dimension" },
-    "3xl": { "$value": "30px", "$type": "dimension" },
-    "4xl": { "$value": "36px", "$type": "dimension" }
+    "xs":  { "$value": "0.75rem",  "$type": "dimension" },
+    "sm":  { "$value": "0.875rem", "$type": "dimension" },
+    "base":{ "$value": "1rem",     "$type": "dimension" },
+    "lg":  { "$value": "1.125rem", "$type": "dimension" },
+    "xl":  { "$value": "1.25rem",  "$type": "dimension" },
+    "2xl": { "$value": "1.5rem",   "$type": "dimension" },
+    "3xl": { "$value": "1.875rem", "$type": "dimension" },
+    "4xl": { "$value": "2.25rem",  "$type": "dimension" }
   },
 
   "fontWeight": {
@@ -112,9 +112,9 @@
   },
 
   "controlHeight": {
-    "sm": { "$value": "32px", "$type": "dimension" },
-    "md": { "$value": "40px", "$type": "dimension" },
-    "lg": { "$value": "48px", "$type": "dimension" }
+    "sm": { "$value": "2rem",   "$type": "dimension" },
+    "md": { "$value": "2.5rem", "$type": "dimension" },
+    "lg": { "$value": "3rem",   "$type": "dimension" }
   },
 
   "borderWidth": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.58.8",
+  "version": "0.59.1",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/create/theme/inject.js

@@ -126,9 +126,17 @@ export const buildDartRadiusBlock = (theme) => {
 
 const SPACING_KEYS = ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'];
 
+// 1rem = 16px 가정. 0 은 unit 없이 emit (CSS 권장).
+// trailing zero 제거 (0.50 → 0.5, 1.00 → 1).
+const toRem = (px) => {
+  if (px === 0) return '0';
+  return `${parseFloat((px / 16).toFixed(4))}rem`;
+};
+
 export const buildCssSpacingBlock = (spacing) =>
-  SPACING_KEYS.map((k) => `  --space-${k}: ${spacing[k]}px;`).join('\n');
+  SPACING_KEYS.map((k) => `  --space-${k}: ${toRem(spacing[k])};`).join('\n');
 
+// Flutter 는 logical pixel 사용. Dart 측은 PX 그대로 유지.
 export const buildDartSpacingBlock = (spacing) =>
   SPACING_KEYS.map((k) => `    s${k}: ${spacing[k].toFixed(1)},`).join('\n');
 
@@ -137,7 +145,7 @@ export const buildDartSpacingBlock = (spacing) =>
 const TYPOGRAPHY_KEYS = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'];
 
 export const buildCssTypographyBlock = (typography) =>
-  TYPOGRAPHY_KEYS.map((k) => `  --text-${k}: ${typography[k]}px;`).join('\n');
+  TYPOGRAPHY_KEYS.map((k) => `  --text-${k}: ${toRem(typography[k])};`).join('\n');
 
 // Dart 클래스는 'xl2'/'xl3'/'xl4' 명명 규칙 사용 (숫자 prefix 회피).
 const DART_TEXT_FIELD_NAMES = {
@@ -165,7 +173,7 @@ export const buildDartWeightsBlock = (weights) =>
 const CONTROL_KEYS = ['sm', 'md', 'lg'];
 
 export const buildCssControlsBlock = (controls) =>
-  CONTROL_KEYS.map((k) => `  --control-${k}: ${controls[k]}px;`).join('\n');
+  CONTROL_KEYS.map((k) => `  --control-${k}: ${toRem(controls[k])};`).join('\n');
 
 export const buildDartControlsBlock = (controls) =>
   CONTROL_KEYS.map((k) => `    ${k}: ${controls[k].toFixed(1)},`).join('\n');

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

@@ -66,27 +66,27 @@
   --radius: 0.5rem;
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-16: 64px;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
   /* sh-ui:theme-space-end */
   /* sh-ui:theme-text-start */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-  --text-2xl: 24px;
-  --text-3xl: 30px;
-  --text-4xl: 36px;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
   /* sh-ui:theme-text-end */
   /* sh-ui:theme-weight-start */
   --weight-regular: 400;
@@ -110,9 +110,9 @@
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
-  --control-sm: 32px;
-  --control-md: 40px;
-  --control-lg: 48px;
+  --control-sm: 2rem;
+  --control-md: 2.5rem;
+  --control-lg: 3rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;
@@ -137,3 +137,11 @@
   --bp-lg: 1024px;
   --bp-xl: 1280px;
 }
+
+/* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    --control-sm: 2.75rem;
+    --control-md: 2.75rem;
+  }
+}

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

@@ -66,27 +66,27 @@
   --radius: 0.5rem;
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-16: 64px;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
   /* sh-ui:theme-space-end */
   /* sh-ui:theme-text-start */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-  --text-2xl: 24px;
-  --text-3xl: 30px;
-  --text-4xl: 36px;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
   /* sh-ui:theme-text-end */
   /* sh-ui:theme-weight-start */
   --weight-regular: 400;
@@ -110,9 +110,9 @@
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
-  --control-sm: 32px;
-  --control-md: 40px;
-  --control-lg: 48px;
+  --control-sm: 2rem;
+  --control-md: 2.5rem;
+  --control-lg: 3rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;
@@ -137,3 +137,11 @@
   --bp-lg: 1024px;
   --bp-xl: 1280px;
 }
+
+/* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    --control-sm: 2.75rem;
+    --control-md: 2.75rem;
+  }
+}

package/templates/ui-app-template/src/styles/tokens.css

@@ -66,27 +66,27 @@
   --radius: 0.5rem;
   /* sh-ui:theme-radius-end */
   /* sh-ui:theme-space-start */
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-16: 64px;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
   /* sh-ui:theme-space-end */
   /* sh-ui:theme-text-start */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-  --text-2xl: 24px;
-  --text-3xl: 30px;
-  --text-4xl: 36px;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
   /* sh-ui:theme-text-end */
   /* sh-ui:theme-weight-start */
   --weight-regular: 400;
@@ -110,9 +110,9 @@
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
-  --control-sm: 32px;
-  --control-md: 40px;
-  --control-lg: 48px;
+  --control-sm: 2rem;
+  --control-md: 2.5rem;
+  --control-lg: 3rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;
@@ -137,3 +137,11 @@
   --bp-lg: 1024px;
   --bp-xl: 1280px;
 }
+
+/* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    --control-sm: 2.75rem;
+    --control-md: 2.75rem;
+  }
+}