@mandujs/mcp 0.36.3 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/package.json +4 -4
  2. package/src/activity-adapter.ts +23 -23
  3. package/src/adapters/index.ts +20 -20
  4. package/src/adapters/monitor-adapter.ts +100 -100
  5. package/src/adapters/tool-adapter.ts +90 -90
  6. package/src/executor/index.ts +22 -22
  7. package/src/executor/tool-executor.ts +148 -148
  8. package/src/hooks/config-watcher.ts +173 -173
  9. package/src/hooks/index.ts +23 -23
  10. package/src/hooks/mcp-hooks.ts +227 -227
  11. package/src/index.ts +0 -0
  12. package/src/logging/index.ts +15 -15
  13. package/src/logging/mcp-transport.ts +134 -134
  14. package/src/profiles.ts +34 -34
  15. package/src/registry/index.ts +13 -13
  16. package/src/registry/mcp-tool-registry.ts +298 -298
  17. package/src/resources/skills/guides.ts +1136 -1136
  18. package/src/resources/skills/index.ts +12 -12
  19. package/src/resources/skills/mandu-composition/SKILL.md +91 -91
  20. package/src/resources/skills/mandu-composition/metadata.json +13 -13
  21. package/src/resources/skills/mandu-composition/rules/_sections.md +26 -26
  22. package/src/resources/skills/mandu-composition/rules/_template.md +77 -77
  23. package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md +146 -146
  24. package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md +164 -164
  25. package/src/resources/skills/mandu-composition/rules/comp-island-event.md +161 -161
  26. package/src/resources/skills/mandu-composition/rules/comp-island-slot-split.md +167 -167
  27. package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md +149 -149
  28. package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md +148 -148
  29. package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md +150 -150
  30. package/src/resources/skills/mandu-deployment/SKILL.md +92 -92
  31. package/src/resources/skills/mandu-deployment/_sections.md +41 -41
  32. package/src/resources/skills/mandu-deployment/_template.md +38 -38
  33. package/src/resources/skills/mandu-deployment/metadata.json +13 -13
  34. package/src/resources/skills/mandu-deployment/rules/db-provider-supabase.md +300 -300
  35. package/src/resources/skills/mandu-deployment/rules/deploy-build-bun.md +109 -109
  36. package/src/resources/skills/mandu-deployment/rules/deploy-build-output.md +115 -115
  37. package/src/resources/skills/mandu-deployment/rules/deploy-cicd-github.md +219 -219
  38. package/src/resources/skills/mandu-deployment/rules/deploy-docker-bun.md +150 -150
  39. package/src/resources/skills/mandu-deployment/rules/deploy-docker-compose.md +223 -223
  40. package/src/resources/skills/mandu-deployment/rules/deploy-platform-fly.md +152 -152
  41. package/src/resources/skills/mandu-deployment/rules/deploy-platform-render.md +179 -179
  42. package/src/resources/skills/mandu-deployment/rules/deploy-platform-vercel.md +140 -140
  43. package/src/resources/skills/mandu-fs-routes/SKILL.md +82 -82
  44. package/src/resources/skills/mandu-fs-routes/metadata.json +12 -12
  45. package/src/resources/skills/mandu-fs-routes/rules/_sections.md +36 -36
  46. package/src/resources/skills/mandu-fs-routes/rules/_template.md +69 -69
  47. package/src/resources/skills/mandu-fs-routes/rules/routes-api-methods.md +65 -65
  48. package/src/resources/skills/mandu-fs-routes/rules/routes-dynamic-param.md +93 -93
  49. package/src/resources/skills/mandu-fs-routes/rules/routes-naming-page.md +55 -55
  50. package/src/resources/skills/mandu-guard/SKILL.md +129 -129
  51. package/src/resources/skills/mandu-guard/metadata.json +12 -12
  52. package/src/resources/skills/mandu-guard/rules/_sections.md +36 -36
  53. package/src/resources/skills/mandu-guard/rules/_template.md +82 -82
  54. package/src/resources/skills/mandu-guard/rules/guard-config-rules.md +100 -100
  55. package/src/resources/skills/mandu-guard/rules/guard-layer-direction.md +76 -76
  56. package/src/resources/skills/mandu-guard/rules/guard-preset-mandu.md +81 -81
  57. package/src/resources/skills/mandu-guard/rules/guard-validate-import.md +80 -80
  58. package/src/resources/skills/mandu-hydration/SKILL.md +91 -91
  59. package/src/resources/skills/mandu-hydration/metadata.json +12 -12
  60. package/src/resources/skills/mandu-hydration/rules/_sections.md +31 -31
  61. package/src/resources/skills/mandu-hydration/rules/_template.md +72 -72
  62. package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md +109 -109
  63. package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md +55 -55
  64. package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md +113 -113
  65. package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md +68 -68
  66. package/src/resources/skills/mandu-performance/SKILL.md +85 -85
  67. package/src/resources/skills/mandu-performance/metadata.json +14 -14
  68. package/src/resources/skills/mandu-performance/rules/_sections.md +31 -31
  69. package/src/resources/skills/mandu-performance/rules/_template.md +64 -64
  70. package/src/resources/skills/mandu-performance/rules/perf-async-defer-await.md +103 -103
  71. package/src/resources/skills/mandu-performance/rules/perf-async-parallel.md +95 -95
  72. package/src/resources/skills/mandu-performance/rules/perf-bun-file.md +124 -124
  73. package/src/resources/skills/mandu-performance/rules/perf-bun-serve.md +125 -125
  74. package/src/resources/skills/mandu-performance/rules/perf-bundle-imports.md +80 -80
  75. package/src/resources/skills/mandu-performance/rules/perf-bundle-island-lazy.md +145 -145
  76. package/src/resources/skills/mandu-performance/rules/perf-cache-react.md +98 -98
  77. package/src/resources/skills/mandu-performance/rules/perf-render-transitions.md +154 -154
  78. package/src/resources/skills/mandu-security/SKILL.md +87 -87
  79. package/src/resources/skills/mandu-security/metadata.json +13 -13
  80. package/src/resources/skills/mandu-security/rules/_sections.md +31 -31
  81. package/src/resources/skills/mandu-security/rules/_template.md +74 -74
  82. package/src/resources/skills/mandu-security/rules/sec-auth-guard.md +127 -127
  83. package/src/resources/skills/mandu-security/rules/sec-env-management.md +133 -133
  84. package/src/resources/skills/mandu-security/rules/sec-input-validate.md +148 -148
  85. package/src/resources/skills/mandu-security/rules/sec-protect-csrf.md +146 -146
  86. package/src/resources/skills/mandu-security/rules/sec-protect-headers.md +138 -138
  87. package/src/resources/skills/mandu-slot/SKILL.md +85 -85
  88. package/src/resources/skills/mandu-slot/metadata.json +12 -12
  89. package/src/resources/skills/mandu-slot/rules/_sections.md +36 -36
  90. package/src/resources/skills/mandu-slot/rules/_template.md +63 -63
  91. package/src/resources/skills/mandu-slot/rules/slot-basic-structure.md +38 -38
  92. package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md +56 -56
  93. package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md +59 -59
  94. package/src/resources/skills/mandu-slot/rules/slot-http-methods.md +64 -64
  95. package/src/resources/skills/mandu-styling/SKILL.md +154 -154
  96. package/src/resources/skills/mandu-styling/_sections.md +43 -43
  97. package/src/resources/skills/mandu-styling/_template.md +32 -32
  98. package/src/resources/skills/mandu-styling/metadata.json +15 -15
  99. package/src/resources/skills/mandu-styling/rules/style-component-compound.md +235 -235
  100. package/src/resources/skills/mandu-styling/rules/style-component-slots.md +255 -255
  101. package/src/resources/skills/mandu-styling/rules/style-component-tokens.md +205 -205
  102. package/src/resources/skills/mandu-styling/rules/style-island-animations.md +272 -272
  103. package/src/resources/skills/mandu-styling/rules/style-island-scoping.md +167 -167
  104. package/src/resources/skills/mandu-styling/rules/style-island-variants.md +221 -221
  105. package/src/resources/skills/mandu-styling/rules/style-perf-critical.md +209 -209
  106. package/src/resources/skills/mandu-styling/rules/style-perf-purge.md +192 -192
  107. package/src/resources/skills/mandu-styling/rules/style-setup-modules.md +162 -162
  108. package/src/resources/skills/mandu-styling/rules/style-setup-panda.md +164 -164
  109. package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md +170 -170
  110. package/src/resources/skills/mandu-styling/rules/style-tailwind-v4-gotchas.md +179 -179
  111. package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md +229 -229
  112. package/src/resources/skills/mandu-testing/SKILL.md +99 -99
  113. package/src/resources/skills/mandu-testing/metadata.json +13 -13
  114. package/src/resources/skills/mandu-testing/rules/_sections.md +26 -26
  115. package/src/resources/skills/mandu-testing/rules/_template.md +65 -65
  116. package/src/resources/skills/mandu-testing/rules/test-component-island.md +195 -195
  117. package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md +196 -196
  118. package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md +219 -219
  119. package/src/resources/skills/mandu-testing/rules/test-slot-unit.md +192 -192
  120. package/src/resources/skills/mandu-ui/SKILL.md +117 -117
  121. package/src/resources/skills/mandu-ui/_sections.md +23 -23
  122. package/src/resources/skills/mandu-ui/_template.md +32 -32
  123. package/src/resources/skills/mandu-ui/metadata.json +13 -13
  124. package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md +232 -232
  125. package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md +238 -238
  126. package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md +259 -259
  127. package/src/resources/skills/mandu-ui/rules/ui-island-integration.md +258 -258
  128. package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md +213 -213
  129. package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md +209 -209
  130. package/src/resources/skills/recipes.ts +932 -932
  131. package/src/server.ts +3 -3
  132. package/src/tools/ate-exemplar.ts +92 -92
  133. package/src/tools/ate-flakes.ts +90 -90
  134. package/src/tools/ate-mutate.ts +103 -103
  135. package/src/tools/ate-mutation-report.ts +64 -64
  136. package/src/tools/ate-oracle-pending.ts +49 -49
  137. package/src/tools/ate-oracle-replay.ts +44 -44
  138. package/src/tools/ate-oracle-verdict.ts +70 -70
  139. package/src/tools/ate-prompt.ts +146 -146
  140. package/src/tools/brain.ts +3 -3
  141. package/src/tools/deploy-plan.ts +378 -378
  142. package/src/tools/deploy-preview.ts +316 -316
  143. package/src/tools/design.ts +825 -825
  144. package/src/tools/docs.ts +350 -350
  145. package/src/tools/kitchen.ts +109 -23
  146. package/src/tools/lint.ts +226 -226
  147. package/src/tools/loop-close.ts +175 -175
  148. package/src/tools/negotiate.ts +263 -263
  149. package/src/tools/run-tests.ts +424 -424
  150. package/src/tools/runtime.ts +1 -1
  151. package/src/tools/slot-validation.ts +199 -199
  152. package/src/tx-lock.ts +73 -73
  153. package/src/utils/runtime-control.ts +52 -52
@@ -1,258 +1,258 @@
1
- ---
2
- title: UI Library Island Integration
3
- impact: MEDIUM
4
- impactDescription: Proper integration of UI components with Island architecture
5
- tags: ui, island, integration, client
6
- ---
7
-
8
- ## UI Library Island Integration
9
-
10
- **Impact: MEDIUM (Proper integration of UI components with Island architecture)**
11
-
12
- UI 라이브러리 컴포넌트를 Mandu Island 아키텍처에 올바르게 통합하세요.
13
-
14
- ## "use client" 경계
15
-
16
- ```tsx
17
- // components/ui/button.tsx
18
- // shadcn/ui 컴포넌트는 이미 클라이언트 컴포넌트
19
- "use client";
20
-
21
- import { cn } from "@/lib/utils";
22
- // ...
23
- ```
24
-
25
- ```tsx
26
- // app/dashboard/page.tsx (서버 컴포넌트)
27
- import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
28
- import { DashboardActionsIsland } from "./client";
29
-
30
- export default function DashboardPage() {
31
- return (
32
- <div>
33
- {/* Card는 서버에서 렌더링 (정적 마크업) */}
34
- <Card>
35
- <CardHeader>
36
- <CardTitle>Dashboard</CardTitle>
37
- </CardHeader>
38
- <CardContent>
39
- {/* 인터랙티브 부분만 Island */}
40
- <DashboardActionsIsland />
41
- </CardContent>
42
- </Card>
43
- </div>
44
- );
45
- }
46
- ```
47
-
48
- ## 서버 데이터 → Island 전달
49
-
50
- ```tsx
51
- // app/users/page.tsx
52
- import { UserTableIsland } from "./client";
53
- import { getUsers } from "@/lib/db";
54
-
55
- export default async function UsersPage() {
56
- const users = await getUsers();
57
-
58
- return (
59
- <div>
60
- <h1>Users</h1>
61
- {/* 초기 데이터를 props로 전달 */}
62
- <UserTableIsland initialUsers={users} />
63
- </div>
64
- );
65
- }
66
- ```
67
-
68
- ```tsx
69
- // app/users/client.tsx
70
- "use client";
71
-
72
- import { useState } from "react";
73
- import {
74
- Table,
75
- TableBody,
76
- TableCell,
77
- TableHead,
78
- TableHeader,
79
- TableRow,
80
- } from "@/components/ui/table";
81
- import { Button } from "@/components/ui/button";
82
-
83
- export function UserTableIsland({ initialUsers }) {
84
- const [users, setUsers] = useState(initialUsers);
85
-
86
- const handleDelete = async (id: string) => {
87
- await fetch(`/api/users/${id}`, { method: "DELETE" });
88
- setUsers(users.filter(u => u.id !== id));
89
- };
90
-
91
- return (
92
- <Table>
93
- <TableHeader>
94
- <TableRow>
95
- <TableHead>Name</TableHead>
96
- <TableHead>Email</TableHead>
97
- <TableHead>Actions</TableHead>
98
- </TableRow>
99
- </TableHeader>
100
- <TableBody>
101
- {users.map(user => (
102
- <TableRow key={user.id}>
103
- <TableCell>{user.name}</TableCell>
104
- <TableCell>{user.email}</TableCell>
105
- <TableCell>
106
- <Button
107
- variant="destructive"
108
- size="sm"
109
- onClick={() => handleDelete(user.id)}
110
- >
111
- Delete
112
- </Button>
113
- </TableCell>
114
- </TableRow>
115
- ))}
116
- </TableBody>
117
- </Table>
118
- );
119
- }
120
- ```
121
-
122
- ## Dialog/Modal Island 패턴
123
-
124
- ```tsx
125
- // app/users/client.tsx
126
- "use client";
127
-
128
- import { useState } from "react";
129
- import { Button } from "@/components/ui/button";
130
- import {
131
- Dialog,
132
- DialogContent,
133
- DialogHeader,
134
- DialogTitle,
135
- DialogTrigger,
136
- } from "@/components/ui/dialog";
137
-
138
- export function CreateUserIsland() {
139
- const [open, setOpen] = useState(false);
140
-
141
- const handleSubmit = async (data: FormData) => {
142
- await fetch("/api/users", {
143
- method: "POST",
144
- body: data,
145
- });
146
- setOpen(false);
147
- };
148
-
149
- return (
150
- <Dialog open={open} onOpenChange={setOpen}>
151
- <DialogTrigger asChild>
152
- <Button>Add User</Button>
153
- </DialogTrigger>
154
- <DialogContent>
155
- <DialogHeader>
156
- <DialogTitle>Create New User</DialogTitle>
157
- </DialogHeader>
158
- <form action={handleSubmit}>
159
- {/* Form fields */}
160
- </form>
161
- </DialogContent>
162
- </Dialog>
163
- );
164
- }
165
- ```
166
-
167
- ## Toast Island
168
-
169
- ```tsx
170
- // app/layout.tsx
171
- import { Toaster } from "@/components/ui/toaster";
172
-
173
- export default function RootLayout({ children }) {
174
- return (
175
- <html>
176
- <body>
177
- {children}
178
- {/* Toast는 전역 Island */}
179
- <Toaster />
180
- </body>
181
- </html>
182
- );
183
- }
184
- ```
185
-
186
- ```tsx
187
- // app/form/client.tsx
188
- "use client";
189
-
190
- import { useToast } from "@/components/ui/use-toast";
191
-
192
- export function FormIsland() {
193
- const { toast } = useToast();
194
-
195
- const handleSubmit = async () => {
196
- try {
197
- await submitForm();
198
- toast({
199
- title: "Success",
200
- description: "Form submitted successfully",
201
- });
202
- } catch {
203
- toast({
204
- title: "Error",
205
- description: "Something went wrong",
206
- variant: "destructive",
207
- });
208
- }
209
- };
210
-
211
- // ...
212
- }
213
- ```
214
-
215
- ## Island 간 UI 상태 공유
216
-
217
- ```tsx
218
- // app/sidebar/client.tsx
219
- "use client";
220
-
221
- import { useIslandEvent } from "@mandujs/core/client";
222
-
223
- export function SidebarIsland() {
224
- const [isOpen, setIsOpen] = useState(true);
225
-
226
- useIslandEvent("toggle-sidebar", () => {
227
- setIsOpen(prev => !prev);
228
- });
229
-
230
- return (
231
- <aside className={cn(isOpen ? "w-64" : "w-0", "transition-all")}>
232
- {/* Sidebar content */}
233
- </aside>
234
- );
235
- }
236
- ```
237
-
238
- ```tsx
239
- // app/header/client.tsx
240
- "use client";
241
-
242
- import { useIslandEvent } from "@mandujs/core/client";
243
- import { Button } from "@/components/ui/button";
244
-
245
- export function HeaderIsland() {
246
- const { emit } = useIslandEvent("toggle-sidebar");
247
-
248
- return (
249
- <header>
250
- <Button variant="ghost" size="icon" onClick={() => emit({})}>
251
- <MenuIcon />
252
- </Button>
253
- </header>
254
- );
255
- }
256
- ```
257
-
258
- Reference: [React Server Components](https://react.dev/reference/rsc/server-components)
1
+ ---
2
+ title: UI Library Island Integration
3
+ impact: MEDIUM
4
+ impactDescription: Proper integration of UI components with Island architecture
5
+ tags: ui, island, integration, client
6
+ ---
7
+
8
+ ## UI Library Island Integration
9
+
10
+ **Impact: MEDIUM (Proper integration of UI components with Island architecture)**
11
+
12
+ UI 라이브러리 컴포넌트를 Mandu Island 아키텍처에 올바르게 통합하세요.
13
+
14
+ ## "use client" 경계
15
+
16
+ ```tsx
17
+ // components/ui/button.tsx
18
+ // shadcn/ui 컴포넌트는 이미 클라이언트 컴포넌트
19
+ "use client";
20
+
21
+ import { cn } from "@/lib/utils";
22
+ // ...
23
+ ```
24
+
25
+ ```tsx
26
+ // app/dashboard/page.tsx (서버 컴포넌트)
27
+ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
28
+ import { DashboardActionsIsland } from "./client";
29
+
30
+ export default function DashboardPage() {
31
+ return (
32
+ <div>
33
+ {/* Card는 서버에서 렌더링 (정적 마크업) */}
34
+ <Card>
35
+ <CardHeader>
36
+ <CardTitle>Dashboard</CardTitle>
37
+ </CardHeader>
38
+ <CardContent>
39
+ {/* 인터랙티브 부분만 Island */}
40
+ <DashboardActionsIsland />
41
+ </CardContent>
42
+ </Card>
43
+ </div>
44
+ );
45
+ }
46
+ ```
47
+
48
+ ## 서버 데이터 → Island 전달
49
+
50
+ ```tsx
51
+ // app/users/page.tsx
52
+ import { UserTableIsland } from "./client";
53
+ import { getUsers } from "@/lib/db";
54
+
55
+ export default async function UsersPage() {
56
+ const users = await getUsers();
57
+
58
+ return (
59
+ <div>
60
+ <h1>Users</h1>
61
+ {/* 초기 데이터를 props로 전달 */}
62
+ <UserTableIsland initialUsers={users} />
63
+ </div>
64
+ );
65
+ }
66
+ ```
67
+
68
+ ```tsx
69
+ // app/users/client.tsx
70
+ "use client";
71
+
72
+ import { useState } from "react";
73
+ import {
74
+ Table,
75
+ TableBody,
76
+ TableCell,
77
+ TableHead,
78
+ TableHeader,
79
+ TableRow,
80
+ } from "@/components/ui/table";
81
+ import { Button } from "@/components/ui/button";
82
+
83
+ export function UserTableIsland({ initialUsers }) {
84
+ const [users, setUsers] = useState(initialUsers);
85
+
86
+ const handleDelete = async (id: string) => {
87
+ await fetch(`/api/users/${id}`, { method: "DELETE" });
88
+ setUsers(users.filter(u => u.id !== id));
89
+ };
90
+
91
+ return (
92
+ <Table>
93
+ <TableHeader>
94
+ <TableRow>
95
+ <TableHead>Name</TableHead>
96
+ <TableHead>Email</TableHead>
97
+ <TableHead>Actions</TableHead>
98
+ </TableRow>
99
+ </TableHeader>
100
+ <TableBody>
101
+ {users.map(user => (
102
+ <TableRow key={user.id}>
103
+ <TableCell>{user.name}</TableCell>
104
+ <TableCell>{user.email}</TableCell>
105
+ <TableCell>
106
+ <Button
107
+ variant="destructive"
108
+ size="sm"
109
+ onClick={() => handleDelete(user.id)}
110
+ >
111
+ Delete
112
+ </Button>
113
+ </TableCell>
114
+ </TableRow>
115
+ ))}
116
+ </TableBody>
117
+ </Table>
118
+ );
119
+ }
120
+ ```
121
+
122
+ ## Dialog/Modal Island 패턴
123
+
124
+ ```tsx
125
+ // app/users/client.tsx
126
+ "use client";
127
+
128
+ import { useState } from "react";
129
+ import { Button } from "@/components/ui/button";
130
+ import {
131
+ Dialog,
132
+ DialogContent,
133
+ DialogHeader,
134
+ DialogTitle,
135
+ DialogTrigger,
136
+ } from "@/components/ui/dialog";
137
+
138
+ export function CreateUserIsland() {
139
+ const [open, setOpen] = useState(false);
140
+
141
+ const handleSubmit = async (data: FormData) => {
142
+ await fetch("/api/users", {
143
+ method: "POST",
144
+ body: data,
145
+ });
146
+ setOpen(false);
147
+ };
148
+
149
+ return (
150
+ <Dialog open={open} onOpenChange={setOpen}>
151
+ <DialogTrigger asChild>
152
+ <Button>Add User</Button>
153
+ </DialogTrigger>
154
+ <DialogContent>
155
+ <DialogHeader>
156
+ <DialogTitle>Create New User</DialogTitle>
157
+ </DialogHeader>
158
+ <form action={handleSubmit}>
159
+ {/* Form fields */}
160
+ </form>
161
+ </DialogContent>
162
+ </Dialog>
163
+ );
164
+ }
165
+ ```
166
+
167
+ ## Toast Island
168
+
169
+ ```tsx
170
+ // app/layout.tsx
171
+ import { Toaster } from "@/components/ui/toaster";
172
+
173
+ export default function RootLayout({ children }) {
174
+ return (
175
+ <html>
176
+ <body>
177
+ {children}
178
+ {/* Toast는 전역 Island */}
179
+ <Toaster />
180
+ </body>
181
+ </html>
182
+ );
183
+ }
184
+ ```
185
+
186
+ ```tsx
187
+ // app/form/client.tsx
188
+ "use client";
189
+
190
+ import { useToast } from "@/components/ui/use-toast";
191
+
192
+ export function FormIsland() {
193
+ const { toast } = useToast();
194
+
195
+ const handleSubmit = async () => {
196
+ try {
197
+ await submitForm();
198
+ toast({
199
+ title: "Success",
200
+ description: "Form submitted successfully",
201
+ });
202
+ } catch {
203
+ toast({
204
+ title: "Error",
205
+ description: "Something went wrong",
206
+ variant: "destructive",
207
+ });
208
+ }
209
+ };
210
+
211
+ // ...
212
+ }
213
+ ```
214
+
215
+ ## Island 간 UI 상태 공유
216
+
217
+ ```tsx
218
+ // app/sidebar/client.tsx
219
+ "use client";
220
+
221
+ import { useIslandEvent } from "@mandujs/core/client";
222
+
223
+ export function SidebarIsland() {
224
+ const [isOpen, setIsOpen] = useState(true);
225
+
226
+ useIslandEvent("toggle-sidebar", () => {
227
+ setIsOpen(prev => !prev);
228
+ });
229
+
230
+ return (
231
+ <aside className={cn(isOpen ? "w-64" : "w-0", "transition-all")}>
232
+ {/* Sidebar content */}
233
+ </aside>
234
+ );
235
+ }
236
+ ```
237
+
238
+ ```tsx
239
+ // app/header/client.tsx
240
+ "use client";
241
+
242
+ import { useIslandEvent } from "@mandujs/core/client";
243
+ import { Button } from "@/components/ui/button";
244
+
245
+ export function HeaderIsland() {
246
+ const { emit } = useIslandEvent("toggle-sidebar");
247
+
248
+ return (
249
+ <header>
250
+ <Button variant="ghost" size="icon" onClick={() => emit({})}>
251
+ <MenuIcon />
252
+ </Button>
253
+ </header>
254
+ );
255
+ }
256
+ ```
257
+
258
+ Reference: [React Server Components](https://react.dev/reference/rsc/server-components)