@moises.ai/extension 0.0.19 → 1.0.0

package/Readme.md

@@ -1,34 +1 @@
-# Moises Extensions SDK
-
-```jsx
-"use client"
-
-import { useEffect } from "react";
-import { initMoisesExtension, Button } from "@moises.ai/extension";
-
-const useMoisesExtension = initMoisesExtension({
-  id: "your-extension-id",
-  name: "Sample extension",
-  description: "A bit about this extension",
-  version: "1.0.0",
-  author: "Moises Systems Incs",
-});
-
-export default function Home() {
-  const { moises, ModalLayout, isConnected } = useMoisesExtension();
-
-  useEffect(() => {
-    if (!moises) {
-      return
-    }
-
-    moises.link("footer:menu", { label: "Audio Editor" }, async () => {
-      moises.ui.open({ mountPoint: "bottomPanel" });
-    })
-  }, [moises]);
-
-  return (
-    <Button onClick={() => moises.ui.alert({ title: "Hello", message: "World" })}>Click me</Button>
-  );
-}
-```
+# Moises Extensions SDK

package/dist/client-Bt6Snfq-.js

@@ -0,0 +1,108 @@
+class h {
+  constructor({ target: e }) {
+    this.target = e, this.handlers = /* @__PURE__ */ new Map(), this.pendingRequests = /* @__PURE__ */ new Map(), this.requestId = 0, this.connected = !1, this.boundHandler = this.handleMessage.bind(this), this.connect();
+  }
+  connect() {
+    window.addEventListener("message", this.boundHandler), this.connected = !0;
+  }
+  disconnect() {
+    window.removeEventListener("message", this.boundHandler);
+    for (const [e, { reject: s }] of this.pendingRequests.entries())
+      s(new Error("Connection closed")), this.pendingRequests.delete(e);
+    this.connected = !1;
+  }
+  handleMessage(e) {
+    const { data: s, source: t, origin: n } = e;
+    if (t === 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));
+        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}`);
+          return;
+        }
+        Promise.resolve().then(() => c(d)).then((a) => this.sendResponse(t, o, a)).catch((a) => this.sendResponse(t, o, null, a.message));
+      }
+    }
+  }
+  sendResponse(e, s, t, n = null) {
+    e.postMessage({
+      type: "response",
+      requestId: s,
+      result: t,
+      error: n
+    }, "*");
+  }
+  on(e, s) {
+    this.handlers.set(e, s);
+  }
+  off(e) {
+    this.handlers.delete(e);
+  }
+  once(e, s) {
+    const t = async (n) => (this.off(e), s(n));
+    this.on(e, t);
+  }
+  async call(e, s) {
+    const t = this.requestId++;
+    return new Promise((n, r) => {
+      this.pendingRequests.set(t, { resolve: n, reject: r }), this.target.postMessage({
+        type: "request",
+        method: e,
+        params: s,
+        requestId: t
+      }, "*");
+    });
+  }
+}
+class u {
+  constructor(e) {
+    this.rpc = new h(e), this.proxy = this.createProxy();
+  }
+  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);
+        }
+      })
+    });
+  }
+  // Proxy the on method to maintain the same interface
+  // on(method, handler) {
+  //   return this.rpc.on(method, handler);
+  // }
+}
+function l(i) {
+  const e = {
+    id: i.id,
+    name: i.name,
+    description: i.description,
+    icon: i.icon,
+    author: i.author,
+    version: i.version,
+    isLoaded: !1,
+    events: {}
+  }, { proxy: s, rpc: t } = 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;
+}
+export {
+  l as M,
+  h as R
+};

package/dist/client.js

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

package/dist/index.d.ts

@@ -0,0 +1,230 @@
+
+/** Controlling common UI elements */
+export interface UiApi {
+
+  /** Sets the extension size in the interface */
+  setPluginSize: (params: {
+
+    /** Width in pixels */
+    width: number;
+
+    /** Height in pixels */
+    height: number;
+  }) => void;
+
+  /** Displays a progress bar or loading indicator */
+  progress: (options: {
+
+    /** Progress message */
+    message?: string;
+
+    /** Progress value (0-100) */
+    value?: number;
+  }) => Promise<void>;
+
+  /** Displays an alert to the user */
+  alert: (options: {
+
+    /** Alert title */
+    title: string;
+
+    /** Alert message */
+    message: string;
+  }) => Promise<void>;
+
+  /** Displays a confirmation dialog */
+  confirm: (options: {
+
+    /** Confirmation title */
+    title: string;
+
+    /** Confirmation message */
+    message: string;
+  }) => Promise<boolean>;
+
+  /** Displays a text input dialog */
+  prompt: (options: {
+
+    /** Prompt title */
+    title: string;
+
+    /** Prompt message */
+    message: string;
+
+    /** Default input value */
+    defaultValue?: string;
+  }) => Promise<string>;
+
+  /** Creates a panel in the interface */
+  panel: (options: {
+
+    /** Panel title */
+    title: string;
+
+    /** Panel content */
+    content?: string;
+  }) => Promise<any>;
+
+  /** Closes the extension */
+  close: () => Promise<void>;
+
+  /** Opens the extension */
+  open: (params: {
+
+    /** Location where the extension will be mounted */
+    mountPoint: string;
+  }) => Promise<void>;
+}
+
+
+/** Session API for managing audio sessions, tracks, and playback controls */
+export interface SessionApi {
+
+  /** Exports the audio from the current session */
+  export: () => Promise<any>;
+
+  /** Gets the list of tracks from the session */
+  tracks: () => Promise<any[]>;
+
+  /** Starts session playback */
+  play: () => void;
+
+  /** Pauses session playback */
+  pause: () => void;
+
+  /** Toggles between play and pause */
+  togglePlayback: () => void;
+
+  /** Clears the current selection in the session */
+  clearSelection: () => void;
+
+  /** Sets a selection in the session */
+  setSelection: (params: {
+
+    /** ID of the track to be selected */
+    trackId?: string;
+
+    /** Start position of the selection */
+    start: number;
+
+    /** End position of the selection */
+    end: number;
+  }) => void;
+}
+
+
+/** Track API for managing audio tracks */
+export interface TrackApi {
+
+  /** Gets a track by its ID */
+  get: (trackId: string) => Promise<any>;
+
+  /** Creates a new track */
+  create: (params: {
+
+    /** The ID of the group to add the track to */
+    groupId: string;
+
+    /** The audio data for the track */
+    arrayBuffer: any;
+
+    /** The name of the track */
+    name?: string;
+
+    /** Additional options for the track */
+    options?: any;
+  }) => Promise<any>;
+
+  /** Updates a track */
+  update: (params: {
+
+    /** The ID of the track to update */
+    trackId: string;
+
+    /** The audio data for the track */
+    arrayBuffer: any;
+
+    /** Additional options for the track */
+    options?: any;
+  }) => Promise<any>;
+
+  /** Deletes a track */
+  delete: (trackId: string) => Promise<any>;
+}
+
+
+/** Registration methods for extensions */
+export interface RegisterApi {
+
+  /** Register the extension with the parent application */
+  extension: (plugin: any) => any;
+
+  /** Register a link connection for data streaming */
+  link: (options: any) => any;
+}
+
+
+export interface MoisesAPI {
+  /** Controlling common UI elements */
+  ui: UiApi;
+  /** Session API for managing audio sessions, tracks, and playback controls */
+  session: SessionApi;
+  /** Track API for managing audio tracks */
+  track: TrackApi;
+  /** Registration methods for extensions */
+  register: RegisterApi;
+  
+  /** Custom link method for easy connection setup (convenience wrapper around register.link) */
+  link: (category: string, options: any, cb: (data: any) => void) => Promise<void>;
+  
+  /** Function to connect the extension to the parent application */
+  connect: () => Promise<any>;
+  /** Plugin metadata and configuration */
+  plugin: any;
+}
+
+
+export interface ExtensionInstance {
+  /** Function to connect the extension to the parent application */
+  connect: () => Promise<any>;
+  /** Plugin metadata and configuration */
+  plugin: any;
+  /** API to control Moises */
+  api: MoisesAPI;
+}
+
+export interface MoisesHook {
+  /** The complete Moises API with all functionality */
+  moises: MoisesAPI;
+  /** Plugin instance information */
+  plugin: any;
+  /** Connection status */
+  isConnected: boolean;
+  /** Modal layout component for plugin UI */
+  ModalLayout: (props: { children: any; width?: number; height?: number; }) => any;
+}
+
+export interface ExtensionOptions {
+  /** Unique identifier for the extension */
+  id: string;
+  /** Display name of the extension */
+  name: string;
+  /** Description of what the extension does */
+  description: string;
+  /** Icon to represent the extension */
+  icon: string;
+  /** Author of the extension */
+  author?: string;
+  /** Version number of the extension */
+  version?: string;
+}
+
+/**
+ * Creates a new Moises Extension instance (internal client)
+ */
+export function MoisesExtension(options: ExtensionOptions): MoisesAPI;
+
+/**
+ * Initializes a Moises extension hook for React components
+ */
+export function initMoisesExtension(options: ExtensionOptions): () => MoisesHook;

package/dist/index.js

@@ -1,175 +1,72 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useState as q, useEffect as f } from "react";
-import { Box as p } from "@moises.ai/design-system";
-export * from "@moises.ai/design-system";
-class m {
-  constructor({ target: e }) {
-    this.target = e, this.handlers = /* @__PURE__ */ new Map(), this.pendingRequests = /* @__PURE__ */ new Map(), this.requestId = 0, this.connected = !1, this.boundHandler = this.handleMessage.bind(this), this.connect();
-  }
-  connect() {
-    window.addEventListener("message", this.boundHandler), this.connected = !0;
-  }
-  disconnect() {
-    window.removeEventListener("message", this.boundHandler);
-    for (const [e, { reject: n }] of this.pendingRequests.entries())
-      n(new Error("Connection closed")), this.pendingRequests.delete(e);
-    this.connected = !1;
-  }
-  handleMessage(e) {
-    const { data: n, source: s, origin: i } = e;
-    if (s === this.target) {
-      if (n.type === "response") {
-        const { requestId: r, result: a, error: t } = n, c = this.pendingRequests.get(r);
-        c && (t ? c.reject(new Error(t)) : c.resolve(a), this.pendingRequests.delete(r));
-        return;
-      }
-      if (n.type === "request") {
-        const { method: r, params: a, requestId: t } = n, c = this.handlers.get(r);
-        if (!c) {
-          this.sendResponse(s, t, null, `No handler for method: ${r}`);
-          return;
-        }
-        Promise.resolve().then(() => c(a)).then((d) => this.sendResponse(s, t, d)).catch((d) => this.sendResponse(s, t, null, d.message));
-      }
-    }
-  }
-  sendResponse(e, n, s, i = null) {
-    e.postMessage({
-      type: "response",
-      requestId: n,
-      result: s,
-      error: i
-    }, "*");
-  }
-  on(e, n) {
-    this.handlers.set(e, n);
-  }
-  off(e) {
-    this.handlers.delete(e);
-  }
-  once(e, n) {
-    const s = async (i) => (this.off(e), n(i));
-    this.on(e, s);
-  }
-  async call(e, n) {
-    const s = this.requestId++;
-    return new Promise((i, r) => {
-      this.pendingRequests.set(s, { resolve: i, reject: r }), this.target.postMessage({
-        type: "request",
-        method: e,
-        params: n,
-        requestId: s
-      }, "*");
-    });
-  }
-}
-class v {
-  constructor(e) {
-    this.rpc = new m(e), this.proxy = this.createProxy();
-  }
-  createProxy() {
-    return new Proxy(this.rpc, {
-      get: (e, n) => n in e ? e[n] : new Proxy({}, {
-        get: (s, i) => async (r) => {
-          const a = `${n}.${i}`;
-          return e.call(a, r);
-        }
-      })
-    });
-  }
-  // Proxy the on method to maintain the same interface
-  // on(method, handler) {
-  //   return this.rpc.on(method, handler);
-  // }
-}
-function P(o) {
-  const e = {
-    id: o.id,
-    name: o.name,
-    description: o.description,
-    icon: o.icon,
-    author: o.author,
-    version: o.version,
-    isLoaded: !1,
-    events: {}
-  }, { proxy: n, rpc: s } = new v({
-    target: window.parent
-  });
-  n.link = async (r, a, t) => {
-    const c = await n.register.link({ category: r, options: a });
-    s.on(`${c.id}`, t);
-  };
-  async function i() {
-    const r = n.register.extension(e);
-    return e.isLoaded = !0, r;
-  }
-  return { connect: i, plugin: e, api: n };
-}
-function E(o) {
-  o.id;
-  let e = null, n = !1;
-  function s() {
-    const [i, r] = q({
-      plugin: e,
-      isConnected: n,
-      moises: e == null ? void 0 : e.api
+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) {
+  i.id;
+  let t = null, o = !1;
+  function r() {
+    const [c, u] = x({
+      plugin: null,
+      isConnected: o,
+      moises: null
     });
-    f(() => {
-      e || (e = P(o), r((t) => ({
-        ...t,
-        plugin: e,
-        moises: e.api
+    g(() => {
+      t || (t = y(i), u((n) => ({
+        ...n,
+        plugin: t.plugin,
+        moises: t
+        // The entire pluginInstance IS the moises API
       })));
-    }, [o]), f(() => {
-      e && !n && e.connect().then(() => {
-        n = !0, r((t) => ({
-          ...t,
+    }, [i]), g(() => {
+      t && !o && t.connect().then(() => {
+        o = !0, u((n) => ({
+          ...n,
           isConnected: !0
         }));
       });
     }, []);
-    function a({ children: t, width: c, height: d }) {
-      const { moises: u } = i;
-      return f(() => {
-        u && u.ui.setPluginSize({ width: c, height: d });
-      }, [c, d, u]), /* @__PURE__ */ g(p, { height: "100vh", style: { height: "100vh", backgroundColor: "var(--gray-1)" }, children: /* @__PURE__ */ g(p, { p: "4", children: t }) });
+    function d({ children: n, width: l, height: a }) {
+      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 }) });
     }
     return {
-      ...i,
-      ModalLayout: a
+      ...c,
+      ModalLayout: d
     };
   }
-  return s;
+  return r;
 }
-function $({ id: o, url: e, exposedAPI: n, iframeRef: s, onRegisterMetadata: i, onRegisterLink: r }) {
-  const a = {
-    id: o,
-    url: e
+function j({ id: i, url: t, exposedAPI: o, iframeRef: r, onRegisterMetadata: c, onRegisterLink: u }) {
+  const d = {
+    id: i,
+    url: t
   };
-  s.current && (s.current.src = e);
-  const t = new m({
-    target: s.current.contentWindow
+  r.current && (r.current.src = t);
+  const n = new M({
+    target: r.current.contentWindow
   });
-  t.on("register.extension", async (u) => {
-    i(u);
-  }), t.on("register.link", async ({ category: u, options: l }) => {
-    const h = `link:${u}:${l.label}`;
-    return r({ id: h, category: u, options: l }), { id: h };
+  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 };
   });
-  for (const [u, l] of Object.entries(n))
-    for (const [h, y] of Object.entries(l)) {
-      const w = `${u}.${h}`;
-      t.on(w, async (x) => await y(x));
+  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));
     }
-  function c(u, l) {
-    return t.call(u, l);
+  function l(e, s) {
+    return n.call(e, s);
   }
-  function d() {
-    t.disconnect();
+  function a() {
+    n.disconnect();
   }
-  return { plugin: a, rpc: t, call: c, disconnect: d };
+  return { plugin: d, rpc: n, call: l, disconnect: a };
 }
 export {
-  $ as MoisesExtensionHost,
-  E as initMoisesExtension
+  j as MoisesExtensionHost,
+  $ as initMoisesExtension
 };

package/package.json

@@ -1,37 +1,35 @@
 {
   "name": "@moises.ai/extension",
-  "version": "0.0.19",
+  "version": "1.0.0",
   "description": "SDK for Moises AI extensions",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "style": "styles.css",
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
-    "./icons": {
-      "import": "./dist/icons.js",
-      "require": "./dist/icons.js"
-    },
-    "./primitives": {
-      "import": "./dist/primitives.js",
-      "require": "./dist/primitives.js"
+    "./client": {
+      "import": "./dist/client.js",
+      "require": "./dist/client.js",
+      "types": "./src/client.d.ts"
     },
     "./styles.css": "./styles.css"
   },
   "files": [
     "dist",
-    "styles.css"
+    "styles.css",
+    "src/client.d.ts",
+    "src/index.d.ts"
   ],
   "scripts": {
     "build": "vite build",
-    "dev": "vite build --watch"
-  },
-  "dependencies": {
-    "@moises.ai/design-system": "2.0.15"
+    "dev": "vite build --watch",
+    "generate-types": "node scripts/generate-types.js",
+    "generate-typed-client": "node scripts/generate-typed-client.js"
   },
   "peerDependencies": {
     "react": "*",