@kittl/sdk 0.0.9 → 1.0.0-alpha.1

package/dist/editorScriptRunner/sdk.js

@@ -12,6 +12,10 @@
   }
 
   var FROM_EXTENSION_COMMANDS = {
+    /** Capability-owned AI callback registration. */
+    AI_GENERATOR_SUBSCRIBE: "ai-generator-subscribe",
+    /** Capability-owned AI callback teardown. */
+    AI_GENERATOR_UNSUBSCRIBE: "ai-generator-unsubscribe",
     /** SDK API call */
     SDK_CALL: "sdk-call",
     /** AI handler registration */
@@ -60,6 +64,8 @@
     LOADED: "loaded"
   };
   var TO_EXTENSION_COMMANDS = {
+    /** Callback payload for generator or pending-set subscriptions. */
+    AI_GENERATOR_UPDATE: "ai-generator-update",
     /** SDK API response */
     SDK_RESPONSE: "sdk-response",
     /** File browser fetch content request */
@@ -76,6 +82,10 @@
     APP_STATE_UPDATE: "app-state-update"
   };
 
+  function isAIGeneratorUpdateMessage(data) {
+    return !!data && typeof data === "object" && "command" in data && data.command === "ai-generator-update" && "subscriptionId" in data && typeof data.subscriptionId === "string";
+  }
+
   var isSDKResponseMessage = (data) => {
     return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.SDK_RESPONSE && "messageId" in data && typeof data.messageId === "string";
   };
@@ -145,7 +155,10 @@
     "https://app.stagingdesigner.com",
     "https://*.stagingdesigner.com",
     "http://localhost:3000",
-    "https://app.kittl.com"
+    "https://app.kittl.com",
+    // website, for sandboxed standalone dashboard pages
+    "http://localhost:3003",
+    "https://www.kittl.com"
   ];
   var toOrigin = (value) => {
     if (!value) {
@@ -200,8 +213,15 @@
   };
 
   var pendingRequests = /* @__PURE__ */ new Map();
+  var sdkVersion;
+  function setSDKVersion(version2) {
+    sdkVersion = version2;
+  }
   var postMessageToParent = (message) => {
-    window.parent.postMessage(message, getParentDomain());
+    window.parent.postMessage(
+      sdkVersion === void 0 ? message : { ...message, sdkVersion },
+      getParentDomain()
+    );
   };
   var sendMessage = (message) => {
     postMessageToParent(message);
@@ -224,6 +244,27 @@
   };
 
   var createSDKCallMessage = {
+    aiGenerator: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "aiGenerator"
+    }),
+    mockup: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "mockup"
+    }),
+    fileBrowser: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "fileBrowser"
+    }),
     ai: (dots, args, messageId) => ({
       command: FROM_EXTENSION_COMMANDS.SDK_CALL,
       dots,
@@ -259,6 +300,13 @@
       messageId,
       apiType: "font"
     }),
+    project: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "project"
+    }),
     state: (dots, args, messageId) => ({
       command: FROM_EXTENSION_COMMANDS.SDK_CALL,
       dots,
@@ -279,6 +327,27 @@
       args,
       messageId,
       apiType: "data"
+    }),
+    brandKit: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "brandKit"
+    }),
+    openMicroEditor: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "openMicroEditor"
+    }),
+    openMainEditor: (dots, args, messageId) => ({
+      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+      dots,
+      args,
+      messageId,
+      apiType: "openMainEditor"
     })
   };
   function createApiProxy(apiType) {
@@ -295,6 +364,64 @@
     });
   }
 
+  function createAIGeneratorBridgeApi() {
+    const callbacks = /* @__PURE__ */ new Map();
+    const proxy = createApiProxy("aiGenerator");
+    async function subscribe(request, callback) {
+      const subscriptionId = generateMessageId();
+      callbacks.set(subscriptionId, callback);
+      let response;
+      try {
+        response = await sendMessage({
+          command: "ai-generator-subscribe",
+          ...request,
+          subscriptionId,
+          messageId: generateMessageId()
+        });
+      } catch (error) {
+        callbacks.delete(subscriptionId);
+        throw error;
+      }
+      if (!response.isOk) {
+        callbacks.delete(subscriptionId);
+        throw new Error(response.error.message);
+      }
+      return () => {
+        callbacks.delete(subscriptionId);
+        postMessageToParent({
+          command: "ai-generator-unsubscribe",
+          subscriptionId
+        });
+      };
+    }
+    const methods = {
+      registerGenerator: (id, callback) => subscribe({ method: "registerGenerator", args: [id] }, (update) => {
+        if (update) callback(update);
+      }),
+      subscribeToGenerationUpdates: (ids, callback) => subscribe(
+        { method: "subscribeToGenerationUpdates", args: [ids] },
+        (update) => {
+          if (update) callback(update);
+        }
+      ),
+      subscribeToPendingGenerations: (callback) => subscribe(
+        { method: "subscribeToPendingGenerations", args: [] },
+        () => callback()
+      ),
+      /** Callers may reuse richer internal submission objects; never send their local abort callbacks. */
+      cancelGenerations: (submission) => proxy.cancelGenerations({
+        generationIds: submission.generationIds,
+        until: submission.until
+      })
+    };
+    return {
+      api: new Proxy(proxy, {
+        get: (target, property, receiver) => property in methods ? methods[property] : Reflect.get(target, property, receiver)
+      }),
+      dispatch: (message) => callbacks.get(message.subscriptionId)?.(message.update)
+    };
+  }
+
   var generationHandlers = /* @__PURE__ */ new Map();
   var generationSubscriptions = /* @__PURE__ */ new Map();
   var dispatchAIGenerationUpdate = (subscriptionId, update) => {
@@ -662,7 +789,7 @@
     }
   };
 
-  var createBatch = async () => {
+  var createBatchFor = async (apiType) => {
     const response = await sendMessage({
       command: FROM_EXTENSION_COMMANDS.BATCH_CREATE,
       messageId: generateMessageId()
@@ -671,14 +798,17 @@
       throw response.error;
     }
     const { batchKey } = response.result;
-    const sendDesignCall = (dots, args) => sendMessage({
-      command: FROM_EXTENSION_COMMANDS.SDK_CALL,
-      dots,
-      args,
-      messageId: generateMessageId(),
-      apiType: "design",
-      batchKey
-    });
+    const sendDesignCall = (dots, args) => {
+      const message = {
+        command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+        dots: apiType === "project" ? ["design", "api", ...dots] : dots,
+        args,
+        messageId: generateMessageId(),
+        apiType,
+        batchKey
+      };
+      return sendMessage(message);
+    };
     const commit = async () => {
       const res = await sendMessage({
         command: FROM_EXTENSION_COMMANDS.BATCH_COMMIT,
@@ -705,6 +835,8 @@
     };
     return buildNode([]);
   };
+  var createBatch = () => createBatchFor("design");
+  var createProjectBatch = () => createBatchFor("project");
 
   var createContextBridgeApi = () => {
     const contextProxy = createApiProxy("context");
@@ -872,6 +1004,7 @@
   var appStateApi = createAppStateBridgeApi();
   var { api: contextApi, dispatch: dispatchContextUpdate } = createContextBridgeApi();
   var authClient = new SandboxedAuthClient();
+  var aiGeneratorBridge = createAIGeneratorBridgeApi();
   var handleIncomingMessage = (event) => {
     const parent = window.parent;
     if (!parent || parent === window) {
@@ -894,6 +1027,10 @@
       statelessApi.dispatch(data.type, data.payload);
       return;
     }
+    if (isAIGeneratorUpdateMessage(data)) {
+      aiGeneratorBridge.dispatch(data);
+      return;
+    }
     if (isAIGenerationUpdatePushMessage(data)) {
       dispatchAIGenerationUpdate(data.subscriptionId, data.update);
       return;
@@ -918,7 +1055,28 @@
       );
     }
   };
+  var projectProxy = createApiProxy("project");
+  var projectApi = {
+    design: {
+      state: {
+        getState: projectProxy.design.state.getState,
+        subscribe: designStateApi.subscribe
+      },
+      api: projectProxy.design.api,
+      createBatch: createProjectBatch
+    },
+    app: {
+      state: {
+        getState: projectProxy.app.state.getState,
+        subscribe: appStateApi.subscribe
+      },
+      api: projectProxy.app.api
+    }
+  };
   var bridgeHandlers = {
+    aiGenerator: aiGeneratorBridge.api,
+    brandKit: createApiProxy("brandKit"),
+    mockup: createApiProxy("mockup"),
     ai: createAIApiProxy(),
     context: contextApi,
     data: createApiProxy("data"),
@@ -927,12 +1085,17 @@
     appStore: appStateApi,
     export: createApiProxy("export"),
     font: createApiProxy("font"),
+    project: projectApi,
     state: createApiProxy("state"),
     upload: createApiProxy("upload"),
-    fileBrowser: createFileBrowserApiProxy(),
+    fileBrowser: { getFiles: createApiProxy("fileBrowser").getFiles },
+    fileBrowserRegistration: createFileBrowserApiProxy(),
+    openMicroEditor: createApiProxy("openMicroEditor"),
+    openMainEditor: createApiProxy("openMainEditor"),
     auth: authClient,
     stateless: statelessApi,
-    createBatch
+    createBatch,
+    createProjectBatch
   };
 
   // src/api/dragAndDrop/DragAndDropApi.ts
@@ -967,7 +1130,7 @@
     async dropImage(input) {
       let objectId = null;
       try {
-        const offset = unwrapResult(await this.context.get()).dragAndDrop.offset;
+        const offset = unwrapResult(await this.context.get()).iframeOffset;
         const params = this.buildDropImageParams(input, offset);
         objectId = await this.addDroppedImage(params);
         if (input.persistImage) {
@@ -1198,29 +1361,31 @@
 
   // src/createEditorSDKAPIs.ts
   function createEditorSDKAPIs() {
+    const { project } = bridgeHandlers;
+    const dragAndDrop = new DragAndDropApi({
+      state: project.app.api,
+      context: bridgeHandlers.context,
+      design: project.design.api,
+      upload: bridgeHandlers.upload
+    });
     return {
-      ai: bridgeHandlers.ai,
-      data: bridgeHandlers.data,
-      design: bridgeHandlers.design,
+      aiGenerator: bridgeHandlers.aiGenerator,
+      mockup: bridgeHandlers.mockup,
+      project,
       export: bridgeHandlers.export,
-      designStore: bridgeHandlers.designStore,
-      appStore: bridgeHandlers.appStore,
-      context: bridgeHandlers.context,
-      dragAndDrop: new DragAndDropApi({
-        state: bridgeHandlers.state,
-        context: bridgeHandlers.context,
-        design: bridgeHandlers.design,
-        upload: bridgeHandlers.upload
-      }),
-      state: bridgeHandlers.state,
+      helpers: { dragAndDrop },
+      dragAndDrop,
       auth: bridgeHandlers.auth,
       upload: bridgeHandlers.upload,
       stateless: bridgeHandlers.stateless,
       font: bridgeHandlers.font,
-      createBatch: bridgeHandlers.createBatch
+      fileBrowser: bridgeHandlers.fileBrowser
     };
   }
 
+  // package.json
+  var version = "1.0.0";
+
   // src/utils/syncHtmlDataThemeFromHostContext.ts
   async function syncHtmlDataThemeFromHostContext(kittl2) {
     if (typeof document === "undefined") {
@@ -1261,12 +1426,17 @@
           handleIncomingMessage(event);
         }
       );
-      void syncHtmlDataThemeFromHostContext(kittl2).then(() => {
+      const { context } = apis;
+      const themeSynced = context?.get && context.subscribe ? syncHtmlDataThemeFromHostContext({
+        context
+      }) : Promise.resolve();
+      void themeSynced.catch(() => void 0).then(() => {
         kittl2.onLoadedCallback?.();
         sendLoaded();
       });
     };
     if (typeof document !== "undefined" && typeof window !== "undefined") {
+      setSDKVersion(version);
       window.kittl = kittl2;
       if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", initSdk);
@@ -1278,5 +1448,9 @@
   }
 
   // src/editorScriptRunner.ts
-  var kittl = createKittlSDK(createEditorSDKAPIs());
+  var kittl = createKittlSDK({
+    ...createEditorSDKAPIs(),
+    // nothing is contextually relevant to a hidden script runner yet
+    context: {}
+  });
 })();