@claude-canvas/vite-plugin 1.0.1 → 1.0.3

package/commands/canvas-off.md

@@ -0,0 +1,24 @@
+# Canvas OFF — Hook 비활성화
+
+이 스킬은 Claude Canvas Hook을 끄고 잔여 요청 파일을 정리합니다.
+
+## 실행 단계
+
+### 1. Hook 비활성화
+
+```bash
+rm -f /tmp/claude-canvas/.enabled
+rm -f /tmp/claude-canvas/request.json
+```
+
+### 2. 상태 확인
+
+```bash
+[ -f /tmp/claude-canvas/.enabled ] && echo "Canvas Hook: ON" || echo "Canvas Hook: OFF"
+```
+
+### 3. 완료 안내
+
+- Canvas Hook: OFF
+- 브라우저 Canvas UI는 여전히 작동하지만, 이 터미널로 요청이 전달되지 않음
+- Vite dev 서버는 별도로 종료하세요 (필요시)

package/commands/canvas-on.md

@@ -0,0 +1,49 @@
+# Canvas ON — Canvas Hook 활성화 + dev 서버
+
+이 스킬은 Claude Canvas 개발 환경을 한 번에 켭니다.
+
+## 실행 단계
+
+### 1. Canvas Hook 활성화
+
+```bash
+mkdir -p /tmp/claude-canvas && touch /tmp/claude-canvas/.enabled
+```
+
+### 2. 기존 dev 서버 종료 + 재시작
+
+이미 실행 중인 dev 서버를 먼저 종료한 후 새로 시작합니다:
+
+```bash
+lsof -ti:5173 | xargs kill -9 2>/dev/null; echo "cleared"
+```
+
+현재 프로젝트 루트에서 dev 서버를 백그라운드로 시작합니다:
+
+```bash
+pnpm dev
+```
+
+> `pnpm`이 없으면 `npm run dev`를 사용하세요.
+> dev 서버는 백그라운드로 실행하세요 (`run_in_background`).
+
+### 3. 브라우저 열기
+
+dev 서버가 준비되면 브라우저를 엽니다:
+
+- WSL: `cmd.exe /c start http://localhost:5173`
+- macOS: `open http://localhost:5173`
+- Linux: `xdg-open http://localhost:5173`
+
+### 4. 상태 확인
+
+```bash
+[ -f /tmp/claude-canvas/.enabled ] && echo "Canvas Hook: ON" || echo "Canvas Hook: OFF"
+```
+
+### 5. 완료 안내
+
+- Canvas Hook: ON
+- Vite dev: 실행 중
+- 브라우저에서 **F4** (또는 Ctrl+Shift+A)로 Canvas 활성화
+- 요소 클릭 → 지시 입력 → Send → 이 터미널에서 엔터 → 자동 처리

package/commands/setup-canvas.md

@@ -0,0 +1,103 @@
+# Claude Canvas 설치 자동화
+
+이 스킬은 현재 프로젝트에 Claude Canvas Vite 플러그인을 설치하고 설정합니다.
+
+## 실행 단계
+
+### 1. Vite 프로젝트 확인
+
+`vite.config.ts` 또는 `vite.config.js`가 프로젝트 루트에 존재하는지 확인하세요.
+없으면 사용자에게 "이 프로젝트는 Vite 기반이 아닙니다. Claude Canvas는 Vite 플러그인이므로 Vite 프로젝트에서만 사용할 수 있습니다."라고 안내하고 중단하세요.
+
+### 2. 패키지 설치
+
+프로젝트의 패키지 매니저를 감지하여 설치합니다:
+
+- `pnpm-lock.yaml` 있으면: `pnpm add -D @claude-canvas/vite-plugin`
+- `yarn.lock` 있으면: `yarn add -D @claude-canvas/vite-plugin`
+- 그 외: `npm install -D @claude-canvas/vite-plugin`
+
+### 3. vite.config 수정
+
+`vite.config.ts` (또는 `.js`)를 읽고 다음을 추가하세요:
+
+**import 추가** (파일 상단):
+```typescript
+import claudeCanvas from '@claude-canvas/vite-plugin'
+```
+
+**plugins 배열에 추가**:
+```typescript
+claudeCanvas()
+```
+
+기존 plugins 배열의 마지막에 추가하세요. 이미 `claudeCanvas`가 있으면 건너뛰세요.
+
+### 4. Hook 파일 설치
+
+Canvas File Relay Hook을 설치합니다. 프로젝트 루트의 `.claude/hooks/` 디렉토리에 복사하세요:
+
+```bash
+mkdir -p .claude/hooks
+```
+
+아래 내용으로 `.claude/hooks/canvas-relay-hook.sh` 파일을 생성하세요:
+
+```bash
+#!/bin/bash
+# Canvas File Relay Hook — UserPromptSubmit (stdout injection)
+
+RELAY_DIR="/tmp/claude-canvas"
+ENABLED_FLAG="$RELAY_DIR/.enabled"
+REQUEST="$RELAY_DIR/request.json"
+
+# Off unless flag exists
+if [ ! -f "$ENABLED_FLAG" ]; then
+  exit 0
+fi
+
+if [ ! -f "$REQUEST" ]; then
+  exit 0
+fi
+
+CONTENT=$(cat "$REQUEST")
+rm -f "$REQUEST"
+
+echo "[Canvas 요청] 아래 JSON을 읽고 해당 파일을 수정하세요:"
+echo "$CONTENT"
+```
+
+실행 권한 부여:
+```bash
+chmod +x .claude/hooks/canvas-relay-hook.sh
+```
+
+그리고 `.claude/settings.json`에 Hook을 등록하세요 (없으면 생성):
+
+```json
+{
+  "hooks": {
+    "UserPromptSubmit": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": ".claude/hooks/canvas-relay-hook.sh"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+이미 `settings.json`이 있으면 `hooks.UserPromptSubmit` 배열에 위 항목만 추가하세요.
+
+### 5. 완료 안내
+
+설치 완료 후 다음을 안내하세요:
+
+- `pnpm dev` (또는 `npm run dev`)로 개발 서버를 실행하면 Claude Canvas가 활성화됩니다
+- **F4** (또는 **Ctrl+Shift+A**)로 Canvas를 토글할 수 있습니다
+- `/canvas-on`으로 Canvas Hook을 켜고, `/canvas-off`로 끌 수 있습니다

package/package.json

@@ -1,52 +1,55 @@
-{
-  "name": "@claude-canvas/vite-plugin",
-  "version": "1.0.1",
-  "description": "Vite plugin for visual annotation → Claude code modification → HMR verification",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": ["dist"],
-  "scripts": {
-    "build": "tsup",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint src/",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/whdudguq/claude-canvas.git",
-    "directory": "packages/vite-plugin"
-  },
-  "dependencies": {
-    "@claude-canvas/core": "workspace:*",
-    "@claude-canvas/bridge": "workspace:*"
-  },
-  "devDependencies": {
-    "tsup": "^8.4.0",
-    "vitest": "^3.0.0",
-    "typescript": "^5.7.0",
-    "vite": "^6.1.0",
-    "@types/node": "^22.0.0"
-  },
-  "peerDependencies": {
-    "vite": ">=5.0.0"
-  },
-  "keywords": [
-    "vite",
-    "vite-plugin",
-    "claude",
-    "annotation",
-    "devtools"
-  ]
-}
+{
+  "name": "@claude-canvas/vite-plugin",
+  "version": "1.0.3",
+  "description": "Vite plugin for visual annotation → Claude code modification → HMR verification",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "commands"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/whdudguq/claude-canvas.git",
+    "directory": "packages/vite-plugin"
+  },
+  "dependencies": {
+    "@claude-canvas/core": "1.0.2",
+    "@claude-canvas/bridge": "1.0.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.4.0",
+    "vitest": "^3.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.1.0",
+    "@types/node": "^22.0.0"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "claude",
+    "annotation",
+    "devtools"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}