sh-ui-cli 0.118.0 → 0.120.0

package/data/changelog/versions.json

@@ -2,6 +2,30 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.120.0",
+      "date": "2026-06-22",
+      "title": "Flutter ShUiTable — 정렬 데이터 테이블 위젯",
+      "type": "minor",
+      "highlights": [
+        "신규 Flutter ShUiTable<T> — ShUiTableColumn(id/header/cell/sortKey/align) 정의 + 행 데이터로 렌더하는 데이터 테이블",
+        "헤더 탭 정렬(▲/▼, asc/desc) 내장, 밀도 sm/md, zebra, caption, Semantics. sortKey 있는 컬럼만 정렬 가능",
+        "sh-ui 토큰 테마. 설치: sh-ui add table (flutter)"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.120.0"
+    },
+    {
+      "version": "0.119.0",
+      "date": "2026-06-19",
+      "title": "Command 컴포넌트 — Cmd+K 명령 팔레트",
+      "type": "minor",
+      "highlights": [
+        "신규 Command — cmdk 위 sh-ui 명령 팔레트(9 컴포넌트). CommandDialog 로 Cmd+K 팝업(sh-ui Dialog 기반)",
+        "검색 필터·키보드 네비·접근성은 cmdk 에 위임, sh-ui 토큰 스타일. CommandItem value/keywords/onSelect 로 액션 실행",
+        "shadcn command 모델. docs dogfooding·액션 자동화는 후속 phase. Flutter 별도"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.119.0"
+    },
     {
       "version": "0.118.0",
       "date": "2026-06-18",

package/data/registry/flutter/registry.json

@@ -340,6 +340,15 @@
       ],
       "dependencies": [],
       "registryDependencies": ["tokens"]
+    },
+    "table": {
+      "name": "table",
+      "type": "widget",
+      "files": [
+        { "src": "widgets/sh_ui_table.dart", "dest": "{widgets}/sh_ui_table.dart" }
+      ],
+      "dependencies": [],
+      "registryDependencies": ["tokens"]
     }
   }
 }

package/data/registry/flutter/widgets/sh_ui_table.dart

@@ -0,0 +1,278 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// 테이블 밀도. [sm]은 행 높이·폰트가 더 컴팩트한 변형.
+enum ShUiTableSize { sm, md }
+
+/// 정렬 방향.
+enum ShUiSortDirection { ascending, descending }
+
+/// 테이블 컬럼 정의.
+class ShUiTableColumn<T> {
+  /// 정렬 상태 추적 키.
+  final String id;
+
+  /// 헤더에 표시될 라벨.
+  final String header;
+
+  /// 행에서 셀 표시 텍스트를 뽑는 접근자.
+  final String Function(T row) cell;
+
+  /// 정렬 키 접근자. 제공되면 이 컬럼은 헤더 탭으로 정렬 가능해진다.
+  final Comparable<Object?> Function(T row)? sortKey;
+
+  /// 셀/헤더 텍스트 정렬. 기본 [TextAlign.start].
+  final TextAlign align;
+
+  const ShUiTableColumn({
+    required this.id,
+    required this.header,
+    required this.cell,
+    this.sortKey,
+    this.align = TextAlign.start,
+  });
+
+  bool get sortable => sortKey != null;
+}
+
+/// shUi Table — 컬럼 정의 + 행 데이터로 렌더하는 themed 데이터 테이블.
+///
+/// 정렬 가능 컬럼(헤더 탭 → ▲/▼, 단일 컬럼 asc/desc 토글)을 내장한다.
+/// sh-ui 토큰으로 테마링하며 Semantics(스크린 리더)를 제공한다.
+class ShUiTable<T> extends StatefulWidget {
+  final List<ShUiTableColumn<T>> columns;
+  final List<T> rows;
+  final ShUiTableSize size;
+  final bool zebra;
+  final String? caption;
+  final String? initialSortColumnId;
+  final ShUiSortDirection initialSortDirection;
+
+  const ShUiTable({
+    super.key,
+    required this.columns,
+    required this.rows,
+    this.size = ShUiTableSize.md,
+    this.zebra = false,
+    this.caption,
+    this.initialSortColumnId,
+    this.initialSortDirection = ShUiSortDirection.ascending,
+  });
+
+  @override
+  State<ShUiTable<T>> createState() => _ShUiTableState<T>();
+}
+
+class _ShUiTableState<T> extends State<ShUiTable<T>> {
+  String? _sortId;
+  late ShUiSortDirection _sortDir;
+
+  @override
+  void initState() {
+    super.initState();
+    _sortId = widget.initialSortColumnId;
+    _sortDir = widget.initialSortDirection;
+  }
+
+  void _onHeaderTap(ShUiTableColumn<T> col) {
+    if (!col.sortable) return;
+    setState(() {
+      if (_sortId == col.id) {
+        _sortDir = _sortDir == ShUiSortDirection.ascending
+            ? ShUiSortDirection.descending
+            : ShUiSortDirection.ascending;
+      } else {
+        _sortId = col.id;
+        _sortDir = ShUiSortDirection.ascending;
+      }
+    });
+  }
+
+  List<T> _sortedRows() {
+    final id = _sortId;
+    if (id == null) return widget.rows;
+    ShUiTableColumn<T>? col;
+    for (final c in widget.columns) {
+      if (c.id == id) {
+        col = c;
+        break;
+      }
+    }
+    final key = col?.sortKey;
+    if (key == null) return widget.rows;
+    final copy = List<T>.from(widget.rows);
+    copy.sort((a, b) {
+      final cmp = key(a).compareTo(key(b));
+      return _sortDir == ShUiSortDirection.ascending ? cmp : -cmp;
+    });
+    return copy;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final sm = widget.size == ShUiTableSize.sm;
+    final fontSize = sm ? shUi.text.xs : shUi.text.sm;
+    final vPad = sm ? shUi.spacing.s2 : shUi.spacing.s3;
+    final hPad = shUi.spacing.s3;
+    final rows = _sortedRows();
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        DecoratedBox(
+          decoration: BoxDecoration(
+            border: Border.all(color: colors.border, width: shUi.borderWidth.normal),
+            borderRadius: BorderRadius.circular(shUi.radius.defaultRadius),
+          ),
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(shUi.radius.defaultRadius),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _buildHeader(shUi, colors, fontSize, vPad, hPad),
+                for (var i = 0; i < rows.length; i++)
+                  _buildBodyRow(
+                    shUi,
+                    colors,
+                    fontSize,
+                    vPad,
+                    hPad,
+                    rows[i],
+                    i,
+                    isLast: i == rows.length - 1,
+                  ),
+              ],
+            ),
+          ),
+        ),
+        if (widget.caption != null) ...[
+          SizedBox(height: shUi.spacing.s2),
+          Text(
+            widget.caption!,
+            style: TextStyle(color: colors.foregroundMuted, fontSize: shUi.text.xs),
+          ),
+        ],
+      ],
+    );
+  }
+
+  Widget _buildHeader(
+    ShUiTheme shUi,
+    ShUiColorTokens colors,
+    double fontSize,
+    double vPad,
+    double hPad,
+  ) {
+    return Container(
+      color: colors.backgroundMuted,
+      child: Row(
+        children: [
+          for (final col in widget.columns)
+            Expanded(child: _headerCell(shUi, colors, fontSize, vPad, hPad, col)),
+        ],
+      ),
+    );
+  }
+
+  Widget _headerCell(
+    ShUiTheme shUi,
+    ShUiColorTokens colors,
+    double fontSize,
+    double vPad,
+    double hPad,
+    ShUiTableColumn<T> col,
+  ) {
+    final isSorted = _sortId == col.id;
+    final arrow = !isSorted
+        ? null
+        : (_sortDir == ShUiSortDirection.ascending ? '▲' : '▼');
+    final label = Row(
+      mainAxisAlignment: col.align == TextAlign.end
+          ? MainAxisAlignment.end
+          : MainAxisAlignment.start,
+      children: [
+        Flexible(
+          child: Text(
+            col.header,
+            textAlign: col.align,
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              color: colors.foregroundMuted,
+              fontSize: fontSize,
+              fontWeight: shUi.weight.medium,
+            ),
+          ),
+        ),
+        if (arrow != null) ...[
+          const SizedBox(width: 4),
+          Text(
+            arrow,
+            style: TextStyle(color: colors.foregroundMuted, fontSize: fontSize),
+          ),
+        ],
+      ],
+    );
+    final padded = Padding(
+      padding: EdgeInsets.symmetric(vertical: vPad, horizontal: hPad),
+      child: label,
+    );
+    if (!col.sortable) {
+      return Semantics(header: true, child: padded);
+    }
+    return Semantics(
+      header: true,
+      button: true,
+      label: '${col.header}, 정렬'
+          '${isSorted ? (_sortDir == ShUiSortDirection.ascending ? ', 오름차순' : ', 내림차순') : ''}',
+      child: InkWell(onTap: () => _onHeaderTap(col), child: padded),
+    );
+  }
+
+  Widget _buildBodyRow(
+    ShUiTheme shUi,
+    ShUiColorTokens colors,
+    double fontSize,
+    double vPad,
+    double hPad,
+    T row,
+    int index, {
+    required bool isLast,
+  }) {
+    final bg = widget.zebra && index.isOdd
+        ? colors.backgroundSubtle
+        : colors.background;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: bg,
+        border: isLast
+            ? null
+            : Border(
+                bottom: BorderSide(color: colors.border, width: shUi.borderWidth.normal),
+              ),
+      ),
+      child: Row(
+        children: [
+          for (final col in widget.columns)
+            Expanded(
+              child: Padding(
+                padding: EdgeInsets.symmetric(vertical: vPad, horizontal: hPad),
+                child: Text(
+                  col.cell(row),
+                  textAlign: col.align,
+                  overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
+                    color: colors.foreground,
+                    fontSize: fontSize,
+                    fontWeight: shUi.weight.regular,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import * as React from "react";
+import {
+  Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut,
+} from "./index";
+
+function Sample({ onSelect }: { onSelect?: (v: string) => void }) {
+  return (
+    <Command>
+      <CommandInput placeholder="검색" />
+      <CommandList>
+        <CommandEmpty>결과 없음</CommandEmpty>
+        <CommandGroup heading="페이지">
+          <CommandItem value="components" keywords={["컴포넌트"]} onSelect={() => onSelect?.("components")}>
+            컴포넌트 <CommandShortcut>⌘C</CommandShortcut>
+          </CommandItem>
+          <CommandItem value="tokens" keywords={["토큰"]} onSelect={() => onSelect?.("tokens")}>토큰</CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="액션">
+          <CommandItem value="theme" keywords={["테마 전환"]} onSelect={() => onSelect?.("theme")}>테마 전환</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+describe("Command", () => {
+  it("그룹/아이템을 렌더", () => {
+    render(<Sample />);
+    expect(screen.getByText("컴포넌트")).toBeTruthy();
+    expect(screen.getByText("페이지")).toBeTruthy();
+    expect(screen.getByRole("option", { name: /토큰/ })).toBeTruthy();
+  });
+
+  it("입력으로 아이템을 필터", () => {
+    render(<Sample />);
+    fireEvent.change(screen.getByPlaceholderText("검색"), { target: { value: "테마" } });
+    expect(screen.getByText("테마 전환")).toBeTruthy();
+    expect(screen.queryByText("토큰")).toBeNull();
+  });
+
+  it("매칭 없으면 CommandEmpty 표시", () => {
+    render(<Sample />);
+    fireEvent.change(screen.getByPlaceholderText("검색"), { target: { value: "zzzzz" } });
+    expect(screen.getByText("결과 없음")).toBeTruthy();
+  });
+
+  it("아이템 클릭이 onSelect 호출", () => {
+    const onSelect = vi.fn();
+    render(<Sample onSelect={onSelect} />);
+    fireEvent.click(screen.getByText("토큰"));
+    expect(onSelect).toHaveBeenCalledWith("tokens");
+  });
+});

package/data/registry/react/components/command/index.module.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import styles from "./styles.module.css";
+import { cn } from "@SH_UI_UTILS@";
+import { Dialog, DialogContent, DialogTitle } from "../dialog";
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive ref={ref} className={cn(styles.command, className)} {...props} />
+));
+Command.displayName = "Command";
+
+export interface CommandDialogProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function CommandDialog({ open, onOpenChange, title = "명령 팔레트", children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={styles["command__dialog"]}>
+        <DialogTitle className={styles["command__sr-only"]}>{title}</DialogTitle>
+        <Command {...props}>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className={styles["command__input-wrapper"]}>
+    <CommandPrimitive.Input ref={ref} className={cn(styles.command__input, className)} {...props} />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List ref={ref} className={cn(styles.command__list, className)} {...props} />
+));
+CommandList.displayName = "CommandList";
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty ref={ref} className={cn(styles.command__empty, className)} {...props} />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group ref={ref} className={cn(styles.command__group, className)} {...props} />
+));
+CommandGroup.displayName = "CommandGroup";
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn(styles.command__separator, className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item ref={ref} className={cn(styles.command__item, className)} {...props} />
+));
+CommandItem.displayName = "CommandItem";
+
+export function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn(styles.command__shortcut, className)} {...props} />;
+}
+CommandShortcut.displayName = "CommandShortcut";

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

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "@SH_UI_UTILS@";
+import { Dialog, DialogContent, DialogTitle } from "../dialog";
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex flex-col w-full bg-[var(--popover,var(--background))] text-foreground rounded-[var(--radius)] overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = "Command";
+
+export interface CommandDialogProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function CommandDialog({ open, onOpenChange, title = "명령 팔레트", children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 max-w-2xl">
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <Command {...props}>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="border-b border-border px-[var(--space-3)]">
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "w-full h-[var(--control-md)] bg-transparent border-none outline-none text-foreground text-[length:var(--text-sm)] placeholder:text-foreground-muted",
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto p-[var(--space-1)]", className)}
+    {...props}
+  />
+));
+CommandList.displayName = "CommandList";
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn("p-[var(--space-4)] text-center text-foreground-muted text-[length:var(--text-sm)]", className)}
+    {...props}
+  />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "[&_[cmdk-group-heading]]:px-[var(--space-2)] [&_[cmdk-group-heading]]:py-[var(--space-1)] [&_[cmdk-group-heading]]:text-[length:var(--text-xs)] [&_[cmdk-group-heading]]:text-foreground-muted",
+      className
+    )}
+    {...props}
+  />
+));
+CommandGroup.displayName = "CommandGroup";
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("h-px bg-border my-[var(--space-1)]", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "flex items-center gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-2)] rounded-[calc(var(--radius)-2px)] text-[length:var(--text-sm)] cursor-pointer select-none data-[selected=true]:bg-background-muted aria-selected:bg-background-muted data-[disabled=true]:text-foreground-muted",
+      className
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = "CommandItem";
+
+export function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn("ms-auto text-[length:var(--text-xs)] text-foreground-muted tracking-wider", className)}
+      {...props}
+    />
+  );
+}
+CommandShortcut.displayName = "CommandShortcut";

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import "./styles.css";
+import { cn } from "@SH_UI_UTILS@";
+import { Dialog, DialogContent, DialogTitle } from "../dialog";
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive ref={ref} className={cn("sh-ui-command", className)} {...props} />
+));
+Command.displayName = "Command";
+
+export interface CommandDialogProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function CommandDialog({ open, onOpenChange, title = "명령 팔레트", children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sh-ui-command__dialog">
+        <DialogTitle className="sh-ui-command__sr-only">{title}</DialogTitle>
+        <Command {...props}>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="sh-ui-command__input-wrapper">
+    <CommandPrimitive.Input ref={ref} className={cn("sh-ui-command__input", className)} {...props} />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List ref={ref} className={cn("sh-ui-command__list", className)} {...props} />
+));
+CommandList.displayName = "CommandList";
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty ref={ref} className={cn("sh-ui-command__empty", className)} {...props} />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group ref={ref} className={cn("sh-ui-command__group", className)} {...props} />
+));
+CommandGroup.displayName = "CommandGroup";
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("sh-ui-command__separator", className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item ref={ref} className={cn("sh-ui-command__item", className)} {...props} />
+));
+CommandItem.displayName = "CommandItem";
+
+export function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("sh-ui-command__shortcut", className)} {...props} />;
+}
+CommandShortcut.displayName = "CommandShortcut";

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

@@ -0,0 +1,33 @@
+.sh-ui-command {
+  display: flex; flex-direction: column; width: 100%;
+  background: var(--popover, var(--background)); color: var(--foreground);
+  border-radius: var(--radius); overflow: hidden;
+}
+.sh-ui-command__dialog { padding: 0; max-width: 40rem; }
+.sh-ui-command__sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.sh-ui-command__input-wrapper { border-bottom: 1px solid var(--border); padding: 0 var(--space-3); }
+.sh-ui-command__input {
+  width: 100%; height: var(--control-md); background: transparent; border: none; outline: none;
+  color: var(--foreground); font-size: var(--text-sm);
+}
+.sh-ui-command__input::placeholder { color: var(--foreground-muted); }
+.sh-ui-command__list { max-height: 20rem; overflow-y: auto; padding: var(--space-1); }
+.sh-ui-command__empty { padding: var(--space-4); text-align: center; color: var(--foreground-muted); font-size: var(--text-sm); }
+.sh-ui-command__group [cmdk-group-heading] {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs); color: var(--foreground-muted);
+}
+.sh-ui-command__item {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-2); border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-sm); cursor: pointer; user-select: none;
+}
+.sh-ui-command__item[data-selected="true"],
+.sh-ui-command__item[aria-selected="true"] { background: var(--background-muted); }
+.sh-ui-command__item[data-disabled="true"],
+.sh-ui-command__item[aria-disabled="true"] { color: var(--foreground-muted); cursor: not-allowed; }
+.sh-ui-command__separator { height: 1px; background: var(--border); margin: var(--space-1) 0; }
+.sh-ui-command__shortcut { margin-inline-start: auto; font-size: var(--text-xs); color: var(--foreground-muted); letter-spacing: 0.05em; }

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

@@ -0,0 +1,33 @@
+.command {
+  display: flex; flex-direction: column; width: 100%;
+  background: var(--popover, var(--background)); color: var(--foreground);
+  border-radius: var(--radius); overflow: hidden;
+}
+.command__dialog { padding: 0; max-width: 40rem; }
+.command__sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.command__input-wrapper { border-bottom: 1px solid var(--border); padding: 0 var(--space-3); }
+.command__input {
+  width: 100%; height: var(--control-md); background: transparent; border: none; outline: none;
+  color: var(--foreground); font-size: var(--text-sm);
+}
+.command__input::placeholder { color: var(--foreground-muted); }
+.command__list { max-height: 20rem; overflow-y: auto; padding: var(--space-1); }
+.command__empty { padding: var(--space-4); text-align: center; color: var(--foreground-muted); font-size: var(--text-sm); }
+.command__group [cmdk-group-heading] {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs); color: var(--foreground-muted);
+}
+.command__item {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-2); border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-sm); cursor: pointer; user-select: none;
+}
+.command__item[data-selected="true"],
+.command__item[aria-selected="true"] { background: var(--background-muted); }
+.command__item[data-disabled="true"],
+.command__item[aria-disabled="true"] { color: var(--foreground-muted); cursor: not-allowed; }
+.command__separator { height: 1px; background: var(--border); margin: var(--space-1) 0; }
+.command__shortcut { margin-inline-start: auto; font-size: var(--text-xs); color: var(--foreground-muted); letter-spacing: 0.05em; }

package/data/registry/react/registry.json

@@ -874,6 +874,39 @@
       "dependencies": ["@base-ui/react"],
       "registryDependencies": ["utils"]
     },
+    "command": {
+      "name": "command",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/command/index.tsx",
+          "dest": "{components}/command/index.tsx",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/command/styles.css",
+          "dest": "{components}/command/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/command/index.tailwind.tsx",
+          "dest": "{components}/command/index.tsx",
+          "frameworks": ["tailwind"]
+        },
+        {
+          "src": "components/command/index.module.tsx",
+          "dest": "{components}/command/index.tsx",
+          "frameworks": ["css-modules"]
+        },
+        {
+          "src": "components/command/styles.module.css",
+          "dest": "{components}/command/styles.module.css",
+          "frameworks": ["css-modules"]
+        }
+      ],
+      "dependencies": ["cmdk"],
+      "registryDependencies": ["utils", "dialog"]
+    },
     "popover": {
       "name": "popover",
       "type": "component",

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

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-06-19T00:56:42.605Z",
+  "$generated": "2026-06-19T05:19:57.653Z",
   "components": {
     "button": {
       "plain": [
@@ -1081,6 +1081,50 @@
       ],
       "vanilla-extract": []
     },
+    "command": {
+      "plain": [
+        "--background",
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--foreground",
+        "--foreground-muted",
+        "--radius",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "tailwind": [
+        "--background",
+        "--control-md",
+        "--radius",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "css-modules": [
+        "--background",
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--foreground",
+        "--foreground-muted",
+        "--radius",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "vanilla-extract": []
+    },
     "popover": {
       "plain": [
         "--background",

package/data/summaries/flutter.json

@@ -38,6 +38,7 @@
     "spinner": "ShUiSpinner — 원형 로딩.",
     "separator": "ShUiSeparator — 구분선 (horizontal/vertical).",
     "skeleton": "ShUiSkeleton — 로딩 플레이스홀더.",
-    "tree": "ShUiTree — 계층 데이터 트리. 확장/축소 + 단일 선택(제어·비제어). ShUiTreeNode(id/label/children/icon/disabled) 재귀. 키보드(화살표·Home/End·Enter/Space)·Semantics. ShUiTreeSize sm/md."
+    "tree": "ShUiTree — 계층 데이터 트리. 확장/축소 + 단일 선택(제어·비제어). ShUiTreeNode(id/label/children/icon/disabled) 재귀. 키보드(화살표·Home/End·Enter/Space)·Semantics. ShUiTreeSize sm/md.",
+    "table": "ShUiTable<T> — 정렬 내장 데이터 테이블. ShUiTableColumn(id/header/cell/sortKey/align) 정의 + rows. 헤더 탭 정렬(▲/▼, asc/desc), 밀도 sm/md, zebra, caption, Semantics. sortKey 있는 컬럼만 정렬 가능."
   }
 }

package/data/summaries/react.json

@@ -1,6 +1,7 @@
 {
   "$description": "React 컴포넌트 summary — llms.txt 생성용. key는 registry.json의 name과 동일.",
   "summaries": {
+    "command": "Cmd+K 명령 팔레트 — cmdk 위 sh-ui. Command/CommandDialog/CommandInput/CommandList/CommandEmpty/CommandGroup/CommandItem/CommandSeparator/CommandShortcut. CommandDialog=sh-ui Dialog+Command(open/onOpenChange), 검색 필터·키보드 네비는 cmdk. CommandItem value/keywords/onSelect — 한국어 라벨엔 keywords 필요.",
     "button": "기본 버튼 — variant(primary/secondary/ghost/danger/link) + size(sm/md/lg).",
     "card": "카드 컨테이너 — separate exports: Card / CardHeader / CardTitle / CardDescription / CardAction / CardContent / CardFooter. dot syntax(`Card.Header`) 아님.",
     "input": "단일 행 텍스트 입력 — hasError 지원. 같은 모듈에 NumberInput / PhoneInput / BusinessNumberInput 변형 포함. 비밀번호 토글은 InputGroup + InputAdornment 레시피로 조립.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.118.0",
+  "version": "0.120.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "fs-extra": "^11.3.5",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9"
   },
   "publishConfig": {
     "access": "public"