@moises.ai/extension 1.0.1 → 1.0.2

package/Readme.md

@@ -1 +1,19 @@
-# Moises Extensions SDK
+# Moises AI | Extensions SDK
+
+Create powerful extensions for the Moises AI Studio.
+
+## Documentation
+
+📖 **[Full Documentation](https://extensions.moises.ai/)** - Complete API reference, guides, and examples
+
+## Quick Start
+
+The best way to get started is to bootstrap a new extension project:
+
+```bash
+npm create @moises.ai/extension <my-extension>
+```
+
+This will create a new extension project with all the necessary files and dependencies to begin development.
+
+For detailed setup instructions and API reference, visit our [documentation](https://extensions.moises.ai/).

package/dist/{client-Bt6Snfq-.js → client-BuA0RRm3.js}

@@ -12,29 +12,29 @@ class h {
     this.connected = !1;
   }
   handleMessage(e) {
-    const { data: s, source: t, origin: n } = e;
-    if (t === this.target) {
+    const { data: s, source: n, origin: t } = e;
+    if (n === this.target) {
       if (s.type === "response") {
-        const { requestId: r, result: d, error: o } = s, c = this.pendingRequests.get(r);
-        c && (o ? c.reject(new Error(o)) : c.resolve(d), this.pendingRequests.delete(r));
+        const { requestId: r, result: c, error: o } = s, d = this.pendingRequests.get(r);
+        d && (o ? d.reject(new Error(o)) : d.resolve(c), this.pendingRequests.delete(r));
         return;
       }
       if (s.type === "request") {
-        const { method: r, params: d, requestId: o } = s, c = this.handlers.get(r);
-        if (!c) {
-          this.sendResponse(t, o, null, `No handler for method: ${r}`);
+        const { method: r, params: c, requestId: o } = s, d = this.handlers.get(r);
+        if (!d) {
+          this.sendResponse(n, o, null, `No handler for method: ${r}`);
           return;
         }
-        Promise.resolve().then(() => c(d)).then((a) => this.sendResponse(t, o, a)).catch((a) => this.sendResponse(t, o, null, a.message));
+        Promise.resolve().then(() => d(c)).then((a) => this.sendResponse(n, o, a)).catch((a) => this.sendResponse(n, o, null, a.message));
       }
     }
   }
-  sendResponse(e, s, t, n = null) {
+  sendResponse(e, s, n, t = null) {
     e.postMessage({
       type: "response",
       requestId: s,
-      result: t,
-      error: n
+      result: n,
+      error: t
     }, "*");
   }
   on(e, s) {
@@ -44,17 +44,17 @@ class h {
     this.handlers.delete(e);
   }
   once(e, s) {
-    const t = async (n) => (this.off(e), s(n));
-    this.on(e, t);
+    const n = async (t) => (this.off(e), s(t));
+    this.on(e, n);
   }
   async call(e, s) {
-    const t = this.requestId++;
-    return new Promise((n, r) => {
-      this.pendingRequests.set(t, { resolve: n, reject: r }), this.target.postMessage({
+    const n = this.requestId++;
+    return new Promise((t, r) => {
+      this.pendingRequests.set(n, { resolve: t, reject: r }), this.target.postMessage({
         type: "request",
         method: e,
         params: s,
-        requestId: t
+        requestId: n
       }, "*");
     });
   }
@@ -66,9 +66,12 @@ class u {
   createProxy() {
     return new Proxy(this.rpc, {
       get: (e, s) => s in e ? e[s] : new Proxy({}, {
-        get: (t, n) => async (r) => {
-          const d = `${s}.${n}`;
-          return e.call(d, r);
+        get: (n, t) => s === "link" ? async (r, c) => {
+          const o = await e.call("register.link", { category: t, options: r });
+          this.rpc.on(`${o.id}`, c);
+        } : async (r) => {
+          const c = `${s}.${t}`;
+          return e.call(c, r);
         }
       })
     });
@@ -88,19 +91,13 @@ function l(i) {
     version: i.version,
     isLoaded: !1,
     events: {}
-  }, { proxy: s, rpc: t } = new u({
+  }, { proxy: s, rpc: n } = new u({
     target: window.parent
-  }), n = (
-    /** @type {any} */
-    s
-  );
-  return n.link = async (r, d, o) => {
-    const c = await n.register.link({ category: r, options: d });
-    t.on(`${c.id}`, o);
-  }, n.connect = async function() {
-    const r = n.register.extension(e);
-    return e.isLoaded = !0, r;
-  }, n.plugin = e, n;
+  });
+  return s.connect = async function() {
+    const t = s.register.extension(e);
+    return e.isLoaded = !0, t;
+  }, s.plugin = e, s;
 }
 export {
   l as M,

package/dist/client.js

@@ -1,4 +1,4 @@
-import { M as e } from "./client-Bt6Snfq-.js";
+import { M as e } from "./client-BuA0RRm3.js";
 export {
   e as MoisesExtension
 };

package/dist/index.js

@@ -1,45 +1,47 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as x, useEffect as g } from "react";
-import { M as y, R as M } from "./client-Bt6Snfq-.js";
-function $(i) {
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { useState as C, useEffect as g } from "react";
+import { M as k, R as M } from "./client-BuA0RRm3.js";
+import { Box as m, HeaderPanel as h } from "@moises.ai/design-system";
+import { Cross1Icon as S } from "@moises.ai/design-system/icons";
+function P(i) {
   i.id;
-  let t = null, o = !1;
+  let t = null, s = !1;
   function r() {
-    const [c, u] = x({
+    const [c, o] = C({
       plugin: null,
-      isConnected: o,
+      isConnected: s,
       moises: null
     });
     g(() => {
-      t || (t = y(i), u((n) => ({
+      t || (t = k(i), o((n) => ({
         ...n,
         plugin: t.plugin,
         moises: t
         // The entire pluginInstance IS the moises API
       })));
     }, [i]), g(() => {
-      t && !o && t.connect().then(() => {
-        o = !0, u((n) => ({
+      t && !s && t.connect().then(() => {
+        s = !0, o((n) => ({
           ...n,
           isConnected: !0
         }));
       });
     }, []);
-    function d({ children: n, width: l, height: a }) {
+    function p({ children: n, width: a, height: d }) {
       const { moises: e } = c;
       return g(() => {
-        e && e.ui.setPluginSize({ width: l, height: a });
-      }, [l, a, e]), /* @__PURE__ */ m("div", { height: "100vh", style: { height: "100vh", backgroundColor: "var(--gray-1)" }, children: /* @__PURE__ */ m("div", { p: "4", children: n }) });
+        e && e.ui.setPluginSize({ width: a, height: d });
+      }, [a, d, e]), /* @__PURE__ */ l("div", { height: "100vh", style: { height: "100vh", backgroundColor: "var(--gray-1)" }, children: /* @__PURE__ */ l("div", { p: "4", children: n }) });
     }
     return {
       ...c,
-      ModalLayout: d
+      ModalLayout: p
     };
   }
   return r;
 }
-function j({ id: i, url: t, exposedAPI: o, iframeRef: r, onRegisterMetadata: c, onRegisterLink: u }) {
-  const d = {
+function I({ id: i, url: t, exposedAPI: s, iframeRef: r, onRegisterMetadata: c, onRegisterLink: o }) {
+  const p = {
     id: i,
     url: t
   };
@@ -49,24 +51,84 @@ function j({ id: i, url: t, exposedAPI: o, iframeRef: r, onRegisterMetadata: c,
   });
   n.on("register.extension", async (e) => {
     c(e);
-  }), n.on("register.link", async ({ category: e, options: s }) => {
-    const f = `link:${e}:${s.label}`;
-    return u({ id: f, category: e, options: s }), { id: f };
+  }), n.on("register.link", async ({ category: e, options: u }) => {
+    const f = `link:${e}:${u.label}`;
+    return o({ id: f, category: e, options: u }), { id: f };
   });
-  for (const [e, s] of Object.entries(o))
-    for (const [f, p] of Object.entries(s)) {
-      const h = `${e}.${f}`;
-      n.on(h, async (v) => await p(v));
+  for (const [e, u] of Object.entries(s))
+    for (const [f, x] of Object.entries(u)) {
+      const v = `${e}.${f}`;
+      n.on(v, async (y) => await x(y));
     }
-  function l(e, s) {
-    return n.call(e, s);
+  function a(e, u) {
+    return n.call(e, u);
   }
-  function a() {
+  function d() {
     n.disconnect();
   }
-  return { plugin: d, rpc: n, call: l, disconnect: a };
+  return { plugin: p, rpc: n, call: a, disconnect: d };
+}
+function B({
+  children: i,
+  init: t = {},
+  title: s = "Sidebar Menu",
+  width: r = "300px",
+  height: c = "600px"
+}) {
+  const { moises: o } = P(t);
+  return g(() => {
+    o && o.ui.setPluginSize({ width: r, height: c });
+  }, [r, c, o]), /* @__PURE__ */ b(
+    m,
+    {
+      height: "100vh",
+      style: {
+        height: "100vh",
+        backgroundColor: "var(--gray-1)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ l(
+          m,
+          {
+            p: "4",
+            style: {
+              position: "sticky",
+              top: 0,
+              zIndex: 10,
+              backgroundColor: "var(--neutral-2)"
+            },
+            children: /* @__PURE__ */ l(h, { title: s, children: /* @__PURE__ */ l(
+              h.Button,
+              {
+                onClick: () => {
+                  o.ui.close();
+                },
+                children: /* @__PURE__ */ l(S, {})
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ l(
+          m,
+          {
+            px: "4",
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              backgroundColor: "var(--neutral-2)"
+            },
+            children: i
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  j as MoisesExtensionHost,
-  $ as initMoisesExtension
+  I as MoisesExtensionHost,
+  B as SidebarMenu,
+  P as initMoisesExtension
 };

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@moises.ai/extension",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "SDK for Moises AI extensions",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "bin": {
-    "moises-extension": "./scripts/init-boilerplate.js"
-  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -26,8 +23,7 @@
     "dist",
     "styles.css",
     "src/client.d.ts",
-    "src/index.d.ts",
-    "scripts/init-boilerplate.js"
+    "src/index.d.ts"
   ],
   "scripts": {
     "build": "vite build",
@@ -51,7 +47,8 @@
     "@vitejs/plugin-react": "^4.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "@moises.ai/design-system": "^2.0.33"
   },
   "publishConfig": {
     "access": "public"

package/scripts/init-boilerplate.js

@@ -1,114 +0,0 @@
-#!/usr/bin/env node
-import { promisify } from "util";
-import cp from "child_process";
-import path from "path";
-import fs from "fs";
-
-// convert libs to promises
-const exec = promisify(cp.exec);
-const rm = promisify(fs.rm);
-
-// Simple custom spinner implementation
-class Spinner {
-  constructor(message) {
-    this.message = message;
-    this.frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-    this.currentFrame = 0;
-    this.isSpinning = false;
-    this.interval = null;
-  }
-
-  start() {
-    this.isSpinning = true;
-    process.stdout.write('\x1B[?25l'); // Hide cursor
-    this.interval = setInterval(() => {
-      process.stdout.write('\r' + this.frames[this.currentFrame] + ' ' + this.message);
-      this.currentFrame = (this.currentFrame + 1) % this.frames.length;
-    }, 100);
-    return this;
-  }
-
-  succeed(successMessage) {
-    this.stop();
-    process.stdout.write('\r✅ ' + (successMessage || this.message) + '\n');
-  }
-
-  fail(errorMessage) {
-    this.stop();
-    process.stdout.write('\r❌ ' + (errorMessage || this.message) + '\n');
-  }
-
-  stop() {
-    if (this.interval) {
-      clearInterval(this.interval);
-      this.interval = null;
-    }
-    this.isSpinning = false;
-    process.stdout.write('\x1B[?25h'); // Show cursor
-    process.stdout.write('\r' + ' '.repeat(this.message.length + 10) + '\r');
-  }
-}
-
-if (process.argv.length < 3) {
-  console.log("You have to provide a name for your extension project.");
-  console.log("For example:");
-  console.log("    npx @moises.ai/extension my-extension");
-  process.exit(1);
-}
-
-// Display ASCII banner
-console.log(`
-                 _                      _ 
-                (_)                    (_)
- _ __ ___   ___  _ ___  ___  ___   __ _ _ 
-| '_ \` _ \\ / _ \\| / __|/ _ \\/ __| / _\` | |
-| | | | | | (_) | \\__ \\  __/\\__ \\| (_| | |
-|_| |_| |_|\\___/|_|___/\\___||___(_)__,_|_|
-                                          
-`);
-
-const projectName = process.argv[2];
-const currentPath = process.cwd();
-const projectPath = path.join(currentPath, projectName);
-const git_repo = "https://github.com/moises-ai/extensions-boilerplate.git";
-
-// create project directory
-if (fs.existsSync(projectPath)) {
-  console.log(`The directory ${projectName} already exists in the current directory, please give it another name.`);
-  process.exit(1);
-} else {
-  fs.mkdirSync(projectPath);
-}
-
-try {
-  const gitSpinner = new Spinner("Downloading boilerplate files...").start();
-  // clone the repo into the project folder -> creates the new boilerplate
-  await exec(`git clone --depth 1 ${git_repo} ${projectPath} --quiet`);
-  gitSpinner.succeed();
-
-  const cleanSpinner = new Spinner("Cleaning up template files...").start();
-  // remove git history to start fresh
-  const rmGit = rm(path.join(projectPath, ".git"), { recursive: true, force: true });
-  await rmGit;
-  cleanSpinner.succeed();
-
-  // change to project directory for npm operations
-  process.chdir(projectPath);
-
-  const npmSpinner = new Spinner("Installing dependencies...").start();
-  await exec("npm install");
-  npmSpinner.succeed();
-
-  console.log("\n🎉 Extension project created successfully!");
-  console.log("\nNext steps:");
-  console.log(`    cd ${projectName}`);
-  console.log(`    npm run dev`);
-  console.log("\nHappy coding! 🚀");
-
-} catch (error) {
-  // clean up in case of error, so the user does not have to do it manually
-  fs.rmSync(projectPath, { recursive: true, force: true });
-  console.error("❌ Error creating extension project:");
-  console.error(error.message);
-  process.exit(1);
-}