@mandujs/mcp 0.12.2 → 0.13.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 (141) hide show
  1. package/README.md +367 -367
  2. package/package.json +2 -2
  3. package/src/activity-monitor.ts +847 -847
  4. package/src/adapters/index.ts +20 -20
  5. package/src/adapters/monitor-adapter.ts +100 -100
  6. package/src/adapters/tool-adapter.ts +88 -88
  7. package/src/executor/error-handler.ts +250 -250
  8. package/src/executor/index.ts +22 -22
  9. package/src/executor/tool-executor.ts +148 -148
  10. package/src/hooks/config-watcher.ts +174 -174
  11. package/src/hooks/index.ts +23 -23
  12. package/src/hooks/mcp-hooks.ts +227 -227
  13. package/src/index.ts +106 -106
  14. package/src/logging/index.ts +15 -15
  15. package/src/logging/mcp-transport.ts +134 -134
  16. package/src/registry/index.ts +13 -13
  17. package/src/registry/mcp-tool-registry.ts +298 -298
  18. package/src/resources/skills/guides.ts +1136 -1136
  19. package/src/resources/skills/index.ts +12 -12
  20. package/src/resources/skills/loader.ts +218 -218
  21. package/src/resources/skills/mandu-composition/SKILL.md +91 -91
  22. package/src/resources/skills/mandu-composition/metadata.json +13 -13
  23. package/src/resources/skills/mandu-composition/rules/_sections.md +26 -26
  24. package/src/resources/skills/mandu-composition/rules/_template.md +77 -77
  25. package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md +146 -146
  26. package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md +164 -164
  27. package/src/resources/skills/mandu-composition/rules/comp-island-event.md +161 -161
  28. package/src/resources/skills/mandu-composition/rules/comp-island-slot-split.md +167 -167
  29. package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md +149 -149
  30. package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md +148 -148
  31. package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md +150 -150
  32. package/src/resources/skills/mandu-deployment/SKILL.md +92 -92
  33. package/src/resources/skills/mandu-deployment/_sections.md +41 -41
  34. package/src/resources/skills/mandu-deployment/_template.md +38 -38
  35. package/src/resources/skills/mandu-deployment/metadata.json +13 -13
  36. package/src/resources/skills/mandu-deployment/rules/deploy-build-bun.md +109 -109
  37. package/src/resources/skills/mandu-deployment/rules/deploy-build-output.md +115 -115
  38. package/src/resources/skills/mandu-deployment/rules/deploy-cicd-github.md +219 -219
  39. package/src/resources/skills/mandu-deployment/rules/deploy-docker-bun.md +150 -150
  40. package/src/resources/skills/mandu-deployment/rules/deploy-docker-compose.md +223 -223
  41. package/src/resources/skills/mandu-deployment/rules/deploy-platform-fly.md +152 -152
  42. package/src/resources/skills/mandu-deployment/rules/deploy-platform-render.md +179 -179
  43. package/src/resources/skills/mandu-deployment/rules/deploy-platform-supabase.md +323 -323
  44. package/src/resources/skills/mandu-deployment/rules/deploy-platform-vercel.md +140 -140
  45. package/src/resources/skills/mandu-fs-routes/SKILL.md +82 -82
  46. package/src/resources/skills/mandu-fs-routes/metadata.json +12 -12
  47. package/src/resources/skills/mandu-fs-routes/rules/_sections.md +36 -36
  48. package/src/resources/skills/mandu-fs-routes/rules/_template.md +69 -69
  49. package/src/resources/skills/mandu-fs-routes/rules/routes-api-methods.md +65 -65
  50. package/src/resources/skills/mandu-fs-routes/rules/routes-dynamic-param.md +93 -93
  51. package/src/resources/skills/mandu-fs-routes/rules/routes-naming-page.md +55 -55
  52. package/src/resources/skills/mandu-guard/SKILL.md +129 -129
  53. package/src/resources/skills/mandu-guard/metadata.json +12 -12
  54. package/src/resources/skills/mandu-guard/rules/_sections.md +36 -36
  55. package/src/resources/skills/mandu-guard/rules/_template.md +82 -82
  56. package/src/resources/skills/mandu-guard/rules/guard-config-rules.md +100 -100
  57. package/src/resources/skills/mandu-guard/rules/guard-layer-direction.md +76 -76
  58. package/src/resources/skills/mandu-guard/rules/guard-preset-mandu.md +81 -81
  59. package/src/resources/skills/mandu-guard/rules/guard-validate-import.md +80 -80
  60. package/src/resources/skills/mandu-hydration/SKILL.md +91 -91
  61. package/src/resources/skills/mandu-hydration/metadata.json +12 -12
  62. package/src/resources/skills/mandu-hydration/rules/_sections.md +31 -31
  63. package/src/resources/skills/mandu-hydration/rules/_template.md +72 -72
  64. package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md +109 -109
  65. package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md +55 -55
  66. package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md +113 -113
  67. package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md +68 -68
  68. package/src/resources/skills/mandu-performance/SKILL.md +85 -85
  69. package/src/resources/skills/mandu-performance/metadata.json +14 -14
  70. package/src/resources/skills/mandu-performance/rules/_sections.md +31 -31
  71. package/src/resources/skills/mandu-performance/rules/_template.md +64 -64
  72. package/src/resources/skills/mandu-performance/rules/perf-async-defer-await.md +103 -103
  73. package/src/resources/skills/mandu-performance/rules/perf-async-parallel.md +95 -95
  74. package/src/resources/skills/mandu-performance/rules/perf-bun-file.md +124 -124
  75. package/src/resources/skills/mandu-performance/rules/perf-bun-serve.md +125 -125
  76. package/src/resources/skills/mandu-performance/rules/perf-bundle-imports.md +80 -80
  77. package/src/resources/skills/mandu-performance/rules/perf-bundle-island-lazy.md +145 -145
  78. package/src/resources/skills/mandu-performance/rules/perf-cache-react.md +98 -98
  79. package/src/resources/skills/mandu-performance/rules/perf-render-transitions.md +154 -154
  80. package/src/resources/skills/mandu-security/SKILL.md +87 -87
  81. package/src/resources/skills/mandu-security/metadata.json +13 -13
  82. package/src/resources/skills/mandu-security/rules/_sections.md +31 -31
  83. package/src/resources/skills/mandu-security/rules/_template.md +74 -74
  84. package/src/resources/skills/mandu-security/rules/sec-auth-guard.md +127 -127
  85. package/src/resources/skills/mandu-security/rules/sec-env-management.md +133 -133
  86. package/src/resources/skills/mandu-security/rules/sec-input-validate.md +148 -148
  87. package/src/resources/skills/mandu-security/rules/sec-protect-csrf.md +146 -146
  88. package/src/resources/skills/mandu-security/rules/sec-protect-headers.md +138 -138
  89. package/src/resources/skills/mandu-slot/SKILL.md +85 -85
  90. package/src/resources/skills/mandu-slot/metadata.json +12 -12
  91. package/src/resources/skills/mandu-slot/rules/_sections.md +36 -36
  92. package/src/resources/skills/mandu-slot/rules/_template.md +63 -63
  93. package/src/resources/skills/mandu-slot/rules/slot-basic-structure.md +38 -38
  94. package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md +56 -56
  95. package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md +59 -59
  96. package/src/resources/skills/mandu-slot/rules/slot-http-methods.md +64 -64
  97. package/src/resources/skills/mandu-styling/SKILL.md +154 -154
  98. package/src/resources/skills/mandu-styling/_sections.md +43 -43
  99. package/src/resources/skills/mandu-styling/_template.md +32 -32
  100. package/src/resources/skills/mandu-styling/metadata.json +15 -15
  101. package/src/resources/skills/mandu-styling/rules/style-component-compound.md +235 -235
  102. package/src/resources/skills/mandu-styling/rules/style-component-slots.md +255 -255
  103. package/src/resources/skills/mandu-styling/rules/style-component-tokens.md +205 -205
  104. package/src/resources/skills/mandu-styling/rules/style-island-animations.md +272 -272
  105. package/src/resources/skills/mandu-styling/rules/style-island-scoping.md +167 -167
  106. package/src/resources/skills/mandu-styling/rules/style-island-variants.md +221 -221
  107. package/src/resources/skills/mandu-styling/rules/style-perf-critical.md +209 -209
  108. package/src/resources/skills/mandu-styling/rules/style-perf-purge.md +192 -192
  109. package/src/resources/skills/mandu-styling/rules/style-setup-modules.md +162 -162
  110. package/src/resources/skills/mandu-styling/rules/style-setup-panda.md +164 -164
  111. package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md +170 -170
  112. package/src/resources/skills/mandu-styling/rules/style-tailwind-v4-gotchas.md +179 -179
  113. package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md +229 -229
  114. package/src/resources/skills/mandu-testing/SKILL.md +99 -99
  115. package/src/resources/skills/mandu-testing/metadata.json +13 -13
  116. package/src/resources/skills/mandu-testing/rules/_sections.md +26 -26
  117. package/src/resources/skills/mandu-testing/rules/_template.md +65 -65
  118. package/src/resources/skills/mandu-testing/rules/test-component-island.md +195 -195
  119. package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md +196 -196
  120. package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md +219 -219
  121. package/src/resources/skills/mandu-testing/rules/test-slot-unit.md +192 -192
  122. package/src/resources/skills/mandu-ui/SKILL.md +117 -117
  123. package/src/resources/skills/mandu-ui/_sections.md +23 -23
  124. package/src/resources/skills/mandu-ui/_template.md +32 -32
  125. package/src/resources/skills/mandu-ui/metadata.json +13 -13
  126. package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md +232 -232
  127. package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md +238 -238
  128. package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md +259 -259
  129. package/src/resources/skills/mandu-ui/rules/ui-island-integration.md +258 -258
  130. package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md +213 -213
  131. package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md +209 -209
  132. package/src/resources/skills/recipes.ts +932 -932
  133. package/src/tools/generate.ts +7 -4
  134. package/src/tools/guard.ts +17 -4
  135. package/src/tools/hydration.ts +10 -10
  136. package/src/tools/project.ts +334 -334
  137. package/src/tools/runtime.ts +497 -497
  138. package/src/tools/seo.ts +417 -417
  139. package/src/tools/spec.ts +80 -159
  140. package/src/utils/project.ts +22 -12
  141. package/src/utils/withWarnings.ts +83 -83
@@ -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)