atomsystem 0.4.1 → 0.4.3

package/components/blocks/SliderShowcaseBlock.tsx

@@ -0,0 +1,336 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Users,
+  HardDrive,
+  Cpu,
+  ChevronLeft,
+  ChevronRight,
+  CheckCircle2,
+  Sparkles,
+  SlidersHorizontal,
+  Layers,
+} from 'lucide-react';
+
+interface ShowcaseSlide {
+  id: number;
+  tag: string;
+  title: string;
+  subtitle: string;
+  gradient: string;
+  stats: string;
+}
+
+const SLIDES: ShowcaseSlide[] = [
+  {
+    id: 1,
+    tag: 'W3C DTCG Engine',
+    title: '디자인 토큰 컴파일러',
+    subtitle: 'JSON 명세로부터 Tailwind, CSS Variables, SCSS 코드를 0KB 런타임으로 즉시 변환합니다.',
+    gradient: 'from-blue-600/20 via-indigo-600/10 to-transparent',
+    stats: '빌드 속도 12ms',
+  },
+  {
+    id: 2,
+    tag: 'Universal A11y',
+    title: 'WCAG 2.1 AAA 고대비 컬러',
+    subtitle: '명도 대비 7:1을 항상 충족하는 색상 스케일 매핑을 자동 보증합니다.',
+    gradient: 'from-purple-600/20 via-pink-600/10 to-transparent',
+    stats: '접근성 통과율 100%',
+  },
+  {
+    id: 3,
+    tag: 'Zero-Runtime',
+    title: '크로스 프레임워크 호환성',
+    subtitle: 'React, Vue, Svelte, Angular, 그리고 순수 바닐라 HTML까지 단 하나의 코드로 동작합니다.',
+    gradient: 'from-emerald-600/20 via-teal-600/10 to-transparent',
+    stats: '런타임 오버헤드 0KB',
+  },
+];
+
+export function SliderShowcaseBlock() {
+  const [activeTab, setActiveTab] = useState<'calculator' | 'carousel'>('calculator');
+
+  // Calculator State
+  const [teamMembers, setTeamMembers] = useState<number>(18);
+  const [storageGb, setStorageGb] = useState<number>(350);
+  const [computeUnits, setComputeUnits] = useState<number>(4);
+  const [isAnnualBilling, setIsAnnualBilling] = useState<boolean>(true);
+
+  // Carousel State
+  const [currentSlide, setCurrentSlide] = useState<number>(0);
+
+  // Dynamic Calculation
+  const basePrice = teamMembers * 9 + Math.round(storageGb * 0.12) + computeUnits * 35;
+  const discountMultiplier = isAnnualBilling ? 0.8 : 1.0;
+  const finalPrice = Math.round(basePrice * discountMultiplier);
+  const annualSavings = Math.round(basePrice * 12 * 0.2);
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev === 0 ? SLIDES.length - 1 : prev - 1));
+  };
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev === SLIDES.length - 1 ? 0 : prev + 1));
+  };
+
+  return (
+    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm p-5 sm:p-6 transition-colors">
+      {/* Header and Switcher */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-5 border-b border-(--border-subtle)">
+        <div>
+          <span className="text-[11px] font-semibold text-(--accent-primary) uppercase tracking-wider">
+            인터랙티브 슬라이더 모듈
+          </span>
+          <h3 className="text-lg font-bold text-(--text-primary) mt-0.5">
+            {activeTab === 'calculator' ? '실시간 사용량 & 비용 견적 시뮬레이터' : '피처 하이라이트 인터랙티브 캐러셀'}
+          </h3>
+        </div>
+
+        <div className="flex bg-(--bg-secondary) p-1 rounded-xl border border-(--border-subtle) text-xs">
+          <button
+            onClick={() => setActiveTab('calculator')}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-semibold transition-all ${
+              activeTab === 'calculator'
+                ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            <SlidersHorizontal className="w-3.5 h-3.5" />
+            <span>비용 슬라이더</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('carousel')}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-semibold transition-all ${
+              activeTab === 'carousel'
+                ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            <Layers className="w-3.5 h-3.5" />
+            <span>쇼케이스 캐러셀</span>
+          </button>
+        </div>
+      </div>
+
+      {activeTab === 'calculator' ? (
+        /* Tab 1: Interactive Cost Calculator Slider */
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 pt-6 items-center">
+          {/* Left: Sliders Controls (7 Cols) */}
+          <div className="lg:col-span-7 space-y-6">
+            {/* Slider 1: Team Members */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center text-xs">
+                <span className="font-semibold text-(--text-primary) flex items-center gap-1.5">
+                  <Users className="w-4 h-4 text-(--accent-primary)" />
+                  활성 팀원 수 (Team Members)
+                </span>
+                <span className="font-mono font-bold text-sm text-(--accent-primary) bg-(--accent-primary)/10 px-2 py-0.5 rounded-md">
+                  {teamMembers} 명
+                </span>
+              </div>
+              <input
+                type="range"
+                min="1"
+                max="100"
+                value={teamMembers}
+                onChange={(e) => setTeamMembers(Number(e.target.value))}
+                className="w-full h-2 bg-(--bg-secondary) rounded-lg appearance-none cursor-pointer accent-(--accent-primary)"
+              />
+              <div className="flex justify-between text-[10px] text-(--text-muted)">
+                <span>1명 (Solo)</span>
+                <span>50명 (Team)</span>
+                <span>100명 (Enterprise)</span>
+              </div>
+            </div>
+
+            {/* Slider 2: Storage */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center text-xs">
+                <span className="font-semibold text-(--text-primary) flex items-center gap-1.5">
+                  <HardDrive className="w-4 h-4 text-emerald-500" />
+                  클라우드 스토리지 용량 (Storage)
+                </span>
+                <span className="font-mono font-bold text-sm text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-md">
+                  {storageGb} GB
+                </span>
+              </div>
+              <input
+                type="range"
+                min="10"
+                max="1000"
+                step="10"
+                value={storageGb}
+                onChange={(e) => setStorageGb(Number(e.target.value))}
+                className="w-full h-2 bg-(--bg-secondary) rounded-lg appearance-none cursor-pointer accent-emerald-500"
+              />
+              <div className="flex justify-between text-[10px] text-(--text-muted)">
+                <span>10 GB</span>
+                <span>500 GB</span>
+                <span>1,000 GB (1TB)</span>
+              </div>
+            </div>
+
+            {/* Slider 3: Compute */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center text-xs">
+                <span className="font-semibold text-(--text-primary) flex items-center gap-1.5">
+                  <Cpu className="w-4 h-4 text-purple-500" />
+                  병렬 빌드 & 연산 인스턴스 (Compute Units)
+                </span>
+                <span className="font-mono font-bold text-sm text-purple-600 dark:text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded-md">
+                  {computeUnits} CU
+                </span>
+              </div>
+              <input
+                type="range"
+                min="1"
+                max="16"
+                step="1"
+                value={computeUnits}
+                onChange={(e) => setComputeUnits(Number(e.target.value))}
+                className="w-full h-2 bg-(--bg-secondary) rounded-lg appearance-none cursor-pointer accent-purple-500"
+              />
+              <div className="flex justify-between text-[10px] text-(--text-muted)">
+                <span>1 CU</span>
+                <span>8 CU</span>
+                <span>16 CU (Ultra)</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Right: Price Receipt Card (5 Cols) */}
+          <div className="lg:col-span-5 p-5 rounded-2xl bg-(--bg-secondary) border border-(--border-strong) flex flex-col justify-between space-y-4">
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-xs font-semibold text-(--text-secondary)">결제 주기 선택</span>
+                <div className="flex items-center gap-2">
+                  <span className={`text-[11px] ${!isAnnualBilling ? 'font-bold text-(--text-primary)' : 'text-(--text-muted)'}`}>월간</span>
+                  <button
+                    onClick={() => setIsAnnualBilling(!isAnnualBilling)}
+                    aria-label="결제 주기 토글"
+                    className="w-10 h-5 rounded-full bg-(--accent-primary) p-0.5 flex items-center transition-colors"
+                  >
+                    <div
+                      className={`w-4 h-4 rounded-full bg-white transition-transform ${
+                        isAnnualBilling ? 'translate-x-5' : 'translate-x-0'
+                      }`}
+                    />
+                  </button>
+                  <span className={`text-[11px] ${isAnnualBilling ? 'font-bold text-(--accent-primary)' : 'text-(--text-muted)'}`}>연간 (-20%)</span>
+                </div>
+              </div>
+
+              <div className="space-y-2 py-3 border-y border-(--border-subtle) text-xs">
+                <div className="flex justify-between text-(--text-secondary)">
+                  <span>팀원 라이선스 ({teamMembers}명)</span>
+                  <span className="font-medium text-(--text-primary)">₩{(teamMembers * 12000).toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-(--text-secondary)">
+                  <span>스토리지 ({storageGb}GB)</span>
+                  <span className="font-medium text-(--text-primary)">₩{(storageGb * 150).toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-(--text-secondary)">
+                  <span>연산 인스턴스 ({computeUnits}CU)</span>
+                  <span className="font-medium text-(--text-primary)">₩{(computeUnits * 45000).toLocaleString()}</span>
+                </div>
+                {isAnnualBilling && (
+                  <div className="flex justify-between text-emerald-600 dark:text-emerald-400 font-semibold">
+                    <span>연간 결제 프로모션 할인</span>
+                    <span>-20% 적용</span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div>
+              <div className="flex items-baseline justify-between mb-3">
+                <span className="text-xs text-(--text-muted)">월 예상 결제 금액</span>
+                <div className="text-right">
+                  <span className="text-2xl sm:text-3xl font-black text-(--text-primary)">
+                    \${finalPrice}
+                  </span>
+                  <span className="text-xs text-(--text-muted)"> /월</span>
+                </div>
+              </div>
+
+              {isAnnualBilling && (
+                <div className="text-[11px] text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-3 py-1.5 rounded-lg mb-3 flex items-center justify-between">
+                  <span>연간 결제 시 연간 절감액</span>
+                  <span className="font-bold">\${annualSavings} 절약</span>
+                </div>
+              )}
+
+              <button className="w-full py-2.5 rounded-xl bg-(--accent-primary) hover:bg-(--accent-hover) text-white font-semibold text-xs shadow-xs transition-colors">
+                이 견적으로 즉시 시작하기
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Tab 2: Carousel Showcase */
+        <div className="pt-6">
+          <div className="relative overflow-hidden rounded-2xl border border-(--border-subtle) bg-(--bg-secondary)/40 p-6 sm:p-10 min-h-[280px] flex flex-col justify-between">
+            {/* Background gradient decorative */}
+            <div
+              className={`absolute inset-0 bg-gradient-to-br ${SLIDES[currentSlide].gradient} pointer-events-none transition-all duration-500`}
+            />
+
+            <div className="relative z-10 max-w-xl">
+              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-(--accent-primary)/15 text-(--accent-primary) mb-3">
+                <Sparkles className="w-3.5 h-3.5" />
+                {SLIDES[currentSlide].tag}
+              </span>
+              <h3 className="text-xl sm:text-2xl font-extrabold text-(--text-primary) tracking-tight mb-2">
+                {SLIDES[currentSlide].title}
+              </h3>
+              <p className="text-xs sm:text-sm text-(--text-secondary) leading-relaxed">
+                {SLIDES[currentSlide].subtitle}
+              </p>
+            </div>
+
+            <div className="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-6 border-t border-(--border-subtle) mt-6">
+              <div className="flex items-center gap-2 text-xs font-semibold text-(--text-primary)">
+                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                <span>검증 메트릭: {SLIDES[currentSlide].stats}</span>
+              </div>
+
+              {/* Navigation Controls */}
+              <div className="flex items-center gap-2">
+                {/* Dots */}
+                <div className="flex items-center gap-1.5 mr-2">
+                  {SLIDES.map((_, i) => (
+                    <button
+                      key={i}
+                      onClick={() => setCurrentSlide(i)}
+                      aria-label={`슬라이드 ${i + 1}로 이동`}
+                      className={`h-1.5 rounded-full transition-all ${
+                        currentSlide === i ? 'w-6 bg-(--accent-primary)' : 'w-2 bg-(--border-strong)'
+                      }`}
+                    />
+                  ))}
+                </div>
+
+                <button
+                  onClick={prevSlide}
+                  aria-label="이전 슬라이드"
+                  className="p-2 rounded-lg bg-(--bg-primary) hover:bg-(--border-subtle) text-(--text-primary) border border-(--border-subtle) transition-colors"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={nextSlide}
+                  aria-label="다음 슬라이드"
+                  className="p-2 rounded-lg bg-(--bg-primary) hover:bg-(--border-subtle) text-(--text-primary) border border-(--border-subtle) transition-colors"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/blocks/index.ts

@@ -0,0 +1,8 @@
+export * from './RealtimeChartBlock';
+export * from './InteractiveChatBlock';
+export * from './CardListBlock';
+export * from './SliderShowcaseBlock';
+export * from './PricingPlanBlock';
+export * from './MetricStatsBlock';
+export * from './FileExplorerBlock';
+export * from './BlockViewerCard';

package/components/ui/Tree.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  children?: TreeNode[];
+  disabled?: boolean;
+}
+
+export interface TreeProps {
+  data: TreeNode[];
+  selectedId?: string;
+  onSelect?: (node: TreeNode) => void;
+  defaultExpandedIds?: string[];
+  className?: string;
+}
+
+export const Tree: React.FC<TreeProps> = ({
+  data,
+  selectedId,
+  onSelect,
+  defaultExpandedIds = [],
+  className = '',
+}) => {
+  const [expandedIds, setExpandedIds] = useState<string[]>(defaultExpandedIds);
+  const [internalSelectedId, setInternalSelectedId] = useState<string | undefined>(selectedId);
+
+  const activeSelectedId = selectedId !== undefined ? selectedId : internalSelectedId;
+
+  const toggleExpand = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedIds((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const handleSelect = (node: TreeNode) => {
+    if (node.disabled) return;
+    setInternalSelectedId(node.id);
+    if (onSelect) {
+      onSelect(node);
+    }
+  };
+
+  const renderNodes = (nodes: TreeNode[]) => {
+    return (
+      <ul className="atom-tree-list" role="group">
+        {nodes.map((node) => {
+          const hasChildren = Boolean(node.children && node.children.length > 0);
+          const isExpanded = expandedIds.includes(node.id);
+          const isSelected = activeSelectedId === node.id;
+
+          return (
+            <li
+              key={node.id}
+              className="atom-tree-item"
+              role="treeitem"
+              aria-expanded={hasChildren ? isExpanded : undefined}
+              aria-selected={isSelected}
+              aria-disabled={node.disabled}
+            >
+              <div
+                className={`atom-tree-node ${isSelected ? 'is-selected' : ''} ${
+                  node.disabled ? 'is-disabled' : ''
+                }`}
+                onClick={() => {
+                  if (hasChildren && !isExpanded) {
+                    setExpandedIds((prev) => [...prev, node.id]);
+                  }
+                  handleSelect(node);
+                }}
+                tabIndex={node.disabled ? -1 : 0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    if (hasChildren) {
+                      setExpandedIds((prev) =>
+                        prev.includes(node.id)
+                          ? prev.filter((item) => item !== node.id)
+                          : [...prev, node.id]
+                      );
+                    }
+                    handleSelect(node);
+                  }
+                }}
+              >
+                {hasChildren ? (
+                  <button
+                    type="button"
+                    className={`atom-tree-toggle ${isExpanded ? 'is-expanded' : ''}`}
+                    onClick={(e) => toggleExpand(node.id, e)}
+                    aria-label={isExpanded ? '접기' : '펼치기'}
+                    tabIndex={-1}
+                  >
+                    ▶
+                  </button>
+                ) : (
+                  <span className="atom-tree-toggle-spacer" aria-hidden="true" />
+                )}
+
+                {node.icon && <span className="atom-tree-icon">{node.icon}</span>}
+                <span className="atom-tree-label">{node.label}</span>
+              </div>
+
+              {hasChildren && isExpanded && (
+                <div className="atom-tree-children">{renderNodes(node.children!)}</div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  return (
+    <div className={`atom-tree ${className}`} role="tree">
+      {renderNodes(data)}
+    </div>
+  );
+};

package/components/ui/index.ts

@@ -16,3 +16,4 @@ export * from './Skeleton';
 export * from './Breadcrumb';
 export * from './Separator';
 export * from './Textarea';
+export * from './Tree';

package/css/atom-ui.css

@@ -466,13 +466,16 @@
   color: var(--atom-text-primary);
 }
 .atom-toast-success {
-  border-left: 4px solid #10b981;
+  border-color: rgba(16, 185, 129, 0.35);
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
 }
 .atom-toast-error {
-  border-left: 4px solid #f43f5e;
+  border-color: rgba(244, 63, 94, 0.35);
+  box-shadow: 0 4px 20px rgba(244, 63, 94, 0.08);
 }
 .atom-toast-info {
-  border-left: 4px solid var(--atom-primary);
+  border-color: rgba(49, 130, 246, 0.35);
+  box-shadow: 0 4px 20px rgba(49, 130, 246, 0.08);
 }
 
 /* Pagination */
@@ -724,3 +727,100 @@
   font-size: 0.75rem;
   color: var(--atom-text-muted);
 }
+
+/* Tree Component */
+.atom-tree {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--atom-text-primary);
+  user-select: none;
+}
+.atom-tree-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.atom-tree-item {
+  position: relative;
+}
+.atom-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border-radius: var(--atom-radius-sm);
+  border: 1px solid transparent;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.atom-tree-node:hover {
+  background-color: var(--atom-bg-secondary);
+}
+.atom-tree-node:focus-visible {
+  outline: 2px solid var(--atom-primary);
+  outline-offset: -1px;
+}
+.atom-tree-node.is-selected {
+  background-color: var(--atom-primary-light);
+  color: var(--atom-primary);
+  font-weight: 600;
+}
+.atom-tree-node.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.atom-tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--atom-text-muted);
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
+  shrink: 0;
+}
+.atom-tree-toggle:hover {
+  color: var(--atom-text-primary);
+}
+.atom-tree-toggle.is-expanded {
+  transform: rotate(90deg);
+}
+.atom-tree-toggle-spacer {
+  width: 1rem;
+  height: 1rem;
+  shrink: 0;
+}
+.atom-tree-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: var(--atom-text-muted);
+  shrink: 0;
+}
+.atom-tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.atom-tree-children {
+  padding-left: 1.25rem;
+  border-left: 1px dashed var(--atom-border-subtle);
+  margin-left: 0.5rem;
+}

package/dist/cli.cjs

@@ -82,7 +82,7 @@ function showVersion() {
     const pkg = JSON.parse(fs__default.default.readFileSync(pkgPath, "utf-8"));
     console.log(`atomsystem v${pkg.version}`);
   } else {
-    console.log("atomsystem v0.4.1");
+    console.log("atomsystem v0.4.3");
   }
 }
 switch (command) {

package/dist/cli.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cli.ts"],"names":["path","fileURLToPath","fs"],"mappings":"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","file":"cli.cjs","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/cli.ts"],"names":["path","fileURLToPath","fs"],"mappings":"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","file":"cli.cjs","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.3');\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"]}

package/dist/cli.js

@@ -74,7 +74,7 @@ function showVersion() {
     const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
     console.log(`atomsystem v${pkg.version}`);
   } else {
-    console.log("atomsystem v0.4.1");
+    console.log("atomsystem v0.4.3");
   }
 }
 switch (command) {