@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/ko-KR/template-calendar.mdx

@@ -18,13 +18,69 @@ description: "Google Calendar 동기화 및 Calendly 스타일 예약 링크가
 
 앱을 열면 활성 캘린더 보기가 기본 화면입니다. 상담원은 귀하가 보고 있는 요일, 주 또는 이벤트를 여전히 알고 있으므로 모든 내용을 철자하지 않고도 "오늘 Alex와 30분 통화 예약"이라고 말할 수 있습니다.
 
-```an-diagram title="예약 요청 흐름 방식" summary="달력을 클릭하거나 상담원에게 문의하면 동일한 작업이 Google Calendar에서 실시간으로 읽혀지고 동일한 보기에 다시 작성됩니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">클릭합니다<br><small class=\"diagram-muted\">드래그, 툴바, 단축키</small></div><div class=\"diagram-node\">에이전트에게 요청<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">실시간, 다중 계정</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">예약 · 가능 시간</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">캘린더 보기가 실시간으로 업데이트됩니다</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-upe470" title={"예약 요청 흐름 방식"} summary={"달력을 클릭하거나 상담원에게 문의하면 동일한 작업이 Google Calendar에서 실시간으로 읽혀지고 동일한 보기에 다시 작성됩니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      클릭합니다<br /><small class="diagram-muted">드래그, 툴바, 단축키</small>
+    </div>
+    <div class="diagram-node">
+      에이전트에게 요청<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted"
+        >실시간, 다중 계정</small
+      >
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">예약 · 가능 시간</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">캘린더 보기가 실시간으로 업데이트됩니다</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **실제 Google Calendar**를 일별, 주별 또는 월별 보기로 여러 계정을 오버레이하여 확인하세요.

package/docs/content/locales/ko-KR/template-chat.mdx

@@ -37,13 +37,68 @@ description: "최소 채팅 우선 에이전트 기본 앱: 내구성 있는 채
 
 그게 핵심입니다. Chat은 일반적인 척하는 도메인 제품이 아니라 귀하의 에이전트를 위한 얇고 유용한 기본 셸입니다.
 
-```an-diagram title="Chat 셸에 포함된 내용" summary="프레임워크의 표준 런타임(작업, 내구성 있는 스레드, 라이브 동기화 및 인증)에 대한 얇은 채팅 표면과 자체 UI를 추가할 수 있는 공간이 있습니다."
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">스레드 목록<br><small class=\"diagram-muted\">생성 · 다시 열기 · 고정 · 보관</small></div><div class=\"diagram-node\">전체 페이지 채팅<br><small class=\"diagram-muted\">/ 의 프레임워크 채팅 화면</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">핵심 SQL 테이블<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">실시간 동기화 &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">로그인 · 조직 · 세션</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-curf7p" title={"Chat 셸에 포함된 내용"} summary={"프레임워크의 표준 런타임(작업, 내구성 있는 스레드, 라이브 동기화 및 인증)에 대한 얇은 채팅 표면과 자체 UI를 추가할 수 있는 공간이 있습니다."}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      스레드 목록<br /><small class="diagram-muted"
+        >생성 · 다시 열기 · 고정 · 보관</small
+      >
+    </div>
+    <div class="diagram-node">
+      전체 페이지 채팅<br /><small class="diagram-muted"
+        >/ 의 프레임워크 채팅 화면</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      핵심 SQL 테이블<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">실시간 동기화 &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted">로그인 · 조직 · 세션</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 선택 시기 {#when-to-pick}
 
 - **사용자가 즉시 대화할 수 있는 기본 앱**을 원하고 actions 및 UI로 확장합니다.

package/docs/content/locales/ko-KR/template-clips.mdx

@@ -19,13 +19,61 @@ search: "클립 브라우저 로그 개발자 로그 콘솔 로그 네트워크
 
 Loom + Granola + Wispr Flow가 하나의 앱으로 통합되었다고 생각해보세요. 그러나 에이전트는 모든 표면에서 일류 편집자이며 녹음, 회의 및 받아쓰기는 SaaS 공급업체의 것이 아니라 귀하의 것입니다. Clips는 공유 녹음물을 상담원이 읽을 수 있도록 해줍니다. 일반 Clips 공유 링크를 상담원에 붙여넣으면 대본을 텍스트로 "듣고" 타임스탬프가 표시된 화면 프레임을 이미지로 "볼" 수 있습니다. 원본 비디오는 필요하지 않습니다. 프레임 보기는 모든 이미지 지원 에이전트(ChatGPT, Claude 코드, 커서, Codex)에서 작동합니다. 텍스트 전용 웹 채팅은 여전히 ​​전체 내용을 얻을 수 있으며 업로드한 프레임을 사용할 수 있습니다.
 
-```an-diagram title="캡처, 복사, 재사용" summary="세 가지 캡처 유형이 하나의 라이브러리에 포함됩니다. 상담원이 스크립트를 작성하고 제목을 지정하고 요약하면 모든 스크립트를 검색하고 공유할 수 있습니다."
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">화면 녹화</div><div class=\"diagram-node\">캘린더 회의</div><div class=\"diagram-node\">Fn 길게 누르기 받아쓰기</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>하나의 라이브러리<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">제목 · 요약 · 챕터</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">검색</div><div class=\"diagram-pill\">공유</div><div class=\"diagram-pill\">에이전트가 읽을 수 있음 links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-wz0gsz" title={"캡처, 복사, 재사용"} summary={"세 가지 캡처 유형이 하나의 라이브러리에 포함됩니다. 상담원이 스크립트를 작성하고 제목을 지정하고 요약하면 모든 스크립트를 검색하고 공유할 수 있습니다."}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">화면 녹화</div>
+    <div class="diagram-node">캘린더 회의</div>
+    <div class="diagram-node">Fn 길게 누르기 받아쓰기</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    하나의 라이브러리<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">제목 · 요약 · 챕터</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">검색</div>
+    <div class="diagram-pill">공유</div>
+    <div class="diagram-pill">에이전트가 읽을 수 있음 links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **내장 레코더, 웹캠 오버레이, 오디오 캡처 및 일시 중지/자르기를 사용하여 화면을 녹화**하세요.

package/docs/content/locales/ko-KR/template-content.mdx

@@ -22,13 +22,69 @@ description: "MDX용 오픈 소스 Obsidian: 로컬 Markdown/MDX 파일을 편
 
 앱을 열면 편집기 옆에 페이지 트리가 표시됩니다. 상담원은 항상 귀하가 보고 있는 페이지와 귀하가 선택한 텍스트를 알고 있으므로 문서 편집 내용이 현재 페이지에 그대로 유지될 수 있습니다.
 
-```an-diagram title="하나의 문서, 많은 편집자" summary="귀하와 에이전트는 모두 동일한 Yjs 파이프라인을 통해 작성합니다. SQL은 표준 저장소입니다. 로컬 파일과 Notion은 선택적 동기화 표면입니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">입력합니다<br><small class=\"diagram-muted\">slash 메뉴, 툴바</small></div><div class=\"diagram-node\">에이전트 편집<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">실시간, 충돌 없는 병합</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">정식 SQL 저장소</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">로컬 .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion 페이지<br><small class=\"diagram-muted\">pull · push</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1liwdej" title={"하나의 문서, 많은 편집자"} summary={"귀하와 에이전트는 모두 동일한 Yjs 파이프라인을 통해 작성합니다. SQL은 표준 저장소입니다. 로컬 파일과 Notion은 선택적 동기화 표면입니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      입력합니다<br /><small class="diagram-muted">slash 메뉴, 툴바</small>
+    </div>
+    <div class="diagram-node">
+      에이전트 편집<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">실시간, 충돌 없는 병합</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted"
+      >정식 SQL 저장소</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      로컬 .md / .mdx<br /><small class="diagram-muted">/local-files</small>
+    </div>
+    <div class="diagram-box">
+      Notion 페이지<br /><small class="diagram-muted">pull · push</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **제목, 목록, 표, 코드 블록, 이미지 및 링크가 포함된 서식 있는 텍스트를 작성하세요**. 슬래시 명령(`/`)은 블록을 삽입합니다. 텍스트를 선택하면 서식 도구 모음이 나타납니다.

package/docs/content/locales/ko-KR/template-design.mdx

@@ -18,13 +18,67 @@ Design은 에이전트 기반 HTML 프로토타이핑 스튜디오입니다. 에
 
 앱을 열면 생성된 프로토타입이 작업 공간의 중심에 있으며 미리 보기 모드, 프롬프트 개정 및 내보내기 제어 기능이 가까이에 있습니다. 에이전트가 생성하는 모든 것은 실제 HTML이며 정제하거나 내보내거나 전달할 수 있습니다.
 
-```an-diagram title="하나의 아티팩트, 번역 없음" summary="에이전트는 독립형 Alpine/Tailwind HTML을 생성합니다. iframe, 편집 가능한 소스 및 모든 내보내기는 모두 동일한 파일을 읽습니다. 연결된 디자인 시스템은 각 패스에 토큰을 공급합니다."
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">프롬프트<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">디자인 시스템</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">에이전트 생성</span><small class=\"diagram-muted\">독립형 HTML / JSX 파일</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">노브 조정 · Cmd+I로 다듬기</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · 핸드오프</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-f6rg8p" title={"하나의 아티팩트, 번역 없음"} summary={"에이전트는 독립형 Alpine/Tailwind HTML을 생성합니다. iframe, 편집 가능한 소스 및 모든 내보내기는 모두 동일한 파일을 읽습니다. 연결된 디자인 시스템은 각 패스에 토큰을 공급합니다."}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      프롬프트<br /><small class="diagram-muted">describe screen / page</small>
+    </div>
+    <div class="diagram-pill">디자인 시스템</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">에이전트 생성</span
+    ><small class="diagram-muted">독립형 HTML / JSX 파일</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >노브 조정 · Cmd+I로 다듬기</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · 핸드오프</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 선택 시기
 
 - **계층화된 그리기 캔버스가 아닌 실제 HTML로 도구를 남길 수 있는 세련된 랜딩 페이지 컨셉, 제품 UI 방향 또는 브랜드 탐색**을 원합니다.
@@ -294,6 +348,50 @@ UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.t
 
 디자인은 독립형 HTML/JSX 파일이므로 에이전트는 iframe이 렌더링하고 모든 내보내기가 시작되는 동일한 소스를 편집합니다. 번역할 별도의 "AI 모형" 형식은 없습니다. 연결된 디자인 시스템은 에이전트가 모든 세대 패스에서 존중하는 토큰과 `custom_instructions`를 제공합니다. 미리보기에서 텍스트나 영역을 선택하고 Cmd+I를 눌러 상담사가 정확히 해당 부분에 집중하도록 합니다.
 
+### 편집기 모델
+
+Design은 여러 화면 작업에서 overview를 우선합니다. 생성 또는 넓은 업데이트
+후 편집기는 screen overview를 엽니다. 이곳은 각 화면이 선택, 이동, 크기 조정,
+드롭, 복제 가능한 정적 frame으로 배치되는 infinite canvas입니다. frame을 두
+번 클릭하면 단일 화면에 집중합니다.
+
+Single-screen mode는 스크롤, prototype behavior와의 상호작용, 하나의 렌더링된
+파일 안의 DOM/code layers 편집에 사용합니다. Layers panel도 같은 구조를
+반영합니다. screens는 top-level frames이고, active screen 아래에 nested
+DOM/code layers가 표시됩니다.
+
+안정적인 layer name을 위해 의미 있는 요소에 `data-agent-native-layer-name`을
+추가하세요. Design은 semantic/text fallback보다 이것을 먼저 사용하며, 해당
+attribute를 편집해 layer rename을 persist할 수 있습니다. Inline HTML은 text,
+classes, styles, attributes, source order, 작은 structural changes에 대한 local
+code-layer edits를 지원합니다. visual code-layer edits는 현재 HTML-only입니다.
+Localhost source mode는 local route artboards를 register/resolve할 수 있지만,
+local file reads/writes는 explicit permission controls가 harden될 때까지 bridge
+contract로 남아 있습니다.
+
+### Design 편집기 확장
+
+편집기에는 **Tweaks** 뒤에 **Extensions** 검사기 탭이 있습니다. Design 전용
+플러그인 레인처럼 작동합니다. 사용자는 **+ Extension**을 클릭해 에이전트에게
+확장을 만들게 하거나 `design.editor.inspector` 슬롯을 선언한 확장을 설치할
+수 있습니다.
+
+Design 확장은 표준 확장 sandbox를 통해 artboard 옆에 inline으로 렌더링됩니다.
+호스트는 현재 `designId`, 활성 파일, 화면 목록, 선택된 화면 id, 선택된 요소
+메타데이터, 보기 모드, zoom, 활성 도구, tweak 값을 `window.slotContext`와
+`window.onSlotContext(...)` 업데이트로 전달합니다. 이를 통해 확장은 현재
+selection 정보를 표시하고, 스타일 컨트롤을 제공하거나, 열린 디자인 주변의
+작은 워크플로를 만들 수 있습니다.
+
+결정적인 작업의 경우 확장은 extension bridge를 통해 app actions를 호출할 수
+있습니다. AI 기반 변경의 경우 선택된 요소 selector/source id와 요청한 변경을
+담아 `agentNative.chat.send(...)`를 호출하게 하세요. 에이전트는 먼저
+`view-screen`을 호출한 다음 요소 style, class, text, move 변경에는
+`apply-visual-edit`를, artboard placement 변경에는 `canvasFrames`와 함께
+`update-design` / `generate-design`를 사용해야 합니다. sandbox, persistent
+state, bridge APIs는 [Extensions](/docs/extensions#what-an-extension-can-do)를
+참조하세요.
+
 ### 맞춤 설정
 
 디자인은 완전하고 복제 가능한 템플릿입니다. 실용적인 확장 아이디어:

package/docs/content/locales/ko-KR/template-dispatch.mdx

@@ -20,13 +20,66 @@ description: "Dispatch는 중앙 받은 편지함, 앱 간 오케스트레이션
 
 많은 앱과 함께 [multi-app workspace](/docs/multi-app-workspace)를 실행하는 경우 Dispatch가 접착제입니다.
 
-```an-diagram title="전문화하지 말고 편성하라" summary="모든 채널의 메시지는 하나의 받은 편지함에 보관됩니다. 오케스트레이터는 도메인 작업을 분류하고 A2A을 통해 올바른 전문가 앱에 위임합니다. 비밀, 리소스 및 승인은 중앙에 유지됩니다."
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">A2A 요청</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">중앙 inbox · 분류 · 라우팅</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Mail 에이전트</div><div class=\"diagram-node\">Analytics 에이전트</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">비밀 저장소</span><span class=\"diagram-pill\">워크스페이스 리소스</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">예약된 작업</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-1mbldph" title={"전문화하지 말고 편성하라"} summary={"모든 채널의 메시지는 하나의 받은 편지함에 보관됩니다. 오케스트레이터는 도메인 작업을 분류하고 A2A을 통해 올바른 전문가 앱에 위임합니다. 비밀, 리소스 및 승인은 중앙에 유지됩니다."}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">A2A 요청</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">중앙 inbox · 분류 · 라우팅</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">Mail 에이전트</div>
+    <div class="diagram-node">Analytics 에이전트</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">비밀 저장소</span
+  ><span class="diagram-pill">워크스페이스 리소스</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">예약된 작업</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## 무엇을 하는가 {#what-it-does}
 
 - **중앙 받은 편지함.** Slack DM 메시지, 전보 메시지, 이메일 알림, 다른 에이전트의 A2A 요청 등이 모두 한 곳에 있습니다. Dispatch 에이전트는 심사를 거쳐 자체적으로 처리하거나 위임합니다. Slack, 이메일, 텔레그램을 작업 공간에 연결하는 방법은 [Messaging](/docs/messaging)를 참조하세요.

package/docs/content/locales/ko-KR/template-forms.mdx

@@ -18,13 +18,69 @@ Forms는 에이전트 기반 양식 작성 도구입니다. 원하는 양식을
 
 앱을 열면 양식, 현재 편집기 및 실시간 미리보기가 표시됩니다. 에이전트는 프롬프트에서 양식을 생성하고, 필드 레이블 및 옵션을 업데이트하고, 유효성 검사를 변경하고, UI가 사용하는 것과 동일한 actions를 사용하여 제출 대상을 연결할 수 있습니다.
 
-```an-diagram title="구축, 게시, 수집" summary="에이전트와 시각적 편집기는 하나의 SQL-backed 양식 정의를 편집합니다. 공개 채우기 페이지는 인증되지 않으며 제출 내용은 서버 측에서 대상으로 라우팅됩니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">에이전트 프롬프트<br><small class=\"diagram-muted\">\"add an NPS question\"</small></div><div class=\"diagram-node\">비주얼 편집기<br><small class=\"diagram-muted\">레이블, 검증, 순서</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-form · update-form</span><small class=\"diagram-muted\">필드 JSON, 설정 JSON</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">forms table<br><small class=\"diagram-muted\">Drizzle 기반 SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">공개 작성 페이지<br><small class=\"diagram-muted\">unauthenticated</small></div><div class=\"diagram-box\">responses<br><small class=\"diagram-muted\">Slack / webhook / Sheets 추가</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-19nq67h" title={"구축, 게시, 수집"} summary={"에이전트와 시각적 편집기는 하나의 SQL-backed 양식 정의를 편집합니다. 공개 채우기 페이지는 인증되지 않으며 제출 내용은 서버 측에서 대상으로 라우팅됩니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      에이전트 프롬프트<br /><small class="diagram-muted"
+        >"add an NPS question"</small
+      >
+    </div>
+    <div class="diagram-node">
+      비주얼 편집기<br /><small class="diagram-muted">레이블, 검증, 순서</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-form · update-form</span
+    ><small class="diagram-muted">필드 JSON, 설정 JSON</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    forms table<br /><small class="diagram-muted">Drizzle 기반 SQL</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      공개 작성 페이지<br /><small class="diagram-muted">unauthenticated</small>
+    </div>
+    <div class="diagram-box">
+      responses<br /><small class="diagram-muted"
+        >Slack / webhook / Sheets 추가</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **대화식으로 양식을 작성하세요.** "연락처 양식 만들기", "NPS 점수 질문 추가", "이메일 필드를 필수로 설정하세요." 에이전트는 양식 스키마를 업데이트하고 SQL 지원 상태에서 미리보기를 업데이트합니다.