sh-ui-cli 0.46.0 → 0.48.0

package/data/registry/react/components/markdown-editor/styles.module.css

@@ -0,0 +1,160 @@
+.md-editor {
+  display: grid;
+  gap: var(--space-3);
+}
+.md-editor--right {
+  grid-template-columns: 1fr 1fr;
+}
+.md-editor--bottom,
+.md-editor--no-preview {
+  grid-template-columns: 1fr;
+}
+
+@media (max-width: 768px) {
+  .md-editor--right {
+    grid-template-columns: 1fr;
+  }
+}
+
+.md-editor__source {
+  min-width: 0;
+}
+
+.md-editor__preview {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  overflow: hidden;
+}
+
+.md-editor__preview-inner {
+  padding: var(--space-3) var(--space-4);
+  min-height: var(--sh-ui-md-editor-min-height, 7.5rem);
+  max-height: var(--sh-ui-md-editor-max-height, 25rem);
+  overflow-y: auto;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--foreground);
+}
+
+/* 마크다운 본문 타이포그래피 — 토큰 기반, 페이지 기본 스타일과 충돌 없도록 자기 스코프 안에서만 */
+.md-editor__preview-inner > :first-child {
+  margin-top: 0;
+}
+.md-editor__preview-inner > :last-child {
+  margin-bottom: 0;
+}
+.md-editor__preview-inner h1,
+.md-editor__preview-inner h2,
+.md-editor__preview-inner h3,
+.md-editor__preview-inner h4,
+.md-editor__preview-inner h5,
+.md-editor__preview-inner h6 {
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-2);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--foreground);
+}
+.md-editor__preview-inner h1 { font-size: 1.5rem; }
+.md-editor__preview-inner h2 { font-size: 1.25rem; }
+.md-editor__preview-inner h3 { font-size: 1.125rem; }
+.md-editor__preview-inner h4,
+.md-editor__preview-inner h5,
+.md-editor__preview-inner h6 { font-size: 1rem; }
+
+.md-editor__preview-inner p,
+.md-editor__preview-inner ul,
+.md-editor__preview-inner ol,
+.md-editor__preview-inner blockquote,
+.md-editor__preview-inner pre,
+.md-editor__preview-inner table {
+  margin-top: 0;
+  margin-bottom: var(--space-3);
+}
+
+.md-editor__preview-inner ul,
+.md-editor__preview-inner ol {
+  padding-left: var(--space-5);
+}
+.md-editor__preview-inner li {
+  margin-bottom: var(--space-1);
+}
+.md-editor__preview-inner li > input[type="checkbox"] {
+  margin-right: var(--space-2);
+}
+
+.md-editor__preview-inner a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.md-editor__preview-inner a:hover {
+  text-decoration-thickness: 2px;
+}
+
+.md-editor__preview-inner blockquote {
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid var(--border-strong);
+  background: var(--background-subtle);
+  color: var(--foreground-muted);
+  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+}
+.md-editor__preview-inner blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.md-editor__preview-inner code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.125rem 0.375rem;
+  border-radius: calc(var(--radius) - 4px);
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.md-editor__preview-inner pre {
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background-subtle);
+  overflow-x: auto;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+.md-editor__preview-inner pre > code {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.md-editor__preview-inner hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: var(--space-4) 0;
+}
+
+.md-editor__preview-inner table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.md-editor__preview-inner th,
+.md-editor__preview-inner td {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  text-align: left;
+}
+.md-editor__preview-inner thead {
+  background: var(--background-subtle);
+}
+
+.md-editor__preview-inner img {
+  max-width: 100%;
+  height: auto;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.md-editor__preview-inner del {
+  color: var(--foreground-muted);
+}

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+
+/**
+ * 상단 앱 메뉴바(파일/편집/보기 등). 내부에 DropdownMenu를 나란히 배치하여
+ * 좌우 화살표로 메뉴 간 이동이 가능해진다.
+ *
+ *   <Menubar>
+ *     <DropdownMenu>
+ *       <DropdownMenuTrigger>파일</DropdownMenuTrigger>
+ *       <DropdownMenuContent>...</DropdownMenuContent>
+ *     </DropdownMenu>
+ *     <DropdownMenu>...</DropdownMenu>
+ *   </Menubar>
+ */
+export const Menubar = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenubar>>
+>(function Menubar({ className, ...props }, ref) {
+  return (
+    <BaseMenubar
+      ref={ref}
+      className={cn(styles.menubar, className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,45 @@
+.menubar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* Menubar 안의 DropdownMenuTrigger는 메뉴바 항목 스타일로 재지정.
+   dropdown-menu가 함께 설치되어 있어야 한다(registryDependencies).
+   사용자가 render로 자체 엘리먼트를 넘겨 덮어쓸 수 있다. */
+.menubar .dm__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-3);
+  height: var(--control-md);
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground);
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+
+.menubar .dm__trigger:hover,
+.menubar .dm__trigger[data-popup-open] {
+  background: var(--background-muted);
+}
+
+.menubar .dm__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: -1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menubar .dm__trigger {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import styles from "./styles.module.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+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={styles["numeric-input"]}>
+        <input
+          ref={ref}
+          type="text"
+          inputMode="decimal"
+          className={cn(styles["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={styles["numeric-input__unit"]} aria-hidden>
+            {unit}
+          </span>
+        )}
+      </span>
+    );
+  },
+);
+NumericInput.displayName = "NumericInput";

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

@@ -0,0 +1,56 @@
+/* NumericInput — 컴팩트 monospace 숫자 입력. 슬라이더 동반·토큰 편집기 같은
+   좁은 영역용. 일반 폼 입력은 Input / NumberInput 사용. */
+
+.numeric-input {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+  min-width: 3rem;
+  justify-content: flex-end;
+}
+
+.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 은 유지됨. */
+.numeric-input__input::-webkit-inner-spin-button,
+.numeric-input__input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.numeric-input__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--border);
+}
+
+.numeric-input__input:focus,
+.numeric-input__input:focus-visible {
+  outline: none;
+  border-color: var(--foreground);
+  background: var(--background);
+}
+
+.numeric-input__input:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+
+.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/components/page-toc/index.module.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import styles from "./styles.module.css";
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export interface PageTOCProps {
+  /**
+   * 스캔할 컨테이너 selector. 기본 `"main"`.
+   */
+  containerSelector?: string;
+  /**
+   * 외부 신호로 TOC 재스캔. Next.js 사용 시 `usePathname()` 결과를 그대로 전달하면
+   * 라우트 변경 때마다 자동 갱신. 같은 페이지 안에서 헤딩이 동적으로 바뀌면 이 값을 갱신.
+   */
+  routeKey?: string;
+  /**
+   * sticky 헤더 아래로 헤딩이 가려지지 않도록 띄울 거리(rem). `scroll-margin-top` 으로 적용.
+   * @default 5
+   */
+  headerOffsetRem?: number;
+  /**
+   * 라벨 텍스트.
+   * @default "On this page"
+   */
+  label?: React.ReactNode;
+  /**
+   * 수집할 헤딩 레벨.
+   * @default ["h2", "h3"]
+   */
+  levels?: HeadingLevel[];
+  /**
+   * 제외할 헤딩 selector. 컨테이너 안에서 이 selector 의 자손인 헤딩은 무시.
+   * 데모 미리보기·중첩 위젯 등을 TOC 에서 빼고 싶을 때 사용.
+   */
+  excludeSelector?: string;
+  /** 추가 클래스. */
+  className?: string;
+}
+
+const slugify = (text: string): string =>
+  text
+    .trim()
+    .toLowerCase()
+    .replace(/[^\w\s가-힣-]/g, "")
+    .replace(/\s+/g, "-");
+
+interface TocItem {
+  id: string;
+  text: string;
+  level: HeadingLevel;
+}
+
+
+/**
+ * 페이지 내 자동 목차 (On this page).
+ *
+ * 컨테이너 안의 지정한 헤딩 레벨을 스캔해 자동 slugify · id 부여 · `IntersectionObserver` 로
+ * 현재 보이는 섹션을 active 표시 · 클릭 시 smooth scroll. 라우터 비종속 — `routeKey` 를
+ * 외부에서 갱신하면 재스캔된다.
+ */
+export function PageTOC({
+  containerSelector = "main",
+  routeKey,
+  headerOffsetRem = 5,
+  label = "On this page",
+  levels = ["h2", "h3"],
+  excludeSelector,
+  className,
+}: PageTOCProps) {
+  const [items, setItems] = React.useState<TocItem[]>([]);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  // levels 가 inline 배열(["h2", "h3"]) 로 전달되면 매 렌더마다 새 참조라 useEffect 가
+  // 무한 루프에 빠짐. 내용 기반 안정 키로 비교하고, 효과 안에서는 ref 로 최신 값 사용.
+  const levelsKey = levels.join(",");
+  const levelsRef = React.useRef(levels);
+  levelsRef.current = levels;
+
+  React.useEffect(() => {
+    const container = document.querySelector(containerSelector);
+    if (!container) {
+      setItems([]);
+      return;
+    }
+
+    const headingSelector = levelsRef.current.join(", ");
+    let headings = Array.from(
+      container.querySelectorAll<HTMLHeadingElement>(headingSelector),
+    );
+    if (excludeSelector) {
+      headings = headings.filter((h) => !h.closest(excludeSelector));
+    }
+
+    const usedIds = new Set<string>();
+    const collected: TocItem[] = headings.map((h) => {
+      const text = h.textContent?.trim() ?? "";
+      let id = h.id || slugify(text);
+      let suffix = 2;
+      const base = id;
+      while (!id || usedIds.has(id)) {
+        id = `${base}-${suffix++}`;
+      }
+      usedIds.add(id);
+      if (!h.id) h.id = id;
+      h.style.scrollMarginTop = `${headerOffsetRem}rem`;
+      const level = h.tagName.toLowerCase() as HeadingLevel;
+      return { id, text, level };
+    });
+
+    setItems(collected);
+
+    if (collected.length === 0) return;
+
+    const remInPx =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const topOffsetPx = Math.round(headerOffsetRem * remInPx);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible.length > 0) {
+          setActiveId(visible[0].target.id);
+        }
+      },
+      {
+        rootMargin: `-${topOffsetPx}px 0px -70% 0px`,
+        threshold: 0,
+      },
+    );
+
+    headings.forEach((h) => observer.observe(h));
+    return () => observer.disconnect();
+  }, [containerSelector, headerOffsetRem, levelsKey, excludeSelector, routeKey]);
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    event.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    history.replaceState(null, "", `#${id}`);
+    setActiveId(id);
+  };
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      className={cn(styles["page-toc"], className)}
+      aria-label={typeof label === "string" ? label : "목차"}
+    >
+      <div className={styles["page-toc__label"]}>{label}</div>
+      <ul className={styles["page-toc__list"]}>
+        {items.map((item) => (
+          <li key={item.id} data-level={item.level.replace("h", "")}>
+            <a
+              href={`#${item.id}`}
+              onClick={(e) => handleClick(e, item.id)}
+              className={styles["page-toc__link"]}
+              data-active={activeId === item.id ? "true" : undefined}
+              aria-current={activeId === item.id ? "true" : undefined}
+            >
+              {item.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/data/registry/react/components/page-toc/styles.module.css

@@ -0,0 +1,82 @@
+/* 페이지 내 목차 (On this page).
+   기본은 우측 고정 레일 — 좁은 뷰포트(<80rem)에서는 자동 숨김. 다른 배치(예: 본문 상단 inline)
+   가 필요하면 className override 또는 자체 wrapper 로 위치 재정의. */
+.page-toc {
+  position: fixed;
+  top: 5rem;
+  right: 1.5rem;
+  width: 14rem;
+  max-height: calc(100vh - 7rem);
+  overflow-y: auto;
+  padding: 0.75rem 0.5rem 0.75rem 1rem;
+  border-left: 1px solid var(--border);
+  font-size: 0.8125rem;
+  z-index: 5;
+}
+
+.page-toc__label {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--foreground-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.5rem;
+}
+
+.page-toc__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.page-toc__list > li[data-level="3"] .page-toc__link,
+.page-toc__list > li[data-level="4"] .page-toc__link {
+  padding-left: 1.25rem;
+  font-size: 0.8125em;
+  color: var(--foreground-subtle, var(--foreground-muted));
+}
+.page-toc__list > li[data-level="5"] .page-toc__link,
+.page-toc__list > li[data-level="6"] .page-toc__link {
+  padding-left: 2rem;
+  font-size: 0.75em;
+  color: var(--foreground-subtle, var(--foreground-muted));
+}
+
+.page-toc__link {
+  display: block;
+  padding: 0.25rem 0.5rem;
+  border-radius: calc(var(--radius) - 4px);
+  color: var(--foreground-muted);
+  text-decoration: none;
+  line-height: 1.4;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+}
+.page-toc__link:hover {
+  color: var(--foreground);
+  background: var(--background-subtle);
+}
+.page-toc__link:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.page-toc__link[data-active="true"] {
+  color: var(--foreground);
+  font-weight: 600;
+  background: var(--background-subtle);
+}
+
+/* 좁은 뷰포트에선 우측 레일 숨김 — 본문 너비를 침범하지 않도록 */
+@media (max-width: 80rem) {
+  .page-toc {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-toc__link {
+    transition: none;
+  }
+}