@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md

@@ -1,148 +1,148 @@
----
-title: Define Generic Context Interface for Dependency Injection
-impact: HIGH
-impactDescription: Enables dependency-injectable state across use-cases
-tags: composition, context, state, typescript, dependency-injection
----
-
-## Define Generic Context Interface for Dependency Injection
-
-**Impact: HIGH (Enables dependency-injectable state across use-cases)**
-
-컴포넌트 context를 위한 제네릭 인터페이스를 `state`, `actions`, `meta` 세 부분으로 정의하세요. 어떤 Provider든 이 인터페이스를 구현할 수 있어, 같은 UI 컴포넌트가 완전히 다른 상태 구현과 작동할 수 있습니다.
-
-**핵심 원칙:** Lift state, compose internals, make state dependency-injectable.
-
-**Incorrect (특정 상태 구현에 결합):**
-
-```tsx
-// ❌ 특정 훅에 강하게 결합
-function ComposerInput() {
-  const { input, setInput } = useChannelComposerState();
-  return <TextInput value={input} onChangeText={setInput} />;
-}
-```
-
-**Correct (제네릭 인터페이스로 의존성 주입):**
-
-```tsx
-// ✅ 어떤 Provider든 구현할 수 있는 제네릭 인터페이스
-interface ComposerState {
-  input: string;
-  attachments: Attachment[];
-  isSubmitting: boolean;
-}
-
-interface ComposerActions {
-  update: (updater: (state: ComposerState) => ComposerState) => void;
-  submit: () => void;
-  addAttachment: (file: File) => void;
-}
-
-interface ComposerMeta {
-  inputRef: React.RefObject<HTMLTextAreaElement>;
-  maxLength?: number;
-}
-
-interface ComposerContextValue {
-  state: ComposerState;
-  actions: ComposerActions;
-  meta: ComposerMeta;
-}
-
-const ComposerContext = createContext<ComposerContextValue | null>(null);
-```
-
-**UI 컴포넌트는 인터페이스만 소비:**
-
-```tsx
-function ComposerInput() {
-  const {
-    state,
-    actions: { update },
-    meta,
-  } = use(ComposerContext)!;
-
-  // 이 컴포넌트는 인터페이스를 구현한 어떤 Provider와도 작동
-  return (
-    <textarea
-      ref={meta.inputRef}
-      value={state.input}
-      maxLength={meta.maxLength}
-      onChange={(e) => update((s) => ({ ...s, input: e.target.value }))}
-    />
-  );
-}
-```
-
-**서로 다른 Provider가 같은 인터페이스 구현:**
-
-```tsx
-// Provider A: 임시 폼을 위한 로컬 상태
-function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const submit = useForwardMessage();
-
-  return (
-    <ComposerContext value={{
-      state,
-      actions: { update: setState, submit, addAttachment: ... },
-      meta: { inputRef },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-
-// Provider B: 채널을 위한 전역 동기화 상태
-function ChannelProvider({ channelId, children }: Props) {
-  const { state, update, submit } = useGlobalChannel(channelId);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  return (
-    <ComposerContext value={{
-      state,
-      actions: { update, submit, addAttachment: ... },
-      meta: { inputRef, maxLength: 2000 },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-```
-
-**같은 UI가 두 Provider와 모두 작동:**
-
-```tsx
-// ForwardMessageProvider와 작동 (로컬 상태)
-<ForwardMessageProvider>
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Submit />
-  </Composer.Frame>
-</ForwardMessageProvider>
-
-// ChannelProvider와 작동 (전역 동기화 상태)
-<ChannelProvider channelId="abc">
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Submit />
-  </Composer.Frame>
-</ChannelProvider>
-```
-
-## Mandu Island에서의 활용
-
-```tsx
-// Island 컴포넌트는 인터페이스만 알면 됨
-// slot에서 어떤 Provider를 사용하든 같은 Island 재사용 가능
-
-// spec/slots/forward.slot.ts → ForwardMessageProvider 사용
-// spec/slots/channel.slot.ts → ChannelProvider 사용
-// 둘 다 같은 Composer Island 컴포넌트 사용
-```
-
-UI는 재사용 가능한 조각들이고, 상태는 Provider가 주입합니다. Provider를 바꾸면 UI는 그대로!
-
-Reference: [Context Interface Pattern](https://kentcdodds.com/blog/how-to-use-react-context-effectively)
+---
+title: Define Generic Context Interface for Dependency Injection
+impact: HIGH
+impactDescription: Enables dependency-injectable state across use-cases
+tags: composition, context, state, typescript, dependency-injection
+---
+
+## Define Generic Context Interface for Dependency Injection
+
+**Impact: HIGH (Enables dependency-injectable state across use-cases)**
+
+컴포넌트 context를 위한 제네릭 인터페이스를 `state`, `actions`, `meta` 세 부분으로 정의하세요. 어떤 Provider든 이 인터페이스를 구현할 수 있어, 같은 UI 컴포넌트가 완전히 다른 상태 구현과 작동할 수 있습니다.
+
+**핵심 원칙:** Lift state, compose internals, make state dependency-injectable.
+
+**Incorrect (특정 상태 구현에 결합):**
+
+```tsx
+// ❌ 특정 훅에 강하게 결합
+function ComposerInput() {
+  const { input, setInput } = useChannelComposerState();
+  return <TextInput value={input} onChangeText={setInput} />;
+}
+```
+
+**Correct (제네릭 인터페이스로 의존성 주입):**
+
+```tsx
+// ✅ 어떤 Provider든 구현할 수 있는 제네릭 인터페이스
+interface ComposerState {
+  input: string;
+  attachments: Attachment[];
+  isSubmitting: boolean;
+}
+
+interface ComposerActions {
+  update: (updater: (state: ComposerState) => ComposerState) => void;
+  submit: () => void;
+  addAttachment: (file: File) => void;
+}
+
+interface ComposerMeta {
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+  maxLength?: number;
+}
+
+interface ComposerContextValue {
+  state: ComposerState;
+  actions: ComposerActions;
+  meta: ComposerMeta;
+}
+
+const ComposerContext = createContext<ComposerContextValue | null>(null);
+```
+
+**UI 컴포넌트는 인터페이스만 소비:**
+
+```tsx
+function ComposerInput() {
+  const {
+    state,
+    actions: { update },
+    meta,
+  } = use(ComposerContext)!;
+
+  // 이 컴포넌트는 인터페이스를 구현한 어떤 Provider와도 작동
+  return (
+    <textarea
+      ref={meta.inputRef}
+      value={state.input}
+      maxLength={meta.maxLength}
+      onChange={(e) => update((s) => ({ ...s, input: e.target.value }))}
+    />
+  );
+}
+```
+
+**서로 다른 Provider가 같은 인터페이스 구현:**
+
+```tsx
+// Provider A: 임시 폼을 위한 로컬 상태
+function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState(initialState);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const submit = useForwardMessage();
+
+  return (
+    <ComposerContext value={{
+      state,
+      actions: { update: setState, submit, addAttachment: ... },
+      meta: { inputRef },
+    }}>
+      {children}
+    </ComposerContext>
+  );
+}
+
+// Provider B: 채널을 위한 전역 동기화 상태
+function ChannelProvider({ channelId, children }: Props) {
+  const { state, update, submit } = useGlobalChannel(channelId);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  return (
+    <ComposerContext value={{
+      state,
+      actions: { update, submit, addAttachment: ... },
+      meta: { inputRef, maxLength: 2000 },
+    }}>
+      {children}
+    </ComposerContext>
+  );
+}
+```
+
+**같은 UI가 두 Provider와 모두 작동:**
+
+```tsx
+// ForwardMessageProvider와 작동 (로컬 상태)
+<ForwardMessageProvider>
+  <Composer.Frame>
+    <Composer.Input />
+    <Composer.Submit />
+  </Composer.Frame>
+</ForwardMessageProvider>
+
+// ChannelProvider와 작동 (전역 동기화 상태)
+<ChannelProvider channelId="abc">
+  <Composer.Frame>
+    <Composer.Input />
+    <Composer.Submit />
+  </Composer.Frame>
+</ChannelProvider>
+```
+
+## Mandu Island에서의 활용
+
+```tsx
+// Island 컴포넌트는 인터페이스만 알면 됨
+// slot에서 어떤 Provider를 사용하든 같은 Island 재사용 가능
+
+// spec/slots/forward.slot.ts → ForwardMessageProvider 사용
+// spec/slots/channel.slot.ts → ChannelProvider 사용
+// 둘 다 같은 Composer Island 컴포넌트 사용
+```
+
+UI는 재사용 가능한 조각들이고, 상태는 Provider가 주입합니다. Provider를 바꾸면 UI는 그대로!
+
+Reference: [Context Interface Pattern](https://kentcdodds.com/blog/how-to-use-react-context-effectively)

package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md

@@ -1,150 +1,150 @@
----
-title: Lift State into Provider for Sibling Access
-impact: HIGH
-impactDescription: Enables state sharing without prop drilling
-tags: composition, state, provider, lift-state
----
-
-## Lift State into Provider for Sibling Access
-
-**Impact: HIGH (Enables state sharing without prop drilling)**
-
-형제 컴포넌트가 상태를 공유해야 할 때, 상태를 Provider로 끌어올리세요. Provider 경계 내의 모든 컴포넌트가 상태에 접근할 수 있습니다.
-
-**Incorrect (prop drilling):**
-
-```tsx
-// ❌ 상태를 여러 단계로 전달
-function ChatPage() {
-  const [message, setMessage] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-
-  return (
-    <div>
-      <MessageList
-        isTyping={isTyping}
-        typingMessage={message}  // prop drilling
-      />
-      <Composer
-        message={message}
-        setMessage={setMessage}
-        setIsTyping={setIsTyping}
-      />
-      <TypingIndicator isTyping={isTyping} />  // prop drilling
-    </div>
-  );
-}
-```
-
-**Correct (Provider로 끌어올리기):**
-
-```tsx
-// ✅ Provider가 상태 관리
-interface ChatContextValue {
-  state: { message: string; isTyping: boolean };
-  actions: { setMessage: (msg: string) => void; setIsTyping: (val: boolean) => void };
-}
-
-const ChatContext = createContext<ChatContextValue | null>(null);
-
-function ChatProvider({ children }: { children: React.ReactNode }) {
-  const [message, setMessage] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-
-  return (
-    <ChatContext value={{
-      state: { message, isTyping },
-      actions: { setMessage, setIsTyping },
-    }}>
-      {children}
-    </ChatContext>
-  );
-}
-
-// 각 컴포넌트가 필요한 것만 가져감
-function MessageList() {
-  const { state } = use(ChatContext)!;
-  return (
-    <div>
-      {messages.map(msg => <Message key={msg.id} {...msg} />)}
-      {state.isTyping && <TypingPreview text={state.message} />}
-    </div>
-  );
-}
-
-function Composer() {
-  const { state, actions } = use(ChatContext)!;
-  return (
-    <textarea
-      value={state.message}
-      onChange={(e) => {
-        actions.setMessage(e.target.value);
-        actions.setIsTyping(e.target.value.length > 0);
-      }}
-    />
-  );
-}
-
-function TypingIndicator() {
-  const { state } = use(ChatContext)!;
-  if (!state.isTyping) return null;
-  return <span>Someone is typing...</span>;
-}
-```
-
-**사용:**
-
-```tsx
-function ChatPage() {
-  return (
-    <ChatProvider>
-      <div>
-        <MessageList />    {/* context에서 상태 읽음 */}
-        <Composer />       {/* context에서 상태 수정 */}
-        <TypingIndicator /> {/* context에서 상태 읽음 */}
-      </div>
-    </ChatProvider>
-  );
-}
-```
-
-## Provider 경계 이해하기
-
-Provider 경계 내라면 시각적 위치와 무관하게 상태 접근 가능:
-
-```tsx
-<ChatProvider>
-  <Dialog>
-    {/* Dialog 내부 */}
-    <Composer.Frame>
-      <Composer.Input />
-    </Composer.Frame>
-
-    {/* Frame 외부지만 Provider 내부! */}
-    <MessagePreview />  {/* ✅ context 접근 가능 */}
-
-    <DialogActions>
-      <SendButton />    {/* ✅ context 접근 가능 */}
-    </DialogActions>
-  </Dialog>
-</ChatProvider>
-```
-
-## Mandu Island에서의 적용
-
-```tsx
-// app/chat/page.tsx
-import { ChatIsland } from "./client";
-
-export default function ChatPage({ data }) {
-  return (
-    <div>
-      <h1>Chat</h1>
-      {/* Island 내부에서 Provider로 상태 관리 */}
-      <ChatIsland initialMessages={data.messages} />
-    </div>
-  );
-}
-```
-
-Reference: [Lifting State Up](https://react.dev/learn/sharing-state-between-components)
+---
+title: Lift State into Provider for Sibling Access
+impact: HIGH
+impactDescription: Enables state sharing without prop drilling
+tags: composition, state, provider, lift-state
+---
+
+## Lift State into Provider for Sibling Access
+
+**Impact: HIGH (Enables state sharing without prop drilling)**
+
+형제 컴포넌트가 상태를 공유해야 할 때, 상태를 Provider로 끌어올리세요. Provider 경계 내의 모든 컴포넌트가 상태에 접근할 수 있습니다.
+
+**Incorrect (prop drilling):**
+
+```tsx
+// ❌ 상태를 여러 단계로 전달
+function ChatPage() {
+  const [message, setMessage] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+
+  return (
+    <div>
+      <MessageList
+        isTyping={isTyping}
+        typingMessage={message}  // prop drilling
+      />
+      <Composer
+        message={message}
+        setMessage={setMessage}
+        setIsTyping={setIsTyping}
+      />
+      <TypingIndicator isTyping={isTyping} />  // prop drilling
+    </div>
+  );
+}
+```
+
+**Correct (Provider로 끌어올리기):**
+
+```tsx
+// ✅ Provider가 상태 관리
+interface ChatContextValue {
+  state: { message: string; isTyping: boolean };
+  actions: { setMessage: (msg: string) => void; setIsTyping: (val: boolean) => void };
+}
+
+const ChatContext = createContext<ChatContextValue | null>(null);
+
+function ChatProvider({ children }: { children: React.ReactNode }) {
+  const [message, setMessage] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+
+  return (
+    <ChatContext value={{
+      state: { message, isTyping },
+      actions: { setMessage, setIsTyping },
+    }}>
+      {children}
+    </ChatContext>
+  );
+}
+
+// 각 컴포넌트가 필요한 것만 가져감
+function MessageList() {
+  const { state } = use(ChatContext)!;
+  return (
+    <div>
+      {messages.map(msg => <Message key={msg.id} {...msg} />)}
+      {state.isTyping && <TypingPreview text={state.message} />}
+    </div>
+  );
+}
+
+function Composer() {
+  const { state, actions } = use(ChatContext)!;
+  return (
+    <textarea
+      value={state.message}
+      onChange={(e) => {
+        actions.setMessage(e.target.value);
+        actions.setIsTyping(e.target.value.length > 0);
+      }}
+    />
+  );
+}
+
+function TypingIndicator() {
+  const { state } = use(ChatContext)!;
+  if (!state.isTyping) return null;
+  return <span>Someone is typing...</span>;
+}
+```
+
+**사용:**
+
+```tsx
+function ChatPage() {
+  return (
+    <ChatProvider>
+      <div>
+        <MessageList />    {/* context에서 상태 읽음 */}
+        <Composer />       {/* context에서 상태 수정 */}
+        <TypingIndicator /> {/* context에서 상태 읽음 */}
+      </div>
+    </ChatProvider>
+  );
+}
+```
+
+## Provider 경계 이해하기
+
+Provider 경계 내라면 시각적 위치와 무관하게 상태 접근 가능:
+
+```tsx
+<ChatProvider>
+  <Dialog>
+    {/* Dialog 내부 */}
+    <Composer.Frame>
+      <Composer.Input />
+    </Composer.Frame>
+
+    {/* Frame 외부지만 Provider 내부! */}
+    <MessagePreview />  {/* ✅ context 접근 가능 */}
+
+    <DialogActions>
+      <SendButton />    {/* ✅ context 접근 가능 */}
+    </DialogActions>
+  </Dialog>
+</ChatProvider>
+```
+
+## Mandu Island에서의 적용
+
+```tsx
+// app/chat/page.tsx
+import { ChatIsland } from "./client";
+
+export default function ChatPage({ data }) {
+  return (
+    <div>
+      <h1>Chat</h1>
+      {/* Island 내부에서 Provider로 상태 관리 */}
+      <ChatIsland initialMessages={data.messages} />
+    </div>
+  );
+}
+```
+
+Reference: [Lifting State Up](https://react.dev/learn/sharing-state-between-components)