@myop/cli 0.1.40 → 0.1.42

package/dist/myop-cli.js

@@ -1,19 +1,19 @@
 #!/usr/bin/env node
-var ct = Object.defineProperty;
-var dt = (o, e, t) => e in o ? ct(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var he = (o, e, t) => dt(o, typeof e != "symbol" ? e + "" : e, t);
-import V from "ora";
-import { select as Ge, Separator as Fe } from "@inquirer/prompts";
-import { Command as pt, Option as pe } from "commander";
-import { execSync as Q, spawn as mt } from "child_process";
-import ne, { join as Ee } from "path";
-import D, { readFileSync as ut } from "fs";
-import ke from "crypto";
-import gt from "http";
-import { URL as Ye, URLSearchParams as Ke } from "url";
-import ft from "open";
-import ht from "os";
-const yt = `
+var ut = Object.defineProperty;
+var gt = (o, e, t) => e in o ? ut(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var ye = (o, e, t) => gt(o, typeof e != "symbol" ? e + "" : e, t);
+import G from "ora";
+import { select as Ye, Separator as Fe } from "@inquirer/prompts";
+import { Command as ft, Option as me } from "commander";
+import { execSync as q, spawn as ht } from "child_process";
+import H, { join as Oe } from "path";
+import R, { readFileSync as yt } from "fs";
+import Le from "crypto";
+import wt from "http";
+import { URL as Ke, URLSearchParams as Qe } from "url";
+import St from "open";
+import vt from "os";
+const bt = `
 Usage: myop [OPTIONS] COMMAND [ARGS]...
 
 A powerful command-line interface for managing your Myop projects.
@@ -55,81 +55,81 @@ Examples:
     verbose: !1
   },
   myopConfig: null
-}, Qe = {
+}, Ze = {
   name: "📥 Install Myop generated dependencies",
   value: "myopInstall",
   description: "Fetch and generates Myop dependencies. flows including components, refs and props.",
   action: async () => {
     console.info("installing... ");
     for (const o of y.myopConfig.flows) {
-      const e = ne.join(y.executionPath, "/node_modules/@myop/flow-types/");
+      const e = H.join(y.executionPath, "/node_modules/@myop/flow-types/");
       console.info(`Generate flow at ${e}`), console.info(`Generated flow at ${e}`);
     }
     process.exit();
   }
-}, wt = (o) => {
-  const e = ne.join(y.executionPath, o);
+}, xt = (o) => {
+  const e = H.join(y.executionPath, o);
   console.info(`reading config file from: ${e}`);
-  const t = D.readFileSync(e, "utf8"), n = JSON.parse(t);
+  const t = R.readFileSync(e, "utf8"), n = JSON.parse(t);
   return console.info("config file loaded, ", n), n;
-}, _e = (o, e) => {
-  const t = ne.join(y.executionPath, o);
+}, Ae = (o, e) => {
+  const t = H.join(y.executionPath, o);
   console.info(`writing config file to: ${t}`);
   try {
     const n = JSON.stringify(e, null, 2);
-    D.writeFileSync(t, n), console.info(`config file updated ${n}`);
+    R.writeFileSync(t, n), console.info(`config file updated ${n}`);
   } catch (n) {
     throw console.info(`error ${n} while writing to ${t}, JSON: ${e}`), console.log(`
 ⚠️ Failed write config file to ${t}, for more info use verbose flag`), n;
   }
-}, Ze = {
+}, Xe = {
   name: "🌟 Add flow definition to your project",
   value: "addFlow",
   description: "Adds flow to yours myop.config.json",
   _action: (o) => {
-    y.myopConfig.flows.includes(o) || y.myopConfig.flows.push(o), _e(y.options.configPath, y.myopConfig);
+    y.myopConfig.flows.includes(o) || y.myopConfig.flows.push(o), Ae(y.options.configPath, y.myopConfig);
   },
   action: async () => {
   }
-}, Xe = {
+}, qe = {
   name: "🚫 Remove flow definition from your project",
   value: "removeFlow",
   description: "Removes flow to yours myop.config.json",
   _action: (o) => {
-    y.myopConfig.flows = y.myopConfig.flows.filter((e) => e !== o), _e(y.options.configPath, y.myopConfig);
+    y.myopConfig.flows = y.myopConfig.flows.filter((e) => e !== o), Ae(y.options.configPath, y.myopConfig);
   },
   action: () => {
   }
-}, vt = {
+}, $t = {
   name: "👋 Quit",
   value: "quit",
   description: "Quit and continue coding.",
   action: () => {
     process.exit();
   }
-}, bt = {
+}, Ct = {
   name: "🟢 Create new component",
   value: "-",
   disabled: "(not available yet)"
-}, St = {
+}, Mt = {
   name: "🔵 Create new experience",
   value: "-",
   disabled: "(not available yet)"
-}, $t = {
+}, Pt = {
   name: "🟡 Create new skin",
   value: "-",
   disabled: "(not available yet)"
-}, xt = {
+}, Tt = {
   name: "🔴 Create new flow",
   value: "-",
   disabled: "(not available yet)"
-}, Ct = {
+}, Rt = {
   name: "🆕 Define new custom Myop message",
   value: "generateMyopMessage",
   description: "️Help you creates the right structure for a new Myop message, including types and handlers.",
   disabled: "(not available yet)"
-}, Mt = [Ct, bt, St, $t, xt];
-function Pt(o, e, t, n) {
+}, Et = [Rt, Ct, Mt, Pt, Tt];
+function It(o, e, t, n) {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -219,32 +219,32 @@ ${n}
 </body>
 </html>`;
 }
-function Rt(o) {
+function Ot(o) {
   return o.includes("esbuild") && o.includes("another platform");
 }
-function Tt(o) {
+function kt(o) {
   return o.includes("ERR_MODULE_NOT_FOUND") && o.includes("esbuild");
 }
-function Ot() {
+function Ft() {
   console.error(`
 ❌ esbuild platform mismatch detected!`), console.error("   Your node_modules contains esbuild binaries for a different OS."), console.error(`
    This usually happens when node_modules is copied between different`), console.error(`   operating systems (e.g., Windows → Mac, or Mac → Linux).
 `);
 }
-function Et(o) {
+function jt(o) {
   return new Promise((e) => {
     console.log(`🔧 Attempting to fix: removing node_modules and reinstalling...
 `);
     const n = process.platform === "win32" ? "rmdir /s /q node_modules" : "rm -rf node_modules";
-    o(n, (r) => {
-      if (r) {
-        console.error("❌ Failed to remove node_modules:", r.message), console.error(`
+    o(n, (i) => {
+      if (i) {
+        console.error("❌ Failed to remove node_modules:", i.message), console.error(`
    Please run manually:`), console.error(`   \x1B[36m${n} && npm install\x1B[0m
 `), e(!1);
         return;
       }
       console.log("   ✓ Removed node_modules"), console.log(`   ⏳ Running npm install...
-`), o("npm install", { maxBuffer: 10 * 1024 * 1024 }, (s, d, w) => {
+`), o("npm install", { maxBuffer: 10 * 1024 * 1024 }, (s, l, w) => {
         if (s) {
           console.error("❌ npm install failed:", s.message), w && console.error(w), e(!1);
           return;
@@ -255,101 +255,101 @@ function Et(o) {
     });
   });
 }
-async function qe(o, e, t, n, r = {}) {
+async function et(o, e, t, n, i = {}) {
   const {
     hasTriedPlatformFix: s = !1,
-    hasTriedInstall: d = !1,
+    hasTriedInstall: l = !1,
     onRetry: w
-  } = r, $ = ((o == null ? void 0 : o.message) || "") + (e || "") + (t || "");
-  return !s && Rt($) ? (Ot(), await Et(n) && w ? (console.log(`🔄 Retrying build...
-`), w(), { handled: !0, hasTriedPlatformFix: !0, hasTriedInstall: d }) : { handled: !0, hasTriedPlatformFix: !0, hasTriedInstall: d }) : !d && Tt($) ? (console.log("📦 Missing dependencies detected, running npm install..."), new Promise((m) => {
-    n("npm install", (p, S, g) => {
-      if (p) {
-        console.error("❌ Failed to install dependencies:", p.message), g && console.error(g), m({ handled: !0, hasTriedPlatformFix: s, hasTriedInstall: !0 });
+  } = i, v = ((o == null ? void 0 : o.message) || "") + (e || "") + (t || "");
+  return !s && Ot(v) ? (Ft(), await jt(n) && w ? (console.log(`🔄 Retrying build...
+`), w(), { handled: !0, hasTriedPlatformFix: !0, hasTriedInstall: l }) : { handled: !0, hasTriedPlatformFix: !0, hasTriedInstall: l }) : !l && kt(v) ? (console.log("📦 Missing dependencies detected, running npm install..."), new Promise((m) => {
+    n("npm install", (d, C, u) => {
+      if (d) {
+        console.error("❌ Failed to install dependencies:", d.message), u && console.error(u), m({ handled: !0, hasTriedPlatformFix: s, hasTriedInstall: !0 });
         return;
       }
       console.log("✅ Dependencies installed"), w && w(), m({ handled: !0, hasTriedPlatformFix: s, hasTriedInstall: !0 });
     });
-  })) : { handled: !1, hasTriedPlatformFix: s, hasTriedInstall: d };
+  })) : { handled: !1, hasTriedPlatformFix: s, hasTriedInstall: l };
 }
-async function Le() {
-  const o = await import("fs"), e = await import("path"), { exec: t } = await import("child_process"), n = await import("http"), { createHash: r } = await import("node:crypto");
+async function be() {
+  const o = await import("fs"), e = await import("path"), { exec: t } = await import("child_process"), n = await import("http"), { createHash: i } = await import("node:crypto");
   let s;
   if (import.meta.url.startsWith("file://")) {
-    const i = new URL(import.meta.url).pathname, l = process.platform === "win32" && i.startsWith("/") ? i.slice(1) : i;
-    s = e.default.dirname(l);
+    const r = new URL(import.meta.url).pathname, c = process.platform === "win32" && r.startsWith("/") ? r.slice(1) : r;
+    s = e.default.dirname(c);
   } else
     s = e.default.dirname(import.meta.url);
-  const d = e.default.join(s, "commands", "dev", "management-website"), w = o.default.readFileSync(e.default.join(d, "styles.css"), "utf-8"), $ = o.default.readFileSync(e.default.join(d, "app.js"), "utf-8"), m = 9292, p = 9293;
-  let S = "./dist", g = !1, b = !1, x = !1, C = null;
-  const L = () => {
+  const l = e.default.join(s, "commands", "dev", "management-website"), w = o.default.readFileSync(e.default.join(l, "styles.css"), "utf-8"), v = o.default.readFileSync(e.default.join(l, "app.js"), "utf-8"), m = 9292, d = 9293;
+  let C = "./dist", u = !1, S = !1, M = !1, T = null;
+  const D = () => {
     try {
-      const a = o.default.readdirSync(".").filter((i) => !i.endsWith(".html") || i.startsWith(".") ? !1 : o.default.statSync(i).isFile());
+      const a = o.default.readdirSync(".").filter((r) => !r.endsWith(".html") || r.startsWith(".") ? !1 : o.default.statSync(r).isFile());
       if (a.length === 1)
         return a[0];
     } catch {
     }
     return null;
-  }, H = () => {
+  }, P = () => {
     try {
       const a = JSON.parse(o.default.readFileSync("package.json", "utf-8"));
       return !!(a.scripts && a.scripts.build);
     } catch {
       return !1;
     }
-  }, f = (a) => {
-    const i = process.platform;
-    let l;
-    i === "darwin" ? l = `open "${a}"` : i === "win32" ? l = `start "" "${a}"` : l = `xdg-open "${a}"`, t(l, (c) => {
+  }, x = (a) => {
+    const r = process.platform;
+    let c;
+    r === "darwin" ? c = `open "${a}"` : r === "win32" ? c = `start "" "${a}"` : c = `xdg-open "${a}"`, t(c, (p) => {
     });
-  }, P = /* @__PURE__ */ new Map(), E = y.program.getOptionValue("config") || "./myop.config.json";
-  let M, I, _ = !1;
-  C = L();
-  const te = H();
+  }, j = /* @__PURE__ */ new Map(), b = y.program.getOptionValue("config") || "./myop.config.json";
+  let f, E, _ = !1;
+  T = D();
+  const B = P();
   try {
-    const a = o.default.readFileSync(E, "utf-8"), i = JSON.parse(a);
-    M = i.componentId || "DEV", I = i.componentName || i.name || null, _ = i.HMR === !0, C && !te && (x = !0, _ = !0, console.log(`📄 Single HTML file mode: ${C}`)), _ && console.log("🔥 HMR enabled");
+    const a = o.default.readFileSync(b, "utf-8"), r = JSON.parse(a);
+    f = r.componentId || "DEV", E = r.componentName || r.name || null, _ = r.HMR === !0, T && !B && (M = !0, _ = !0, console.log(`📄 Single HTML file mode: ${T}`)), _ && console.log("🔥 HMR enabled");
   } catch (a) {
-    C && !te ? (x = !0, M = "DEV", I = e.default.basename(C, ".html"), _ = !0, console.log(`📄 Single HTML file mode: ${C}`), console.log("🔥 HMR enabled")) : (console.error("❌ Error reading myop.config.json:", a.message), process.exit(1));
+    T && !B ? (M = !0, f = "DEV", E = e.default.basename(T, ".html"), _ = !0, console.log(`📄 Single HTML file mode: ${T}`), console.log("🔥 HMR enabled")) : (console.error("❌ Error reading myop.config.json:", a.message), process.exit(1));
   }
   const U = async () => {
-    if (M !== "DEV" && M !== "NEW")
-      return M;
+    if (f !== "DEV" && f !== "NEW")
+      return f;
     try {
-      const i = ((await new Promise((u, h) => {
-        const v = {
+      const r = ((await new Promise((g, h) => {
+        const $ = {
           hostname: "localhost",
-          port: p,
+          port: d,
           path: "/_list",
           method: "GET",
           timeout: 1e3
-        }, R = n.default.request(v, (N) => {
-          let J = "";
-          N.on("data", (q) => J += q), N.on("end", () => {
+        }, O = n.default.request($, (L) => {
+          let V = "";
+          L.on("data", (te) => V += te), L.on("end", () => {
             try {
-              u(JSON.parse(J));
+              g(JSON.parse(V));
             } catch {
-              u({ components: [] });
+              g({ components: [] });
             }
           });
         });
-        R.on("error", () => u({ components: [] })), R.on("timeout", () => {
-          R.destroy(), u({ components: [] });
-        }), R.end();
-      })).components || []).map(([u]) => u).filter((u) => u === "DEV" || u === "NEW" || /^DEV\d+$/.test(u) || /^NEW\d+$/.test(u));
-      if (i.length === 0)
+        O.on("error", () => g({ components: [] })), O.on("timeout", () => {
+          O.destroy(), g({ components: [] });
+        }), O.end();
+      })).components || []).map(([g]) => g).filter((g) => g === "DEV" || g === "NEW" || /^DEV\d+$/.test(g) || /^NEW\d+$/.test(g));
+      if (r.length === 0)
         return "DEV1";
-      const l = i.map((u) => {
-        if (u === "DEV" || u === "NEW") return 1;
-        const h = u.match(/^DEV(\d+)$/), v = u.match(/^NEW(\d+)$/);
-        return h ? parseInt(h[1], 10) : v ? parseInt(v[1], 10) : 0;
-      }).filter((u) => u > 0);
-      return `DEV${Math.max(...l, 0) + 1}`;
+      const c = r.map((g) => {
+        if (g === "DEV" || g === "NEW") return 1;
+        const h = g.match(/^DEV(\d+)$/), $ = g.match(/^NEW(\d+)$/);
+        return h ? parseInt(h[1], 10) : $ ? parseInt($[1], 10) : 0;
+      }).filter((g) => g > 0);
+      return `DEV${Math.max(...c, 0) + 1}`;
     } catch {
       return "DEV1";
     }
-  }, F = process.cwd(), G = (a) => {
-    const i = e.default.extname(a).toLowerCase();
+  }, k = process.cwd(), z = (a) => {
+    const r = e.default.extname(a).toLowerCase();
     return {
       ".html": "text/html",
       ".js": "text/javascript",
@@ -360,336 +360,336 @@ async function Le() {
       ".gif": "image/gif",
       ".svg": "image/svg+xml",
       ".ico": "image/x-icon"
-    }[i] || "application/octet-stream";
-  }, T = /* @__PURE__ */ new Map(), Y = [], $e = 50, Z = [], se = /* @__PURE__ */ new Map(), X = /* @__PURE__ */ new Map(), st = (a, i, l) => {
+    }[r] || "application/octet-stream";
+  }, I = /* @__PURE__ */ new Map(), Z = [], se = 50, Y = [], ie = /* @__PURE__ */ new Map(), ee = /* @__PURE__ */ new Map(), lt = (a, r, c) => {
     if (a.url.startsWith("/_hmr/")) {
-      const c = a.url.split("/_hmr/")[1], u = a.headers["sec-websocket-key"], h = r("sha1").update(u + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");
-      i.write(
+      const p = a.url.split("/_hmr/")[1], g = a.headers["sec-websocket-key"], h = i("sha1").update(g + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");
+      r.write(
         `HTTP/1.1 101 Switching Protocols\r
 Upgrade: websocket\r
 Connection: Upgrade\r
 Sec-WebSocket-Accept: ${h}\r
 \r
 `
-      ), X.has(c) || X.set(c, /* @__PURE__ */ new Set()), X.get(c).add(i), console.log(`🔌 HMR client connected: ${c}`), i.on("close", () => {
-        const v = X.get(c);
-        v && (v.delete(i), v.size === 0 && X.delete(c)), console.log(`🔌 HMR client disconnected: ${c}`);
-      }), i.on("error", () => {
-        const v = X.get(c);
-        v && v.delete(i);
+      ), ee.has(p) || ee.set(p, /* @__PURE__ */ new Set()), ee.get(p).add(r), console.log(`🔌 HMR client connected: ${p}`), r.on("close", () => {
+        const $ = ee.get(p);
+        $ && ($.delete(r), $.size === 0 && ee.delete(p)), console.log(`🔌 HMR client disconnected: ${p}`);
+      }), r.on("error", () => {
+        const $ = ee.get(p);
+        $ && $.delete(r);
       });
     }
-  }, xe = n.default.createServer((a, i) => {
-    if (i.setHeader("Content-Type", "application/json"), a.method === "POST" && a.url === "/_register") {
-      let l = "";
-      a.on("data", (c) => l += c), a.on("end", () => {
+  }, Ce = n.default.createServer((a, r) => {
+    if (r.setHeader("Content-Type", "application/json"), a.method === "POST" && a.url === "/_register") {
+      let c = "";
+      a.on("data", (p) => c += p), a.on("end", () => {
         try {
-          const { componentId: c, distPath: u, componentName: h, htmlFile: v } = JSON.parse(l);
-          T.set(c, { path: u, name: h || null, htmlFile: v || null });
-          const R = h ? ` (${h})` : "";
-          console.log(`✅ Registered: ${c}${R} -> ${u}${v ? "/" + v : ""}`), i.writeHead(200), i.end(JSON.stringify({ success: !0, registered: Array.from(T.keys()) }));
-          const N = Array.from(T.entries()).map(([J, q]) => ({
-            id: J,
-            path: q.path,
-            name: q.name
+          const { componentId: p, distPath: g, componentName: h, htmlFile: $ } = JSON.parse(c);
+          I.set(p, { path: g, name: h || null, htmlFile: $ || null });
+          const O = h ? ` (${h})` : "";
+          console.log(`✅ Registered: ${p}${O} -> ${g}${$ ? "/" + $ : ""}`), r.writeHead(200), r.end(JSON.stringify({ success: !0, registered: Array.from(I.keys()) }));
+          const L = Array.from(I.entries()).map(([V, te]) => ({
+            id: V,
+            path: te.path,
+            name: te.name
           }));
-          Z.forEach((J) => {
+          Y.forEach((V) => {
             try {
-              J.write(`data: ${JSON.stringify({
+              V.write(`data: ${JSON.stringify({
                 type: "components",
-                components: N
+                components: L
               })}
 
 `);
             } catch {
             }
           });
-        } catch (c) {
-          i.writeHead(400), i.end(JSON.stringify({ error: c.message }));
+        } catch (p) {
+          r.writeHead(400), r.end(JSON.stringify({ error: p.message }));
         }
       });
     } else if (a.method === "POST" && a.url === "/_unregister") {
-      let l = "";
-      a.on("data", (c) => l += c), a.on("end", () => {
+      let c = "";
+      a.on("data", (p) => c += p), a.on("end", () => {
         try {
-          const { componentId: c } = JSON.parse(l);
-          T.delete(c), console.log(`❌ Unregistered: ${c}`), i.writeHead(200), i.end(JSON.stringify({ success: !0 }));
-          const u = Array.from(T.entries()).map(([h, v]) => ({
+          const { componentId: p } = JSON.parse(c);
+          I.delete(p), console.log(`❌ Unregistered: ${p}`), r.writeHead(200), r.end(JSON.stringify({ success: !0 }));
+          const g = Array.from(I.entries()).map(([h, $]) => ({
             id: h,
-            path: v.path,
-            name: v.name
+            path: $.path,
+            name: $.name
           }));
-          Z.forEach((h) => {
+          Y.forEach((h) => {
             try {
               h.write(`data: ${JSON.stringify({
                 type: "components",
-                components: u
+                components: g
               })}
 
 `);
             } catch {
             }
           });
-        } catch (c) {
-          i.writeHead(400), i.end(JSON.stringify({ error: c.message }));
+        } catch (p) {
+          r.writeHead(400), r.end(JSON.stringify({ error: p.message }));
         }
       });
     } else if (a.method === "GET" && a.url === "/_list")
-      i.writeHead(200), i.end(JSON.stringify({ components: Array.from(T.entries()) }));
+      r.writeHead(200), r.end(JSON.stringify({ components: Array.from(I.entries()) }));
     else if (a.method === "POST" && a.url === "/_hmr_notify") {
-      let l = "";
-      a.on("data", (c) => l += c), a.on("end", () => {
+      let c = "";
+      a.on("data", (p) => c += p), a.on("end", () => {
         try {
-          const { componentId: c, html: u } = JSON.parse(l), h = X.get(c);
+          const { componentId: p, html: g } = JSON.parse(c), h = ee.get(p);
           if (h && h.size > 0) {
-            console.log(`🔥 Notifying ${h.size} HMR client(s) for: ${c}`);
-            const v = JSON.stringify({ type: "update", html: u }), R = Ue(v);
-            h.forEach((N) => {
+            console.log(`🔥 Notifying ${h.size} HMR client(s) for: ${p}`);
+            const $ = JSON.stringify({ type: "update", html: g }), O = Je($);
+            h.forEach((L) => {
               try {
-                N.write(R);
+                L.write(O);
               } catch {
-                h.delete(N);
+                h.delete(L);
               }
-            }), i.writeHead(200), i.end(JSON.stringify({ success: !0, notified: h.size }));
+            }), r.writeHead(200), r.end(JSON.stringify({ success: !0, notified: h.size }));
           } else
-            i.writeHead(200), i.end(JSON.stringify({ success: !0, notified: 0 }));
-        } catch (c) {
-          i.writeHead(400), i.end(JSON.stringify({ error: c.message }));
+            r.writeHead(200), r.end(JSON.stringify({ success: !0, notified: 0 }));
+        } catch (p) {
+          r.writeHead(400), r.end(JSON.stringify({ error: p.message }));
         }
       });
     } else
-      i.writeHead(404), i.end(JSON.stringify({ error: "Not found" }));
-  }), me = n.default.createServer((a, i) => {
+      r.writeHead(404), r.end(JSON.stringify({ error: "Not found" }));
+  }), ue = n.default.createServer((a, r) => {
     if (a.url.includes("..")) {
-      i.writeHead(403, { "Content-Type": "text/plain" }), i.end("Forbidden");
+      r.writeHead(403, { "Content-Type": "text/plain" }), r.end("Forbidden");
       return;
     }
-    const l = new URL(a.url, `http://localhost:${m}`), c = l.pathname, u = c.split("/").filter((A) => A);
-    if (c.startsWith("/consume")) {
-      const A = l.searchParams.get("id");
-      if (!A) {
-        i.writeHead(400, { "Content-Type": "application/json" }), i.end(JSON.stringify({ error: "Component ID required. Use /consume?id=<componentId>" }));
+    const c = new URL(a.url, `http://localhost:${m}`), p = c.pathname, g = p.split("/").filter((J) => J);
+    if (p.startsWith("/consume")) {
+      const J = c.searchParams.get("id");
+      if (!J) {
+        r.writeHead(400, { "Content-Type": "application/json" }), r.end(JSON.stringify({ error: "Component ID required. Use /consume?id=<componentId>" }));
         return;
       }
-      const B = T.get(A), z = B ? B.path : null, le = (ee) => {
-        let j = "Unknown", W = "Unknown";
+      const W = I.get(J), K = W ? W.path : null, ce = (oe) => {
+        let N = "Unknown", Q = "Unknown";
         if (a.headers.referer || a.headers.referrer) {
-          const k = a.headers.referer || a.headers.referrer;
+          const A = a.headers.referer || a.headers.referrer;
           try {
-            const ie = new URL(k);
-            j = ie.origin, W = ie.hostname || ie.origin;
+            const re = new URL(A);
+            N = re.origin, Q = re.hostname || re.origin;
           } catch {
-            j = k, W = k;
+            N = A, Q = A;
           }
         } else if (a.headers.origin)
           try {
-            const k = new URL(a.headers.origin);
-            j = k.origin, W = k.hostname || k.origin;
+            const A = new URL(a.headers.origin);
+            N = A.origin, Q = A.hostname || A.origin;
           } catch {
-            j = a.headers.origin, W = a.headers.origin;
+            N = a.headers.origin, Q = a.headers.origin;
           }
         else if (a.socket.remoteAddress) {
-          const k = a.socket.remoteAddress;
-          k === "::1" || k === "::ffff:127.0.0.1" ? (j = "localhost", W = "localhost (direct)") : (j = k, W = k.replace("::ffff:", ""));
+          const A = a.socket.remoteAddress;
+          A === "::1" || A === "::ffff:127.0.0.1" ? (N = "localhost", Q = "localhost (direct)") : (N = A, Q = A.replace("::ffff:", ""));
         }
-        const Te = a.headers.referer || a.headers.referrer || j, fe = {
+        const Ee = a.headers.referer || a.headers.referrer || N, he = {
           type: "request",
-          componentId: A,
+          componentId: J,
           timestamp: Date.now(),
-          servedLocally: ee,
-          referrer: Te,
-          origin: j,
-          originLabel: W
+          servedLocally: oe,
+          referrer: Ee,
+          origin: N,
+          originLabel: Q
         };
-        se.has(j) || (se.set(j, {
-          url: j,
-          label: W,
+        ie.has(N) || (ie.set(N, {
+          url: N,
+          label: Q,
           firstSeen: Date.now(),
           requestCount: 0
-        }), Z.forEach((k) => {
+        }), Y.forEach((A) => {
           try {
-            k.write(`data: ${JSON.stringify({
+            A.write(`data: ${JSON.stringify({
               type: "origins",
-              origins: Array.from(se.values())
+              origins: Array.from(ie.values())
             })}
 
 `);
           } catch {
           }
         }));
-        const Oe = se.get(j);
-        Oe.requestCount++, Z.forEach((k) => {
+        const Ie = ie.get(N);
+        Ie.requestCount++, Y.forEach((A) => {
           try {
-            k.write(`data: ${JSON.stringify({
+            A.write(`data: ${JSON.stringify({
               type: "origins",
-              origins: Array.from(se.values())
+              origins: Array.from(ie.values())
             })}
 
 `);
           } catch {
           }
-        }), Y.push(fe), Y.length > $e && Y.shift(), Z.forEach((k) => {
+        }), Z.push(he), Z.length > se && Z.shift(), Y.forEach((A) => {
           try {
-            k.write(`data: ${JSON.stringify(fe)}
+            A.write(`data: ${JSON.stringify(he)}
 
 `);
           } catch {
           }
         });
       };
-      if (z) {
-        const ee = B.htmlFile ? e.default.join(z, B.htmlFile) : e.default.join(z, "index.html");
-        o.default.readFile(ee, "utf-8", (j, W) => {
-          if (j) {
-            console.log(`❌ File not found: ${ee}`), i.writeHead(404, { "Content-Type": "application/json" }), i.end(JSON.stringify({ error: "index.html not found" }));
+      if (K) {
+        const oe = W.htmlFile ? e.default.join(K, W.htmlFile) : e.default.join(K, "index.html");
+        o.default.readFile(oe, "utf-8", (N, Q) => {
+          if (N) {
+            console.log(`❌ File not found: ${oe}`), r.writeHead(404, { "Content-Type": "application/json" }), r.end(JSON.stringify({ error: "index.html not found" }));
             return;
           }
-          const Te = Ce(W, A), fe = `dev-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, Oe = {
+          const Ee = Me(Q, J), he = `dev-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, Ie = {
             item: {
-              name: A,
-              id: A,
+              name: J,
+              id: J,
               consume_variant: [
                 {
-                  id: fe,
+                  id: he,
                   name: "dev version",
                   loader: {
                     type: "HTMLLoader",
                     shadowRootMode: "localFrame",
-                    HTML: Te
+                    HTML: Ee
                   }
                 }
               ]
             }
           };
-          console.log(`✅ Serving consume JSON for: ${A}`), le(!0), i.writeHead(200, {
+          console.log(`✅ Serving consume JSON for: ${J}`), ce(!0), r.writeHead(200, {
             "Content-Type": "application/json",
             "Access-Control-Allow-Origin": "*"
-          }), i.end(JSON.stringify(Oe, null, 2));
+          }), r.end(JSON.stringify(Ie, null, 2));
         });
       } else {
-        console.log(`📡 Proxying consume request to cloud.myop.dev for: ${A}`);
-        const ee = `https://cloud.myop.dev/consume${l.search}`;
-        le(!1), fetch(ee).then((j) => j.text()).then((j) => {
-          i.writeHead(200, {
+        console.log(`📡 Proxying consume request to cloud.myop.dev for: ${J}`);
+        const oe = `https://cloud.myop.dev/consume${c.search}`;
+        ce(!1), fetch(oe).then((N) => N.text()).then((N) => {
+          r.writeHead(200, {
             "Content-Type": "application/json",
             "Access-Control-Allow-Origin": "*"
-          }), i.end(j);
-        }).catch((j) => {
-          console.error(`❌ Proxy error: ${j.message}`), i.writeHead(502, { "Content-Type": "application/json" }), i.end(JSON.stringify({ error: "Failed to fetch from cloud.myop.dev" }));
+          }), r.end(N);
+        }).catch((N) => {
+          console.error(`❌ Proxy error: ${N.message}`), r.writeHead(502, { "Content-Type": "application/json" }), r.end(JSON.stringify({ error: "Failed to fetch from cloud.myop.dev" }));
         });
       }
       return;
     }
-    if (c === "/events") {
-      i.writeHead(200, {
+    if (p === "/events") {
+      r.writeHead(200, {
         "Content-Type": "text/event-stream",
         "Cache-Control": "no-cache",
         Connection: "keep-alive",
         "Access-Control-Allow-Origin": "*"
-      }), Z.push(i);
-      const A = Array.from(T.entries()).map(([B, z]) => ({
-        id: B,
-        path: z.path,
-        name: z.name
+      }), Y.push(r);
+      const J = Array.from(I.entries()).map(([W, K]) => ({
+        id: W,
+        path: K.path,
+        name: K.name
       }));
-      i.write(`data: ${JSON.stringify({
+      r.write(`data: ${JSON.stringify({
         type: "components",
-        components: A
+        components: J
       })}
 
-`), i.write(`data: ${JSON.stringify({
+`), r.write(`data: ${JSON.stringify({
         type: "origins",
-        origins: Array.from(se.values())
+        origins: Array.from(ie.values())
       })}
 
-`), i.write(`data: ${JSON.stringify({
+`), r.write(`data: ${JSON.stringify({
         type: "requestLog",
-        log: Y
+        log: Z
       })}
 
 `), a.on("close", () => {
-        const B = Z.indexOf(i);
-        B !== -1 && Z.splice(B, 1);
+        const W = Y.indexOf(r);
+        W !== -1 && Y.splice(W, 1);
       });
       return;
     }
-    if (u.length === 0) {
-      i.writeHead(200, { "Content-Type": "text/html" }), i.end(Pt(m, p, w, $));
+    if (g.length === 0) {
+      r.writeHead(200, { "Content-Type": "text/html" }), r.end(It(m, d, w, v));
       return;
     }
-    if (u[0] !== "view") {
-      i.writeHead(404, { "Content-Type": "text/plain" }), i.end("Not found. Use /view/<componentId>/ to access components.");
+    if (g[0] !== "view") {
+      r.writeHead(404, { "Content-Type": "text/plain" }), r.end("Not found. Use /view/<componentId>/ to access components.");
       return;
     }
-    if (u.length < 2) {
-      i.writeHead(400, { "Content-Type": "text/plain" }), i.end("Component ID required. Use /view/<componentId>/");
+    if (g.length < 2) {
+      r.writeHead(400, { "Content-Type": "text/plain" }), r.end("Component ID required. Use /view/<componentId>/");
       return;
     }
-    const h = u[1], v = T.get(h);
-    if (!v) {
-      i.writeHead(404, { "Content-Type": "text/plain" }), i.end(`Component not found: ${h}`);
+    const h = g[1], $ = I.get(h);
+    if (!$) {
+      r.writeHead(404, { "Content-Type": "text/plain" }), r.end(`Component not found: ${h}`);
       return;
     }
-    const R = v.path, N = u.slice(2), J = v.htmlFile || "index.html", q = N.length === 0 ? J : N.join("/"), ae = e.default.join(R, q);
-    console.log(`📥 Request: ${a.url} -> ${ae}`), o.default.readFile(ae, (A, B) => {
-      if (A) {
-        console.log(`❌ File not found: ${ae}`), i.writeHead(404, { "Content-Type": "text/plain" }), i.end("Not Found");
+    const O = $.path, L = g.slice(2), V = $.htmlFile || "index.html", te = L.length === 0 ? V : L.join("/"), le = e.default.join(O, te);
+    console.log(`📥 Request: ${a.url} -> ${le}`), o.default.readFile(le, (J, W) => {
+      if (J) {
+        console.log(`❌ File not found: ${le}`), r.writeHead(404, { "Content-Type": "text/plain" }), r.end("Not Found");
         return;
       }
-      const z = G(ae);
-      console.log(`✅ Serving: ${ae} (${z})`);
-      let le = B;
-      if (z === "text/html" && _) {
-        const ee = B.toString("utf-8");
-        le = Ce(ee, h);
+      const K = z(le);
+      console.log(`✅ Serving: ${le} (${K})`);
+      let ce = W;
+      if (K === "text/html" && _) {
+        const oe = W.toString("utf-8");
+        ce = Me(oe, h);
       }
-      i.writeHead(200, {
-        "Content-Type": z,
+      r.writeHead(200, {
+        "Content-Type": K,
         "Access-Control-Allow-Origin": "*"
-      }), i.end(le);
+      }), r.end(ce);
     });
-  }), De = () => new Promise((a, i) => {
-    const l = x ? e.default.resolve(F) : e.default.resolve(F, S), c = JSON.stringify({
-      componentId: M,
-      distPath: l,
-      componentName: I,
-      htmlFile: x ? C : null
-    }), u = {
+  }), Ue = () => new Promise((a, r) => {
+    const c = M ? e.default.resolve(k) : e.default.resolve(k, C), p = JSON.stringify({
+      componentId: f,
+      distPath: c,
+      componentName: E,
+      htmlFile: M ? T : null
+    }), g = {
       hostname: "localhost",
-      port: p,
+      port: d,
       path: "/_register",
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Content-Length": Buffer.byteLength(c)
+        "Content-Length": Buffer.byteLength(p)
       }
-    }, h = n.default.request(u, (v) => {
-      let R = "";
-      v.on("data", (N) => R += N), v.on("end", () => {
-        v.statusCode === 200 ? a(JSON.parse(R)) : i(new Error(`Registration failed: ${v.statusCode}`));
+    }, h = n.default.request(g, ($) => {
+      let O = "";
+      $.on("data", (L) => O += L), $.on("end", () => {
+        $.statusCode === 200 ? a(JSON.parse(O)) : r(new Error(`Registration failed: ${$.statusCode}`));
       });
     });
-    h.on("error", i), h.write(c), h.end();
-  }), it = () => new Promise((a, i) => {
-    const l = JSON.stringify({ componentId: M }), c = {
+    h.on("error", r), h.write(p), h.end();
+  }), ct = () => new Promise((a, r) => {
+    const c = JSON.stringify({ componentId: f }), p = {
       hostname: "localhost",
-      port: p,
+      port: d,
       path: "/_unregister",
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Content-Length": Buffer.byteLength(l)
+        "Content-Length": Buffer.byteLength(c)
       }
-    }, u = n.default.request(c, (h) => {
+    }, g = n.default.request(p, (h) => {
       a();
     });
-    u.on("error", () => a()), u.write(l), u.end();
-  }), rt = (a) => `
+    g.on("error", () => a()), g.write(c), g.end();
+  }), dt = (a) => `
 <!-- MYOP HMR -->
 <script>
 (function() {
     const componentId = '${a}';
-    const wsUrl = 'ws://localhost:${p}/_hmr/' + componentId;
+    const wsUrl = 'ws://localhost:${d}/_hmr/' + componentId;
     let ws;
     let reconnectAttempts = 0;
     const maxReconnectAttempts = 10;
@@ -789,251 +789,251 @@ Sec-WebSocket-Accept: ${h}\r
     connect();
 })();
 <\/script>
-`, Ce = (a, i) => {
+`, Me = (a, r) => {
     if (!_) return a;
-    const l = rt(i);
-    return a.includes("</body>") ? a.replace("</body>", `${l}</body>`) : a.includes("</html>") ? a.replace("</html>", `${l}</html>`) : a + l;
-  }, Ue = (a) => {
-    const i = Buffer.from(a), l = i.length;
-    let c;
-    return l < 126 ? c = Buffer.concat([
-      Buffer.from([129, l]),
+    const c = dt(r);
+    return a.includes("</body>") ? a.replace("</body>", `${c}</body>`) : a.includes("</html>") ? a.replace("</html>", `${c}</html>`) : a + c;
+  }, Je = (a) => {
+    const r = Buffer.from(a), c = r.length;
+    let p;
+    return c < 126 ? p = Buffer.concat([
+      Buffer.from([129, c]),
       // FIN + text frame, length
-      i
-    ]) : l < 65536 ? c = Buffer.concat([
+      r
+    ]) : c < 65536 ? p = Buffer.concat([
       Buffer.from([129, 126]),
       // FIN + text frame, extended length
-      Buffer.from([l >> 8, l & 255]),
+      Buffer.from([c >> 8, c & 255]),
       // 16-bit length
-      i
-    ]) : c = Buffer.concat([
+      r
+    ]) : p = Buffer.concat([
       Buffer.from([129, 127]),
       // FIN + text frame, extended length
-      Buffer.from([0, 0, 0, 0, l >> 24, l >> 16 & 255, l >> 8 & 255, l & 255]),
+      Buffer.from([0, 0, 0, 0, c >> 24, c >> 16 & 255, c >> 8 & 255, c & 255]),
       // 64-bit length
-      i
-    ]), c;
+      r
+    ]), p;
   }, Be = () => {
     if (!_) return;
-    const a = x ? C : e.default.join(S, "index.html");
-    let i;
+    const a = M ? T : e.default.join(C, "index.html");
+    let r;
     try {
-      const l = o.default.readFileSync(a, "utf-8");
-      i = Ce(l, M);
-    } catch (l) {
-      console.error("❌ Failed to read HTML for HMR:", l.message);
+      const c = o.default.readFileSync(a, "utf-8");
+      r = Me(c, f);
+    } catch (c) {
+      console.error("❌ Failed to read HTML for HMR:", c.message);
       return;
     }
     if (Re) {
-      const l = X.get(M);
-      if (!l || l.size === 0)
+      const c = ee.get(f);
+      if (!c || c.size === 0)
         return;
-      console.log(`🔥 Notifying ${l.size} HMR client(s)`);
-      const c = JSON.stringify({
+      console.log(`🔥 Notifying ${c.size} HMR client(s)`);
+      const p = JSON.stringify({
         type: "update",
-        html: i
-      }), u = Ue(c);
-      l.forEach((h) => {
+        html: r
+      }), g = Je(p);
+      c.forEach((h) => {
         try {
-          h.write(u);
+          h.write(g);
         } catch {
-          l.delete(h);
+          c.delete(h);
         }
       });
     } else {
-      const l = JSON.stringify({
-        componentId: M,
-        html: i
-      }), c = {
+      const c = JSON.stringify({
+        componentId: f,
+        html: r
+      }), p = {
         hostname: "localhost",
-        port: p,
+        port: d,
         path: "/_hmr_notify",
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Content-Length": Buffer.byteLength(l)
+          "Content-Length": Buffer.byteLength(c)
         },
         timeout: 5e3
-      }, u = n.default.request(c, (h) => {
-        let v = "";
-        h.on("data", (R) => v += R), h.on("end", () => {
+      }, g = n.default.request(p, (h) => {
+        let $ = "";
+        h.on("data", (O) => $ += O), h.on("end", () => {
           try {
-            const R = JSON.parse(v);
-            R.notified > 0 && console.log(`🔥 Notified ${R.notified} HMR client(s) via server`);
+            const O = JSON.parse($);
+            O.notified > 0 && console.log(`🔥 Notified ${O.notified} HMR client(s) via server`);
           } catch {
           }
         });
       });
-      u.on("error", () => {
-      }), u.on("timeout", () => {
-        u.destroy();
-      }), u.write(l), u.end();
+      g.on("error", () => {
+      }), g.on("timeout", () => {
+        g.destroy();
+      }), g.write(c), g.end();
     }
   };
-  let Me = { hasTriedPlatformFix: !1, hasTriedInstall: !1 };
-  const ue = (a) => {
-    if (g) {
-      b = !0;
+  let Pe = { hasTriedPlatformFix: !1, hasTriedInstall: !1 };
+  const ge = (a) => {
+    if (u) {
+      S = !0;
       return;
     }
-    g = !0, console.log(`
-🔨 Building...`), t("npm run build", { maxBuffer: 10 * 1024 * 1024 }, async (i, l, c) => {
-      if (g = !1, i) {
-        const u = await qe(i, l, c, t, {
-          ...Me,
-          onRetry: () => ue(a)
+    u = !0, console.log(`
+🔨 Building...`), t("npm run build", { maxBuffer: 10 * 1024 * 1024 }, async (r, c, p) => {
+      if (u = !1, r) {
+        const g = await et(r, c, p, t, {
+          ...Pe,
+          onRetry: () => ge(a)
         });
-        Me = { ...Me, ...u }, u.handled || (console.error("❌ Build failed:", i.message), c && console.error(c));
+        Pe = { ...Pe, ...g }, g.handled || (console.error("❌ Build failed:", r.message), p && console.error(p));
       } else
-        console.log("✅ Build completed"), l && console.log(l), Be(), a && a();
-      b && (b = !1, ue());
+        console.log("✅ Build completed"), c && console.log(c), Be(), a && a();
+      S && (S = !1, ge());
     });
-  }, Je = /* @__PURE__ */ new Set(), Pe = (a) => {
-    o.default.readdir(a, { withFileTypes: !0 }, (i, l) => {
-      i || (l.forEach((c) => {
-        const u = e.default.join(a, c.name);
-        if (c.isDirectory())
-          c.name !== "node_modules" && c.name !== "dist" && !c.name.startsWith(".") && Pe(u);
-        else if (c.isFile()) {
-          const h = e.default.extname(c.name);
+  }, ze = /* @__PURE__ */ new Set(), Te = (a) => {
+    o.default.readdir(a, { withFileTypes: !0 }, (r, c) => {
+      r || (c.forEach((p) => {
+        const g = e.default.join(a, p.name);
+        if (p.isDirectory())
+          p.name !== "node_modules" && p.name !== "dist" && !p.name.startsWith(".") && Te(g);
+        else if (p.isFile()) {
+          const h = e.default.extname(p.name);
           if (h === ".js" || h === ".css" || h === ".html")
             try {
-              const v = o.default.readFileSync(u, "utf-8");
-              P.set(u, v);
+              const $ = o.default.readFileSync(g, "utf-8");
+              j.set(g, $);
             } catch {
             }
         }
-      }), Je.has(a) || (Je.add(a), o.default.watch(a, (c, u) => {
-        if (!u) return;
-        const h = e.default.extname(u);
+      }), ze.has(a) || (ze.add(a), o.default.watch(a, (p, g) => {
+        if (!g) return;
+        const h = e.default.extname(g);
         if (h !== ".js" && h !== ".css" && h !== ".html") return;
-        const v = e.default.join(a, u);
+        const $ = e.default.join(a, g);
         setTimeout(() => {
           try {
-            const R = o.default.readFileSync(v, "utf-8"), N = P.get(v);
-            R !== N && (P.set(v, R), console.log(`📝 File changed: ${v}`), x ? Be() : ue());
+            const O = o.default.readFileSync($, "utf-8"), L = j.get($);
+            O !== L && (j.set($, O), console.log(`📝 File changed: ${$}`), M ? Be() : ge());
           } catch {
           }
         }, 50);
       })));
     });
-  }, ze = (a) => {
+  }, We = (a) => {
     console.log(`
-🔨 Component: ${M}`), x ? (console.log("📄 No build needed (single HTML file mode)"), Pe(F), console.log(`👀 Watching ${C} for changes...`), console.log(`Press Ctrl+C to stop
-`), a && a()) : (ue(a), Pe(F), console.log("👀 Watching .js, .css, and .html files for changes..."), console.log(`Press Ctrl+C to stop
+🔨 Component: ${f}`), M ? (console.log("📄 No build needed (single HTML file mode)"), Te(k), console.log(`👀 Watching ${T} for changes...`), console.log(`Press Ctrl+C to stop
+`), a && a()) : (ge(a), Te(k), console.log("👀 Watching .js, .css, and .html files for changes..."), console.log(`Press Ctrl+C to stop
 `));
-  }, at = () => new Promise((a) => {
-    const i = {
+  }, pt = () => new Promise((a) => {
+    const r = {
       hostname: "localhost",
-      port: p,
+      port: d,
       path: "/_list",
       method: "GET",
       timeout: 1e3
-    }, l = n.default.request(i, (c) => {
+    }, c = n.default.request(r, (p) => {
       a(!0);
     });
-    l.on("error", () => a(!1)), l.on("timeout", () => {
-      l.destroy(), a(!1);
-    }), l.end();
-  }), lt = () => new Promise((a) => {
-    const i = n.default.createServer((l, c) => {
-      if (c.setHeader("Content-Type", "application/json"), l.method === "POST" && l.url === "/_register") {
-        let u = "";
-        l.on("data", (h) => u += h), l.on("end", () => {
+    c.on("error", () => a(!1)), c.on("timeout", () => {
+      c.destroy(), a(!1);
+    }), c.end();
+  }), mt = () => new Promise((a) => {
+    const r = n.default.createServer((c, p) => {
+      if (p.setHeader("Content-Type", "application/json"), c.method === "POST" && c.url === "/_register") {
+        let g = "";
+        c.on("data", (h) => g += h), c.on("end", () => {
           try {
-            const { componentId: h, distPath: v, componentName: R, htmlFile: N } = JSON.parse(u);
-            T.set(h, { path: v, name: R || null, htmlFile: N || null });
-            const J = R ? ` (${R})` : "";
-            console.log(`✅ Registered: ${h}${J} -> ${v}${N ? "/" + N : ""}`), c.writeHead(200), c.end(JSON.stringify({ success: !0, registered: Array.from(T.keys()) }));
+            const { componentId: h, distPath: $, componentName: O, htmlFile: L } = JSON.parse(g);
+            I.set(h, { path: $, name: O || null, htmlFile: L || null });
+            const V = O ? ` (${O})` : "";
+            console.log(`✅ Registered: ${h}${V} -> ${$}${L ? "/" + L : ""}`), p.writeHead(200), p.end(JSON.stringify({ success: !0, registered: Array.from(I.keys()) }));
           } catch (h) {
-            c.writeHead(400), c.end(JSON.stringify({ error: h.message }));
+            p.writeHead(400), p.end(JSON.stringify({ error: h.message }));
           }
         });
-      } else if (l.method === "POST" && l.url === "/_unregister") {
-        let u = "";
-        l.on("data", (h) => u += h), l.on("end", () => {
+      } else if (c.method === "POST" && c.url === "/_unregister") {
+        let g = "";
+        c.on("data", (h) => g += h), c.on("end", () => {
           try {
-            const { componentId: h } = JSON.parse(u);
-            T.delete(h), console.log(`❌ Unregistered: ${h}`), c.writeHead(200), c.end(JSON.stringify({ success: !0 }));
+            const { componentId: h } = JSON.parse(g);
+            I.delete(h), console.log(`❌ Unregistered: ${h}`), p.writeHead(200), p.end(JSON.stringify({ success: !0 }));
           } catch (h) {
-            c.writeHead(400), c.end(JSON.stringify({ error: h.message }));
+            p.writeHead(400), p.end(JSON.stringify({ error: h.message }));
           }
         });
-      } else l.method === "GET" && l.url === "/_list" ? (c.writeHead(200), c.end(JSON.stringify({ components: Array.from(T.entries()) }))) : (c.writeHead(404), c.end(JSON.stringify({ error: "Not found" })));
+      } else c.method === "GET" && c.url === "/_list" ? (p.writeHead(200), p.end(JSON.stringify({ components: Array.from(I.entries()) }))) : (p.writeHead(404), p.end(JSON.stringify({ error: "Not found" })));
     });
-    i.on("error", () => {
+    r.on("error", () => {
       a(!1);
-    }), i.listen(p, () => {
+    }), r.listen(d, () => {
       console.log(`
-🔄 Taking over as server...`), console.log(`📡 Management server on port ${p}`), me.on("error", () => {
-        i.close(), a(!1);
-      }), me.listen(m, () => {
+🔄 Taking over as server...`), console.log(`📡 Management server on port ${d}`), ue.on("error", () => {
+        r.close(), a(!1);
+      }), ue.listen(m, () => {
         console.log(`📡 Main server running at http://localhost:${m}`);
-        const l = x ? e.default.resolve(F) : e.default.resolve(F, S);
-        T.set(M, {
-          path: l,
-          name: I,
-          htmlFile: x ? C : null
+        const c = M ? e.default.resolve(k) : e.default.resolve(k, C);
+        I.set(f, {
+          path: c,
+          name: E,
+          htmlFile: M ? T : null
         });
-        const c = I ? ` (${I})` : "";
-        console.log(`✅ Registered component: ${M}${c}`), console.log(`📡 Access at: http://localhost:${m}/view/${M}/`), a(!0);
+        const p = E ? ` (${E})` : "";
+        console.log(`✅ Registered component: ${f}${p}`), console.log(`📡 Access at: http://localhost:${m}/view/${f}/`), a(!0);
       });
     });
   });
-  let ge;
-  const We = () => {
-    ge = setInterval(async () => {
-      await at() || (clearInterval(ge), console.log(`
-⚠️  Server appears to be down, attempting to take over...`), await lt() ? (console.log("✅ Successfully took over as server"), Re = !0) : (console.log("ℹ️  Another instance took over, re-registering..."), setTimeout(async () => {
+  let fe;
+  const Ve = () => {
+    fe = setInterval(async () => {
+      await pt() || (clearInterval(fe), console.log(`
+⚠️  Server appears to be down, attempting to take over...`), await mt() ? (console.log("✅ Successfully took over as server"), Re = !0) : (console.log("ℹ️  Another instance took over, re-registering..."), setTimeout(async () => {
         try {
-          await De(), console.log(`✅ Re-registered component: ${M}`), We();
-        } catch (l) {
-          console.error("❌ Failed to re-register:", l.message);
+          await Ue(), console.log(`✅ Re-registered component: ${f}`), Ve();
+        } catch (c) {
+          console.error("❌ Failed to re-register:", c.message);
         }
       }, 2e3)));
     }, 3e3);
-  }, Ve = async () => {
+  }, Ge = async () => {
     console.log(`
 
-🛑 Shutting down...`), ge && clearInterval(ge), await it(), process.exit(0);
+🛑 Shutting down...`), fe && clearInterval(fe), await ct(), process.exit(0);
   };
-  process.on("SIGINT", Ve), process.on("SIGTERM", Ve);
+  process.on("SIGINT", Ge), process.on("SIGTERM", Ge);
   let Re = !1;
-  xe.on("error", async (a) => {
+  Ce.on("error", async (a) => {
     if (a.code === "EADDRINUSE") {
       console.log(`
 🔗 Connecting to existing dev server...`);
       try {
-        M = await U();
-        const i = await De();
-        console.log(`✅ Registered component: ${M}`), console.log(`📡 Access at: http://localhost:${m}/view/${M}/`), console.log(`📋 All registered components: ${i.registered.join(", ")}`), ze(() => {
-          process.env.MYOP_NO_BROWSER || f(`http://localhost:${m}/view/${M}/`);
-        }), We();
-      } catch (i) {
-        console.error("❌ Failed to register component:", i.message), process.exit(1);
+        f = await U();
+        const r = await Ue();
+        console.log(`✅ Registered component: ${f}`), console.log(`📡 Access at: http://localhost:${m}/view/${f}/`), console.log(`📋 All registered components: ${r.registered.join(", ")}`), We(() => {
+          process.env.MYOP_NO_BROWSER || x(`http://localhost:${m}/view/${f}/`);
+        }), Ve();
+      } catch (r) {
+        console.error("❌ Failed to register component:", r.message), process.exit(1);
       }
     } else
       console.error("❌ Management server error:", a.message), process.exit(1);
-  }), xe.on("upgrade", st), xe.listen(p, async () => {
+  }), Ce.on("upgrade", lt), Ce.listen(d, async () => {
     Re = !0, console.log(`
-🚀 Starting shared dev server...`), console.log(`📡 Management server on port ${p}`), me.on("error", (a) => {
+🚀 Starting shared dev server...`), console.log(`📡 Management server on port ${d}`), ue.on("error", (a) => {
       console.error("❌ Main server error:", a.message), process.exit(1);
-    }), me.listen(m, async () => {
-      console.log(`📡 Main server running at http://localhost:${m}`), (M === "DEV" || M === "NEW") && (M = "DEV1");
-      const a = x ? e.default.resolve(F) : e.default.resolve(F, S);
-      T.set(M, {
+    }), ue.listen(m, async () => {
+      console.log(`📡 Main server running at http://localhost:${m}`), (f === "DEV" || f === "NEW") && (f = "DEV1");
+      const a = M ? e.default.resolve(k) : e.default.resolve(k, C);
+      I.set(f, {
         path: a,
-        name: I,
-        htmlFile: x ? C : null
+        name: E,
+        htmlFile: M ? T : null
       });
-      const i = I ? ` (${I})` : "";
-      console.log(`✅ Registered component: ${M}${i}`), console.log(`📡 Access at: http://localhost:${m}/view/${M}/`), ze(() => {
-        process.env.MYOP_NO_BROWSER || f(`http://localhost:${m}/view/${M}/`);
+      const r = E ? ` (${E})` : "";
+      console.log(`✅ Registered component: ${f}${r}`), console.log(`📡 Access at: http://localhost:${m}/view/${f}/`), We(() => {
+        process.env.MYOP_NO_BROWSER || x(`http://localhost:${m}/view/${f}/`);
       });
     });
   });
 }
-const O = class O {
+const F = class F {
   constructor(e) {
     this.components = e.map(
       (t) => typeof t == "string" ? { name: t, path: "", id: "" } : t
@@ -1042,7 +1042,7 @@ const O = class O {
       this.logs.set(t.name, []), this.scrollPos.set(t.name, 0), this.statuses.set(t.name, "Initializing..."), this.statusKeys.set(t.name, "initializing");
     this.cols = process.stdout.columns || 120, this.rows = process.stdout.rows || 30, process.stdout.on("resize", () => {
       this.cols = process.stdout.columns || 120, this.rows = process.stdout.rows || 30, this.needsFullRedraw = !0, this.calculateLayout(), this.render();
-    }), this.setupKeyboardInput(), process.stdout.write(O.ESC.hideCursor), this.calculateLayout(), this.render(), this.uptimeInterval = setInterval(() => this.updateHeader(), 1e3);
+    }), this.setupKeyboardInput(), process.stdout.write(F.ESC.hideCursor), this.calculateLayout(), this.render(), this.uptimeInterval = setInterval(() => this.updateHeader(), 1e3);
   }
   setupKeyboardInput() {
     process.stdin.isTTY && (process.stdin.setRawMode(!0), process.stdin.resume(), process.stdin.setEncoding("utf8"), process.stdin.on("data", (e) => {
@@ -1073,8 +1073,8 @@ const O = class O {
             this.scrollPos.set(t, 0), this.queueUpdate(t);
             break;
           case "G":
-            const r = this.logs.get(t) || [];
-            this.scrollPos.set(t, Math.max(0, r.length - this.visibleLogLines)), this.queueUpdate(t);
+            const i = this.logs.get(t) || [];
+            this.scrollPos.set(t, Math.max(0, i.length - this.visibleLogLines)), this.queueUpdate(t);
             break;
         }
     }));
@@ -1083,35 +1083,35 @@ const O = class O {
     const e = this.components.length, t = 38;
     let n;
     this.cols >= t * 3 + 4 ? n = Math.min(e, 3) : this.cols >= t * 2 + 2 ? n = Math.min(e, 2) : n = 1;
-    const r = Math.ceil(e / n), s = Math.floor(this.cols / n), d = 2, $ = this.rows - d - 2, m = Math.floor($ / r);
-    this.visibleLogLines = Math.max(2, m - 4), this.layout = { panelsPerRow: n, panelWidth: s, numRows: r, panelHeight: m }, this.panelPositions.clear();
-    for (let p = 0; p < e; p++) {
-      const S = this.components[p], g = Math.floor(p / n), b = p % n;
-      this.panelPositions.set(S.name, {
-        row: d + 1 + g * m,
-        col: b * s + 1,
+    const i = Math.ceil(e / n), s = Math.floor(this.cols / n), l = 2, v = this.rows - l - 2, m = Math.floor(v / i);
+    this.visibleLogLines = Math.max(2, m - 4), this.layout = { panelsPerRow: n, panelWidth: s, numRows: i, panelHeight: m }, this.panelPositions.clear();
+    for (let d = 0; d < e; d++) {
+      const C = this.components[d], u = Math.floor(d / n), S = d % n;
+      this.panelPositions.set(C.name, {
+        row: l + 1 + u * m,
+        col: S * s + 1,
         width: s,
         height: m
       });
     }
   }
   log(e, t, n = "info") {
-    const r = this.logs.get(e) || [], s = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+    const i = this.logs.get(e) || [], s = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
       hour12: !1,
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit"
     });
-    t.includes("✅") || t.includes("completed") ? n = "success" : t.includes("❌") || t.includes("failed") ? n = "error" : t.includes("⚠") ? n = "warning" : t.includes("🔥") || t.includes("HMR") ? n = "hmr" : (t.includes("📝") || t.includes("changed")) && (n = "change"), r.push({ timestamp: s, message: t.replace(/[✅❌⚠🔥📝🔨]/g, "").trim(), type: n }), this.logs.set(e, r), r.length > this.visibleLogLines && this.scrollPos.set(e, r.length - this.visibleLogLines), this.queueUpdate(e);
+    t.includes("✅") || t.includes("completed") ? n = "success" : t.includes("❌") || t.includes("failed") ? n = "error" : t.includes("⚠") ? n = "warning" : t.includes("🔥") || t.includes("HMR") ? n = "hmr" : (t.includes("📝") || t.includes("changed")) && (n = "change"), i.push({ timestamp: s, message: t.replace(/[✅❌⚠🔥📝🔨]/g, "").trim(), type: n }), this.logs.set(e, i), i.length > this.visibleLogLines && this.scrollPos.set(e, i.length - this.visibleLogLines), this.queueUpdate(e);
   }
   setStatus(e, t) {
     let n = "ready";
-    const r = t.toLowerCase();
-    r.includes("initializing") || r.includes("⏳") ? n = "initializing" : r.includes("starting") ? n = "starting" : r.includes("building") || r.includes("🔨") ? n = "building" : r.includes("ready") || r.includes("✅") ? n = "ready" : r.includes("changed") || r.includes("📝") ? n = "changed" : r.includes("hmr") ? n = "hmr_update" : r.includes("🔥") ? n = "hmr" : r.includes("error") || r.includes("❌") ? n = "error" : r.includes("warning") || r.includes("⚠") ? n = "warning" : (r.includes("stopped") || r.includes("exited")) && (n = "stopped"), this.statuses.set(e, t), this.statusKeys.set(e, n), this.queueUpdate(e);
+    const i = t.toLowerCase();
+    i.includes("initializing") || i.includes("⏳") ? n = "initializing" : i.includes("starting") ? n = "starting" : i.includes("building") || i.includes("🔨") ? n = "building" : i.includes("ready") || i.includes("✅") ? n = "ready" : i.includes("changed") || i.includes("📝") ? n = "changed" : i.includes("hmr") ? n = "hmr_update" : i.includes("🔥") ? n = "hmr" : i.includes("error") || i.includes("❌") ? n = "error" : i.includes("warning") || i.includes("⚠") ? n = "warning" : (i.includes("stopped") || i.includes("exited")) && (n = "stopped"), this.statuses.set(e, t), this.statusKeys.set(e, n), this.queueUpdate(e);
   }
   scroll(e, t) {
-    const n = this.logs.get(e) || [], r = this.scrollPos.get(e) || 0, s = Math.max(0, n.length - this.visibleLogLines), d = Math.max(0, Math.min(s, r + t));
-    d !== r && (this.scrollPos.set(e, d), this.queueUpdate(e));
+    const n = this.logs.get(e) || [], i = this.scrollPos.get(e) || 0, s = Math.max(0, n.length - this.visibleLogLines), l = Math.max(0, Math.min(s, i + t));
+    l !== i && (this.scrollPos.set(e, l), this.queueUpdate(e));
   }
   queueUpdate(e) {
     this.pendingUpdates.add(e), this.renderQueued || (this.renderQueued = !0, setImmediate(() => {
@@ -1132,71 +1132,71 @@ const O = class O {
     return `${t}:${n.toString().padStart(2, "0")}`;
   }
   updateHeader() {
-    const e = O.C, t = Array.from(this.statusKeys.values()).filter((s) => s === "ready").length, n = this.components.length;
-    let r = `${e.dim}📡${e.reset} http://localhost:9292  ${e.gray}|${e.reset}  `;
-    r += `${e.green}${t}${e.reset}/${n} ready  ${e.gray}|${e.reset}  `, r += `⏱ ${this.getUptime()}  ${e.gray}|${e.reset}  `, r += `Press ${e.yellow}Ctrl+C${e.reset} to stop`, r += O.ESC.clearLine.slice(0, -1), process.stdout.write(O.ESC.moveTo(2, 1) + r);
+    const e = F.C, t = Array.from(this.statusKeys.values()).filter((s) => s === "ready").length, n = this.components.length;
+    let i = `${e.dim}📡${e.reset} http://localhost:9292  ${e.gray}|${e.reset}  `;
+    i += `${e.green}${t}${e.reset}/${n} ready  ${e.gray}|${e.reset}  `, i += `⏱ ${this.getUptime()}  ${e.gray}|${e.reset}  `, i += `Press ${e.yellow}Ctrl+C${e.reset} to stop`, i += F.ESC.clearLine.slice(0, -1), process.stdout.write(F.ESC.moveTo(2, 1) + i);
   }
   renderPanel(e) {
-    const t = O.C, n = O.STATUS, r = this.panelPositions.get(e);
-    if (!r) return;
-    const s = this.components.findIndex((U) => U.name === e), d = this.components[s], w = s === this.selectedPanel, $ = this.statusKeys.get(e) || "initializing", m = n[$], p = t[m.color], S = this.logs.get(e) || [], g = this.scrollPos.get(e) || 0, b = r.width - 1, x = w ? t.cyan : t.gray, C = [], L = d.name.substring(0, b - 20);
-    let H = `${x}┌─${t.reset} ${p}${m.icon}${t.reset} `;
-    H += `${t.bold}${L}${t.reset} ${t.gray}─${t.reset} ${p}${m.label}${t.reset} `;
-    const f = 5 + L.length + m.label.length + 3;
-    H += `${x}${"─".repeat(Math.max(0, b - f))}┐${t.reset}`, C.push(O.ESC.moveTo(r.row, r.col) + H);
-    const P = (d.path || "").substring(0, b - 6);
-    let E = `${x}│${t.reset} ${t.dim}${P}${t.reset}`;
-    E += " ".repeat(Math.max(0, b - P.length - 3)), E += `${x}│${t.reset}`, C.push(O.ESC.moveTo(r.row + 1, r.col) + E);
-    const M = S.length, I = M > this.visibleLogLines ? `${g + 1}-${Math.min(g + this.visibleLogLines, M)}/${M}` : "";
-    let _ = `${x}├${"─".repeat(b - I.length - 4)}${t.reset}`;
-    I && (_ += `${t.dim}${I}${t.reset}`), _ += `${x}${"─".repeat(2)}┤${t.reset}`, C.push(O.ESC.moveTo(r.row + 2, r.col) + _);
-    const te = S.slice(g, g + this.visibleLogLines);
+    const t = F.C, n = F.STATUS, i = this.panelPositions.get(e);
+    if (!i) return;
+    const s = this.components.findIndex((U) => U.name === e), l = this.components[s], w = s === this.selectedPanel, v = this.statusKeys.get(e) || "initializing", m = n[v], d = t[m.color], C = this.logs.get(e) || [], u = this.scrollPos.get(e) || 0, S = i.width - 1, M = w ? t.cyan : t.gray, T = [], D = l.name.substring(0, S - 20);
+    let P = `${M}┌─${t.reset} ${d}${m.icon}${t.reset} `;
+    P += `${t.bold}${D}${t.reset} ${t.gray}─${t.reset} ${d}${m.label}${t.reset} `;
+    const x = 5 + D.length + m.label.length + 3;
+    P += `${M}${"─".repeat(Math.max(0, S - x))}┐${t.reset}`, T.push(F.ESC.moveTo(i.row, i.col) + P);
+    const j = (l.path || "").substring(0, S - 6);
+    let b = `${M}│${t.reset} ${t.dim}${j}${t.reset}`;
+    b += " ".repeat(Math.max(0, S - j.length - 3)), b += `${M}│${t.reset}`, T.push(F.ESC.moveTo(i.row + 1, i.col) + b);
+    const f = C.length, E = f > this.visibleLogLines ? `${u + 1}-${Math.min(u + this.visibleLogLines, f)}/${f}` : "";
+    let _ = `${M}├${"─".repeat(S - E.length - 4)}${t.reset}`;
+    E && (_ += `${t.dim}${E}${t.reset}`), _ += `${M}${"─".repeat(2)}┤${t.reset}`, T.push(F.ESC.moveTo(i.row + 2, i.col) + _);
+    const B = C.slice(u, u + this.visibleLogLines);
     for (let U = 0; U < this.visibleLogLines; U++) {
-      const F = te[U];
-      let G = `${x}│${t.reset}`;
-      if (F) {
-        let T = t.white;
-        F.type === "success" ? T = t.green : F.type === "error" ? T = t.red : F.type === "warning" ? T = t.yellow : F.type === "hmr" ? T = t.magenta : F.type === "change" && (T = t.blue);
-        const Y = F.message.substring(0, b - 12);
-        G += `${t.dim}${F.timestamp}${t.reset} ${T}${Y}${t.reset}`;
-        const $e = b - F.timestamp.length - Y.length - 2;
-        G += " ".repeat(Math.max(0, $e));
+      const k = B[U];
+      let z = `${M}│${t.reset}`;
+      if (k) {
+        let I = t.white;
+        k.type === "success" ? I = t.green : k.type === "error" ? I = t.red : k.type === "warning" ? I = t.yellow : k.type === "hmr" ? I = t.magenta : k.type === "change" && (I = t.blue);
+        const Z = k.message.substring(0, S - 12);
+        z += `${t.dim}${k.timestamp}${t.reset} ${I}${Z}${t.reset}`;
+        const se = S - k.timestamp.length - Z.length - 2;
+        z += " ".repeat(Math.max(0, se));
       } else
-        G += " ".repeat(b - 2);
-      G += `${x}│${t.reset}`, C.push(O.ESC.moveTo(r.row + 3 + U, r.col) + G);
+        z += " ".repeat(S - 2);
+      z += `${M}│${t.reset}`, T.push(F.ESC.moveTo(i.row + 3 + U, i.col) + z);
     }
-    C.push(O.ESC.moveTo(r.row + 3 + this.visibleLogLines, r.col) + `${x}└${"─".repeat(b - 2)}┘${t.reset}`), process.stdout.write(C.join(""));
+    T.push(F.ESC.moveTo(i.row + 3 + this.visibleLogLines, i.col) + `${M}└${"─".repeat(S - 2)}┘${t.reset}`), process.stdout.write(T.join(""));
   }
   fullRender() {
-    const e = O.C;
-    process.stdout.write(O.ESC.clearScreen + O.ESC.moveTo(1, 1));
+    const e = F.C;
+    process.stdout.write(F.ESC.clearScreen + F.ESC.moveTo(1, 1));
     const t = " MYOP MONOREPO DEV ", n = Math.floor((this.cols - t.length) / 2);
     process.stdout.write(`${e.cyan}${"━".repeat(n)}${e.bold}${e.bgCyan}${e.black}${t}${e.reset}${e.cyan}${"━".repeat(this.cols - n - t.length)}${e.reset}`), this.updateHeader();
-    for (const r of this.components)
-      this.renderPanel(r.name);
+    for (const i of this.components)
+      this.renderPanel(i.name);
     this.renderFooter();
   }
   renderFooter() {
-    const e = O.C, t = this.rows - 1;
+    const e = F.C, t = this.rows - 1;
     let n = `${e.gray}`;
-    n += `${e.green}●${e.gray} Ready  `, n += `${e.yellow}⟳${e.gray} Building  `, n += `${e.magenta}⚡${e.gray} HMR  `, n += `${e.red}✖${e.gray} Error  `, n += `${e.dim}| ←→: select panel  ↑↓: scroll  PgUp/PgDn: page  g/G: top/bottom${e.reset}`, process.stdout.write(O.ESC.moveTo(t, 1) + n);
+    n += `${e.green}●${e.gray} Ready  `, n += `${e.yellow}⟳${e.gray} Building  `, n += `${e.magenta}⚡${e.gray} HMR  `, n += `${e.red}✖${e.gray} Error  `, n += `${e.dim}| ←→: select panel  ↑↓: scroll  PgUp/PgDn: page  g/G: top/bottom${e.reset}`, process.stdout.write(F.ESC.moveTo(t, 1) + n);
   }
   render() {
     this.needsFullRedraw = !0, this.queueUpdate("__full__");
   }
   clear() {
-    this.uptimeInterval && clearInterval(this.uptimeInterval), process.stdin.isTTY && process.stdin.setRawMode(!1), process.stdout.write(O.ESC.clearScreen + O.ESC.moveTo(1, 1) + O.ESC.showCursor);
+    this.uptimeInterval && clearInterval(this.uptimeInterval), process.stdin.isTTY && process.stdin.setRawMode(!1), process.stdout.write(F.ESC.clearScreen + F.ESC.moveTo(1, 1) + F.ESC.showCursor);
   }
 };
 // ANSI escape codes
-he(O, "ESC", {
+ye(F, "ESC", {
   moveTo: (e, t) => `\x1B[${e};${t}H`,
   hideCursor: "\x1B[?25l",
   showCursor: "\x1B[?25h",
   clearScreen: "\x1B[2J",
   clearLine: "\x1B[2K"
 }), // Colors
-he(O, "C", {
+ye(F, "C", {
   reset: "\x1B[0m",
   bold: "\x1B[1m",
   dim: "\x1B[2m",
@@ -1211,7 +1211,7 @@ he(O, "C", {
   bgCyan: "\x1B[46m",
   black: "\x1B[30m"
 }), // Status configs
-he(O, "STATUS", {
+ye(F, "STATUS", {
   initializing: { icon: "◔", color: "yellow", label: "Initializing" },
   starting: { icon: "◑", color: "yellow", label: "Starting" },
   building: { icon: "⟳", color: "yellow", label: "Building" },
@@ -1224,124 +1224,124 @@ he(O, "STATUS", {
   warning: { icon: "⚠", color: "yellow", label: "Warning" },
   stopped: { icon: "■", color: "gray", label: "Stopped" }
 });
-let je = O;
-async function It(o) {
-  const { spawn: e, exec: t } = await import("child_process"), n = await import("path"), r = o.map((p) => ({
-    name: p.name,
-    path: p.path,
-    id: p.componentId || ""
-  })), s = new je(r), d = [], w = (p) => {
-    const S = process.platform;
-    let g;
-    S === "darwin" ? g = `open "${p}"` : S === "win32" ? g = `start "" "${p}"` : g = `xdg-open "${p}"`, t(g, () => {
+let je = F;
+async function Nt(o) {
+  const { spawn: e, exec: t } = await import("child_process"), n = await import("path"), i = o.map((d) => ({
+    name: d.name,
+    path: d.path,
+    id: d.componentId || ""
+  })), s = new je(i), l = [], w = (d) => {
+    const C = process.platform;
+    let u;
+    C === "darwin" ? u = `open "${d}"` : C === "win32" ? u = `start "" "${d}"` : u = `xdg-open "${d}"`, t(u, () => {
     });
-  }, $ = () => {
+  }, v = () => {
     s.clear(), console.log(`
-🛑 Shutting down all components...`), d.forEach((p) => {
+🛑 Shutting down all components...`), l.forEach((d) => {
       try {
-        p.kill("SIGTERM");
+        d.kill("SIGTERM");
       } catch {
       }
     }), setTimeout(() => process.exit(0), 500);
   };
-  process.on("SIGINT", $), process.on("SIGTERM", $);
+  process.on("SIGINT", v), process.on("SIGTERM", v);
   const m = process.argv[1];
-  for (let p = 0; p < o.length; p++) {
-    const S = o[p], g = S.name;
-    s.setStatus(g, "⏳ Starting..."), s.log(g, `Starting in ${S.path}`);
-    const b = e("node", [m, "dev"], {
-      cwd: n.default.resolve(S.path),
+  for (let d = 0; d < o.length; d++) {
+    const C = o[d], u = C.name;
+    s.setStatus(u, "⏳ Starting..."), s.log(u, `Starting in ${C.path}`);
+    const S = e("node", [m, "dev"], {
+      cwd: n.default.resolve(C.path),
       env: { ...process.env, FORCE_COLOR: "1", MYOP_NO_BROWSER: "1" },
       stdio: ["ignore", "pipe", "pipe"]
     });
-    d.push(b);
-    let x = "";
-    b.stdout.on("data", (C) => {
-      x += C.toString();
-      const L = x.split(`
+    l.push(S);
+    let M = "";
+    S.stdout.on("data", (T) => {
+      M += T.toString();
+      const D = M.split(`
 `);
-      x = L.pop() || "";
-      for (const H of L) {
-        const f = H.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "").trim();
-        f && (f.includes("Registered component") || f.includes("Registered:") ? s.setStatus(g, "✅ Ready") : f.includes("Building...") || f.includes("Running initial build") ? s.setStatus(g, "🔨 Building...") : f.includes("Build completed") || f.includes("Build succeeded") ? s.setStatus(g, "✅ Ready") : f.includes("Build failed") ? s.setStatus(g, "❌ Build Error") : f.includes("File changed") ? (s.setStatus(g, "📝 Changed"), setTimeout(() => s.setStatus(g, "✅ Ready"), 1500)) : f.includes("Notifying") && f.includes("HMR") ? (s.setStatus(g, "🔥 HMR Update"), setTimeout(() => s.setStatus(g, "✅ Ready"), 1e3)) : f.includes("HMR client connected") && (s.setStatus(g, "🔥 HMR Connected"), setTimeout(() => s.setStatus(g, "✅ Ready"), 1e3)), !f.includes("Watching") && !f.includes("Press Ctrl+C") && !f.includes("Starting shared") && !f.includes("Management server") && !f.includes("Main server") && !f.includes("Access at:") && !f.includes("No build needed") && s.log(g, f));
+      M = D.pop() || "";
+      for (const P of D) {
+        const x = P.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "").trim();
+        x && (x.includes("Registered component") || x.includes("Registered:") ? s.setStatus(u, "✅ Ready") : x.includes("Building...") || x.includes("Running initial build") ? s.setStatus(u, "🔨 Building...") : x.includes("Build completed") || x.includes("Build succeeded") ? s.setStatus(u, "✅ Ready") : x.includes("Build failed") ? s.setStatus(u, "❌ Build Error") : x.includes("File changed") ? (s.setStatus(u, "📝 Changed"), setTimeout(() => s.setStatus(u, "✅ Ready"), 1500)) : x.includes("Notifying") && x.includes("HMR") ? (s.setStatus(u, "🔥 HMR Update"), setTimeout(() => s.setStatus(u, "✅ Ready"), 1e3)) : x.includes("HMR client connected") && (s.setStatus(u, "🔥 HMR Connected"), setTimeout(() => s.setStatus(u, "✅ Ready"), 1e3)), !x.includes("Watching") && !x.includes("Press Ctrl+C") && !x.includes("Starting shared") && !x.includes("Management server") && !x.includes("Main server") && !x.includes("Access at:") && !x.includes("No build needed") && s.log(u, x));
       }
-    }), b.stderr.on("data", (C) => {
-      const L = C.toString().split(`
+    }), S.stderr.on("data", (T) => {
+      const D = T.toString().split(`
 `);
-      for (const H of L) {
-        const f = H.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "").trim();
-        f && (s.log(g, `⚠️ ${f}`), s.setStatus(g, "⚠️ Warning"));
+      for (const P of D) {
+        const x = P.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "").trim();
+        x && (s.log(u, `⚠️ ${x}`), s.setStatus(u, "⚠️ Warning"));
       }
-    }), b.on("exit", (C) => {
-      C !== 0 && C !== null && (s.setStatus(g, `❌ Exited (${C})`), s.log(g, `Process exited with code ${C}`));
-    }), p < o.length - 1 && await new Promise((C) => setTimeout(C, 500));
+    }), S.on("exit", (T) => {
+      T !== 0 && T !== null && (s.setStatus(u, `❌ Exited (${T})`), s.log(u, `Process exited with code ${T}`));
+    }), d < o.length - 1 && await new Promise((T) => setTimeout(T, 500));
   }
   s.render(), setTimeout(() => {
     w("http://localhost:9292");
   }, 2e3);
 }
-const Ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  devCommand: Le,
-  monorepoDevCommand: It
-}, Symbol.toStringTag, { value: "Module" })), Ne = ne.join(ht.homedir(), ".myop"), de = ne.join(Ne, "credentials.json");
-function jt() {
-  D.existsSync(Ne) || D.mkdirSync(Ne, { recursive: !0, mode: 448 });
+  devCommand: be,
+  monorepoDevCommand: Nt
+}, Symbol.toStringTag, { value: "Module" })), Ne = H.join(vt.homedir(), ".myop"), pe = H.join(Ne, "credentials.json");
+function Lt() {
+  R.existsSync(Ne) || R.mkdirSync(Ne, { recursive: !0, mode: 448 });
 }
-function Ae() {
+function De() {
   try {
-    if (!D.existsSync(de))
+    if (!R.existsSync(pe))
       return null;
-    const o = D.readFileSync(de, "utf8");
+    const o = R.readFileSync(pe, "utf8");
     return JSON.parse(o);
   } catch (o) {
     return console.info("Failed to read credentials:", o.message), null;
   }
 }
-function et(o) {
-  jt();
+function tt(o) {
+  Lt();
   const e = {
     ...o,
     savedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
-  D.writeFileSync(de, JSON.stringify(e, null, 2), {
+  R.writeFileSync(pe, JSON.stringify(e, null, 2), {
     mode: 384
     // Read/write for owner only
   });
 }
-function tt() {
+function ot() {
   try {
-    return D.existsSync(de) && D.unlinkSync(de), !0;
+    return R.existsSync(pe) && R.unlinkSync(pe), !0;
   } catch (o) {
     return console.error("Failed to clear credentials:", o.message), !1;
   }
 }
-function Nt(o) {
+function At(o) {
   if (!o || !o.expiresAt)
     return !0;
   const e = 5 * 60 * 1e3, t = new Date(o.expiresAt).getTime();
   return Date.now() > t - e;
 }
-function be() {
-  const o = Ae();
+function xe() {
+  const o = De();
   return o ? {
     email: o.userEmail,
     userId: o.userId
   } : null;
 }
-const re = process.env.MYOP_MCP_URL || "https://mcp.myop.dev", we = 19284, He = `http://localhost:${we}/callback`, kt = "myop-cli";
-function _t() {
-  return ke.randomBytes(32).toString("base64url");
+const ae = process.env.MYOP_MCP_URL || "https://mcp.myop.dev", Se = 19284, He = `http://localhost:${Se}/callback`, Dt = "myop-cli";
+function Ht() {
+  return Le.randomBytes(32).toString("base64url");
 }
-function Lt(o) {
-  return ke.createHash("sha256").update(o).digest("base64url");
+function Ut(o) {
+  return Le.createHash("sha256").update(o).digest("base64url");
 }
-async function At() {
-  const o = await fetch(`${re}/oauth/register`, {
+async function Jt() {
+  const o = await fetch(`${ae}/oauth/register`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
-      client_name: kt,
+      client_name: Dt,
       redirect_uris: [He],
       grant_types: ["authorization_code", "refresh_token"],
       response_types: ["code"]
@@ -1353,8 +1353,8 @@ async function At() {
   }
   return o.json();
 }
-function ye(o, e, t, n = null) {
-  const r = {
+function we(o, e, t, n = null) {
+  const i = {
     success: `<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2">
             <circle cx="12" cy="12" r="10"/>
             <path d="M8 12l2.5 2.5L16 9"/>
@@ -1371,7 +1371,7 @@ function ye(o, e, t, n = null) {
     success: { accent: "#4ade80", glow: "rgba(74, 222, 128, 0.1)" },
     error: { accent: "#f87171", glow: "rgba(248, 113, 113, 0.1)" },
     warning: { accent: "#fbbf24", glow: "rgba(251, 191, 36, 0.1)" }
-  }, { accent: d, glow: w } = s[o] || s.error;
+  }, { accent: l, glow: w } = s[o] || s.error;
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -1432,7 +1432,7 @@ function ye(o, e, t, n = null) {
         h1 {
             font-size: 20px;
             font-weight: 500;
-            color: ${d};
+            color: ${l};
             margin-bottom: 12px;
             letter-spacing: -0.5px;
         }
@@ -1465,7 +1465,7 @@ function ye(o, e, t, n = null) {
             align-items: center;
             gap: 8px;
             background: ${w};
-            border: 1px solid ${d}33;
+            border: 1px solid ${l}33;
             border-radius: 4px;
             padding: 10px 16px;
             font-size: 12px;
@@ -1502,7 +1502,7 @@ function ye(o, e, t, n = null) {
 <body>
     <div class="container">
         <div class="icon">
-            ${r[o] || r.error}
+            ${i[o] || i.error}
         </div>
         <h1>${e}</h1>
         <p class="message">${t}</p>
@@ -1519,14 +1519,14 @@ function ye(o, e, t, n = null) {
 </body>
 </html>`;
 }
-function Ht(o) {
+function Bt(o) {
   return new Promise((e, t) => {
-    const n = gt.createServer((r, s) => {
-      const d = new Ye(r.url, `http://localhost:${we}`);
-      if (d.pathname === "/callback") {
-        const w = d.searchParams.get("code"), $ = d.searchParams.get("state"), m = d.searchParams.get("error");
+    const n = wt.createServer((i, s) => {
+      const l = new Ke(i.url, `http://localhost:${Se}`);
+      if (l.pathname === "/callback") {
+        const w = l.searchParams.get("code"), v = l.searchParams.get("state"), m = l.searchParams.get("error");
         if (m) {
-          s.writeHead(200, { "Content-Type": "text/html" }), s.end(ye(
+          s.writeHead(200, { "Content-Type": "text/html" }), s.end(we(
             "error",
             "Authentication Failed",
             "Unable to complete the authentication process.",
@@ -1534,8 +1534,8 @@ function Ht(o) {
           )), n.close(), t(new Error(`OAuth error: ${m}`));
           return;
         }
-        if ($ !== o) {
-          s.writeHead(400, { "Content-Type": "text/html" }), s.end(ye(
+        if (v !== o) {
+          s.writeHead(400, { "Content-Type": "text/html" }), s.end(we(
             "warning",
             "Security Error",
             "State mismatch detected. This could indicate a CSRF attack. Please try authenticating again.",
@@ -1544,7 +1544,7 @@ function Ht(o) {
           return;
         }
         if (!w) {
-          s.writeHead(400, { "Content-Type": "text/html" }), s.end(ye(
+          s.writeHead(400, { "Content-Type": "text/html" }), s.end(we(
             "error",
             "Missing Authorization Code",
             "No authorization code was received from the server.",
@@ -1552,7 +1552,7 @@ function Ht(o) {
           )), n.close(), t(new Error("No authorization code"));
           return;
         }
-        s.writeHead(200, { "Content-Type": "text/html" }), s.end(ye(
+        s.writeHead(200, { "Content-Type": "text/html" }), s.end(we(
           "success",
           "Authentication Successful",
           "You have been authenticated successfully. Return to the terminal to continue."
@@ -1560,18 +1560,18 @@ function Ht(o) {
       } else
         s.writeHead(404), s.end("Not found");
     });
-    n.listen(we, () => {
-      console.info(`OAuth callback server listening on port ${we}`);
+    n.listen(Se, () => {
+      console.info(`OAuth callback server listening on port ${Se}`);
     }), setTimeout(() => {
       n.close(), t(new Error("Authentication timed out"));
     }, 5 * 60 * 1e3);
   });
 }
-async function Dt(o, e, t) {
-  const n = await fetch(`${re}/oauth/token`, {
+async function zt(o, e, t) {
+  const n = await fetch(`${ae}/oauth/token`, {
     method: "POST",
     headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    body: new Ke({
+    body: new Qe({
       grant_type: "authorization_code",
       code: o,
       client_id: e,
@@ -1580,16 +1580,16 @@ async function Dt(o, e, t) {
     })
   });
   if (!n.ok) {
-    const r = await n.json();
-    throw new Error(r.error_description || r.error || "Token exchange failed");
+    const i = await n.json();
+    throw new Error(i.error_description || i.error || "Token exchange failed");
   }
   return n.json();
 }
-async function Ut(o, e) {
-  const t = await fetch(`${re}/oauth/token`, {
+async function Wt(o, e) {
+  const t = await fetch(`${ae}/oauth/token`, {
     method: "POST",
     headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    body: new Ke({
+    body: new Qe({
       grant_type: "refresh_token",
       refresh_token: o,
       client_id: e
@@ -1601,9 +1601,9 @@ async function Ut(o, e) {
   }
   return t.json();
 }
-async function Bt(o) {
-  var r, s, d;
-  const e = await fetch(`${re}/mcp`, {
+async function Vt(o) {
+  var i, s, l;
+  const e = await fetch(`${ae}/mcp`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -1624,57 +1624,57 @@ async function Bt(o) {
   const t = await e.json();
   if (t.error)
     throw new Error(t.error.message);
-  const n = (d = (s = (r = t.result) == null ? void 0 : r.content) == null ? void 0 : s[0]) == null ? void 0 : d.text;
+  const n = (l = (s = (i = t.result) == null ? void 0 : i.content) == null ? void 0 : s[0]) == null ? void 0 : l.text;
   if (n)
     return JSON.parse(n);
   throw new Error("Invalid response from whoami");
 }
-async function ce() {
-  const o = V("Starting authentication...").start();
+async function de() {
+  const o = G("Starting authentication...").start();
   try {
     o.text = "Registering OAuth client...";
-    const t = (await At()).client_id, n = _t(), r = Lt(n), s = ke.randomBytes(16).toString("hex");
+    const t = (await Jt()).client_id, n = Ht(), i = Ut(n), s = Le.randomBytes(16).toString("hex");
     o.text = "Waiting for authorization...";
-    const d = Ht(s), w = new Ye(`${re}/oauth/authorize`);
-    w.searchParams.set("response_type", "code"), w.searchParams.set("client_id", t), w.searchParams.set("redirect_uri", He), w.searchParams.set("code_challenge", r), w.searchParams.set("code_challenge_method", "S256"), w.searchParams.set("state", s), o.stop(), console.log(`
+    const l = Bt(s), w = new Ke(`${ae}/oauth/authorize`);
+    w.searchParams.set("response_type", "code"), w.searchParams.set("client_id", t), w.searchParams.set("redirect_uri", He), w.searchParams.set("code_challenge", i), w.searchParams.set("code_challenge_method", "S256"), w.searchParams.set("state", s), o.stop(), console.log(`
 🌐 Opening browser for authentication...`), console.log("If the browser does not open, visit:"), console.log(`  ${w.toString()}
-`), await ft(w.toString());
-    const $ = await d;
+`), await St(w.toString());
+    const v = await l;
     o.start("Exchanging authorization code...");
-    const m = await Dt($, t, n);
+    const m = await zt(v, t, n);
     o.text = "Getting user info...";
-    const p = await Bt(m.access_token), S = {
+    const d = await Vt(m.access_token), C = {
       accessToken: m.access_token,
       refreshToken: m.refresh_token,
       expiresAt: new Date(Date.now() + m.expires_in * 1e3).toISOString(),
       clientId: t,
-      userId: p.userId,
-      userEmail: p.email
+      userId: d.userId,
+      userEmail: d.email
     };
-    return et(S), o.succeed(`Authenticated as ${p.email}`), S;
+    return tt(C), o.succeed(`Authenticated as ${d.email}`), C;
   } catch (e) {
     throw o.fail(`Authentication failed: ${e.message}`), e;
   }
 }
-async function ot() {
-  const o = Ae();
+async function nt() {
+  const o = De();
   if (!o) {
     console.log("Not currently logged in.");
     return;
   }
-  tt(), console.log(`✅ Logged out (was: ${o.userEmail})`);
+  ot(), console.log(`✅ Logged out (was: ${o.userEmail})`);
 }
-async function Jt() {
-  let o = Ae();
+async function st() {
+  let o = De();
   if (!o)
     return console.log(`Not logged in. Starting authentication...
-`), await ce();
-  if (!Nt(o))
+`), await de();
+  if (!At(o))
     return o;
   if (o.refreshToken) {
-    const e = V("Refreshing access token...").start();
+    const e = G("Refreshing access token...").start();
     try {
-      const t = await Ut(
+      const t = await Wt(
         o.refreshToken,
         o.clientId
       );
@@ -1683,116 +1683,116 @@ async function Jt() {
         accessToken: t.access_token,
         refreshToken: t.refresh_token,
         expiresAt: new Date(Date.now() + t.expires_in * 1e3).toISOString()
-      }, et(o), e.succeed("Token refreshed"), o;
+      }, tt(o), e.succeed("Token refreshed"), o;
     } catch {
-      return e.warn("Token refresh failed, please log in again"), tt(), await ce();
+      return e.warn("Token refresh failed, please log in again"), ot(), await de();
     }
   }
   return console.log(`Session expired. Please log in again.
-`), await ce();
+`), await de();
 }
-function zt() {
-  return re;
+function it() {
+  return ae;
 }
-const K = "@myop/cli", Ie = process.platform === "win32";
-function Wt() {
+const X = "@myop/cli", ke = process.platform === "win32";
+function Gt() {
   try {
-    return Q("npm config get registry", { encoding: "utf-8" }).trim() || "https://registry.npmjs.org/";
+    return q("npm config get registry", { encoding: "utf-8" }).trim() || "https://registry.npmjs.org/";
   } catch {
     return "https://registry.npmjs.org/";
   }
 }
-function Vt() {
+function Yt() {
   try {
-    return Q("npm config get prefix", { encoding: "utf-8" }).trim();
+    return q("npm config get prefix", { encoding: "utf-8" }).trim();
   } catch {
     return null;
   }
 }
-async function Gt() {
+async function Kt() {
   try {
-    const o = Wt().replace(/\/$/, ""), e = await fetch(`${o}/${K}/latest`);
+    const o = Gt().replace(/\/$/, ""), e = await fetch(`${o}/${X}/latest`);
     return e.ok ? (await e.json()).version : null;
   } catch {
     return null;
   }
 }
-function Yt(o, e) {
+function Qt(o, e) {
   const t = o.split(".").map(Number), n = e.split(".").map(Number);
-  for (let r = 0; r < Math.max(t.length, n.length); r++) {
-    const s = t[r] || 0, d = n[r] || 0;
-    if (s > d) return 1;
-    if (s < d) return -1;
+  for (let i = 0; i < Math.max(t.length, n.length); i++) {
+    const s = t[i] || 0, l = n[i] || 0;
+    if (s > l) return 1;
+    if (s < l) return -1;
   }
   return 0;
 }
-async function Kt(o) {
-  const e = V({
+async function Zt(o) {
+  const e = G({
     text: "Checking for updates...",
     color: "cyan"
-  }).start(), t = await Gt();
-  if (e.stop(), !t || Yt(t, o) <= 0)
+  }).start(), t = await Kt();
+  if (e.stop(), !t || Qt(t, o) <= 0)
     return !1;
   console.log(`
 📦 New version available: ${o} → ${t}
 `);
   let n;
   try {
-    n = await Ge({
+    n = await Ye({
       message: "Would you like to update now?",
       choices: [
         { name: "Yes, update now", value: !0 },
         { name: "No, continue with current version", value: !1 }
       ]
     });
-  } catch (r) {
-    throw r.name === "ExitPromptError" && (console.log(`
+  } catch (i) {
+    throw i.name === "ExitPromptError" && (console.log(`
 
 👋 Goodbye!
-`), process.exit(0)), r;
+`), process.exit(0)), i;
   }
   if (n) {
-    const r = V({
-      text: `Updating ${K} to v${t}...`,
+    const i = G({
+      text: `Updating ${X} to v${t}...`,
       color: "green"
-    }).start(), s = `npm install -g ${K}@latest`, d = Vt();
+    }).start(), s = `npm install -g ${X}@latest`, l = Yt();
     try {
-      Q(s, { stdio: "pipe" }), r.succeed(`Updated to v${t}`);
+      q(s, { stdio: "pipe" }), i.succeed(`Updated to v${t}`);
     } catch {
-      r.stop(), console.log(`
+      i.stop(), console.log(`
 🔐 Elevated permissions required.
 `);
       try {
-        if (Ie) {
-          const p = `Start-Process -FilePath 'cmd' -ArgumentList '/c npm ${d ? `install -g ${K}@latest --prefix \\"${d}\\"` : `install -g ${K}@latest`}' -Verb RunAs -Wait`;
-          Q(`powershell -Command "${p}"`, { stdio: "inherit" });
+        if (ke) {
+          const d = `Start-Process -FilePath 'cmd' -ArgumentList '/c npm ${l ? `install -g ${X}@latest --prefix \\"${l}\\"` : `install -g ${X}@latest`}' -Verb RunAs -Wait`;
+          q(`powershell -Command "${d}"`, { stdio: "inherit" });
         } else {
-          const m = d ? `sudo npm install -g ${K}@latest --prefix "${d}"` : `sudo ${s}`;
-          Q(m, { stdio: "inherit" });
+          const m = l ? `sudo npm install -g ${X}@latest --prefix "${l}"` : `sudo ${s}`;
+          q(m, { stdio: "inherit" });
         }
         console.log(`
 ✅ Updated to v${t}`);
       } catch {
         console.log(`
 ❌ Update failed`);
-        const p = Ie ? `npm install -g ${K}@latest (run as Administrator)` : `sudo npm install -g ${K}@latest`;
+        const d = ke ? `npm install -g ${X}@latest (run as Administrator)` : `sudo npm install -g ${X}@latest`;
         console.log(`
-Please run manually: ${p}
+Please run manually: ${d}
 `), process.exit(1);
       }
     }
     let w = null;
     try {
-      let $;
-      d ? $ = Ie ? Ee(d, "node_modules") : Ee(d, "lib", "node_modules") : $ = Q("npm root -g", { encoding: "utf-8" }).trim();
-      const m = Ee($, K, "package.json"), p = ut(m, "utf-8");
-      w = JSON.parse(p).version;
+      let v;
+      l ? v = ke ? Oe(l, "node_modules") : Oe(l, "lib", "node_modules") : v = q("npm root -g", { encoding: "utf-8" }).trim();
+      const m = Oe(v, X, "package.json"), d = yt(m, "utf-8");
+      w = JSON.parse(d).version;
     } catch {
     }
     if (w === t)
       return console.log(`
 🔄 Restarting...
-`), mt(process.argv[0], process.argv.slice(1), {
+`), ht(process.argv[0], process.argv.slice(1), {
         stdio: "inherit",
         shell: !0
       }).on("close", (m) => {
@@ -1804,26 +1804,69 @@ Please run myop again to use the new version.
   }
   return !1;
 }
-const Qt = (o) => new Promise((e) => setTimeout(e, o)), nt = (o = ".", e = 3, t = 0) => {
+const Xt = (o) => new Promise((e) => setTimeout(e, o)), qt = () => {
+  let o = new URL(import.meta.url).pathname;
+  process.platform === "win32" && o.startsWith("/") && (o = o.slice(1));
+  const e = H.dirname(o);
+  return H.join(e, "skills");
+}, _e = (o, e) => {
+  R.mkdirSync(e, { recursive: !0 });
+  const t = R.readdirSync(o, { withFileTypes: !0 });
+  for (const n of t) {
+    const i = H.join(o, n.name), s = H.join(e, n.name);
+    n.isDirectory() ? _e(i, s) : R.copyFileSync(i, s);
+  }
+}, rt = (o) => {
+  const e = qt();
+  if (!R.existsSync(e))
+    return console.info("Skills source directory not found, skipping skills installation"), !1;
+  try {
+    const t = H.join(o, ".agents", "skills");
+    _e(e, t);
+    const n = [".claude", ".cursor", ".gemini", ".junie", ".agent"], i = R.readdirSync(e, { withFileTypes: !0 }).filter((s) => s.isDirectory()).map((s) => s.name);
+    for (const s of n) {
+      const l = H.join(o, s, "skills");
+      R.mkdirSync(l, { recursive: !0 });
+      for (const w of i) {
+        const v = H.join(l, w), m = H.join("..", "..", ".agents", "skills", w);
+        try {
+          R.rmSync(v, { recursive: !0, force: !0 });
+        } catch {
+        }
+        try {
+          R.symlinkSync(m, v, "dir");
+        } catch {
+          _e(
+            H.join(t, w),
+            v
+          );
+        }
+      }
+    }
+    return !0;
+  } catch (t) {
+    return console.info("Failed to install skills:", t.message), !1;
+  }
+}, at = (o = ".", e = 3, t = 0) => {
   const n = [];
   if (t > e) return n;
   try {
-    const r = D.readdirSync(o, { withFileTypes: !0 });
-    for (const s of r) {
-      const d = ne.join(o, s.name);
+    const i = R.readdirSync(o, { withFileTypes: !0 });
+    for (const s of i) {
+      const l = H.join(o, s.name);
       if (s.isDirectory()) {
         if (s.name === "node_modules" || s.name === ".git" || s.name === "dist" || s.name.startsWith("."))
           continue;
-        n.push(...nt(d, e, t + 1));
+        n.push(...at(l, e, t + 1));
       } else if (s.name === "myop.config.json")
         try {
-          const w = D.readFileSync(d, "utf-8"), $ = JSON.parse(w);
+          const w = R.readFileSync(l, "utf-8"), v = JSON.parse(w);
           n.push({
             path: o,
-            configPath: d,
-            name: $.name || $.componentName || ne.basename(o),
-            componentId: $.componentId || null,
-            config: $
+            configPath: l,
+            name: v.name || v.componentName || H.basename(o),
+            componentId: v.componentId || null,
+            config: v
           });
         } catch {
         }
@@ -1833,7 +1876,7 @@ const Qt = (o) => new Promise((e) => setTimeout(e, o)), nt = (o = ".", e = 3, t
   return n;
 };
 y.executionPath = process.cwd();
-const Se = (o = !1) => {
+const $e = (o = !1) => {
   const e = y.program.getOptionValue("verbose");
   e || (console.info = () => {
   }), console.info("📝 verbose mode on"), y.options = {
@@ -1841,7 +1884,7 @@ const Se = (o = !1) => {
     verbose: e
   };
   try {
-    return y.myopConfig = wt(y.options.configPath), { configFound: !0 };
+    return y.myopConfig = xt(y.options.configPath), { configFound: !0 };
   } catch (t) {
     if (o) {
       console.info(`
@@ -1851,7 +1894,7 @@ const Se = (o = !1) => {
           author: "@myop-cli",
           flows: []
         };
-        return _e(y.options.configPath, n), y.myopConfig = n, { configFound: !0 };
+        return Ae(y.options.configPath, n), y.myopConfig = n, { configFound: !0 };
       } catch {
         return console.info("Error details :", t), { configFound: !1, error: t };
       }
@@ -1861,94 +1904,108 @@ const Se = (o = !1) => {
 };
 [
   new Fe(),
-  ...Mt
+  ...Et
 ];
-const Zt = "0.1.40";
-y.program = new pt();
-y.program.name("@myop/cli").description("Myop CLI - Remote UI Made Easy").version(Zt);
-y.program.addOption(new pe("-c, --config <value>", "myop.config.json file location").default("./myop.config.json", "./myop.config.json"));
-y.program.addOption(new pe("-h, --help", "Show helpful information"));
-y.program.addOption(new pe("-v, --verbose", "Enables verbose output mode for the command-line interface (CLI)."));
-y.program.addOption(new pe("--ci", "CI mode: print status info (version, config, auth) as JSON and exit without prompts"));
-y.program.addOption(new pe("-m, --monorepo", "Monorepo mode: scan for all myop.config.json files in nested directories"));
+const eo = "0.1.42";
+y.program = new ft();
+y.program.name("@myop/cli").description("Myop CLI - Remote UI Made Easy").version(eo);
+y.program.addOption(new me("-c, --config <value>", "myop.config.json file location").default("./myop.config.json", "./myop.config.json"));
+y.program.addOption(new me("-h, --help", "Show helpful information"));
+y.program.addOption(new me("-v, --verbose", "Enables verbose output mode for the command-line interface (CLI)."));
+y.program.addOption(new me("--ci", "CI mode: print status info (version, config, auth) as JSON and exit without prompts"));
+y.program.addOption(new me("-m, --monorepo", "Monorepo mode: scan for all myop.config.json files in nested directories"));
 y.program.command("add").description("Install Myop assets").addArgument("type").addArgument("id").action((o, e) => {
-  Se(!0), console.info("adding ", o, e, y.options.configPath), o === "flow" && Ze._action(e), process.exit();
+  $e(!0), console.info("adding ", o, e, y.options.configPath), o === "flow" && Xe._action(e), process.exit();
 });
 y.program.command("remove").description("Remove Myop asset").argument("<type>", "Myop asset type").argument("<id>", "Asset id").action((o, e) => {
-  Se(), console.info("removing ", o, e, y.options.configPath), o === "flow" && Xe._action(e), process.exit();
+  $e(), console.info("removing ", o, e, y.options.configPath), o === "flow" && qe._action(e), process.exit();
 });
 y.program.command("install").description("Install Myop assets").action(async () => {
-  Se(), await Qe.action();
+  $e(), await Ze.action();
 });
 y.program.command("login").description("Authenticate with Myop platform").action(async () => {
   try {
-    await ce();
+    await de();
   } catch (o) {
     console.error("Login failed:", o.message), process.exit(1);
   }
   process.exit(0);
 });
 y.program.command("logout").description("Clear stored credentials").action(async () => {
-  await ot(), process.exit(0);
+  await nt(), process.exit(0);
 });
 y.program.command("whoami").description("Show current authenticated user").action(async () => {
-  const o = be();
+  const o = xe();
   o && o.email ? console.log(`Logged in as: ${o.email}`) : console.log("Not logged in. Run `myop login` to authenticate."), process.exit(0);
 });
 y.program.command("sync").description("Build and upload component to Myop platform").option("--skip-build", "Skip the build step").action(async (o) => {
-  var g, b, x, C, L, H;
-  const e = y.program.getOptionValue("config") || "./myop.config.json", t = await import("fs"), { execSync: n } = await import("child_process"), r = await import("path");
+  var M, T, D, P, x, j;
+  const e = y.program.getOptionValue("config") || "./myop.config.json", t = await import("fs"), { execSync: n } = await import("child_process"), i = await import("path");
   let s = {};
   if (t.existsSync(e))
     try {
-      const f = t.readFileSync(e, "utf-8");
-      s = JSON.parse(f);
-      const P = s.name || s.componentName;
-      console.log(`📋 Found config: ${P || "Unnamed component"}`), s.componentId && console.log(`   Component ID: ${s.componentId}`);
-    } catch (f) {
-      console.error(`⚠️ Failed to parse ${e}:`, f.message);
+      const b = t.readFileSync(e, "utf-8");
+      s = JSON.parse(b);
+      const f = s.name || s.componentName;
+      console.log(`📋 Found config: ${f || "Unnamed component"}`), s.componentId && console.log(`   Component ID: ${s.componentId}`);
+    } catch (b) {
+      console.error(`⚠️ Failed to parse ${e}:`, b.message);
     }
   else
     console.log("⚠️ No myop.config.json found. A new component will be created.");
-  if (!o.skipBuild) {
-    const { exec: f } = await import("child_process");
-    let P = { hasTriedPlatformFix: !1, hasTriedInstall: !1 };
-    const E = (I = !1) => new Promise((_) => {
-      const te = V(I ? "Retrying build..." : "Building project...").start();
-      f("npm run build", { maxBuffer: 10 * 1024 * 1024 }, async (U, F, G) => {
-        if (!U) {
-          te.succeed("Build completed"), _(!0);
+  let l = null, w = !1;
+  try {
+    const b = JSON.parse(t.readFileSync("package.json", "utf-8"));
+    w = !!(b.scripts && b.scripts.build);
+  } catch {
+  }
+  if (!w) {
+    const b = t.readdirSync(".").filter(
+      (f) => f.endsWith(".html") && !f.startsWith(".") && t.statSync(f).isFile()
+    );
+    b.length === 1 && (l = b[0]);
+  }
+  if (l)
+    console.log(`📄 Single HTML file mode: ${l} (skipping build)`);
+  else if (!o.skipBuild) {
+    const { exec: b } = await import("child_process");
+    let f = { hasTriedPlatformFix: !1, hasTriedInstall: !1 };
+    const E = (B = !1) => new Promise((U) => {
+      const k = G(B ? "Retrying build..." : "Building project...").start();
+      b("npm run build", { maxBuffer: 10 * 1024 * 1024 }, async (z, I, Z) => {
+        if (!z) {
+          k.succeed("Build completed"), U(!0);
           return;
         }
-        if (te.fail("Build failed"), !P.hasTriedPlatformFix && !P.hasTriedInstall) {
-          const T = await qe(U, F, G, f, P);
-          if (P = { ...P, ...T }, T.handled) {
+        if (k.fail("Build failed"), !f.hasTriedPlatformFix && !f.hasTriedInstall) {
+          const se = await et(z, I, Z, b, f);
+          if (f = { ...f, ...se }, se.handled) {
             const Y = await E(!0);
-            _(Y);
+            U(Y);
             return;
           }
         }
-        console.error(U.message), _(!1);
+        console.error(z.message), U(!1);
       });
     });
     await E() || process.exit(1);
   }
-  const d = "./dist/index.html";
-  t.existsSync(d) || (console.error("❌ Error: ./dist/index.html not found"), console.log("   Make sure your build outputs to ./dist/index.html"), process.exit(1));
-  let w;
+  const v = l || "./dist/index.html";
+  t.existsSync(v) || (console.error(`❌ Error: ${v} not found`), console.log("   Make sure your build outputs to ./dist/index.html"), process.exit(1));
+  let m;
   try {
-    w = await Jt();
-  } catch (f) {
-    console.error("❌ Authentication failed:", f.message), process.exit(1);
+    m = await st();
+  } catch (b) {
+    console.error("❌ Authentication failed:", b.message), process.exit(1);
   }
-  const $ = zt();
-  let m = V("Requesting upload URL...").start(), p;
+  const d = it();
+  let C = G("Requesting upload URL...").start(), u;
   try {
-    const f = await fetch(`${$}/mcp`, {
+    const b = await fetch(`${d}/mcp`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        Authorization: `Bearer ${w.accessToken}`
+        Authorization: `Bearer ${m.accessToken}`
       },
       body: JSON.stringify({
         jsonrpc: "2.0",
@@ -1957,63 +2014,63 @@ y.program.command("sync").description("Build and upload component to Myop platfo
         params: {
           name: "upload_component",
           arguments: {
-            name: s.name || s.componentName || r.default.basename(process.cwd()),
+            name: s.name || s.componentName || i.default.basename(process.cwd()),
             componentId: s.componentId || void 0,
             organization: s.organization || void 0
           }
         }
       })
     });
-    if (!f.ok)
-      throw new Error(`Server returned ${f.status}`);
-    const P = await f.json();
-    if (P.error)
-      throw new Error(P.error.message);
-    const E = (x = (b = (g = P.result) == null ? void 0 : g.content) == null ? void 0 : b[0]) == null ? void 0 : x.text;
-    if (p = JSON.parse(E), !p.success)
-      throw new Error(p.error);
-    m.succeed("Upload URL obtained");
-  } catch (f) {
-    m.fail("Failed to get upload URL"), console.error("   ", f.message), process.exit(1);
-  }
-  m = V("Uploading component...").start();
+    if (!b.ok)
+      throw new Error(`Server returned ${b.status}`);
+    const f = await b.json();
+    if (f.error)
+      throw new Error(f.error.message);
+    const E = (D = (T = (M = f.result) == null ? void 0 : M.content) == null ? void 0 : T[0]) == null ? void 0 : D.text;
+    if (u = JSON.parse(E), !u.success)
+      throw new Error(u.error);
+    C.succeed("Upload URL obtained");
+  } catch (b) {
+    C.fail("Failed to get upload URL"), console.error("   ", b.message), process.exit(1);
+  }
+  C = G("Uploading component...").start();
   try {
-    const f = t.readFileSync(d, "utf-8");
-    let P;
-    const E = p.curlCommand.match(/(?:"|\\")([^"\\]+(?:\\.[^"\\]*)*)(?:"|\\")$/);
+    const b = t.readFileSync(v, "utf-8");
+    let f;
+    const E = u.curlCommand.match(/(?:"|\\")([^"\\]+(?:\\.[^"\\]*)*)(?:"|\\")$/);
     if (E)
-      P = E[1];
+      f = E[1];
     else {
-      const I = p.curlCommand.match(/(https:\/\/[^\s"\\]+)/);
-      if (I)
-        P = I[1];
+      const B = u.curlCommand.match(/(https:\/\/[^\s"\\]+)/);
+      if (B)
+        f = B[1];
       else
-        throw new Error("Could not parse presigned URL from: " + p.curlCommand);
+        throw new Error("Could not parse presigned URL from: " + u.curlCommand);
     }
-    console.info("Uploading to:", P.substring(0, 100) + "...");
-    const M = await fetch(P, {
+    console.info("Uploading to:", f.substring(0, 100) + "...");
+    const _ = await fetch(f, {
       method: "PUT",
       headers: {
         "Content-Type": "text/html"
       },
-      body: f
+      body: b
     });
-    if (!M.ok) {
-      const I = await M.text();
-      throw new Error(`Upload failed with status ${M.status}: ${I}`);
+    if (!_.ok) {
+      const B = await _.text();
+      throw new Error(`Upload failed with status ${_.status}: ${B}`);
     }
-    m.succeed("Component uploaded");
-  } catch (f) {
-    m.fail("Upload failed"), console.error("   ", f.message), f.cause && console.error("   Cause:", f.cause), process.exit(1);
+    C.succeed("Component uploaded");
+  } catch (b) {
+    C.fail("Upload failed"), console.error("   ", b.message), b.cause && console.error("   Cause:", b.cause), process.exit(1);
   }
-  m = V("Confirming upload...").start();
+  C = G("Confirming upload...").start();
   let S;
   try {
-    const f = await fetch(`${$}/mcp`, {
+    const b = await fetch(`${d}/mcp`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        Authorization: `Bearer ${w.accessToken}`
+        Authorization: `Bearer ${m.accessToken}`
       },
       body: JSON.stringify({
         jsonrpc: "2.0",
@@ -2022,50 +2079,329 @@ y.program.command("sync").description("Build and upload component to Myop platfo
         params: {
           name: "confirm_upload",
           arguments: {
-            uploadId: p.uploadId
+            uploadId: u.uploadId
           }
         }
       })
     });
-    if (!f.ok)
-      throw new Error(`Server returned ${f.status}`);
-    const P = await f.json();
-    if (P.error)
-      throw new Error(P.error.message);
-    const E = (H = (L = (C = P.result) == null ? void 0 : C.content) == null ? void 0 : L[0]) == null ? void 0 : H.text;
+    if (!b.ok)
+      throw new Error(`Server returned ${b.status}`);
+    const f = await b.json();
+    if (f.error)
+      throw new Error(f.error.message);
+    const E = (j = (x = (P = f.result) == null ? void 0 : P.content) == null ? void 0 : x[0]) == null ? void 0 : j.text;
     if (S = JSON.parse(E), !S.success)
       throw new Error(S.error);
-    m.succeed("Upload confirmed");
-  } catch (f) {
-    m.fail("Confirmation failed"), console.error("   ", f.message), process.exit(1);
+    C.succeed("Upload confirmed");
+  } catch (b) {
+    C.fail("Confirmation failed"), console.error("   ", b.message), process.exit(1);
   }
   if (S.isNewComponent || !s.componentId) {
     s.componentId = S.componentId, s.organization = S.orgId, s.name || (s.name = S.componentName);
     try {
       t.writeFileSync(e, JSON.stringify(s, null, 2)), console.log(`
 📝 Updated ${e} with componentId`);
-    } catch (f) {
+    } catch (b) {
       console.log(`
-⚠️ Could not update ${e}: ${f.message}`), console.log(`   Please add componentId: "${S.componentId}" manually`);
+⚠️ Could not update ${e}: ${b.message}`), console.log(`   Please add componentId: "${S.componentId}" manually`);
     }
   }
   console.log(`
 ✅ Sync completed successfully!`), console.log(`   Component: ${S.componentName}`), console.log(`   Dashboard: ${S.dashboardUrl}`), process.exit(0);
 });
-y.program.command("dev").description("Start development server with file watching").action(Le);
-const Xt = () => {
+y.program.command("push").description("Upload component to Myop platform").action(async () => {
+  var C, u, S, M, T, D;
+  const o = y.program.getOptionValue("config") || "./myop.config.json";
+  let e = {};
+  if (R.existsSync(o))
+    try {
+      e = JSON.parse(R.readFileSync(o, "utf-8"));
+    } catch (P) {
+      console.error(`⚠️ Failed to parse ${o}:`, P.message);
+    }
+  const t = e.name || e.componentName || H.basename(process.cwd());
+  console.log(`
+📋 Component: ${t}`);
+  let n;
+  const i = R.readdirSync(".").filter(
+    (P) => P.endsWith(".html") && !P.startsWith(".") && R.statSync(P).isFile()
+  );
+  i.length === 1 && !R.existsSync("./dist/index.html") ? n = i[0] : R.existsSync("./dist/index.html") ? n = "./dist/index.html" : i.length === 1 ? n = i[0] : (console.error("❌ No HTML file found to upload."), console.log("   Expected: a single .html file in root or ./dist/index.html"), process.exit(1));
+  const s = R.readFileSync(n, "utf-8");
+  console.log(`   File: ${n} (${(s.length / 1024).toFixed(1)} KB)`);
+  let l;
+  try {
+    l = await st();
+  } catch (P) {
+    console.error("❌ Authentication failed:", P.message), process.exit(1);
+  }
+  const w = it();
+  let v = G("Uploading...").start(), m;
+  try {
+    const P = await fetch(`${w}/mcp`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${l.accessToken}`
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: 1,
+        method: "tools/call",
+        params: {
+          name: "upload_component",
+          arguments: {
+            name: t,
+            componentId: e.componentId && e.componentId !== "DEV" ? e.componentId : void 0,
+            organization: e.organization || void 0
+          }
+        }
+      })
+    });
+    if (!P.ok)
+      throw new Error(`Server returned ${P.status}`);
+    const x = await P.json();
+    if (x.error)
+      throw new Error(x.error.message);
+    const j = (S = (u = (C = x.result) == null ? void 0 : C.content) == null ? void 0 : u[0]) == null ? void 0 : S.text;
+    if (m = JSON.parse(j), !m.success)
+      throw new Error(m.error);
+  } catch (P) {
+    v.fail("Failed to get upload URL"), console.error("   ", P.message), process.exit(1);
+  }
+  try {
+    let P;
+    const x = m.curlCommand.match(/(?:"|\\")([^"\\]+(?:\\.[^"\\]*)*)(?:"|\\")$/);
+    if (x)
+      P = x[1];
+    else {
+      const b = m.curlCommand.match(/(https:\/\/[^\s"\\]+)/);
+      if (b)
+        P = b[1];
+      else
+        throw new Error("Could not parse presigned URL");
+    }
+    const j = await fetch(P, {
+      method: "PUT",
+      headers: { "Content-Type": "text/html" },
+      body: s
+    });
+    if (!j.ok) {
+      const b = await j.text();
+      throw new Error(`Upload failed: ${j.status} ${b}`);
+    }
+  } catch (P) {
+    v.fail("Upload failed"), console.error("   ", P.message), process.exit(1);
+  }
+  let d;
+  try {
+    const P = await fetch(`${w}/mcp`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${l.accessToken}`
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: 2,
+        method: "tools/call",
+        params: {
+          name: "confirm_upload",
+          arguments: {
+            uploadId: m.uploadId
+          }
+        }
+      })
+    });
+    if (!P.ok)
+      throw new Error(`Server returned ${P.status}`);
+    const x = await P.json();
+    if (x.error)
+      throw new Error(x.error.message);
+    const j = (D = (T = (M = x.result) == null ? void 0 : M.content) == null ? void 0 : T[0]) == null ? void 0 : D.text;
+    if (d = JSON.parse(j), !d.success)
+      throw new Error(d.error);
+    v.succeed("Pushed successfully");
+  } catch (P) {
+    v.fail("Confirmation failed"), console.error("   ", P.message), process.exit(1);
+  }
+  if (d.isNewComponent || !e.componentId || e.componentId === "DEV") {
+    e.componentId = d.componentId, e.organization = d.orgId, e.name || (e.name = d.componentName);
+    try {
+      R.writeFileSync(o, JSON.stringify(e, null, 2));
+    } catch (P) {
+      console.log(`⚠️ Could not update ${o}: ${P.message}`), console.log(`   Add componentId: "${d.componentId}" manually`);
+    }
+  }
+  console.log(`
+   ${d.componentName}`), console.log(`   ${d.dashboardUrl}
+`), process.exit(0);
+});
+y.program.command("create").description("Create a new Myop HTML component and start dev server").action(async () => {
+  const { input: o } = await import("@inquirer/prompts"), e = await import("fs"), n = (await import("path")).default.basename(process.cwd());
+  let i;
+  try {
+    i = await o({
+      message: "Component name:",
+      default: n
+    });
+  } catch (v) {
+    throw v.name === "ExitPromptError" && (console.log(`
+
+👋 Goodbye!
+`), process.exit(0)), v;
+  }
+  (e.existsSync("index.html") || e.existsSync("myop.config.json")) && (console.log(`
+⚠️  index.html or myop.config.json already exists in this directory.`), console.log("   Use `myop dev` to start the dev server for an existing component.\n"), process.exit(1));
+  const s = {
+    name: i,
+    componentId: "DEV",
+    type: "html",
+    author: "@myop-cli",
+    HMR: !0
+  };
+  e.writeFileSync("myop.config.json", JSON.stringify(s, null, 2));
+  const l = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="myop:size" content='{"width":"100%","height":"100%"}'>
+    <title>${i}</title>
+    <script type="myop/types">
+    // =========================================================================
+    // MYOP COMPONENT TYPE DEFINITIONS
+    // =========================================================================
+
+    /**
+     * Data structure passed to myop_init_interface(data)
+     */
+    interface MyopInitData {
+        title: string;
+        description?: string;
+    }
+
+    /**
+     * Actions and payloads for myop_cta_handler(action, payload)
+     */
+    interface MyopCtaPayloads {
+        'button-clicked': { label: string };
+        'size-requested': {
+            width?: number | null;
+            height?: number | null;
+            minWidth?: number | null;
+            maxWidth?: number | null;
+            minHeight?: number | null;
+            maxHeight?: number | null;
+            required?: boolean;
+        };
+    }
+
+    // =========================================================================
+    // DO NOT EDIT BELOW - Standard Myop type declarations
+    // =========================================================================
+
+    declare function myop_init_interface(): MyopInitData;
+    declare function myop_init_interface(data: MyopInitData): void;
+
+    declare function myop_cta_handler<K extends keyof MyopCtaPayloads>(
+        action: K,
+        payload: MyopCtaPayloads[K]
+    ): void;
+    <\/script>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            color: #333;
+        }
+
+        #app-root {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+        }
+
+        h1 {
+            font-size: 24px;
+            margin-bottom: 8px;
+            color: #1a1a1a;
+        }
+
+        p {
+            color: #666;
+            line-height: 1.5;
+        }
+    </style>
+</head>
+<body>
+    <div id="app-root">
+        <h1>${i}</h1>
+        <p>Edit index.html to get started</p>
+    </div>
+
+    <script>
+    (function() {
+        var currentState = {};
+
+        function render(data) {
+            currentState = data;
+            var root = document.getElementById('app-root');
+            root.innerHTML =
+                '<h1>' + (data.title || '') + '</h1>' +
+                (data.description ? '<p>' + data.description + '</p>' : '');
+        }
+
+        window.myop_init_interface = function(data) {
+            if (!data) return currentState;
+            render(data);
+        };
+
+        window.myop_cta_handler = function(action_id, payload) {
+            // Will be overridden by host application
+        };
+    })();
+    <\/script>
+
+    <script id="myop_preview">
+        window.myop_init_interface({
+            title: '${i}',
+            description: 'Edit index.html to get started'
+        });
+    <\/script>
+</body>
+</html>`;
+  e.writeFileSync("index.html", l);
+  const w = rt(process.cwd());
+  console.log(`
+✅ Created ${i}`), console.log("   index.html"), console.log("   myop.config.json"), w && console.log("   .agents/skills/ (AI agent skills)"), console.log(""), await be();
+});
+y.program.command("dev").description("Start development server with file watching").action(be);
+const to = () => {
   try {
-    Q("git --version", { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
+    q("git --version", { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
   } catch {
     return { gitNotInstalled: !0 };
   }
   try {
-    Q("git rev-parse --git-dir", { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
+    q("git rev-parse --git-dir", { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
   } catch {
     return { notARepo: !0 };
   }
   try {
-    const o = Q("git diff --stat HEAD -- . 2>/dev/null || git diff --stat -- . 2>/dev/null", {
+    const o = q("git diff --stat HEAD -- . 2>/dev/null || git diff --stat -- . 2>/dev/null", {
       encoding: "utf-8",
       stdio: ["pipe", "pipe", "pipe"]
     }).trim();
@@ -2076,22 +2412,22 @@ const Xt = () => {
         deletions: 0
       };
     const e = o.split(`
-`), t = e[e.length - 1], n = t.match(/(\d+) insertion/), r = t.match(/(\d+) deletion/), s = t.match(/(\d+) file/);
+`), t = e[e.length - 1], n = t.match(/(\d+) insertion/), i = t.match(/(\d+) deletion/), s = t.match(/(\d+) file/);
     return {
       files: s ? parseInt(s[1]) : 0,
       insertions: n ? parseInt(n[1]) : 0,
-      deletions: r ? parseInt(r[1]) : 0
+      deletions: i ? parseInt(i[1]) : 0
     };
   } catch {
     return null;
   }
-}, oe = async (o = !1, e = !1) => {
-  var p, S, g;
-  const t = be(), n = !!(t != null && t.email), r = ((p = y.myopConfig) == null ? void 0 : p.name) || ((S = y.myopConfig) == null ? void 0 : S.componentName), s = (g = y.myopConfig) == null ? void 0 : g.componentId, d = Xt();
+}, ne = async (o = !1, e = !1) => {
+  var d, C, u;
+  const t = xe(), n = !!(t != null && t.email), i = ((d = y.myopConfig) == null ? void 0 : d.name) || ((C = y.myopConfig) == null ? void 0 : C.componentName), s = (u = y.myopConfig) == null ? void 0 : u.componentId, l = to();
   console.log(`
 ┌─────────────────────────────────────────────────┐`), console.log("│                                                 │"), console.log("│   Welcome to Myop CLI - Remote UI Made Easy     │"), console.log("│                                                 │"), console.log(`└─────────────────────────────────────────────────┘
-`), o && r ? (console.log(`  Component:  ${r}`), s ? (console.log(`  ID:         ${s}`), console.log(`  Dashboard:  https://dashboard.myop.dev/dashboard/2.0/component/${s}`)) : console.log("  ID:         (not yet pushed)")) : console.log("  Component:  No myop.config.json found"), console.log(`  User:       ${n ? t.email : "Not logged in"}`), d != null && d.gitNotInstalled ? (console.log("  Changes:    Git not installed"), console.log("              Install: https://git-scm.com/downloads"), console.log("              Mac: brew install git | Windows: https://gitforwindows.org")) : d != null && d.notARepo ? console.log("  Changes:    Not a git repository") : d && (d.insertions > 0 || d.deletions > 0) ? console.log(`  Changes:    ${d.files} file${d.files !== 1 ? "s" : ""} | \x1B[32m+${d.insertions}\x1B[0m \x1B[31m-${d.deletions}\x1B[0m`) : d && console.log("  Changes:    No uncommitted changes"), console.log("");
-  const $ = [
+`), o && i ? (console.log(`  Component:  ${i}`), s ? (console.log(`  ID:         ${s}`), console.log(`  Dashboard:  https://dashboard.myop.dev/dashboard/2.0/component/${s}`)) : console.log("  ID:         (not yet pushed)")) : console.log("  Component:  No myop.config.json found"), console.log(`  User:       ${n ? t.email : "Not logged in"}`), l != null && l.gitNotInstalled ? (console.log("  Changes:    Git not installed"), console.log("              Install: https://git-scm.com/downloads"), console.log("              Mac: brew install git | Windows: https://gitforwindows.org")) : l != null && l.notARepo ? console.log("  Changes:    Not a git repository") : l && (l.insertions > 0 || l.deletions > 0) ? console.log(`  Changes:    ${l.files} file${l.files !== 1 ? "s" : ""} | \x1B[32m+${l.insertions}\x1B[0m \x1B[31m-${l.deletions}\x1B[0m`) : l && console.log("  Changes:    No uncommitted changes"), console.log("");
+  const v = [
     {
       emoji: "🚀",
       label: "Initialize new component",
@@ -2101,25 +2437,25 @@ const Xt = () => {
     },
     {
       emoji: "🛠️ ",
-      label: r ? `Start dev mode for "${r}"` : "Start dev mode",
+      label: i ? `Start dev mode for "${i}"` : "Start dev mode",
       value: "dev",
       help: "Starts dev server with HMR for instant preview of changes",
       disabled: o ? !1 : "(no config file)"
     },
     {
       emoji: "📦",
-      label: r ? `Push "${r}"` : "Push component",
+      label: i ? `Push "${i}"` : "Push component",
       value: "sync",
       help: "Builds project & uploads dist/index.html to Myop",
       disabled: o ? n ? !1 : "(login required)" : "(no config file)"
     }
-  ].map((b) => ({
-    name: e && !b.disabled ? `${b.emoji} ${b.label}
-     ${b.help}` : `${b.emoji} ${b.label}`,
-    value: b.value,
-    disabled: b.disabled
+  ].map((S) => ({
+    name: e && !S.disabled ? `${S.emoji} ${S.label}
+     ${S.help}` : `${S.emoji} ${S.label}`,
+    value: S.value,
+    disabled: S.disabled
   }));
-  $.push(
+  v.push(
     new Fe(),
     {
       name: e && n ? `🔓 Logout (${t.email})
@@ -2139,116 +2475,116 @@ const Xt = () => {
   );
   let m;
   try {
-    m = await Ge({
+    m = await Ye({
       message: "What would you like to do?",
-      choices: $
+      choices: v
     });
-  } catch (b) {
-    throw b.name === "ExitPromptError" && (console.log(`
+  } catch (S) {
+    throw S.name === "ExitPromptError" && (console.log(`
 
 👋 Goodbye!
-`), process.exit(0)), b;
+`), process.exit(0)), S;
   }
   switch (m) {
     case "init":
-      await oo();
+      await io();
       break;
     case "sync":
       console.log(`
 Running sync...
 `);
-      const { execSync: b } = await import("child_process");
+      const { execSync: S } = await import("child_process");
       try {
-        b("node " + process.argv[1] + " sync", { stdio: "inherit" });
+        S("node " + process.argv[1] + " sync", { stdio: "inherit" });
       } catch {
       }
-      await oe(!0, e);
+      await ne(!0, e);
       break;
     case "dev":
-      await Le();
+      await be();
       break;
     case "login":
       try {
-        await ce(), console.log(`
-`), await oe(o, e);
-      } catch (x) {
-        console.error("Login failed:", x.message), await oe(o, e);
+        await de(), console.log(`
+`), await ne(o, e);
+      } catch (M) {
+        console.error("Login failed:", M.message), await ne(o, e);
       }
       break;
     case "logout":
-      await ot(), console.log(`
-`), await oe(o, e);
+      await nt(), console.log(`
+`), await ne(o, e);
       break;
     case "help":
-      await oe(o, !e);
+      await ne(o, !e);
       break;
     case "exit":
       process.exit(0);
   }
-}, ve = ".myop-monorepo.json", qt = () => {
+}, ve = ".myop-monorepo.json", oo = () => {
   try {
-    const o = D.readFileSync(ve, "utf-8");
+    const o = R.readFileSync(ve, "utf-8");
     return JSON.parse(o);
   } catch {
     return null;
   }
-}, eo = (o) => {
+}, no = (o) => {
   try {
     const e = {
       selectedComponents: o,
       lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
     };
-    D.writeFileSync(ve, JSON.stringify(e, null, 2));
+    R.writeFileSync(ve, JSON.stringify(e, null, 2));
   } catch {
   }
-}, to = async () => {
-  const o = be(), e = !!(o != null && o.email);
+}, so = async () => {
+  const o = xe(), e = !!(o != null && o.email);
   console.log(`
 ┌─────────────────────────────────────────────────┐`), console.log("│                                                 │"), console.log("│   Myop CLI - Monorepo Mode                      │"), console.log("│                                                 │"), console.log(`└─────────────────────────────────────────────────┘
 `);
-  const t = V("Scanning for components...").start(), n = nt(".");
+  const t = G("Scanning for components...").start(), n = at(".");
   t.stop(), n.length === 0 && (console.log(`  ⚠️  No myop.config.json files found in this directory or subdirectories.
 `), console.log("  Run `myop` without -m flag to initialize a single component.\n"), process.exit(0));
-  const r = qt(), s = (r == null ? void 0 : r.selectedComponents) || [], d = s.length > 0;
+  const i = oo(), s = (i == null ? void 0 : i.selectedComponents) || [], l = s.length > 0;
   console.log(`  Found ${n.length} component${n.length > 1 ? "s" : ""}:
-`), n.forEach((g, b) => {
-    const x = g.componentId ? "✅" : "⚪", C = g.componentId ? g.componentId.substring(0, 8) + "..." : "(not pushed)";
-    console.log(`  ${x} ${g.name}`), console.log(`     Path: ${g.path}`), console.log(`     ID:   ${C}`), console.log("");
-  }), console.log(`  User: ${e ? o.email : "Not logged in"}`), d && console.log(`  📋 Using saved selection from ${ve}`), console.log("");
-  const { checkbox: w } = await import("@inquirer/prompts"), $ = n.map((g) => ({
-    name: `${g.name} (${g.path})`,
-    value: g.path,
-    checked: d ? s.includes(g.path) : !0
+`), n.forEach((u, S) => {
+    const M = u.componentId ? "✅" : "⚪", T = u.componentId ? u.componentId.substring(0, 8) + "..." : "(not pushed)";
+    console.log(`  ${M} ${u.name}`), console.log(`     Path: ${u.path}`), console.log(`     ID:   ${T}`), console.log("");
+  }), console.log(`  User: ${e ? o.email : "Not logged in"}`), l && console.log(`  📋 Using saved selection from ${ve}`), console.log("");
+  const { checkbox: w } = await import("@inquirer/prompts"), v = n.map((u) => ({
+    name: `${u.name} (${u.path})`,
+    value: u.path,
+    checked: l ? s.includes(u.path) : !0
   }));
   let m;
   try {
     m = await w({
       message: "Select components to start in dev mode:",
-      choices: $
+      choices: v
     });
-  } catch (g) {
-    throw g.name === "ExitPromptError" && (console.log(`
+  } catch (u) {
+    throw u.name === "ExitPromptError" && (console.log(`
 
 👋 Goodbye!
-`), process.exit(0)), g;
+`), process.exit(0)), u;
   }
   m.length === 0 && (console.log(`
 ⚠️  No components selected.
-`), process.exit(0)), eo(m), console.log(`
+`), process.exit(0)), no(m), console.log(`
 💾 Selection saved to ${ve}`);
-  const p = n.filter((g) => m.includes(g.path));
-  console.log(`🚀 Starting dev mode for ${p.length} component${p.length > 1 ? "s" : ""}...
+  const d = n.filter((u) => m.includes(u.path));
+  console.log(`🚀 Starting dev mode for ${d.length} component${d.length > 1 ? "s" : ""}...
 `);
-  const { monorepoDevCommand: S } = await Promise.resolve().then(() => Ft);
-  await S(p);
-}, oo = async () => {
-  const { input: o, select: e } = await import("@inquirer/prompts"), t = await import("fs"), r = (await import("path")).default.basename(process.cwd());
-  let s, d;
+  const { monorepoDevCommand: C } = await Promise.resolve().then(() => _t);
+  await C(d);
+}, io = async () => {
+  const { input: o, select: e } = await import("@inquirer/prompts"), t = await import("fs"), n = await import("path"), i = n.default.basename(process.cwd());
+  let s, l;
   try {
     s = await o({
       message: "Component name:",
-      default: r
-    }), d = await e({
+      default: i
+    }), l = await e({
       message: "Component type:",
       choices: [
         { name: "📄 HTML", value: "html", description: "Plain HTML/JS/CSS component" },
@@ -2265,13 +2601,13 @@ Running sync...
   }
   const w = {
     name: s,
-    type: d,
+    type: l,
     author: "@myop-cli",
     HMR: !0
-  }, $ = y.program.getOptionValue("config") || "./myop.config.json";
+  }, v = y.program.getOptionValue("config") || "./myop.config.json";
   try {
-    t.writeFileSync($, JSON.stringify(w, null, 2)), console.log(`
-✅ Created ${$}`);
+    t.writeFileSync(v, JSON.stringify(w, null, 2)), console.log(`
+✅ Created ${v}`);
     const m = {
       name: s.toLowerCase().replace(/\s+/g, "-"),
       version: "1.0.0",
@@ -2364,7 +2700,7 @@ fs.writeFileSync('dist/index.html', html);
 console.log('✅ Built dist/index.html');
 console.log(\`   Bundled \${jsFiles.length} JS modules, \${cssFiles.length} CSS files\`);
 `), console.log("✅ Created build.js");
-    const S = `<!DOCTYPE html>
+    const C = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -2381,8 +2717,8 @@ console.log(\`   Bundled \${jsFiles.length} JS modules, \${cssFiles.length} CSS
 </body>
 </html>
 `;
-    t.writeFileSync("index.html", S), console.log("✅ Created index.html");
-    const g = `// ${s} - Entry Point
+    t.writeFileSync("index.html", C), console.log("✅ Created index.html");
+    const u = `// ${s} - Entry Point
 import { init } from './modules/app.js';
 import { setupMyopInterface } from './modules/myop.js';
 
@@ -2391,8 +2727,8 @@ document.addEventListener('DOMContentLoaded', () => {
     setupMyopInterface();
 });
 `;
-    t.writeFileSync("src/index.js", g), console.log("✅ Created src/index.js");
-    const b = `// ${s} - Main Application Logic
+    t.writeFileSync("src/index.js", u), console.log("✅ Created src/index.js");
+    const S = `// ${s} - Main Application Logic
 
 export function init() {
     console.log('${s} loaded');
@@ -2400,7 +2736,7 @@ export function init() {
     // Your component logic here
 }
 `;
-    t.writeFileSync("src/modules/app.js", b), console.log("✅ Created src/modules/app.js"), t.writeFileSync("src/modules/myop.js", `// Myop Interface - Communication with host app
+    t.writeFileSync("src/modules/app.js", S), console.log("✅ Created src/modules/app.js"), t.writeFileSync("src/modules/myop.js", `// Myop Interface - Communication with host app
 
 export function setupMyopInterface() {
     // Called when host app sends data to this component
@@ -2416,12 +2752,12 @@ export function setupMyopInterface() {
     };
 }
 `), console.log("✅ Created src/modules/myop.js");
-    const C = `/* ${s} - Styles Entry Point */
+    const T = `/* ${s} - Styles Entry Point */
 /* Add your CSS imports here - they will be auto-bundled */
 @import './main.css';
 `;
-    t.writeFileSync("src/styles/index.css", C), console.log("✅ Created src/styles/index.css");
-    const L = `/* ${s} - Main Styles */
+    t.writeFileSync("src/styles/index.css", T), console.log("✅ Created src/styles/index.css");
+    const D = `/* ${s} - Main Styles */
 
 * {
     box-sizing: border-box;
@@ -2450,16 +2786,18 @@ p {
     line-height: 1.5;
 }
 `;
-    t.writeFileSync("src/styles/main.css", L), console.log("✅ Created src/styles/main.css"), t.writeFileSync(".gitignore", `node_modules/
+    t.writeFileSync("src/styles/main.css", D), console.log("✅ Created src/styles/main.css"), t.writeFileSync(".gitignore", `node_modules/
 dist/
 .temp-entry.js
 .temp-styles.css
 .DS_Store
 `), console.log("✅ Created .gitignore");
-    const f = await import("./index-DuEoKctW.js").then((E) => E.i), P = process.cwd();
+    const x = rt(process.cwd());
+    x && console.log("✅ Installed AI agent skills");
+    const j = await import("./index-DuEoKctW.js").then((f) => f.i), b = process.cwd();
     try {
-      await f.init({ fs: t, dir: P });
-      const E = [
+      await j.init({ fs: t, dir: b });
+      const f = [
         "myop.config.json",
         "package.json",
         "build.js",
@@ -2471,64 +2809,77 @@ dist/
         "src/styles/index.css",
         "src/styles/main.css"
       ];
-      for (const M of E)
-        await f.add({ fs: t, dir: P, filepath: M });
-      await f.commit({
+      if (x) {
+        const E = (_, B) => {
+          try {
+            const U = t.readdirSync(_, { withFileTypes: !0 });
+            for (const k of U) {
+              const z = n.join(_, k.name), I = n.join(B, k.name);
+              k.isDirectory() ? E(z, I) : f.push(I);
+            }
+          } catch {
+          }
+        };
+        E(".agents/skills", ".agents/skills");
+      }
+      for (const E of f)
+        await j.add({ fs: t, dir: b, filepath: E });
+      await j.commit({
         fs: t,
-        dir: P,
+        dir: b,
         message: "init",
         author: { name: "myop-cli", email: "cli@myop.dev" }
       }), console.log("✅ Initialized git repository");
-    } catch (E) {
-      console.log("⚠️  Failed to initialize git repository:", E.message);
+    } catch (f) {
+      console.log("⚠️  Failed to initialize git repository:", f.message);
     }
     console.log(`
 📦 Next steps:`), console.log("  1. npm install"), console.log("  2. npm run build"), console.log(`  3. myop sync
-`), y.myopConfig = w, await oe(!0);
+`), y.myopConfig = w, await ne(!0);
   } catch (m) {
     console.error(`Failed to initialize component: ${m.message}`), process.exit(1);
   }
 };
 y.program.command("default", { isDefault: !0 }).action(async () => {
-  if (y.program.getOptionValue("help") && (console.log(yt), process.exit()), y.program.getOptionValue("monorepo")) {
-    await to();
+  if (y.program.getOptionValue("help") && (console.log(bt), process.exit()), y.program.getOptionValue("monorepo")) {
+    await so();
     return;
   }
   if (y.program.getOptionValue("ci")) {
-    const w = await import("fs"), $ = y.program.getOptionValue("config") || "./myop.config.json", m = y.program.version(), p = be();
-    let S = { found: !1 };
+    const w = await import("fs"), v = y.program.getOptionValue("config") || "./myop.config.json", m = y.program.version(), d = xe();
+    let C = { found: !1 };
     try {
-      if (w.existsSync($)) {
-        const b = w.readFileSync($, "utf-8"), x = JSON.parse(b);
-        S = {
+      if (w.existsSync(v)) {
+        const S = w.readFileSync(v, "utf-8"), M = JSON.parse(S);
+        C = {
           found: !0,
-          path: $,
-          name: x.name || x.componentName || null,
-          componentId: x.componentId || null,
-          organization: x.organization || null
+          path: v,
+          name: M.name || M.componentName || null,
+          componentId: M.componentId || null,
+          organization: M.organization || null
         };
       }
-    } catch (b) {
-      S = { found: !1, error: b.message };
+    } catch (S) {
+      C = { found: !1, error: S.message };
     }
-    const g = {
+    const u = {
       version: m,
-      config: S,
+      config: C,
       auth: {
-        loggedIn: !!(p != null && p.email),
-        email: (p == null ? void 0 : p.email) || null
+        loggedIn: !!(d != null && d.email),
+        email: (d == null ? void 0 : d.email) || null
       }
     };
-    console.log(JSON.stringify(g, null, 2)), process.exit(0);
+    console.log(JSON.stringify(u, null, 2)), process.exit(0);
   }
-  let n = V({
+  let n = G({
     text: "Loading Myop CLI...",
     color: "green"
   }).start();
-  const r = Se();
-  await Qt(500), n.stop();
+  const i = $e();
+  await Xt(500), n.stop();
   const s = y.program.version();
-  await Kt(s) || await oe(r.configFound);
+  await Zt(s) || await ne(i.configFound);
 });
 y.program.parse(process.argv);
 y.program.opts();