vibe-spec-overlay 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -1 +1,93 @@
-export {}
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/**
+ * 기능 스펙을 정의하는 핵심 인터페이스입니다.
+ * UI의 특정 부분에 대한 요구사항, 입력/출력, 예외 케이스 등을 포함합니다.
+ */
+export declare interface FeatureSpec {
+    /** 스펙의 고유 식별자 (예: 'user-profile-01') */
+    id: string;
+    /** 부모 스펙의 ID. 스펙 체인(계층 구조)을 형성할 때 사용합니다. */
+    parentId?: string;
+    /** 사용자 또는 개발자에게 표시될 기능의 제목 */
+    title: string;
+    /** 기능에 대한 상세 설명 */
+    description: string;
+    /** 해당 기능에 필요한 입력값 목록 (예: ['username', 'password']) */
+    inputs?: string[];
+    /** 해당 기능의 결과로 발생하는 출력값 또는 상태 변화 (예: ['login-success', 'auth-token']) */
+    outputs?: string[];
+    /** 데이터 유효성 검사 규칙 (예: ['비밀번호 8자 이상', '특수문자 포함']) */
+    validation?: string[];
+    /** 발생 가능한 예외 상황 또는 엣지 케이스 (예: ['네트워크 단절', '중복 아이디']) */
+    edgeCases?: string[];
+    /** 기능의 우선순위 */
+    priority?: Priority;
+}
+
+/**
+ * 기능의 중요도 또는 우선순위를 나타냅니다.
+ * AI가 UI 요소를 렌더링하거나 필터링할 때 참고할 수 있습니다.
+ */
+export declare type Priority = 'low' | 'medium' | 'high';
+
+/**
+ * 특정 UI 요소에 스펙 정보를 시각적으로 연결하는 래퍼 컴포넌트입니다.
+ * 마우스 호버 시 외곽선과 툴팁을 표시하고, 클릭 시 상세 스펙 정보를 Drawer로 엽니다.
+ *
+ * @example
+ * <SpecAnchor spec={{ id: 'submit-01', title: '전송 버튼', description: '데이터를 서버로 전송합니다.' }}>
+ *   <Button>저장</Button>
+ * </SpecAnchor>
+ */
+export declare function SpecAnchor({ spec, children }: SpecAnchorProps): JSX.Element;
+
+/**
+ * SpecAnchor의 Props 인터페이스입니다.
+ */
+declare interface SpecAnchorProps extends PropsWithChildren {
+    /**
+     * 앵커가 나타내는 기능의 스펙 정보입니다.
+     * 이 정보를 기반으로 툴팁과 상세 패널이 구성됩니다.
+     */
+    spec: FeatureSpec;
+}
+
+export declare function SpecPanel(): JSX.Element;
+
+/**
+ * 프로젝트 전체 또는 특정 범위 내의 스펙 상태를 관리하는 컨텍스트 프로바이더입니다.
+ * 활성화 여부, 현재 선택된 스펙, 호버 상태 등을 관리합니다.
+ *
+ * @example
+ * <SpecProvider specsMap={{ 'login-btn': { title: '로그인 버튼', ... } }}>
+ *   <App />
+ * </SpecProvider>
+ */
+export declare function SpecProvider({ children, specsMap }: SpecProviderProps): JSX.Element;
+
+/**
+ * SpecProvider의 Props 인터페이스입니다.
+ */
+declare interface SpecProviderProps extends PropsWithChildren {
+    /**
+     * 스펙 ID를 키로, FeatureSpec 객체를 값으로 가지는 매핑 정보입니다.
+     * SpecAnchor에서 전달받은 스펙 정보를 보완하거나 계층 구조를 관리할 때 사용됩니다.
+     */
+    specsMap?: Record<string, FeatureSpec>;
+}
+
+declare interface SpecState {
+    enabled: boolean;
+    toggleEnabled: () => void;
+    selected?: FeatureSpec;
+    setSelected: (spec?: FeatureSpec) => void;
+    specsMap: Record<string, FeatureSpec>;
+    hoveredSpecId: string | null;
+    setHoveredSpecId: (id: string | null) => void;
+}
+
+export declare function useSpecContext(): SpecState;
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-spec-overlay",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React/MUI 기반의 UI 스펙 오버레이 라이브러리입니다. 개발 단계에서 UI 컴포넌트 위에 요구사항, 입력/출력, 예외 케이스 등의 스펙 정보를 시각적으로 오버레이하여 개발자와 디자이너 간의 커뮤니케이션을 돕습니다.",
   "keywords": [
     "react",