atomsystem 0.4.1 → 0.5.0

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cli.ts"],"names":[],"mappings":"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","file":"cli.js","sourcesContent":["#!/usr/bin/env node\nimport fs from 'fs';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nfunction getPkgRoot(): string {\n  try {\n    if (typeof __dirname !== 'undefined') {\n      return path.resolve(__dirname, '..');\n    }\n    const currentFile = fileURLToPath(import.meta.url);\n    return path.resolve(path.dirname(currentFile), '..');\n  } catch {\n    return process.cwd();\n  }\n}\n\nconst PKG_ROOT = getPkgRoot();\nconst args = process.argv.slice(2);\nconst command = args[0] || 'help';\n\nfunction copyFileSafe(src: string, dest: string, label: string) {\n  const targetDir = path.dirname(dest);\n  if (!fs.existsSync(targetDir)) {\n    fs.mkdirSync(targetDir, { recursive: true });\n  }\n  fs.copyFileSync(src, dest);\n  console.log(`  ✓ Created ${label} -> ${path.relative(process.cwd(), dest)}`);\n}\n\nfunction handleInit() {\n  const cwd = process.cwd();\n  console.log('\\n🚀 Initializing AtomSystem in your project...\\n');\n\n  // 1. Install AI Agent Skill\n  const srcSkill = path.join(PKG_ROOT, 'skills', 'atomsystem.skill.md');\n  const destSkill = path.join(cwd, '.agents', 'skills', 'atomsystem', 'SKILL.md');\n  if (fs.existsSync(srcSkill)) {\n    copyFileSafe(srcSkill, destSkill, 'AI Skill (.agents/skills/atomsystem/SKILL.md)');\n  }\n\n  // 2. Install Design Guide (.design.md)\n  const srcDesign = path.join(PKG_ROOT, 'presets', 'default.design.md');\n  const destDesign = path.join(cwd, 'atom.design.md');\n  if (fs.existsSync(srcDesign)) {\n    copyFileSafe(srcDesign, destDesign, 'Design Guide (atom.design.md)');\n  }\n\n  // 3. Install UX Pattern Guide (.uxPattern.md)\n  const srcPattern = path.join(PKG_ROOT, 'presets', 'uxPattern.md');\n  const destPattern = path.join(cwd, 'atom.uxPattern.md');\n  if (fs.existsSync(srcPattern)) {\n    copyFileSafe(srcPattern, destPattern, 'UX Pattern Guide (atom.uxPattern.md)');\n  }\n\n  // 4. Install Token JSON (tokens.json)\n  const srcToken = path.join(PKG_ROOT, 'tokens', 'token.json');\n  const destToken = path.join(cwd, 'tokens', 'token.json');\n  if (fs.existsSync(srcToken)) {\n    copyFileSafe(srcToken, destToken, 'Token JSON (tokens/token.json)');\n  }\n\n  console.log('\\n✨ AtomSystem initialization completed!');\n  console.log('\\n📌 Next Steps:');\n  console.log('1. Import AtomSystem CSS in your app (e.g. layout.tsx, App.vue, index.html):');\n  console.log('   import \"atomsystem/css/atom-ui.css\";');\n  console.log('2. Ask your AI coding assistant (Antigravity, Cursor, Copilot) to build UI:');\n  console.log('   \"atom.design.md와 atom.uxPattern.md를 참고하여 결제 화면 컴포넌트를 만들어줘.\"\\n');\n}\n\nfunction showHelp() {\n  console.log(`\nAtomSystem CLI - Universal Design Token & Agentic UI System\n\nUsage:\n  npx atomsystem <command> [options]\n\nCommands:\n  init         Initialize AtomSystem assets (AI Skill, design.md, uxPattern.md, token.json)\n  help         Display this help message\n  version      Print version info\n`);\n}\n\nfunction showVersion() {\n  const pkgPath = path.join(PKG_ROOT, 'package.json');\n  if (fs.existsSync(pkgPath)) {\n    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));\n    console.log(`atomsystem v${pkg.version}`);\n  } else {\n    console.log('atomsystem v0.4.1');\n  }\n}\n\nswitch (command) {\n  case 'init':\n    handleInit();\n    break;\n  case 'version':\n  case '-v':\n  case '--version':\n    showVersion();\n    break;\n  case 'help':\n  case '-h':\n  case '--help':\n  default:\n    showHelp();\n    break;\n}\n\n"]}
+{"version":3,"sources":["../src/tokenCompiler.ts","../src/studioServer.ts","../src/cli.ts"],"names":["path","fs"],"mappings":"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","file":"cli.js","sourcesContent":["/**\n * W3C DTCG Token JSON -> CSS Custom Properties 변환 유틸리티\n */\nexport function compileTokensToCss(tokenJson: Record<string, any>): string {\n  const cssVars: string[] = [];\n\n  function traverse(obj: any) {\n    if (!obj || typeof obj !== 'object') return;\n\n    if (obj.variable && obj.$value !== undefined) {\n      cssVars.push(`  ${obj.variable}: ${obj.$value};`);\n      return;\n    }\n\n    for (const key of Object.keys(obj)) {\n      if (key.startsWith('$')) continue;\n      traverse(obj[key]);\n    }\n  }\n\n  traverse(tokenJson);\n\n  return `:root {\\n${cssVars.join('\\n')}\\n}\\n`;\n}\n","import http from 'http';\nimport fs from 'fs';\nimport path from 'path';\nimport { compileTokensToCss } from './tokenCompiler';\n\nexport function startLocalTokenStudio(options: { port?: number; cwd?: string } = {}) {\n  const port = options.port || 4000;\n  const cwd = options.cwd || process.cwd();\n\n  // Find token files\n  const tokenJsonPath = path.join(cwd, 'tokens', 'token.json');\n  const cssPath = path.join(cwd, 'css', 'atom-ui.css');\n  const designMdPath = path.join(cwd, 'atom.design.md');\n\n  const server = http.createServer((req, res) => {\n    // CORS headers for local usage\n    res.setHeader('Access-Control-Allow-Origin', '*');\n    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');\n    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');\n\n    if (req.method === 'OPTIONS') {\n      res.writeHead(200);\n      res.end();\n      return;\n    }\n\n    const url = new URL(req.url || '/', `http://localhost:${port}`);\n\n    // API: GET tokens\n    if (url.pathname === '/api/tokens' && req.method === 'GET') {\n      let data: any = {};\n      if (fs.existsSync(tokenJsonPath)) {\n        try {\n          data = JSON.parse(fs.readFileSync(tokenJsonPath, 'utf-8'));\n        } catch (e) {\n          data = { error: 'Failed to parse tokens/token.json' };\n        }\n      }\n      res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });\n      res.end(JSON.stringify(data));\n      return;\n    }\n\n    // API: POST update tokens\n    if (url.pathname === '/api/tokens' && req.method === 'POST') {\n      let body = '';\n      req.on('data', (chunk) => {\n        body += chunk;\n      });\n      req.on('end', () => {\n        try {\n          const newTokens = JSON.parse(body);\n\n          // 1. Save tokens/token.json\n          const tokensDir = path.dirname(tokenJsonPath);\n          if (!fs.existsSync(tokensDir)) fs.mkdirSync(tokensDir, { recursive: true });\n          fs.writeFileSync(tokenJsonPath, JSON.stringify(newTokens, null, 2), 'utf-8');\n\n          // 2. Compile and save to css/atom-ui.css\n          const compiledCss = compileTokensToCss(newTokens);\n          const cssDir = path.dirname(cssPath);\n          if (!fs.existsSync(cssDir)) fs.mkdirSync(cssDir, { recursive: true });\n          fs.writeFileSync(cssPath, compiledCss, 'utf-8');\n\n          res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });\n          res.end(JSON.stringify({ success: true, message: 'Tokens and CSS compiled successfully!' }));\n        } catch (err: any) {\n          res.writeHead(400, { 'Content-Type': 'application/json; charset=utf-8' });\n          res.end(JSON.stringify({ success: false, error: err.message }));\n        }\n      });\n      return;\n    }\n\n    // Serve Local Token Studio Web UI\n    if (url.pathname === '/' || url.pathname === '/index.html') {\n      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });\n      res.end(getStudioHtml());\n      return;\n    }\n\n    res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });\n    res.end('Not Found');\n  });\n\n  server.listen(port, () => {\n    console.log(`\\n🎨 AtomSystem Local Token Studio running at:`);\n    console.log(`   👉 http://localhost:${port}\\n`);\n    console.log(`   Tokens file: ${path.relative(cwd, tokenJsonPath)}`);\n    console.log(`   Compiled CSS: ${path.relative(cwd, cssPath)}`);\n    console.log(`\\nPress Ctrl+C to stop the studio server.\\n`);\n  });\n\n  return server;\n}\n\nfunction getStudioHtml(): string {\n  return `<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>AtomSystem Local Token Studio</title>\n  <style>\n    :root {\n      --bg: #0a0a0a;\n      --card-bg: #141414;\n      --border: #262626;\n      --text: #ededed;\n      --muted: #888888;\n      --accent: #3182f6;\n      --radius: 8px;\n    }\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: var(--bg);\n      color: var(--text);\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Pretendard, sans-serif;\n      padding: 32px 20px;\n      line-height: 1.5;\n    }\n    .container { max-width: 1100px; margin: 0 auto; }\n    header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      padding-bottom: 24px;\n      border-bottom: 1px solid var(--border);\n      margin-bottom: 32px;\n    }\n    h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }\n    p.desc { font-size: 13px; color: var(--muted); margin-top: 4px; }\n    .badge {\n      font-size: 11px;\n      font-family: monospace;\n      padding: 3px 8px;\n      background: #1a1a1a;\n      border: 1px solid var(--border);\n      border-radius: 4px;\n      color: var(--muted);\n    }\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n    @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }\n    .card {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 20px;\n    }\n    h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }\n    .field { margin-bottom: 16px; }\n    label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px; color: var(--text); }\n    .meta { font-size: 11px; color: var(--muted); font-family: monospace; margin-top: 4px; }\n    .input-row { display: flex; gap: 8px; align-items: center; }\n    input[type=\"text\"], select {\n      flex: 1;\n      background: #1e1e1e;\n      border: 1px solid var(--border);\n      color: var(--text);\n      padding: 8px 12px;\n      font-size: 13px;\n      border-radius: 6px;\n      outline: none;\n    }\n    input[type=\"color\"] {\n      -webkit-appearance: none;\n      border: 1px solid var(--border);\n      width: 38px;\n      height: 38px;\n      border-radius: 6px;\n      background: none;\n      cursor: pointer;\n      padding: 2px;\n    }\n    .btn-save {\n      background: var(--text);\n      color: var(--bg);\n      border: none;\n      padding: 10px 20px;\n      font-size: 13px;\n      font-weight: 600;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n    }\n    .btn-save:hover { opacity: 0.9; }\n    .preview-box {\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      padding: 20px;\n      background: #0f0f0f;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n    .preview-btn {\n      padding: 10px 18px;\n      border-radius: var(--sample-radius, 8px);\n      background: var(--sample-primary, #3182f6);\n      color: #ffffff;\n      border: none;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n    }\n    .preview-card {\n      padding: 16px;\n      border-radius: var(--sample-radius, 8px);\n      background: var(--sample-surface, #18181b);\n      border: 1px solid var(--border);\n      color: var(--text);\n      font-size: 13px;\n    }\n    .toast {\n      position: fixed;\n      bottom: 24px;\n      right: 24px;\n      background: #10b981;\n      color: #000;\n      padding: 10px 18px;\n      border-radius: 6px;\n      font-size: 13px;\n      font-weight: 600;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.5);\n      display: none;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"container\">\n    <header>\n      <div>\n        <div class=\"badge\" style=\"margin-bottom: 8px; display: inline-block;\">W3C DTCG Zero-Runtime</div>\n        <h1>AtomSystem Local Token Studio</h1>\n        <p class=\"desc\">로컬 환경(tokens/token.json)의 토큰을 GUI로 직접 수정하고 실시간으로 css/atom-ui.css로 재컴파일합니다.</p>\n      </div>\n      <button class=\"btn-save\" onclick=\"saveTokens()\">저장 및 CSS 재컴파일</button>\n    </header>\n\n    <div class=\"grid\">\n      <!-- 1. Color Tokens -->\n      <div class=\"card\">\n        <h2>🎨 시맨틱 브랜드 & 서피스 토큰</h2>\n        \n        <div class=\"field\">\n          <label>브랜드 대표 색상 (Primary Color)</label>\n          <div class=\"input-row\">\n            <input type=\"color\" id=\"picker-primary\" oninput=\"onColorChange('primary', this.value)\">\n            <input type=\"text\" id=\"val-primary\" oninput=\"onColorChange('primary', this.value)\">\n          </div>\n          <div class=\"meta\">var(--atom-color-primary)</div>\n        </div>\n\n        <div class=\"field\">\n          <label>호버 상태 색상 (Primary Hover)</label>\n          <div class=\"input-row\">\n            <input type=\"color\" id=\"picker-primary-hover\" oninput=\"onColorChange('primary-hover', this.value)\">\n            <input type=\"text\" id=\"val-primary-hover\" oninput=\"onColorChange('primary-hover', this.value)\">\n          </div>\n          <div class=\"meta\">var(--atom-color-primary-hover)</div>\n        </div>\n\n        <div class=\"field\">\n          <label>서피스 배경 (Surface Background)</label>\n          <div class=\"input-row\">\n            <input type=\"color\" id=\"picker-bg-surface\" oninput=\"onColorChange('bg-surface', this.value)\">\n            <input type=\"text\" id=\"val-bg-surface\" oninput=\"onColorChange('bg-surface', this.value)\">\n          </div>\n          <div class=\"meta\">var(--atom-bg-surface)</div>\n        </div>\n\n        <div class=\"field\">\n          <label>기본 모서리 곡률 (Border Radius)</label>\n          <select id=\"val-radius\" onchange=\"onRadiusChange(this.value)\">\n            <option value=\"4px\">4px (Sharp Minimal)</option>\n            <option value=\"6px\">6px (Swiss Modern)</option>\n            <option value=\"8px\">8px (Standard Clean)</option>\n            <option value=\"12px\">12px (Rounded Friendly)</option>\n            <option value=\"16px\">16px (Toss Soft)</option>\n          </select>\n          <div class=\"meta\">var(--atom-radius-md)</div>\n        </div>\n      </div>\n\n      <!-- 2. Live Previewer -->\n      <div class=\"card\">\n        <h2>⚡ 실시간 토큰 반영 프리뷰</h2>\n        <div class=\"preview-box\" id=\"preview-box\">\n          <div class=\"preview-card\" id=\"sample-card\">\n            <div style=\"font-weight: 600; margin-bottom: 4px;\">대시보드 위젯 컴포넌트</div>\n            <div style=\"color: var(--muted); font-size: 12px; margin-bottom: 14px;\">\n              토큰 변경 시 실시간으로 디자인이 반영되며 즉시 CSS 파일에 동기화됩니다.\n            </div>\n            <button class=\"preview-btn\" id=\"sample-btn\">확인 및 승인</button>\n          </div>\n\n          <div style=\"font-size: 11px; font-family: monospace; color: var(--muted); background: #161616; padding: 12px; border-radius: 6px; border: 1px solid var(--border);\">\n            <div>// 컴파일 대상 파일</div>\n            <div style=\"color: #60a5fa; margin-top: 4px;\">tokens/token.json (W3C DTCG)</div>\n            <div style=\"color: #34d399; margin-top: 2px;\">css/atom-ui.css (0KB Pure CSS)</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"toast\" class=\"toast\">✓ 토큰 및 CSS가 성공적으로 재컴파일되었습니다!</div>\n\n  <script>\n    let currentTokens = {};\n\n    async function loadTokens() {\n      try {\n        const res = await fetch('/api/tokens');\n        currentTokens = await res.json();\n        populateFields();\n        updatePreview();\n      } catch (e) {\n        console.error('Failed to fetch tokens', e);\n      }\n    }\n\n    function populateFields() {\n      const primary = currentTokens?.color?.brand?.['color-primary']?.$value || '#3182f6';\n      const hover = currentTokens?.color?.brand?.['color-primary-hover']?.$value || '#1b64da';\n      const surface = currentTokens?.color?.surface?.['bg-surface']?.$value || '#18181b';\n      const radius = currentTokens?.borderRadius?.md?.$value || '8px';\n\n      document.getElementById('picker-primary').value = primary.startsWith('#') ? primary : '#3182f6';\n      document.getElementById('val-primary').value = primary;\n\n      document.getElementById('picker-primary-hover').value = hover.startsWith('#') ? hover : '#1b64da';\n      document.getElementById('val-primary-hover').value = hover;\n\n      document.getElementById('picker-bg-surface').value = surface.startsWith('#') ? surface : '#18181b';\n      document.getElementById('val-bg-surface').value = surface;\n\n      document.getElementById('val-radius').value = radius;\n    }\n\n    function onColorChange(key, val) {\n      if (!currentTokens.color) currentTokens.color = {};\n      if (key === 'primary') {\n        document.getElementById('picker-primary').value = val.startsWith('#') ? val : '#3182f6';\n        document.getElementById('val-primary').value = val;\n        if (!currentTokens.color.brand) currentTokens.color.brand = {};\n        if (!currentTokens.color.brand['color-primary']) currentTokens.color.brand['color-primary'] = { variable: '--atom-color-primary' };\n        currentTokens.color.brand['color-primary'].$value = val;\n      }\n      if (key === 'primary-hover') {\n        document.getElementById('picker-primary-hover').value = val.startsWith('#') ? val : '#1b64da';\n        document.getElementById('val-primary-hover').value = val;\n        if (!currentTokens.color.brand) currentTokens.color.brand = {};\n        if (!currentTokens.color.brand['color-primary-hover']) currentTokens.color.brand['color-primary-hover'] = { variable: '--atom-color-primary-hover' };\n        currentTokens.color.brand['color-primary-hover'].$value = val;\n      }\n      if (key === 'bg-surface') {\n        document.getElementById('picker-bg-surface').value = val.startsWith('#') ? val : '#18181b';\n        document.getElementById('val-bg-surface').value = val;\n        if (!currentTokens.color.surface) currentTokens.color.surface = {};\n        if (!currentTokens.color.surface['bg-surface']) currentTokens.color.surface['bg-surface'] = { variable: '--atom-bg-surface' };\n        currentTokens.color.surface['bg-surface'].$value = val;\n      }\n      updatePreview();\n    }\n\n    function onRadiusChange(val) {\n      if (!currentTokens.borderRadius) currentTokens.borderRadius = {};\n      if (!currentTokens.borderRadius.md) currentTokens.borderRadius.md = { variable: '--atom-radius-md' };\n      currentTokens.borderRadius.md.$value = val;\n      updatePreview();\n    }\n\n    function updatePreview() {\n      const primary = document.getElementById('val-primary').value;\n      const surface = document.getElementById('val-bg-surface').value;\n      const radius = document.getElementById('val-radius').value;\n\n      const btn = document.getElementById('sample-btn');\n      const card = document.getElementById('sample-card');\n\n      btn.style.backgroundColor = primary;\n      btn.style.borderRadius = radius;\n      card.style.backgroundColor = surface;\n      card.style.borderRadius = radius;\n    }\n\n    async function saveTokens() {\n      try {\n        const res = await fetch('/api/tokens', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify(currentTokens)\n        });\n        const result = await res.json();\n        if (result.success) {\n          showToast();\n        } else {\n          alert('저장 실패: ' + result.error);\n        }\n      } catch (e) {\n        alert('서버 통신 오류: ' + e.message);\n      }\n    }\n\n    function showToast() {\n      const toast = document.getElementById('toast');\n      toast.style.display = 'block';\n      setTimeout(() => { toast.style.display = 'none'; }, 2500);\n    }\n\n    loadTokens();\n  </script>\n</body>\n</html>`;\n}\n","#!/usr/bin/env node\nimport fs from 'fs';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nimport { startLocalTokenStudio } from './studioServer';\nimport { compileTokensToCss } from './tokenCompiler';\n\nfunction getPkgRoot(): string {\n  try {\n    if (typeof __dirname !== 'undefined') {\n      return path.resolve(__dirname, '..');\n    }\n    const currentFile = fileURLToPath(import.meta.url);\n    return path.resolve(path.dirname(currentFile), '..');\n  } catch {\n    return process.cwd();\n  }\n}\n\nconst PKG_ROOT = getPkgRoot();\nconst args = process.argv.slice(2);\nconst command = args[0] || 'help';\nconst targetName = args[1];\n\nfunction copyFileSafe(src: string, dest: string, label: string) {\n  const targetDir = path.dirname(dest);\n  if (!fs.existsSync(targetDir)) {\n    fs.mkdirSync(targetDir, { recursive: true });\n  }\n  fs.copyFileSync(src, dest);\n  console.log(`  ✓ ${label} -> ${path.relative(process.cwd(), dest)}`);\n}\n\nfunction handleInit() {\n  const cwd = process.cwd();\n  console.log('\\n🚀 Initializing AtomSystem Universal Design System...\\n');\n\n  // 1. AI Assistant Master Guidelines (Multi-agent SSOT)\n  const srcAgentGuide = path.join(PKG_ROOT, 'presets', 'agents.guide.md');\n  if (fs.existsSync(srcAgentGuide)) {\n    // AGENTS.md (Universal)\n    copyFileSafe(srcAgentGuide, path.join(cwd, 'AGENTS.md'), 'Universal AI Guide (AGENTS.md)');\n    // CLAUDE.md (Claude Code)\n    copyFileSafe(srcAgentGuide, path.join(cwd, 'CLAUDE.md'), 'Claude Code Guidelines (CLAUDE.md)');\n    // .cursorrules (Cursor IDE)\n    copyFileSafe(srcAgentGuide, path.join(cwd, '.cursorrules'), 'Cursor Rules (.cursorrules)');\n  }\n\n  // 2. Install AI Agent Skill\n  const srcSkill = path.join(PKG_ROOT, 'skills', 'atomsystem.skill.md');\n  if (fs.existsSync(srcSkill)) {\n    copyFileSafe(srcSkill, path.join(cwd, '.agents', 'skills', 'atomsystem', 'SKILL.md'), 'Agent Skill (.agents/skills/atomsystem/SKILL.md)');\n  }\n\n  // 3. Install 4-Tier Specifications\n  const specs = [\n    { src: path.join(PKG_ROOT, 'presets', 'default.design.md'), dest: path.join(cwd, 'atom.design.md'), label: 'Design Tokens (atom.design.md)' },\n    { src: path.join(PKG_ROOT, 'presets', 'components.md'), dest: path.join(cwd, 'atom.components.md'), label: 'Components Spec (atom.components.md)' },\n    { src: path.join(PKG_ROOT, 'presets', 'blocks.md'), dest: path.join(cwd, 'atom.blocks.md'), label: 'Design Blocks Spec (atom.blocks.md)' },\n    { src: path.join(PKG_ROOT, 'presets', 'uxPattern.md'), dest: path.join(cwd, 'atom.uxPattern.md'), label: 'UX Patterns (atom.uxPattern.md)' },\n  ];\n\n  specs.forEach((s) => {\n    if (fs.existsSync(s.src)) {\n      copyFileSafe(s.src, s.dest, s.label);\n    }\n  });\n\n  // 4. Install Token JSON & Zero-Runtime CSS\n  const srcToken = path.join(PKG_ROOT, 'tokens', 'token.json');\n  if (fs.existsSync(srcToken)) {\n    copyFileSafe(srcToken, path.join(cwd, 'tokens', 'token.json'), 'W3C DTCG Token JSON (tokens/token.json)');\n  }\n\n  const srcCss = path.join(PKG_ROOT, 'css', 'atom-ui.css');\n  if (fs.existsSync(srcCss)) {\n    copyFileSafe(srcCss, path.join(cwd, 'css', 'atom-ui.css'), 'Zero-Runtime Semantic CSS (css/atom-ui.css)');\n  }\n\n  console.log('\\n✨ AtomSystem initialization completed successfully!');\n  console.log('\\n🎨 Local Token Studio Available:');\n  console.log('  Run \"npx atomsystem studio\" to launch the local web customizer GUI.');\n  console.log('  You can visually edit tokens and immediately recompile css/atom-ui.css.');\n  console.log('\\n📌 How AI Coding Works Now:');\n  console.log('  Any AI assistant (Claude Code, Cursor, Copilot, Antigravity) will now');\n  console.log('  AUTOMATICALLY detect the design tokens, components, and UX patterns.');\n  console.log('\\n📌 You can now ask your AI:');\n  console.log('  \"대시보드 화면에 실시간 차트와 가격 정책 블록을 레고처럼 조립해줘.\"');\n  console.log('  \"atom.design.md의 색상 토큰을 바탕으로 결제 확인 모달을 만들어줘.\"\\n');\n}\n\nconst COMPONENT_MAP: Record<string, string> = {\n  button: 'Button.tsx',\n  card: 'Card.tsx',\n  badge: 'Badge.tsx',\n  input: 'Input.tsx',\n  table: 'Table.tsx',\n  tabs: 'Tabs.tsx',\n  switch: 'Switch.tsx',\n  modal: 'Modal.tsx',\n  container: 'Container.tsx',\n  layout: 'Layout.tsx',\n};\n\nconst BLOCK_MAP: Record<string, { file: string; deps: string[] }> = {\n  'realtime-chart': { file: 'RealtimeChartBlock.tsx', deps: ['card', 'button', 'badge'] },\n  'interactive-chat': { file: 'InteractiveChatBlock.tsx', deps: ['card', 'input', 'button', 'badge'] },\n  'pricing-table': { file: 'PricingPlanBlock.tsx', deps: ['card', 'button', 'badge'] },\n  'card-list': { file: 'CardListBlock.tsx', deps: ['card', 'input', 'button', 'badge'] },\n  'interactive-slider': { file: 'SliderShowcaseBlock.tsx', deps: ['card', 'button', 'badge'] },\n  'metric-stats': { file: 'MetricStatsBlock.tsx', deps: ['card', 'badge'] },\n  'file-explorer': { file: 'FileExplorerBlock.tsx', deps: ['card', 'button', 'badge'] },\n};\n\nfunction handleAdd(name?: string) {\n  if (!name) {\n    console.error('\\n❌ Please specify an item to add. Example: npx atomsystem add button\\n');\n    handleList();\n    return;\n  }\n\n  const cwd = process.cwd();\n  const normalized = name.toLowerCase().trim();\n\n  // 1. Check if it's a component\n  if (COMPONENT_MAP[normalized]) {\n    const fileName = COMPONENT_MAP[normalized];\n    const src = path.join(PKG_ROOT, 'components', 'ui', fileName);\n    const dest = path.join(cwd, 'components', 'ui', fileName);\n    if (fs.existsSync(src)) {\n      copyFileSafe(src, dest, `Component (${fileName})`);\n      console.log(`\\n✅ Added ${normalized} component to components/ui/${fileName}\\n`);\n    } else {\n      console.error(`\\n❌ Source component file not found: ${src}\\n`);\n    }\n    return;\n  }\n\n  // 2. Check if it's a block\n  if (BLOCK_MAP[normalized]) {\n    const { file, deps } = BLOCK_MAP[normalized];\n    console.log(`\\n📦 Adding block \"${normalized}\" and its dependent components...\\n`);\n\n    // Copy dependencies first (Component-First rule)\n    deps.forEach((dep) => {\n      const depFile = COMPONENT_MAP[dep];\n      if (depFile) {\n        const srcDep = path.join(PKG_ROOT, 'components', 'ui', depFile);\n        const destDep = path.join(cwd, 'components', 'ui', depFile);\n        if (fs.existsSync(srcDep)) {\n          copyFileSafe(srcDep, destDep, `Dependent Component (${depFile})`);\n        }\n      }\n    });\n\n    // Copy block file\n    const srcBlock = path.join(PKG_ROOT, 'components', 'blocks', file);\n    const destBlock = path.join(cwd, 'components', 'blocks', file);\n    if (fs.existsSync(srcBlock)) {\n      copyFileSafe(srcBlock, destBlock, `Block (${file})`);\n      console.log(`\\n✅ Block \"${normalized}\" successfully added to components/blocks/${file}\\n`);\n    } else {\n      console.error(`\\n❌ Source block file not found: ${srcBlock}\\n`);\n    }\n    return;\n  }\n\n  console.error(`\\n❌ Unknown item: \"${name}\".`);\n  handleList();\n}\n\nfunction handleList() {\n  console.log(`\nAvailable Components:\n  - button      (Button, ButtonVariants)\n  - card        (Card container)\n  - badge       (Status badge)\n  - input       (Input with status)\n  - table       (Table, Header, Row, Cell)\n  - tabs        (TabsList, TabsTrigger)\n  - switch      (A11y Switch toggle)\n  - modal       (Dialog with Esc key support)\n\nAvailable Design Blocks:\n  - realtime-chart      (Live streaming candlestick/line chart)\n  - interactive-chat    (AI chatbot feed with suggestions)\n  - pricing-table       (Monthly/annual tier pricing table)\n  - card-list           (Responsive grid & list filter)\n  - interactive-slider  (Cost simulation calculator & carousel)\n  - metric-stats        (4 KPI executive metric cards)\n  - file-explorer       (Hierarchical directory tree explorer)\n\nInstall any item:\n  npx atomsystem add <item-name>\n`);\n}\n\nfunction handleBuildTokens() {\n  const cwd = process.cwd();\n  const tokenJsonPath = path.join(cwd, 'tokens', 'token.json');\n  const cssPath = path.join(cwd, 'css', 'atom-ui.css');\n\n  if (!fs.existsSync(tokenJsonPath)) {\n    console.error(`\\n❌ tokens/token.json not found at ${tokenJsonPath}. Run 'npx atomsystem init' first.\\n`);\n    return;\n  }\n\n  try {\n    const tokens = JSON.parse(fs.readFileSync(tokenJsonPath, 'utf-8'));\n    const css = compileTokensToCss(tokens);\n    const cssDir = path.dirname(cssPath);\n    if (!fs.existsSync(cssDir)) fs.mkdirSync(cssDir, { recursive: true });\n    fs.writeFileSync(cssPath, css, 'utf-8');\n    console.log(`\\n✨ Successfully compiled tokens to ${path.relative(cwd, cssPath)}!\\n`);\n  } catch (err: any) {\n    console.error(`\\n❌ Failed to compile tokens: ${err.message}\\n`);\n  }\n}\n\nfunction handleStudio() {\n  const portArg = args.find((a) => a.startsWith('--port='));\n  const port = portArg ? parseInt(portArg.split('=')[1], 10) : 4000;\n  startLocalTokenStudio({ port, cwd: process.cwd() });\n}\n\nfunction showHelp() {\n  console.log(`\nAtomSystem CLI - Universal Design Token & Agentic UI System\n\nUsage:\n  npx atomsystem <command> [options]\n\nCommands:\n  init            Initialize AI guidelines, tokens, specs, and CSS in your project\n  studio          Launch Local Web Token Studio GUI (interactive token customizer)\n  build:tokens    Compile tokens/token.json into zero-runtime css/atom-ui.css\n  add <name>      Add a component or block directly to your project\n  list            List all available components and blocks\n  help            Display this help message\n  version         Print version info\n\nOptions for studio:\n  --port=<port>   Port for the local studio server (default: 4000)\n`);\n}\n\nfunction showVersion() {\n  const pkgPath = path.join(PKG_ROOT, 'package.json');\n  if (fs.existsSync(pkgPath)) {\n    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));\n    console.log(`atomsystem v${pkg.version}`);\n  } else {\n    console.log('atomsystem v0.5.0');\n  }\n}\n\nswitch (command) {\n  case 'init':\n    handleInit();\n    break;\n  case 'studio':\n  case 'editor':\n    handleStudio();\n    break;\n  case 'build:tokens':\n  case 'compile':\n    handleBuildTokens();\n    break;\n  case 'add':\n    handleAdd(targetName);\n    break;\n  case 'list':\n    handleList();\n    break;\n  case 'version':\n  case '-v':\n  case '--version':\n    showVersion();\n    break;\n  case 'help':\n  case '-h':\n  case '--help':\n  default:\n    showHelp();\n    break;\n}\n"]}

package/dist/index.cjs

@@ -272,6 +272,71 @@ var SHADOW_TOKENS = [
     description: "\uD654\uBA74 \uCD5C\uC0C1\uB2E8 \uB808\uC774\uC5B4\uC758 \uBAA8\uB2EC \uB2E4\uC774\uC5BC\uB85C\uADF8, \uBC14\uD140\uC2DC\uD2B8"
   }
 ];
+var LAYOUT_TOKENS = [
+  {
+    name: "Container Small (Narrow / Form)",
+    variable: "--atom-container-sm",
+    value: "640px",
+    description: "\uC778\uC99D \uD3FC, \uACB0\uC81C \uBAA8\uB2EC, \uB2E8\uC77C \uCEEC\uB7FC \uCF58\uD150\uCE20",
+    type: "container"
+  },
+  {
+    name: "Container Medium (Article / Content)",
+    variable: "--atom-container-md",
+    value: "768px",
+    description: "\uBE14\uB85C\uADF8 \uC544\uD2F0\uD074, \uD504\uB85C\uD544 \uBDF0\uC5B4, \uC124\uC815 \uD3FC",
+    type: "container"
+  },
+  {
+    name: "Container Large (Standard Catalog)",
+    variable: "--atom-container-lg",
+    value: "1024px",
+    description: "\uD45C\uC900 \uB7A9\uD0D1 \uBDF0, \uCE74\uD0C8\uB85C\uADF8 \uCE74\uB4DC \uADF8\uB9AC\uB4DC",
+    type: "container"
+  },
+  {
+    name: "Container Extra Large (Default Dashboard)",
+    variable: "--atom-container-xl",
+    value: "1280px",
+    description: "\uAE30\uBCF8 \uB370\uC2A4\uD06C\uD1B1 \uC640\uC774\uB4DC \uB808\uC774\uC544\uC6C3 \uBC0F \uB300\uC2DC\uBCF4\uB4DC \uD5C8\uBE0C",
+    type: "container"
+  },
+  {
+    name: "Container 2X Large (Ultra Wide Grid)",
+    variable: "--atom-container-2xl",
+    value: "1536px",
+    description: "\uCD08\uAD11\uD3ED \uACE0\uBC00\uB3C4 \uB370\uC774\uD130 \uADF8\uB9AC\uB4DC, \uD540\uD14C\uD06C \uCC28\uD2B8 \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4",
+    type: "container"
+  },
+  {
+    name: "Container Full (Fluid Fluid 100%)",
+    variable: "--atom-container-full",
+    value: "100%",
+    description: "\uC804\uCCB4 \uD654\uBA74 \uD50C\uB8E8\uC774\uB4DC \uC720\uC5F0 \uBDF0\uC5B4",
+    type: "container"
+  },
+  {
+    name: "Layout Gutter (Mobile / Base)",
+    variable: "--atom-layout-gutter",
+    value: "16px",
+    description: "\uD654\uBA74 \uC88C\uC6B0 \uAE30\uBCF8 \uC548\uC804 \uC5EC\uBC31 (Safe Padding)",
+    type: "gutter"
+  },
+  {
+    name: "Layout Gutter Large (Desktop)",
+    variable: "--atom-layout-gutter-lg",
+    value: "24px",
+    description: "\uB370\uC2A4\uD06C\uD1B1 \uD654\uBA74 \uC88C\uC6B0 \uC548\uC804 \uC5EC\uBC31",
+    type: "gutter"
+  },
+  {
+    name: "Layout Section Gap",
+    variable: "--atom-layout-gap",
+    value: "32px",
+    description: "\uC139\uC158\uACFC \uC139\uC158 \uAC04\uC758 \uAE30\uBCF8 \uB808\uC774\uC544\uC6C3 \uAC04\uACA9",
+    type: "gap"
+  }
+];
 
 // lib/data/components.ts
 var GALLERY_COMPONENTS = [
@@ -1631,6 +1696,159 @@ export function TextareaDemo() {
     vueSnippet: `<template>
   <AtomTextarea v-model="comment" :max-length="300" />
 </template>`
+  },
+  {
+    id: "tree",
+    name: "\uD2B8\uB9AC \uBDF0 (Tree View)",
+    category: "data",
+    source: "shadcn + vs-code",
+    description: "\uD3F4\uB354/\uD30C\uC77C \uD0D0\uC0C9\uAE30, \uC870\uC9C1\uB3C4, \uAD8C\uD55C \uACC4\uCE35 \uB4F1 \uC911\uCCA9\uB41C \uD2B8\uB9AC \uB370\uC774\uD130\uB97C \uC2DC\uAC01\uD654\uD558\uACE0 \uD3BC\uCE68/\uC811\uAE30/\uC120\uD0DD\uC744 \uC9C0\uC6D0\uD558\uB294 \uACE0\uC811\uADFC\uC131 \uD2B8\uB9AC \uCEF4\uD3EC\uB10C\uD2B8",
+    callout: {
+      type: "tip",
+      title: "\uC811\uADFC\uC131(A11y) \uD45C\uC900 \uC900\uC218",
+      text: 'WAI-ARIA Treeview \uD328\uD134\uC744 \uC900\uC218\uD558\uC5EC \uCEE8\uD14C\uC774\uB108\uC5D0 role="tree", \uAC01 \uD589\uC5D0 role="treeitem", \uC790\uC2DD \uBCF4\uC720 \uC2DC aria-expanded\uC640 \uD0A4\uBCF4\uB4DC \uD0D0\uC0C9(Enter/Space)\uC744 \uC9C0\uC6D0\uD569\uB2C8\uB2E4.'
+    },
+    propsSpec: [
+      { name: "data", type: "TreeNode[]", defaultValue: "[]", description: "\uD2B8\uB9AC \uB178\uB4DC \uACC4\uCE35 \uB370\uC774\uD130 \uBC30\uC5F4 ({ id, label, icon, children, disabled })" },
+      { name: "selectedId", type: "string", defaultValue: "undefined", description: "\uD604\uC7AC \uC120\uD0DD\uB41C \uB178\uB4DC\uC758 \uACE0\uC720 ID" },
+      { name: "onSelect", type: "(node: TreeNode) => void", defaultValue: "undefined", description: "\uB178\uB4DC \uC120\uD0DD \uC2DC \uD638\uCD9C\uB418\uB294 \uCF5C\uBC31 \uD568\uC218" },
+      { name: "defaultExpandedIds", type: "string[]", defaultValue: "[]", description: "\uCD08\uAE30\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uD3BC\uCCD0\uB458 \uB178\uB4DC ID \uBAA9\uB85D" },
+      { name: "className", type: "string", defaultValue: "''", description: "\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108\uC5D0 \uC804\uB2EC\uD560 \uCD94\uAC00 CSS \uD074\uB798\uC2A4" }
+    ],
+    useCases: [
+      "IDE \uBC0F \uCF54\uB4DC \uC5D0\uB514\uD130\uC758 \uC18C\uC2A4\uCF54\uB4DC \uD30C\uC77C/\uB514\uB809\uD1A0\uB9AC \uACC4\uCE35 \uD0D0\uC0C9\uAE30",
+      "\uBD80\uC11C \uBC0F \uD300\uC6D0 \uC870\uC9C1\uB3C4, \uC0AC\uB0B4 \uAD8C\uD55C/\uC5ED\uD560(RBAC) \uBD80\uC5EC \uD2B8\uB9AC \uBDF0",
+      "\uB300\uADDC\uBAA8 \uC804\uC790\uC0C1\uAC70\uB798 \uC0C1\uD488 \uCE74\uD14C\uACE0\uB9AC \uB2E4\uB2E8\uACC4 \uBD84\uB958 \uD0D0\uC0C9",
+      "\uBB38\uC11C \uBC0F \uC9C0\uC2DD\uBCA0\uC774\uC2A4(Knowledge Base) \uCC55\uD130/\uC139\uC158 \uBAA9\uCC28 \uB0B4\uBE44\uAC8C\uC774\uC158"
+    ],
+    usagePatterns: [
+      "\uC790\uC2DD \uB178\uB4DC\uAC00 \uC788\uB294 \uBD80\uBAA8 \uB178\uB4DC\uB294 \uC811\uAE30/\uD3BC\uCE58\uAE30 \uD1A0\uAE00(\u25B6)\uC744 \uBA85\uD655\uD788 \uC81C\uACF5\uD558\uACE0, \uD68C\uC804 \uC560\uB2C8\uBA54\uC774\uC158\uC73C\uB85C \uC0C1\uD0DC\uB97C \uC778\uC9C0\uC2DC\uD0B5\uB2C8\uB2E4.",
+      "\uC120\uD0DD\uB41C \uB178\uB4DC\uB294 \uCD0C\uC2A4\uB7EC\uC6B4 \uAD75\uC740 \uB2E8\uBA74 \uBCF4\uB354(side-tab) \uB300\uC2E0 \uC740\uC740\uD55C \uBE0C\uB79C\uB4DC \uD2F4\uD2B8 \uBC30\uACBD\uACFC \uD3F0\uD2B8 \uAD75\uAE30(font-semibold)\uB85C \uC138\uB828\uB418\uAC8C \uD45C\uD604\uD569\uB2C8\uB2E4.",
+      "\uAE4A\uC740 \uC911\uCCA9 \uC2DC\uC5D0\uB294 \uAC00\uC774\uB4DC \uB77C\uC778(dashed border)\uC744 \uAC00\uBCCD\uAC8C \uB450\uC5B4 \uC2DC\uAC01\uC801 \uC704\uACC4\uB97C \uD55C\uB208\uC5D0 \uD30C\uC545\uD560 \uC218 \uC788\uB3C4\uB85D \uB3D5\uC2B5\uB2C8\uB2E4."
+    ],
+    dosAndDonts: [
+      {
+        do: "\uB178\uB4DC\uAC00 \uB9CE\uC744 \uACBD\uC6B0 \uAE30\uBCF8\uC801\uC73C\uB85C 1~2\uB2E8\uACC4\uAE4C\uC9C0\uB9CC \uD3BC\uCE58\uACE0 \uD544\uC694 \uC2DC \uC0AC\uC6A9\uC790\uAC00 \uB4DC\uB9B4\uB2E4\uC6B4\uD558\uB3C4\uB85D \uC124\uACC4\uD569\uB2C8\uB2E4.",
+        dont: "\uC218\uBC31 \uAC1C\uC758 \uB178\uB4DC\uB97C \uD55C \uBC88\uC5D0 \uC804\uBD80 \uD3BC\uCCD0\uC11C \uC138\uB85C \uC2A4\uD06C\uB864\uC744 \uBB34\uD55C\uD788 \uAE38\uC5B4\uC9C0\uAC8C \uBC29\uCE58\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."
+      },
+      {
+        do: "\uD0A4\uBCF4\uB4DC \uC0AC\uC6A9\uC790\uB3C4 \uC811\uADFC\uD560 \uC218 \uC788\uB3C4\uB85D Space\uB098 Enter \uD0A4\uB85C \uD3BC\uCE68/\uC811\uAE30 \uBC0F \uC120\uD0DD\uC744 \uC9C0\uC6D0\uD569\uB2C8\uB2E4.",
+        dont: "\uB9C8\uC6B0\uC2A4 \uB354\uBE14\uD074\uB9AD\uC5D0\uB9CC \uC758\uC874\uD558\uAC70\uB098 \uD3EC\uCEE4\uC2A4 \uC544\uC6C3\uB77C\uC778\uC744 \uC81C\uAC70(outline: none)\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."
+      }
+    ],
+    relatedPatternIds: ["dashboard-overview", "filter-search"],
+    htmlSnippet: '<div class="atom-tree" role="tree">\n  <ul class="atom-tree-list">\n    <li class="atom-tree-item" role="treeitem" aria-expanded="true">\n      <div class="atom-tree-node is-selected">\n        <button class="atom-tree-toggle is-expanded">\u25B6</button>\n        <span class="atom-tree-label">src</span>\n      </div>\n    </li>\n  </ul>\n</div>',
+    reactSnippet: "import { Tree, TreeNode } from 'atomsystem/components/Tree';\nimport { useState } from 'react';\n\nconst treeData: TreeNode[] = [\n  {\n    id: 'src',\n    label: 'src',\n    children: [\n      { id: 'components', label: 'components', children: [{ id: 'Button.tsx', label: 'Button.tsx' }] },\n      { id: 'index.ts', label: 'index.ts' },\n    ],\n  },\n  { id: 'package.json', label: 'package.json' },\n];\n\nexport function TreeDemo() {\n  const [selectedId, setSelectedId] = useState('index.ts');\n  return <Tree data={treeData} selectedId={selectedId} onSelect={(node) => setSelectedId(node.id)} defaultExpandedIds={['src']} />;\n}",
+    vueSnippet: `<template>
+  <AtomTree :data="treeData" v-model:selected="selectedId" :default-expanded="['src']" />
+</template>`
+  },
+  {
+    id: "container",
+    name: "\uCEE8\uD14C\uC774\uB108 (Container)",
+    category: "layout",
+    source: "AtomSystem Universal",
+    description: "\uB514\uC790\uC778 \uD1A0\uD070(--atom-container-*)\uACFC \uC5F0\uB3D9\uB418\uC5B4 \uD654\uBA74 \uD3ED\uC5D0 \uB9DE\uCD98 \uCD5C\uC801 \uB108\uBE44 \uBC0F \uBC18\uC751\uD615 \uC548\uC804 \uC5EC\uBC31(Gutter)\uC744 \uC81C\uACF5\uD558\uB294 \uB798\uD37C \uCEF4\uD3EC\uB10C\uD2B8",
+    callout: {
+      type: "tip",
+      title: "\uD1A0\uD070 \uAE30\uBC18 \uB108\uBE44 \uC81C\uC5B4",
+      text: '\uD558\uB4DC\uCF54\uB529\uB41C max-w-[1200px] \uB300\uC2E0 size="sm"|"md"|"lg"|"xl"|"2xl"|"full"\uC744 \uC0AC\uC6A9\uD558\uC5EC DTCG \uD45C\uC900 \uD1A0\uD070\uACFC 100% \uC5F0\uB3D9\uB429\uB2C8\uB2E4.'
+    },
+    propsSpec: [
+      { name: "size", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'", defaultValue: "'xl'", description: "\uCEE8\uD14C\uC774\uB108 \uCD5C\uB300 \uB108\uBE44 \uADDC\uACA9 \uD1A0\uD070 (--atom-container-*)" },
+      { name: "gutters", type: "boolean", defaultValue: "true", description: "\uD654\uBA74 \uC88C\uC6B0 \uBC18\uC751\uD615 \uC548\uC804 \uD328\uB529 \uC801\uC6A9 \uC5EC\uBD80 (--atom-layout-gutter)" },
+      { name: "center", type: "boolean", defaultValue: "true", description: "\uC911\uC559 \uC815\uB82C(mx-auto) \uC801\uC6A9 \uC5EC\uBD80" },
+      { name: "as", type: "ElementType", defaultValue: "'div'", description: "\uB80C\uB354\uB9C1\uD560 \uC2DC\uB9E8\uD2F1 HTML \uD0DC\uADF8 (div, section, main \uB4F1)" },
+      { name: "className", type: "string", defaultValue: "''", description: "\uCD94\uAC00 \uCEE4\uC2A4\uD140 \uD074\uB798\uC2A4" }
+    ],
+    useCases: [
+      "\uB300\uC2DC\uBCF4\uB4DC \uBA54\uC778 \uBDF0\uC5B4 \uBC0F \uCE74\uD0C8\uB85C\uADF8\uC758 \uCD5C\uB300 \uAC00\uB85C\uD3ED \uD1B5\uC77C",
+      '\uB2E8\uC77C \uD3FC, \uACB0\uC81C \uD398\uC774\uC9C0, \uC778\uC99D \uD654\uBA74\uC758 \uC881\uC740 \uC911\uC559 \uC815\uB82C (size="sm")',
+      '\uBE14\uB85C\uADF8, \uC544\uD2F0\uD074, \uC9C0\uC2DD \uBCA0\uC774\uC2A4\uC758 \uAC00\uB3C5\uC131 \uC911\uC2EC \uCEE8\uD14C\uC774\uB108 (size="md")',
+      '\uCD08\uAD11\uD3ED \uB370\uC774\uD130 \uADF8\uB9AC\uB4DC \uBC0F \uD2B8\uB808\uC774\uB529 \uCC28\uD2B8\uC758 \uC640\uC774\uB4DC \uCEE8\uD14C\uC774\uB108 (size="2xl")'
+    ],
+    usagePatterns: [
+      "\uBAA8\uB4E0 \uD398\uC774\uC9C0 \uBDF0\uC5B4\uC758 \uCD5C\uC0C1\uC704 \uBCF8\uBB38 \uB798\uD37C\uB85C Container\uB97C \uC0AC\uC6A9\uD558\uC5EC \uBAA8\uBC14\uC77C/\uB370\uC2A4\uD06C\uD1B1 \uAC70\uD130\uB97C \uC77C\uAD00\uB418\uAC8C \uC720\uC9C0\uD569\uB2C8\uB2E4.",
+      "\uC911\uCCA9 \uCEE8\uD14C\uC774\uB108\uB97C \uD53C\uD558\uACE0, \uC139\uC158 \uB0B4\uBD80\uC5D0\uC11C\uB294 Grid \uB610\uB294 Stack\uC744 \uC0AC\uC6A9\uD558\uC5EC \uAD6C\uC870\uD654\uD569\uB2C8\uB2E4."
+    ],
+    dosAndDonts: [
+      {
+        do: "\uD398\uC774\uC9C0 \uC131\uACA9\uC5D0 \uB9DE\uB294 size \uD1A0\uD070(sm, md, lg, xl, 2xl)\uC744 \uC9C0\uC815\uD558\uC5EC \uC77C\uAD00\uB41C \uBDF0\uD3EC\uD2B8 \uACC4\uCE35\uC744 \uD615\uC131\uD569\uB2C8\uB2E4.",
+        dont: "\uD398\uC774\uC9C0\uB9C8\uB2E4 \uC784\uC758\uC758 max-w-[1140px], max-w-[1250px] \uB4F1 \uBE44\uD45C\uC900 \uD558\uB4DC\uCF54\uB529 \uAC12\uC744 \uB09C\uB9BD\uC2DC\uD0A4\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."
+      }
+    ],
+    relatedPatternIds: ["dashboard-overview", "checkout-flow"],
+    htmlSnippet: '<div class="atom-container atom-container-xl">\n  <h1>\uCEE8\uD14C\uC774\uB108 \uBCF8\uBB38</h1>\n</div>',
+    reactSnippet: `import { Container } from 'atomsystem/components/Container';
+
+export function ContainerDemo() {
+  return (
+    <Container size="xl">
+      <h1 className="text-xl font-bold">\uB300\uC2DC\uBCF4\uB4DC \uBDF0\uC5B4</h1>
+      <p>\uD1A0\uD070 \uC2DC\uC2A4\uD15C\uACFC \uC5F0\uB3D9\uB41C \uC548\uC804 \uD328\uB529\uACFC \uB108\uBE44\uAC00 \uC790\uB3D9 \uC801\uC6A9\uB429\uB2C8\uB2E4.</p>
+    </Container>
+  );
+}`,
+    vueSnippet: '<template>\n  <div class="atom-container atom-container-xl">\n    <slot />\n  </div>\n</template>'
+  },
+  {
+    id: "layout",
+    name: "\uB808\uC774\uC544\uC6C3 & \uC2A4\uD0DD (Layout & Stack)",
+    category: "layout",
+    source: "AtomSystem Universal",
+    description: "\uC804\uCCB4 \uD398\uC774\uC9C0 \uC258(Header, Sidebar, Content, Footer) \uBC0F \uC2A4\uD398\uC774\uC2F1 \uD1A0\uD070 \uAE30\uBC18\uC758 \uC120\uD615/\uACA9\uC790 \uC870\uB9BD \uB3C4\uAD6C(Stack, Grid, Section)",
+    callout: {
+      type: "tip",
+      title: "\uB808\uACE0 \uC870\uB9BD\uC758 \uBF08\uB300",
+      text: "Layout.Header, Layout.Sidebar, Layout.Content, Layout.Stack, Layout.Grid\uB97C \uD65C\uC6A9\uD558\uC5EC 100% \uD1A0\uD070\uD654\uB41C \uB808\uC774\uC544\uC6C3\uC744 \uAD6C\uCD95\uD569\uB2C8\uB2E4."
+    },
+    propsSpec: [
+      { name: "direction", type: "'vertical' | 'horizontal'", defaultValue: "'vertical'", description: "Stack \uBC30\uCE58 \uBC29\uD5A5" },
+      { name: "gap", type: "'1' | '2' | '3' | '4' | '6' | '8' | '12'", defaultValue: "'4'", description: "\uC2A4\uD398\uC774\uC2F1 \uD1A0\uD070 \uB2E8\uC704 \uAC04\uACA9 (--atom-space-*)" },
+      { name: "align", type: "'start' | 'center' | 'end' | 'stretch'", defaultValue: "'stretch'", description: "\uAD50\uCC28\uCD95 \uC815\uB82C" },
+      { name: "justify", type: "'start' | 'center' | 'end' | 'between' | 'around'", defaultValue: "'start'", description: "\uC8FC\uCD95 \uC815\uB82C" },
+      { name: "cols", type: "1 | 2 | 3 | 4 | 6 | 12", defaultValue: "3", description: "Grid \uCEEC\uB7FC \uC218" }
+    ],
+    useCases: [
+      "\uB300\uC2DC\uBCF4\uB4DC \uAE00\uB85C\uBC8C \uC258 (\uC0C1\uB2E8 \uB124\uBE44\uBC14 + \uC88C\uCE21 \uC0AC\uC774\uB4DC\uBC14 + \uBA54\uC778 \uBCF8\uBB38)",
+      '\uD3FC \uD544\uB4DC \uAC04\uC758 \uC218\uC9C1 \uC2A4\uD0DD \uC815\uB82C (gap="4")',
+      '\uBC84\uD2BC \uADF8\uB8F9 \uBC0F \uC561\uC158 \uD234\uBC14\uC758 \uC218\uD3C9 \uC2A4\uD0DD \uC815\uB82C (direction="horizontal", gap="2")',
+      '\uBC18\uC751\uD615 \uCE74\uB4DC \uB9AC\uC2A4\uD2B8\uC758 3\uC5F4 \uADF8\uB9AC\uB4DC \uBC30\uCE58 (Grid cols={3} gap="4")'
+    ],
+    usagePatterns: [
+      "\uC784\uC758\uC758 margin-bottom, padding-top \uB300\uC2E0 Stack\uC758 gap \uC18D\uC131\uC744 \uD1B5\uD574 \uD1A0\uD070 \uAE30\uBC18 \uC77C\uAD00\uB41C \uB9AC\uB4EC\uC744 \uC720\uC9C0\uD569\uB2C8\uB2E4.",
+      "\uCE74\uB4DC \uBAA9\uB85D\uC5D0\uB294 Grid \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC0AC\uC6A9\uD558\uC5EC \uBAA8\uBC14\uC77C(1\uC5F4) -> \uD0DC\uBE14\uB9BF(2\uC5F4) -> \uB370\uC2A4\uD06C\uD1B1(3\uC5F4) \uBC18\uC751\uD615 \uC804\uD658\uC744 \uBCF4\uC7A5\uD569\uB2C8\uB2E4."
+    ],
+    dosAndDonts: [
+      {
+        do: 'Stack\uACFC Grid\uC5D0 \uC815\uC758\uB41C \uD1A0\uD070 gap("2", "4", "6", "8")\uC744 \uC0AC\uC6A9\uD558\uC5EC \uC5EC\uBC31\uC744 \uCCB4\uACC4\uD654\uD569\uB2C8\uB2E4.',
+        dont: "\uC790\uC2DD \uC5D8\uB9AC\uBA3C\uD2B8\uB9C8\uB2E4 \uC81C\uAC01\uAC01 mb-[17px], mt-[23px] \uB4F1 \uBD88\uADDC\uCE59\uD55C \uC778\uB77C\uC778 \uB9C8\uC9C4\uC744 \uBD80\uC5EC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."
+      }
+    ],
+    relatedPatternIds: ["dashboard-overview", "filter-search"],
+    htmlSnippet: '<div class="atom-layout-shell">\n  <header class="atom-layout-header">\uD5E4\uB354</header>\n  <main class="atom-layout-content">\n    <div class="atom-stack-v atom-gap-4">\uC2A4\uD0DD \uBCF8\uBB38</div>\n  </main>\n</div>',
+    reactSnippet: `import { Layout, Container, Stack, Grid } from 'atomsystem/components/Layout';
+
+export function LayoutDemo() {
+  return (
+    <Layout>
+      <Layout.Header>\uD5E4\uB354</Layout.Header>
+      <Layout.Content>
+        <Container size="xl">
+          <Stack gap="6">
+            <h1 className="text-2xl font-bold">\uB300\uC2DC\uBCF4\uB4DC</h1>
+            <Grid cols={3} gap="4">
+              <div>\uCE74\uB4DC 1</div>
+              <div>\uCE74\uB4DC 2</div>
+              <div>\uCE74\uB4DC 3</div>
+            </Grid>
+          </Stack>
+        </Container>
+      </Layout.Content>
+    </Layout>
+  );
+}`,
+    vueSnippet: '<template>\n  <div class="atom-layout-shell">\n    <slot />\n  </div>\n</template>'
   }
 ];
 
@@ -8135,7 +8353,8 @@ var DEFAULT_THEME_CONFIG = {
       letterSpacing: "0.01em"
     }
   },
-  borderRadius: "14px"
+  borderRadius: "14px",
+  selectedIcon: "Sparkles"
 };
 var COLOR_PRESETS = [
   {
@@ -8329,11 +8548,27 @@ ${fontImportCSS}/* [AtomDesignToken] Live Injected Theme Variables */
   --atom-color-primary: ${color.primary};
   --atom-color-primary-hover: ${color.primaryHover};
   --atom-color-primary-subtle: ${color.primaryLight};
+  --atom-color-bg: ${color.bgPrimary};
+  --atom-color-surface: ${color.bgSecondary};
+  --atom-color-text: ${color.textPrimary};
+  --atom-color-text-secondary: ${color.textSecondary};
+  --atom-color-border: ${color.borderSubtle};
   --atom-status-success: ${color.statusSuccess};
   --atom-status-danger: ${color.statusDanger};
   --atom-status-warning: ${color.statusWarning};
   --atom-radius: ${borderRadius};
 
+  /* All Atom UI Component CSS Variable Mappings */
+  --atom-btn-radius: ${borderRadius};
+  --atom-input-radius: ${borderRadius};
+  --atom-card-radius: ${borderRadius};
+  --atom-card-bg: ${color.bgSecondary};
+  --atom-card-border: ${color.borderSubtle};
+  --atom-tree-bg: ${color.bgSecondary};
+  --atom-tree-border: ${color.borderSubtle};
+  --atom-tree-selected-bg: ${color.primaryLight};
+  --atom-tree-selected-text: ${color.primary};
+
   /* Typography Variables */
   --atom-font-h1-size: ${typography.h1.fontSize}px;
   --atom-font-h1-lh: ${typography.h1.lineHeight};
@@ -8462,6 +8697,33 @@ html.dark {
   --color-neutral-850: ${color.bgSecondary};
 }
 
+/* Global Component Surface Overrides */
+.atom-card, .atom-modal, .atom-sheet, .atom-tree, .atom-table, .atom-input, .atom-button {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
+}
+
+.atom-button-primary {
+  background-color: ${color.primary} !important;
+  color: #ffffff !important;
+  border-radius: ${borderRadius} !important;
+}
+
+.atom-button-primary:hover {
+  background-color: ${color.primaryHover} !important;
+}
+
+.atom-card {
+  background-color: ${color.bgSecondary} !important;
+  border-color: ${color.borderSubtle} !important;
+  border-radius: ${borderRadius} !important;
+}
+
+.atom-tree-node.is-selected {
+  background-color: ${color.primaryLight} !important;
+  color: ${color.primary} !important;
+  border-radius: ${borderRadius} !important;
+}
+
 html.dark .bg-white:not([data-keep-white]):not([role="switch"]):not([aria-hidden="true"]) {
   background-color: ${color.bgSecondary} !important;
 }
@@ -8645,7 +8907,7 @@ function cn(...inputs) {
 
 // src/index.ts
 var ATOM_UI_CSS_PATH = "atomsystem/css/atom-ui.css";
-var ATOM_VERSION = "0.4.1";
+var ATOM_VERSION = "0.5.0";
 var ATOM_LIB_NAME = "atomsystem";
 
 exports.ATOM_LIB_NAME = ATOM_LIB_NAME;
@@ -8659,6 +8921,7 @@ exports.COLOR_PRESETS = COLOR_PRESETS;
 exports.DEFAULT_THEME_CONFIG = DEFAULT_THEME_CONFIG;
 exports.FONT_FAMILY_PRESETS = FONT_FAMILY_PRESETS;
 exports.GALLERY_COMPONENTS = GALLERY_COMPONENTS;
+exports.LAYOUT_TOKENS = LAYOUT_TOKENS;
 exports.PATTERNS_COLLECTION = PATTERNS_COLLECTION;
 exports.RADIUS_TOKENS = RADIUS_TOKENS;
 exports.SHADOW_TOKENS = SHADOW_TOKENS;