@agent-native/core 0.76.5 → 0.76.6

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

@@ -0,0 +1,402 @@
+---
+title: "콘텐츠"
+description: "MDX용 오픈 소스 Obsidian: 로컬 Markdown/MDX 파일을 편집하고, 풍부한 대화형 사용자 정의 블록을 생성하고, AI 에이전트로 작성합니다."
+---
+
+# 콘텐츠
+
+콘텐츠는 MDX용 오픈 소스 Obsidian입니다: 로컬 파일 친화적인 문서
+에이전트가 페이지를 읽고, 쓰고, 재구성하고, 게시할 수 있는 작업 공간
+당신. 문서를 열고 "이 문단을 더 간결하게 다시 작성해 주세요" 또는 "문단 만들기
+목표, 지표 및 위험에 대한 하위 페이지가 포함된 Q4 Planning이라는 페이지" - 동일
+직접 하든, 물어보든 결과가 나옵니다.
+
+```an-wireframe
+{
+  "surface": "desktop",
+  "html": "<div style='display:grid;grid-template-columns:210px 1fr;gap:14px;padding:16px;min-height:500px;box-sizing:border-box'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Content</strong><span class='wf-pill accent'>Q3 Roadmap</span><span class='wf-pill'>Goals</span><span class='wf-pill'>Metrics</span><span class='wf-pill'>Risks</span><hr/><span class='wf-pill'>Engineering wiki</span><span class='wf-pill'>Reading list</span><span class='wf-pill'>Weekly sync</span></aside><main style='display:flex;flex-direction:column;gap:12px;min-width:0;padding:8px 20px'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Q3 Roadmap</h1><div style='flex:1'></div><button>Share</button><button class='primary'>Publish</button></div><div class='wf-card' style='flex:1;display:flex;flex-direction:column;gap:12px;padding:22px'><h2 style='margin:0'>Launch goals</h2><p style='margin:0'>Ship the onboarding flow, reduce setup time, and document owner handoffs.</p><div class='wf-box'>At a glance · owner, window, status</div><div class='wf-box'>Top objectives</div><div class='wf-box'>Workstreams table</div></div></main></div>"
+}
+```
+
+앱을 열면 편집기 옆에 페이지 트리가 표시됩니다. 상담원은 항상 귀하가 보고 있는 페이지와 귀하가 선택한 텍스트를 알고 있으므로 문서 편집 내용이 현재 페이지에 그대로 유지될 수 있습니다.
+
+```an-diagram title="One document, many editors" summary="You and the agent both write through the same Yjs pipeline. SQL is the canonical store; local files and Notion are optional sync surfaces."
+{
+  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">You type<br><small class=\"diagram-muted\">slash menu, toolbar</small></div><div class=\"diagram-node\">Agent edits<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\">live, conflict-free merge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">canonical SQL store</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Local .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion pages<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}"
+}
+```
+
+## 그것으로 무엇을 할 수 있나요
+
+- **제목, 목록, 표, 코드 블록, 이미지 및 링크가 포함된 서식 있는 텍스트를 작성하세요**. 슬래시 명령(`/`)은 블록을 삽입합니다. 텍스트를 선택하면 서식 도구 모음이 나타납니다.
+- **페이지를 트리로 정리** — 자주 사용하는 즐겨찾는 페이지를 무한히 중첩하고 드래그하여 재정렬하세요.
+- 제목과 콘텐츠 전체에 대한 전체 텍스트 검색으로 **모든 것을 검색**하세요.
+- **Obsidian과 같은 로컬 Markdown/MDX 파일을 편집합니다.** `/local-files` 보기를 사용하세요.
+  작업 공간을 파일로 내보내고, 자신의 도구에서 편집하고, 미리 보려면
+  변경 사항을 다시 가져옵니다. 로컬 파일 모드에서는 콘텐츠가 바로
+  선택한 `.md` 또는 `.mdx` 파일
+- **풍부한 대화형 사용자 정의 블록을 생성합니다.** 로컬 React 구성요소를 등록합니다.
+  이를 MDX로 삽입하고 에이전트가 다음에 대한 구성 요소 파일을 생성하거나 업데이트하도록 합니다.
+  문서
+- **Notion와 동기화.** 로컬 문서를 Notion 페이지에 연결하고 콘텐츠를 어느 방향으로든 당기거나 밀어넣습니다. 댓글도 양방향으로 동기화됩니다.
+- **실시간으로 공동작업합니다.** 여러 사람(및 상담원)이 동시에 동일한 문서를 편집할 수 있습니다.
+- **문서를 공유** 팀원과 공유하거나 공개로 설정하세요. 기본적으로 뷰어/편집자/관리자 역할이 있는 비공개입니다.
+- **상담원에게 무엇이든 물어보세요**: "이 문단을 다시 작성하세요." "상단에 TL;DR을 추가하세요." "지난주 회의록을 모두 찾아주세요." "이 톤을 좀 더 격식 있게 만들어 보세요."
+
+## 시작하기
+
+라이브 데모: [content.agent-native.com](https://content.agent-native.com).
+
+앱을 열면 사이드바에서 **+ 새 페이지**를 클릭하고 제목을 지정한 후 글쓰기를 시작하세요. 에이전트를 사용하려면 사이드바에 다음을 입력하세요:
+
+- "Onboarding이라는 페이지를 만들고 그 아래에 3개의 하위 페이지를 추가하세요."
+- "이 단락을 더 간결하게 다시 작성하세요." (페이지가 열린 상태에서)
+- "세 개의 중요 항목으로 가격 책정에 관한 섹션을 추가하세요."
+- "이 문서를 상단에 TL;DR로 요약하세요."
+- "Notion에서 최신 버전을 가져옵니다." (Notion 페이지 연결 후)
+
+텍스트를 선택하고 Cmd+I를 눌러 해당 선택 항목이 미리 로드된 에이전트에 초점을 맞춥니다. "더 강력하게 만들기"를 선택한 다음 강조표시한 내용에 대해 정확히 작동합니다.
+
+## 로컬 Markdown/MDX 파일 {#local-files}
+
+콘텐츠를 복제하거나 실행하지 않고도 로컬 파일을 통해 문서를 왕복할 수 있습니다.
+콘텐츠 앱을 로컬로. MDX용 Obsidian과 같은 느낌: 파일을 계속 검사할 수 있습니다.
+편집 가능하며 앱은 풍부한 편집기, 에이전트 actions, 공유 및
+사용자 정의 블록. `/local-files`를 열고 브라우저나 에이전트에서 폴더를 선택하세요
+네이티브 데스크톱을 실행하고 현재 문서 트리를 아래의 Markdown/MDX로 내보냅니다.
+`content/`.
+
+내보낸 각 파일에는 문서 메타데이터에 대한 머리말이 포함되어 있습니다(`id`, `title`,
+`parentId`, `position`, 즐겨찾기/검색/가시성 플래그 및 `updatedAt`) 플러스
+문서 본문은 Markdown입니다. 일반 편집기에서 해당 파일을 편집할 수 있습니다.
+그런 다음 `/local-files`로 돌아가 변경 사항을 미리 보고 다시 콘텐츠로 가져옵니다.
+
+이 워크플로는 소스 제어의 콘텐츠를 원하거나 일괄 처리하려는 경우에 유용합니다.
+로컬 도구를 사용하여 문서를 편집하거나 파일을 선호하는 팀을 위한 복제 방지 경로를 원함
+리뷰 표면으로 사용됩니다. 호스팅된 앱은 공유를 위한 정보의 소스로 남아 있습니다.
+댓글, 권한 및 실시간 공동 작업 로컬 폴더는 명시적입니다
+동기화 표면.
+
+파일이 원본인 **로컬 파일 모드**에서도 콘텐츠를 실행할 수 있습니다.
+SQL 문서 대신 진실. 저장소에 `agent-native.json`를 추가하고 설정
+`mode: "local-files"` 및 `docs/`, `blog/`와 같은 루트 구성
+`content/` 및 `resources/`. 그러면 표준 콘텐츠 편집기가 해당 항목을 채웁니다.
+해당 로컬 `.md`/`.mdx` 파일의 왼쪽 사이드바를 편집하고 편집 내용을 다시
+일반 문서 actions를 통해 선택한 파일입니다. 저장소 우선 문서에 이것을 사용하세요.
+MDX 기반 블로그, 리소스 라이브러리 또는 Obsidian 스타일의 개인 콘텐츠
+구성요소; 호스팅된 공동 작업을 원할 때 데이터베이스 모드로 다시 전환하고
+SQL 지원 공유. 자세한 내용은 [Local File Mode](/docs/local-file-mode)를 참조하세요.
+독립형 저장소 레이아웃, 구성, 사용자 정의 MDX 구성 요소, 로컬
+`extensions/` 위젯 및 생산 안전 가이드.
+
+기존 저장소에 콘텐츠 로컬 파일 기술을 설치하려면:
+
+```bash
+npx @agent-native/core@latest skills add content --mode local-files --scope project
+```
+
+설치 프로그램은 코딩 에이전트에 대한 `content` 기술을 복사하고 쓰기 또는
+`docs/`, `blog/`, `content/`에 대한 콘텐츠 루트로 `agent-native.json`를 업데이트합니다.
+및 `resources/`. 로컬 콘텐츠 앱, Agent Native 데스크톱 또는 신뢰할 수 있는 경우
+로컬 브리지가 실행 중입니다. 에이전트는 다음과 같은 Content actions를 사용해야 합니다.
+`list-documents`, `get-document`, `edit-document`, `update-document` 및
+원시 파일 시스템 쓰기 대신 `share-local-file-document`. 그 지역이 없으면
+브리지, 설치된 스킬은 여전히 에이전트에게 저장소 편집 계약을 제공합니다
+Markdown/MDX 편집은 안전합니다.
+
+## 개발자용
+
+이 문서의 나머지 부분은 콘텐츠 템플릿을 포크하거나 확장하는 모든 사람을 위한 것입니다.
+
+### 빠른 시작
+
+콘텐츠 템플릿을 사용하여 새 작업 공간을 스캐폴드합니다.
+
+```bash
+npx @agent-native/core@latest create my-workspace --standalone --template content
+cd my-workspace
+pnpm install
+pnpm dev
+```
+
+`http://localhost:8083`를 열고 첫 번째 페이지를 만드세요. 그런 다음 상담원에게 "Onboarding이라는 페이지를 만들고 그 아래에 3개의 하위 페이지를 추가하세요"라고 요청하세요.
+
+### 주요 기능 {#key-features}
+
+**중첩된 페이지.** 문서는 즐겨찾기, 아이콘, 순서 및 페이지 수준 공유가 포함된 드래그 가능한 트리를 형성합니다.
+
+**Rich MDX 편집기.** Tiptap은 제목, 목록, 표, 코드 블록, 이미지, 링크, 슬래시 명령, 선택 도구 모음 및 로컬 React 구성 요소를 지원합니다.
+
+**실시간 공동 작업.** Yjs는 여러 편집자와 에이전트 편집 내용을 서로 방해하지 않고 동기화 상태로 유지합니다.
+
+**검색 및 댓글.** 전체 텍스트 검색, 고정된 댓글, 버전 기록 및 복원 흐름이 문서 표면에 내장되어 있습니다.
+
+**동기화 표면.** 문서는 Notion 또는 로컬 Markdown/MDX 폴더와 동기화할 수 있으며 SQL는 공동 캐시/기록 레이어 역할을 합니다.
+
+### 로컬 파일 동기화
+
+보호된 `/local-files` 경로는 브라우저 파일 시스템 액세스 API를 사용하거나
+읽고 쓰기 위한 Agent Native 데스크탑 내부의 보호된 기본 폴더 브리지
+사용자가 선택한 폴더의 Markdown/MDX 파일. 폴더가 링크된 후
+가져오면 선택한 파일이 권한으로 처리됩니다. 페이지를 열면 읽습니다
+파일을 저장하고 일반 편집기 저장에서는 파일을 먼저 작성합니다. SQL는 다음과 같이 업데이트됩니다.
+기존 문서 UI, 검색 및 버전 패널에 대한 캐시/기록 레이어
+진실의 근원으로. 오른쪽 상단 페이지 메뉴에는 로컬 소스 경로가 표시됩니다:
+상대 경로는 항상 사용 가능하며, 실제 로컬 파일에서는 절대 경로가 사용 가능합니다.
+모드 및 Agent Native 데스크톱, Finder에 표시는
+데스크탑 브리지 또는 서버 지원 로컬 파일 모드.
+
+대량 동기화 경로 호출:
+
+- `export-content-source` — 액세스 가능한 문서 트리를 읽고
+  결정적 `content/` 파일 번들.
+- `import-content-source` — 파일 유효성을 검사하고 새 개인 문서를 생성합니다.
+  발신자가 편집자 액세스 권한을 갖고 있는 문서를 업데이트하고 버전을 보존합니다.
+  기록을 작성하고 유효하지 않은 상위 주기를 거부합니다.
+
+소스 형식은 `shared/content-source.ts`에 있습니다. 해당 파일을 다음과 같이 보관하세요.
+파일 이름, 머리말, 구문 분석 및 직렬화에 대한 단일 계약
+
+로컬 파일 작업공간은 다음을 통해 repo-local React 구성요소를 제공할 수도 있습니다.
+`components` 폴더를 구성했습니다. 콘텐츠 개발 서버는 PascalCase를 가져옵니다
+해당 파일에서 내보내고 `<ImpactCounter />`와 같은 MDX 태그와 일치하는 렌더링
+편집기 내부에 있으며 로컬 구성 요소 아래 슬래시 메뉴에 표시됩니다.
+이것은 "MDX용 흑요석" 레이어입니다. 사용자 정의 MDX 블록은 로컬에 유지됩니다.
+작업 공간이지만 편집자가 이를 렌더링할 수 있고 에이전트가 생성하거나 업데이트할 수 있습니다
+콘텐츠 앱을 복제하지 않고 소스를 복사합니다. 최소한의 작업 공간 구성 요소는
+될 것:
+
+```tsx
+// components/ImpactCounter.tsx
+import { useState } from "react";
+
+export function ImpactCounter({
+  label = "points",
+  start = 3,
+}: {
+  label?: string;
+  start?: number;
+}) {
+  const [count, setCount] = useState(start);
+  return (
+    <button type="button" onClick={() => setCount(count + 1)}>
+      Impact: {count} {label}
+    </button>
+  );
+}
+
+export const ImpactCounterInputs = {
+  label: { type: "string", label: "Label", default: "points" },
+  start: { type: "number", label: "Starting count", default: 3 },
+};
+```
+
+로컬 MDX에서 `<ImpactCounter />`로 사용하거나 편집기 슬래시에서 삽입
+로컬 구성 요소 아래 메뉴. 입력 메타데이터를 내보낼 때
+편집기의 구성 요소에는 MDX 소품을 다시 작성하는 모서리 편집 버튼이 표시됩니다.
+로컬 파일에
+
+브라우저 **로컬 파일** 선택기는 다음에서 `.md` 및 `.mdx` 파일을 읽고 쓸 수 있습니다.
+자체이지만 실행 가능한 React 구성 요소 미리 보기에는 로컬 컴파일러가 필요합니다. 실행
+콘텐츠를 로컬로 사용하거나 Agent Native 데스크탑을 사용하여 선택한 작업공간 경로를 사용할 수 있습니다.
+로컬 콘텐츠 개발 서버에 등록되어야 합니다. Vite는 가져옵니다
+`components/*.tsx`, 기존 구성 요소 파일에 대한 편집 내용을 핫 리로드하고 다시 로드합니다.
+파일이 추가되거나 제거될 때 구성요소 레지스트리. 상담원은
+`list-local-component-files` 및 `write-local-component-file` 검사 또는
+편집기가 동일한 소스에서 업데이트하는 동안 등록된 구성 요소 파일을 업데이트합니다.
+
+### 댓글
+
+인용 텍스트 앵커, 응답 및 해결 상태가 있는 문서에 대한 스레드 댓글입니다. `document_comments` 테이블과 `app/components/editor/CommentsSidebar.tsx`가 지원됩니다. Actions: `list-comments`, `add-comment`. Notion 댓글은 `sync-notion-comments`를 통해 양방향으로 동기화할 수 있습니다.
+
+### 버전 기록
+
+모든 중요한 업데이트는 `document_versions` 테이블의 행 스냅샷을 생성합니다. UI는 `app/components/editor/VersionHistoryPanel.tsx`에서 이를 표면화합니다.
+
+### 공유 및 가시성
+
+문서는 기본적으로 비공개입니다. 가시성을 `org` 또는 `public`로 변경하거나 사용자별 및 조직별 역할(`viewer`, `editor`, `admin`)을 부여할 수 있습니다. 프레임워크의 자동 마운트 공유 actions는 즉시 사용할 수 있습니다.
+
+- `share-resource --resourceType document --resourceId <id> --principalType user --principalId <email> --role editor`
+- `unshare-resource` / `list-resource-shares` / `set-resource-visibility`
+
+`sharing` 스킬을 확인하세요.
+
+### 팀
+
+`/team`(`app/routes/_app.team.tsx` 참조)의 전용 팀 페이지에서는 조직을 만들고 구성원을 관리하기 위해 프레임워크의 `TeamPage` 구성 요소를 사용합니다.
+
+### 에이전트와 협력하기
+
+상담원은 현재 화면을 보기 때문에 대부분의 프롬프트에서는 문서를 명시적으로 참조할 필요가 없습니다. 페이지가 열려 있을 때 "이"는 해당 페이지를 의미합니다.
+
+작은 편집의 경우 에이전트는 `edit-document --find ... --replace ...`를 사용하므로 변경된 텍스트만 Yjs를 통해 흐르게 됩니다. 전체 페이지를 다시 렌더링하는 대신 차이점이 적용된 것을 볼 수 있습니다. 더 큰 규모의 재작성을 위해서는 `update-document --content ...`를 사용합니다.
+
+텍스트를 선택하고 Cmd+I를 누르거나 상담원 패널에 초점을 맞추면 선택 항목이 다음 메시지와 함께 컨텍스트로 이동하므로 "더 강력하게 만들기"는 강조표시한 내용에 정확하게 적용됩니다.
+
+### 데이터베이스 및 속성
+
+문서는 인라인 데이터베이스(각 행 자체가 문서인 Notion 스타일 테이블)를 호스팅할 수 있습니다. 에이전트는 actions: `create-content-database`, `add-database-item`, `set-document-property`를 통해 데이터베이스를 생성하고, 항목을 추가하고, 열 정의를 구성하고, 속성 값을 설정할 수 있습니다. 속성 정의(유형, 가시성, 옵션, 위치)는 `document_property_definitions`에 있습니다. 행별 값은 `document_property_values`에 있습니다.
+
+### 추가 actions
+
+데이터 모델의 CRUD 표면을 넘어서 템플릿은 페이지를 Markdown 또는 HTML로 변환하기 위한 `export-document`, 페이지에 기록을 첨부하기 위한 `transcribe-media`, 이전 스냅샷으로 롤백하기 위한 `restore-document-version`를 제공합니다.
+
+### 데이터 모델
+
+9개의 테이블, 모두 `server/db/schema.ts`에 정의됨:
+
+- **`documents`** — 페이지 트리. 열: `id`, `parent_id`, `title`, `content`(마크다운), `icon`, `position`, `is_favorite`, `visibility`, `owner_email`, `org_id`, `created_at`, `updated_at`.
+- **`document_versions`** — 버전 기록을 위한 제목 및 콘텐츠의 전체 스냅샷입니다. `restore-document-version`로 롤백하세요.
+- **`document_comments`** — 양방향 Notion 동기화를 위해 `thread_id`, `parent_id`, `quoted_text`, `resolved` 및 선택적 `notion_comment_id`가 포함된 스레드 주석.
+- **`document_sync_links`** — 원격 페이지 ID, 마지막 동기화 시간, 충돌 상태, 콘텐츠 해시 및 오류를 추적하는 Notion 링크 문서당 한 행.
+- **`document_property_definitions`** — 인라인 데이터베이스에 대한 열 정의: 이름, 유형, 가시성, 옵션 및 위치.
+- **`content_databases`** — 제목 및 보기 구성 JSON를 사용하여 `document_id`에 연결된 인라인 데이터베이스 개체입니다.
+- **`content_database_items`** — 인라인 데이터베이스의 행으로, 각각 `database_id`를 `document_id`에 연결합니다.
+- **`document_property_values`** — 문서별 속성 값(`property_id` → `value_json`).
+- **`document_shares`** — `createSharesTable`를 통해 생성된 사용자별 및 조직별 보조금.
+
+```an-schema title="Content data model" summary="Nine tables in server/db/schema.ts. documents is the page tree; the rest hang off it for versions, comments, Notion sync, inline databases, and sharing."
+{
+  "entities": [
+    {
+      "id": "documents",
+      "name": "documents",
+      "note": "The page tree (ownable, markdown body)",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "parent_id", "type": "id", "fk": "documents.id", "nullable": true, "note": "infinite nesting" },
+        { "name": "title", "type": "string" },
+        { "name": "content", "type": "markdown" },
+        { "name": "icon", "type": "string", "nullable": true },
+        { "name": "position", "type": "int", "note": "sibling ordering" },
+        { "name": "is_favorite", "type": "bool" },
+        { "name": "visibility", "type": "enum", "note": "private | org | public" },
+        { "name": "owner_email", "type": "string" },
+        { "name": "org_id", "type": "id", "nullable": true }
+      ]
+    },
+    {
+      "id": "document_versions",
+      "name": "document_versions",
+      "note": "Full title/content snapshots for version history",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "document_id", "type": "id", "fk": "documents.id" },
+        { "name": "title", "type": "string" },
+        { "name": "content", "type": "markdown" }
+      ]
+    },
+    {
+      "id": "document_comments",
+      "name": "document_comments",
+      "note": "Threaded comments with quoted-text anchors",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "document_id", "type": "id", "fk": "documents.id" },
+        { "name": "thread_id", "type": "id" },
+        { "name": "parent_id", "type": "id", "fk": "document_comments.id", "nullable": true },
+        { "name": "quoted_text", "type": "string", "nullable": true },
+        { "name": "resolved", "type": "bool" },
+        { "name": "notion_comment_id", "type": "string", "nullable": true, "note": "bidirectional Notion sync" }
+      ]
+    },
+    {
+      "id": "document_sync_links",
+      "name": "document_sync_links",
+      "note": "One row per Notion-linked document",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "document_id", "type": "id", "fk": "documents.id" },
+        { "name": "notion_page_id", "type": "string" },
+        { "name": "conflict", "type": "bool" },
+        { "name": "content_hash", "type": "string" }
+      ]
+    },
+    {
+      "id": "content_databases",
+      "name": "content_databases",
+      "note": "Inline database objects attached to a document",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "document_id", "type": "id", "fk": "documents.id" },
+        { "name": "title", "type": "string" },
+        { "name": "view_config", "type": "json" }
+      ]
+    },
+    {
+      "id": "content_database_items",
+      "name": "content_database_items",
+      "note": "Rows in an inline database (each row is a document)",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "database_id", "type": "id", "fk": "content_databases.id" },
+        { "name": "document_id", "type": "id", "fk": "documents.id" }
+      ]
+    },
+    {
+      "id": "document_property_definitions",
+      "name": "document_property_definitions",
+      "note": "Column definitions for inline databases",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "name", "type": "string" },
+        { "name": "type", "type": "string" },
+        { "name": "options", "type": "json", "nullable": true },
+        { "name": "position", "type": "int" }
+      ]
+    },
+    {
+      "id": "document_property_values",
+      "name": "document_property_values",
+      "note": "Per-document property values",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "document_id", "type": "id", "fk": "documents.id" },
+        { "name": "property_id", "type": "id", "fk": "document_property_definitions.id" },
+        { "name": "value_json", "type": "json" }
+      ]
+    },
+    {
+      "id": "document_shares",
+      "name": "document_shares",
+      "note": "Per-user and per-org grants (createSharesTable)",
+      "fields": [
+        { "name": "id", "type": "id", "pk": true },
+        { "name": "document_id", "type": "id", "fk": "documents.id" },
+        { "name": "principal", "type": "string" },
+        { "name": "role", "type": "enum", "note": "viewer | editor | admin" }
+      ]
+    }
+  ],
+  "relations": [
+    { "from": "documents", "to": "documents", "kind": "1-n", "label": "has children" },
+    { "from": "documents", "to": "document_versions", "kind": "1-n", "label": "has snapshots" },
+    { "from": "documents", "to": "document_comments", "kind": "1-n", "label": "has comments" },
+    { "from": "documents", "to": "document_sync_links", "kind": "1-1", "label": "links to Notion" },
+    { "from": "documents", "to": "content_databases", "kind": "1-n", "label": "hosts databases" },
+    { "from": "content_databases", "to": "content_database_items", "kind": "1-n", "label": "has rows" },
+    { "from": "document_property_definitions", "to": "document_property_values", "kind": "1-n", "label": "has values" },
+    { "from": "documents", "to": "document_shares", "kind": "1-n", "label": "has share grants" }
+  ]
+}
+```
+
+콘텐츠는 마크다운으로 저장됩니다. 편집기는 메모리의 Tiptap JSON 모델과 상호 변환합니다. SQL 행은 항상 마크다운이므로 actions, 검색 및 Notion 동기화는 단일 표준 형식에서 작동할 수 있습니다.
+
+소유 가능한 모든 테이블에는 `ownableColumns()`를 통해 `owner_email` 및 `org_id`가 포함되므로 모든 행은 생성된 순간부터 로그인한 사용자(및 선택적으로 활성 조직)로 범위가 지정됩니다.
+
+### 사용자 정의
+
+행동을 변경할 때 살펴봐야 할 4가지 장소:
+
+- **`actions/`** — 에이전트 또는 UI가 수행할 수 있는 모든 작업입니다. `defineAction`를 사용하여 `actions/publish-to-wordpress.ts`와 같은 새 파일을 추가하면 양측 모두 무료로 받을 수 있습니다. 기존 actions 키: `create-document.ts`, `edit-document.ts`, `update-document.ts`, `delete-document.ts`, `list-documents.ts`, `search-documents.ts`, `get-document.ts`, `pull-notion-page.ts`, `push-notion-page.ts`, `add-comment.ts`, `view-screen.ts`, `navigate.ts`.
+- **`app/routes/`** — 페이지 표면. `_app.tsx`는 사이드바와 에이전트 패널을 마운트된 상태로 유지하는 경로 없는 레이아웃입니다. `_app._index.tsx`는 ​​착지 뷰입니다. `_app.page.$id.tsx`는 편집기 경로입니다. `_app.team.tsx`는 팀 설정 페이지입니다.
+- **`app/components/editor/`** — Tiptap 편집기. `extensions/` 아래에 새로운 노드 유형을 추가하고 `DocumentEditor.tsx`에 등록합니다. 풍선 도구 모음, 슬래시 메뉴 및 마우스 오버 미리보기는 모두 편집할 수 있는 구성요소 파일입니다.
+- **`.agents/skills/`** — 에이전트가 행동하기 전에 읽는 지침입니다. 새 기능(예: CMS 게시 파이프라인)을 추가하는 경우 에이전트가 올바르게 사용할 수 있도록 `SKILL.md`를 새 기술 폴더에 놓습니다. 기존 skills: `document-editing`, `notion-integration`, `real-time-sync`, `delegate-to-agent`, `storing-data`, `self-modifying-code`, `security`, `frontend-design`, `create-skill`, `capture-learnings`.
+- **`AGENTS.md`** — 작업 치트시트와 일반 작업 표가 포함된 최상위 에이전트 가이드입니다. 상담원이 탐색하지 않고도 발견할 수 있도록 주요 기능을 추가할 때마다 업데이트하세요.
+- **`server/db/schema.ts`** — 데이터 모델. 여기에 열이나 테이블을 추가하세요. 콘텐츠 템플릿에는 `db:push` 스크립트가 없습니다. 시작 시 실행되는 추가 마이그레이션에 엄격하게 의존합니다. `server/db/schema.ts`를 편집하고 일치하는 추가 마이그레이션을 작성하면 다음에 앱이 부팅될 때 변경 사항이 적용됩니다. 스키마 업데이트는 절대 기존 테이블이나 열을 삭제하거나 이름을 바꾸거나 파괴적으로 변경해서는 안 됩니다(지침은 [Database](/docs/database#migrations) 참조).
+- **`shared/notion-markdown.ts`** — 마크다운에서 Notion 블록으로의 변환. Notion를 통해 왕복해야 하는 새로운 블록 유형을 추가하는 경우 이를 확장하세요.
+
+에이전트는 이러한 모든 변경 작업을 자체적으로 수행할 수 있습니다. "문서에 태그 열을 추가하고 사이드바에 표시"하도록 요청하면 스키마를 업데이트하고, 마이그레이션하고, UI를 연결하고, 작업을 작성합니다.

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

@@ -0,0 +1,173 @@
+---
+title: "디자인"
+description: "에이전트 기반 HTML 프로토타이핑 스튜디오 — 에이전트를 통해 대화형 Alpine/Tailwind 디자인을 생성, 개선, 미리보기 및 내보낼 수 있습니다."
+---
+
+# 디자인
+
+Design은 에이전트 기반 HTML 프로토타이핑 스튜디오입니다. 에이전트는 계층화된 그리기 캔버스 대신 완전한 독립형 Alpine/Tailwind HTML 프로토타입을 생성하고 이를 iframe에서 렌더링하며 프롬프트 및 조정 컨트롤을 통해 결과를 구체화할 수 있습니다.
+
+```an-wireframe
+{
+  "surface": "desktop",
+  "html": "<div style='display:flex;flex-direction:column;gap:14px;padding:18px;min-height:520px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Product launch page</h1><span class='wf-pill accent'>Desktop</span><span class='wf-pill'>Tablet</span><span class='wf-pill'>Mobile</span><div style='flex:1'></div><button>Preview</button><button class='primary'>Export code</button></div><div class='wf-card' style='flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px'><div style='display:flex;gap:8px'><span class='wf-pill accent'>Hero</span><span class='wf-pill'>Pricing</span><span class='wf-pill'>FAQ</span></div><div class='wf-box' style='display:flex;align-items:center;justify-content:center;min-height:230px'><strong>Generated HTML prototype</strong></div><div class='wf-card' style='display:flex;align-items:center;gap:10px'><span class='wf-muted'>Make the hero denser and the CTA clearer.</span><div style='flex:1'></div><button class='primary'>Apply revision</button></div></div></div>"
+}
+```
+
+앱을 열면 생성된 프로토타입이 작업 공간의 중심에 있으며 미리 보기 모드, 프롬프트 개정 및 내보내기 제어 기능이 가까이에 있습니다. 에이전트가 생성하는 모든 것은 실제 HTML이며 정제하거나 내보내거나 전달할 수 있습니다.
+
+```an-diagram title="One artifact, no translation" summary="The agent generates standalone Alpine/Tailwind HTML; the iframe, the editable source, and every export all read the same files. A linked design system feeds tokens into each pass."
+{
+  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">Design system</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Agent generate</span><small class=\"diagram-muted\">standalone HTML / JSX files</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\">tweak knobs · Cmd+I refine</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 · handoff</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}"
+}
+```
+
+## 선택 시기
+
+- **계층화된 그리기 캔버스가 아닌 실제 HTML로 도구를 남길 수 있는 세련된 랜딩 페이지 컨셉, 제품 UI 방향 또는 브랜드 탐색**을 원합니다.
+- **정적 모형 대신 Alpine interactions 및 Tailwind 스타일을 사용하여 작동하는 대화형 프로토타입**을 원합니다.
+- **방향을 빠르게 비교**하고, 몇 가지 변형을 생성하고, 가장 강력한 것을 선택하고, 계속 개선하고 싶습니다.
+- **자신만의 디자인 출력을 원하는 경우** — HTML, ZIP 또는 PDF를 내보내거나 프로토타입을 코딩 도구에 전달하세요.
+
+## 그것으로 무엇을 할 수 있나요
+
+- **완전한 프로토타입을 생성합니다.** 필요한 화면이나 페이지를 설명하면 상담원이 Tailwind 스타일과 Alpine interactions를 사용하여 작동하는 HTML 문서를 만듭니다.
+- **변형을 비교하세요.** 여러 방향으로 시작하여 가장 강력한 방향을 선택한 다음 계속해서 개선하세요.
+- **시각적으로 조정하세요.** 일반적인 변경 사항에는 내장된 조정 컨트롤을 사용하거나 상담원에게 복사, 레이아웃, 색상, 간격 및 상호 작용 업데이트를 요청하세요.
+- **디자인 시스템을 적용합니다.** 디자인 시스템 기본 설정을 저장하고 재사용하여 생성된 작업이 귀하의 브랜드에 더 가깝게 유지됩니다.
+- **참조 가져오기.** 기존 HTML 또는 참조 자료를 새로운 디자인 단계의 맥락으로 가져옵니다.
+- **실제 파일 내보내기.** 생성된 프로토타입에서 HTML, ZIP 또는 PDF를 내보냅니다.
+
+## 시작하기
+
+라이브 데모: [design.agent-native.com](https://design.agent-native.com).
+
+1. **아티팩트를 설명합니다.** 화면, 흐름, 랜딩 페이지 또는 시각적 요소를 요청하세요.
+   원하는 방향. 청중, 어조, 제품 제약 조건을 포함하세요.
+2. **방향을 비교하세요.** 몇 가지 변형을 생성하고 가장 강력한 변형을 선택한 후
+   다시 시작하는 대신 계속 개선하세요.
+3. **세부 사항을 조정하세요.** 일반적인 시각적 변경 사항에 대해서는 조정 컨트롤을 사용하거나 문의하세요
+   레이아웃, 복사, 반응 및 상호작용 변경을 위한 에이전트
+4. **유용할 때 내보내기.** 프로토타입이 완성되면 HTML, ZIP 또는 PDF를 다운로드하세요.
+   다른 도구나 팀원에게 전달할 준비가 되었습니다.
+
+### 유용한 메시지
+
+- "기술 분석 제품에 대한 세 가지 랜딩 페이지 방향을 만듭니다."
+- "이 대시보드를 더 조밀하게 만들고 운영팀이 검색하기 쉽게 만드세요."
+- "저장된 디자인 시스템을 적용하고 모바일 레이아웃을 단순화합니다."
+- "최종 변형이 선택되면 이 프로토타입을 ZIP로 내보냅니다."
+- "브랜드 색상을 변경하지 않고 이 HTML를 더욱 강력한 가격 페이지로 전환하세요."
+
+## 개발자용
+
+이 문서의 나머지 부분은 디자인 템플릿을 포크하거나 확장하는 모든 사람을 위한 것입니다.
+
+### 빠른 시작
+
+```bash
+npx @agent-native/core@latest create my-design --standalone --template design
+cd my-design
+pnpm install
+pnpm dev
+```
+
+### 데이터 모델
+
+모든 데이터는 Drizzle ORM를 통해 SQL에 있습니다. 스키마: `templates/design/server/db/schema.ts`. 디자인 및 디자인 시스템은 표준 `ownableColumns`와 일치하는 프레임워크 공유 테이블을 전달하므로 사용자별/조직별 공유 모델에 속합니다.
+
+| 테이블                                   | 무엇을 담고 있는지                                                                                                                   |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `designs`                                | 디자인 프로젝트 — `title`, `description`, `project_type` (`prototype` / `other`), `data` JSON blob 및 선택적 `design_system_id` 링크 |
+| `design_files`                           | 디자인에 속하는 개별 파일(기본적으로 `filename`, `content`, `file_type`는 `html`로 설정됨)                                           |
+| `design_versions`                        | 이력 및 롤백을 위한 선택적 `label`가 있는 설계의 특정 시점 `snapshot`                                                                |
+| `design_systems`                         | 재사용 가능한 브랜드 토큰 — `data`(색상/타이포그래피/간격), `assets`, `custom_instructions` 및 `is_default` 플래그                   |
+| `design_shares` / `design_system_shares` | 프레임워크는 주체(사용자 또는 조직)를 역할(뷰어, 편집자, 관리자)에 매핑하는 테이블을 공유합니다.                                     |
+
+```an-schema title="Design data model" summary="A design owns its files and versioned snapshots, and optionally links a reusable design system. Both designs and systems are ownable, each with a framework shares table."
+{
+  "entities": [
+    { "id": "designs", "name": "designs", "note": "A design project (ownable)", "fields": [
+      { "name": "id", "type": "id", "pk": true },
+      { "name": "title", "type": "text" },
+      { "name": "description", "type": "text", "nullable": true },
+      { "name": "project_type", "type": "text", "note": "prototype / other" },
+      { "name": "data", "type": "json", "note": "starts as {}" },
+      { "name": "design_system_id", "type": "id", "fk": "design_systems.id", "nullable": true }
+    ] },
+    { "id": "files", "name": "design_files", "note": "Files in a design", "fields": [
+      { "name": "design_id", "type": "id", "fk": "designs.id" },
+      { "name": "filename", "type": "text" },
+      { "name": "content", "type": "text" },
+      { "name": "file_type", "type": "text", "note": "defaults to html" }
+    ] },
+    { "id": "versions", "name": "design_versions", "note": "History / rollback", "fields": [
+      { "name": "design_id", "type": "id", "fk": "designs.id" },
+      { "name": "snapshot", "type": "json" },
+      { "name": "label", "type": "text", "nullable": true }
+    ] },
+    { "id": "systems", "name": "design_systems", "note": "Reusable brand tokens (ownable)", "fields": [
+      { "name": "id", "type": "id", "pk": true },
+      { "name": "data", "type": "json", "note": "colors / typography / spacing" },
+      { "name": "assets", "type": "json", "nullable": true },
+      { "name": "custom_instructions", "type": "text", "nullable": true },
+      { "name": "is_default", "type": "boolean" }
+    ] },
+    { "id": "design_shares", "name": "design_shares", "note": "Framework shares table", "fields": [
+      { "name": "design_id", "type": "id", "fk": "designs.id" },
+      { "name": "role", "type": "text", "note": "viewer / editor / admin" }
+    ] },
+    { "id": "system_shares", "name": "design_system_shares", "note": "Framework shares table", "fields": [
+      { "name": "design_system_id", "type": "id", "fk": "design_systems.id" },
+      { "name": "role", "type": "text", "note": "viewer / editor / admin" }
+    ] }
+  ],
+  "relations": [
+    { "from": "designs", "to": "files", "kind": "1-n" },
+    { "from": "designs", "to": "versions", "kind": "1-n" },
+    { "from": "systems", "to": "designs", "kind": "1-n", "label": "applied to" },
+    { "from": "designs", "to": "design_shares", "kind": "1-n" },
+    { "from": "systems", "to": "system_shares", "kind": "1-n" }
+  ]
+}
+```
+
+디자인 프로젝트는 콘텐츠가 있을 때까지는 셸입니다. `create-design`는 빈 행(`data: "{}"`)을 만든 다음 `generate-design`는 실제 독립 실행형 HTML/JSX 파일을 작성합니다. 생성된 아티팩트, 편집 가능한 소스 및 모든 내보내기는 모두 동일한 HTML에서 나오므로 번역할 별도의 "AI 모형" 형식이 없습니다. 연결된 디자인 시스템은 에이전트가 모든 세대 패스에서 존중하는 토큰과 `custom_instructions`를 제공합니다.
+
+UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.tsx`(목록), `design.$id.tsx`(편집기), `present.$id.tsx`(프레젠테이션), `design-systems.tsx` 및 `design-systems_.setup.tsx`, `templates.tsx`, `examples.tsx`, 플러스 `settings.tsx` 및 `team.tsx`.
+
+### 키 actions
+
+모든 에이전트 호출 가능 작업은 `templates/design/actions/`의 TypeScript 파일이며, `POST /_agent-native/actions/:name`에 자동 마운트되고 CLI에서 `pnpm action <name>`로 실행 가능합니다. 그룹화:
+
+- **설계** — `create-design`(빈 셸), `generate-design`(생성된 HTML/JSX 콘텐츠 쓰기), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` 및 `apply-tweaks` - 실시간 조정 손잡이 값 유지 (악센트 색상, 밀도 등).
+- **파일** — 디자인 프로젝트 내부 파일의 경우 `create-file`, `update-file`, `list-files`, `delete-file`.
+- **디자인 시스템** — 분석에 앞서 브랜드 데이터를 수집하기 위한 `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` 및 `analyze-brand-assets`.
+- **가져오기** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) 및 `import-design-project`는 기존 프로젝트에서 디자인 시스템을 끌어올립니다.
+- **내보내기 및 핸드오프** — `export-html`, `export-pdf`, `export-svg`, `export-zip` 및 `export-coding-handoff` - 설계를 코딩 도구 핸드오프로 전환합니다.
+- **컨텍스트 및 탐색** — `view-screen`(현재 디자인, 열린 파일, 보기, 보류 중인 질문 또는 변형 그리드), `get-design-snapshot`(계속할 외부 에이전트의 현재 상태) 및 `navigate`.
+
+### 에이전트와 협력하기
+
+에이전트는 항상 귀하가 열려 있는 내용을 알고 있습니다. 현재 디자인, 열려 있는 파일, 활성 보기 및 보류 중인 질문이나 변형 그리드는 `view-screen`에 의해 반환되고 모든 메시지에 삽입되므로 디자인 이름을 지정하지 않고도 "이것을 더 조밀하게 만드세요" 또는 "이 변형을 내보내세요"라고 말할 수 있습니다.
+
+디자인은 독립형 HTML/JSX 파일이므로 에이전트는 iframe이 렌더링하고 모든 내보내기가 시작되는 동일한 소스를 편집합니다. 번역할 별도의 "AI 모형" 형식은 없습니다. 연결된 디자인 시스템은 에이전트가 모든 세대 패스에서 존중하는 토큰과 `custom_instructions`를 제공합니다. 미리보기에서 텍스트나 영역을 선택하고 Cmd+I를 눌러 상담사가 정확히 해당 부분에 집중하도록 합니다.
+
+### 맞춤 설정
+
+디자인은 완전하고 복제 가능한 템플릿입니다. 실용적인 확장 아이디어:
+
+- "토큰과 샘플 구성요소를 사용하여 재사용 가능한 전자상거래 디자인 시스템을 추가합니다."
+- "ZIP를 내부 검토 시스템에 업로드하는 내보내기 단계를 추가하세요."
+- "기존 랜딩 페이지 HTML를 붙여넣고 상담원에게 더 강력한 버전 3개를 요청하겠습니다."
+- "제품 페이지, 대시보드 및 온보딩 화면 요약을 위한 저장된 프롬프트 라이브러리를 추가합니다."
+- "이해관계자 검토를 위해 사용자 정의 PDF 내보내기 사전 설정을 추가합니다."
+
+에이전트는 필요에 따라 경로, 구성 요소, actions 및 SQL 지원 모델을 편집합니다. 전체 복제, 사용자 정의, 배포 흐름은 [Templates](/docs/cloneable-saas)를 참조하고, 이것이 첫 번째 에이전트 기본 템플릿인 경우 [Getting Started](/docs/getting-started)를 참조하세요.
+
+## 다음 단계
+
+- [**Templates**](/docs/cloneable-saas) — 복제 및 소유 모델
+- [**Context Awareness**](/docs/context-awareness) — 사용자가 보고 있는 내용을 에이전트가 아는 방법
+- [**Creating Templates**](/docs/creating-templates) — 에이전트 네이티브 템플릿의 현재 빌드 패턴