sh-ui-cli 0.38.0 → 0.40.0

package/data/changelog/versions.json

@@ -2,6 +2,42 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.40.0",
+      "date": "2026-04-29",
+      "title": "NumericInput 컴포넌트 + 토큰 편집기 UX 대폭 개선 (Accordion size, ShadowBuilder, XY 패드)",
+      "type": "minor",
+      "highlights": [
+        "**NumericInput** — 정식 sh-ui 컴포넌트 신설. 슬라이더 동반·토큰 편집기 같은 컴팩트 컨텍스트용 숫자 입력. type=text + inputMode=decimal + buffer state — Chrome 의 type=number select() 미지원 회피, '-'/'1.' 같은 transient 입력 허용, ArrowUp/Down step. NumberInput(폼·금액용) 과 책임 분리. `npx sh-ui-cli add numeric-input`",
+        "**Accordion size prop** — `size: 'sm' | 'md'`. sm 은 padding 8/4 + font 12px + chevron 12px 로 좁은 사이드바·다중 섹션에 적합. 페이지별 CSS override 대신 컴포넌트 레벨 variant 로 승격",
+        "**ShadowBuilder** (playground) — raw CSS `0 4px 12px rgba(...)` 직접 입력 → Figma 스타일 시각 편집기. X/Y/Blur/Spread NumericInput + ColorPicker + alpha %",
+        "**XY 패드 드래그** — ShadowBuilder 의 미리보기 박스가 ColorPicker 색공간처럼 클릭/드래그 가능. pointer 위치 → X/Y offset (1:1 px, ±50 클램프). pointer capture + touch-action: none 으로 모바일 터치 드래그도 지원",
+        "**advanced 모드 8 섹션** native details → sh-ui Accordion size=sm 으로 교체. chevron 인디케이터로 클릭 가능 신호 명확. 내보내기 섹션도 동일 패턴",
+        "**Accordion trigger hover** underline → background var(--background-muted) 틴트, disabled 가드(`:not([disabled]):not([data-disabled])`) — disabled 항목은 hover 무효과",
+        "**슬라이더 동반 키보드 입력** — 8 카테고리 31 슬라이더 + 그라데이션 9 슬라이더 옆 값 표시를 NumericInput 으로 교체. 드래그 + 키보드 입력 둘 다 지원. Slider docs 의 ControlledDemo 도 양방향 동기화로 업그레이드",
+        "**초기화 3분기** — '전체 초기화' / 'Light 초기화' / 'Dark 초기화'. 이전엔 모드별 한 버튼 (색만 reset) 또는 전체 한 버튼만 — 모드 색만 빠르게 되돌리는 use case + 모든 카테고리 nuke 둘 다 지원",
+        "**encodeTheme UTF-8 안전** — shadow/ease/gradient 가 자유 string 이라 한글 IME 입력 시 btoa(Latin1-only) InvalidCharacterError 회귀. TextEncoder UTF-8 바이트 → byte 별 String.fromCharCode → btoa 패턴으로 교체",
+        "**docs 페이지** — /components/numeric-input 신규 (server component + _demos 분리), Accordion size 예시 + API Reference 보강, '스타일 커스터마이즈' 에 hover 효과 override 안내"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.40.0"
+    },
+    {
+      "version": "0.39.0",
+      "date": "2026-04-29",
+      "title": "프리셋 정체성 강화 — slate / rose / violet 이 typography·controls·borders 도 차별화",
+      "type": "minor",
+      "highlights": [
+        "0.38.0 까지 5 프리셋이 색·radius 만 차별화 → 이제 typography·controls·borders 까지 프리셋 별 인상이 다름. neutral / emerald 는 디폴트 baseline (변화 없음), 나머지 셋은 정체성 부여",
+        "**slate** (정보 밀도) — text-base 14px (xs 11/sm 12/lg 16/xl 18/2xl 21/3xl 26/4xl 32), control-md 36px (sm 28/lg 44). 대시보드/관리자 인상",
+        "**rose** (친근·여유) — control-md 44px (sm 36/lg 52). 큼직한 터치 타겟 + 0.75rem 라운드 → 소비자 앱 인상",
+        "**violet** (모던·또렷) — control-md 42px (sm 34/lg 50), border-width-strong 3px (디폴트 2px). 약간 두꺼운 강조 보더로 창의·디자인 도구 인상",
+        "getThemePreset 시그니처 — 이전 `{light, dark, radius}` 만 → 이제 label 빼고 모든 카테고리 forward. CLI inject 가 자동으로 마커 섹션 교체",
+        "api.d.ts ThemePreset 인터페이스에 옵셔널 카테고리 6종 추가 (typography/controls/borders/spacing/weights/durations) — apps/docs 등 외부 사용자가 타입 안전",
+        "테스트 111개 (전 104 → +7). end-to-end 검증 — `--theme rose` 가 control-md 40 → 44 로 덮어쓰는지, `--theme slate` 가 text-base 16 → 14 로, `--theme violet` 이 border-width-strong 2 → 3 으로",
+        "참고: 기존 사용자가 0.38.0 까지 `--theme rose` 로 만든 프로젝트는 영향 없음 (이미 생성된 tokens.css 는 그대로). 새로 `--theme rose` 하면 0.39.0 정체성 그대로 들어감"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.39.0"
+    },
     {
       "version": "0.38.0",
       "date": "2026-04-29",

package/data/registry/react/components/accordion/index.tsx

@@ -8,16 +8,30 @@ function cx(...args: (string | undefined | false)[]) {
 
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-export const Accordion = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>>
->(({ className, ...props }, ref) => (
-  <BaseAccordion.Root
-    ref={ref}
-    className={cx("sh-ui-accordion", className)}
-    {...props}
-  />
-));
+export type AccordionSize = "sm" | "md";
+
+type AccordionProps = WithStringClassName<
+  React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>
+> & {
+  /**
+   * 트리거 + chevron + content 의 패딩·폰트 크기 묶음.
+   * - `md` (기본) — padding 16/4, font 15px, chevron 16px
+   * - `sm` — padding 8/4, font 12px, chevron 12px. 좁은 사이드바·다중 섹션에 적합.
+   * @default "md"
+   */
+  size?: AccordionSize;
+};
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <BaseAccordion.Root
+      ref={ref}
+      className={cx("sh-ui-accordion", className)}
+      data-size={size}
+      {...props}
+    />
+  ),
+);
 Accordion.displayName = "Accordion";
 
 export const AccordionItem = React.forwardRef<

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

@@ -32,12 +32,13 @@
   line-height: 1.4;
   text-align: left;
   cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard);
   -webkit-tap-highlight-color: transparent;
 }
 
-.sh-ui-accordion__trigger:hover .sh-ui-accordion__trigger-label {
-  text-decoration: underline;
-  text-underline-offset: 3px;
+/* hover는 enabled 일 때만. background tint — 다른 hover 효과를 원하면 className/style 로 override. */
+.sh-ui-accordion__trigger:not([disabled]):not([data-disabled]):hover {
+  background: var(--background-muted);
 }
 
 .sh-ui-accordion__trigger:focus-visible {
@@ -86,6 +87,22 @@
   color: var(--foreground-muted);
 }
 
+/* size="sm" — 좁은 사이드바·다중 섹션에 적합한 컴팩트 변형. */
+.sh-ui-accordion[data-size="sm"] .sh-ui-accordion__trigger {
+  padding: var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  line-height: 1.2;
+}
+.sh-ui-accordion[data-size="sm"] .sh-ui-accordion__chevron {
+  width: 12px;
+  height: 12px;
+}
+.sh-ui-accordion[data-size="sm"] .sh-ui-accordion__content {
+  padding: 0 var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sh-ui-accordion__panel,
   .sh-ui-accordion__chevron {

package/data/registry/react/components/numeric-input/index.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | null | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export interface NumericInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "defaultValue" | "onChange" | "type" | "min" | "max" | "step"
+  > {
+  /** 제어 모드 값. */
+  value?: number;
+  /** 비제어 모드 초기값. */
+  defaultValue?: number;
+  /** 값 변경 콜백. min/max 범위로 자동 clamp 된 값이 전달된다. */
+  onValueChange?: (value: number) => void;
+  /** 허용 최솟값. 입력값이 이보다 작으면 자동 clamp. */
+  min?: number;
+  /** 허용 최댓값. 입력값이 이보다 크면 자동 clamp. */
+  max?: number;
+  /** 화살표 키 step 폭. 디폴트 1. */
+  step?: number;
+  /** 값 우측에 부착할 단위 표시 (px / ms / % / ° 등). */
+  unit?: React.ReactNode;
+}
+
+/**
+ * 슬라이더 동반·토큰 편집 등 컴팩트 컨텍스트에 적합한 숫자 입력.
+ *
+ * 구현 특이점:
+ * - `type="text"` + `inputMode="decimal"` — type=number 가 Chrome 에서 select() 와
+ *   selectionStart/End 를 지원하지 않아 "0 위에 2 타이핑 → 02" 회귀가 발생함.
+ *   text 로 바꾸고 우리가 직접 숫자 검증/클램프.
+ * - 내부 buffer state — "-", "1.", "" 같이 입력 중간 transient 상태 허용. 유효한
+ *   숫자가 되는 순간 onValueChange 즉시 호출. 포커스 잃을 때 정규화.
+ * - focus 시 setTimeout(0) → select() — mouseup 의 커서 재배치 이후에 selection
+ *   적용되도록.
+ * - ArrowUp/Down 으로 step 조정, Enter 로 blur(commit).
+ *
+ * 일반 폼 입력에는 `Input` / `NumberInput` 사용 권장.
+ */
+export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      min,
+      max,
+      step = 1,
+      unit,
+      className,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<number>(defaultValue ?? 0);
+    const current = isControlled ? value! : internal;
+
+    const [buffer, setBuffer] = React.useState<string>(() => String(current));
+    const focusedRef = React.useRef(false);
+
+    // 포커스 잡지 않은 동안 외부 value 변경되면 buffer 동기화.
+    React.useEffect(() => {
+      if (!focusedRef.current) setBuffer(String(current));
+    }, [current]);
+
+    const clamp = (n: number) => {
+      let v = n;
+      if (min !== undefined && v < min) v = min;
+      if (max !== undefined && v > max) v = max;
+      return v;
+    };
+
+    const commit = (n: number): number => {
+      const c = clamp(n);
+      if (!isControlled) setInternal(c);
+      onValueChange?.(c);
+      return c;
+    };
+
+    return (
+      <span className="sh-ui-numeric-input">
+        <input
+          ref={ref}
+          type="text"
+          inputMode="decimal"
+          className={cx("sh-ui-numeric-input__input", className)}
+          value={buffer}
+          onChange={(e) => {
+            const raw = e.target.value;
+            setBuffer(raw);
+            // 입력 중간 상태("", "-", ".", "-.") 는 commit 안 함 — 사용자 타이핑 흐름 유지.
+            if (raw === "" || raw === "-" || raw === "." || raw === "-.") return;
+            const n = Number(raw);
+            if (Number.isFinite(n)) commit(n);
+          }}
+          onFocus={(e) => {
+            focusedRef.current = true;
+            const t = e.currentTarget;
+            // setTimeout 0 로 미뤄야 mouseup 의 커서 재배치 이후에 select 가 적용됨.
+            setTimeout(() => t.select(), 0);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            focusedRef.current = false;
+            const n = Number(buffer);
+            if (buffer !== "" && Number.isFinite(n)) {
+              const c = commit(n);
+              setBuffer(String(c));
+            } else {
+              // 비어있거나 NaN — 마지막 유효 값으로 복원
+              setBuffer(String(current));
+            }
+            onBlur?.(e);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              const next = commit(current + step);
+              setBuffer(String(next));
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              const next = commit(current - step);
+              setBuffer(String(next));
+            } else if (e.key === "Enter") {
+              e.currentTarget.blur();
+            }
+            onKeyDown?.(e);
+          }}
+          {...props}
+        />
+        {unit !== undefined && unit !== "" && (
+          <span className="sh-ui-numeric-input__unit" aria-hidden>
+            {unit}
+          </span>
+        )}
+      </span>
+    );
+  },
+);
+NumericInput.displayName = "NumericInput";

package/data/registry/react/components/numeric-input/styles.css

@@ -0,0 +1,56 @@
+/* NumericInput — 컴팩트 monospace 숫자 입력. 슬라이더 동반·토큰 편집기 같은
+   좁은 영역용. 일반 폼 입력은 Input / NumberInput 사용. */
+
+.sh-ui-numeric-input {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+  min-width: 3rem;
+  justify-content: flex-end;
+}
+
+.sh-ui-numeric-input__input {
+  width: 2.5rem;
+  padding: 2px 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  line-height: 1.2;
+  text-align: right;
+  border: 1px solid transparent;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--foreground);
+  appearance: textfield;
+  -moz-appearance: textfield;
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+
+/* WebKit 의 스피너 버튼 숨김 — 컴팩트 영역에 노이즈. 키보드 step 은 유지됨. */
+.sh-ui-numeric-input__input::-webkit-inner-spin-button,
+.sh-ui-numeric-input__input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.sh-ui-numeric-input__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--border);
+}
+
+.sh-ui-numeric-input__input:focus,
+.sh-ui-numeric-input__input:focus-visible {
+  outline: none;
+  border-color: var(--foreground);
+  background: var(--background);
+}
+
+.sh-ui-numeric-input__input:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+
+.sh-ui-numeric-input__unit {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  color: var(--foreground-muted);
+}

package/data/registry/react/registry.json

@@ -49,6 +49,22 @@
       "dependencies": [],
       "registryDependencies": []
     },
+    "numeric-input": {
+      "name": "numeric-input",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/numeric-input/index.tsx",
+          "dest": "{components}/numeric-input/index.tsx"
+        },
+        {
+          "src": "components/numeric-input/styles.css",
+          "dest": "{components}/numeric-input/styles.css"
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": []
+    },
     "file-upload": {
       "name": "file-upload",
       "type": "component",

package/data/summaries/react.json

@@ -3,7 +3,8 @@
   "summaries": {
     "button": "기본 버튼 — variant(primary/secondary/ghost/danger/link) + size(sm/md/lg).",
     "card": "카드 컨테이너 — compound (Card.Header / Card.Body / Card.Footer / Card.Title / Card.Description).",
-    "input": "단일 행 텍스트 입력 — hasError 지원.",
+    "input": "단일 행 텍스트 입력 — hasError 지원. 같은 모듈에 NumberInput / PasswordInput / PhoneInput / BusinessNumberInput 변형 포함.",
+    "numeric-input": "슬라이더 동반·토큰 편집기용 컴팩트 숫자 입력 — onChange 즉시 min/max clamp, focus select-all, 단위(px/ms/%/° 등) suffix. 일반 폼 입력은 NumberInput 권장.",
     "textarea": "여러 행 텍스트 입력 — rows, autoResize.",
     "label": "폼 레이블 — htmlFor로 입력과 연결.",
     "checkbox": "체크박스 — indeterminate 지원 (Base UI).",

package/package.json

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

package/src/api.d.ts

@@ -60,6 +60,13 @@ export interface ThemePreset {
   dark: Record<ThemeTokenKey, string>;
   /** rem 단위 (0~1.5). */
   radius: number;
+  /** v0.39.0+ — 프리셋 별 정체성 차별화 (옵셔널). decode.js SCALAR_CATEGORIES 와 동일 키. */
+  typography?: Record<string, number>;
+  controls?: Record<string, number>;
+  borders?: Record<string, number>;
+  spacing?: Record<string, number>;
+  weights?: Record<string, number>;
+  durations?: Record<string, number>;
 }
 
 export const THEME_PRESETS: Record<ThemePresetName, ThemePreset>;

package/src/create/theme/presets.js

@@ -50,7 +50,7 @@ export const THEME_PRESETS = {
     radius: 0.5,
   },
   slate: {
-    label: '슬레이트 — 차분한 슬레이트 + 인디고',
+    label: '슬레이트 — 차분한 슬레이트 + 인디고 (정보 밀도)',
     light: {
       'background': '#FFFFFF',
       'background-subtle': '#F8FAFC',
@@ -86,9 +86,12 @@ export const THEME_PRESETS = {
       'danger-foreground': '#450A0A',
     },
     radius: 0.375,
+    // 정보 밀도 ↑ — 본문 14px 부터, 컨트롤 36px (대시보드/관리자 인상)
+    typography: { xs: 11, sm: 12, base: 14, lg: 16, xl: 18, '2xl': 21, '3xl': 26, '4xl': 32 },
+    controls: { sm: 28, md: 36, lg: 44 },
   },
   rose: {
-    label: '로즈 — 핑크 강조 + 둥근 모서리',
+    label: '로즈 — 핑크 강조 + 둥근 모서리 (친근·여유)',
     light: {
       ...NEUTRAL_LIGHT,
       'primary': '#E11D48',
@@ -102,6 +105,8 @@ export const THEME_PRESETS = {
       'primary-hover': '#FDA4AF',
     },
     radius: 0.75,
+    // 큰 모서리 + 큼직한 컨트롤 — 소비자 앱 / 캐주얼 인상
+    controls: { sm: 36, md: 44, lg: 52 },
   },
   emerald: {
     label: '에메랄드 — 그린 강조',
@@ -120,7 +125,7 @@ export const THEME_PRESETS = {
     radius: 0.5,
   },
   violet: {
-    label: '바이올렛 — 퍼플 강조 + 살짝 라운드',
+    label: '바이올렛 — 퍼플 강조 + 살짝 라운드 (모던·또렷)',
     light: {
       ...NEUTRAL_LIGHT,
       'primary': '#7C3AED',
@@ -134,14 +139,22 @@ export const THEME_PRESETS = {
       'primary-hover': '#C4B5FD',
     },
     radius: 0.625,
+    // 살짝 큰 컨트롤 + 진한 강조 보더 (creative/디자인 도구 인상)
+    controls: { sm: 34, md: 42, lg: 50 },
+    borders: { width: 1, widthStrong: 3 },
   },
 };
 
 export const THEME_PRESET_NAMES = Object.keys(THEME_PRESETS);
 
-/** 프리셋 객체에서 inject 가 기대하는 ThemeConfig 형태(light/dark/radius)만 추출 */
+/**
+ * 프리셋 객체에서 ThemeConfig 형태로 변환 — 사용자에게 보이는 label 빼고 모두 forward.
+ * v0.39.0 부터 light/dark/radius 외에 옵셔널 카테고리(typography/controls/borders/...)
+ * 도 그대로 전달돼 CLI inject 가 카테고리별 마커 섹션을 교체한다.
+ */
 export const getThemePreset = (name) => {
   const preset = THEME_PRESETS[name];
   if (!preset) return null;
-  return { light: preset.light, dark: preset.dark, radius: preset.radius };
+  const { label: _label, ...themeConfig } = preset;
+  return themeConfig;
 };