@rainbow-robotics/muscat-plugin-kit 1.10.1-dev.1 → 1.10.1

package/cli/m5-e2e.mjs

@@ -1,69 +1,69 @@
-// M5 e2e: full developer loop. Verifies a plugin scaffolded by `muscat-pk new`,
-// built by `muscat-pk build`, and served by `muscat-pk dev:ui` renders inside the
-// preview-host mini-Muscat. Requires `muscat-pk dev:ui` running on :4180 for a
-// plugin whose name is "Mpk Test".
-// Run from repo root: node packages/rb-plugin-kit/cli/m5-e2e.mjs
-import { chromium } from "playwright-core";
-import { homedir } from "node:os";
-import { join } from "node:path";
-
-const EXEC = join(
-  homedir(),
-  "Library/Caches/ms-playwright/chromium-1223/chrome-mac-arm64",
-  "Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
-);
-const BASE = "http://localhost:4180";
-const PLUGIN_NAME = "Mpk Test";
-
-const R = [];
-const ok = (n, c, e = "") => R.push({ n, c: !!c, e });
-
-const b = await chromium.launch({ executablePath: EXEC });
-const p = await b.newPage({ viewport: { width: 1280, height: 800 } });
-const errs = [];
-p.on("pageerror", (e) => errs.push(e.message));
-const logs = [];
-p.on("console", (m) => logs.push(m.text()));
-const wait = (t, to = 40000) =>
-  p.waitForFunction(
-    (x) => document.body && document.body.innerText.includes(x),
-    t,
-    { timeout: to },
-  );
-
-try {
-  await p.goto(`${BASE}/muscat/plugin`, { waitUntil: "commit" });
-  await wait("D.Board");
-  ok("mini-Muscat shell renders", true);
-  await wait(PLUGIN_NAME, 20000);
-  ok("scaffolded plugin loaded (LNB/content)", true);
-  await wait(`${PLUGIN_NAME} width`, 30000);
-  ok("scaffolded plugin content renders via rb-components", true);
-
-  // Grip action round-trips to the preview SDK
-  logs.length = 0;
-  await p.locator("button", { hasText: "Grip" }).first().click();
-  await p.waitForTimeout(1500);
-  ok(
-    "Grip action round-trips to host SDK",
-    logs.some((l) => l.includes("action") && l.includes("grip")),
-    logs.join(" | "),
-  );
-
-  const body = await p.evaluate(() => document.body.innerText);
-  ok("no API-failure toast", !body.includes("API Request Failed"));
-  ok("no page errors", errs.length === 0, errs.slice(0, 2).join(" | "));
-  await p.screenshot({ path: "/tmp/m5-built.png" });
-} catch (e) {
-  ok("e2e completed", false, String(e));
-} finally {
-  await b.close();
-}
-
-let pass = true;
-for (const r of R) {
-  console.log(`${r.c ? "PASS" : "FAIL"}  ${r.n}${!r.c && r.e ? "  :: " + r.e : ""}`);
-  if (!r.c) pass = false;
-}
-console.log(pass ? "\nALL CHECKS PASSED" : "\nSOME CHECKS FAILED");
-process.exit(pass ? 0 : 1);
+// M5 e2e: full developer loop. Verifies a plugin scaffolded by `muscat-pk new`,
+// built by `muscat-pk build`, and served by `muscat-pk dev:ui` renders inside the
+// preview-host mini-Muscat. Requires `muscat-pk dev:ui` running on :4180 for a
+// plugin whose name is "Mpk Test".
+// Run from repo root: node packages/rb-plugin-kit/cli/m5-e2e.mjs
+import { chromium } from "playwright-core";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const EXEC = join(
+  homedir(),
+  "Library/Caches/ms-playwright/chromium-1223/chrome-mac-arm64",
+  "Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
+);
+const BASE = "http://localhost:4180";
+const PLUGIN_NAME = "Mpk Test";
+
+const R = [];
+const ok = (n, c, e = "") => R.push({ n, c: !!c, e });
+
+const b = await chromium.launch({ executablePath: EXEC });
+const p = await b.newPage({ viewport: { width: 1280, height: 800 } });
+const errs = [];
+p.on("pageerror", (e) => errs.push(e.message));
+const logs = [];
+p.on("console", (m) => logs.push(m.text()));
+const wait = (t, to = 40000) =>
+  p.waitForFunction(
+    (x) => document.body && document.body.innerText.includes(x),
+    t,
+    { timeout: to },
+  );
+
+try {
+  await p.goto(`${BASE}/muscat/plugin`, { waitUntil: "commit" });
+  await wait("D.Board");
+  ok("mini-Muscat shell renders", true);
+  await wait(PLUGIN_NAME, 20000);
+  ok("scaffolded plugin loaded (LNB/content)", true);
+  await wait(`${PLUGIN_NAME} width`, 30000);
+  ok("scaffolded plugin content renders via rb-components", true);
+
+  // Grip action round-trips to the preview SDK
+  logs.length = 0;
+  await p.locator("button", { hasText: "Grip" }).first().click();
+  await p.waitForTimeout(1500);
+  ok(
+    "Grip action round-trips to host SDK",
+    logs.some((l) => l.includes("action") && l.includes("grip")),
+    logs.join(" | "),
+  );
+
+  const body = await p.evaluate(() => document.body.innerText);
+  ok("no API-failure toast", !body.includes("API Request Failed"));
+  ok("no page errors", errs.length === 0, errs.slice(0, 2).join(" | "));
+  await p.screenshot({ path: "/tmp/m5-built.png" });
+} catch (e) {
+  ok("e2e completed", false, String(e));
+} finally {
+  await b.close();
+}
+
+let pass = true;
+for (const r of R) {
+  console.log(`${r.c ? "PASS" : "FAIL"}  ${r.n}${!r.c && r.e ? "  :: " + r.e : ""}`);
+  if (!r.c) pass = false;
+}
+console.log(pass ? "\nALL CHECKS PASSED" : "\nSOME CHECKS FAILED");
+process.exit(pass ? 0 : 1);

package/cli/prepack.mjs

@@ -1,10 +1,10 @@
-// Runs on `npm publish` / `yarn npm publish` (and `npm pack`) via the "prepack"
-// lifecycle hook. Builds the bundled Storybook (foundations + muscat) and stages
-// it into cli/storybook-dist so it ships inside the published muscat-pk and
-// `muscat-pk storybook` works from an external install.
-//
-// In the monorepo this runs the real build; outside it (re-packing an already
-// published copy) buildStorybook() no-ops and the pre-staged dist is used.
-import { buildStorybook } from "./src/storybook.mjs";
-
-buildStorybook();
+// Runs on `npm publish` / `yarn npm publish` (and `npm pack`) via the "prepack"
+// lifecycle hook. Builds the bundled Storybook (foundations + muscat) and stages
+// it into cli/storybook-dist so it ships inside the published muscat-pk and
+// `muscat-pk storybook` works from an external install.
+//
+// In the monorepo this runs the real build; outside it (re-packing an already
+// published copy) buildStorybook() no-ops and the pre-staged dist is used.
+import { buildStorybook } from "./src/storybook.mjs";
+
+buildStorybook();

package/cli/src/ai-rules.mjs

@@ -1,70 +1,70 @@
-// Rules for AI coding agents working on a Muscat plugin. One source for both the MCP server's
-// instructions (mcp.mjs) and the AGENTS.md / CLAUDE.md that `muscat-pk new` scaffolds, so the
-// two never drift. Kept free of heavy imports: `new` loads it too.
-
-// Native elements and the plugin-ui component to use instead.
-export const NATIVE_TO_RB = [
-  ["select / dropdown", "RBSelectBox + Option (children)"],
-  ["input type=text", "RBTextInput (RBTextField for label + helper text)"],
-  ["input type=number", "RBSideNumberInput"],
-  ["input type=range", "RBSlider (RBMultiRangeInput for a range)"],
-  ["input type=checkbox", "RBCheckBox"],
-  ["input type=radio", "RBRadioButton / RBRadioBox"],
-  ["toggle / switch", "RBSwitch (RBSwitchField with a label)"],
-  ["input type=date", "RBDateInput / RBRangeDateInput"],
-  ["textarea", "RBTextArea"],
-  ["button", "RBLabelButton (text), RBIconButton (icon only)"],
-  ["label", "RBTextLabel"],
-  ["table", "RBTable + RBTableRow + RBTdColumn"],
-  ["dialog / modal", "RBDialog… / RBModal; rb.confirm() / rb.alert() / rb.prompt() for simple prompts"],
-  ["tabs", "RBTabs + RBTabsList + RBTabsTrigger + RBTabsContent"],
-  ["tooltip (title=)", "RBTooltip"],
-  ["hr", "RBDivider"],
-  ["loading spinner", "RBSpinner"],
-];
-
-const UI_RULES = [
-  "Use plugin-ui components, never native form/control elements (<select>, <input>, <button>, <textarea>, <table>, <dialog>) or another UI library. Layout-only elements (<div>, <span>, <p>) are fine; prefer HStack/VStack for stacks.",
-  "Before writing a component, call get_component_example (working usage) or get_component_props (its type). Names are exact; when one is not found, use the suggestion returned, not a native element.",
-  "Colors and type come from tokens (bg-bg-*, text-fg-*, typo-*), not hex values or arbitrary Tailwind colors.",
-];
-
-const nativeTable = () => NATIVE_TO_RB.map(([el, rb]) => `- ${el}: ${rb}`).join("\n");
-
-export const SERVER_INSTRUCTIONS = `Muscat plugin UI (ui/*.tsx) is built only from @rainbow-robotics/plugin-ui/react, styled with the design-token Tailwind classes (list_design_tokens).
-
-Rules for UI work:
-${UI_RULES.map((r) => `- ${r}`).join("\n")}
-
-Native element -> plugin-ui component:
-${nativeTable()}
-
-Backend, manifest and SDK questions: search_rb_sdk, list_rb_sdk, get_rb_sdk_api.`;
-
-// AGENTS.md (Codex, Cursor, Gemini CLI, Copilot …). CLAUDE.md imports it with `@AGENTS.md`.
-// The backend type is not named: `muscat-pk type change` would leave it stale.
-export function agentsMd({ pluginName }) {
-  return `# ${pluginName} — Muscat plugin
-
-A Muscat plugin: \`manifest.json\`, a React UI in \`ui/*.tsx\`, and a backend whose type is \`runtime\` in \`manifest.json\`.
-\`README.md\` is the full plugin-author guide. The \`muscat\` MCP server (\`.mcp.json\`, \`muscat-pk mcp\`) looks up
-components, design tokens and the SDK: use it instead of guessing names or props.
-
-## Commands
-
-- \`muscat-pk dev\`: UI preview + backend with hot reload (\`dev:ui\` / \`dev:back\` for one side)
-- \`muscat-pk build\`: validates \`manifest.json\`, builds \`dist/\` and the distributable ZIP
-
-## UI rules
-
-UI is built only from \`@rainbow-robotics/plugin-ui/react\`, styled with design-token Tailwind classes.
-
-${UI_RULES.map((r) => `- ${r}`).join("\n")}
-
-Native element → plugin-ui component:
-
-${nativeTable()}
-`;
-}
-
-export const CLAUDE_MD = "@AGENTS.md\n";
+// Rules for AI coding agents working on a Muscat plugin. One source for both the MCP server's
+// instructions (mcp.mjs) and the AGENTS.md / CLAUDE.md that `muscat-pk new` scaffolds, so the
+// two never drift. Kept free of heavy imports: `new` loads it too.
+
+// Native elements and the plugin-ui component to use instead.
+export const NATIVE_TO_RB = [
+  ["select / dropdown", "RBSelectBox + Option (children)"],
+  ["input type=text", "RBTextInput (RBTextField for label + helper text)"],
+  ["input type=number", "RBSideNumberInput"],
+  ["input type=range", "RBSlider (RBMultiRangeInput for a range)"],
+  ["input type=checkbox", "RBCheckBox"],
+  ["input type=radio", "RBRadioButton / RBRadioBox"],
+  ["toggle / switch", "RBSwitch (RBSwitchField with a label)"],
+  ["input type=date", "RBDateInput / RBRangeDateInput"],
+  ["textarea", "RBTextArea"],
+  ["button", "RBLabelButton (text), RBIconButton (icon only)"],
+  ["label", "RBTextLabel"],
+  ["table", "RBTable + RBTableRow + RBTdColumn"],
+  ["dialog / modal", "RBDialog… / RBModal; rb.confirm() / rb.alert() / rb.prompt() for simple prompts"],
+  ["tabs", "RBTabs + RBTabsList + RBTabsTrigger + RBTabsContent"],
+  ["tooltip (title=)", "RBTooltip"],
+  ["hr", "RBDivider"],
+  ["loading spinner", "RBSpinner"],
+];
+
+const UI_RULES = [
+  "Use plugin-ui components, never native form/control elements (<select>, <input>, <button>, <textarea>, <table>, <dialog>) or another UI library. Layout-only elements (<div>, <span>, <p>) are fine; prefer HStack/VStack for stacks.",
+  "Before writing a component, call get_component_example (working usage) or get_component_props (its type). Names are exact; when one is not found, use the suggestion returned, not a native element.",
+  "Colors and type come from tokens (bg-bg-*, text-fg-*, typo-*), not hex values or arbitrary Tailwind colors.",
+];
+
+const nativeTable = () => NATIVE_TO_RB.map(([el, rb]) => `- ${el}: ${rb}`).join("\n");
+
+export const SERVER_INSTRUCTIONS = `Muscat plugin UI (ui/*.tsx) is built only from @rainbow-robotics/plugin-ui/react, styled with the design-token Tailwind classes (list_design_tokens).
+
+Rules for UI work:
+${UI_RULES.map((r) => `- ${r}`).join("\n")}
+
+Native element -> plugin-ui component:
+${nativeTable()}
+
+Backend, manifest and SDK questions: search_rb_sdk, list_rb_sdk, get_rb_sdk_api.`;
+
+// AGENTS.md (Codex, Cursor, Gemini CLI, Copilot …). CLAUDE.md imports it with `@AGENTS.md`.
+// The backend type is not named: `muscat-pk type change` would leave it stale.
+export function agentsMd({ pluginName }) {
+  return `# ${pluginName} — Muscat plugin
+
+A Muscat plugin: \`manifest.json\`, a React UI in \`ui/*.tsx\`, and a backend whose type is \`runtime\` in \`manifest.json\`.
+\`README.md\` is the full plugin-author guide. The \`muscat\` MCP server (\`.mcp.json\`, \`muscat-pk mcp\`) looks up
+components, design tokens and the SDK: use it instead of guessing names or props.
+
+## Commands
+
+- \`muscat-pk dev\`: UI preview + backend with hot reload (\`dev:ui\` / \`dev:back\` for one side)
+- \`muscat-pk build\`: validates \`manifest.json\`, builds \`dist/\` and the distributable ZIP
+
+## UI rules
+
+UI is built only from \`@rainbow-robotics/plugin-ui/react\`, styled with design-token Tailwind classes.
+
+${UI_RULES.map((r) => `- ${r}`).join("\n")}
+
+Native element → plugin-ui component:
+
+${nativeTable()}
+`;
+}
+
+export const CLAUDE_MD = "@AGENTS.md\n";