sh-ui-cli 0.116.0 → 0.118.0

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

@@ -0,0 +1,69 @@
+.sh-ui-tree {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: var(--foreground);
+  font-size: 0.9375rem;
+}
+.sh-ui-tree[data-size="sm"] {
+  font-size: var(--text-xs);
+}
+
+.sh-ui-tree__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sh-ui-tree__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.sh-ui-tree__item:not([data-disabled]):hover {
+  background: var(--background-muted);
+}
+.sh-ui-tree__item:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: -2px;
+}
+.sh-ui-tree__item--selected {
+  background: var(--background-muted);
+  font-weight: var(--weight-medium);
+}
+.sh-ui-tree__item[data-disabled] {
+  color: var(--foreground-muted);
+  cursor: not-allowed;
+}
+
+.sh-ui-tree__chevron {
+  display: inline-flex;
+  width: var(--space-4);
+  justify-content: center;
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.sh-ui-tree__chevron[data-expanded] {
+  transform: rotate(90deg);
+}
+.sh-ui-tree__chevron--leaf {
+  visibility: hidden;
+}
+
+.sh-ui-tree__icon {
+  display: inline-flex;
+}
+.sh-ui-tree__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-tree__item,
+  .sh-ui-tree__chevron {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,69 @@
+.tree {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: var(--foreground);
+  font-size: 0.9375rem;
+}
+.tree[data-size="sm"] {
+  font-size: var(--text-xs);
+}
+
+.tree__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.tree__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.tree__item:not([data-disabled]):hover {
+  background: var(--background-muted);
+}
+.tree__item:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: -2px;
+}
+.tree__item--selected {
+  background: var(--background-muted);
+  font-weight: var(--weight-medium);
+}
+.tree__item[data-disabled] {
+  color: var(--foreground-muted);
+  cursor: not-allowed;
+}
+
+.tree__chevron {
+  display: inline-flex;
+  width: var(--space-4);
+  justify-content: center;
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.tree__chevron[data-expanded] {
+  transform: rotate(90deg);
+}
+.tree__chevron--leaf {
+  visibility: hidden;
+}
+
+.tree__icon {
+  display: inline-flex;
+}
+.tree__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tree__item,
+  .tree__chevron {
+    transition: none;
+  }
+}

package/data/registry/react/components/tree/tree.test.tsx

@@ -0,0 +1,110 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import * as React from "react";
+import { Tree } from "./index";
+import type { TreeNode } from "./types";
+
+const nodes: TreeNode[] = [
+  { id: "a", label: "Apple", children: [{ id: "a1", label: "Ant" }] },
+  { id: "b", label: "Banana" },
+];
+
+describe("Tree 렌더 + 상태", () => {
+  it("role=tree 와 최상위 treeitem 을 렌더", () => {
+    render(<Tree nodes={nodes} />);
+    expect(screen.getByRole("tree")).toBeTruthy();
+    const items = screen.getAllByRole("treeitem");
+    expect(items.length).toBe(2);
+  });
+
+  it("부모 toggle 클릭으로 비제어 확장 → 자식 노출", () => {
+    render(<Tree nodes={nodes} />);
+    fireEvent.click(screen.getByText("Apple"));
+    expect(screen.getByText("Ant")).toBeTruthy();
+    expect(screen.getByRole("treeitem", { name: /Apple/ }).getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("제어 selectedId 가 aria-selected 로 반영", () => {
+    render(<Tree nodes={nodes} selectedId="b" />);
+    expect(screen.getByRole("treeitem", { name: /Banana/ }).getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("노드 클릭이 onSelect 를 호출", () => {
+    const onSelect = vi.fn();
+    render(<Tree nodes={nodes} onSelect={onSelect} />);
+    fireEvent.click(screen.getByText("Banana"));
+    expect(onSelect).toHaveBeenCalledWith("b");
+  });
+
+  it("aria-level 이 깊이를 반영", () => {
+    render(<Tree nodes={nodes} defaultExpandedIds={["a"]} />);
+    expect(screen.getByRole("treeitem", { name: /Ant/ }).getAttribute("aria-level")).toBe("2");
+  });
+
+  it("aria-setsize / aria-posinset 가 형제 집합을 반영", () => {
+    render(<Tree nodes={nodes} />);
+    const apple = screen.getByRole("treeitem", { name: /Apple/ });
+    const banana = screen.getByRole("treeitem", { name: /Banana/ });
+    expect(apple.getAttribute("aria-setsize")).toBe("2");
+    expect(apple.getAttribute("aria-posinset")).toBe("1");
+    expect(banana.getAttribute("aria-posinset")).toBe("2");
+  });
+
+  it("제어 expandedIds 는 외부 값이 우선 (클릭 무관)", () => {
+    const { rerender } = render(<Tree nodes={nodes} expandedIds={["a"]} />);
+    expect(screen.getByText("Ant")).toBeTruthy();
+    rerender(<Tree nodes={nodes} expandedIds={[]} />);
+    expect(screen.queryByText("Ant")).toBeNull();
+  });
+
+  it("disabled 노드 클릭은 onSelect 를 호출하지 않는다", () => {
+    const onSelect = vi.fn();
+    const dnodes = [
+      { id: "x", label: "Xenon", disabled: true },
+      { id: "y", label: "Yttrium" },
+    ];
+    render(<Tree nodes={dnodes} onSelect={onSelect} />);
+    fireEvent.click(screen.getByText("Xenon"));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});
+
+describe("Tree 키보드", () => {
+  function setup() {
+    render(<Tree nodes={nodes} defaultExpandedIds={["a"]} defaultSelectedId="a" />);
+    return screen.getByRole("tree");
+  }
+
+  it("ArrowDown 이 다음 가시 노드로 포커스 이동", () => {
+    setup();
+    const a = screen.getByRole("treeitem", { name: /Apple/ });
+    a.focus();
+    fireEvent.keyDown(a, { key: "ArrowDown" });
+    expect(screen.getByRole("treeitem", { name: /Ant/ }).getAttribute("tabindex")).toBe("0");
+  });
+
+  it("ArrowLeft 가 열린 부모를 축소", () => {
+    setup();
+    const a = screen.getByRole("treeitem", { name: /Apple/ });
+    a.focus();
+    fireEvent.keyDown(a, { key: "ArrowLeft" });
+    expect(a.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("ArrowRight 가 닫힌 부모를 확장", () => {
+    render(<Tree nodes={nodes} />);
+    const a = screen.getByRole("treeitem", { name: /Apple/ });
+    a.focus();
+    fireEvent.keyDown(a, { key: "ArrowRight" });
+    expect(a.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("Enter 가 포커스 노드를 선택", () => {
+    const onSelect = vi.fn();
+    render(<Tree nodes={nodes} onSelect={onSelect} />);
+    const b = screen.getByRole("treeitem", { name: /Banana/ });
+    b.focus();
+    fireEvent.keyDown(b, { key: "Enter" });
+    expect(onSelect).toHaveBeenCalledWith("b");
+  });
+});

package/data/registry/react/components/tree/types.ts

@@ -0,0 +1,36 @@
+import type * as React from "react";
+
+export interface TreeNode {
+  id: string;
+  label: React.ReactNode;
+  children?: TreeNode[];
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type TreeSize = "sm" | "md";
+
+export interface TreeProps {
+  nodes: TreeNode[];
+  expandedIds?: string[];
+  defaultExpandedIds?: string[];
+  onExpandedChange?: (ids: string[]) => void;
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onSelect?: (id: string | null) => void;
+  renderLabel?: (node: TreeNode) => React.ReactNode;
+  size?: TreeSize;
+  className?: string;
+}
+
+export interface VisibleNode {
+  id: string;
+  node: TreeNode;
+  level: number;
+  parentId: string | null;
+  hasChildren: boolean;
+  expanded: boolean;
+  disabled: boolean;
+  setSize: number;
+  posInSet: number;
+}

package/data/registry/react/peer-versions.json

@@ -3,12 +3,20 @@
   "versions": {
     "@base-ui/react": "^1.4.1",
     "@tanstack/react-form": "^1.29.1",
+    "@tiptap/core": "^3.26.0",
+    "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-placeholder": "^3.26.0",
+    "@tiptap/extension-text-style": "^3.26.0",
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/react": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
     "@vanilla-extract/css": "^1.16.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.11.0",
     "react-hook-form": "^7.74.0",
     "shiki": "^4.0.2",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "tiptap-markdown": "^0.9.0"
   }
 }

package/data/registry/react/registry.json

@@ -504,10 +504,12 @@
       "dependencies": [
         "@tiptap/react",
         "@tiptap/pm",
+        "@tiptap/core",
         "@tiptap/starter-kit",
         "@tiptap/extension-placeholder",
         "@tiptap/extension-link",
         "@tiptap/extension-text-style",
+        "tiptap-markdown",
         "lucide-react"
       ],
       "registryDependencies": ["utils"]
@@ -1659,6 +1661,82 @@
       "dependencies": ["@base-ui/react"],
       "registryDependencies": ["utils"]
     },
+    "tree": {
+      "name": "tree",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/tree/index.tsx",
+          "dest": "{components}/tree/index.tsx",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/tree/types.ts",
+          "dest": "{components}/tree/types.ts",
+          "frameworks": ["plain", "tailwind", "css-modules"]
+        },
+        {
+          "src": "components/tree/flatten.ts",
+          "dest": "{components}/tree/flatten.ts",
+          "frameworks": ["plain", "tailwind", "css-modules"]
+        },
+        {
+          "src": "components/tree/styles.css",
+          "dest": "{components}/tree/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/tree/index.tailwind.tsx",
+          "dest": "{components}/tree/index.tsx",
+          "frameworks": ["tailwind"]
+        },
+        {
+          "src": "components/tree/index.module.tsx",
+          "dest": "{components}/tree/index.tsx",
+          "frameworks": ["css-modules"]
+        },
+        {
+          "src": "components/tree/styles.module.css",
+          "dest": "{components}/tree/styles.module.css",
+          "frameworks": ["css-modules"]
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": ["utils"]
+    },
+    "table": {
+      "name": "table",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/table/index.tsx",
+          "dest": "{components}/table/index.tsx",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/table/styles.css",
+          "dest": "{components}/table/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/table/index.tailwind.tsx",
+          "dest": "{components}/table/index.tsx",
+          "frameworks": ["tailwind"]
+        },
+        {
+          "src": "components/table/index.module.tsx",
+          "dest": "{components}/table/index.tsx",
+          "frameworks": ["css-modules"]
+        },
+        {
+          "src": "components/table/styles.module.css",
+          "dest": "{components}/table/styles.module.css",
+          "frameworks": ["css-modules"]
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": ["utils"]
+    },
     "carousel": {
       "name": "carousel",
       "type": "component",

package/data/registry/react/tokens-used.json

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-06-01T06:54:04.570Z",
+  "$generated": "2026-06-19T00:56:42.605Z",
   "components": {
     "button": {
       "plain": [
@@ -1931,6 +1931,81 @@
       ],
       "vanilla-extract": []
     },
+    "tree": {
+      "plain": [
+        "--background-muted",
+        "--border-width-strong",
+        "--duration-fast",
+        "--ease-standard",
+        "--foreground",
+        "--foreground-muted",
+        "--radius",
+        "--ring",
+        "--space-2",
+        "--space-4",
+        "--text-xs",
+        "--weight-medium"
+      ],
+      "tailwind": [
+        "--border-width-strong",
+        "--duration-fast",
+        "--radius",
+        "--space-2",
+        "--space-4",
+        "--text-xs"
+      ],
+      "css-modules": [
+        "--background-muted",
+        "--border-width-strong",
+        "--duration-fast",
+        "--ease-standard",
+        "--foreground",
+        "--foreground-muted",
+        "--radius",
+        "--ring",
+        "--space-2",
+        "--space-4",
+        "--text-xs",
+        "--weight-medium"
+      ],
+      "vanilla-extract": []
+    },
+    "table": {
+      "plain": [
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--duration-fast",
+        "--ease-standard",
+        "--foreground",
+        "--foreground-muted",
+        "--space-3",
+        "--text-sm",
+        "--text-xs",
+        "--weight-medium"
+      ],
+      "tailwind": [
+        "--control-md",
+        "--duration-fast",
+        "--space-3",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "css-modules": [
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--duration-fast",
+        "--ease-standard",
+        "--foreground",
+        "--foreground-muted",
+        "--space-3",
+        "--text-sm",
+        "--text-xs",
+        "--weight-medium"
+      ],
+      "vanilla-extract": []
+    },
     "carousel": {
       "plain": [
         "--background",

package/data/summaries/flutter.json

@@ -37,6 +37,7 @@
     "progress": "ShUiProgress — 선형 진행률, indeterminate.",
     "spinner": "ShUiSpinner — 원형 로딩.",
     "separator": "ShUiSeparator — 구분선 (horizontal/vertical).",
-    "skeleton": "ShUiSkeleton — 로딩 플레이스홀더."
+    "skeleton": "ShUiSkeleton — 로딩 플레이스홀더.",
+    "tree": "ShUiTree — 계층 데이터 트리. 확장/축소 + 단일 선택(제어·비제어). ShUiTreeNode(id/label/children/icon/disabled) 재귀. 키보드(화살표·Home/End·Enter/Space)·Semantics. ShUiTreeSize sm/md."
   }
 }

package/data/summaries/react.json

@@ -42,7 +42,7 @@
     "page-toc": "페이지 자동 목차 — 헤딩 스캔 · slugify · IntersectionObserver active 추적 · smooth scroll. routeKey 로 라우트 변경 자동 재스캔, levels/excludeSelector 커스터마이즈.",
     "code-editor": "CodeMirror 6 기반 코드 에디터 — js/ts/jsx/tsx/json/css/html/markdown, sh-ui 토큰 테마, readOnly·placeholder·minHeight/maxHeight. controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
     "markdown-editor": "마크다운 에디터 — CodeEditor + react-markdown 라이브 프리뷰 합성, GFM 지원, raw HTML 차단으로 XSS 방어. controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
-    "rich-text-editor": "Tiptap 3 기반 WYSIWYG 에디터 — HTML 입출력, 기본 toolbar(헤딩·리스트·인용·코드·링크·강조), readOnly·placeholder. controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
+    "rich-text-editor": "Tiptap 3 기반 WYSIWYG 에디터 — format='html'(기본) 또는 format='markdown'(tiptap-markdown 직렬화) I/O, 기본 toolbar(헤딩·리스트·인용·코드·링크·강조), readOnly·placeholder. submitOnEnter+onSubmit(Enter 전송·Shift+Enter 줄바꿈), extensions(추가 확장 주입)·onCreate(에디터 인스턴스 접근). controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
     "base": "CSS 리셋 — base.css.",
     "breakpoints": "반응형 미디어 쿼리 토큰 — breakpoints.css.",
     "focus-ring": "공용 포커스 링 스타일 — focus-ring.css.",
@@ -57,6 +57,8 @@
     "form-tanstack": "TanStack Form 인스턴스 → sh-ui FormStore 어댑터. `adaptTanstackForm(tanstackInstance, config)` — TanStack Form 이 state owner. @tanstack/react-form 은 peerDependency.",
     "calendar": "내부 캘린더 위젯 (DatePicker 가 사용). single / multiple / range 모드. CalendarMessages 로 a11y 텍스트 override. 일반적으로 직접 사용보다 DatePicker / DateRangePicker 권장.",
     "scroll-area": "커스텀 스크롤 컨테이너 — composite export ScrollArea (Base UI). 내부에서 viewport + scrollbar + thumb + corner 를 자동 구성하며 OS-native 스크롤바를 대체한다. orientation: \"vertical\" | \"horizontal\" | \"both\" (기본 vertical). 외부 height/width 가 정해진 컨테이너 안에서 사용. viewportClassName 으로 viewport 의 패딩/레이아웃 분리 적용. 스크롤바는 hover/scrolling 시 fade in, prefers-reduced-motion 존중.",
+    "tree": "계층 데이터 트리 뷰 — Tree 단일 export + TreeNode 타입(`@/components/ui/tree/types`). nodes(TreeNode[]: id/label/children/icon/disabled) 를 평탄화해 role=tree 로 렌더. 확장: expandedIds/onExpandedChange(controlled) 또는 defaultExpandedIds(uncontrolled). 선택: selectedId/onSelect(controlled) 또는 defaultSelectedId(uncontrolled). 키보드 네비(화살표·Home/End·Enter·typeahead), renderLabel 커스텀 렌더러, size(sm/md). Base UI 비의존 자체 구현.",
+    "table": "데이터 테이블 프리미티브 — Table / TableHeader / TableBody / TableFooter / TableRow / TableHead / TableCell / TableCaption 8종 presentational (네이티브 <table> + sh-ui 토큰, 의존성 0). 정렬·행선택·페이지네이션은 TanStack Table v8 로 조립 — docs 의 data-table 예제 참고. shadcn 모델(headless 엔진 + presentational 레이어).",
     "sheet": "화면 가장자리에서 슬라이드 인 하는 side drawer — separate exports: Sheet / SheetTrigger / SheetClose / SheetContent / SheetTitle / SheetDescription / SheetHeader / SheetFooter / SheetCloseX (Base UI Drawer 래핑, 포커스 트랩). 글로벌 알림함 · 작업 큐 · 보조 패널 같은 사이드바 무관 모달 시트용. 사이드바 인근 detail 패널은 SidebarPanel, 중앙 강제 모달은 Dialog 권장. SheetContent 의 side: \"right\" | \"left\" | \"top\" | \"bottom\" (기본 right) 으로 진입 방향 지정. SheetTrigger·SheetClose 는 자체 button — 다른 엘리먼트 슬롯은 `render` prop. ESC/바깥 클릭/포커스 복귀 자동, prefers-reduced-motion 시 transform 트랜지션 제거."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.116.0",
+  "version": "0.118.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {
@@ -25,13 +25,13 @@
     "components"
   ],
   "dependencies": {
-    "@inquirer/prompts": "^8.4.3",
+    "@inquirer/prompts": "^8.5.2",
     "@modelcontextprotocol/sdk": "^1.0.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "fs-extra": "^11.3.5",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   },
   "publishConfig": {
     "access": "public"