@kittl/sdk 0.0.9 → 1.0.0-alpha.1

package/dist/editorContentPanel/sdk.esm.js

@@ -2,6 +2,10 @@
 /*! Kittl SDK - https://kittl.com - see license for terms */
 
 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 */
@@ -50,6 +54,8 @@ var FROM_EXTENSION_COMMANDS = {
   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 */
@@ -66,6 +72,10 @@ var TO_EXTENSION_COMMANDS = {
   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";
 };
@@ -135,7 +145,10 @@ var APPROVED_EXTENSION_COMMUNICATION_DOMAINS = [
   "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) {
@@ -190,8 +203,15 @@ var getParentDomain = () => {
 };
 
 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);
@@ -214,6 +234,27 @@ var sendLoaded = () => {
 };
 
 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,
@@ -249,6 +290,13 @@ var createSDKCallMessage = {
     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,
@@ -269,6 +317,27 @@ var createSDKCallMessage = {
     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) {
@@ -285,6 +354,64 @@ function createApiProxy(apiType) {
   });
 }
 
+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) => {
@@ -652,7 +779,7 @@ var SandboxedAuthClient = class {
   }
 };
 
-var createBatch = async () => {
+var createBatchFor = async (apiType) => {
   const response = await sendMessage({
     command: FROM_EXTENSION_COMMANDS.BATCH_CREATE,
     messageId: generateMessageId()
@@ -661,14 +788,17 @@ var createBatch = async () => {
     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,
@@ -695,6 +825,8 @@ var createBatch = async () => {
   };
   return buildNode([]);
 };
+var createBatch = () => createBatchFor("design");
+var createProjectBatch = () => createBatchFor("project");
 
 var createContextBridgeApi = () => {
   const contextProxy = createApiProxy("context");
@@ -862,6 +994,7 @@ var designStateApi = createDesignStateBridgeApi();
 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) {
@@ -884,6 +1017,10 @@ var handleIncomingMessage = (event) => {
     statelessApi.dispatch(data.type, data.payload);
     return;
   }
+  if (isAIGeneratorUpdateMessage(data)) {
+    aiGeneratorBridge.dispatch(data);
+    return;
+  }
   if (isAIGenerationUpdatePushMessage(data)) {
     dispatchAIGenerationUpdate(data.subscriptionId, data.update);
     return;
@@ -908,7 +1045,28 @@ var handleIncomingMessage = (event) => {
     );
   }
 };
+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"),
@@ -917,12 +1075,17 @@ var bridgeHandlers = {
   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/utils.ts
@@ -965,7 +1128,7 @@ var DragAndDropApi = class {
   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) {
@@ -1196,29 +1359,31 @@ var DragAndDropApi = class {
 
 // 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") {
@@ -1259,12 +1424,17 @@ function createKittlSDK(apis) {
         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,7 +1448,13 @@ function createKittlSDK(apis) {
 // src/editorContentPanel.ts
 var kittl = createKittlSDK({
   ...createEditorSDKAPIs(),
-  fileBrowser: bridgeHandlers.fileBrowser
+  context: bridgeHandlers.context,
+  brandKit: bridgeHandlers.brandKit,
+  fileBrowser: {
+    getFiles: bridgeHandlers.fileBrowser.getFiles,
+    // Keep existing content-panel extensions working while registration moves to sharedFileBrowser context.
+    registerUploadBrowser: bridgeHandlers.fileBrowserRegistration.registerUploadBrowser
+  }
 });
 export {
   kittl,