contactsheet 0.1.0

package/dist/cli.js

@@ -0,0 +1,1783 @@
+#!/usr/bin/env node
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// src/cli.ts
+import { parseArgs } from "node:util";
+
+// src/config.ts
+import fs from "node:fs";
+import path from "node:path";
+var DEFAULT_TARGET = "http://localhost:3000";
+var DEFAULT_PORT = 5199;
+var DEFAULT_DESIGN_DIR = "design";
+function loadConfig(cwd, flags) {
+  const projectRoot = path.resolve(cwd);
+  const file = path.join(projectRoot, "contactsheet.config.json");
+  let fromFile = {};
+  if (fs.existsSync(file)) {
+    try {
+      fromFile = JSON.parse(fs.readFileSync(file, "utf8"));
+    } catch (err) {
+      throw new Error(`contactsheet.config.json \u89E3\u6790\u5931\u8D25:${err.message}`);
+    }
+  }
+  const pick = (key) => flags[key] ?? fromFile[key];
+  const port = Number(pick("port") ?? DEFAULT_PORT);
+  if (!Number.isInteger(port) || port <= 0 || port > 65535) throw new Error(`\u7AEF\u53E3\u4E0D\u5408\u6CD5:${String(pick("port"))}`);
+  return {
+    projectRoot,
+    // 末尾斜杠去掉,后面一律靠 `${target}/xxx` 拼
+    target: String(pick("target") ?? DEFAULT_TARGET).replace(/\/+$/, ""),
+    port,
+    appDir: pick("appDir") ?? detectAppDir(projectRoot),
+    designDir: pick("designDir") ?? DEFAULT_DESIGN_DIR
+  };
+}
+function detectAppDir(projectRoot) {
+  return fs.existsSync(path.join(projectRoot, "src", "app")) ? "src/app" : "app";
+}
+
+// src/inject/index.ts
+import { promises as fs2 } from "node:fs";
+import path2 from "node:path";
+
+// src/inject/templates.ts
+var HEADER = "// \u7531 contactsheet \u81EA\u52A8\u751F\u6210 \u2014\u2014 \u8BF7\u52FF\u7F16\u8F91,\u4E0B\u6B21\u542F\u52A8\u4F1A\u88AB\u8986\u76D6\n";
+function pageTemplate(registryImport) {
+  return HEADER + String.raw`import { Suspense } from "react"
+import { notFound } from "next/navigation"
+import { modules } from "${registryImport}"
+import { CsErrorBoundary, CsErrorCard } from "./boundary"
+
+// 类型一律用 any:不依赖用户项目的 Next typegen(PageProps<"..."> 要求 .next/types 已生成)
+
+// Next 16 的 params 不解码百分号转义(实测 params.id = "Button--%E9%BB%98%E8%AE%A4"),这里自己解
+function decodeId(raw: string): string {
+  try {
+    return decodeURIComponent(raw)
+  } catch {
+    return raw // 文件名里真带 % 时 decode 会抛,退回原串
+  }
+}
+
+// id = fileSlug + "--" + exportName;exportName 不含 "-",所以按最后一个 "--" 切
+function lookupEntry(id: string): any {
+  const i = id.lastIndexOf("--")
+  if (i <= 0) return null
+  const mod: any = (modules as any)[id.slice(0, i)]
+  if (!mod) return null
+  return mod[id.slice(i + 2)] ?? null
+}
+
+// ?args= 是 encodeURIComponent(JSON.stringify(args)),Next 已解码一层,这里只需 JSON.parse
+function parseArgs(raw: any): any {
+  if (typeof raw !== "string" || raw.length === 0) return {}
+  try {
+    const v = JSON.parse(raw)
+    return v && typeof v === "object" ? v : {}
+  } catch {
+    return {}
+  }
+}
+
+// 默认无底色(裸放画布);底色由外壳按每板开关注入(大部分组件自带 surface,无底色的一键切换)
+// 不留内边距:wrapper 一旦有 padding,组件的高亮框就永远比可见的白底小一圈(实测 390 宽的板
+// 四周各差 16px),两者对不齐。留白交给组件自己,画板的底就等于组件的盒子。
+const wrap: any = {}
+// 提示与错误卡不是被审视的组件,贴边反而挤,单独留内边距
+const padded: any = { padding: 16 }
+const hint: any = { font: "13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace", color: "#666" }
+const loading: any = { font: "12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace", opacity: 0.5 }
+
+export default async function Page(props: any) {
+  if (process.env.NODE_ENV === "production") notFound() // 生产构建里这条路不存在
+  const params: any = await props.params
+  const searchParams: any = await props.searchParams
+  const id: string = decodeId(String(params?.id ?? ""))
+  const entry: any = lookupEntry(id)
+  if (!entry) notFound()
+
+  const kind: string = typeof entry.url === "string" ? "screen" : "component"
+  const args: any = { ...(entry.args ?? {}), ...parseArgs(searchParams?.args) }
+  // 转义 "<" 防止 args 里的字符串提前闭合 script 标签(JSON 里 < 解析回 "<")
+  const meta: string = JSON.stringify({ id, args, env: entry.env, kind }).replace(/</g, "\\u003c")
+  const metaTag = <script type="application/json" id="__cs_meta" dangerouslySetInnerHTML={{ __html: meta }} />
+
+  // 页面画板由外壳直接 iframe 目标 url,不在这条路由渲染
+  if (kind === "screen") {
+    return (
+      <div data-cs-artboard={id} style={padded}>
+        {metaTag}
+        <p style={hint}>页面画板:请直接打开 {entry.url}</p>
+      </div>
+    )
+  }
+
+  if (typeof entry.render !== "function") {
+    return (
+      <div data-cs-artboard={id} style={padded}>
+        {metaTag}
+        <CsErrorCard name={id} error="画板既没有 render(args) 也没有 url" />
+      </div>
+    )
+  }
+
+  // render 自己同步抛错时 ErrorBoundary 够不着,这里兜一层
+  let node: any = null
+  try {
+    node = entry.render(args)
+  } catch (err: any) {
+    return (
+      <div data-cs-artboard={id} style={padded}>
+        {metaTag}
+        <CsErrorCard name={id} error={String(err?.message ?? err)} />
+      </div>
+    )
+  }
+
+  // 没声明 env.width 的组件画板收缩到内容宽(shrink-wrap),外壳按它定 iframe 宽 —— "裸放在画布上"
+  const wrapStyle: any = entry.env && entry.env.width ? wrap : { ...wrap, width: "fit-content" }
+
+  return (
+    <div data-cs-artboard={id} style={wrapStyle}>
+      {metaTag}
+      <CsErrorBoundary name={id}>
+        <Suspense fallback={<div style={loading}>loading…</div>}>{node}</Suspense>
+      </CsErrorBoundary>
+    </div>
+  )
+}
+`;
+}
+function boundaryTemplate() {
+  return HEADER + String.raw`"use client"
+import React from "react"
+
+const cardStyle: any = {
+  border: "1px dashed #e5484d",
+  borderRadius: 6,
+  background: "#fff5f5",
+  color: "#c62a2f",
+  padding: "10px 12px",
+  font: "12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+}
+
+export function CsErrorCard(props: any) {
+  return (
+    <div style={cardStyle} data-cs-error="1">
+      <div style={{ fontWeight: 700, marginBottom: 4 }}>{props.name}</div>
+      <div>{props.error}</div>
+    </div>
+  )
+}
+
+export class CsErrorBoundary extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error: any) {
+    return { error: String(error?.message ?? error) }
+  }
+  render() {
+    if (this.state.error) return <CsErrorCard name={this.props.name} error={this.state.error} />
+    return this.props.children
+  }
+}
+`;
+}
+function routeTemplate(registryImport) {
+  return HEADER + String.raw`import { modules, files } from "${registryImport}"
+
+// 不要加 export const dynamic = "force-dynamic":它与 Next 16 的 cacheComponents 互斥,
+// 用户开了那个配置会让 registry/ab/tokens 三条路由同时 500,且报错指向用户自己的 next.config。
+// dev 下 route handler 本来就不缓存,production 下这条路由直接 404,加它没有收益。
+
+// GET /__cs/registry → RegistryEntry[];kind 在这里判真值:有 url 是 screen,有 render 是 component
+export async function GET() {
+  if (process.env.NODE_ENV === "production") return new Response("Not Found", { status: 404 })
+
+  const entries: any[] = []
+  for (const slug of Object.keys(modules as any)) {
+    const mod: any = (modules as any)[slug]
+    if (!mod) continue
+    for (const exportName of Object.keys(mod)) {
+      const v: any = mod[exportName]
+      if (!v || typeof v !== "object") continue
+      // 没有 render 也没有 url 的对象照样进注册表(按 component):墙上出错误卡,
+      // 而不是静默消失 —— 用户把 render 敲错时必须有反馈
+      const kind = typeof v.url === "string" ? "screen" : "component"
+      entries.push({
+        id: slug + "--" + exportName,
+        file: (files as any)[slug] ?? "",
+        exportName,
+        kind,
+        args: v.args,
+        env: v.env,
+        url: v.url,
+      })
+    }
+  }
+  return Response.json(entries)
+}
+`;
+}
+function tokensTemplate() {
+  return HEADER + String.raw`"use client"
+import { useEffect, useState } from "react"
+
+type Token = { name: string; value: string }
+
+// 枚举同源样式表里 :root / :host / html 下的自定义属性
+// (Tailwind v4 的 @theme 编译后就是 @layer theme 里的 ":root, :host",靠递归 cssRules 拿到)
+function collectTokens(): Token[] {
+  const found = new Map<string, string>()
+  const visit = (rules: any) => {
+    if (!rules) return
+    for (let i = 0; i < rules.length; i++) {
+      const rule: any = rules[i]
+      if (rule.cssRules) visit(rule.cssRules)
+      const style: any = rule.style
+      if (!style) continue
+      const sel: string = typeof rule.selectorText === "string" ? rule.selectorText : ""
+      if (sel && !/:root|:host|(^|,)\s*html\b/.test(sel)) continue
+      for (let k = 0; k < style.length; k++) {
+        const prop: string = style[k]
+        if (prop && prop.slice(0, 2) === "--") found.set(prop, String(style.getPropertyValue(prop)).trim())
+      }
+    }
+  }
+  for (let i = 0; i < document.styleSheets.length; i++) {
+    try {
+      visit((document.styleSheets[i] as any).cssRules)
+    } catch {
+      // 跨域样式表读不到 cssRules,跳过
+    }
+  }
+  return Array.from(found, ([name, value]) => ({ name, value })).sort((a, b) => a.name.localeCompare(b.name))
+}
+
+// 值本身就是颜色的(shadcn 的 --primary / --background 这些没有 --color- 前缀)也给方块
+function isColorValue(v: string): boolean {
+  return /^(#|rgba?\(|hsla?\(|hwb\(|lab\(|lch\(|oklab\(|oklch\(|color\()/i.test(v)
+}
+
+const mono = "12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace"
+const page: any = { padding: 24, font: mono, color: "#111", background: "#fff", minHeight: "100vh" }
+const h2: any = { font: "600 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace", margin: "24px 0 10px", color: "#555" }
+const grid: any = { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(190px, 1fr))", gap: 12 }
+const cell: any = { border: "1px solid #eee", borderRadius: 6, padding: 10, overflow: "hidden" }
+const nameStyle: any = { fontWeight: 600, wordBreak: "break-all" }
+const valueStyle: any = { color: "#888", wordBreak: "break-all" }
+
+function Cell(props: any) {
+  return (
+    <div style={cell}>
+      {props.children}
+      <div style={nameStyle}>{props.token.name}</div>
+      <div style={valueStyle}>{props.token.value}</div>
+    </div>
+  )
+}
+
+function Group(props: any) {
+  if (props.tokens.length === 0) return null
+  return (
+    <section>
+      <h2 style={h2}>
+        {props.title} · {props.tokens.length}
+      </h2>
+      <div style={grid}>
+        {props.tokens.map((t: Token) => (
+          <Cell key={t.name} token={t}>
+            {props.kind === "color" || isColorValue(t.value) ? (
+              <div
+                style={{
+                  height: 44,
+                  marginBottom: 8,
+                  borderRadius: 4,
+                  border: "1px solid rgba(0,0,0,.1)",
+                  background: "var(" + t.name + ")",
+                }}
+              />
+            ) : null}
+            {props.kind === "radius" ? (
+              <div
+                style={{
+                  height: 44,
+                  marginBottom: 8,
+                  border: "1px solid #ddd",
+                  background: "#f6f6f6",
+                  borderRadius: "var(" + t.name + ")",
+                }}
+              />
+            ) : null}
+          </Cell>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default function TokensPage() {
+  const [tokens, setTokens] = useState<Token[]>([])
+  useEffect(() => {
+    setTokens(collectTokens())
+  }, [])
+
+  if (process.env.NODE_ENV === "production") return null // 生产里这页不出现
+
+  const pick = (p: string) => tokens.filter((t) => t.name.indexOf(p) === 0)
+  const known = ["--color-", "--radius-", "--font-", "--spacing-"]
+  const rest = tokens.filter((t) => !known.some((p) => t.name.indexOf(p) === 0))
+
+  return (
+    <main style={page}>
+      <div style={{ font: mono, color: "#888" }}>contactsheet · design tokens · 共 {tokens.length} 个自定义属性</div>
+      {tokens.length === 0 ? (
+        <p style={{ color: "#888", marginTop: 16 }}>没读到自定义属性(样式表可能还没加载完,或都是跨域的)。</p>
+      ) : null}
+      <Group title="颜色 --color-*" kind="color" tokens={pick("--color-")} />
+      <Group title="圆角 --radius-*" kind="radius" tokens={pick("--radius-")} />
+      <Group title="字体 --font-*" kind="text" tokens={pick("--font-")} />
+      <Group title="间距 --spacing-*" kind="text" tokens={pick("--spacing-")} />
+      <Group title="其它" kind="text" tokens={rest} />
+    </main>
+  )
+}
+`;
+}
+function registryTemplate(items) {
+  const imports = items.map((it) => "import * as " + it.varName + ' from "' + it.importPath + '"').join("\n");
+  const mods = items.map((it) => '  "' + it.slug + '": ' + it.varName + ",").join("\n");
+  const fileMap = items.map((it) => '  "' + it.slug + '": "' + it.file + '",').join("\n");
+  return "// \u7531 contactsheet \u81EA\u52A8\u751F\u6210 \u2014\u2014 \u8BF7\u52FF\u7F16\u8F91,\u753B\u677F\u6587\u4EF6\u589E\u5220\u6539\u540E\u4F1A\u88AB\u91CD\u5199\n" + (imports ? imports + "\n\n" : "") + "export const modules: Record<string, Record<string, unknown>> = " + (items.length ? "{\n" + mods + "\n}\n" : "{}\n") + "\n// fileSlug \u2192 repo \u76F8\u5BF9\u8DEF\u5F84,\u7ED9 /__cs/registry \u586B RegistryEntry.file\nexport const files: Record<string, string> = " + (items.length ? "{\n" + fileMap + "\n}\n" : "{}\n");
+}
+
+// src/inject/index.ts
+var CS_DIR = "%5F%5Fcs";
+var GITIGNORE_BEGIN = "# contactsheet begin";
+var GITIGNORE_END = "# contactsheet end";
+function normRel(p) {
+  return p.replace(/\\/g, "/").replace(/^\.\//, "").replace(/\/+$/, "");
+}
+function csDirRel(cfg) {
+  return normRel(cfg.appDir) + "/" + CS_DIR;
+}
+function registryImportFrom(fromDirRel, cfg) {
+  const target = normRel(cfg.designDir) + "/__generated__/registry";
+  const rel = path2.posix.relative(fromDirRel, target);
+  return rel.startsWith(".") ? rel : "./" + rel;
+}
+async function readOr(file, fallback) {
+  try {
+    return await fs2.readFile(file, "utf8");
+  } catch {
+    return fallback;
+  }
+}
+async function writeIfChanged(file, content) {
+  if (await readOr(file, null) === content) return false;
+  await fs2.mkdir(path2.dirname(file), { recursive: true });
+  await fs2.writeFile(file, content, "utf8");
+  return true;
+}
+function findBlock(text2) {
+  const start = text2.indexOf(GITIGNORE_BEGIN);
+  if (start < 0) return null;
+  const at = text2.indexOf(GITIGNORE_END, start);
+  if (at < 0) return null;
+  return { start, end: at + GITIGNORE_END.length };
+}
+function gitignoreBlock(cfg) {
+  const design = normRel(cfg.designDir);
+  return [GITIGNORE_BEGIN, csDirRel(cfg) + "/", design + "/__generated__/", design + "/.canvas/", GITIGNORE_END].join(
+    "\n"
+  );
+}
+async function updateGitignore(cfg) {
+  const file = path2.join(cfg.projectRoot, ".gitignore");
+  const old = await readOr(file, "");
+  const block = gitignoreBlock(cfg);
+  const found = findBlock(old);
+  const next = found ? old.slice(0, found.start) + block + old.slice(found.end) : (old.trimEnd() ? old.trimEnd() + "\n\n" : "") + block + "\n";
+  await writeIfChanged(file, next);
+}
+async function removeGitignoreBlock(cfg) {
+  const file = path2.join(cfg.projectRoot, ".gitignore");
+  const old = await readOr(file, null);
+  if (old === null) return;
+  const found = findBlock(old);
+  if (!found) return;
+  const left = (old.slice(0, found.start) + old.slice(found.end)).replace(/\n{3,}/g, "\n\n").trimEnd();
+  await writeIfChanged(file, left ? left + "\n" : "");
+}
+async function ensureInjected(cfg) {
+  const root = cfg.projectRoot;
+  const designAbs = path2.join(root, normRel(cfg.designDir));
+  await fs2.mkdir(designAbs, { recursive: true });
+  await fs2.mkdir(path2.join(designAbs, ".canvas"), { recursive: true });
+  const abDirRel = csDirRel(cfg) + "/ab/[id]";
+  await writeIfChanged(path2.join(root, abDirRel, "page.tsx"), pageTemplate(registryImportFrom(abDirRel, cfg)));
+  await writeIfChanged(path2.join(root, abDirRel, "boundary.tsx"), boundaryTemplate());
+  const routeDirRel = csDirRel(cfg) + "/registry";
+  await writeIfChanged(path2.join(root, routeDirRel, "route.ts"), routeTemplate(registryImportFrom(routeDirRel, cfg)));
+  await writeIfChanged(path2.join(root, csDirRel(cfg), "tokens", "page.tsx"), tokensTemplate());
+  await updateGitignore(cfg);
+  await regenerateRegistry(cfg);
+}
+async function removeInjected(cfg) {
+  await fs2.rm(path2.join(cfg.projectRoot, csDirRel(cfg)), { recursive: true, force: true });
+  await fs2.rm(path2.join(cfg.projectRoot, normRel(cfg.designDir), "__generated__"), { recursive: true, force: true });
+  await removeGitignoreBlock(cfg);
+}
+async function scanArtboards(designAbs, sub = "") {
+  let dirents;
+  try {
+    dirents = await fs2.readdir(path2.join(designAbs, sub), { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const out = [];
+  for (const d of dirents) {
+    const rel = sub ? sub + "/" + d.name : d.name;
+    if (d.isDirectory()) {
+      if (d.name === "__generated__" || d.name === "node_modules" || d.name.startsWith(".")) continue;
+      out.push(...await scanArtboards(designAbs, rel));
+    } else if (/\.artboard\.tsx?$/.test(d.name)) {
+      out.push(rel);
+    }
+  }
+  return out;
+}
+function extractExports(source) {
+  const re = /^export\s+const\s+([\p{L}\w$]+)/gmu;
+  const names = [];
+  let m;
+  while ((m = re.exec(source)) !== null) {
+    if (!names.includes(m[1])) names.push(m[1]);
+  }
+  return names;
+}
+function slugOf(rel) {
+  return rel.replace(/\.artboard\.tsx?$/, "").replace(/\//g, "__");
+}
+async function regenerateRegistry(cfg) {
+  const designRel = normRel(cfg.designDir);
+  const designAbs = path2.join(cfg.projectRoot, designRel);
+  const rels = (await scanArtboards(designAbs)).sort();
+  const items = [];
+  const entries = [];
+  for (const rel of rels) {
+    const source = await readOr(path2.join(designAbs, rel), null);
+    if (source === null) continue;
+    const names = extractExports(source);
+    if (names.length === 0) continue;
+    const slug = slugOf(rel);
+    const file = designRel + "/" + rel;
+    items.push({
+      varName: "m" + items.length,
+      // registry.tsx 在 <designDir>/__generated__/ 下,上一级就是 designDir
+      importPath: "../" + rel.replace(/\.tsx?$/, ""),
+      slug,
+      file
+    });
+    for (const exportName of names) {
+      entries.push({ id: slug + "--" + exportName, file, exportName, kind: "component" });
+    }
+  }
+  await writeIfChanged(path2.join(designAbs, "__generated__", "registry.tsx"), registryTemplate(items));
+  return entries;
+}
+
+// src/init/index.ts
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+var DEFAULT_TARGET2 = "http://localhost:3000";
+var DEFAULT_PORT2 = 5199;
+var DEFAULT_DESIGN_DIR2 = "design";
+var UI_DIR_CANDIDATES = ["components/ui", "src/components/ui"];
+async function runInit(cwd, flags) {
+  const root = resolve(cwd);
+  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})`);
+  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`);
+}
+function assertNextProject(root) {
+  const pkgPath = join(root, "package.json");
+  if (!existsSync(pkgPath)) {
+    throw new Error(
+      `contactsheet init \u4E2D\u6B62:${root} \u4E0B\u6CA1\u6709 package.json\u3002
+contactsheet \u662F\u9644\u7740\u5728\u4F60\u81EA\u5DF1\u7684 Next.js \u9879\u76EE\u4E0A\u8DD1\u7684,\u8BF7\u5230\u9879\u76EE\u6839\u76EE\u5F55\u518D\u6267\u884C\u4E00\u6B21\u3002`
+    );
+  }
+  const pkg = readJsonObject(pkgPath) ?? {};
+  const deps = { ...asRecord(pkg["dependencies"]), ...asRecord(pkg["devDependencies"]) };
+  if (!("next" in deps)) {
+    throw new Error(
+      `contactsheet init \u4E2D\u6B62:${pkgPath} \u7684 dependencies / devDependencies \u91CC\u6CA1\u6709 next\u3002
+contactsheet v1 \u53EA\u8BA4 Next.js App Router \u9879\u76EE \u2014\u2014 \u5B83\u9760\u5F80\u4F60\u7684 app \u76EE\u5F55\u6CE8\u5165\u4E00\u6761\u753B\u677F\u8DEF\u7531\u5E72\u6D3B,
+\u6E32\u67D3\u540E\u7AEF\u5C31\u662F\u4F60\u81EA\u5DF1\u7684 next dev,\u6CA1\u6709 Next \u5C31\u6CA1\u6709\u753B\u677F\u3002`
+    );
+  }
+}
+function detectAppDir2(root) {
+  for (const candidate of ["src/app", "app"]) {
+    if (isDir(join(root, candidate))) return candidate;
+  }
+  throw new Error(
+    `contactsheet init \u4E2D\u6B62:${root} \u4E0B\u65E2\u6CA1\u6709 src/app/ \u4E5F\u6CA1\u6709 app/\u3002
+contactsheet v1 \u53EA\u652F\u6301 App Router(\u753B\u677F\u8DEF\u7531\u8981\u6CE8\u5165\u5230 app \u76EE\u5F55\u91CC)\u3002Pages Router \u9879\u76EE\u6682\u65F6\u7528\u4E0D\u4E86\u3002`
+  );
+}
+function writeConfigFile(root, appDir, flags) {
+  const file = join(root, "contactsheet.config.json");
+  const existing = readJsonObject(file) ?? {};
+  const resolved = {
+    target: pickString(flags.target, existing["target"], DEFAULT_TARGET2),
+    port: pickNumber(flags.port, existing["port"], DEFAULT_PORT2),
+    appDir: pickString(flags.appDir, existing["appDir"], appDir),
+    designDir: pickString(flags.designDir, existing["designDir"], DEFAULT_DESIGN_DIR2)
+  };
+  writeJsonFile(file, { ...existing, ...resolved });
+  return { projectRoot: root, ...resolved };
+}
+function seedArtboards(root, designDir) {
+  const uiDir = UI_DIR_CANDIDATES.map((p) => join(root, p)).find(isDir);
+  if (!uiDir) {
+    console.log(`  \u753B\u677F:\u6CA1\u627E\u5230 components/ui/,\u8DF3\u8FC7\u81EA\u52A8\u94FA\u753B\u677F(\u624B\u5199 ${designDir}/*.artboard.tsx \u4E00\u6837\u7528)`);
+    return;
+  }
+  const files = readdirSync(uiDir).filter((f) => f.endsWith(".tsx")).sort();
+  const targetDir = join(root, designDir);
+  let created = 0;
+  let skipped = 0;
+  let unreadable = 0;
+  for (const base of files) {
+    const componentFile = join(uiDir, base);
+    const name = firstComponentExport(readFileSync(componentFile, "utf8"));
+    if (!name) {
+      unreadable++;
+      continue;
+    }
+    const artboard = join(targetDir, `${name}.artboard.tsx`);
+    if (existsSync(artboard)) {
+      skipped++;
+      continue;
+    }
+    mkdirSync(targetDir, { recursive: true });
+    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` : ""));
+}
+function firstComponentExport(source) {
+  const hits = [];
+  const declRe = /^export\s+(?:async\s+)?(?:const|let|var|function|class)\s+([A-Za-z_$][\w$]*)/gm;
+  for (const m of source.matchAll(declRe)) {
+    if (isPascal(m[1])) hits.push({ index: m.index ?? 0, name: m[1] });
+  }
+  const listRe = /^export\s*\{([^}]*)\}/gm;
+  for (const m of source.matchAll(listRe)) {
+    for (const raw of m[1].split(",")) {
+      const item = raw.trim();
+      if (!item || item.startsWith("type ")) continue;
+      const parts = item.split(/\s+as\s+/);
+      const name = parts[parts.length - 1].trim();
+      if (isPascal(name)) {
+        hits.push({ index: m.index ?? 0, name });
+        break;
+      }
+    }
+  }
+  if (hits.length === 0) return null;
+  hits.sort((a, b) => a.index - b.index);
+  return hits[0].name;
+}
+function isPascal(name) {
+  return /^[A-Z][A-Za-z0-9_$]*$/.test(name);
+}
+function importPathFor(root, designDir, componentFile) {
+  const aliasBase = readAliasBase(root);
+  if (aliasBase && toPosix(componentFile).startsWith(toPosix(aliasBase) + "/")) {
+    return "@/" + toPosix(relative(aliasBase, componentFile)).replace(/\.tsx$/, "");
+  }
+  const rel = toPosix(relative(join(root, designDir), componentFile)).replace(/\.tsx$/, "");
+  return rel.startsWith(".") ? rel : "./" + rel;
+}
+function readAliasBase(root) {
+  const file = join(root, "tsconfig.json");
+  if (!existsSync(file)) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(readFileSync(file, "utf8"));
+  } catch {
+    return null;
+  }
+  const paths = asRecord(asRecord(asRecord(parsed)["compilerOptions"])["paths"]);
+  const entry = paths["@/*"];
+  const first = Array.isArray(entry) ? entry[0] : void 0;
+  if (typeof first !== "string") return null;
+  return resolve(root, first.replace(/\/?\*$/, ""));
+}
+function artboardTemplate(name, importPath) {
+  return `// contactsheet \u81EA\u52A8\u751F\u6210\u7684\u753B\u677F\u9AA8\u67B6 \u2014\u2014 \u968F\u4FBF\u6539,init \u4E0D\u4F1A\u518D\u8986\u76D6\u5B83
+import { ${name} } from '${importPath}'
+
+export const \u9ED8\u8BA4 = {
+  render: () => <${name}>\u793A\u4F8B</${name}>,
+}
+`;
+}
+function writeMcpJson(root, port) {
+  const file = join(root, ".mcp.json");
+  const doc = readJsonObject(file) ?? {};
+  const servers = asRecord(doc["mcpServers"]);
+  const had = "contactsheet" in servers;
+  servers["contactsheet"] = { type: "http", url: `http://localhost:${port}/__cs/mcp` };
+  doc["mcpServers"] = servers;
+  writeJsonFile(file, doc);
+  const others = Object.keys(servers).filter((k) => k !== "contactsheet").length;
+  console.log(
+    `  .mcp.json:${had ? "\u66F4\u65B0" : "\u5199\u5165"} mcpServers.contactsheet` + (others ? `(\u53E6\u5916 ${others} \u4E2A server \u539F\u6837\u4FDD\u7559)` : "")
+  );
+}
+function writeClaudeHook(root, port) {
+  const file = join(root, ".claude", "settings.json");
+  const doc = readJsonObject(file) ?? {};
+  const hooks = asRecord(doc["hooks"]);
+  const list = Array.isArray(hooks["UserPromptSubmit"]) ? hooks["UserPromptSubmit"] : [];
+  const existingCommands = [];
+  for (const group of list) {
+    for (const h of Array.isArray(asRecord(group)["hooks"]) ? asRecord(group)["hooks"] : []) {
+      const cmd = asRecord(h)["command"];
+      if (typeof cmd === "string") existingCommands.push(cmd);
+    }
+  }
+  const already = existingCommands.filter((c) => c.includes("/__cs/api/context"));
+  if (already.length > 0) {
+    console.log(`  .claude/settings.json:context hook \u5DF2\u5B58\u5728,\u4E0D\u91CD\u590D\u6DFB\u52A0`);
+    if (!already.some((c) => c.includes(`localhost:${port}/`))) {
+      console.log(`    \u6CE8\u610F:\u5DF2\u6709\u7684 hook \u6253\u7684\u4E0D\u662F :${port},\u7AEF\u53E3\u6362\u8FC7\u7684\u8BDD\u8BF7\u624B\u6539\u8FD9\u6761 command`);
+    }
+    return;
+  }
+  const command = `curl -s --noproxy '*' --max-time 1 http://localhost:${port}/__cs/api/context || true`;
+  list.push({ hooks: [{ type: "command", command }] });
+  hooks["UserPromptSubmit"] = list;
+  doc["hooks"] = hooks;
+  writeJsonFile(file, doc);
+  console.log(`  .claude/settings.json:\u52A0\u4E86 UserPromptSubmit hook(\u81EA\u52A8\u628A\u6279\u6CE8\u548C\u9009\u4E2D\u5143\u7D20\u5E26\u7ED9 Claude)`);
+}
+function isDir(p) {
+  try {
+    return statSync(p).isDirectory();
+  } catch {
+    return false;
+  }
+}
+function toPosix(p) {
+  return p.split("\\").join("/");
+}
+function asRecord(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v) ? v : {};
+}
+function pickString(...candidates) {
+  for (const c of candidates) if (typeof c === "string" && c !== "") return c;
+  return "";
+}
+function pickNumber(...candidates) {
+  for (const c of candidates) if (typeof c === "number" && Number.isFinite(c)) return c;
+  return 0;
+}
+function readJsonObject(file) {
+  if (!existsSync(file)) return null;
+  const raw = readFileSync(file, "utf8");
+  if (raw.trim() === "") return {};
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (err) {
+    throw new Error(
+      `contactsheet init \u4E2D\u6B62:${file} \u4E0D\u662F\u5408\u6CD5\u7684 JSON(${err.message})\u3002
+init \u53EA\u4F1A\u5F80\u91CC\u5408\u5E76\u3001\u4E0D\u4F1A\u91CD\u5199,\u6240\u4EE5\u770B\u4E0D\u61C2\u7684\u6587\u4EF6\u4E00\u5F8B\u4E0D\u52A8 \u2014\u2014 \u8BF7\u5148\u4FEE\u597D\u5B83\u518D\u8DD1\u4E00\u6B21\u3002`
+    );
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error(`contactsheet init \u4E2D\u6B62:${file} \u7684\u9876\u5C42\u4E0D\u662F\u4E00\u4E2A JSON \u5BF9\u8C61,init \u4E0D\u52A8\u5B83\u3002`);
+  }
+  return parsed;
+}
+function writeJsonFile(file, value) {
+  mkdirSync(dirname(file), { recursive: true });
+  writeFileSync(file, JSON.stringify(value, null, 2) + "\n", "utf8");
+}
+
+// src/server/index.ts
+import fs6 from "node:fs";
+import http from "node:http";
+import httpProxy from "http-proxy";
+
+// src/mcp/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { z } from "zod";
+async function guard(run) {
+  try {
+    return await run();
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    const text2 = msg.startsWith("contactsheet:") ? msg : `contactsheet: ${msg}`;
+    return { isError: true, content: [{ type: "text", text: text2 }] };
+  }
+}
+function text(value) {
+  return { content: [{ type: "text", text: typeof value === "string" ? value : JSON.stringify(value, null, 2) }] };
+}
+function buildServer(services) {
+  const server = new McpServer(
+    { name: "contactsheet", version: "0.1.0" },
+    { capabilities: { tools: {} } }
+  );
+  server.registerTool(
+    "canvas_list",
+    {
+      title: "\u5217\u51FA\u753B\u677F",
+      description: "\u5217\u51FA contactsheet \u753B\u5E03\u4E0A\u7684\u5168\u90E8\u753B\u677F(\u8BBE\u8BA1\u7A3F)\u3002\u8FD4\u56DE JSON \u6570\u7EC4,\u6BCF\u9879\u542B id\u3001file(\u6E90\u6587\u4EF6\u76F8\u5BF9\u8DEF\u5F84)\u3001exportName\u3001kind(component=\u7EC4\u4EF6\u753B\u677F / screen=\u9875\u9762\u753B\u677F)\u3001args(\u7EC4\u4EF6\u9ED8\u8BA4\u5165\u53C2)\u3001env(\u5BBD\u9AD8\u7B49)\u3002\u8981\u622A\u67D0\u5757\u753B\u677F\u524D\u5148\u7528\u5B83\u62FF\u5230\u51C6\u786E\u7684 id\u3002",
+      annotations: { readOnlyHint: true }
+    },
+    async () => guard(async () => text(await services.getRegistry()))
+  );
+  server.registerTool(
+    "canvas_screenshot",
+    {
+      title: "\u622A\u56FE\u753B\u677F",
+      description: "\u7ED9\u753B\u677F\u622A\u56FE\u5E76\u628A\u56FE\u7247\u8FD4\u56DE\u7ED9\u4F60\u770B\u3002\u4F20 id \u622A\u5355\u5757\u753B\u677F(id \u4ECE canvas_list \u62FF,\u7EC4\u4EF6\u753B\u677F\u622A\u5168\u9875);\u4E0D\u4F20 id \u622A\u6574\u9762\u753B\u5E03\u5899\u7684\u6982\u89C8\u3002\u8FD4\u56DE\u4E00\u5F20 PNG \u56FE\u7247 + \u56FE\u7247\u5728 repo \u91CC\u7684\u4FDD\u5B58\u8DEF\u5F84\u3002\u60F3\u786E\u8BA4 UI \u6539\u52A8\u7684\u5B9E\u9645\u6548\u679C\u5C31\u7528\u5B83\u3002",
+      inputSchema: {
+        id: z.string().optional().describe("\u753B\u677F id(\u6765\u81EA canvas_list);\u7701\u7565\u5219\u622A\u6574\u9762\u5899\u7684\u6982\u89C8\u56FE")
+      },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ id }) => guard(async () => {
+      const shot = await services.takeShot(id ? { id } : {});
+      return {
+        content: [
+          { type: "image", data: shot.base64, mimeType: "image/png" },
+          { type: "text", text: `\u5DF2\u4FDD\u5B58:${shot.path}(${shot.width}\xD7${shot.height})` }
+        ]
+      };
+    })
+  );
+  server.registerTool(
+    "canvas_selection",
+    {
+      title: "\u5F53\u524D\u9009\u4E2D\u5143\u7D20",
+      description: "\u8BFB\u7528\u6237\u6B64\u523B\u5728 contactsheet \u753B\u5E03\u4E0A\u70B9\u9009\u7684\u5143\u7D20:\u8FD4\u56DE JSON,\u542B artboardId(\u54EA\u5757\u753B\u677F)\u3001selector(\u753B\u677F\u6587\u6863\u5185\u7684 CSS \u9009\u62E9\u5668)\u3001x/y(\u5143\u7D20\u5185 0-1 \u76F8\u5BF9\u5750\u6807)\u3001ts(\u65F6\u95F4\u6233)\u3002\u7528\u6237\u8BF4\u300C\u8FD9\u4E2A\u6309\u94AE\u300D\u300C\u8FD9\u91CC\u300D\u7684\u65F6\u5019\u5148\u8C03\u5B83\u786E\u8BA4\u6307\u7684\u662F\u8C01\u3002\u6CA1\u6709\u9009\u4E2D\u65F6\u8FD4\u56DE no selection\u3002",
+      annotations: { readOnlyHint: true }
+    },
+    async () => guard(async () => {
+      const selection2 = services.getSelection();
+      return selection2 ? text(selection2) : text("no selection");
+    })
+  );
+  server.registerTool(
+    "canvas_annotations",
+    {
+      title: "\u672A\u5904\u7406\u6279\u6CE8",
+      description: "\u5217\u51FA\u753B\u5E03\u4E0A\u72B6\u6001\u4E3A open(\u672A\u5904\u7406)\u7684\u6279\u6CE8:\u8FD4\u56DE JSON \u6570\u7EC4,\u6BCF\u9879\u542B id\u3001text(\u7528\u6237\u5199\u7684\u8BDD)\u3001artboardId\u3001anchor(\u951A\u5B9A\u7684\u5143\u7D20\u4E0E\u4F4D\u7F6E)\u3001refs(\u9644\u5E26\u7684\u53C2\u8003\u56FE\u8DEF\u5F84)\u3001createdAt\u3002\u8FD9\u4E9B\u5C31\u662F\u7528\u6237\u5E0C\u671B\u4F60\u6539\u7684\u5730\u65B9\u3002",
+      annotations: { readOnlyHint: true }
+    },
+    async () => guard(async () => {
+      const all = await services.getAnnotations();
+      return text(all.filter((a) => a.status === "open"));
+    })
+  );
+  return server;
+}
+function sendJsonRpcError(res, status, code, message) {
+  if (res.headersSent) {
+    res.end();
+    return;
+  }
+  res.writeHead(status, { "content-type": "application/json" });
+  res.end(JSON.stringify({ jsonrpc: "2.0", error: { code, message }, id: null }));
+}
+function createMcpHandler(services) {
+  return async function handleMcpRequest(req, res) {
+    if (req.method !== "POST") {
+      sendJsonRpcError(res, 405, -32e3, "Method not allowed.");
+      return;
+    }
+    const server = buildServer(services);
+    const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: void 0 });
+    res.on("close", () => {
+      void transport.close().catch(() => {
+      });
+      void server.close().catch(() => {
+      });
+    });
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      sendJsonRpcError(res, 500, -32603, `Internal server error: ${msg}`);
+    }
+  };
+}
+
+// src/shot/index.ts
+import { mkdir, writeFile } from "node:fs/promises";
+import path3 from "node:path";
+import { chromium } from "playwright-core";
+var IDLE_MS = 6e4;
+var NAV_TIMEOUT_MS = 3e4;
+var browserPromise = null;
+var idleTimer = null;
+async function getBrowser() {
+  if (!browserPromise) {
+    browserPromise = chromium.launch({ channel: "msedge", headless: true }).catch((err) => {
+      browserPromise = null;
+      const msg = err instanceof Error ? err.message : String(err);
+      throw new Error(
+        `contactsheet: \u542F\u52A8 Microsoft Edge \u5931\u8D25(playwright-core channel=msedge)\u3002\u8BF7\u786E\u8BA4\u672C\u673A\u88C5\u4E86 Edge\u3002\u539F\u59CB\u9519\u8BEF:${msg}`
+      );
+    });
+  }
+  return browserPromise;
+}
+function scheduleIdleClose() {
+  if (idleTimer) clearTimeout(idleTimer);
+  idleTimer = setTimeout(() => {
+    idleTimer = null;
+    void closeBrowser();
+  }, IDLE_MS);
+  idleTimer.unref?.();
+}
+async function closeBrowser() {
+  if (idleTimer) {
+    clearTimeout(idleTimer);
+    idleTimer = null;
+  }
+  const pending = browserPromise;
+  browserPromise = null;
+  if (!pending) return;
+  try {
+    const browser = await pending;
+    await browser.close();
+  } catch {
+  }
+}
+async function captureUrl(opts) {
+  const browser = await getBrowser();
+  const context = await browser.newContext({ viewport: { width: opts.width, height: opts.height } });
+  try {
+    const page = await context.newPage();
+    try {
+      await page.goto(opts.url, { waitUntil: "networkidle", timeout: NAV_TIMEOUT_MS });
+    } catch {
+      await page.waitForLoadState("domcontentloaded").catch(() => {
+      });
+    }
+    if (opts.settleMs > 0) await page.waitForTimeout(opts.settleMs);
+    return await page.screenshot({ fullPage: opts.fullPage, type: "png" });
+  } finally {
+    await context.close();
+    scheduleIdleClose();
+  }
+}
+async function fetchRegistry(cfg) {
+  const url = `${cfg.target.replace(/\/+$/, "")}/__cs/registry`;
+  let res;
+  try {
+    res = await fetch(url);
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    throw new Error(
+      `contactsheet: \u8BFB\u4E0D\u5230\u6CE8\u518C\u8868 ${url}\u3002\u786E\u8BA4\u4F60\u7684 next dev \u6B63\u5728\u8DD1,\u5E76\u4E14 contactsheet \u5DF2\u6CE8\u5165\u8DEF\u7531(\u5728\u9879\u76EE\u91CC\u8DD1 npx contactsheet)\u3002\u539F\u59CB\u9519\u8BEF:${msg}`
+    );
+  }
+  if (!res.ok) {
+    throw new Error(
+      `contactsheet: \u6CE8\u518C\u8868 ${url} \u8FD4\u56DE ${res.status}\u3002\u6CE8\u5165\u8DEF\u7531\u53EF\u80FD\u6CA1\u751F\u6548,\u91CD\u8DD1 npx contactsheet \u8BA9\u5B83\u91CD\u5199\u6CE8\u5165\u6587\u4EF6\u3002`
+    );
+  }
+  return await res.json();
+}
+function safeFileName(id) {
+  return id.replace(/[/\\:*?"<>|]/g, "_");
+}
+function pngSize(buf) {
+  return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+}
+async function save(cfg, name, buf) {
+  const file = `${safeFileName(name)}.png`;
+  const abs = path3.join(cfg.projectRoot, cfg.designDir, ".canvas", "shots", file);
+  await mkdir(path3.dirname(abs), { recursive: true });
+  await writeFile(abs, buf);
+  return `${cfg.designDir.split(path3.sep).join("/").replace(/\/+$/, "")}/.canvas/shots/${file}`;
+}
+async function screenshot(cfg, req) {
+  let buf;
+  let name;
+  if (req.id) {
+    const entries = await fetchRegistry(cfg);
+    const entry = entries.find((e) => e.id === req.id);
+    if (!entry) {
+      const known = entries.slice(0, 10).map((e) => e.id).join(", ");
+      throw new Error(
+        `contactsheet: \u6CE8\u518C\u8868\u91CC\u6CA1\u6709\u753B\u677F "${req.id}"\u3002\u5DF2\u77E5 id:${known || "(\u7A7A)"}${entries.length > 10 ? " \u2026" : ""}`
+      );
+    }
+    const base = `http://localhost:${cfg.port}`;
+    let url;
+    if (entry.kind === "screen") {
+      url = `${base}${entry.url ?? "/"}`;
+    } else {
+      url = `${base}/__cs/ab/${encodeURIComponent(entry.id)}`;
+      if (req.args) url += `?args=${encodeURIComponent(JSON.stringify(req.args))}`;
+    }
+    buf = await captureUrl({
+      url,
+      width: entry.env?.width ?? 480,
+      height: 900,
+      fullPage: true,
+      settleMs: 50
+    });
+    name = entry.id;
+  } else {
+    buf = await captureUrl({
+      url: `http://localhost:${cfg.port}/__cs`,
+      width: 2400,
+      height: 1350,
+      fullPage: false,
+      settleMs: 3e3
+    });
+    name = "wall";
+  }
+  const relPath = await save(cfg, name, buf);
+  const { width, height } = pngSize(buf);
+  return { path: relPath, base64: buf.toString("base64"), width, height };
+}
+
+// src/server/api.ts
+import { randomUUID } from "node:crypto";
+
+// src/server/assets.ts
+import fs3 from "node:fs";
+import path4 from "node:path";
+import { fileURLToPath } from "node:url";
+var here = path4.dirname(fileURLToPath(import.meta.url));
+var pkgRoot = path4.resolve(here, "..");
+var DIRS = [
+  path4.join(here, "canvas"),
+  // 发布形态:dist/cli.js 旁边的 dist/canvas
+  path4.join(pkgRoot, "dist", "canvas"),
+  path4.join(pkgRoot, "src", "canvas")
+  // 开发期直读源码里的 index.html / style.css
+];
+function findUiFile(name) {
+  for (const dir of DIRS) {
+    const p = path4.join(dir, name);
+    if (fs3.existsSync(p) && fs3.statSync(p).isFile()) return p;
+  }
+  return null;
+}
+var MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp"
+};
+function mimeOf(file) {
+  return MIME[path4.extname(file)] ?? "application/octet-stream";
+}
+function pkgVersion() {
+  try {
+    const pkg = JSON.parse(fs3.readFileSync(path4.join(pkgRoot, "package.json"), "utf8"));
+    return pkg.version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+
+// src/server/push.ts
+import fs4 from "node:fs/promises";
+import net from "node:net";
+import os from "node:os";
+import path5 from "node:path";
+function isLive(sock) {
+  return new Promise((resolve2) => {
+    const s = new net.Socket();
+    const done = (ok) => {
+      s.destroy();
+      resolve2(ok);
+    };
+    s.on("connect", () => done(true));
+    s.on("error", () => done(false));
+    s.setTimeout(250, () => done(false));
+    s.connect({ path: sock });
+  });
+}
+async function listTargets(cfg) {
+  const root = path5.resolve(cfg.projectRoot);
+  const dir = path5.join(os.homedir(), ".claude", "sessions");
+  let names;
+  try {
+    names = await fs4.readdir(dir);
+  } catch {
+    return [];
+  }
+  const out = [];
+  await Promise.all(
+    names.filter((n) => n.endsWith(".json")).map(async (n) => {
+      let rec;
+      try {
+        rec = JSON.parse(await fs4.readFile(path5.join(dir, n), "utf8"));
+      } catch {
+        return;
+      }
+      if (!rec.pid || !rec.cwd || !rec.messagingSocketPath) return;
+      if (rec.kind && rec.kind !== "interactive") return;
+      const rel = path5.relative(root, path5.resolve(rec.cwd));
+      if (rel.startsWith("..") || path5.isAbsolute(rel)) return;
+      if (!await isLive(rec.messagingSocketPath)) return;
+      out.push({
+        pid: rec.pid,
+        name: rec.name ?? `pid ${rec.pid}`,
+        status: rec.status ?? "unknown",
+        cwd: rec.cwd,
+        socket: rec.messagingSocketPath,
+        updatedAt: rec.updatedAt ?? 0
+      });
+    })
+  );
+  out.sort((a, b) => b.updatedAt - a.updatedAt);
+  return out;
+}
+function inject(sock, content) {
+  return new Promise((resolve2, reject) => {
+    const s = net.createConnection({ path: sock });
+    s.setTimeout(3e3, () => {
+      s.destroy();
+      reject(new Error("\u5199\u5165\u8D85\u65F6"));
+    });
+    s.on("error", reject);
+    s.on("connect", () => {
+      const line = JSON.stringify({ type: "user", message: { role: "user", content } }) + "\n";
+      s.end(line, () => resolve2());
+    });
+  });
+}
+async function pushToSession(cfg, text2, pid) {
+  const targets = await listTargets(cfg);
+  if (!targets.length) {
+    return {
+      ok: false,
+      reason: `\u6CA1\u627E\u5230\u5DE5\u4F5C\u76EE\u5F55\u5728 ${cfg.projectRoot} \u4E0B\u7684 Claude Code \u4F1A\u8BDD(\u8981\u5148\u5728\u9879\u76EE\u76EE\u5F55\u91CC\u5F00\u7740 claude)`
+    };
+  }
+  let target;
+  if (pid !== void 0) {
+    target = targets.find((t) => t.pid === pid);
+    if (!target) return { ok: false, reason: `\u4F1A\u8BDD pid ${pid} \u5DF2\u4E0D\u5728(\u53EF\u80FD\u521A\u5173\u6389),\u91CD\u6309 p \u91CD\u9009` };
+  } else if (targets.length === 1) {
+    target = targets[0];
+  } else {
+    return {
+      ok: false,
+      choose: targets.map(({ pid: p, name, status, cwd }) => ({ pid: p, name, status, cwd }))
+    };
+  }
+  const body = `[contactsheet] \u7528\u6237\u5728\u753B\u5E03\u4E0A\u6309\u4E0B\u4E86\u63A8\u9001\u952E,\u4EE5\u4E0B\u662F\u5F53\u524D\u753B\u5E03\u4E0A\u4E0B\u6587,\u8BF7\u6309\u6279\u6CE8\u5904\u7406:
+
+` + text2;
+  await inject(target.socket, body);
+  return { ok: true, pid: target.pid, name: target.name };
+}
+
+// src/server/sse.ts
+var clients = /* @__PURE__ */ new Set();
+var heartbeat = null;
+function attach(req, res) {
+  res.writeHead(200, {
+    "content-type": "text/event-stream; charset=utf-8",
+    "cache-control": "no-cache, no-transform",
+    connection: "keep-alive",
+    "x-accel-buffering": "no"
+  });
+  res.write(": contactsheet connected\n\n");
+  clients.add(res);
+  const drop = () => {
+    clients.delete(res);
+    if (clients.size === 0) stopHeartbeat();
+  };
+  req.on("close", drop);
+  req.on("error", drop);
+  res.on("close", drop);
+  startHeartbeat();
+}
+function broadcast(ev) {
+  const chunk = `event: ${ev.type}
+data: ${JSON.stringify(ev)}
+
+`;
+  for (const res of clients) {
+    try {
+      res.write(chunk);
+    } catch {
+      clients.delete(res);
+    }
+  }
+}
+function closeAll() {
+  for (const res of clients) {
+    try {
+      res.end();
+    } catch {
+    }
+  }
+  clients.clear();
+  stopHeartbeat();
+}
+function startHeartbeat() {
+  if (heartbeat) return;
+  heartbeat = setInterval(() => {
+    for (const res of clients) res.write(": ping\n\n");
+  }, 15e3);
+  heartbeat.unref();
+}
+function stopHeartbeat() {
+  if (!heartbeat) return;
+  clearInterval(heartbeat);
+  heartbeat = null;
+}
+
+// src/server/store.ts
+import fs5 from "node:fs/promises";
+import path6 from "node:path";
+var selection = null;
+function getSelection() {
+  return selection;
+}
+function setSelection(next) {
+  selection = next;
+}
+function canvasDir(cfg) {
+  return path6.join(cfg.projectRoot, cfg.designDir, ".canvas");
+}
+function annotationsFile(cfg) {
+  return path6.join(canvasDir(cfg), "annotations.json");
+}
+async function readAnnotations(cfg) {
+  let raw;
+  try {
+    raw = await fs5.readFile(annotationsFile(cfg), "utf8");
+  } catch (err) {
+    if (err.code === "ENOENT") return [];
+    throw err;
+  }
+  if (!raw.trim()) return [];
+  let list;
+  try {
+    list = JSON.parse(raw);
+  } catch (err) {
+    throw new Error(
+      `annotations.json \u89E3\u6790\u5931\u8D25(${err.message})\u3002\u4E3A\u907F\u514D\u8986\u76D6\u5386\u53F2\u5DF2\u62D2\u7EDD\u5199\u5165\u2014\u2014\u8BF7\u4FEE\u597D ${annotationsFile(cfg)} \u518D\u8BD5\u3002`
+    );
+  }
+  if (!Array.isArray(list)) {
+    throw new Error(`annotations.json \u9876\u5C42\u4E0D\u662F\u6570\u7EC4,\u62D2\u7EDD\u5199\u5165\u4EE5\u514D\u8986\u76D6\u5386\u53F2:${annotationsFile(cfg)}`);
+  }
+  const anns = list;
+  let next = anns.reduce((m, a) => Math.max(m, a.seq ?? 0), 0);
+  for (const a of anns) if (typeof a.seq !== "number") a.seq = ++next;
+  return anns;
+}
+async function writeAnnotations(cfg, list) {
+  const file = annotationsFile(cfg);
+  await fs5.mkdir(path6.dirname(file), { recursive: true });
+  await fs5.copyFile(file, `${file}.bak`).catch(() => void 0);
+  const tmp = `${file}.${process.pid}.tmp`;
+  await fs5.writeFile(tmp, JSON.stringify(list, null, 2) + "\n", "utf8");
+  await fs5.rename(tmp, file);
+}
+var chain = Promise.resolve();
+function updateAnnotations(cfg, fn) {
+  const run = chain.then(async () => {
+    const list = await readAnnotations(cfg);
+    const result = fn(list);
+    await writeAnnotations(cfg, list);
+    return { result, list };
+  });
+  chain = run.catch(() => void 0);
+  return run;
+}
+function newAnnotationId(list) {
+  const base = "a" + Date.now().toString(36);
+  let id = base;
+  for (let n = 1; list.some((a) => a.id === id); n++) id = base + n.toString(36);
+  return id;
+}
+async function saveRef(cfg, name, dataBase64) {
+  const safe = path6.basename(name).replace(/[^\w.-]+/g, "-").replace(/^[.-]+/, "") || "ref.png";
+  const day = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const dir = path6.join(canvasDir(cfg), "refs");
+  await fs5.mkdir(dir, { recursive: true });
+  const ext = path6.extname(safe);
+  const stem = safe.slice(0, safe.length - ext.length);
+  let filename = `${day}-${safe}`;
+  for (let n = 2; await exists(path6.join(dir, filename)); n++) filename = `${day}-${stem}-${n}${ext}`;
+  const body = dataBase64.replace(/^data:[^;,]*;base64,/, "");
+  await fs5.writeFile(path6.join(dir, filename), Buffer.from(body, "base64"));
+  return `${cfg.designDir}/.canvas/refs/${filename}`;
+}
+async function readRef(cfg, rel) {
+  const root = path6.join(canvasDir(cfg), "refs");
+  const abs = path6.resolve(cfg.projectRoot, rel);
+  if (abs !== root && !abs.startsWith(root + path6.sep)) return null;
+  try {
+    return { body: await fs5.readFile(abs), file: abs };
+  } catch {
+    return null;
+  }
+}
+async function exists(p) {
+  try {
+    await fs5.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function buildContextText(cfg) {
+  const open = (await readAnnotations(cfg)).filter((a) => a.status === "open");
+  const sel = getSelection();
+  if (!sel && open.length === 0) return "";
+  const lines = ["## contactsheet \u753B\u5E03\u4E0A\u4E0B\u6587"];
+  if (sel) {
+    lines.push(`\u5F53\u524D\u9009\u4E2D:\u753B\u677F ${sel.artboardId} \xB7 \u9009\u62E9\u5668 \`${sel.selector}\` \xB7 \u70B9\u4F4D ${fmt(sel.x)},${fmt(sel.y)}`);
+  }
+  if (open.length > 0) {
+    lines.push(`\u672A\u89E3\u51B3\u6279\u6CE8(${open.length} \u6761):`);
+    for (const a of open) {
+      const where = [a.artboardId, a.anchor?.selector].filter(Boolean).join(" @ ");
+      lines.push(`- #${a.seq} [${a.id}] ${where ? where + " \u2014\u2014 " : ""}${a.text}`);
+      for (const ref of a.refs ?? []) lines.push(`  \u53C2\u8003\u56FE:${ref}`);
+    }
+  }
+  return lines.join("\n") + "\n";
+}
+function fmt(n) {
+  return typeof n === "number" && Number.isFinite(n) ? n.toFixed(2) : "?";
+}
+
+// src/server/api.ts
+var ANN = "/__cs/api/annotations";
+var TOKEN = null;
+function pushToken() {
+  if (!TOKEN) TOKEN = randomUUID();
+  return TOKEN;
+}
+function originAllowed(cfg, req) {
+  const origin = req.headers.origin;
+  if (!origin) return true;
+  const ok = /* @__PURE__ */ new Set([
+    `http://localhost:${cfg.port}`,
+    `http://127.0.0.1:${cfg.port}`,
+    `http://[::1]:${cfg.port}`
+  ]);
+  return ok.has(origin);
+}
+async function handleApi(cfg, req, res, pathname) {
+  const method = req.method ?? "GET";
+  if (method !== "GET" && !originAllowed(cfg, req)) {
+    return sendText(res, 403, "contactsheet: \u62D2\u7EDD\u8DE8\u6E90\u5199\u5165(Origin \u4E0D\u662F\u672C\u673A\u753B\u5E03)");
+  }
+  if (pathname === "/__cs/api/state") {
+    if (method !== "GET") return sendText(res, 405, "method not allowed");
+    const info = {
+      version: pkgVersion(),
+      target: cfg.target,
+      designDir: cfg.designDir,
+      projectRoot: cfg.projectRoot
+    };
+    return sendJson(res, 200, info);
+  }
+  if (pathname === "/__cs/api/selection") {
+    if (method === "GET") return sendJson(res, 200, getSelection());
+    if (method === "POST") {
+      const body = await readJson(req);
+      setSelection(body && typeof body.artboardId === "string" ? body : null);
+      return sendEmpty(res, 204);
+    }
+    return sendText(res, 405, "method not allowed");
+  }
+  if (pathname === ANN || pathname.startsWith(ANN + "/")) {
+    return handleAnnotations(cfg, req, res, pathname, method);
+  }
+  if (pathname.startsWith("/__cs/api/refs/")) {
+    if (method !== "GET") return sendText(res, 405, "method not allowed");
+    const rel = pathname.slice("/__cs/api/refs/".length).split("/").map(decodeURIComponent).join("/");
+    const hit = await readRef(cfg, rel);
+    if (!hit) return sendText(res, 404, "contactsheet: \u627E\u4E0D\u5230\u53C2\u8003\u56FE");
+    res.writeHead(200, { "content-type": mimeOf(hit.file), "cache-control": "no-store" });
+    res.end(hit.body);
+    return;
+  }
+  if (pathname === "/__cs/api/refs") {
+    if (method !== "POST") return sendText(res, 405, "method not allowed");
+    const body = await readJson(req);
+    if (!body?.dataBase64) return sendText(res, 400, "\u7F3A\u5C11 dataBase64");
+    const rel = await saveRef(cfg, body.name || "ref.png", body.dataBase64);
+    return sendJson(res, 200, { path: rel });
+  }
+  if (pathname === "/__cs/api/context") {
+    if (method !== "GET") return sendText(res, 405, "method not allowed");
+    try {
+      return sendText(res, 200, await buildContextText(cfg));
+    } catch (err) {
+      return sendText(res, 200, `[contactsheet] \u8BFB\u6279\u6CE8\u5931\u8D25:${errText(err)}`);
+    }
+  }
+  if (pathname === "/__cs/api/push") {
+    if (method !== "POST") return sendText(res, 405, "method not allowed");
+    if (req.headers["x-cs-token"] !== pushToken()) {
+      return sendText(res, 403, "contactsheet: \u7F3A\u5C11\u753B\u5E03 token,\u62D2\u7EDD\u63A8\u9001(\u8BF7\u4ECE\u753B\u5E03\u9875\u64CD\u4F5C)");
+    }
+    const body = await readJson(req);
+    try {
+      const text2 = await buildContextText(cfg);
+      if (!text2.trim()) return sendJson(res, 200, { ok: false, reason: "\u6CA1\u6709\u5F85\u5904\u7406\u7684\u6279\u6CE8\u6216\u9009\u4E2D,\u5148\u6309 c \u9489\u4E00\u6761" });
+      return sendJson(res, 200, await pushToSession(cfg, text2, body?.pid));
+    } catch (err) {
+      return sendJson(res, 200, { ok: false, reason: `\u6CE8\u5165\u5931\u8D25:${errText(err)}` });
+    }
+  }
+  if (pathname === "/__cs/api/screenshot") {
+    if (method !== "POST") return sendText(res, 405, "method not allowed");
+    const body = await readJson(req);
+    try {
+      return sendJson(res, 200, await screenshot(cfg, body ?? {}));
+    } catch (err) {
+      return sendText(res, 500, `screenshot \u5931\u8D25:${errText(err)}`);
+    }
+  }
+  return sendText(res, 404, "not found");
+}
+async function handleAnnotations(cfg, req, res, pathname, method) {
+  const id = pathname === ANN ? "" : decodeURIComponent(pathname.slice(ANN.length + 1));
+  if (!id && method === "GET") {
+    return sendJson(res, 200, await readAnnotations(cfg));
+  }
+  if (!id && method === "POST") {
+    const body = await readJson(req);
+    const { result, list } = await updateAnnotations(cfg, (all) => {
+      const ann = {
+        id: newAnnotationId(all),
+        // 永久序号:全表 max+1,包含 verified 的 —— 号只涨不复用,核验消失也不让后来者顶号
+        seq: all.reduce((m, a) => Math.max(m, a.seq ?? 0), 0) + 1,
+        artboardId: body?.artboardId,
+        anchor: body?.anchor,
+        text: typeof body?.text === "string" ? body.text : "",
+        refs: Array.isArray(body?.refs) ? body.refs : [],
+        status: body?.status === "resolved" ? "resolved" : "open",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      all.push(ann);
+      return ann;
+    });
+    broadcast({ type: "annotations", annotations: list });
+    return sendJson(res, 201, result);
+  }
+  if (id && method === "PATCH") {
+    const patch = await readJson(req);
+    const { result, list } = await updateAnnotations(cfg, (all) => {
+      const hit = all.find((a) => a.id === id);
+      if (!hit) return null;
+      Object.assign(hit, patch, { id: hit.id, createdAt: hit.createdAt });
+      return hit;
+    });
+    if (!result) return sendText(res, 404, "annotation not found");
+    broadcast({ type: "annotations", annotations: list });
+    return sendJson(res, 200, result);
+  }
+  if (id && method === "DELETE") {
+    const { result, list } = await updateAnnotations(cfg, (all) => {
+      const i = all.findIndex((a) => a.id === id);
+      if (i < 0) return false;
+      all.splice(i, 1);
+      return true;
+    });
+    if (!result) return sendText(res, 404, "annotation not found");
+    broadcast({ type: "annotations", annotations: list });
+    return sendEmpty(res, 204);
+  }
+  return sendText(res, 405, "method not allowed");
+}
+function sendJson(res, code, body) {
+  res.writeHead(code, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
+  res.end(JSON.stringify(body ?? null));
+}
+function sendText(res, code, body) {
+  res.writeHead(code, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" });
+  res.end(body);
+}
+function sendEmpty(res, code) {
+  res.writeHead(code);
+  res.end();
+}
+function errText(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+async function readJson(req) {
+  const chunks = [];
+  for await (const c of req) chunks.push(c);
+  const raw = Buffer.concat(chunks).toString("utf8").trim();
+  if (!raw) return null;
+  return JSON.parse(raw);
+}
+
+// src/server/proxy-log.ts
+var WINDOW_MS = 5e3;
+function createProxyLog(target) {
+  const windows = /* @__PURE__ */ new Map();
+  let down = false;
+  let silenced = 0;
+  return {
+    fail(err, url) {
+      const code = err.code ?? err.message;
+      if (code === "ECONNREFUSED") {
+        if (down) {
+          silenced++;
+          return;
+        }
+        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`
+        );
+        return;
+      }
+      const key = `${code} ${pathOf(url)}`;
+      const win = windows.get(key);
+      if (win) {
+        win.extra++;
+        return;
+      }
+      console.error(`[contactsheet] \u4EE3\u7406\u5931\u8D25 ${pathOf(url)} ${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})`);
+        }
+      }, WINDOW_MS);
+      timer.unref();
+      windows.set(key, { extra: 0, timer });
+    },
+    alive() {
+      if (!down) return;
+      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)` : ""}`);
+    },
+    close() {
+      for (const win of windows.values()) clearTimeout(win.timer);
+      windows.clear();
+    }
+  };
+}
+function pathOf(url) {
+  if (!url) return "(\u65E0 url)";
+  const q = url.indexOf("?");
+  return q < 0 ? url : url.slice(0, q);
+}
+
+// src/server/index.ts
+async function startServer(cfg) {
+  const proxy = httpProxy.createProxyServer({ target: cfg.target, ws: true, changeOrigin: true });
+  const proxyLog = createProxyLog(cfg.target);
+  proxy.on("error", (err, req, res) => {
+    proxyLog.fail(err, req?.url);
+    if (!res) return;
+    if ("writeHead" in res) {
+      if (!res.headersSent) res.writeHead(502, { "content-type": "text/html; charset=utf-8" });
+      res.end(downPage(cfg.target));
+    } else {
+      res.destroy();
+    }
+  });
+  proxy.on("proxyRes", () => proxyLog.alive());
+  proxy.on("open", () => proxyLog.alive());
+  let mcp = null;
+  try {
+    mcp = createMcpHandler(makeServices(cfg));
+  } catch (err) {
+    console.warn(`[contactsheet] MCP \u672A\u5C31\u7EEA(/__cs/mcp \u8FD4\u56DE 501):${errText(err)}`);
+  }
+  const server = http.createServer((req, res) => {
+    handle(cfg, proxy, mcp, req, res).catch((err) => {
+      console.error(`[contactsheet] \u8BF7\u6C42\u5904\u7406\u5931\u8D25 ${req.url}`, err);
+      if (!res.headersSent) sendText(res, 500, errText(err));
+      else res.end();
+    });
+  });
+  server.on("upgrade", (req, socket, head) => proxy.ws(req, socket, head));
+  const sockets = /* @__PURE__ */ new Set();
+  server.on("connection", (s) => {
+    sockets.add(s);
+    s.on("close", () => sockets.delete(s));
+  });
+  const host = cfg.host ?? "127.0.0.1";
+  await new Promise((resolve2, reject) => {
+    server.once("error", reject);
+    server.listen(cfg.port, host, () => {
+      server.off("error", reject);
+      resolve2();
+    });
+  });
+  if (host !== "127.0.0.1" && host !== "localhost") {
+    console.warn(
+      `[contactsheet] \u26A0\uFE0F  \u76D1\u542C\u5728 ${host}:${cfg.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 {
+    async close() {
+      closeAll();
+      proxyLog.close();
+      proxy.close();
+      await new Promise((resolve2) => {
+        const fallback = setTimeout(resolve2, 2e3);
+        for (const s of sockets) s.destroy();
+        server.closeAllConnections();
+        server.close(() => {
+          clearTimeout(fallback);
+          resolve2();
+        });
+      });
+    }
+  };
+}
+async function handle(cfg, proxy, mcp, req, res) {
+  const pathname = new URL(req.url ?? "/", "http://localhost").pathname;
+  if (pathname === "/__cs" || pathname === "/__cs/") return serveUi(res, "index.html");
+  if (pathname.startsWith("/__cs/ui/")) {
+    const name = pathname.slice("/__cs/ui/".length);
+    if (!name || name.includes("..")) return sendText(res, 400, "bad asset path");
+    return serveUi(res, name);
+  }
+  if (pathname === "/__cs/events") return attach(req, res);
+  if (pathname === "/__cs/mcp") {
+    if (!mcp) return sendText(res, 501, "contactsheet: MCP \u6A21\u5757\u672A\u5C31\u7EEA");
+    return mcp(req, res);
+  }
+  if (pathname.startsWith("/__cs/api/")) return handleApi(cfg, req, res, pathname);
+  proxy.web(req, res);
+}
+function serveUi(res, name) {
+  const file = findUiFile(name);
+  if (!file) return sendText(res, 404, `contactsheet: \u627E\u4E0D\u5230\u753B\u5E03\u8D44\u4EA7 ${name},\u5148\u8DD1 node build.mjs`);
+  let body = fs6.readFileSync(file);
+  if (name === "index.html") {
+    body = Buffer.from(
+      body.toString("utf8").replace("</head>", `<meta name="cs-token" content="${pushToken()}" />
+</head>`)
+    );
+  }
+  res.writeHead(200, { "content-type": mimeOf(file), "cache-control": "no-store" });
+  res.end(body);
+}
+function makeServices(cfg) {
+  return {
+    // registry 由注入进用户 app 的路由提供,直连 target(node fetch 不走系统代理)
+    async getRegistry() {
+      try {
+        const r = await fetch(`${cfg.target}/__cs/registry`);
+        if (!r.ok) return [];
+        const data = await r.json();
+        return Array.isArray(data) ? data : [];
+      } catch {
+        return [];
+      }
+    },
+    getSelection: () => getSelection(),
+    getAnnotations: () => readAnnotations(cfg),
+    takeShot: async (req) => screenshot(cfg, req)
+  };
+}
+function downPage(target) {
+  return `<!doctype html><html lang="zh"><meta charset="utf-8"><title>contactsheet</title>
+<body style="font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;padding:48px;color:#333;background:#fafafa">
+<h1 style="font-size:15px;margin:0 0 12px">contactsheet:\u76EE\u6807 ${escapeHtml(target)} \u672A\u542F\u52A8</h1>
+<p style="margin:0 0 8px">\u5148\u5728\u9879\u76EE\u91CC\u8DD1 <code>next dev</code>,\u518D\u5237\u65B0\u672C\u9875\u3002</p>
+<p style="margin:0"><a href="/__cs" style="color:#06c">\u2190 \u56DE\u753B\u5E03</a></p>
+</body></html>`;
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+
+// src/watch/index.ts
+import path7 from "node:path";
+import { watch } from "chokidar";
+var DEBOUNCE_MS = 200;
+function isArtboard(p) {
+  return /\.artboard\.tsx?$/.test(p);
+}
+async function startWatcher(cfg, onChange) {
+  const designAbs = path7.join(cfg.projectRoot, cfg.designDir.replace(/\\/g, "/").replace(/\/+$/, ""));
+  let timer = null;
+  let closed = false;
+  const flush = () => {
+    timer = null;
+    regenerateRegistry(cfg).then((entries) => {
+      if (!closed) onChange(entries);
+    }).catch((err) => {
+      console.error("[contactsheet] \u91CD\u5EFA registry \u5931\u8D25:", err);
+    });
+  };
+  const schedule = () => {
+    if (closed) return;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(flush, DEBOUNCE_MS);
+  };
+  const watcher = watch(designAbs, {
+    ignoreInitial: false,
+    // 首次也算一次变更
+    ignored: (p) => {
+      const rel = path7.relative(designAbs, p);
+      if (!rel) return false;
+      return rel.split(path7.sep).some((seg) => seg === "__generated__" || seg === ".canvas" || seg === "node_modules");
+    }
+  });
+  watcher.on("add", (p) => isArtboard(p) && schedule());
+  watcher.on("change", (p) => isArtboard(p) && schedule());
+  watcher.on("unlink", (p) => isArtboard(p) && schedule());
+  watcher.on("error", (err) => console.error("[contactsheet] watcher \u51FA\u9519:", err));
+  schedule();
+  return {
+    async close() {
+      closed = true;
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      await watcher.close();
+    }
+  };
+}
+
+// src/cli.ts
+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)
+  contactsheet init     \u521D\u59CB\u5316\u914D\u7F6E\u3001.mcp.json\u3001hook,\u5E76\u81EA\u52A8\u94FA\u4E00\u6279\u753B\u677F
+  contactsheet clean    \u79FB\u9664\u6CE8\u5165\u7684\u6587\u4EF6
+
+  --port <n>            \u5916\u58F3\u7AEF\u53E3(\u9ED8\u8BA4 5199)
+  --target <url>        next dev \u5730\u5740(\u9ED8\u8BA4 http://localhost:3000)
+  --design-dir <dir>    \u753B\u677F\u76EE\u5F55(\u9ED8\u8BA4 design)
+  -h, --help            \u663E\u793A\u672C\u5E2E\u52A9`;
+main().catch((err) => {
+  console.error(`[contactsheet] ${err instanceof Error ? err.message : String(err)}`);
+  process.exit(1);
+});
+async function main() {
+  const { values, positionals } = parseArgs({
+    args: process.argv.slice(2),
+    options: {
+      port: { type: "string" },
+      target: { type: "string" },
+      "design-dir": { type: "string" },
+      help: { type: "boolean", short: "h" }
+    },
+    allowPositionals: true
+  });
+  if (values.help) {
+    console.log(HELP);
+    return;
+  }
+  const flags = {};
+  if (values.port !== void 0) {
+    const port = Number(values.port);
+    if (!Number.isInteger(port)) throw new Error(`--port \u4E0D\u662F\u6574\u6570:${values.port}`);
+    flags.port = port;
+  }
+  if (values.target !== void 0) flags.target = values.target;
+  if (values["design-dir"] !== void 0) flags.designDir = values["design-dir"];
+  const cmd = positionals[0] ?? "up";
+  if (cmd === "up") return up(flags);
+  if (cmd === "init") return runInit(process.cwd(), flags);
+  if (cmd === "clean") return removeInjected(loadConfig(process.cwd(), flags));
+  console.error(`\u672A\u77E5\u547D\u4EE4:${cmd}
+
+${HELP}`);
+  process.exit(1);
+}
+async function up(flags) {
+  const cfg = loadConfig(process.cwd(), flags);
+  await tryStep("\u6CE8\u5165\u753B\u677F\u8DEF\u7531", () => ensureInjected(cfg));
+  const watcher = await tryStep(
+    "\u542F\u52A8\u6587\u4EF6\u76D1\u542C",
+    () => startWatcher(cfg, (entries) => broadcast({ type: "registry", entries }))
+  );
+  const server = await startServer(cfg);
+  banner(cfg);
+  let closing = false;
+  const shutdown = async (sig) => {
+    if (closing) return;
+    closing = true;
+    console.log(`
+[contactsheet] \u6536\u5230 ${sig},\u6B63\u5728\u9000\u51FA\u2026`);
+    if (watcher) await quiet(() => watcher.close());
+    await quiet(() => server.close());
+    await quiet(() => closeBrowser());
+    process.exit(0);
+  };
+  process.on("SIGINT", () => void shutdown("SIGINT"));
+  process.on("SIGTERM", () => void shutdown("SIGTERM"));
+}
+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)}`);
+    return null;
+  }
+}
+async function quiet(fn) {
+  try {
+    await fn();
+  } catch {
+  }
+}
+function banner(cfg) {
+  console.log(`
+  contactsheet   http://localhost:${cfg.port}/__cs
+  \u4EE3\u7406\u76EE\u6807       ${cfg.target}
+  \u753B\u677F\u76EE\u5F55       ${cfg.designDir}/   \xB7   app \u76EE\u5F55 ${cfg.appDir}/
+  Ctrl-C \u9000\u51FA
+`);
+}
+//# sourceMappingURL=cli.js.map