@kanyun-ai-infra/band-cli 0.2.0 → 0.2.1

package/bundled/official/workshops/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@kanyun-ai-infra/band-workshops",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "工坊目录、工坊详情、新建项目、新建与复制工坊、工坊设置与对话改工坊九个页面",
   "type": "module",
   "exports": {
     ".": "./dist/index.js"
   },
   "peerDependencies": {
-    "@kanyun-ai-infra/band-plugin-sdk": "^2.0.0",
+    "@kanyun-ai-infra/band-plugin-sdk": "^2.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "@kanyun-ai-infra/band-shell": "*"

package/bundled/tokens/components.css

@@ -210,7 +210,7 @@ input.field[type="number"] { font-variant-numeric: tabular-nums; }
 /* 输入框下面一行：提示、出错、计数。计数靠右，超了写 .over（DESIGN.md「控件」） */
 .field-note { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 16px; font-size: var(--fs-badge); color: var(--muted); }
 .field-note.err { color: var(--bad); }
-.field-count { font-family: var(--mono); }
+.field-count { font-family: var(--mono); white-space: nowrap; }
 .field-note > .field-count { margin-left: auto; }
 .field-count.over { color: var(--bad); }
 

package/dev-host/app.tsx

@@ -35,6 +35,7 @@ import * as dev from "virtual:band-dev";
 import { useEffect, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { devManagers } from "../src/dev-managers.ts";
+import { inspectorOpenByDefault } from "../src/inspector-default.ts";
 import { DEV_HOST_PLUGIN } from "../src/inspector-plugins.ts";
 import { loadPlugins } from "../src/load-plugins.ts";
 import { Inspector } from "./Inspector.tsx";
@@ -316,6 +317,10 @@ function focusOf(s: Selection | null): string | undefined {
 }
 
 function App() {
+  // 夹具栏占 300px：视口不到 1600 默认收起，免得挤坏项目页右栏；收起时仍挂着，事件与诊断照常记
+  const [inspectorOpen, setInspectorOpen] = useState(() =>
+    inspectorOpenByDefault(window.innerWidth),
+  );
   return (
     <div className="dev-page">
       <header className="dev-bar">
@@ -345,16 +350,27 @@ function App() {
         ) : (
           <span className="chip plain">{member.displayName}</span>
         )}
+        <button
+          type="button"
+          className="btn"
+          aria-expanded={inspectorOpen}
+          aria-controls="dev-inspector-slot"
+          onClick={() => setInspectorOpen((v) => !v)}
+        >
+          夹具
+        </button>
       </header>
       <div className="dev-body">
         <ProjectPage />
-        <Inspector
-          ctx={hostCtx}
-          view={view}
-          transport={transport}
-          problems={problems}
-          stageViews={stageViews}
-        />
+        <div id="dev-inspector-slot" className="dev-inspector-slot" hidden={!inspectorOpen}>
+          <Inspector
+            ctx={hostCtx}
+            view={view}
+            transport={transport}
+            problems={problems}
+            stageViews={stageViews}
+          />
+        </div>
       </div>
     </div>
   );

package/dev-host/host.css

@@ -63,6 +63,13 @@ body {
 .dev-project > .band-react-surface {
   display: contents;
 }
+/* 夹具栏的槽：展开时不占自己的盒子（让 aside 直接当 .dev-body 的子项），收起时整块不显示 */
+.dev-inspector-slot {
+  display: contents;
+}
+.dev-inspector-slot[hidden] {
+  display: none;
+}
 /* 锁定插件替身只标位置 */
 .dev-inspector {
   width: 300px;

package/dist/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   main
-} from "./chunk-Q2XJXNVH.js";
+} from "./chunk-FGPWXAOA.js";
 import "./chunk-CL3FV65M.js";
 import "./chunk-XPLYTHNX.js";
 import "./chunk-LGYGWMSY.js";

package/dist/{chunk-Q2XJXNVH.js → chunk-FGPWXAOA.js}

@@ -646,7 +646,7 @@ import { parse } from "yaml";
 // package.json
 var package_default = {
   name: "@kanyun-ai-infra/band-cli",
-  version: "0.2.0",
+  version: "0.2.1",
   description: "band \u547D\u4EE4\u884C\uFF1A\u65B0\u5EFA\u3001\u672C\u5730\u8C03\u8BD5\u3001\u6821\u9A8C\u4E0E\u53D1\u5E03 Band \u5DE5\u574A\u548C\u63D2\u4EF6",
   license: "UNLICENSED",
   type: "module",
@@ -742,11 +742,13 @@ function newPluginRepo(parentDir, packageName, opts) {
   const title = opts.title ?? name;
   const dir = join2(resolve2(parentDir), name);
   if (existsSync2(dir)) throw new NewPluginError(`${dir} \u5DF2\u7ECF\u5B58\u5728`);
+  const react = opts.react === true;
+  const entryFile = react ? "src/index.tsx" : "src/index.ts";
   const rendered = renderPluginTemplate(opts.template, {
     title,
     ...opts.stage ? { stage: opts.stage } : {},
     id: name,
-    entry: "./src/index.ts"
+    entry: `./${entryFile}`
   });
   const workshop = fixtureWorkshop(packageName, opts.template, name, opts.stage);
   try {
@@ -757,14 +759,16 @@ function newPluginRepo(parentDir, packageName, opts) {
     );
   }
   const files = {
-    "package.json": `${JSON.stringify(packageJson(packageName, title), null, 2)}
+    "package.json": `${JSON.stringify(packageJson(packageName, title, react), null, 2)}
+`,
+    "tsconfig.json": `${JSON.stringify(tsconfig(react), null, 2)}
 `,
     "plugin.yaml": rendered.manifest,
-    "src/index.ts": rendered.code,
+    [entryFile]: react ? reactSource(opts.template, title, opts.stage, name) : rendered.code,
     "dev/workshop.yaml": workshop,
     "dev/fixture.ts": fixtureSource(opts.template, opts.stage),
     ".gitlab-ci.yml": CI(packageName),
-    "README.md": readme(packageName, title, opts.template, name, parsed.scope),
+    "README.md": readme(packageName, title, opts.template, name, parsed.scope, react),
     ".gitignore": "node_modules/\ndist/\n"
   };
   for (const [f, body] of Object.entries(files)) {
@@ -778,7 +782,8 @@ function newPluginRepo(parentDir, packageName, opts) {
     hints: [
       `cd ${dir} && npm install\uFF1A\u88C5\u4E0A band \u547D\u4EE4\u884C\u4E0E\u63D2\u4EF6 SDK\uFF08devDependencies\uFF09`,
       "npx band dev .\uFF1A\u7528 dev/ \u5939\u5177\u5DE5\u574A\u8D77\u9875\u9762\uFF0C\u672C\u4ED3\u5E93\u7684\u63D2\u4EF6\u81EA\u52A8\u88C5\u4E0A",
-      "npx band check .\uFF1A\u6821\u9A8C\u63D2\u4EF6\u4E0E\u5939\u5177\u5DE5\u574A\u7684\u88C5\u914D",
+      "npx band check .\uFF1A\u6821\u9A8C\u63D2\u4EF6\u4E0E\u5939\u5177\u5DE5\u574A\u7684\u88C5\u914D\uFF08\u4E0D\u67E5\u7C7B\u578B\uFF09",
+      "npm run typecheck\uFF1A\u8DD1 tsc --noEmit \u67E5\u7C7B\u578B\uFF08band check \u4E0D\u67E5\uFF09",
       placementHint(opts.template, packageName, name, opts.stage),
       "\u53D1\u5E03\u8FD8\u6CA1\u63A5\u4E0A\uFF08\u63D2\u4EF6\u7531 Band \u6253\u5305\u5206\u53D1\uFF0C\u4E0D\u7ECF npm \u53D1\u5305\uFF09\uFF1A\u73B0\u5728 CI \u6A21\u677F\u53EA\u8DD1 band check"
     ]
@@ -791,7 +796,7 @@ function placementHint(template, packageName, name, stage) {
   return `\u9636\u6BB5 ${String(stage)} \u7684\u754C\u9762\u4F1A\u51FA\u73B0\u5728\u5F15\u7528\u5B83\u7684\u5DE5\u574A\u7684\u9636\u6BB5\u8BE6\u60C5\u91CC`;
 }
 var PROJECT2 = "@kanyun-ai-infra/band-project";
-function packageJson(packageName, title) {
+function packageJson(packageName, title, react) {
   return {
     name: packageName,
     version: "0.1.0",
@@ -799,7 +804,7 @@ function packageJson(packageName, title) {
     license: "UNLICENSED",
     type: "module",
     files: ["src", "plugin.yaml", "README.md"],
-    scripts: { dev: "band dev .", check: "band check ." },
+    scripts: { dev: "band dev .", check: "band check .", typecheck: "tsc --noEmit" },
     peerDependencies: {
       react: "^19.0.0",
       "react-dom": "^19.0.0",
@@ -809,10 +814,36 @@ function packageJson(packageName, title) {
     peerDependenciesMeta: { [PROJECT2]: { optional: true } },
     devDependencies: {
       "@kanyun-ai-infra/band-cli": `^${CLI_VERSION}`,
-      "@kanyun-ai-infra/band-plugin-sdk": `^${BAND_PROTOCOL_VERSION2}`
+      "@kanyun-ai-infra/band-plugin-sdk": `^${BAND_PROTOCOL_VERSION2}`,
+      typescript: "^5.9.3",
+      // 用 React 写才要：宿主与 band dev 提供运行时的 React，这些只给类型检查与编辑器提示
+      ...react ? {
+        "@kanyun-ai-infra/band-plugin-react": `^${PLUGIN_REACT_RANGE}`,
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        react: "^19.0.0",
+        "react-dom": "^19.0.0"
+      } : {}
     }
   };
 }
+var PLUGIN_REACT_RANGE = "0.2.1";
+function tsconfig(react) {
+  return {
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      lib: ["ES2023", "DOM", "DOM.Iterable"],
+      strict: true,
+      noUncheckedIndexedAccess: true,
+      skipLibCheck: true,
+      noEmit: true,
+      ...react ? { jsx: "react-jsx" } : {}
+    },
+    include: ["src", "dev"]
+  };
+}
 function fixtureWorkshop(packageName, template, name, stage) {
   const head = `# \u72EC\u7ACB\u63D2\u4EF6 ${packageName} \u7684\u672C\u5730\u5939\u5177\u5DE5\u574A\uFF1Aband dev \u8D77\u9879\u76EE\u9875\u3001band check \u67E5\u88C5\u914D\u7528\uFF0C\u4E0D\u53D1\u5E03\u3001\u4E0D\u8FDB\u4EFB\u4F55\u771F\u5B9E\u5DE5\u574A\u3002
 # \u672C\u4ED3\u5E93\u7684\u63D2\u4EF6\u7531\u547D\u4EE4\u76F4\u63A5\u88C5\u4E0A\uFF0C\u4E0D\u7528\u5199\u8FDB views.plugins\u3002
@@ -856,6 +887,85 @@ views:
 `;
 }
 var q2 = (s) => JSON.stringify(s);
+function reactSource(template, title, stage, id) {
+  const head = (what) => `/**
+ * ${what.replace(/\*\//g, "* /").replace(/[\r\n]+/g, " ")}
+ * \u53EA\u7528\u516C\u5F00 ctx\uFF1B\u672C\u5730 \`band dev\` \u8FB9\u5199\u8FB9\u770B\uFF0C\`npm run typecheck\` \u67E5\u7C7B\u578B\uFF0C\u63D0\u4EA4\u524D \`band check\`\u3002
+ */
+`;
+  const imports = `import { reactMount, useCtxData } from "@kanyun-ai-infra/band-plugin-react";
+import { type ProjectCtx, definePlugin } from "@kanyun-ai-infra/band-plugin-sdk";
+import { useState } from "react";
+`;
+  if (template === "panel")
+    return `${head(`${title}\uFF1A\u4E00\u4E2A\u9762\u677F\u3002\u663E\u793A\u5F53\u524D\u7248\u672C\u7684\u6587\u4EF6\u6570\u3002`)}${imports.replace('import { useState } from "react";\n', "")}
+function Panel({ ctx }: { ctx: ProjectCtx }) {
+  const { data, error } = useCtxData(ctx, async () => ctx.version.current(), [], "version.*");
+  if (error) return <p>{error}</p>;
+  if (data === undefined) return <p>\u8BFB\u53D6\u4E2D\u2026</p>;
+  return <p>{data ? \`\u7248\u672C \${data.id}\uFF1A\${data.entries.length} \u4E2A\u6587\u4EF6\` : "\uFF08\u8FD8\u6CA1\u6709\u7248\u672C\uFF09"}</p>;
+}
+
+export default definePlugin({
+  surfaces: {
+    main: reactMount((ctx: ProjectCtx) => <Panel ctx={ctx} />),
+  },
+});
+`;
+  if (template === "viewer")
+    return `${head(`${title}\uFF1A\u4E00\u4E2A\u67E5\u770B\u5668\u3002\u5217\u51FA\u5F53\u524D\u7248\u672C\u7684\u6587\u4EF6\uFF0C\u70B9\u4E00\u4E2A\u770B\u5185\u5BB9\u3002`)}${imports}
+function Viewer({ ctx }: { ctx: ProjectCtx }) {
+  const { data: version, error } = useCtxData(ctx, async () => ctx.version.current(), [], "version.*");
+  const [body, setBody] = useState("");
+  if (error) return <p>{error}</p>;
+  return (
+    <>
+      <ul>
+        {(version?.entries ?? []).map((e) => (
+          <li key={e.path}>
+            <button
+              type="button"
+              onClick={async () => setBody(new TextDecoder().decode(await ctx.version.readFile(e.path)))}
+            >
+              {e.path}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <pre>{body}</pre>
+    </>
+  );
+}
+
+export default definePlugin({
+  surfaces: {
+    ${JSON.stringify(id)}: reactMount((ctx: ProjectCtx) => <Viewer ctx={ctx} />),
+  },
+});
+`;
+  const st = JSON.stringify(stage ?? "");
+  return `${head(`${title}\uFF1A\u9636\u6BB5 ${stage ?? ""} \u7684\u754C\u9762\u3002\u663E\u793A\u9636\u6BB5\u72B6\u6001\uFF0C\u53EF\u4EE5\u542F\u52A8\u3002`)}${imports.replace('import { useState } from "react";\n', "")}
+const STAGE = ${st};
+
+function StageView({ ctx }: { ctx: ProjectCtx }) {
+  const { data, error } = useCtxData(ctx, () => ctx.stages.get(STAGE), [], "stage.*");
+  return (
+    <>
+      <p>{error ?? (data ? \`\${data.stage}\uFF1A\${data.status}\` : "\u8BFB\u53D6\u4E2D\u2026")}</p>
+      <button type="button" onClick={() => void ctx.stages.start(STAGE)}>
+        \u542F\u52A8
+      </button>
+    </>
+  );
+}
+
+export default definePlugin({
+  surfaces: {
+    main: reactMount((ctx: ProjectCtx) => <StageView ctx={ctx} />),
+  },
+});
+`;
+}
 function fixtureSource(template, stage) {
   const stages = template === "stage-view" ? `  stages: [{ stage: ${q2(stage ?? "")}, status: "ready" }],
 ` : "";
@@ -916,7 +1026,8 @@ band-check:
     - npx band check .
 `;
 }
-function readme(packageName, title, template, name, scope) {
+function readme(packageName, title, template, name, scope, react) {
+  const entry = react ? "src/index.tsx" : "src/index.ts";
   const place = template === "panel" ? `\`views.panels\`\uFF08\u672C\u4ED3\u5E93\u7684\u5939\u5177\u653E\u5728\u53F3\u680F\uFF1A\`${packageName}/main\`\uFF09` : template === "viewer" ? `\`views.artifactTypes.<\u4EA7\u7269\u7C7B\u578B>.viewer\`\uFF08\u672C\u4ED3\u5E93\u7684\u5939\u5177\u628A \`demo\` \u7ED1\u5230 \`${packageName}/${name}\`\uFF09` : "\u5F15\u7528\u5B83\u7684\u5DE5\u574A\u7684\u6D41\u7A0B\u9636\u6BB5\u8BE6\u60C5\u91CC";
   return `# ${packageName}
 
@@ -928,7 +1039,8 @@ ${title}\uFF1A\u4E00\u4E2A\u72EC\u7ACB\u7684 Band \u63D2\u4EF6\uFF08\u4E0D\u5C5E
 |---|---|
 | \`package.json\` | \u8EAB\u4EFD\u4E0E\u7248\u672C\uFF1A\u5305\u540D\u3001\u534F\u8BAE\u8303\u56F4\uFF1BdevDependencies \u5E26 band \u547D\u4EE4\u884C\u4E0E\u63D2\u4EF6 SDK |
 | \`plugin.yaml\` | \u89C6\u56FE\u9762\u6E05\u5355\uFF1A\u5F80\u54EA\u4E9B\u63D2\u69FD\u8D21\u732E |
-| \`src/index.ts\` | \u5165\u53E3\uFF0C\u9ED8\u8BA4\u5BFC\u51FA \`definePlugin({ surfaces })\` |
+| \`${entry}\` | \u5165\u53E3\uFF0C\u9ED8\u8BA4\u5BFC\u51FA \`definePlugin({ surfaces })\`${react ? "\uFF0C\u7528 `reactMount` \u6302 React \u7EC4\u4EF6" : ""} |
+| \`tsconfig.json\` | \`npm run typecheck\`\uFF08\`tsc --noEmit\`\uFF09\u7528\uFF1B\`band check\` \u4E0D\u67E5\u7C7B\u578B |
 | \`dev/workshop.yaml\` | \u672C\u5730\u5939\u5177\u5DE5\u574A\uFF1A\u6700\u5C0F\u5B9A\u4E49\uFF0C\u53EA\u7ED9 \`band dev\` / \`band check\` \u7528\uFF0C\u4E0D\u53D1\u5E03 |
 | \`dev/fixture.ts\` | \u5939\u5177\uFF1A\u793A\u4F8B\u4EA7\u7269\u3001\u7248\u672C\u4E0E\u6587\u4EF6 |
 | \`.gitlab-ci.yml\` | CI \u6A21\u677F\uFF1A\u73B0\u5728\u8DD1 \`band check\`\uFF1B\u5355\u6D4B\u3001\u9632\u6CC4\u9732\u626B\u63CF\u4E0E\u53D1\u5E03\u8FDB\u884C\u4E2D |
@@ -940,7 +1052,8 @@ ${title}\uFF1A\u4E00\u4E2A\u72EC\u7ACB\u7684 Band \u63D2\u4EF6\uFF08\u4E0D\u5C5E
 \`\`\`bash
 npm install          # \u88C5\u4E0A devDependencies \u91CC\u7684 band \u547D\u4EE4\u884C\u4E0E\u63D2\u4EF6 SDK
 npx band dev .       # \u7528 dev/ \u5939\u5177\u5DE5\u574A\u8D77\u9879\u76EE\u9875\uFF0C\u672C\u4ED3\u5E93\u7684\u63D2\u4EF6\u81EA\u52A8\u88C5\u4E0A
-npx band check .     # \u6821\u9A8C package.json\u3001plugin.yaml \u4E0E\u5939\u5177\u5DE5\u574A\u7684\u88C5\u914D
+npx band check .     # \u6821\u9A8C package.json\u3001plugin.yaml \u4E0E\u5939\u5177\u5DE5\u574A\u7684\u88C5\u914D\uFF08\u4E0D\u67E5\u4EE3\u7801\u548C\u7C7B\u578B\uFF09
+npm run typecheck    # tsc --noEmit \u67E5\u7C7B\u578B
 \`\`\`
 
 ## \u53D1\u5E03\uFF08\u8FDB\u884C\u4E2D\uFF09
@@ -1070,9 +1183,19 @@ var PUBLISH_LABELS = {
   404: "\u5DE5\u574A\u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 --workshop id",
   409: "\u53D1\u5E03\u51B2\u7A81\uFF0C\u8BF7\u786E\u8BA4\u5DE5\u574A\u53D1\u5E03\u5206\u652F\u7684\u63D0\u4EA4\u4E0E\u672C\u5730 HEAD \u4E00\u81F4"
 };
+async function hasCredentialsFile() {
+  try {
+    await readFile(join5(homedir(), ".config", "band", "credentials.json"), "utf8");
+    return true;
+  } catch {
+    return false;
+  }
+}
 async function connectBand(urlOption, failureLabels = PUBLISH_LABELS, needScope = "workshops:publish") {
   let url = urlOption ?? process.env.BAND_URL;
   let token = process.env.BAND_TOKEN;
+  if (!url && !token && !await hasCredentialsFile())
+    throw new PublishError("\u7F3A\u5C11\u670D\u52A1\u5730\u5740\uFF1A\u7528 --url <\u5730\u5740>\uFF08\u6216\u8BBE BAND_URL\uFF09\uFF0C\u5E76\u914D\u7F6E BAND_TOKEN");
   if (!token) {
     let saved;
     try {
@@ -1094,11 +1217,11 @@ async function connectBand(urlOption, failureLabels = PUBLISH_LABELS, needScope
     }
     if (requestedOrigin && requestedOrigin !== savedOrigin)
       throw new PublishError("\u76EE\u6807\u670D\u52A1\u4E0E\u7528\u6237\u51ED\u636E\u6587\u4EF6\u4E0D\u5339\u914D\uFF0C\u8BF7\u4E3A\u76EE\u6807\u670D\u52A1\u63D0\u4F9B BAND_TOKEN");
-    url ??= saved.url;
+    if (!url) url = saved.url;
     token = saved.token;
   }
-  if (!url || !token || /\s/.test(token))
-    throw new PublishError("\u8BF7\u914D\u7F6E\u5408\u6CD5\u7684 BAND_URL \u4E0E BAND_TOKEN");
+  if (!url) throw new PublishError("\u7F3A\u5C11\u670D\u52A1\u5730\u5740\uFF1A\u7528 --url <\u5730\u5740> \u6216\u8BBE BAND_URL");
+  if (!token || /\s/.test(token)) throw new PublishError("\u8BF7\u914D\u7F6E\u5408\u6CD5\u7684 BAND_TOKEN");
   let base;
   try {
     base = new URL(url);
@@ -1820,7 +1943,7 @@ var USAGE_BASE = `\u7528\u6CD5\uFF1A
   band preview [\u5206\u652F\u6216\u63D0\u4EA4] [--url <Band \u670D\u52A1\u5730\u5740>] --workshop <id> [--project <\u9879\u76EE id>]
   band dev [\u5DE5\u574A\u4ED3\u5E93\u76EE\u5F55 | \u72EC\u7ACB\u63D2\u4EF6\u4ED3\u5E93\u76EE\u5F55] [--port 5310] [--host 127.0.0.1]
   band new plugin <\u540D> --template panel|viewer|stage-view [--stage <\u9636\u6BB5>] [--title <\u6807\u9898>] [--dir <\u5DE5\u574A\u4ED3\u5E93\u76EE\u5F55>]
-  band new plugin-repo @<\u56E2\u961F>/<\u540D> --template panel|viewer|stage-view [--stage <\u9636\u6BB5>] [--title <\u6807\u9898>] [--dir <\u7236\u76EE\u5F55>]
+  band new plugin-repo @<\u56E2\u961F>/<\u540D> --template panel|viewer|stage-view [--react] [--stage <\u9636\u6BB5>] [--title <\u6807\u9898>] [--dir <\u7236\u76EE\u5F55>]
   band new workshop <\u76EE\u5F55> [--example video]
   band new skill [--dir <\u4ED3\u5E93\u76EE\u5F55>]
   band --version`;
@@ -1949,7 +2072,11 @@ async function main(argv) {
       return 0;
     }
     if (cmd === "new") {
-      const { args, flags } = parseArgs(rest, ["template", "stage", "title", "dir"], ["official"]);
+      const { args, flags } = parseArgs(
+        rest,
+        ["template", "stage", "title", "dir"],
+        ["official", "react"]
+      );
       const [kind, name] = args;
       if (kind !== "plugin" && kind !== "plugin-repo" || !name) {
         console.error(usage());
@@ -1960,6 +2087,10 @@ async function main(argv) {
         console.error(`--template \u53EA\u80FD\u662F ${PLUGIN_TEMPLATES.join(" | ")}`);
         return 2;
       }
+      if (kind === "plugin" && flags.react) {
+        console.error("--react \u53EA\u7528\u4E8E band new plugin-repo\uFF08\u5DE5\u574A\u4ED3\u5E93\u91CC\u7684\u63D2\u4EF6\u81EA\u5DF1\u5199 .tsx \u5165\u53E3\uFF09");
+        return 2;
+      }
       if (kind === "plugin-repo") {
         if (flags.official) {
           console.error("--official \u53EA\u7528\u4E8E band new plugin\uFF1A\u72EC\u7ACB\u63D2\u4EF6\u4ED3\u5E93\u4E0D\u751F\u6210\u5B98\u65B9\u63D2\u4EF6");
@@ -1968,7 +2099,8 @@ async function main(argv) {
         const r2 = newPluginRepo(flags.dir ?? ".", name, {
           template,
           ...flags.stage ? { stage: flags.stage } : {},
-          ...flags.title ? { title: flags.title } : {}
+          ...flags.title ? { title: flags.title } : {},
+          ...flags.react ? { react: true } : {}
         });
         for (const f of r2.files) console.log(`\u2713 ${relative(flags.dir ?? ".", join7(r2.dir, f))}`);
         for (const h of r2.hints) console.log(`\u4E0B\u4E00\u6B65\uFF1A${h}`);
@@ -1987,7 +2119,7 @@ async function main(argv) {
     if (cmd === "dev") {
       const { args, flags } = parseArgs(rest, ["port", "host"]);
       const port = flags.port === void 0 ? void 0 : parsePort(flags.port);
-      const { startDevServer } = await import("./dev-server-Q7NTJ3QD.js");
+      const { startDevServer } = await import("./dev-server-IBR3PKDE.js");
       const server = await startDevServer(args[0] ?? ".", {
         ...port !== void 0 ? { port } : {},
         ...flags.host ? { host: flags.host } : {}

package/dist/{dev-server-Q7NTJ3QD.js → dev-server-IBR3PKDE.js}

@@ -194,9 +194,21 @@ function heartbeatPlugin(ms) {
 function bandDevPlugin(root, initial) {
   let ws = initial;
   let server;
+  const seenPackageJsons = /* @__PURE__ */ new Set();
+  const pluginPackageJsons = () => {
+    for (const p of ws.plugins) seenPackageJsons.add(join(dirname(p.manifestPath), "package.json"));
+    for (const path of seenPackageJsons)
+      if (!existsSync(path)) {
+        seenPackageJsons.delete(path);
+        server?.watcher.unwatch(path);
+      }
+    return [...seenPackageJsons];
+  };
+  const isViewPackageJson = (file) => /[\\/]band[\\/]views[\\/][^\\/]+[\\/]package\.json$/.test(file);
   const yamls = () => [
     ws.workshopPath,
     ...ws.plugins.map((p) => p.manifestPath),
+    ...pluginPackageJsons(),
     ...ws.paramsPaths
   ];
   return {
@@ -215,7 +227,8 @@ function bandDevPlugin(root, initial) {
       s.watcher.add(yamls());
       s.watcher.on("all", (_event, file) => {
         if (!file.startsWith(root)) return;
-        if (!file.endsWith(".yaml") && !ws.paramsPaths.includes(file)) return;
+        if (!file.endsWith(".yaml") && !ws.paramsPaths.includes(file) && !pluginPackageJsons().includes(file) && !isViewPackageJson(file))
+          return;
         const mod = s.moduleGraph.getModuleById(RESOLVED);
         if (mod) s.moduleGraph.invalidateModule(mod);
         s.ws.send({ type: "full-reload" });

package/dist/index.d.ts

@@ -33,6 +33,8 @@ interface NewPluginRepoOptions {
     stage?: string;
     /** 界面上的标题，缺省用插件名。 */
     title?: string;
+    /** 用 React 写：入口是 `src/index.tsx`，package.json 带 React 与 `band-plugin-react` 的开发依赖，tsconfig 开 JSX。 */
+    react?: boolean;
 }
 interface NewPluginRepoResult {
     /** 仓库目录（`<父目录>/<名>`）。 */

package/dist/index.js

@@ -10,7 +10,7 @@ import {
   officialPluginCatalog,
   renderOfficialCatalog,
   writeOfficialCatalog
-} from "./chunk-Q2XJXNVH.js";
+} from "./chunk-FGPWXAOA.js";
 import "./chunk-CL3FV65M.js";
 import {
   DevSetupError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanyun-ai-infra/band-cli",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "band 命令行：新建、本地调试、校验与发布 Band 工坊和插件",
   "license": "UNLICENSED",
   "type": "module",
@@ -35,6 +35,7 @@
     "dist",
     "dev-host",
     "src/dev-managers.ts",
+    "src/inspector-default.ts",
     "src/inspector-plugins.ts",
     "src/load-plugins.ts",
     "bundled"
@@ -43,9 +44,9 @@
     "node": ">=22.19"
   },
   "dependencies": {
-    "@kanyun-ai-infra/band-contracts": "^0.1.3",
-    "@kanyun-ai-infra/band-plugin-react": "^0.2.0",
-    "@kanyun-ai-infra/band-plugin-sdk": "^2.0.0",
+    "@kanyun-ai-infra/band-contracts": "^0.1.4",
+    "@kanyun-ai-infra/band-plugin-react": "^0.2.1",
+    "@kanyun-ai-infra/band-plugin-sdk": "^2.1.0",
     "es-module-lexer": "^2.3.2",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",

package/src/inspector-default.ts

@@ -0,0 +1,9 @@
+/**
+ * `band dev` 右边「夹具」栏默认展开的最小视口宽度（像素）：不到这个宽度项目页的右栏会被夹具栏挤得显示不全，
+ * 默认收起，作者点「夹具」按钮展开。quickstart 写的「不到 1600 像素右栏显示不全」是同一个数。
+ */
+export const INSPECTOR_OPEN_MIN_WIDTH = 1600;
+
+export function inspectorOpenByDefault(viewportWidth: number): boolean {
+  return viewportWidth >= INSPECTOR_OPEN_MIN_WIDTH;
+}