@pantoia/ui 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,17 +1,45 @@
 #!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { argv, cwd, exit, stdin, stdout } from 'node:process';
+import { argv, cwd, exit, platform, stdin, stdout } from 'node:process';
 import { createInterface } from 'node:readline/promises';
 const HERE = join(import.meta.dirname, '..');
 const CONFIG = 'components.json';
-const DEFAULT_PATH = 'components/ui';
-const USAGE = `pantoia-ui <명령>
+const STYLES = '@import "@pantoia/ui/tailwind.css";';
+const TAILWIND = /^@import\s+["']tailwindcss["'][^;]*;\s*$/;
+const IMPORTED = /@import\s+["']@pantoia\/ui\//;
+const FONTS = ['pretendard@^1.3.9', '@fontsource/jetbrains-mono@^5.3.0'];
+const FONT_IMPORT = '@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";';
+const MONO = '"JetBrains Mono"';
+const MONO_FACE = [
+    '@font-face {',
+    `  font-family: ${MONO};`,
+    '  src: url("@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");',
+    '  font-weight: 400;',
+    '  font-display: swap;',
+    '  unicode-range: U+0000-00FF, U+2000-206F;',
+    '}',
+];
+const MANAGERS = [
+    { lock: 'pnpm-lock.yaml', command: 'pnpm', verb: 'add' },
+    { lock: 'yarn.lock', command: 'yarn', verb: 'add' },
+    { lock: 'bun.lock', command: 'bun', verb: 'add' },
+    { lock: 'bun.lockb', command: 'bun', verb: 'add' },
+    { lock: 'package-lock.json', command: 'npm', verb: 'install' },
+];
+const LAYOUTS = [
+    { css: 'app/globals.css', path: 'components/ui' },
+    { css: 'src/app/globals.css', path: 'src/components/ui' },
+    { css: 'app/app.css', path: 'app/components/ui' },
+    { css: 'src/index.css', path: 'src/components/ui' },
+];
+const USAGE = `npx @pantoia/ui <명령어>
 
-  init [--path <디렉터리>]   ${CONFIG} 을 만든다
-  add <이름...> [--force]    소스를 복사한다
-  list                       받을 수 있는 것을 늘어놓는다
-  diff [이름]                복사본과 패키지의 지금 것을 견준다`;
+  init [--path <경로>] [--css <경로>]   컴포넌트를 저장할 위치와 전역 CSS 파일을 정해요
+  add <이름...> [--force]              컴포넌트를 추가해요
+  list                                 추가할 수 있는 컴포넌트를 확인해요
+  diff [이름]                          추가한 파일과 최신 파일을 비교해요`;
 function fail(message) {
     console.error(message);
     exit(1);
@@ -27,7 +55,7 @@ function registry() {
 function find(name) {
     const item = registry().find(candidate => candidate.name === name);
     if (!item)
-        fail(`${name} 은 목록에 없다. pantoia-ui list 로 이름을 본다`);
+        fail(`목록에 없는 컴포넌트예요: ${name}\nnpx @pantoia/ui list로 이름을 확인하세요.`);
     return item;
 }
 function configPath() {
@@ -59,67 +87,194 @@ function resolve(names) {
     }
     return [...seen.values()];
 }
-async function confirm(question) {
+async function ask(question, fallback) {
     if (!stdin.isTTY)
-        return false;
+        return fallback;
+    const rl = createInterface({ input: stdin, output: stdout });
+    const answer = await rl.question(`${question} (${fallback}) `);
+    rl.close();
+    return answer.trim() || fallback;
+}
+async function confirm(question, fallback = false) {
+    if (!stdin.isTTY)
+        return fallback;
     const rl = createInterface({ input: stdin, output: stdout });
-    const answer = await rl.question(`${question} (y/N) `);
+    const answer = (await rl.question(`${question} ${fallback ? '(Y/n)' : '(y/N)'} `)).trim().toLowerCase();
     rl.close();
-    return answer.trim().toLowerCase() === 'y';
+    return answer === '' ? fallback : answer === 'y';
 }
-async function copy(item, root, force) {
+async function copy(item, base, force) {
+    let skipped = false;
     for (const file of item.files ?? []) {
         const source = readFileSync(join(HERE, file.path), 'utf8');
-        const target = join(root, file.target ?? file.path);
+        const shown = join(base, file.target ?? file.path);
+        const target = join(cwd(), shown);
         if (existsSync(target) && readFileSync(target, 'utf8') !== source) {
-            if (!force && !await confirm(`${file.path} 이 이미 있고 내용이 다르다. 덮어쓰나?`)) {
-                console.log(`  건너뛴다  ${file.path} — 덮어쓰려면 --force`);
+            if (!force && !await confirm(`${shown} 파일이 이미 있고 내용이 달라요. 덮어쓸까요?`)) {
+                console.log(`  ${shown}  (건너뜀)`);
+                skipped = true;
                 continue;
             }
         }
         mkdirSync(dirname(target), { recursive: true });
         writeFileSync(target, source);
-        console.log(`  썼다      ${file.path}`);
+        console.log(`  ${shown}`);
+    }
+    return skipped;
+}
+function detect() {
+    return LAYOUTS.find(layout => existsSync(join(cwd(), layout.css))) ?? LAYOUTS[0];
+}
+const packageName = (spec) => spec.slice(0, spec.lastIndexOf('@'));
+function installed() {
+    const file = join(cwd(), 'package.json');
+    if (!existsSync(file))
+        return new Set();
+    const pkg = JSON.parse(readFileSync(file, 'utf8'));
+    return new Set(Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }));
+}
+async function installPackages() {
+    const have = installed();
+    const specs = have.has('@pantoia/ui') ? [] : [`@pantoia/ui@${version()}`];
+    let fonts = FONTS.every(spec => have.has(packageName(spec)));
+    if (!fonts) {
+        console.log('');
+        fonts = await confirm(`글꼴 패키지를 설치할까요? ${FONTS.map(packageName).join(', ')}`, true);
+        if (fonts)
+            specs.push(...FONTS);
+    }
+    const manager = MANAGERS.find(m => existsSync(join(cwd(), m.lock))) ?? MANAGERS.at(-1);
+    if (!fonts && !FONTS.every(spec => have.has(packageName(spec)))) {
+        console.log('글꼴을 설치하지 않았어요. 쓰려면 이 명령으로 설치하세요.');
+        console.log('');
+        console.log(`  ${[manager.command, manager.verb, ...FONTS].join(' ')}`);
+    }
+    if (specs.length === 0)
+        return fonts;
+    const done = spawnSync(manager.command, [manager.verb, ...specs], { stdio: 'inherit', shell: platform === 'win32' });
+    if (done.status === 0)
+        return fonts;
+    console.log('패키지를 설치하지 못했어요. 이 명령으로 직접 설치하세요.');
+    console.log('');
+    console.log(`  ${[manager.command, manager.verb, ...specs].join(' ')}`);
+    return false;
+}
+function additions(text, fonts) {
+    const head = IMPORTED.test(text) ? [] : [STYLES];
+    if (fonts && !text.includes(FONT_IMPORT))
+        head.push(FONT_IMPORT);
+    const tail = fonts && !text.includes(MONO) ? MONO_FACE : [];
+    return { head, tail };
+}
+async function importStyles(css, head, tail) {
+    const file = join(cwd(), css);
+    const text = readFileSync(file, 'utf8');
+    const ending = text.endsWith('\n') ? '\n' : '';
+    const lines = text.slice(0, text.length - ending.length).split('\n');
+    const ours = lines.findIndex(line => IMPORTED.test(line));
+    const at = ours === -1 ? lines.findIndex(line => TAILWIND.test(line)) : ours;
+    console.log('');
+    console.log(`${css}를 이렇게 수정해요.`);
+    console.log('');
+    for (const line of lines.slice(Math.max(0, at - 2), at + 1))
+        console.log(`  ${line}`);
+    for (const line of head)
+        console.log(`+ ${line}`);
+    for (const line of lines.slice(at + 1, at + 3))
+        console.log(`  ${line}`);
+    if (tail.length > 0) {
+        if (lines.length > at + 3)
+            console.log('  ...');
+        for (const line of tail)
+            console.log(`+ ${line}`);
     }
+    console.log('');
+    if (!await confirm('수정할까요?', true))
+        return false;
+    const body = [...lines.slice(0, at + 1), ...head, ...lines.slice(at + 1)];
+    if (tail.length > 0)
+        body.push('', ...tail);
+    writeFileSync(file, body.join('\n') + ending);
+    return true;
 }
 async function commandInit(args) {
-    const existing = readConfig();
-    if (existing)
-        fail(`${CONFIG} 이 이미 있다`);
-    const path = option(args, '--path') ?? DEFAULT_PATH;
-    writeConfig({ path, components: {} });
-    console.log(`${CONFIG} 을 만들었다 — 소스는 ${path} 아래로 간다`);
-    console.log('스타일을 한 줄 넣는다 — @import "@pantoia/ui/styles.css";');
+    if (readConfig())
+        fail(`${CONFIG}이 이미 있어요.`);
+    const detected = detect();
+    const path = option(args, '--path') ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', detected.path);
+    const css = option(args, '--css') ?? await ask('전역 CSS 파일 위치를 입력하세요.', detected.css);
+    if (!existsSync(join(cwd(), css)))
+        fail(`${css} 파일이 없어요. 전역 CSS 파일 위치를 확인하고 다시 실행하세요.`);
+    const text = readFileSync(join(cwd(), css), 'utf8');
+    if (!IMPORTED.test(text) && !text.split('\n').some(line => TAILWIND.test(line)))
+        fail(`${css}에 @import "tailwindcss";가 없어요. Tailwind CSS를 먼저 설치하세요.`);
+    const fonts = await installPackages();
+    const { head, tail } = additions(text, fonts);
+    const needed = head.length > 0 || tail.length > 0;
+    const added = needed && await importStyles(css, head, tail);
+    writeConfig({ path, css, components: {} });
+    if (stdin.isTTY)
+        console.log('');
+    console.log(`${CONFIG}을 만들었어요. 컴포넌트는 ${path}에 저장돼요.`);
+    if (!needed)
+        console.log(`${css}에 스타일이 이미 있어요.`);
+    else if (added)
+        console.log(`${css}에 스타일을 추가했어요.`);
+    else {
+        console.log(`${css}를 수정하지 않았어요. @import "tailwindcss"; 바로 아래에 이 줄을 직접 추가하세요.`);
+        console.log('');
+        for (const line of head)
+            console.log(`  ${line}`);
+        if (tail.length > 0) {
+            console.log('');
+            console.log('파일 끝에는 이 블록을 추가하세요.');
+            console.log('');
+            for (const line of tail)
+                console.log(`  ${line}`);
+        }
+    }
 }
 async function commandAdd(args) {
     const names = args.filter(arg => !arg.startsWith('--'));
     if (names.length === 0)
-        fail('받을 이름을 적는다 — pantoia-ui add button');
+        fail('추가할 컴포넌트 이름을 입력하세요. 예) npx @pantoia/ui add button');
     const force = args.includes('--force');
-    let config = readConfig();
-    if (!config) {
-        config = { path: option(args, '--path') ?? DEFAULT_PATH, components: {} };
-        console.log(`${CONFIG} 이 없어 만들었다 — 소스는 ${config.path} 아래로 간다`);
-    }
+    const config = readConfig();
+    if (!config)
+        fail(`${CONFIG}이 없어요. 먼저 npx @pantoia/ui init을 실행하세요.`);
     const items = resolve(names);
-    const root = join(cwd(), config.path);
+    const asked = items.filter(item => names.includes(item.name));
     const extra = items.filter(item => !names.includes(item.name));
-    if (extra.length > 0)
-        console.log(`함께 받는다 — ${extra.map(item => item.name).join(' · ')}`);
-    for (const item of items) {
+    let skipped = false;
+    let first = true;
+    for (const item of asked) {
+        if (!first)
+            console.log('');
+        first = false;
         console.log(item.name);
-        await copy(item, root, force);
+        skipped = await copy(item, config.path, force) || skipped;
         config.components[item.name] = version();
     }
+    if (extra.length > 0) {
+        console.log('');
+        console.log('함께 필요한 파일도 추가했어요.');
+        for (const item of extra) {
+            skipped = await copy(item, config.path, force) || skipped;
+            config.components[item.name] = version();
+        }
+    }
     writeConfig(config);
-    const dependencies = [...new Set(items.flatMap(item => item.dependencies ?? []))].sort();
-    if (dependencies.length > 0)
-        console.log(`\nnpm 의존을 적는다 — ${dependencies.join(' · ')}`);
+    if (skipped) {
+        console.log('');
+        console.log('덮어쓰려면 --force 옵션을 붙이세요.');
+    }
 }
 function commandList() {
+    console.log(`${'이름'.padEnd(16)}${'종류'.padEnd(7)}같이 추가되는 컴포넌트`);
     for (const item of registry()) {
-        const together = (item.registryDependencies ?? []).join(' · ');
-        console.log(`${item.name.padEnd(18)}${(item.meta?.layer ?? '').padEnd(9)}${together}`);
+        const layer = item.meta?.layer ?? (item.type === 'registry:lib' ? 'lib' : '');
+        const together = (item.registryDependencies ?? []).join(', ');
+        console.log(`${item.name.padEnd(18)}${layer.padEnd(9)}${together}`.trimEnd());
     }
 }
 function lcs(a, b) {
@@ -154,7 +309,7 @@ function difference(mine, theirs) {
 async function commandDiff(args) {
     const config = readConfig();
     if (!config)
-        fail(`${CONFIG} 이 없다 — pantoia-ui init 을 먼저 돌린다`);
+        fail(`${CONFIG}이 없어요. 먼저 npx @pantoia/ui add로 컴포넌트를 추가하세요.`);
     const names = args.filter(arg => !arg.startsWith('--'));
     const wanted = names.length > 0 ? names : Object.keys(config.components);
     let changed = 0;
@@ -167,14 +322,16 @@ async function commandDiff(args) {
             const theirs = readFileSync(join(HERE, file.path), 'utf8');
             if (mine === theirs)
                 continue;
+            if (changed === 0)
+                console.log('- 는 내 파일, + 는 최신 파일이에요.');
             changed++;
-            console.log(`\n${file.path}`);
+            console.log(`\n${join(config.path, file.target ?? file.path)}`);
             for (const line of difference(mine.split('\n'), theirs.split('\n')))
                 console.log(line);
         }
     }
     if (changed === 0)
-        console.log('갈린 것이 없다');
+        console.log('달라진 파일이 없어요.');
 }
 const [command, ...args] = argv.slice(2);
 if (command === 'init')

package/drawer/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add drawer
 층     ui
-파일   drawer/index.tsx · drawer/index.module.css · drawer/AGENTS.md
+파일   drawer/index.tsx, drawer/index.module.css, drawer/AGENTS.md
 ```
 
 ## 부위
@@ -11,8 +11,8 @@
 | 이름 | props |
 |---|---|
 | `Drawer` | `DrawerProps` |
-| `DrawerTrigger` | — |
-| `DrawerClose` | — |
+| `DrawerTrigger` | - |
+| `DrawerClose` | - |
 | `DrawerContent` | `ComponentProps<typeof Dialog.Content>` |
 | `DrawerHeader` | `DrawerHeaderProps` |
 | `DrawerTitle` | `ComponentProps<typeof Dialog.Title>` |
@@ -51,11 +51,11 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `drawerContent`
+## 변형 - `drawerContent`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `side` | `left` · `right` | — |
+| `side` | `left`, `right` | - |
 
 ## 함께 받는 것
 

package/drawer/index.tsx

@@ -117,7 +117,7 @@ export function DrawerClose({ children }: { children: ReactNode }) {
 }
 
 export const drawerContent = tv({
-  base: 'bg-float text-fg z-overlay fixed inset-y-0'
+  base: 'sheet text-fg z-overlay fixed inset-y-0'
     + ' flex w-full flex-col gap-stack overflow-y-auto p-4 sm:w-120'
     + ' focus-visible:outline-none',
   variants: {
@@ -137,7 +137,7 @@ export function DrawerContent({
 
   return (
     <Dialog.Portal>
-      <Dialog.Overlay className="bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <Dialog.Overlay className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <Dialog.Content
         {...rest}
@@ -187,12 +187,16 @@ export function DrawerHeader({ lead, trail, className, children }: DrawerHeaderP
   )
 }
 
+const drawerTitle = tv({ base: 'text-section min-w-0' })
+
 export function DrawerTitle({ className, ...rest }: ComponentProps<typeof Dialog.Title>) {
-  return <Dialog.Title {...rest} className={tv({ base: 'text-section min-w-0' })({ className })} />
+  return <Dialog.Title {...rest} className={drawerTitle({ className })} />
 }
 
+const drawerDescription = tv({ base: 'text-prose text-fg-muted' })
+
 export function DrawerDescription({ className, ...rest }: ComponentProps<typeof Dialog.Description>) {
   return (
-    <Dialog.Description {...rest} className={tv({ base: 'text-prose text-fg-muted' })({ className })} />
+    <Dialog.Description {...rest} className={drawerDescription({ className })} />
   )
 }

package/dropdown-menu/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add dropdown-menu
 층     ui
-파일   dropdown-menu/index.tsx · dropdown-menu/AGENTS.md
+파일   dropdown-menu/index.tsx, dropdown-menu/AGENTS.md
 ```
 
 ## 부위
@@ -11,16 +11,16 @@
 | 이름 | props |
 |---|---|
 | `DropdownMenu` | `DropdownMenuProps` |
-| `DropdownMenuTrigger` | — |
+| `DropdownMenuTrigger` | - |
 | `DropdownMenuContent` | `DropdownMenuContentProps` |
-| `DropdownMenuGroup` | — |
+| `DropdownMenuGroup` | - |
 | `DropdownMenuItem` | `DropdownMenuItemProps` |
-| `DropdownMenuCheckboxItem` | — |
-| `DropdownMenuRadioGroup` | — |
-| `DropdownMenuRadioItem` | — |
-| `DropdownMenuSeparator` | — |
-| `DropdownMenuSub` | — |
-| `DropdownMenuSubTrigger` | — |
+| `DropdownMenuCheckboxItem` | - |
+| `DropdownMenuRadioGroup` | - |
+| `DropdownMenuRadioItem` | - |
+| `DropdownMenuSeparator` | - |
+| `DropdownMenuSub` | - |
+| `DropdownMenuSubTrigger` | - |
 | `DropdownMenuSubContent` | `ComponentProps<typeof MenuPrimitive.SubContent>` |
 
 ### `DropdownMenuTrigger`
@@ -118,11 +118,11 @@
 | `lead` | `ReactNode` |  |
 | `trail` | `ReactNode` |  |
 
-## 변형 — `menuItem`
+## 변형 - `menuItem`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `color` | `neutral` · `danger` | `neutral` |
+| `color` | `neutral`, `danger` | `neutral` |
 
 ## 함께 받는 것
 
@@ -130,4 +130,4 @@
 
 ## npm 의존
 
-`lucide-react` · `radix-ui`
+`radix-ui`

package/dropdown-menu/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Check, ChevronRight } from 'lucide-react'
 import { DropdownMenu as MenuPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 
@@ -14,15 +13,15 @@ export const menuItem = tv({
 
   variants: {
     color: {
-      neutral: 'text-fg data-highlighted:bg-hover data-disabled:text-fg-disabled',
-      danger: 'text-danger data-highlighted:bg-danger-weak data-disabled:text-danger/40',
+      neutral: 'text-fg data-highlighted:bg-bg-neutral-hover data-disabled:text-fg-disabled',
+      danger: 'text-fg-danger data-highlighted:bg-bg-danger-weak data-disabled:text-fg-danger/40',
     },
   },
 
   defaultVariants: { color: 'neutral' },
 })
 
-const PANEL = 'menu bg-float text-fg rounded-float shadow-s3 z-overlay'
+const PANEL = 'menu float text-fg rounded-r12 z-overlay'
   + ' flex min-w-44 flex-col gap-px p-1'
   + ' open:animate-enter closed:animate-exit'
   + ' focus-visible:outline-none'
@@ -51,6 +50,8 @@ export interface DropdownMenuContentProps extends Omit<ComponentProps<typeof Men
   arrow?: boolean
 }
 
+const menuPanel = tv({ base: PANEL })
+
 export function DropdownMenuContent({
   align = 'start',
   arrow = true,
@@ -65,23 +66,31 @@ export function DropdownMenuContent({
         align={align}
         sideOffset={8}
         arrowPadding={16}
-        className={tv({ base: PANEL })({ className })}
+        className={menuPanel({ className })}
       >
         {children}
 
-        {arrow && <MenuPrimitive.Arrow className="fill-float" width={12} height={6} />}
+        {arrow && (
+          <MenuPrimitive.Arrow asChild width={12} height={6}>
+            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
+              <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
+            </svg>
+          </MenuPrimitive.Arrow>
+        )}
       </MenuPrimitive.Content>
     </MenuPrimitive.Portal>
   )
 }
 
+const menuGroup = tv({ base: 'flex flex-col gap-px' })
+
 export function DropdownMenuGroup({ label, className, children }: {
   label?: string
   className?: string
   children?: ReactNode
 }) {
   return (
-    <MenuPrimitive.Group className={tv({ base: 'flex flex-col gap-px' })({ className })}>
+    <MenuPrimitive.Group className={menuGroup({ className })}>
       {label && (
         <MenuPrimitive.Label className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
@@ -130,7 +139,9 @@ export function DropdownMenuCheckboxItem({ checked, onCheckedChange, disabled, c
     >
       <span className="menu-lead grid size-4 shrink-0 place-items-center">
         <MenuPrimitive.ItemIndicator>
-          <Check className="size-4" />
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
         </MenuPrimitive.ItemIndicator>
       </span>
 
@@ -161,7 +172,7 @@ export function DropdownMenuRadioItem({ value, disabled, className, children }:
     <MenuPrimitive.RadioItem value={value} disabled={disabled} className={menuItem({ className })}>
       <span className="menu-lead grid size-4 shrink-0 place-items-center">
         <MenuPrimitive.ItemIndicator>
-          <span className="bg-control-on in-disabled:bg-control-on-disabled size-2 rounded-full" />
+          <span className="bg-bg-neutral-solid in-disabled:bg-bg-neutral-solid-checked-disabled size-2 rounded-full" />
         </MenuPrimitive.ItemIndicator>
       </span>
 
@@ -170,8 +181,10 @@ export function DropdownMenuRadioItem({ value, disabled, className, children }:
   )
 }
 
+const menuSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
+
 export function DropdownMenuSeparator({ className }: { className?: string }) {
-  return <MenuPrimitive.Separator className={tv({ base: 'bg-line -mx-1 my-1 h-px' })({ className })} />
+  return <MenuPrimitive.Separator className={menuSeparator({ className })} />
 }
 
 export function DropdownMenuSub({ open, defaultOpen, onOpenChange, children }: {
@@ -203,7 +216,9 @@ export function DropdownMenuSubTrigger({ disabled, lead, className, children }:
 
       <span className="min-w-0 grow">{children}</span>
 
-      <ChevronRight className="text-fg-subtle size-4 shrink-0" />
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-fg-subtle size-4 shrink-0">
+        <path d="m9 18 6-6-6-6" />
+      </svg>
     </MenuPrimitive.SubTrigger>
   )
 }
@@ -214,7 +229,7 @@ export function DropdownMenuSubContent({ className, children, ...rest }: Compone
       <MenuPrimitive.SubContent
         {...rest}
         sideOffset={4}
-        className={tv({ base: PANEL })({ className })}
+        className={menuPanel({ className })}
       >
         {children}
       </MenuPrimitive.SubContent>

package/field/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add field
 층     ui
-파일   field/index.tsx · field/AGENTS.md
+파일   field/index.tsx, field/AGENTS.md
 ```
 
 ## 부위
@@ -11,11 +11,11 @@
 | 이름 | props |
 |---|---|
 | `Field` | `FieldProps` |
-| `FieldLabel` | — |
-| `FieldHelp` | — |
+| `FieldLabel` | - |
+| `FieldHelp` | - |
 | `FieldError` | `FieldErrorProps` |
-| `FieldPending` | — |
-| `FieldSuccess` | — |
+| `FieldPending` | - |
+| `FieldSuccess` | - |
 
 ### `FieldLabel`
 
@@ -81,16 +81,12 @@
 | `className` | `string` |  |
 | `children` | `ReactNode` |  |
 
-## 변형 — `field`
+## 변형 - `field`
 
 | 축 | 값 | 기본 |
 |---|---|---|
-| `layout` | `stack` · `inline` · `split` | `stack` |
+| `layout` | `stack`, `inline`, `split` | `stack` |
 
 ## 함께 받는 것
 
-`label` · `tv`
-
-## npm 의존
-
-`lucide-react`
+`label`, `tv`