contactsheet 0.1.2 → 0.1.4

package/dist/cli.js

@@ -496,6 +496,22 @@ async function regenerateRegistry(cfg) {
 // src/init/index.ts
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { dirname, join, relative, resolve } from "node:path";
+
+// src/term.ts
+var on = process.stdout.isTTY === true && !process.env.NO_COLOR && process.env.TERM !== "dumb";
+var wrap = (open, close) => (s) => on ? `\x1B[${open}m${s}\x1B[${close}m` : s;
+var bold = wrap(1, 22);
+var dim = wrap(2, 22);
+var red = wrap(31, 39);
+var green = wrap(32, 39);
+var yellow = wrap(33, 39);
+var cyan = wrap(36, 39);
+var magenta = wrap(35, 39);
+var link = (s) => on ? `\x1B[36;4m${s}\x1B[39;24m` : s;
+var ok = (s) => `${green("\u2713")} ${s}`;
+var warn = (s) => `${yellow("\u26A0")} ${yellow(s)}`;
+
+// src/init/index.ts
 var DEFAULT_TARGET2 = "http://localhost:3000";
 var DEFAULT_PORT2 = 5199;
 var DEFAULT_DESIGN_DIR2 = "design";
@@ -505,21 +521,21 @@ async function runInit(cwd, flags) {
   assertNextProject(root);
   const appDir = detectAppDir2(root);
   const cfg = writeConfigFile(root, appDir, flags);
-  console.log(`contactsheet init \u2014\u2014 ${root}`);
-  console.log(`  app \u76EE\u5F55:${cfg.appDir}`);
-  console.log(`  \u914D\u7F6E:contactsheet.config.json(target ${cfg.target},port ${cfg.port},\u753B\u677F\u76EE\u5F55 ${cfg.designDir})`);
+  console.log(`${bold(cyan("\u25C6"))} ${bold("contactsheet init")} ${dim("\u2014\u2014")} ${root}`);
+  console.log(ok(`app \u76EE\u5F55:${cfg.appDir}`));
+  console.log(ok(`\u914D\u7F6E:contactsheet.config.json(target ${cfg.target},port ${cfg.port},\u753B\u677F\u76EE\u5F55 ${cfg.designDir})`));
   seedArtboards(root, cfg.designDir);
   writeMcpJson(root, cfg.port);
   writeClaudeHook(root, cfg.port);
   console.log("");
-  console.log("\u4E0B\u4E00\u6B65:");
-  console.log("  1. \u7167\u5E38\u8D77\u4F60\u81EA\u5DF1\u7684 dev server(next dev),\u786E\u8BA4\u5B83\u5728 " + cfg.target);
-  console.log("  2. \u53E6\u5F00\u4E00\u4E2A\u7EC8\u7AEF:npx contactsheet");
-  console.log(`  3. \u6253\u5F00 http://localhost:${cfg.port}/__cs`);
+  console.log(bold("\u4E0B\u4E00\u6B65:"));
+  console.log(`  1. \u7167\u5E38\u8D77\u4F60\u81EA\u5DF1\u7684 dev server(next dev),\u786E\u8BA4\u5B83\u5728 ${cyan(cfg.target)}`);
+  console.log(`  2. \u53E6\u5F00\u4E00\u4E2A\u7EC8\u7AEF:${cyan("npx contactsheet")}`);
+  console.log(`  3. \u6253\u5F00 ${link(`http://localhost:${cfg.port}/__cs`)}`);
   console.log("");
-  console.log("\u7AEF\u53E3\u90FD\u53EF\u4EE5\u6362:dev server \u4E0D\u5728 " + cfg.target + " \u5C31 --target <url>,");
-  console.log(`  ${cfg.port} \u88AB\u5360\u5C31 --port <n>(\u6216\u6539 contactsheet.config.json \u540E\u91CD\u8DD1 init,MCP/hook \u4F1A\u8DDF\u7740\u6362)\u3002`);
-  console.log(`  ${cfg.port} \u88AB\u522B\u7684\u8FDB\u7A0B\u5360\u7740\u65F6,contactsheet \u4F1A\u81EA\u52A8\u987A\u5EF6\u5230\u4E0B\u4E00\u4E2A\u7A7A\u95F2\u7AEF\u53E3\u5E76\u63D0\u793A\u3002`);
+  console.log(dim("\u7AEF\u53E3\u90FD\u53EF\u4EE5\u6362:dev server \u4E0D\u5728 ") + cfg.target + dim(" \u5C31 --target <url>,"));
+  console.log(dim(`  ${cfg.port} \u88AB\u5360\u5C31 --port <n>(\u6216\u6539 contactsheet.config.json \u540E\u91CD\u8DD1 init,MCP/hook \u4F1A\u8DDF\u7740\u6362)\u3002`));
+  console.log(dim(`  ${cfg.port} \u88AB\u522B\u7684\u8FDB\u7A0B\u5360\u7740\u65F6,contactsheet \u4F1A\u81EA\u52A8\u987A\u5EF6\u5230\u4E0B\u4E00\u4E2A\u7A7A\u95F2\u7AEF\u53E3\u5E76\u63D0\u793A\u3002`));
 }
 function assertNextProject(root) {
   const pkgPath = join(root, "package.json");
@@ -597,7 +613,7 @@ function seedArtboards(root, designDir) {
     writeFileSync(artboard, artboardTemplate(name, importPathFor(root, designDir, componentFile)), "utf8");
     created++;
   }
-  console.log(`  \u753B\u677F:\u94FA\u4E86 ${created} \u5757\u753B\u677F,\u8DF3\u8FC7 ${skipped} \u4E2A\u5DF2\u5B58\u5728` + (unreadable ? `,${unreadable} \u4E2A\u6587\u4EF6\u6CA1\u8BA4\u51FA\u7EC4\u4EF6\u5BFC\u51FA` : ""));
+  console.log(ok(`\u753B\u677F:\u94FA\u4E86 ${green(String(created))} \u5757,\u8DF3\u8FC7 ${skipped} \u4E2A\u5DF2\u5B58\u5728`) + (unreadable ? `,${unreadable} \u4E2A\u6587\u4EF6\u6CA1\u8BA4\u51FA\u7EC4\u4EF6\u5BFC\u51FA` : ""));
 }
 function firstComponentExport(source) {
   const hits = [];
@@ -1044,9 +1060,9 @@ import path5 from "node:path";
 function isLive(sock) {
   return new Promise((resolve2) => {
     const s = new net.Socket();
-    const done = (ok) => {
+    const done = (ok2) => {
       s.destroy();
-      resolve2(ok);
+      resolve2(ok2);
     };
     s.on("connect", () => done(true));
     s.on("error", () => done(false));
@@ -1317,12 +1333,12 @@ function pushToken() {
 function originAllowed(cfg, req) {
   const origin = req.headers.origin;
   if (!origin) return true;
-  const ok = /* @__PURE__ */ new Set([
+  const ok2 = /* @__PURE__ */ new Set([
     `http://localhost:${cfg.port}`,
     `http://127.0.0.1:${cfg.port}`,
     `http://[::1]:${cfg.port}`
   ]);
-  return ok.has(origin);
+  return ok2.has(origin);
 }
 async function handleApi(cfg, req, res, pathname) {
   const method = req.method ?? "GET";
@@ -1489,7 +1505,7 @@ function createProxyLog(target) {
         }
         down = true;
         console.error(
-          `[contactsheet] \u26A0\uFE0F  \u76EE\u6807 ${target} \u8FDE\u4E0D\u4E0A\u4E86 \u2014\u2014 \u8D77 next dev \u540E\u4F1A\u81EA\u52A8\u6062\u590D(\u753B\u5E03\u4F1A\u81EA\u5DF1\u91CD\u8BD5)\u3002\u671F\u95F4\u7684\u4EE3\u7406\u5931\u8D25\u4E0D\u518D\u9010\u6761\u6253\u5370\u3002`
+          `${yellow("\u26A0")} ${yellow(`\u76EE\u6807 ${target} \u8FDE\u4E0D\u4E0A\u4E86`)} \u2014\u2014 \u8D77 next dev \u540E\u4F1A\u81EA\u52A8\u6062\u590D(\u753B\u5E03\u4F1A\u81EA\u5DF1\u91CD\u8BD5)\u3002` + dim("\u671F\u95F4\u7684\u4EE3\u7406\u5931\u8D25\u4E0D\u518D\u9010\u6761\u6253\u5370\u3002")
         );
         return;
       }
@@ -1499,12 +1515,12 @@ function createProxyLog(target) {
         win.extra++;
         return;
       }
-      console.error(`[contactsheet] \u4EE3\u7406\u5931\u8D25 ${pathOf(url)} ${code}`);
+      console.error(`${red("\u2716")} \u4EE3\u7406\u5931\u8D25 ${pathOf(url)} ${red(String(code))}`);
       const timer = setTimeout(() => {
         const extra = windows.get(key)?.extra ?? 0;
         windows.delete(key);
         if (extra > 0) {
-          console.error(`[contactsheet] (\u8FC7\u53BB ${WINDOW_MS / 1e3} \u79D2\u8FD8\u6709 ${extra} \u6B21\u540C\u7C7B\u5931\u8D25:${key})`);
+          console.error(dim(`  (\u8FC7\u53BB ${WINDOW_MS / 1e3} \u79D2\u8FD8\u6709 ${extra} \u6B21\u540C\u7C7B\u5931\u8D25:${key})`));
         }
       }, WINDOW_MS);
       timer.unref();
@@ -1515,7 +1531,7 @@ function createProxyLog(target) {
       down = false;
       const n = silenced;
       silenced = 0;
-      console.log(`[contactsheet] \u76EE\u6807 ${target} \u5DF2\u6062\u590D${n > 0 ? `(\u4E0D\u53EF\u8FBE\u671F\u95F4\u538B\u6389 ${n} \u6761\u4EE3\u7406\u5931\u8D25)` : ""}`);
+      console.log(`${green("\u2713")} ${green(`\u76EE\u6807 ${target} \u5DF2\u6062\u590D`)}${n > 0 ? dim(`(\u4E0D\u53EF\u8FBE\u671F\u95F4\u538B\u6389 ${n} \u6761\u4EE3\u7406\u5931\u8D25)`) : ""}`);
     },
     close() {
       for (const win of windows.values()) clearTimeout(win.timer);
@@ -1565,10 +1581,17 @@ async function startServer(cfg) {
     s.on("close", () => sockets.delete(s));
   });
   const host = cfg.host ?? "127.0.0.1";
-  const port = await listenWithFallback(server, cfg, host);
+  let twin = null;
+  const port = await listenWithFallback(server, cfg, host, (t) => {
+    twin = t;
+    t.on("connection", (sock) => {
+      sockets.add(sock);
+      sock.on("close", () => sockets.delete(sock));
+    });
+  });
   if (host !== "127.0.0.1" && host !== "localhost") {
     console.warn(
-      `[contactsheet] \u26A0\uFE0F  \u76D1\u542C\u5728 ${host}:${port} \u2014\u2014 \u753B\u5E03\u65E0\u9274\u6743,\u540C\u7F51\u7EDC\u7684\u4EFB\u4F55\u4EBA\u90FD\u80FD\u8BFB\u4F60\u7684\u6279\u6CE8\u3001\u5E76\u5411\u4F60\u7684 Claude Code \u4F1A\u8BDD\u63A8\u9001\u6D88\u606F\u3002\u53EA\u5728\u53EF\u4FE1\u7F51\u7EDC\u8FD9\u4E48\u505A\u3002`
+      warn(`\u76D1\u542C\u5728 ${host}:${port} \u2014\u2014 \u753B\u5E03\u65E0\u9274\u6743,\u540C\u7F51\u7EDC\u7684\u4EFB\u4F55\u4EBA\u90FD\u80FD\u8BFB\u4F60\u7684\u6279\u6CE8\u3001\u5E76\u5411\u4F60\u7684 Claude Code \u4F1A\u8BDD\u63A8\u9001\u6D88\u606F\u3002\u53EA\u5728\u53EF\u4FE1\u7F51\u7EDC\u8FD9\u4E48\u505A\u3002`)
     );
   }
   return {
@@ -1577,6 +1600,9 @@ async function startServer(cfg) {
       closeAll();
       proxyLog.close();
       proxy.close();
+      if (twin) {
+        await new Promise((r) => twin.close(() => r()));
+      }
       await new Promise((resolve2) => {
         const fallback = setTimeout(resolve2, 2e3);
         for (const s of sockets) s.destroy();
@@ -1658,22 +1684,38 @@ async function occupiedBySameProject(cfg, port) {
     return false;
   }
 }
-async function listenWithFallback(server, cfg, host) {
-  const tryListen = (port) => new Promise((resolve2, reject) => {
+async function listenWithFallback(server, cfg, host, onTwin) {
+  const listenOnce = (srv, port, h) => new Promise((resolve2, reject) => {
     const onErr = (err) => {
-      if (err.code === "EADDRINUSE") resolve2(false);
+      if (err.code === "EADDRINUSE") resolve2("busy");
+      else if (err.code === "EADDRNOTAVAIL" || err.code === "EAFNOSUPPORT") resolve2("nofam");
       else reject(err);
     };
-    server.once("error", onErr);
-    server.listen(port, host, () => {
-      server.off("error", onErr);
-      resolve2(true);
+    srv.once("error", onErr);
+    srv.listen(port, h, () => {
+      srv.off("error", onErr);
+      resolve2("ok");
     });
   });
+  const tryListen = async (port) => {
+    const main2 = await listenOnce(server, port, host);
+    if (main2 !== "ok") return false;
+    if (host !== "127.0.0.1") return true;
+    const t = http.createServer(server.listeners("request")[0]);
+    for (const l of server.listeners("upgrade")) t.on("upgrade", l);
+    const r = await listenOnce(t, port, "::1");
+    if (r === "ok") {
+      onTwin(t);
+      return true;
+    }
+    if (r === "nofam") return true;
+    await new Promise((res) => server.close(() => res()));
+    return false;
+  };
   if (await tryListen(cfg.port)) return cfg.port;
   if (await occupiedBySameProject(cfg, cfg.port)) {
     console.log(
-      `[contactsheet] \u672C\u9879\u76EE\u5DF2\u7ECF\u6709\u4E00\u4E2A contactsheet \u5728\u8DD1\u4E86,\u76F4\u63A5\u7528\u5B83:http://localhost:${cfg.port}/__cs`
+      `${cyan("\u25CF")} \u672C\u9879\u76EE\u5DF2\u7ECF\u6709\u4E00\u4E2A contactsheet \u5728\u8DD1\u4E86,\u76F4\u63A5\u7528\u5B83:${link(`http://localhost:${cfg.port}/__cs`)}`
     );
     process.exit(0);
   }
@@ -1685,9 +1727,8 @@ async function listenWithFallback(server, cfg, host) {
   for (let p = cfg.port + 1; p <= cfg.port + 20; p++) {
     if (await tryListen(p)) {
       console.warn(
-        `[contactsheet] \u26A0\uFE0F  \u7AEF\u53E3 ${cfg.port} \u88AB\u5360,\u5DF2\u987A\u5EF6\u5230 ${p} \u2192 http://localhost:${p}/__cs
-   \u6CE8\u610F:\u6362\u7AEF\u53E3 = \u6362\u6D4F\u89C8\u5668\u6E90\u3002\u753B\u677F\u4F4D\u7F6E/\u6298\u53E0/\u5E95\u8272\u8FD9\u4E9B\u672C\u673A\u8BB0\u5FC6\u6309\u6E90\u9694\u79BB,\u8FD9\u4E2A\u7AEF\u53E3\u4E0B\u662F\u5168\u65B0\u7684;
-   .mcp.json \u4E0E hook \u4ECD\u6307\u5411 ${cfg.port}\u3002\u60F3\u8981\u7A33\u5B9A,\u8BF7\u91CA\u653E ${cfg.port},\u6216\u6539 config \u7684 port \u540E\u91CD\u8DD1 npx contactsheet init\u3002`
+        warn(`\u7AEF\u53E3 ${cfg.port} \u88AB\u5360,\u5DF2\u987A\u5EF6\u5230 ${p} \u2192 `) + link(`http://localhost:${p}/__cs`) + "\n" + dim(`   \u6CE8\u610F:\u6362\u7AEF\u53E3 = \u6362\u6D4F\u89C8\u5668\u6E90\u3002\u753B\u677F\u4F4D\u7F6E/\u6298\u53E0/\u5E95\u8272\u8FD9\u4E9B\u672C\u673A\u8BB0\u5FC6\u6309\u6E90\u9694\u79BB,\u8FD9\u4E2A\u7AEF\u53E3\u4E0B\u662F\u5168\u65B0\u7684;
+`) + dim(`   .mcp.json \u4E0E hook \u4ECD\u6307\u5411 ${cfg.port}\u3002\u60F3\u8981\u7A33\u5B9A,\u8BF7\u91CA\u653E ${cfg.port},\u6216\u6539 config \u7684 port \u540E\u91CD\u8DD1 npx contactsheet init\u3002`)
       );
       return p;
     }
@@ -1746,6 +1787,7 @@ async function startWatcher(cfg, onChange) {
 }
 
 // src/cli.ts
+process.noDeprecation = true;
 var HELP = `contactsheet \u2014\u2014 \u628A UI \u7684\u5404\u79CD\u72B6\u6001\u644A\u5728\u4E00\u9762\u53EF\u7F29\u653E\u7684\u5899\u4E0A
 
   contactsheet [up]     \u9644\u7740\u5230\u5F53\u524D Next.js repo:\u6CE8\u5165\u753B\u677F\u8DEF\u7531 + \u8D77\u5916\u58F3(\u9ED8\u8BA4\u547D\u4EE4)
@@ -1794,19 +1836,21 @@ ${HELP}`);
 }
 async function up(flags) {
   const cfg = loadConfig(process.cwd(), flags);
-  await tryStep("\u6CE8\u5165\u753B\u677F\u8DEF\u7531", () => ensureInjected(cfg));
+  const injected = await tryStep("\u6CE8\u5165\u753B\u677F\u8DEF\u7531", () => ensureInjected(cfg));
+  if (injected !== null) console.log(ok(dim("\u753B\u677F\u8DEF\u7531\u5DF2\u6CE8\u5165")));
   const watcher = await tryStep(
     "\u542F\u52A8\u6587\u4EF6\u76D1\u542C",
     () => startWatcher(cfg, (entries) => broadcast({ type: "registry", entries }))
   );
+  if (watcher) console.log(ok(dim(`\u76D1\u542C ${cfg.designDir}/**/*.artboard.{tsx,ts}`)));
   const server = await startServer(cfg);
   banner(cfg, server.port);
   let closing = false;
   const shutdown = async (sig) => {
     if (closing) return;
     closing = true;
-    console.log(`
-[contactsheet] \u6536\u5230 ${sig},\u6B63\u5728\u9000\u51FA\u2026`);
+    console.log(dim(`
+[contactsheet] \u6536\u5230 ${sig},\u6B63\u5728\u9000\u51FA\u2026`));
     if (watcher) await quiet(() => watcher.close());
     await quiet(() => server.close());
     await quiet(() => closeBrowser());
@@ -1819,7 +1863,7 @@ async function tryStep(label, fn) {
   try {
     return await fn();
   } catch (err) {
-    console.warn(`[contactsheet] ${label}\u5931\u8D25,\u5DF2\u8DF3\u8FC7:${err instanceof Error ? err.message : String(err)}`);
+    console.warn(warn(`${label}\u5931\u8D25,\u5DF2\u8DF3\u8FC7:${err instanceof Error ? err.message : String(err)}`));
     return null;
   }
 }
@@ -1831,10 +1875,10 @@ async function quiet(fn) {
 }
 function banner(cfg, port) {
   console.log(`
-  contactsheet   http://localhost:${port}/__cs
-  \u4EE3\u7406\u76EE\u6807       ${cfg.target}
-  \u753B\u677F\u76EE\u5F55       ${cfg.designDir}/   \xB7   app \u76EE\u5F55 ${cfg.appDir}/
-  Ctrl-C \u9000\u51FA
+  ${bold(cyan("\u25C6"))} ${bold("contactsheet")}   ${link(`http://localhost:${port}/__cs`)}
+  ${dim("\u4EE3\u7406\u76EE\u6807")}       ${cfg.target}
+  ${dim("\u753B\u677F\u76EE\u5F55")}       ${cfg.designDir}/ ${dim("\xB7")} app \u76EE\u5F55 ${cfg.appDir}/
+  ${dim("Ctrl-C \u9000\u51FA")}
 `);
 }
 //# sourceMappingURL=cli.js.map