claude-canvas 1.0.2 → 1.0.4

package/README.md

@@ -69,8 +69,19 @@ It also serves as a **visual Q&A tool** — Claude can send structured questions
 
 ```bash
 npm install -g claude-canvas
+claude-canvas setup
 ```
 
+The `setup` command installs the Claude Code skill, which lets Claude automatically use the canvas when it makes sense.
+
+### Updating
+
+```bash
+claude-canvas update
+```
+
+This checks for the latest version, installs it, and automatically updates the Claude Code skill if it has changed.
+
 ### From source
 
 ```bash
@@ -79,6 +90,7 @@ cd claude-canvas
 npm install
 npm run build
 npm link  # makes `claude-canvas` available globally
+claude-canvas setup
 ```
 
 ### Requirements
@@ -365,10 +377,10 @@ Install the included skill so Claude Code automatically knows when and how to us
 ### Installation
 
 ```bash
-cp -r src/skill/claude-canvas ~/.claude/skills/
+claude-canvas setup
 ```
 
-Or if installed globally via npm:
+This interactively installs (or updates) the skill to `~/.claude/skills/claude-canvas/`. You can also install it manually:
 
 ```bash
 cp -r $(npm root -g)/claude-canvas/src/skill/claude-canvas ~/.claude/skills/

package/dist/bin/claude-canvas.js

@@ -3179,10 +3179,12 @@ function spawnServer(port) {
 // src/bin/claude-canvas.ts
 var import_node_fs = require("node:fs");
 var import_node_path = require("node:path");
+var import_node_os = require("node:os");
+var import_node_readline = require("node:readline");
 var import_node_url = require("node:url");
 var import_meta = {};
 function getVersion() {
-  if (true) return "1.0.2";
+  if (true) return "1.0.4";
   try {
     const dir = (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
     const pkg = JSON.parse((0, import_node_fs.readFileSync)((0, import_node_path.resolve)(dir, "../../package.json"), "utf-8"));
@@ -3318,11 +3320,83 @@ program2.command("update").description("Check for updates and install the latest
     const { execSync } = await import("child_process");
     execSync("npm install -g claude-canvas@latest", { stdio: "inherit" });
     console.log(`Successfully updated to ${latest}`);
+    const skillDestDir = (0, import_node_path.join)((0, import_node_os.homedir)(), ".claude", "skills", "claude-canvas");
+    const skillDest = (0, import_node_path.join)(skillDestDir, "SKILL.md");
+    if ((0, import_node_fs.existsSync)(skillDest)) {
+      const skillSourceDir = (0, import_node_path.resolve)((0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url)), "../../src/skill/claude-canvas");
+      const skillSource = (0, import_node_path.join)(skillSourceDir, "SKILL.md");
+      if ((0, import_node_fs.existsSync)(skillSource)) {
+        const installed = (0, import_node_fs.readFileSync)(skillDest, "utf-8");
+        const bundled = (0, import_node_fs.readFileSync)(skillSource, "utf-8");
+        if (installed !== bundled) {
+          (0, import_node_fs.copyFileSync)(skillSource, skillDest);
+          console.log("\x1B[32m\u2713\x1B[0m Claude Code skill updated to the latest version.");
+        }
+      }
+    }
   } catch (err) {
     console.error("Update failed:", err.message);
     process.exit(1);
   }
 });
+program2.command("setup").description("Install or update the Claude Code skill for canvas").action(async () => {
+  const skillSourceDir = (0, import_node_path.resolve)((0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url)), "../../src/skill/claude-canvas");
+  const skillSource = (0, import_node_path.join)(skillSourceDir, "SKILL.md");
+  const skillDestDir = (0, import_node_path.join)((0, import_node_os.homedir)(), ".claude", "skills", "claude-canvas");
+  const skillDest = (0, import_node_path.join)(skillDestDir, "SKILL.md");
+  const skillUrl = "https://github.com/uditalias/claude-canvas/blob/main/src/skill/claude-canvas/SKILL.md";
+  if (!(0, import_node_fs.existsSync)(skillSource)) {
+    console.error("Skill source not found. Try reinstalling claude-canvas.");
+    process.exit(1);
+  }
+  const bundled = (0, import_node_fs.readFileSync)(skillSource, "utf-8");
+  const installed = (0, import_node_fs.existsSync)(skillDest) ? (0, import_node_fs.readFileSync)(skillDest, "utf-8") : null;
+  console.log("");
+  if (installed && installed === bundled) {
+    console.log("  \x1B[1m\x1B[32m\u2713\x1B[0m Skill is already installed and up to date.");
+    console.log(`    \x1B[2m${skillDest}\x1B[0m`);
+    console.log("");
+    return;
+  }
+  const isUpdate = installed !== null;
+  console.log(isUpdate ? "  \x1B[1m\x1B[33m\u26A1\x1B[0m A new version of the claude-canvas skill is available." : "  \x1B[1m\x1B[36m\u2728\x1B[0m claude-canvas skill setup");
+  console.log("");
+  console.log("  The skill lets Claude Code use the canvas tool automatically.");
+  console.log("  It will be installed to:");
+  console.log(`    \x1B[36m${skillDest}\x1B[0m`);
+  console.log("");
+  const rl = (0, import_node_readline.createInterface)({ input: process.stdin, output: process.stdout });
+  const ask = (q) => new Promise((resolve3) => rl.question(q, (a) => resolve3(a.trim().toLowerCase())));
+  const viewSkill = await ask("  Would you like to view the skill before installing? (y/N) ");
+  if (viewSkill === "y" || viewSkill === "yes") {
+    console.log("");
+    console.log(`  \x1B[4m${skillUrl}\x1B[0m`);
+    console.log("");
+  }
+  const action = isUpdate ? "Update" : "Install";
+  const confirm = await ask(`  ${action} the skill to ~/.claude/skills/? (Y/n) `);
+  if (confirm === "n" || confirm === "no") {
+    console.log("");
+    console.log("  Skipped. You can run this again anytime with:");
+    console.log("    \x1B[33mclaude-canvas setup\x1B[0m");
+    console.log("");
+  } else {
+    try {
+      (0, import_node_fs.mkdirSync)(skillDestDir, { recursive: true });
+      (0, import_node_fs.copyFileSync)(skillSource, skillDest);
+      console.log("");
+      console.log(`  \x1B[1m\x1B[32m\u2713\x1B[0m Skill ${isUpdate ? "updated" : "installed"} to \x1B[36m${skillDest}\x1B[0m`);
+      console.log("");
+    } catch (err) {
+      console.log("");
+      console.log(`  \x1B[31m\u2717 Failed: ${err.message}\x1B[0m`);
+      console.log("  You can install it manually:");
+      console.log(`    \x1B[33mcp -r $(npm root -g)/claude-canvas/src/skill/claude-canvas ~/.claude/skills/\x1B[0m`);
+      console.log("");
+    }
+  }
+  rl.close();
+});
 program2.parse();
 function fetchLatestVersion() {
   return new Promise((resolve3, reject) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-canvas",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A shared visual canvas for Claude Code",
   "license": "MIT",
   "author": "Udi Talias",
@@ -12,6 +12,11 @@
   "bugs": {
     "url": "https://github.com/uditalias/claude-canvas/issues"
   },
+  "publishConfig": {
+    "provenance": false,
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "keywords": [
     "claude",
     "canvas",

package/scripts/postinstall.js

@@ -1,126 +1,49 @@
 #!/usr/bin/env node
 
-const readline = require("readline");
 const fs = require("fs");
 const path = require("path");
 const os = require("os");
 
-const SKILL_SOURCE = path.resolve(__dirname, "../src/skill/claude-canvas/SKILL.md");
-const SKILL_DEST_DIR = path.join(os.homedir(), ".claude", "skills", "claude-canvas");
-const SKILL_DEST = path.join(SKILL_DEST_DIR, "SKILL.md");
-const SKILL_URL =
-  "https://github.com/uditalias/claude-canvas/blob/main/src/skill/claude-canvas/SKILL.md";
-
-// Skip in CI or non-interactive environments
-if (
-  process.env.CI ||
-  process.env.NODE_ENV === "test" ||
-  !process.stdin.isTTY
-) {
+// Skip in CI or test environments
+if (process.env.CI || process.env.NODE_ENV === "test") {
   process.exit(0);
 }
 
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout,
-});
-
-function ask(question) {
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => resolve(answer.trim().toLowerCase()));
-  });
-}
-
-function print(text) {
-  console.log(text);
-}
-
-async function main() {
-  print("");
-  print("  \x1b[1m\x1b[36m✨ claude-canvas installed successfully!\x1b[0m");
-  print("");
-  print(
-    "  claude-canvas is a visual canvas tool for \x1b[1mClaude Code\x1b[0m."
-  );
-  print(
-    "  Instead of asking questions in the terminal, Claude can draw diagrams,"
-  );
-  print(
-    "  wireframes, and mockups on a shared canvas and collect visual feedback"
-  );
-  print("  from you directly in the browser.");
-  print("");
-  print("  \x1b[1mHow it works:\x1b[0m");
-  print(
-    "    1. Claude runs \x1b[33mclaude-canvas start\x1b[0m to open a canvas in your browser"
-  );
-  print(
-    "    2. Claude draws shapes, diagrams, or wireframes on the canvas"
-  );
-  print(
-    "    3. Claude asks you visual questions — you answer by clicking or drawing"
-  );
-  print(
-    "    4. Claude captures your answers with \x1b[33mclaude-canvas screenshot\x1b[0m"
-  );
-  print("");
-  print("  \x1b[1m\x1b[33m⚠  Important:\x1b[0m For Claude to use this tool automatically, you need");
-  print("  to install the \x1b[1mclaude-canvas skill\x1b[0m into your Claude Code skills folder.");
-  print("");
-
-  const viewSkill = await ask(
-    "  Would you like to view the skill before installing? (y/N) "
-  );
-  if (viewSkill === "y" || viewSkill === "yes") {
-    print("");
-    print(`  \x1b[4m${SKILL_URL}\x1b[0m`);
-    print("");
-  }
-
-  const installSkill = await ask(
-    "  Install the skill to ~/.claude/skills/? (Y/n) "
-  );
-
-  if (installSkill === "n" || installSkill === "no") {
-    print("");
-    print("  Skipped skill installation. You can install it later with:");
-    print("");
-    print(
-      `    \x1b[33mcp -r $(npm root -g)/claude-canvas/src/skill/claude-canvas ~/.claude/skills/\x1b[0m`
-    );
-    print("");
-  } else {
-    try {
-      fs.mkdirSync(SKILL_DEST_DIR, { recursive: true });
+const SKILL_DEST = path.join(os.homedir(), ".claude", "skills", "claude-canvas", "SKILL.md");
+const skillInstalled = fs.existsSync(SKILL_DEST);
+
+console.log("");
+console.log("  \x1b[1m\x1b[36m✨ claude-canvas installed successfully!\x1b[0m");
+console.log("");
+console.log("  claude-canvas is a visual canvas tool for \x1b[1mClaude Code\x1b[0m.");
+console.log("  Instead of asking questions in the terminal, Claude can draw diagrams,");
+console.log("  wireframes, and mockups on a shared canvas and collect visual feedback");
+console.log("  from you directly in the browser.");
+console.log("");
+
+if (skillInstalled) {
+  // Check if the skill needs updating
+  const SKILL_SOURCE = path.resolve(__dirname, "../src/skill/claude-canvas/SKILL.md");
+  try {
+    const installed = fs.readFileSync(SKILL_DEST, "utf-8");
+    const bundled = fs.readFileSync(SKILL_SOURCE, "utf-8");
+    if (installed !== bundled) {
       fs.copyFileSync(SKILL_SOURCE, SKILL_DEST);
-      print("");
-      print(
-        `  \x1b[1m\x1b[32m✓\x1b[0m Skill installed to \x1b[36m${SKILL_DEST}\x1b[0m`
-      );
-      print("");
-    } catch (err) {
-      print("");
-      print(`  \x1b[31m✗ Failed to install skill: ${err.message}\x1b[0m`);
-      print("  You can install it manually:");
-      print("");
-      print(
-        `    \x1b[33mcp -r $(npm root -g)/claude-canvas/src/skill/claude-canvas ~/.claude/skills/\x1b[0m`
-      );
-      print("");
+      console.log("  \x1b[1m\x1b[32m✓\x1b[0m Skill updated to the latest version.");
+      console.log("");
     }
+  } catch {
+    // Ignore errors — user can run setup manually
   }
-
-  print("  \x1b[1mGet started:\x1b[0m");
-  print("    \x1b[33mclaude-canvas start\x1b[0m      Open a new canvas session");
-  print(
-    "    \x1b[33mclaude-canvas --help\x1b[0m      See all available commands"
-  );
-  print("");
-
-  rl.close();
+} else {
+  console.log("  \x1b[1m\x1b[33m⚠  Important:\x1b[0m To let Claude use this tool automatically,");
+  console.log("  install the skill by running:");
+  console.log("");
+  console.log("    \x1b[33mclaude-canvas setup\x1b[0m");
+  console.log("");
 }
 
-main().catch(() => {
-  rl.close();
-  process.exit(0);
-});
+console.log("  \x1b[1mGet started:\x1b[0m");
+console.log("    \x1b[33mclaude-canvas start\x1b[0m      Open a new canvas session");
+console.log("    \x1b[33mclaude-canvas --help\x1b[0m      See all available commands");
+console.log("");