@myop/cli 0.1.10 → 0.1.11

package/dist/myop-cli.js

@@ -1,10 +1,16 @@
 #!/usr/bin/env node
-import be from "ora";
-import { Separator as xe, select as $e } from "@inquirer/prompts";
-import { Command as Me, Option as Z } from "commander";
-import K from "path";
-import re from "fs";
-const Pe = `
+import A from "ora";
+import { select as $e, Separator as de } from "@inquirer/prompts";
+import { Command as ze, Option as me } from "commander";
+import { execSync as ne } from "child_process";
+import Z from "path";
+import E from "fs";
+import ue from "crypto";
+import We from "http";
+import { URL as Me, URLSearchParams as je } from "url";
+import Ye from "open";
+import Ge from "os";
+const Ve = `
 Usage: myop [OPTIONS] COMMAND [ARGS]...
 
 A powerful command-line interface for managing your Myop projects.
@@ -38,7 +44,7 @@ Examples:
 
 
 
-`, a = {
+`, l = {
   program: null,
   executionPath: "",
   options: {
@@ -46,89 +52,89 @@ Examples:
     verbose: !1
   },
   myopConfig: null
-}, ae = {
+}, Oe = {
   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 i of a.myopConfig.flows) {
-      const s = K.join(a.executionPath, "/node_modules/@myop/flow-types/");
-      console.info(`Generate flow at ${s}`), console.info(`Generated flow at ${s}`);
+    for (const e of l.myopConfig.flows) {
+      const o = Z.join(l.executionPath, "/node_modules/@myop/flow-types/");
+      console.info(`Generate flow at ${o}`), console.info(`Generated flow at ${o}`);
     }
     process.exit();
   }
-}, He = (i) => {
-  const s = K.join(a.executionPath, i);
-  console.info(`reading config file from: ${s}`);
-  const m = re.readFileSync(s, "utf8"), d = JSON.parse(m);
-  return console.info("config file loaded, ", d), d;
-}, q = (i, s) => {
-  const m = K.join(a.executionPath, i);
-  console.info(`writing config file to: ${m}`);
+}, Ke = (e) => {
+  const o = Z.join(l.executionPath, e);
+  console.info(`reading config file from: ${o}`);
+  const n = E.readFileSync(o, "utf8"), a = JSON.parse(n);
+  return console.info("config file loaded, ", a), a;
+}, fe = (e, o) => {
+  const n = Z.join(l.executionPath, e);
+  console.info(`writing config file to: ${n}`);
   try {
-    const d = JSON.stringify(s, null, 2);
-    re.writeFileSync(m, d), console.info(`config file updated ${d}`);
-  } catch (d) {
-    throw console.info(`error ${d} while writing to ${m}, JSON: ${s}`), console.log(`
-⚠️ Failed write config file to ${m}, for more info use verbose flag`), d;
+    const a = JSON.stringify(o, null, 2);
+    E.writeFileSync(n, a), console.info(`config file updated ${a}`);
+  } catch (a) {
+    throw console.info(`error ${a} while writing to ${n}, JSON: ${o}`), console.log(`
+⚠️ Failed write config file to ${n}, for more info use verbose flag`), a;
   }
-}, ce = {
+}, ke = {
   name: "🌟 Add flow definition to your project",
   value: "addFlow",
   description: "Adds flow to yours myop.config.json",
-  _action: (i) => {
-    a.myopConfig.flows.includes(i) || a.myopConfig.flows.push(i), q(a.options.configPath, a.myopConfig);
+  _action: (e) => {
+    l.myopConfig.flows.includes(e) || l.myopConfig.flows.push(e), fe(l.options.configPath, l.myopConfig);
   },
   action: async () => {
   }
-}, le = {
+}, Ie = {
   name: "🚫 Remove flow definition from your project",
   value: "removeFlow",
   description: "Removes flow to yours myop.config.json",
-  _action: (i) => {
-    a.myopConfig.flows = a.myopConfig.flows.filter((s) => s !== i), q(a.options.configPath, a.myopConfig);
+  _action: (e) => {
+    l.myopConfig.flows = l.myopConfig.flows.filter((o) => o !== e), fe(l.options.configPath, l.myopConfig);
   },
   action: () => {
   }
-}, Te = {
+}, Xe = {
   name: "👋 Quit",
   value: "quit",
   description: "Quit and continue coding.",
   action: () => {
     process.exit();
   }
-}, Re = {
+}, Qe = {
   name: "🟢 Create new component",
   value: "-",
   disabled: "(not available yet)"
-}, Ae = {
+}, Ze = {
   name: "🔵 Create new experience",
   value: "-",
   disabled: "(not available yet)"
-}, Ie = {
+}, qe = {
   name: "🟡 Create new skin",
   value: "-",
   disabled: "(not available yet)"
-}, _e = {
+}, et = {
   name: "🔴 Create new flow",
   value: "-",
   disabled: "(not available yet)"
-}, Ne = {
+}, tt = {
   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)"
-}, je = [Ne, Re, Ae, Ie, _e];
-function Fe(i, s, m, d) {
+}, ot = [tt, Qe, Ze, qe, et];
+function nt(e, o, n, a) {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Myop DevTools - localhost:${i}</title>
+<title>Myop DevTools - localhost:${e}</title>
 <style>
-${m}
+${n}
 </style>
 </head>
 <body>
@@ -136,8 +142,8 @@ ${m}
     <div class="toolbar">
         <div class="toolbar-title">Myop DevTools</div>
         <div class="toolbar-info">
-            <span><div class="status-dot"></div> localhost:${i}</span>
-            <span>Management: ${s}</span>
+            <span><div class="status-dot"></div> localhost:${e}</span>
+            <span>Management: ${o}</span>
         </div>
     </div>
 
@@ -203,33 +209,33 @@ ${m}
 
 <script>
 // Inject PORT as a global variable for the app to use
-window.PORT = ${i};
+window.PORT = ${e};
 
-${d}
+${a}
 <\/script>
 </body>
 </html>`;
 }
-async function Ee() {
-  const i = await import("fs"), s = await import("path"), { exec: m } = await import("child_process"), d = await import("http"), { createHash: I } = await import("node:crypto");
-  let P;
+async function Pe() {
+  const e = await import("fs"), o = await import("path"), { exec: n } = await import("child_process"), a = await import("http"), { createHash: u } = await import("node:crypto");
+  let c;
   if (import.meta.url.startsWith("file://")) {
-    const o = import.meta.url.slice(7);
-    P = s.default.dirname(o);
+    const s = import.meta.url.slice(7);
+    c = o.default.dirname(s);
   } else
-    P = s.default.dirname(import.meta.url);
-  const _ = s.default.join(P, "commands", "dev", "management-website"), E = i.default.readFileSync(s.default.join(_, "styles.css"), "utf-8"), J = i.default.readFileSync(s.default.join(_, "app.js"), "utf-8"), S = 9292, h = 9293, y = "./dist";
-  let N = !1, Y = !1;
-  const V = /* @__PURE__ */ new Map(), me = a.program.getOptionValue("config") || "./myop.config.json";
-  let g, x, D = !1;
+    c = o.default.dirname(import.meta.url);
+  const p = o.default.join(c, "commands", "dev", "management-website"), v = e.default.readFileSync(o.default.join(p, "styles.css"), "utf-8"), j = e.default.readFileSync(o.default.join(p, "app.js"), "utf-8"), g = 9292, y = 9293, w = "./dist";
+  let I = !1, C = !1;
+  const _ = /* @__PURE__ */ new Map(), B = l.program.getOptionValue("config") || "./myop.config.json";
+  let S, P, f = !1;
   try {
-    const o = i.default.readFileSync(me, "utf-8"), e = JSON.parse(o);
-    g = e.componentId, x = e.componentName || null, D = e.HMR === !0, g || (console.error("❌ Error: componentId not found in myop.config.json"), process.exit(1)), D && console.log("🔥 HMR enabled");
-  } catch (o) {
-    console.error("❌ Error reading myop.config.json:", o.message), process.exit(1);
+    const s = e.default.readFileSync(B, "utf-8"), t = JSON.parse(s);
+    S = t.componentId, P = t.componentName || null, f = t.HMR === !0, S || (console.error("❌ Error: componentId not found in myop.config.json"), process.exit(1)), f && console.log("🔥 HMR enabled");
+  } catch (s) {
+    console.error("❌ Error reading myop.config.json:", s.message), process.exit(1);
   }
-  const L = process.cwd(), fe = (o) => {
-    const e = s.default.extname(o).toLowerCase();
+  const b = process.cwd(), H = (s) => {
+    const t = o.default.extname(s).toLowerCase();
     return {
       ".html": "text/html",
       ".js": "text/javascript",
@@ -240,314 +246,314 @@ async function Ee() {
       ".gif": "image/gif",
       ".svg": "image/svg+xml",
       ".ico": "image/x-icon"
-    }[e] || "application/octet-stream";
-  }, u = /* @__PURE__ */ new Map(), U = [], ge = 50, $ = [], T = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), ue = (o, e, t) => {
-    if (o.url.startsWith("/_hmr/")) {
-      const n = o.url.split("/_hmr/")[1], c = o.headers["sec-websocket-key"], r = I("sha1").update(c + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");
-      e.write(
+    }[t] || "application/octet-stream";
+  }, $ = /* @__PURE__ */ new Map(), F = [], Ne = 50, L = [], z = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map(), Ae = (s, t, r) => {
+    if (s.url.startsWith("/_hmr/")) {
+      const i = s.url.split("/_hmr/")[1], m = s.headers["sec-websocket-key"], d = u("sha1").update(m + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");
+      t.write(
         `HTTP/1.1 101 Switching Protocols\r
 Upgrade: websocket\r
 Connection: Upgrade\r
-Sec-WebSocket-Accept: ${r}\r
+Sec-WebSocket-Accept: ${d}\r
 \r
 `
-      ), H.has(n) || H.set(n, /* @__PURE__ */ new Set()), H.get(n).add(e), console.log(`🔌 HMR client connected: ${n}`), e.on("close", () => {
-        const l = H.get(n);
-        l && (l.delete(e), l.size === 0 && H.delete(n)), console.log(`🔌 HMR client disconnected: ${n}`);
-      }), e.on("error", () => {
-        const l = H.get(n);
-        l && l.delete(e);
+      ), D.has(i) || D.set(i, /* @__PURE__ */ new Set()), D.get(i).add(t), console.log(`🔌 HMR client connected: ${i}`), t.on("close", () => {
+        const h = D.get(i);
+        h && (h.delete(t), h.size === 0 && D.delete(i)), console.log(`🔌 HMR client disconnected: ${i}`);
+      }), t.on("error", () => {
+        const h = D.get(i);
+        h && h.delete(t);
       });
     }
-  }, X = d.default.createServer((o, e) => {
-    if (e.setHeader("Content-Type", "application/json"), o.method === "POST" && o.url === "/_register") {
-      let t = "";
-      o.on("data", (n) => t += n), o.on("end", () => {
+  }, ae = a.default.createServer((s, t) => {
+    if (t.setHeader("Content-Type", "application/json"), s.method === "POST" && s.url === "/_register") {
+      let r = "";
+      s.on("data", (i) => r += i), s.on("end", () => {
         try {
-          const { componentId: n, distPath: c, componentName: r } = JSON.parse(t);
-          u.set(n, { path: c, name: r || null });
-          const l = r ? ` (${r})` : "";
-          console.log(`✅ Registered: ${n}${l} -> ${c}`), e.writeHead(200), e.end(JSON.stringify({ success: !0, registered: Array.from(u.keys()) }));
-          const w = Array.from(u.entries()).map(([C, j]) => ({
-            id: C,
-            path: j.path,
-            name: j.name
+          const { componentId: i, distPath: m, componentName: d } = JSON.parse(r);
+          $.set(i, { path: m, name: d || null });
+          const h = d ? ` (${d})` : "";
+          console.log(`✅ Registered: ${i}${h} -> ${m}`), t.writeHead(200), t.end(JSON.stringify({ success: !0, registered: Array.from($.keys()) }));
+          const O = Array.from($.entries()).map(([T, V]) => ({
+            id: T,
+            path: V.path,
+            name: V.name
           }));
-          $.forEach((C) => {
+          L.forEach((T) => {
             try {
-              C.write(`data: ${JSON.stringify({
+              T.write(`data: ${JSON.stringify({
                 type: "components",
-                components: w
+                components: O
               })}
 
 `);
             } catch {
             }
           });
-        } catch (n) {
-          e.writeHead(400), e.end(JSON.stringify({ error: n.message }));
+        } catch (i) {
+          t.writeHead(400), t.end(JSON.stringify({ error: i.message }));
         }
       });
-    } else if (o.method === "POST" && o.url === "/_unregister") {
-      let t = "";
-      o.on("data", (n) => t += n), o.on("end", () => {
+    } else if (s.method === "POST" && s.url === "/_unregister") {
+      let r = "";
+      s.on("data", (i) => r += i), s.on("end", () => {
         try {
-          const { componentId: n } = JSON.parse(t);
-          u.delete(n), console.log(`❌ Unregistered: ${n}`), e.writeHead(200), e.end(JSON.stringify({ success: !0 }));
-          const c = Array.from(u.entries()).map(([r, l]) => ({
-            id: r,
-            path: l.path,
-            name: l.name
+          const { componentId: i } = JSON.parse(r);
+          $.delete(i), console.log(`❌ Unregistered: ${i}`), t.writeHead(200), t.end(JSON.stringify({ success: !0 }));
+          const m = Array.from($.entries()).map(([d, h]) => ({
+            id: d,
+            path: h.path,
+            name: h.name
           }));
-          $.forEach((r) => {
+          L.forEach((d) => {
             try {
-              r.write(`data: ${JSON.stringify({
+              d.write(`data: ${JSON.stringify({
                 type: "components",
-                components: c
+                components: m
               })}
 
 `);
             } catch {
             }
           });
-        } catch (n) {
-          e.writeHead(400), e.end(JSON.stringify({ error: n.message }));
+        } catch (i) {
+          t.writeHead(400), t.end(JSON.stringify({ error: i.message }));
         }
       });
-    } else o.method === "GET" && o.url === "/_list" ? (e.writeHead(200), e.end(JSON.stringify({ components: Array.from(u.entries()) }))) : (e.writeHead(404), e.end(JSON.stringify({ error: "Not found" })));
-  }), k = d.default.createServer((o, e) => {
-    if (o.url.includes("..")) {
-      e.writeHead(403, { "Content-Type": "text/plain" }), e.end("Forbidden");
+    } else s.method === "GET" && s.url === "/_list" ? (t.writeHead(200), t.end(JSON.stringify({ components: Array.from($.entries()) }))) : (t.writeHead(404), t.end(JSON.stringify({ error: "Not found" })));
+  }), q = a.default.createServer((s, t) => {
+    if (s.url.includes("..")) {
+      t.writeHead(403, { "Content-Type": "text/plain" }), t.end("Forbidden");
       return;
     }
-    const t = new URL(o.url, `http://localhost:${S}`), n = t.pathname, c = n.split("/").filter((v) => v);
-    if (n.startsWith("/consume")) {
-      const v = t.searchParams.get("id");
-      if (!v) {
-        e.writeHead(400, { "Content-Type": "application/json" }), e.end(JSON.stringify({ error: "Component ID required. Use /consume?id=<componentId>" }));
+    const r = new URL(s.url, `http://localhost:${g}`), i = r.pathname, m = i.split("/").filter((k) => k);
+    if (i.startsWith("/consume")) {
+      const k = r.searchParams.get("id");
+      if (!k) {
+        t.writeHead(400, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Component ID required. Use /consume?id=<componentId>" }));
         return;
       }
-      const b = u.get(v), M = b ? b.path : null, ie = (R) => {
-        let p = "Unknown", O = "Unknown";
-        if (o.headers.referer || o.headers.referrer) {
-          const f = o.headers.referer || o.headers.referrer;
+      const N = $.get(k), J = N ? N.path : null, Ce = (W) => {
+        let x = "Unknown", R = "Unknown";
+        if (s.headers.referer || s.headers.referrer) {
+          const M = s.headers.referer || s.headers.referrer;
           try {
-            const A = new URL(f);
-            p = A.origin, O = A.hostname || A.origin;
+            const Y = new URL(M);
+            x = Y.origin, R = Y.hostname || Y.origin;
           } catch {
-            p = f, O = f;
+            x = M, R = M;
           }
-        } else if (o.headers.origin)
+        } else if (s.headers.origin)
           try {
-            const f = new URL(o.headers.origin);
-            p = f.origin, O = f.hostname || f.origin;
+            const M = new URL(s.headers.origin);
+            x = M.origin, R = M.hostname || M.origin;
           } catch {
-            p = o.headers.origin, O = o.headers.origin;
+            x = s.headers.origin, R = s.headers.origin;
           }
-        else if (o.socket.remoteAddress) {
-          const f = o.socket.remoteAddress;
-          f === "::1" || f === "::ffff:127.0.0.1" ? (p = "localhost", O = "localhost (direct)") : (p = f, O = f.replace("::ffff:", ""));
+        else if (s.socket.remoteAddress) {
+          const M = s.socket.remoteAddress;
+          M === "::1" || M === "::ffff:127.0.0.1" ? (x = "localhost", R = "localhost (direct)") : (x = M, R = M.replace("::ffff:", ""));
         }
-        const Q = o.headers.referer || o.headers.referrer || p, W = {
+        const le = s.headers.referer || s.headers.referrer || x, te = {
           type: "request",
-          componentId: v,
+          componentId: k,
           timestamp: Date.now(),
-          servedLocally: R,
-          referrer: Q,
-          origin: p,
-          originLabel: O
+          servedLocally: W,
+          referrer: le,
+          origin: x,
+          originLabel: R
         };
-        T.has(p) || (T.set(p, {
-          url: p,
-          label: O,
+        z.has(x) || (z.set(x, {
+          url: x,
+          label: R,
           firstSeen: Date.now(),
           requestCount: 0
-        }), $.forEach((f) => {
+        }), L.forEach((M) => {
           try {
-            f.write(`data: ${JSON.stringify({
+            M.write(`data: ${JSON.stringify({
               type: "origins",
-              origins: Array.from(T.values())
+              origins: Array.from(z.values())
             })}
 
 `);
           } catch {
           }
         }));
-        const Oe = T.get(p);
-        Oe.requestCount++, $.forEach((f) => {
+        const Be = z.get(x);
+        Be.requestCount++, L.forEach((M) => {
           try {
-            f.write(`data: ${JSON.stringify({
+            M.write(`data: ${JSON.stringify({
               type: "origins",
-              origins: Array.from(T.values())
+              origins: Array.from(z.values())
             })}
 
 `);
           } catch {
           }
-        }), U.push(W), U.length > ge && U.shift(), $.forEach((f) => {
+        }), F.push(te), F.length > Ne && F.shift(), L.forEach((M) => {
           try {
-            f.write(`data: ${JSON.stringify(W)}
+            M.write(`data: ${JSON.stringify(te)}
 
 `);
           } catch {
           }
         });
       };
-      if (M) {
-        const R = s.default.join(M, "index.html");
-        i.default.readFile(R, "utf-8", (p, O) => {
-          if (p) {
-            console.log(`❌ File not found: ${R}`), e.writeHead(404, { "Content-Type": "application/json" }), e.end(JSON.stringify({ error: "index.html not found" }));
+      if (J) {
+        const W = o.default.join(J, "index.html");
+        e.default.readFile(W, "utf-8", (x, R) => {
+          if (x) {
+            console.log(`❌ File not found: ${W}`), t.writeHead(404, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "index.html not found" }));
             return;
           }
-          const Q = `dev-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, W = {
+          const le = `dev-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, te = {
             item: {
-              name: v,
-              id: v,
+              name: k,
+              id: k,
               consume_variant: [
                 {
-                  id: Q,
+                  id: le,
                   name: "dev version",
                   loader: {
                     type: "HTMLLoader",
                     shadowRootMode: "localFrame",
-                    HTML: O
+                    HTML: R
                   }
                 }
               ]
             }
           };
-          console.log(`✅ Serving consume JSON for: ${v}`), ie(!0), e.writeHead(200, {
+          console.log(`✅ Serving consume JSON for: ${k}`), Ce(!0), t.writeHead(200, {
             "Content-Type": "application/json",
             "Access-Control-Allow-Origin": "*"
-          }), e.end(JSON.stringify(W, null, 2));
+          }), t.end(JSON.stringify(te, null, 2));
         });
       } else {
-        console.log(`📡 Proxying consume request to cloud.myop.dev for: ${v}`);
-        const R = `https://cloud.myop.dev/consume${t.search}`;
-        ie(!1), fetch(R).then((p) => p.text()).then((p) => {
-          e.writeHead(200, {
+        console.log(`📡 Proxying consume request to cloud.myop.dev for: ${k}`);
+        const W = `https://cloud.myop.dev/consume${r.search}`;
+        Ce(!1), fetch(W).then((x) => x.text()).then((x) => {
+          t.writeHead(200, {
             "Content-Type": "application/json",
             "Access-Control-Allow-Origin": "*"
-          }), e.end(p);
-        }).catch((p) => {
-          console.error(`❌ Proxy error: ${p.message}`), e.writeHead(502, { "Content-Type": "application/json" }), e.end(JSON.stringify({ error: "Failed to fetch from cloud.myop.dev" }));
+          }), t.end(x);
+        }).catch((x) => {
+          console.error(`❌ Proxy error: ${x.message}`), t.writeHead(502, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Failed to fetch from cloud.myop.dev" }));
         });
       }
       return;
     }
-    if (n === "/events") {
-      e.writeHead(200, {
+    if (i === "/events") {
+      t.writeHead(200, {
         "Content-Type": "text/event-stream",
         "Cache-Control": "no-cache",
         Connection: "keep-alive",
         "Access-Control-Allow-Origin": "*"
-      }), $.push(e);
-      const v = Array.from(u.entries()).map(([b, M]) => ({
-        id: b,
-        path: M.path,
-        name: M.name
+      }), L.push(t);
+      const k = Array.from($.entries()).map(([N, J]) => ({
+        id: N,
+        path: J.path,
+        name: J.name
       }));
-      e.write(`data: ${JSON.stringify({
+      t.write(`data: ${JSON.stringify({
         type: "components",
-        components: v
+        components: k
       })}
 
-`), e.write(`data: ${JSON.stringify({
+`), t.write(`data: ${JSON.stringify({
         type: "origins",
-        origins: Array.from(T.values())
+        origins: Array.from(z.values())
       })}
 
-`), e.write(`data: ${JSON.stringify({
+`), t.write(`data: ${JSON.stringify({
         type: "requestLog",
-        log: U
+        log: F
       })}
 
-`), o.on("close", () => {
-        const b = $.indexOf(e);
-        b !== -1 && $.splice(b, 1);
+`), s.on("close", () => {
+        const N = L.indexOf(t);
+        N !== -1 && L.splice(N, 1);
       });
       return;
     }
-    if (c.length === 0) {
-      e.writeHead(200, { "Content-Type": "text/html" }), e.end(Fe(S, h, E, J));
+    if (m.length === 0) {
+      t.writeHead(200, { "Content-Type": "text/html" }), t.end(nt(g, y, v, j));
       return;
     }
-    if (c[0] !== "view") {
-      e.writeHead(404, { "Content-Type": "text/plain" }), e.end("Not found. Use /view/<componentId>/ to access components.");
+    if (m[0] !== "view") {
+      t.writeHead(404, { "Content-Type": "text/plain" }), t.end("Not found. Use /view/<componentId>/ to access components.");
       return;
     }
-    if (c.length < 2) {
-      e.writeHead(400, { "Content-Type": "text/plain" }), e.end("Component ID required. Use /view/<componentId>/");
+    if (m.length < 2) {
+      t.writeHead(400, { "Content-Type": "text/plain" }), t.end("Component ID required. Use /view/<componentId>/");
       return;
     }
-    const r = c[1], l = u.get(r);
-    if (!l) {
-      e.writeHead(404, { "Content-Type": "text/plain" }), e.end(`Component not found: ${r}`);
+    const d = m[1], h = $.get(d);
+    if (!h) {
+      t.writeHead(404, { "Content-Type": "text/plain" }), t.end(`Component not found: ${d}`);
       return;
     }
-    const w = l.path, C = c.slice(2), j = C.length === 0 ? "index.html" : C.join("/"), F = s.default.join(w, j);
-    console.log(`📥 Request: ${o.url} -> ${F}`), i.default.readFile(F, (v, b) => {
-      if (v) {
-        console.log(`❌ File not found: ${F}`), e.writeHead(404, { "Content-Type": "text/plain" }), e.end("Not Found");
+    const O = h.path, T = m.slice(2), V = T.length === 0 ? "index.html" : T.join("/"), K = o.default.join(O, V);
+    console.log(`📥 Request: ${s.url} -> ${K}`), e.default.readFile(K, (k, N) => {
+      if (k) {
+        console.log(`❌ File not found: ${K}`), t.writeHead(404, { "Content-Type": "text/plain" }), t.end("Not Found");
         return;
       }
-      const M = fe(F);
-      console.log(`✅ Serving: ${F} (${M})`), e.writeHead(200, {
-        "Content-Type": M,
+      const J = H(K);
+      console.log(`✅ Serving: ${K} (${J})`), t.writeHead(200, {
+        "Content-Type": J,
         "Access-Control-Allow-Origin": "*"
-      }), e.end(b);
+      }), t.end(N);
     });
-  }), ee = () => new Promise((o, e) => {
-    const t = JSON.stringify({
-      componentId: g,
-      distPath: s.default.resolve(L, y),
-      componentName: x
-    }), n = {
+  }), ye = () => new Promise((s, t) => {
+    const r = JSON.stringify({
+      componentId: S,
+      distPath: o.default.resolve(b, w),
+      componentName: P
+    }), i = {
       hostname: "localhost",
-      port: h,
+      port: y,
       path: "/_register",
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Content-Length": Buffer.byteLength(t)
+        "Content-Length": Buffer.byteLength(r)
       }
-    }, c = d.default.request(n, (r) => {
-      let l = "";
-      r.on("data", (w) => l += w), r.on("end", () => {
-        r.statusCode === 200 ? o(JSON.parse(l)) : e(new Error(`Registration failed: ${r.statusCode}`));
+    }, m = a.default.request(i, (d) => {
+      let h = "";
+      d.on("data", (O) => h += O), d.on("end", () => {
+        d.statusCode === 200 ? s(JSON.parse(h)) : t(new Error(`Registration failed: ${d.statusCode}`));
       });
     });
-    c.on("error", e), c.write(t), c.end();
-  }), he = () => new Promise((o, e) => {
-    const t = JSON.stringify({ componentId: g }), n = {
+    m.on("error", t), m.write(r), m.end();
+  }), Ee = () => new Promise((s, t) => {
+    const r = JSON.stringify({ componentId: S }), i = {
       hostname: "localhost",
-      port: h,
+      port: y,
       path: "/_unregister",
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Content-Length": Buffer.byteLength(t)
+        "Content-Length": Buffer.byteLength(r)
       }
-    }, c = d.default.request(n, (r) => {
-      o();
+    }, m = a.default.request(i, (d) => {
+      s();
     });
-    c.on("error", () => o()), c.write(t), c.end();
-  }), ye = () => {
-    if (!D) return;
-    const o = s.default.join(y, "index.html");
+    m.on("error", () => s()), m.write(r), m.end();
+  }), He = () => {
+    if (!f) return;
+    const s = o.default.join(w, "index.html");
     try {
-      let e = i.default.readFileSync(o, "utf-8");
-      if (e.includes("<!-- MYOP HMR -->")) {
-        const n = e.indexOf("<!-- MYOP HMR -->"), c = e.indexOf("<\/script>", n) + 9;
-        e = e.slice(0, n) + e.slice(c);
+      let t = e.default.readFileSync(s, "utf-8");
+      if (t.includes("<!-- MYOP HMR -->")) {
+        const i = t.indexOf("<!-- MYOP HMR -->"), m = t.indexOf("<\/script>", i) + 9;
+        t = t.slice(0, i) + t.slice(m);
       }
-      const t = `
+      const r = `
 <!-- MYOP HMR -->
 <script>
 (function() {
-    const componentId = '${g}';
-    const wsUrl = 'ws://localhost:${h}/_hmr/' + componentId;
+    const componentId = '${S}';
+    const wsUrl = 'ws://localhost:${y}/_hmr/' + componentId;
     let ws;
     let reconnectAttempts = 0;
     const maxReconnectAttempts = 10;
@@ -648,318 +654,1198 @@ Sec-WebSocket-Accept: ${r}\r
 })();
 <\/script>
 `;
-      e.includes("</body>") ? e = e.replace("</body>", `${t}</body>`) : e.includes("</html>") ? e = e.replace("</html>", `${t}</html>`) : e += t, i.default.writeFileSync(o, e, "utf-8"), console.log("🔥 HMR script injected");
-    } catch (e) {
-      console.error("❌ Failed to inject HMR script:", e.message);
+      t.includes("</body>") ? t = t.replace("</body>", `${r}</body>`) : t.includes("</html>") ? t = t.replace("</html>", `${r}</html>`) : t += r, e.default.writeFileSync(s, t, "utf-8"), console.log("🔥 HMR script injected");
+    } catch (t) {
+      console.error("❌ Failed to inject HMR script:", t.message);
     }
-  }, we = (o) => {
-    const e = Buffer.from(o), t = e.length;
-    let n;
-    return t < 126 ? n = Buffer.concat([
-      Buffer.from([129, t]),
+  }, Le = (s) => {
+    const t = Buffer.from(s), r = t.length;
+    let i;
+    return r < 126 ? i = Buffer.concat([
+      Buffer.from([129, r]),
       // FIN + text frame, length
-      e
-    ]) : t < 65536 ? n = Buffer.concat([
+      t
+    ]) : r < 65536 ? i = Buffer.concat([
       Buffer.from([129, 126]),
       // FIN + text frame, extended length
-      Buffer.from([t >> 8, t & 255]),
+      Buffer.from([r >> 8, r & 255]),
       // 16-bit length
-      e
-    ]) : n = Buffer.concat([
+      t
+    ]) : i = Buffer.concat([
       Buffer.from([129, 127]),
       // FIN + text frame, extended length
-      Buffer.from([0, 0, 0, 0, t >> 24, t >> 16 & 255, t >> 8 & 255, t & 255]),
+      Buffer.from([0, 0, 0, 0, r >> 24, r >> 16 & 255, r >> 8 & 255, r & 255]),
       // 64-bit length
-      e
-    ]), n;
-  }, ve = () => {
-    if (!D) return;
-    const o = H.get(g);
-    if (!o || o.size === 0)
+      t
+    ]), i;
+  }, Je = () => {
+    if (!f) return;
+    const s = D.get(S);
+    if (!s || s.size === 0)
       return;
-    console.log(`🔥 Notifying ${o.size} HMR client(s)`);
-    const e = s.default.join(y, "index.html");
+    console.log(`🔥 Notifying ${s.size} HMR client(s)`);
+    const t = o.default.join(w, "index.html");
     try {
-      let t = i.default.readFileSync(e, "utf-8");
-      if (t.includes("<!-- MYOP HMR -->")) {
-        const r = t.indexOf("<!-- MYOP HMR -->"), l = t.indexOf("<\/script>", r) + 9;
-        t = t.slice(0, r) + t.slice(l);
+      let r = e.default.readFileSync(t, "utf-8");
+      if (r.includes("<!-- MYOP HMR -->")) {
+        const d = r.indexOf("<!-- MYOP HMR -->"), h = r.indexOf("<\/script>", d) + 9;
+        r = r.slice(0, d) + r.slice(h);
       }
-      const n = JSON.stringify({
+      const i = JSON.stringify({
         type: "update",
-        html: t
-      }), c = we(n);
-      o.forEach((r) => {
+        html: r
+      }), m = Le(i);
+      s.forEach((d) => {
         try {
-          r.write(c);
+          d.write(m);
         } catch {
-          o.delete(r);
+          s.delete(d);
         }
       });
-    } catch (t) {
-      console.error("❌ Failed to read HTML for HMR:", t.message);
+    } catch (r) {
+      console.error("❌ Failed to read HTML for HMR:", r.message);
     }
-  }, B = () => {
-    if (N) {
-      Y = !0;
+  }, ce = () => {
+    if (I) {
+      C = !0;
       return;
     }
-    N = !0, console.log(`
-🔨 Building...`), m("npm run build", (o, e, t) => {
-      N = !1, o ? (console.error("❌ Build failed:", o.message), t && console.error(t)) : (console.log("✅ Build completed"), e && console.log(e), ye(), ve()), Y && (Y = !1, B());
+    I = !0, console.log(`
+🔨 Building...`), n("npm run build", (s, t, r) => {
+      I = !1, s ? (console.error("❌ Build failed:", s.message), r && console.error(r)) : (console.log("✅ Build completed"), t && console.log(t), He(), Je()), C && (C = !1, ce());
     });
-  }, oe = (o) => {
-    i.default.readdir(o, { withFileTypes: !0 }, (e, t) => {
-      e || t.forEach((n) => {
-        const c = s.default.join(o, n.name);
-        if (n.isDirectory())
-          n.name !== "node_modules" && n.name !== "dist" && !n.name.startsWith(".") && oe(c);
-        else if (n.isFile()) {
-          const r = s.default.extname(n.name);
-          if (r === ".js" || r === ".css" || r === ".html") {
+  }, we = /* @__PURE__ */ new Set(), ve = (s) => {
+    e.default.readdir(s, { withFileTypes: !0 }, (t, r) => {
+      t || (r.forEach((i) => {
+        const m = o.default.join(s, i.name);
+        if (i.isDirectory())
+          i.name !== "node_modules" && i.name !== "dist" && !i.name.startsWith(".") && ve(m);
+        else if (i.isFile()) {
+          const d = o.default.extname(i.name);
+          if (d === ".js" || d === ".css" || d === ".html")
             try {
-              const l = i.default.readFileSync(c, "utf-8");
-              V.set(c, l);
+              const h = e.default.readFileSync(m, "utf-8");
+              _.set(m, h);
             } catch {
             }
-            i.default.watch(c, (l) => {
-              if (l === "change")
-                try {
-                  const w = i.default.readFileSync(c, "utf-8"), C = V.get(c);
-                  w !== C && (V.set(c, w), console.log(`📝 File changed: ${c}`), B());
-                } catch {
-                  console.log(`📝 File changed: ${c}`), B();
-                }
-            });
-          }
         }
-      });
+      }), we.has(s) || (we.add(s), e.default.watch(s, (i, m) => {
+        if (!m) return;
+        const d = o.default.extname(m);
+        if (d !== ".js" && d !== ".css" && d !== ".html") return;
+        const h = o.default.join(s, m);
+        setTimeout(() => {
+          try {
+            const O = e.default.readFileSync(h, "utf-8"), T = _.get(h);
+            O !== T && (_.set(h, O), console.log(`📝 File changed: ${h}`), ce());
+          } catch {
+          }
+        }, 50);
+      })));
     });
-  }, te = () => {
+  }, Se = () => {
     console.log(`
-🔨 Component: ${g}`), B(), oe(L), console.log("👀 Watching .js, .css, and .html files for changes..."), console.log(`Press Ctrl+C to stop
+🔨 Component: ${S}`), ce(), ve(b), console.log("👀 Watching .js, .css, and .html files for changes..."), console.log(`Press Ctrl+C to stop
 `);
-  }, Se = () => new Promise((o) => {
-    const e = {
+  }, De = () => new Promise((s) => {
+    const t = {
       hostname: "localhost",
-      port: h,
+      port: y,
       path: "/_list",
       method: "GET",
       timeout: 1e3
-    }, t = d.default.request(e, (n) => {
-      o(!0);
+    }, r = a.default.request(t, (i) => {
+      s(!0);
     });
-    t.on("error", () => o(!1)), t.on("timeout", () => {
-      t.destroy(), o(!1);
-    }), t.end();
-  }), Ce = () => new Promise((o) => {
-    const e = d.default.createServer((t, n) => {
-      if (n.setHeader("Content-Type", "application/json"), t.method === "POST" && t.url === "/_register") {
-        let c = "";
-        t.on("data", (r) => c += r), t.on("end", () => {
+    r.on("error", () => s(!1)), r.on("timeout", () => {
+      r.destroy(), s(!1);
+    }), r.end();
+  }), Ue = () => new Promise((s) => {
+    const t = a.default.createServer((r, i) => {
+      if (i.setHeader("Content-Type", "application/json"), r.method === "POST" && r.url === "/_register") {
+        let m = "";
+        r.on("data", (d) => m += d), r.on("end", () => {
           try {
-            const { componentId: r, distPath: l, componentName: w } = JSON.parse(c);
-            u.set(r, { path: l, name: w || null });
-            const C = w ? ` (${w})` : "";
-            console.log(`✅ Registered: ${r}${C} -> ${l}`), n.writeHead(200), n.end(JSON.stringify({ success: !0, registered: Array.from(u.keys()) }));
-          } catch (r) {
-            n.writeHead(400), n.end(JSON.stringify({ error: r.message }));
+            const { componentId: d, distPath: h, componentName: O } = JSON.parse(m);
+            $.set(d, { path: h, name: O || null });
+            const T = O ? ` (${O})` : "";
+            console.log(`✅ Registered: ${d}${T} -> ${h}`), i.writeHead(200), i.end(JSON.stringify({ success: !0, registered: Array.from($.keys()) }));
+          } catch (d) {
+            i.writeHead(400), i.end(JSON.stringify({ error: d.message }));
           }
         });
-      } else if (t.method === "POST" && t.url === "/_unregister") {
-        let c = "";
-        t.on("data", (r) => c += r), t.on("end", () => {
+      } else if (r.method === "POST" && r.url === "/_unregister") {
+        let m = "";
+        r.on("data", (d) => m += d), r.on("end", () => {
           try {
-            const { componentId: r } = JSON.parse(c);
-            u.delete(r), console.log(`❌ Unregistered: ${r}`), n.writeHead(200), n.end(JSON.stringify({ success: !0 }));
-          } catch (r) {
-            n.writeHead(400), n.end(JSON.stringify({ error: r.message }));
+            const { componentId: d } = JSON.parse(m);
+            $.delete(d), console.log(`❌ Unregistered: ${d}`), i.writeHead(200), i.end(JSON.stringify({ success: !0 }));
+          } catch (d) {
+            i.writeHead(400), i.end(JSON.stringify({ error: d.message }));
           }
         });
-      } else t.method === "GET" && t.url === "/_list" ? (n.writeHead(200), n.end(JSON.stringify({ components: Array.from(u.entries()) }))) : (n.writeHead(404), n.end(JSON.stringify({ error: "Not found" })));
+      } else r.method === "GET" && r.url === "/_list" ? (i.writeHead(200), i.end(JSON.stringify({ components: Array.from($.entries()) }))) : (i.writeHead(404), i.end(JSON.stringify({ error: "Not found" })));
     });
-    e.on("error", () => {
-      o(!1);
-    }), e.listen(h, () => {
+    t.on("error", () => {
+      s(!1);
+    }), t.listen(y, () => {
       console.log(`
-🔄 Taking over as server...`), console.log(`📡 Management server on port ${h}`), k.on("error", () => {
-        e.close(), o(!1);
-      }), k.listen(S, () => {
-        console.log(`📡 Main server running at http://localhost:${S}`), u.set(g, {
-          path: s.default.resolve(L, y),
-          name: x
+🔄 Taking over as server...`), console.log(`📡 Management server on port ${y}`), q.on("error", () => {
+        t.close(), s(!1);
+      }), q.listen(g, () => {
+        console.log(`📡 Main server running at http://localhost:${g}`), $.set(S, {
+          path: o.default.resolve(b, w),
+          name: P
         });
-        const t = x ? ` (${x})` : "";
-        console.log(`✅ Registered component: ${g}${t}`), console.log(`📡 Access at: http://localhost:${S}/view/${g}/`), o(!0);
+        const r = P ? ` (${P})` : "";
+        console.log(`✅ Registered component: ${S}${r}`), console.log(`📡 Access at: http://localhost:${g}/view/${S}/`), s(!0);
       });
     });
   });
-  let G;
-  const ne = () => {
-    G = setInterval(async () => {
-      await Se() || (clearInterval(G), console.log(`
-⚠️  Server appears to be down, attempting to take over...`), await Ce() ? console.log("✅ Successfully took over as server") : (console.log("ℹ️  Another instance took over, re-registering..."), setTimeout(async () => {
+  let ee;
+  const be = () => {
+    ee = setInterval(async () => {
+      await De() || (clearInterval(ee), console.log(`
+⚠️  Server appears to be down, attempting to take over...`), await Ue() ? console.log("✅ Successfully took over as server") : (console.log("ℹ️  Another instance took over, re-registering..."), setTimeout(async () => {
         try {
-          await ee(), console.log(`✅ Re-registered component: ${g}`), ne();
-        } catch (t) {
-          console.error("❌ Failed to re-register:", t.message);
+          await ye(), console.log(`✅ Re-registered component: ${S}`), be();
+        } catch (r) {
+          console.error("❌ Failed to re-register:", r.message);
         }
       }, 2e3)));
     }, 3e3);
-  }, se = async () => {
+  }, xe = async () => {
     console.log(`
 
-🛑 Shutting down...`), G && clearInterval(G), await he(), process.exit(0);
+🛑 Shutting down...`), ee && clearInterval(ee), await Ee(), process.exit(0);
   };
-  process.on("SIGINT", se), process.on("SIGTERM", se), X.on("error", async (o) => {
-    if (o.code === "EADDRINUSE") {
+  process.on("SIGINT", xe), process.on("SIGTERM", xe), ae.on("error", async (s) => {
+    if (s.code === "EADDRINUSE") {
       console.log(`
 🔗 Connecting to existing dev server...`);
       try {
-        const e = await ee();
-        console.log(`✅ Registered component: ${g}`), console.log(`📡 Access at: http://localhost:${S}/view/${g}/`), console.log(`📋 All registered components: ${e.registered.join(", ")}`), te(), ne();
-      } catch (e) {
-        console.error("❌ Failed to register component:", e.message), process.exit(1);
+        const t = await ye();
+        console.log(`✅ Registered component: ${S}`), console.log(`📡 Access at: http://localhost:${g}/view/${S}/`), console.log(`📋 All registered components: ${t.registered.join(", ")}`), Se(), be();
+      } catch (t) {
+        console.error("❌ Failed to register component:", t.message), process.exit(1);
       }
     } else
-      console.error("❌ Management server error:", o.message), process.exit(1);
-  }), X.on("upgrade", ue), X.listen(h, async () => {
+      console.error("❌ Management server error:", s.message), process.exit(1);
+  }), ae.on("upgrade", Ae), ae.listen(y, async () => {
     console.log(`
-🚀 Starting shared dev server...`), console.log(`📡 Management server on port ${h}`), k.on("error", (o) => {
-      console.error("❌ Main server error:", o.message), process.exit(1);
-    }), k.listen(S, async () => {
-      console.log(`📡 Main server running at http://localhost:${S}`), u.set(g, {
-        path: s.default.resolve(L, y),
-        name: x
+🚀 Starting shared dev server...`), console.log(`📡 Management server on port ${y}`), q.on("error", (s) => {
+      console.error("❌ Main server error:", s.message), process.exit(1);
+    }), q.listen(g, async () => {
+      console.log(`📡 Main server running at http://localhost:${g}`), $.set(S, {
+        path: o.default.resolve(b, w),
+        name: P
       });
-      const o = x ? ` (${x})` : "";
-      console.log(`✅ Registered component: ${g}${o}`), console.log(`📡 Access at: http://localhost:${S}/view/${g}/`), te();
+      const s = P ? ` (${P})` : "";
+      console.log(`✅ Registered component: ${S}${s}`), console.log(`📡 Access at: http://localhost:${g}/view/${S}/`), Se();
+    });
+  });
+}
+const pe = Z.join(Ge.homedir(), ".myop"), Q = Z.join(pe, "credentials.json");
+function st() {
+  E.existsSync(pe) || E.mkdirSync(pe, { recursive: !0, mode: 448 });
+}
+function ge() {
+  try {
+    if (!E.existsSync(Q))
+      return null;
+    const e = E.readFileSync(Q, "utf8");
+    return JSON.parse(e);
+  } catch (e) {
+    return console.info("Failed to read credentials:", e.message), null;
+  }
+}
+function _e(e) {
+  st();
+  const o = {
+    ...e,
+    savedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  E.writeFileSync(Q, JSON.stringify(o, null, 2), {
+    mode: 384
+    // Read/write for owner only
+  });
+}
+function Te() {
+  try {
+    return E.existsSync(Q) && E.unlinkSync(Q), !0;
+  } catch (e) {
+    return console.error("Failed to clear credentials:", e.message), !1;
+  }
+}
+function rt(e) {
+  if (!e || !e.expiresAt)
+    return !0;
+  const o = 5 * 60 * 1e3, n = new Date(e.expiresAt).getTime();
+  return Date.now() > n - o;
+}
+function Re() {
+  const e = ge();
+  return e ? {
+    email: e.userEmail,
+    userId: e.userId
+  } : null;
+}
+const G = process.env.MYOP_MCP_URL || "https://mcp.myop.dev", se = 19284, he = `http://localhost:${se}/callback`, it = "myop-cli";
+function at() {
+  return ue.randomBytes(32).toString("base64url");
+}
+function ct(e) {
+  return ue.createHash("sha256").update(e).digest("base64url");
+}
+async function lt() {
+  const e = await fetch(`${G}/oauth/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      client_name: it,
+      redirect_uris: [he],
+      grant_types: ["authorization_code", "refresh_token"],
+      response_types: ["code"]
+    })
+  });
+  if (!e.ok) {
+    const o = await e.text();
+    throw new Error(`Failed to register client: ${o}`);
+  }
+  return e.json();
+}
+function oe(e, o, n, a = null) {
+  const u = {
+    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"/>
+        </svg>`,
+    error: `<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M15 9l-6 6M9 9l6 6"/>
+        </svg>`,
+    warning: `<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2">
+            <path d="M12 2L2 22h20L12 2z"/>
+            <path d="M12 9v4M12 17h.01"/>
+        </svg>`
+  }, c = {
+    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: p, glow: v } = c[e] || c.error;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>myop-cli | ${o}</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
+            background: #1e1e1e;
+            color: #e8eaed;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: #292a2d;
+            border: 1px solid #3c4043;
+            border-radius: 8px;
+            padding: 48px;
+            max-width: 480px;
+            width: 100%;
+            text-align: center;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            animation: slideUp 0.3s ease-out;
+        }
+
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .icon {
+            margin-bottom: 24px;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        h1 {
+            font-size: 20px;
+            font-weight: 500;
+            color: ${p};
+            margin-bottom: 12px;
+            letter-spacing: -0.5px;
+        }
+
+        .message {
+            color: #9aa0a6;
+            font-size: 14px;
+            line-height: 1.6;
+            margin-bottom: 24px;
+        }
+
+        .details {
+            background: #1e1e1e;
+            border: 1px solid #3c4043;
+            border-radius: 4px;
+            padding: 12px 16px;
+            font-size: 12px;
+            color: #f87171;
+            text-align: left;
+            margin-bottom: 24px;
+            word-break: break-all;
+        }
+
+        .details code {
+            color: #fbbf24;
+        }
+
+        .hint {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: ${v};
+            border: 1px solid ${p}33;
+            border-radius: 4px;
+            padding: 10px 16px;
+            font-size: 12px;
+            color: #9aa0a6;
+        }
+
+        .hint kbd {
+            background: #3c4043;
+            border: 1px solid #5f6368;
+            border-radius: 3px;
+            padding: 2px 6px;
+            font-size: 11px;
+            color: #e8eaed;
+        }
+
+        .logo {
+            margin-top: 32px;
+            padding-top: 24px;
+            border-top: 1px solid #3c4043;
+        }
+
+        .logo span {
+            font-size: 12px;
+            color: #5f6368;
+            letter-spacing: 1px;
+        }
+
+        .logo .brand {
+            color: #8ab4f8;
+            font-weight: 600;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="icon">
+            ${u[e] || u.error}
+        </div>
+        <h1>${o}</h1>
+        <p class="message">${n}</p>
+        ${a ? `<div class="details"><code>Error:</code> ${a}</div>` : ""}
+        <div class="hint">
+            <span>Press</span>
+            <kbd>⌘</kbd><kbd>W</kbd>
+            <span>to close this window</span>
+        </div>
+        <div class="logo">
+            <span><span class="brand">myop</span>-cli</span>
+        </div>
+    </div>
+</body>
+</html>`;
+}
+function dt(e) {
+  return new Promise((o, n) => {
+    const a = We.createServer((u, c) => {
+      const p = new Me(u.url, `http://localhost:${se}`);
+      if (p.pathname === "/callback") {
+        const v = p.searchParams.get("code"), j = p.searchParams.get("state"), g = p.searchParams.get("error");
+        if (g) {
+          c.writeHead(200, { "Content-Type": "text/html" }), c.end(oe(
+            "error",
+            "Authentication Failed",
+            "Unable to complete the authentication process.",
+            g
+          )), a.close(), n(new Error(`OAuth error: ${g}`));
+          return;
+        }
+        if (j !== e) {
+          c.writeHead(400, { "Content-Type": "text/html" }), c.end(oe(
+            "warning",
+            "Security Error",
+            "State mismatch detected. This could indicate a CSRF attack. Please try authenticating again.",
+            "state_mismatch"
+          )), a.close(), n(new Error("State mismatch"));
+          return;
+        }
+        if (!v) {
+          c.writeHead(400, { "Content-Type": "text/html" }), c.end(oe(
+            "error",
+            "Missing Authorization Code",
+            "No authorization code was received from the server.",
+            "missing_code"
+          )), a.close(), n(new Error("No authorization code"));
+          return;
+        }
+        c.writeHead(200, { "Content-Type": "text/html" }), c.end(oe(
+          "success",
+          "Authentication Successful",
+          "You have been authenticated successfully. Return to the terminal to continue."
+        )), a.close(), o(v);
+      } else
+        c.writeHead(404), c.end("Not found");
     });
+    a.listen(se, () => {
+      console.info(`OAuth callback server listening on port ${se}`);
+    }), setTimeout(() => {
+      a.close(), n(new Error("Authentication timed out"));
+    }, 5 * 60 * 1e3);
+  });
+}
+async function pt(e, o, n) {
+  const a = await fetch(`${G}/oauth/token`, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new je({
+      grant_type: "authorization_code",
+      code: e,
+      client_id: o,
+      redirect_uri: he,
+      code_verifier: n
+    })
+  });
+  if (!a.ok) {
+    const u = await a.json();
+    throw new Error(u.error_description || u.error || "Token exchange failed");
+  }
+  return a.json();
+}
+async function mt(e, o) {
+  const n = await fetch(`${G}/oauth/token`, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new je({
+      grant_type: "refresh_token",
+      refresh_token: e,
+      client_id: o
+    })
   });
+  if (!n.ok) {
+    const a = await n.json();
+    throw new Error(a.error_description || a.error || "Token refresh failed");
+  }
+  return n.json();
+}
+async function ut(e) {
+  var u, c, p;
+  const o = await fetch(`${G}/mcp`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${e}`
+    },
+    body: JSON.stringify({
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: {
+        name: "whoami",
+        arguments: {}
+      }
+    })
+  });
+  if (!o.ok)
+    throw new Error("Failed to get user info");
+  const n = await o.json();
+  if (n.error)
+    throw new Error(n.error.message);
+  const a = (p = (c = (u = n.result) == null ? void 0 : u.content) == null ? void 0 : c[0]) == null ? void 0 : p.text;
+  if (a)
+    return JSON.parse(a);
+  throw new Error("Invalid response from whoami");
+}
+async function X() {
+  const e = A("Starting authentication...").start();
+  try {
+    e.text = "Registering OAuth client...";
+    const n = (await lt()).client_id, a = at(), u = ct(a), c = ue.randomBytes(16).toString("hex");
+    e.text = "Waiting for authorization...";
+    const p = dt(c), v = new Me(`${G}/oauth/authorize`);
+    v.searchParams.set("response_type", "code"), v.searchParams.set("client_id", n), v.searchParams.set("redirect_uri", he), v.searchParams.set("code_challenge", u), v.searchParams.set("code_challenge_method", "S256"), v.searchParams.set("state", c), e.stop(), console.log(`
+🌐 Opening browser for authentication...`), console.log("If the browser does not open, visit:"), console.log(`  ${v.toString()}
+`), await Ye(v.toString());
+    const j = await p;
+    e.start("Exchanging authorization code...");
+    const g = await pt(j, n, a);
+    e.text = "Getting user info...";
+    const y = await ut(g.access_token), w = {
+      accessToken: g.access_token,
+      refreshToken: g.refresh_token,
+      expiresAt: new Date(Date.now() + g.expires_in * 1e3).toISOString(),
+      clientId: n,
+      userId: y.userId,
+      userEmail: y.email
+    };
+    return _e(w), e.succeed(`Authenticated as ${y.email}`), w;
+  } catch (o) {
+    throw e.fail(`Authentication failed: ${o.message}`), o;
+  }
+}
+async function Fe() {
+  const e = ge();
+  if (!e) {
+    console.log("Not currently logged in.");
+    return;
+  }
+  Te(), console.log(`✅ Logged out (was: ${e.userEmail})`);
+}
+async function ft() {
+  let e = ge();
+  if (!e)
+    return console.log(`Not logged in. Starting authentication...
+`), await X();
+  if (!rt(e))
+    return e;
+  if (e.refreshToken) {
+    const o = A("Refreshing access token...").start();
+    try {
+      const n = await mt(
+        e.refreshToken,
+        e.clientId
+      );
+      return e = {
+        ...e,
+        accessToken: n.access_token,
+        refreshToken: n.refresh_token,
+        expiresAt: new Date(Date.now() + n.expires_in * 1e3).toISOString()
+      }, _e(e), o.succeed("Token refreshed"), e;
+    } catch {
+      return o.warn("Token refresh failed, please log in again"), Te(), await X();
+    }
+  }
+  return console.log(`Session expired. Please log in again.
+`), await X();
+}
+function gt() {
+  return G;
+}
+const re = "@myop/cli";
+async function ht() {
+  try {
+    const e = await fetch(`https://registry.npmjs.org/${re}/latest`);
+    return e.ok ? (await e.json()).version : null;
+  } catch {
+    return null;
+  }
+}
+function yt(e, o) {
+  const n = e.split(".").map(Number), a = o.split(".").map(Number);
+  for (let u = 0; u < Math.max(n.length, a.length); u++) {
+    const c = n[u] || 0, p = a[u] || 0;
+    if (c > p) return 1;
+    if (c < p) return -1;
+  }
+  return 0;
 }
-const Je = (i) => new Promise((s) => setTimeout(s, i));
-a.executionPath = process.cwd();
-const z = (i = !1) => {
-  const s = a.program.getOptionValue("verbose");
-  s || (console.info = () => {
-  }), console.info("📝 verbose mode on"), a.options = {
-    configPath: a.program.getOptionValue("config"),
-    verbose: s
+async function wt(e) {
+  const o = A({
+    text: "Checking for updates...",
+    color: "cyan"
+  }).start(), n = await ht();
+  if (o.stop(), !n || yt(n, e) <= 0)
+    return !1;
+  if (console.log(`
+📦 New version available: ${e} → ${n}
+`), await $e({
+    message: "Would you like to update now?",
+    choices: [
+      { name: "Yes, update now", value: !0 },
+      { name: "No, continue with current version", value: !1 }
+    ]
+  })) {
+    const u = A({
+      text: `Updating ${re} to v${n}...`,
+      color: "green"
+    }).start();
+    try {
+      ne(`npm install -g ${re}@latest`, { stdio: "pipe" }), u.succeed(`Updated to v${n}`), console.log(`
+Please restart the CLI to use the new version.
+`), process.exit(0);
+    } catch {
+      return u.fail("Update failed"), console.log(`
+You can manually update by running: npm install -g ${re}@latest
+`), !1;
+    }
+  }
+  return !1;
+}
+const vt = (e) => new Promise((o) => setTimeout(o, e));
+l.executionPath = process.cwd();
+const ie = (e = !1) => {
+  const o = l.program.getOptionValue("verbose");
+  o || (console.info = () => {
+  }), console.info("📝 verbose mode on"), l.options = {
+    configPath: l.program.getOptionValue("config"),
+    verbose: o
   };
   try {
-    a.myopConfig = He(a.options.configPath);
-  } catch (m) {
-    if (i) {
+    return l.myopConfig = Ke(l.options.configPath), { configFound: !0 };
+  } catch (n) {
+    if (e) {
       console.info(`
-⚠️ failed read config file from ${a.options.configPath}, trying to create new one`);
+⚠️ failed read config file from ${l.options.configPath}, trying to create new one`);
       try {
-        const d = {
+        const a = {
           author: "@myop-cli",
           flows: []
         };
-        q(a.options.configPath, d), a.myopConfig = d;
+        return fe(l.options.configPath, a), l.myopConfig = a, { configFound: !0 };
       } catch {
-        console.log(`
-⚠️ failed read config file from ${a.options.configPath}, for more details use verbose flag`), console.info("Error details :", m), process.exit();
+        return console.info("Error details :", n), { configFound: !1, error: n };
       }
     } else
-      console.log(`
-⚠️ failed read config file from ${a.options.configPath}, for more details use verbose flag`), console.info("Error details :", m), process.exit();
+      return console.info("Error details :", n), { configFound: !1, error: n };
   }
-}, de = [
-  ae,
-  ce,
-  le,
-  Te,
-  new xe(),
-  ...je
-], De = async () => $e({
-  message: "Select an operation",
-  choices: de
-}), pe = async () => {
-  const i = await De(), s = de.find((m) => m.value === i);
-  s ? s.action ? await s.action() : console.log(`⚠️ Operation ${i} has no action`) : console.log(`⚠️ Operation ${i} not found`), await pe();
 };
-a.program = new Me();
-a.program.name("@myop/cli").description("Myop CLI - Remote UI Made Easy").version("0.1.10");
-a.program.addOption(new Z("-c, --config <value>", "myop.config.json file location").default("./myop.config.json", "./myop.config.json"));
-a.program.addOption(new Z("-h, --help", "Show helpful information"));
-a.program.addOption(new Z("-v, --verbose", "Enables verbose output mode for the command-line interface (CLI)."));
-a.program.command("add").description("Install Myop assets").addArgument("type").addArgument("id").action((i, s) => {
-  z(!0), console.info("adding ", i, s, a.options.configPath), i === "flow" && ce._action(s), process.exit();
+[
+  new de(),
+  ...ot
+];
+l.program = new ze();
+l.program.name("@myop/cli").description("Myop CLI - Remote UI Made Easy").version("0.1.10");
+l.program.addOption(new me("-c, --config <value>", "myop.config.json file location").default("./myop.config.json", "./myop.config.json"));
+l.program.addOption(new me("-h, --help", "Show helpful information"));
+l.program.addOption(new me("-v, --verbose", "Enables verbose output mode for the command-line interface (CLI)."));
+l.program.command("add").description("Install Myop assets").addArgument("type").addArgument("id").action((e, o) => {
+  ie(!0), console.info("adding ", e, o, l.options.configPath), e === "flow" && ke._action(o), process.exit();
+});
+l.program.command("remove").description("Remove Myop asset").argument("<type>", "Myop asset type").argument("<id>", "Asset id").action((e, o) => {
+  ie(), console.info("removing ", e, o, l.options.configPath), e === "flow" && Ie._action(o), process.exit();
 });
-a.program.command("remove").description("Remove Myop asset").argument("<type>", "Myop asset type").argument("<id>", "Asset id").action((i, s) => {
-  z(), console.info("removing ", i, s, a.options.configPath), i === "flow" && le._action(s), process.exit();
+l.program.command("install").description("Install Myop assets").action(async () => {
+  ie(), await Oe.action();
 });
-a.program.command("install").description("Install Myop assets").action(async () => {
-  z(), await ae.action();
+l.program.command("login").description("Authenticate with Myop platform").action(async () => {
+  try {
+    await X();
+  } catch (e) {
+    console.error("Login failed:", e.message), process.exit(1);
+  }
+  process.exit(0);
+});
+l.program.command("logout").description("Clear stored credentials").action(async () => {
+  await Fe(), process.exit(0);
+});
+l.program.command("whoami").description("Show current authenticated user").action(async () => {
+  const e = Re();
+  e && e.email ? console.log(`Logged in as: ${e.email}`) : console.log("Not logged in. Run `myop login` to authenticate."), process.exit(0);
 });
-a.program.command("sync").description("Sync Myop configuration").action(async () => {
-  const i = a.program.getOptionValue("config") || "./myop.config.json", s = await import("fs"), { execSync: m } = await import("child_process"), d = await import("http");
-  if (s.existsSync(i)) {
-    console.log("yes");
+l.program.command("sync").description("Build and upload component to Myop platform").option("--skip-build", "Skip the build step").action(async (e) => {
+  var I, C, _, B, S, P;
+  const o = l.program.getOptionValue("config") || "./myop.config.json", n = await import("fs"), { execSync: a } = await import("child_process"), u = await import("path");
+  let c = {};
+  if (n.existsSync(o))
     try {
-      const I = s.readFileSync(i, "utf-8"), P = JSON.parse(I);
-      P.componentId && console.log(P.componentId), console.log("Running npm run build..."), m("npm run build", { stdio: "inherit" });
-      const _ = "./dist/index.html";
-      if (s.existsSync(_)) {
-        const E = s.readFileSync(_, "utf-8");
-        console.log(`
-Content of ./dist/index.html:`), console.log(E);
-        const J = 3302, S = d.default.createServer((h, y) => {
-          if (h.method === "OPTIONS") {
-            y.writeHead(200, {
-              "Access-Control-Allow-Origin": "*",
-              "Access-Control-Allow-Methods": "GET, OPTIONS",
-              "Access-Control-Allow-Headers": "Content-Type"
-            }), y.end();
-            return;
+      const f = n.readFileSync(o, "utf-8");
+      c = JSON.parse(f);
+      const b = c.name || c.componentName;
+      console.log(`📋 Found config: ${b || "Unnamed component"}`), c.componentId && console.log(`   Component ID: ${c.componentId}`);
+    } catch (f) {
+      console.error(`⚠️ Failed to parse ${o}:`, f.message);
+    }
+  else
+    console.log("⚠️ No myop.config.json found. A new component will be created.");
+  if (!e.skipBuild) {
+    const f = A("Building project...").start();
+    try {
+      a("npm run build", { stdio: "pipe" }), f.succeed("Build completed");
+    } catch (b) {
+      f.fail("Build failed"), console.error(b.message), process.exit(1);
+    }
+  }
+  const p = "./dist/index.html";
+  n.existsSync(p) || (console.error("❌ Error: ./dist/index.html not found"), console.log("   Make sure your build outputs to ./dist/index.html"), process.exit(1));
+  let v;
+  try {
+    v = await ft();
+  } catch (f) {
+    console.error("❌ Authentication failed:", f.message), process.exit(1);
+  }
+  const j = gt();
+  let g = A("Requesting upload URL...").start(), y;
+  try {
+    const f = await fetch(`${j}/mcp`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${v.accessToken}`
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: 1,
+        method: "tools/call",
+        params: {
+          name: "upload_component",
+          arguments: {
+            name: c.name || c.componentName || u.default.basename(process.cwd()),
+            componentId: c.componentId || void 0,
+            organization: c.organization || void 0
           }
-          y.writeHead(200, {
-            "Content-Type": "text/plain",
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Methods": "GET, OPTIONS",
-            "Access-Control-Allow-Headers": "Content-Type"
-          }), y.end(E), console.log(`
-Content served successfully, closing server...`), setTimeout(() => {
-            S.close(() => {
-              console.log("Server closed. Sync process completed.");
-            }), setTimeout(() => {
-              process.exit(0);
-            }, 100);
-          }, 100);
-        });
-        S.listen(J, () => {
-          const h = `http://localhost:${J}`;
-          console.log(`
-Server running at ${h}`), console.log("Waiting for request...");
-          const y = `http://localhost:9200/dashboard/2.0/component/${P.componentId}?upload=${encodeURIComponent(h)}`;
-          console.log(`
-Opening Chrome with: ${y}`);
-          try {
-            m(`open -a "Google Chrome" "${y}"`, { stdio: "inherit" });
-          } catch (N) {
-            console.error("Error opening Chrome:", N.message), console.log(`Please open this URL manually: ${y}`);
+        }
+      })
+    });
+    if (!f.ok)
+      throw new Error(`Server returned ${f.status}`);
+    const b = await f.json();
+    if (b.error)
+      throw new Error(b.error.message);
+    const H = (_ = (C = (I = b.result) == null ? void 0 : I.content) == null ? void 0 : C[0]) == null ? void 0 : _.text;
+    if (y = JSON.parse(H), !y.success)
+      throw new Error(y.error);
+    g.succeed("Upload URL obtained");
+  } catch (f) {
+    g.fail("Failed to get upload URL"), console.error("   ", f.message), process.exit(1);
+  }
+  g = A("Uploading component...").start();
+  try {
+    const f = n.readFileSync(p, "utf-8");
+    let b;
+    const H = y.curlCommand.match(/(?:"|\\")([^"\\]+(?:\\.[^"\\]*)*)(?:"|\\")$/);
+    if (H)
+      b = H[1];
+    else {
+      const F = y.curlCommand.match(/(https:\/\/[^\s"\\]+)/);
+      if (F)
+        b = F[1];
+      else
+        throw new Error("Could not parse presigned URL from: " + y.curlCommand);
+    }
+    console.info("Uploading to:", b.substring(0, 100) + "...");
+    const $ = await fetch(b, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "text/html"
+      },
+      body: f
+    });
+    if (!$.ok) {
+      const F = await $.text();
+      throw new Error(`Upload failed with status ${$.status}: ${F}`);
+    }
+    g.succeed("Component uploaded");
+  } catch (f) {
+    g.fail("Upload failed"), console.error("   ", f.message), f.cause && console.error("   Cause:", f.cause), process.exit(1);
+  }
+  g = A("Confirming upload...").start();
+  let w;
+  try {
+    const f = await fetch(`${j}/mcp`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${v.accessToken}`
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: 2,
+        method: "tools/call",
+        params: {
+          name: "confirm_upload",
+          arguments: {
+            uploadId: y.uploadId
           }
-        });
-        return;
-      } else
-        console.error("Error: ./dist/index.html not found");
-    } catch (I) {
-      console.error("Error:", I.message);
+        }
+      })
+    });
+    if (!f.ok)
+      throw new Error(`Server returned ${f.status}`);
+    const b = await f.json();
+    if (b.error)
+      throw new Error(b.error.message);
+    const H = (P = (S = (B = b.result) == null ? void 0 : B.content) == null ? void 0 : S[0]) == null ? void 0 : P.text;
+    if (w = JSON.parse(H), !w.success)
+      throw new Error(w.error);
+    g.succeed("Upload confirmed");
+  } catch (f) {
+    g.fail("Confirmation failed"), console.error("   ", f.message), process.exit(1);
+  }
+  if (w.isNewComponent || !c.componentId) {
+    c.componentId = w.componentId, c.organization = w.orgId, c.name || (c.name = w.componentName);
+    try {
+      n.writeFileSync(o, JSON.stringify(c, null, 2)), console.log(`
+📝 Updated ${o} with componentId`);
+    } catch (f) {
+      console.log(`
+⚠️ Could not update ${o}: ${f.message}`), console.log(`   Please add componentId: "${w.componentId}" manually`);
     }
-  } else
-    console.log("no");
-  process.exit();
+  }
+  console.log(`
+✅ Sync completed successfully!`), console.log(`   Component: ${w.componentName}`), console.log(`   Dashboard: ${w.dashboardUrl}`), process.exit(0);
+});
+l.program.command("dev").description("Start development server with file watching").action(Pe);
+const St = () => {
+  try {
+    ne("git --version", { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
+  } catch {
+    return { gitNotInstalled: !0 };
+  }
+  try {
+    ne("git rev-parse --git-dir", { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
+  } catch {
+    return { notARepo: !0 };
+  }
+  try {
+    const e = ne("git diff --stat HEAD -- . 2>/dev/null || git diff --stat -- . 2>/dev/null", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    if (!e)
+      return {
+        files: 0,
+        insertions: 0,
+        deletions: 0
+      };
+    const o = e.split(`
+`), n = o[o.length - 1], a = n.match(/(\d+) insertion/), u = n.match(/(\d+) deletion/), c = n.match(/(\d+) file/);
+    return {
+      files: c ? parseInt(c[1]) : 0,
+      insertions: a ? parseInt(a[1]) : 0,
+      deletions: u ? parseInt(u[1]) : 0
+    };
+  } catch {
+    return null;
+  }
+}, U = async (e = !1, o = !1) => {
+  var y, w, I;
+  const n = Re(), a = !!(n != null && n.email), u = ((y = l.myopConfig) == null ? void 0 : y.name) || ((w = l.myopConfig) == null ? void 0 : w.componentName), c = (I = l.myopConfig) == null ? void 0 : I.componentId, p = St();
+  console.log(`
+┌─────────────────────────────────────────────────┐`), console.log("│                                                 │"), console.log("│   Welcome to Myop CLI - Remote UI Made Easy     │"), console.log("│                                                 │"), console.log(`└─────────────────────────────────────────────────┘
+`), e && u ? (console.log(`  Component:  ${u}`), c ? (console.log(`  ID:         ${c}`), console.log(`  Dashboard:  https://dashboard.myop.dev/dashboard/2.0/component/${c}`)) : console.log("  ID:         (not yet pushed)")) : console.log("  Component:  No myop.config.json found"), console.log(`  User:       ${a ? n.email : "Not logged in"}`), p != null && p.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")) : p != null && p.notARepo ? console.log("  Changes:    Not a git repository") : p && (p.insertions > 0 || p.deletions > 0) ? console.log(`  Changes:    ${p.files} file${p.files !== 1 ? "s" : ""} | \x1B[32m+${p.insertions}\x1B[0m \x1B[31m-${p.deletions}\x1B[0m`) : p && console.log("  Changes:    No uncommitted changes"), console.log("");
+  const j = [
+    {
+      emoji: "🚀",
+      label: "Initialize new component",
+      value: "init",
+      help: "Creates myop.config.json in current directory",
+      disabled: e ? "(config already exists)" : !1
+    },
+    {
+      emoji: "📦",
+      label: u ? `Push "${u}"` : "Push component",
+      value: "sync",
+      help: "Builds project & uploads dist/index.html to Myop",
+      disabled: e ? a ? !1 : "(login required)" : "(no config file)"
+    },
+    {
+      emoji: "🛠️ ",
+      label: u ? `Start dev mode for "${u}"` : "Start dev mode",
+      value: "dev",
+      help: "Starts dev server with HMR for instant preview of changes",
+      disabled: e ? !1 : "(no config file)"
+    }
+  ].map((C) => ({
+    name: o && !C.disabled ? `${C.emoji} ${C.label}
+     ${C.help}` : `${C.emoji} ${C.label}`,
+    value: C.value,
+    disabled: C.disabled
+  }));
+  switch (j.push(
+    new de(),
+    {
+      name: o && a ? `🔓 Logout (${n.email})
+     Clears stored credentials from this machine` : o && !a ? `🔐 Login to Myop
+     Opens browser to authenticate with Myop` : a ? `🔓 Logout (${n.email})` : "🔐 Login to Myop",
+      value: a ? "logout" : "login"
+    },
+    {
+      name: o ? "📖 Hide help" : "📖 Show help",
+      value: "help"
+    },
+    new de(),
+    {
+      name: "👋 Exit",
+      value: "exit"
+    }
+  ), await $e({
+    message: "What would you like to do?",
+    choices: j
+  })) {
+    case "init":
+      await bt();
+      break;
+    case "sync":
+      console.log(`
+Running sync...
+`);
+      const { execSync: C } = await import("child_process");
+      try {
+        C("node " + process.argv[1] + " sync", { stdio: "inherit" });
+      } catch {
+      }
+      await U(!0, o);
+      break;
+    case "dev":
+      await Pe();
+      break;
+    case "login":
+      try {
+        await X(), console.log(`
+`), await U(e, o);
+      } catch (_) {
+        console.error("Login failed:", _.message), await U(e, o);
+      }
+      break;
+    case "logout":
+      await Fe(), console.log(`
+`), await U(e, o);
+      break;
+    case "help":
+      await U(e, !o);
+      break;
+    case "exit":
+      process.exit(0);
+  }
+}, bt = async () => {
+  const { input: e, select: o } = await import("@inquirer/prompts"), n = await import("fs"), u = (await import("path")).default.basename(process.cwd()), c = await e({
+    message: "Component name:",
+    default: u
+  }), p = await o({
+    message: "Component type:",
+    choices: [
+      { name: "📄 HTML", value: "html", description: "Plain HTML/JS/CSS component" },
+      { name: "⚛️  React", value: "react", disabled: "(coming soon)" },
+      { name: "💚 Vue", value: "vue", disabled: "(coming soon)" },
+      { name: "🅰️  Angular", value: "angular", disabled: "(coming soon)" }
+    ]
+  }), v = {
+    name: c,
+    type: p,
+    author: "@myop-cli"
+  }, j = l.program.getOptionValue("config") || "./myop.config.json";
+  try {
+    n.writeFileSync(j, JSON.stringify(v, null, 2)), console.log(`
+✅ Created ${j}`);
+    const g = {
+      name: c.toLowerCase().replace(/\s+/g, "-"),
+      version: "1.0.0",
+      type: "module",
+      scripts: {
+        build: "node build.js",
+        dev: "myop dev"
+      },
+      devDependencies: {
+        esbuild: "^0.24.0"
+      }
+    };
+    n.writeFileSync("package.json", JSON.stringify(g, null, 2)), console.log("✅ Created package.json"), n.mkdirSync("src/modules", { recursive: !0 }), n.mkdirSync("src/styles", { recursive: !0 }), n.writeFileSync("build.js", `import * as esbuild from 'esbuild';
+import fs from 'fs';
+import path from 'path';
+
+// Auto-discover all JS modules and CSS files
+const getAllFiles = (dir, ext) => {
+    const files = [];
+    const items = fs.readdirSync(dir, { withFileTypes: true });
+    for (const item of items) {
+        const fullPath = path.join(dir, item.name);
+        if (item.isDirectory()) {
+            files.push(...getAllFiles(fullPath, ext));
+        } else if (item.name.endsWith(ext)) {
+            files.push(fullPath);
+        }
+    }
+    return files;
+};
+
+// Generate temp entry that imports all modules
+const jsFiles = getAllFiles('src/modules', '.js');
+const jsImports = jsFiles.map((f, i) => \`import * as mod\${i} from './\${f.replace(/\\\\/g, '/')}';\`).join('\\n');
+const jsExports = jsFiles.map((_, i) => \`mod\${i}\`).join(', ');
+const tempJsEntry = \`// Auto-generated entry point
+\${jsImports}
+import { init } from './src/modules/app.js';
+import { setupMyopInterface } from './src/modules/myop.js';
+export { \${jsExports} };
+document.addEventListener('DOMContentLoaded', () => { init(); setupMyopInterface(); });
+\`;
+fs.writeFileSync('.temp-entry.js', tempJsEntry);
+
+// Generate temp CSS entry that imports all styles
+const cssFiles = getAllFiles('src/styles', '.css').filter(f => !f.endsWith('index.css'));
+const cssImports = cssFiles.map(f => \`@import './\${f.replace(/\\\\/g, '/')}';\`).join('\\n');
+const tempCssEntry = \`/* Auto-generated - imports all CSS files */\\n\${cssImports}\\n\`;
+fs.writeFileSync('.temp-styles.css', tempCssEntry);
+
+// Bundle JS (includes all modules)
+const jsResult = await esbuild.build({
+    entryPoints: ['.temp-entry.js'],
+    bundle: true,
+    minify: true,
+    write: false,
+    format: 'iife'
+});
+
+// Bundle CSS (includes all styles)
+const cssResult = await esbuild.build({
+    entryPoints: ['.temp-styles.css'],
+    bundle: true,
+    minify: true,
+    write: false
+});
+
+// Cleanup temp files
+fs.unlinkSync('.temp-entry.js');
+fs.unlinkSync('.temp-styles.css');
+
+// Read HTML template
+let html = fs.readFileSync('index.html', 'utf-8');
+
+// Remove dev script/link tags
+html = html.replace(/<link rel="stylesheet" href="[^"]*">[\\n\\r]*/g, '');
+html = html.replace(/<script[^>]*src="[^"]*"[^>]*><\\/script>[\\n\\r]*/g, '');
+
+// Inline JS and CSS
+const js = jsResult.outputFiles[0].text;
+const css = cssResult.outputFiles[0].text;
+
+html = html.replace('</head>', \`<style>\${css}</style></head>\`);
+html = html.replace('</body>', \`<script>\${js}<\/script></body>\`);
+
+// Write to dist
+fs.mkdirSync('dist', { recursive: true });
+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 w = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${c}</title>
+    <link rel="stylesheet" href="./src/styles/index.css">
+</head>
+<body>
+    <div id="app">
+        <h1>${c}</h1>
+        <p>Your Myop component is ready!</p>
+    </div>
+    <script type="module" src="./src/index.js"><\/script>
+</body>
+</html>
+`;
+    n.writeFileSync("index.html", w), console.log("✅ Created index.html");
+    const I = `// ${c} - Entry Point
+import { init } from './modules/app.js';
+import { setupMyopInterface } from './modules/myop.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    init();
+    setupMyopInterface();
 });
-a.program.command("dev").description("Start development server with file watching").action(Ee);
-a.program.command("default", { isDefault: !0 }).action(async () => {
-  a.program.getOptionValue("help") && (console.log(Pe), process.exit());
-  let s = be({
+`;
+    n.writeFileSync("src/index.js", I), console.log("✅ Created src/index.js");
+    const C = `// ${c} - Main Application Logic
+
+export function init() {
+    console.log('${c} loaded');
+
+    // Your component logic here
+}
+`;
+    n.writeFileSync("src/modules/app.js", C), console.log("✅ Created src/modules/app.js"), n.writeFileSync("src/modules/myop.js", `// Myop Interface - Communication with host app
+
+export function setupMyopInterface() {
+    // Called when host app sends data to this component
+    window.myop_init_interface = (data) => {
+        console.log('Received data from host:', data);
+        // Initialize your component with data from the host app
+    };
+
+    // Called to set up CTA (Call-to-Action) handler
+    window.myop_cta_handler = (callback) => {
+        // Store callback to trigger actions back to host
+        // Example: callback({ action: 'button-click', data: { id: 123 } });
+    };
+}
+`), console.log("✅ Created src/modules/myop.js");
+    const B = `/* ${c} - Styles Entry Point */
+/* Add your CSS imports here - they will be auto-bundled */
+@import './main.css';
+`;
+    n.writeFileSync("src/styles/index.css", B), console.log("✅ Created src/styles/index.css");
+    const S = `/* ${c} - Main Styles */
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    padding: 20px;
+    color: #333;
+}
+
+#app {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+h1 {
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+p {
+    color: #666;
+    line-height: 1.5;
+}
+`;
+    n.writeFileSync("src/styles/main.css", S), console.log("✅ Created src/styles/main.css"), console.log(`
+📦 Next steps:`), console.log("  1. npm install"), console.log("  2. npm run build"), console.log(`  3. myop sync
+`), l.myopConfig = v, await U(!0);
+  } catch (g) {
+    console.error(`Failed to initialize component: ${g.message}`), process.exit(1);
+  }
+};
+l.program.command("default", { isDefault: !0 }).action(async () => {
+  l.program.getOptionValue("help") && (console.log(Ve), process.exit());
+  let o = A({
     text: "Loading Myop CLI...",
     color: "green"
   }).start();
-  z(), await Je(1e3), s.succeed("Myop CLI Loaded"), await pe();
+  const n = ie();
+  await vt(500), o.stop();
+  const a = l.program.version();
+  await wt(a), await U(n.configFound);
 });
-a.program.parse(process.argv);
-a.program.opts();
+l.program.parse(process.argv);
+l.program.opts();