@rainbow-robotics/muscat-plugin-kit 0.1.2-dev.9 → 1.0.1

package/cli/vite.mjs

@@ -0,0 +1,292 @@
+import react from "@vitejs/plugin-react";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import postcss from "postcss";
+import { createRequire } from "node:module";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { basename, extname, resolve } from "node:path";
+
+
+const HOST_PROVIDED_EXTERNALS = [
+  /^react(\/.*)?$/,
+  /^react-dom(\/.*)?$/,
+  /^@rainbow-robotics\/plugin-ui(\/.*)?$/,
+  /^@repo\/rb-components(\/.*)?$/,
+];
+
+const UI_ENTRY_PREFIX = "muscat-ui-entry:";
+const RESOLVED_UI_ENTRY_PREFIX = "\0" + UI_ENTRY_PREFIX;
+const SHARED_RUNTIME_PREFIX = "muscat-shared-runtime:";
+const RESOLVED_SHARED_RUNTIME_PREFIX = "\0" + SHARED_RUNTIME_PREFIX;
+const STYLE_EXTENSIONS = [".css", ".scss", ".sass", ".less"];
+// `@rainbow-robotics/plugin-ui/react` ships transpiled-only (see
+// build-dist.mjs: `bundle: false, // consumers resolve deps themselves") — its
+// `export * from "@repo/rb-components/new_components"` is a monorepo-private
+// package no external plugin can npm-install. So a "dev" plugin can't use its
+// own local copy of plugin-ui/react (or /sdk, whose RbContext must stay one
+// singleton with host.tsx's Provider) — these, plus react/react-dom itself
+// (so elements created by rb-components match the instance rendering them)
+// and host-ui (the plain-function toast/alert/confirm/prompt channel), all
+// redirect to the host's already-loaded instances instead.
+const SHARED_RUNTIME_FILES = {
+  react: "react",
+  "react/jsx-runtime": "react_jsx-runtime",
+  "react/jsx-dev-runtime": "react_jsx-dev-runtime",
+  "react-dom": "react-dom",
+  "react-dom/client": "react-dom_client",
+  "@rainbow-robotics/plugin-ui/react": "plugin-ui_react",
+  "@rainbow-robotics/plugin-ui/sdk": "plugin-ui_sdk",
+  "@rainbow-robotics/plugin-ui/host-ui": "plugin-ui_host-ui",
+  "@rainbow-robotics/plugin-ui/ws": "plugin-ui_ws",
+};
+
+function cssString(value) {
+  return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\a ");
+}
+
+function readPluginId(root) {
+  try {
+    const manifest = JSON.parse(readFileSync(resolve(root, "manifest.json"), "utf8"));
+    return typeof manifest.id === "string" && manifest.id ? manifest.id : null;
+  } catch {
+    return null;
+  }
+}
+
+function pluginScopeSelector(pluginId) {
+  if (!pluginId) return ":where([data-muscat-plugin-root])";
+  return `:where([data-muscat-plugin-id="${cssString(pluginId)}"])`;
+}
+
+function discoverUiEntries(uiDir) {
+  return Object.fromEntries(
+    readdirSync(uiDir)
+      .filter((f) => /\.(tsx?|jsx?)$/.test(f))
+      .map((f) => [basename(f, extname(f)), resolve(uiDir, f)]),
+  );
+}
+
+function discoverUiStyles(uiDir, entryName) {
+  return STYLE_EXTENSIONS.flatMap((ext) => [
+    resolve(uiDir, `style${ext}`),
+    resolve(uiDir, `styles${ext}`),
+    resolve(uiDir, `${entryName}${ext}`),
+  ]).filter((file, index, files) => existsSync(file) && files.indexOf(file) === index);
+}
+
+function isKeyframesRule(rule) {
+  for (let node = rule.parent; node; node = node.parent) {
+    if (node.type === "atrule" && /keyframes$/i.test(node.name)) return true;
+  }
+  return false;
+}
+
+function scopeSelector(selector, rootSelector) {
+  const trimmed = selector.trim();
+  if (
+    !trimmed ||
+    trimmed.includes("[data-muscat-plugin-root]") ||
+    trimmed.includes("[data-muscat-plugin-id")
+  ) {
+    return selector;
+  }
+  if (/^(:root|:host)\b/.test(trimmed)) {
+    return trimmed.replace(/^(:root|:host)\b/, rootSelector);
+  }
+  if (/^(html|body)\b/.test(trimmed)) {
+    return trimmed.replace(/^(html|body)\b/, rootSelector);
+  }
+  return `${rootSelector} ${trimmed}`;
+}
+
+function scopePluginCss(css, rootSelector) {
+  if (!css.trim()) return css;
+  const root = postcss.parse(css);
+  root.walkRules((rule) => {
+    if (isKeyframesRule(rule)) return;
+    rule.selectors = rule.selectors.map((selector) => scopeSelector(selector, rootSelector));
+  });
+  return root.toString();
+}
+
+function createUiEntryPlugin(uiDir, entries) {
+  return {
+    name: "muscat-ui-entry",
+    enforce: "pre",
+    resolveId(id) {
+      if (id.startsWith(UI_ENTRY_PREFIX)) return "\0" + id;
+    },
+    load(id) {
+      if (!id.startsWith(RESOLVED_UI_ENTRY_PREFIX)) return;
+      const entryName = id.slice(RESOLVED_UI_ENTRY_PREFIX.length);
+      const entry = entries[entryName];
+      if (!entry) throw new Error(`Unknown Muscat UI entry: ${entryName}`);
+
+      const styleImports = discoverUiStyles(uiDir, entryName)
+        .map((file) => {
+          this.addWatchFile(file);
+          return `import ${JSON.stringify(file)};`;
+        })
+        .join("\n");
+
+      return `${styleImports}\nexport { default } from ${JSON.stringify(entry)};\n`;
+    },
+  };
+}
+
+function resolveFromPlugin(root, specifier) {
+  try {
+    return createRequire(resolve(root, "package.json")).resolve(specifier);
+  } catch {
+    return null;
+  }
+}
+
+function exactSpecifier(specifier) {
+  return new RegExp(`^${specifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`);
+}
+
+function reactAliases(root) {
+  return [
+    "react",
+    "react/jsx-runtime",
+    "react/jsx-dev-runtime",
+    "react-dom",
+    "react-dom/client",
+  ].flatMap((specifier) => {
+    const resolved = resolveFromPlugin(root, specifier);
+    return resolved ? [{ find: exactSpecifier(specifier), replacement: resolved }] : [];
+  });
+}
+
+function createSharedRuntimePlugin(baseUrl) {
+  const base = baseUrl.replace(/\/$/, "");
+
+  return {
+    name: "muscat-shared-runtime",
+    enforce: "pre",
+    resolveId(id) {
+      if (id in SHARED_RUNTIME_FILES) return "\0" + SHARED_RUNTIME_PREFIX + id;
+    },
+    load(id) {
+      if (!id.startsWith(RESOLVED_SHARED_RUNTIME_PREFIX)) return;
+      const specifier = id.slice(RESOLVED_SHARED_RUNTIME_PREFIX.length);
+      const file = SHARED_RUNTIME_FILES[specifier];
+      if (!file) throw new Error(`Unknown Muscat shared runtime module: ${specifier}`);
+
+      const url = JSON.stringify(`${base}/${file}.js`);
+      if (specifier === "react" || specifier === "react-dom") {
+        return `export * from ${url};\nimport sharedDefault from ${url};\nexport default sharedDefault;\n`;
+      }
+      return `export * from ${url};\n`;
+    },
+  };
+}
+
+const REACT_REFRESH_ACCEPT_MARKER =
+  "\nif (import.meta.hot && !inWebWorker) {\n  RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {";
+
+function createManualHmrBoundaryPlugin(uiDir) {
+  const normalizedUiDir = uiDir.replace(/\/$/, "");
+
+  return {
+    name: "muscat-manual-hmr-boundary",
+    apply: "serve",
+    enforce: "post",
+    transform(code, id) {
+      const [file] = id.split("?");
+      if (!file.startsWith(`${normalizedUiDir}/`) || !/\.[jt]sx?$/.test(file)) return null;
+
+      const markerIndex = code.lastIndexOf(REACT_REFRESH_ACCEPT_MARKER);
+      if (markerIndex === -1) return null;
+
+      // preview-host provides the same production ReactDOM as Nexus. Vite's
+      // React Fast Refresh receives updates but cannot drive that renderer, so
+      // let the bootstrap module handle HMR by re-rendering the updated entry.
+      return { code: code.slice(0, markerIndex), map: null };
+    },
+  };
+}
+
+export function muscat(options = {}) {
+  const pluginRoot = process.cwd();
+  const uiDir = resolve(pluginRoot, "ui");
+  const entries = discoverUiEntries(uiDir);
+  const rootSelector = pluginScopeSelector(readPluginId(pluginRoot));
+  const sharedRuntimeBase = process.env.MUSCAT_PLUGIN_SHARED_RUNTIME_BASE;
+  const wrappedEntries = Object.fromEntries(
+    Object.keys(entries).map((name) => [name, `${UI_ENTRY_PREFIX}${name}`]),
+  );
+  const reactPlugins = options.react === false ? [] : [react(options.react)];
+
+  return [
+    ...reactPlugins,
+    createUiEntryPlugin(uiDir, entries),
+    ...(sharedRuntimeBase ? [createSharedRuntimePlugin(sharedRuntimeBase)] : []),
+    ...(sharedRuntimeBase ? [createManualHmrBoundaryPlugin(uiDir)] : []),
+    cssInjectedByJsPlugin({
+      relativeCSSInjection: true,
+      preRenderCSSCode: (css) => scopePluginCss(css, rootSelector),
+    }),
+    {
+      name: "muscat-plugin-build",
+      apply: "build",
+      config: () => ({
+        build: {
+          target: "esnext",
+          outDir: "dist",
+          emptyOutDir: false,
+          rollupOptions: {
+            input: wrappedEntries,
+            external: HOST_PROVIDED_EXTERNALS,
+            // Entries only `export default App` (the host mounts it). Without
+            // this, Vite treats entries as self-executing apps and tree-shakes
+            // the unused default export away.
+            preserveEntrySignatures: "strict",
+            output: {
+              format: "es",
+              entryFileNames: "[name].js",
+              chunkFileNames: "chunks/[name]-[hash].js",
+              assetFileNames: "assets/[name]-[hash][extname]",
+            },
+          },
+        },
+      }),
+    },
+    {
+      name: "muscat-plugin-dev",
+      apply: "serve",
+      config: () => {
+        return {
+          // NOTE: even with sharedRuntimeBase set (so `alias` is empty and our
+          // resolveId below wins for every actual import), @vitejs/plugin-react
+          // still unconditionally adds react/react-dom/jsx-(dev-)runtime to
+          // optimizeDeps.include for Fast Refresh — Vite merges every plugin's
+          // optimizeDeps (arrays are concatenated, not overridden), so esbuild's
+          // pre-bundle scanner still tries to statically resolve those on disk.
+          // That's why the scaffold template keeps react/react-dom as local
+          // devDependencies even in shared-runtime mode: purely so this static
+          // scan has something real to resolve. The actual dev-server imports
+          // never reach that local copy — resolveId (enforce: "pre") below
+          // always wins first and redirects to the host's instance.
+          resolve: {
+            alias: sharedRuntimeBase ? [] : reactAliases(pluginRoot),
+            dedupe: ["react", "react-dom"],
+          },
+          optimizeDeps: sharedRuntimeBase
+            ? { noDiscovery: true, include: [] }
+            : {
+                include: [
+                  "react",
+                  "react-dom",
+                  "react-dom/client",
+                  "@rainbow-robotics/plugin-ui/react",
+                  "@rainbow-robotics/plugin-ui/sdk",
+                  "@rainbow-robotics/plugin-ui/host-ui",
+                  "@rainbow-robotics/plugin-ui/ws",
+                ],
+              },
+        };
+      },
+    },
+  ];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-robotics/muscat-plugin-kit",
-  "version": "0.1.2-dev.9",
+  "version": "1.0.1",
   "type": "module",
   "engines": {
     "node": ">=20"
@@ -13,6 +13,25 @@
     "create-muscat-plugin": "./cli/bin/create-muscat-plugin.mjs",
     "muscat-pk": "./cli/bin/muscat-pk.mjs"
   },
+  "exports": {
+    "./vite": {
+      "types": "./cli/vite.d.mts",
+      "default": "./cli/vite.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-react": ">=4",
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "@vitejs/plugin-react": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
   "files": [
     "cli",
     "package.json"
@@ -20,7 +39,9 @@
   "scripts": {
     "lint": "node cli/src/check-package.mjs",
     "check": "node cli/src/check-package.mjs",
-    "check-types": "node cli/src/check-package.mjs"
+    "check-types": "node cli/src/check-package.mjs",
+    "storybook:build": "node cli/prepack.mjs",
+    "prepack": "node cli/prepack.mjs"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
@@ -31,10 +52,16 @@
     "@types/react-dom": "^19.0.4"
   },
   "dependencies": {
-    "@rainbow-robotics/preview-host": "0.1.2-dev.9",
-    "esbuild": "^0.25.0"
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "@rainbow-robotics/plugin-ui": "1.0.1",
+    "@rainbow-robotics/preview-host": "1.0.1",
+    "postcss": "^8.5.8",
+    "socket.io": "^4.8.1",
+    "typescript": "^5.8.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "zod": "^3.25.0"
   },
   "optionalDependencies": {
     "esbuild-wasm": "^0.25.0"
   }
-}
+}

package/cli/src/pack.mjs

@@ -1,61 +0,0 @@
-// muscat-pk pack — build, then create a distributable ZIP with a size report.
-import { execSync } from "node:child_process";
-import { existsSync, readFileSync, readdirSync, rmSync, statSync } from "node:fs";
-import { basename, resolve } from "node:path";
-import { buildPlugin, exportRos2Build, pinRequirements } from "./build.mjs";
-import { findPluginRoot, humanSize, log } from "./util.mjs";
-
-function dirSize(dir) {
-  let total = 0;
-  for (const entry of readdirSync(dir)) {
-    const full = resolve(dir, entry);
-    const st = statSync(full);
-    total += st.isDirectory() ? dirSize(full) : st.size;
-  }
-  return total;
-}
-
-export async function runPack() {
-  const pluginRoot = findPluginRoot();
-  log.step("pinning requirements.txt to latest PyPI versions");
-  await pinRequirements(pluginRoot);
-  await buildPlugin({ root: pluginRoot, minify: true });
-  await exportRos2Build(pluginRoot);
-
-  const manifest = JSON.parse(
-    readFileSync(resolve(pluginRoot, "manifest.json"), "utf8"),
-  );
-  const zipName = `${basename(pluginRoot)}-${manifest.version || "0.0.0"}.zip`;
-  const zipPath = resolve(pluginRoot, zipName);
-  rmSync(zipPath, { force: true });
-
-  // Contents: dist/ + back-end files if present.
-  const entries = ["dist"];
-  for (const f of ["main.py", "requirements.txt"]) {
-    if (existsSync(resolve(pluginRoot, f))) entries.push(f);
-  }
-  if (existsSync(resolve(pluginRoot, "ros2_ws/install"))) {
-    entries.push("ros2_ws/install");
-  }
-
-  log.step(`packing ${entries.join(", ")} → ${zipName}`);
-  try {
-    execSync(`zip -r -q "${zipPath}" ${entries.map((e) => `"${e}"`).join(" ")}`, {
-      cwd: pluginRoot,
-      stdio: "inherit",
-    });
-  } catch {
-    throw new Error("`zip` not found. Install zip or pack manually.");
-  }
-
-  const zipBytes = statSync(zipPath).size;
-  log.ok(`${zipName}   ${humanSize(zipBytes)}`);
-  for (const e of entries) {
-    const full = resolve(pluginRoot, e);
-    const size = statSync(full).isDirectory() ? dirSize(full) : statSync(full).size;
-    log.info(`  ├─ ${e}   ${humanSize(size)}`);
-  }
-  log.warn(
-    "robot install checks free space via GET /plugin/capacity (507 if low).",
-  );
-}

package/cli/src/preview.mjs

@@ -1,91 +0,0 @@
-// muscat-pk preview — build the plugin and open preview-host connected to a
-// real Muscat server (robot or local). No local Socket.IO server is started.
-import { createInterface } from "node:readline";
-import { spawn } from "node:child_process";
-import { existsSync } from "node:fs";
-import { resolve } from "node:path";
-import { buildPlugin } from "./build.mjs";
-import { findPreviewHostRoot } from "./devUi.mjs";
-import { checkKitUpdate, log, parseArgs } from "./util.mjs";
-
-function prompt(question, defaultValue) {
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((res) => {
-    rl.question(question, (answer) => {
-      rl.close();
-      res(answer.trim() || defaultValue);
-    });
-  });
-}
-
-export async function runPreview(args = []) {
-  const opts = parseArgs(args, { booleans: ["help"] });
-
-  if (opts.help) {
-    console.log(
-      [
-        "",
-        "Usage: muscat-pk preview [options]",
-        "",
-        "  빌드된 플러그인을 실제 Muscat 서버에 연결해 미리봅니다.",
-        "  Socket.IO 서버를 직접 띄우지 않습니다.",
-        "",
-        "Options:",
-        "  --host <ip>    Muscat 서버 IP 또는 hostname (default: localhost)",
-        "  --port <n>     preview-host 로컬 포트 (default: 4180)",
-        "  --ws-port <n>  Muscat Socket.IO 포트 (default: 10000)",
-        "",
-      ].join("\n"),
-    );
-    return;
-  }
-
-  await checkKitUpdate();
-
-  // ── 로봇 IP 결정 ────────────────────────────────────────────────────────────
-  let robotHost = opts.host ?? "";
-  if (!robotHost) {
-    robotHost = await prompt(
-      "Muscat 서버 IP 또는 hostname [localhost]: ",
-      "localhost",
-    );
-  }
-  const wsPort = opts["ws-port"] ?? "10000";
-  const socketUrl = `ws://${robotHost}:${wsPort}`;
-
-  const previewPort = opts.port ?? "4180";
-
-  log.step(`Muscat 서버: ${socketUrl}`);
-
-  // ── 플러그인 빌드 ────────────────────────────────────────────────────────────
-  const { distDir } = await buildPlugin();
-
-  // ── preview-host 실행 ────────────────────────────────────────────────────────
-  const previewRoot = findPreviewHostRoot();
-  const serveEntry = resolve(previewRoot, "serve.mjs");
-
-  if (!existsSync(resolve(previewRoot, "dist", "index.html"))) {
-    log.step("preview-host 번들 빌드 중 (최초 1회)…");
-    await new Promise((res, rej) => {
-      const p = spawn(process.execPath, [resolve(previewRoot, "build.mjs")], {
-        stdio: "inherit",
-      });
-      p.on("exit", (c) => (c === 0 ? res() : rej(new Error("preview-host build failed"))));
-    });
-  }
-
-  log.step(`preview-host 시작 → http://localhost:${previewPort}`);
-  log.step(`Socket.IO URL: ${socketUrl}`);
-
-  const child = spawn(
-    process.execPath,
-    [
-      serveEntry,
-      "--plugin", distDir,
-      "--port", String(previewPort),
-      "--socket-url", socketUrl,
-    ],
-    { stdio: "inherit" },
-  );
-  child.on("exit", (code) => process.exit(code ?? 0));
-}

package/cli/templates/common/main.py

@@ -1,114 +0,0 @@
-"""
-Muscat plugin backend — __PLUGIN_NAME__
-
-플러그인 UI(브라우저)와 Socket.IO로 통신한다.
-`muscat-pk dev:back` 또는 `python main.py`로 실행.
-
-토픽 자동 네임스페이스:
-  "sensor/data"  →  plugin/__PLUGIN_ID__/sensor/data  (자동)
-  "/broadcast/x" →  broadcast/x                       (앞 / = 절대경로)
-"""
-
-import asyncio
-import socketio
-from aiohttp import web
-
-sio = socketio.AsyncServer(async_mode="aiohttp", cors_allowed_origins="*")
-app = web.Application()
-sio.attach(app)
-
-PLUGIN_ID = "__PLUGIN_ID__"
-_PREFIX = f"plugin/{PLUGIN_ID}"
-
-
-def _topic(relative: str) -> str:
-    """상대 토픽 → 전체 네임스페이스 토픽."""
-    return relative if relative.startswith("/") else f"{_PREFIX}/{relative}"
-
-
-# ── 구독·쿼리어블 핸들러 저장소 ────────────────────────────────────────────────
-_sub_handlers: dict[str, list] = {}
-_queryable_handlers: dict[str, object] = {}
-_serve_pending: dict[str, asyncio.Future] = {}
-
-
-# ── Socket.IO 이벤트 ───────────────────────────────────────────────────────────
-
-@sio.event
-async def sub(sid, data):
-    """브라우저가 토픽을 구독."""
-    await sio.enter_room(sid, f"t:{data['topic']}")
-
-
-@sio.event
-async def unsub(sid, data):
-    await sio.leave_room(sid, f"t:{data['topic']}")
-
-
-@sio.event
-async def pub(sid, data):
-    """브라우저가 발행 → Python 구독 핸들러로 전달."""
-    topic = data.get("topic", "")
-    payload = data.get("payload")
-    for handler in _sub_handlers.get(topic, []):
-        asyncio.create_task(handler(payload))
-
-
-@sio.event
-async def action(sid, data):
-    """브라우저 rb.action() 호출 → Python queryable 핸들러 → ack 반환."""
-    topic = data.get("topic", "")
-    handler = _queryable_handlers.get(topic)
-    if handler:
-        return await handler(data.get("payload"))
-
-
-@sio.event
-async def serve_reply(sid, data):
-    """브라우저가 serve_call에 응답."""
-    fut = _serve_pending.pop(data.get("id", ""), None)
-    if fut and not fut.done():
-        fut.set_result(data.get("payload"))
-
-
-# ── 헬퍼 데코레이터 ────────────────────────────────────────────────────────────
-
-def subscribe(relative_topic: str):
-    """브라우저 → Python 메시지 구독 핸들러 등록."""
-    def decorator(fn):
-        _sub_handlers.setdefault(_topic(relative_topic), []).append(fn)
-        return fn
-    return decorator
-
-
-def queryable(relative_topic: str):
-    """브라우저 rb.action() 호출을 처리할 핸들러 등록."""
-    def decorator(fn):
-        _queryable_handlers[_topic(relative_topic)] = fn
-        return fn
-    return decorator
-
-
-async def publish(relative_topic: str, payload) -> None:
-    """Python → 브라우저 구독자에게 메시지 발행."""
-    full = _topic(relative_topic)
-    await sio.emit("msg", {"topic": full, "payload": payload}, room=f"t:{full}")
-
-
-# ── 플러그인 로직 ──────────────────────────────────────────────────────────────
-
-@subscribe("sensor/data")
-async def on_sensor_data(payload):
-    print(f"[__PLUGIN_NAME__] sensor/data: {payload}")
-
-
-@queryable("get-status")
-async def get_status(payload=None):
-    return {"ok": True, "plugin": "__PLUGIN_NAME__"}
-
-
-# ── 진입점 ─────────────────────────────────────────────────────────────────────
-
-if __name__ == "__main__":
-    print("[__PLUGIN_NAME__] Socket.IO server starting on :10000")
-    web.run_app(app, host="0.0.0.0", port=10000)

package/cli/templates/common/src/content.tsx

@@ -1,33 +0,0 @@
-import { useState } from "react";
-import { connect } from "@rainbow-robotics/plugin-ui/connect";
-import { Slider, Button, Text, Switch } from "@rainbow-robotics/plugin-ui/react";
-import { useRb } from "@rainbow-robotics/plugin-ui/sdk";
-
-function App() {
-  const rb = useRb();
-  const [width, setWidth] = useState(20);
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Text>__PLUGIN_NAME__ width: {width}</Text>
-      <Slider
-        value={width}
-        min={0}
-        max={100}
-        onChange={(event: { detail?: number }) => setWidth(event.detail ?? 0)}
-      />
-      <Button label="Grip" onPress={() => rb.action("grip", { width })} />
-      <Switch
-        checked={open}
-        onChange={(event: { detail?: boolean }) => {
-          const next = event.detail ?? false;
-          setOpen(next);
-          rb.toast(next ? "opened" : "closed", "info");
-        }}
-      />
-    </>
-  );
-}
-
-connect(App);