@kittl/sdk 0.0.9 → 1.0.0-alpha.1

package/dist/{kittl-sdk.js → dashboardStandalonePage/sdk.js}

@@ -5,6 +5,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 */
@@ -53,6 +57,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 */
@@ -69,6 +75,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";
   };
@@ -138,7 +148,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) {
@@ -193,8 +206,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);
@@ -217,6 +237,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,
@@ -252,6 +293,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,
@@ -272,6 +320,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) {
@@ -288,6 +357,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) => {
@@ -655,7 +782,7 @@
     }
   };
 
-  var createBatch = async () => {
+  var createBatchFor = async (apiType) => {
     const response = await sendMessage({
       command: FROM_EXTENSION_COMMANDS.BATCH_CREATE,
       messageId: generateMessageId()
@@ -664,14 +791,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,
@@ -698,6 +828,8 @@
     };
     return buildNode([]);
   };
+  var createBatch = () => createBatchFor("design");
+  var createProjectBatch = () => createBatchFor("project");
 
   var createContextBridgeApi = () => {
     const contextProxy = createApiProxy("context");
@@ -865,6 +997,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) {
@@ -887,6 +1020,10 @@
       statelessApi.dispatch(data.type, data.payload);
       return;
     }
+    if (isAIGeneratorUpdateMessage(data)) {
+      aiGeneratorBridge.dispatch(data);
+      return;
+    }
     if (isAIGenerationUpdatePushMessage(data)) {
       dispatchAIGenerationUpdate(data.subscriptionId, data.update);
       return;
@@ -911,7 +1048,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"),
@@ -920,12 +1078,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/utils.ts
@@ -936,291 +1099,8 @@
     throw result.error;
   }
 
-  // src/api/dragAndDrop/DragAndDropApi.ts
-  var HIDDEN_DRAG_PREVIEW_OFFSET_PX = "-9999px";
-  var DragAndDropApi = class {
-    /**
-     * Creates the drag-and-drop API from bridged SDK dependencies.
-     */
-    constructor(dependencies) {
-      this.state = dependencies.state;
-      this.context = dependencies.context;
-      this.design = dependencies.design;
-      this.upload = dependencies.upload;
-    }
-    /**
-     * Handles the extension-side `dragstart` event and attaches a one-time
-     * `dragend` listener that completes the Kittl drop flow.
-     */
-    startDragImageEvent(input) {
-      const metrics = this.captureDragMetrics(input);
-      this.applyNativeDragSetup(input.event.dataTransfer, input.img, metrics);
-      const handleDragEnd = (event) => {
-        void this.handleManagedDragEnd(metrics, event);
-      };
-      input.img.addEventListener("dragend", handleDragEnd, { once: true });
-    }
-    /**
-     * Inserts the dropped image at the computed drop position. When
-     * `input.persistImage === true`, fetches `src`, uploads it, and replaces
-     * the inserted object with the uploaded asset.
-     */
-    async dropImage(input) {
-      let objectId = null;
-      try {
-        const offset = unwrapResult(await this.context.get()).dragAndDrop.offset;
-        const params = this.buildDropImageParams(input, offset);
-        objectId = await this.addDroppedImage(params);
-        if (input.persistImage) {
-          await this.persistDroppedImage({
-            objectId,
-            src: input.src
-          });
-        }
-      } catch {
-      }
-      return objectId;
-    }
-    /**
-     * Adds the dropped image to the design and returns the inserted object id.
-     */
-    async addDroppedImage(params) {
-      const result = await this.design.image.addImage(params);
-      const insertedImage = unwrapResult(result);
-      if (!insertedImage?.id) {
-        throw new Error("Failed to add dropped image");
-      }
-      return insertedImage.id;
-    }
-    /**
-     * Fetches `src`, uploads the bytes, and replaces the inserted object with
-     * the uploaded Kittl asset when persistence succeeds.
-     */
-    async persistDroppedImage(input) {
-      const response = await fetch(input.src);
-      if (!response.ok) {
-        throw new Error(`Failed to fetch dropped image: ${response.status}`);
-      }
-      const blob = await response.blob();
-      const uploadResult = await this.upload.image.upload({ blob });
-      const uploadedFiles = unwrapResult(uploadResult);
-      if (uploadedFiles.length === 0) {
-        throw new Error("Failed to upload dropped image");
-      }
-      await this.replaceWithUploadedImage({
-        objectId: input.objectId,
-        objectName: uploadedFiles[0].objectName
-      });
-    }
-    /**
-     * Replaces the inserted image with the uploaded asset if the object still
-     * exists.
-     */
-    async replaceWithUploadedImage(input) {
-      const objectResult = await this.design.object.getObject({
-        id: input.objectId
-      });
-      if (!objectResult.isOk) {
-        return;
-      }
-      await this.design.image.updateImage({
-        id: input.objectId,
-        objectName: input.objectName
-      });
-    }
-    /**
-     * Converts iframe drag coordinates into `addImage(...)` params, applying host
-     * offsets, grab offsets, and optional rendered size.
-     */
-    buildDropImageParams(input, offset) {
-      const grabOffsetX = input.grabOffsetX ?? 0;
-      const grabOffsetY = input.grabOffsetY ?? 0;
-      const baseX = input.x + offset.left;
-      const baseY = input.y + offset.top;
-      const dropX = Math.floor(baseX - grabOffsetX);
-      const dropY = Math.floor(baseY - grabOffsetY);
-      const baseParams = {
-        src: input.src.trim(),
-        position: {
-          relative: {
-            to: "screen",
-            coordinates: {
-              x: dropX,
-              y: dropY
-            }
-          }
-        }
-      };
-      const { imgWidth, imgHeight } = input;
-      if (typeof imgWidth !== "number" || typeof imgHeight !== "number") {
-        return baseParams;
-      }
-      return {
-        ...baseParams,
-        size: {
-          width: imgWidth,
-          height: imgHeight,
-          applyViewportScale: true
-        }
-      };
-    }
-    /**
-     * Captures the rendered image size and pointer grab point at drag start so
-     * the native drag preview and drop placement stay aligned.
-     */
-    captureDragMetrics(input) {
-      const rect = input.img.getBoundingClientRect();
-      const displayWidth = Math.floor(rect.width);
-      const displayHeight = Math.floor(rect.height);
-      const grabOffsetX = this.getGrabOffset(
-        input.event.clientX - rect.left,
-        displayWidth
-      );
-      const grabOffsetY = this.getGrabOffset(
-        input.event.clientY - rect.top,
-        displayHeight
-      );
-      return {
-        displayWidth,
-        displayHeight,
-        grabOffsetX,
-        grabOffsetY,
-        src: input.img.src,
-        persistImage: input.persistImage === true
-      };
-    }
-    /**
-     * Clamps a raw pointer offset into the rendered image bounds.
-     */
-    getGrabOffset(rawOffset, displaySize) {
-      return this.clampFloor(rawOffset, 0, displaySize);
-    }
-    /**
-     * Floors a number and clamps it into the provided inclusive range.
-     */
-    clampFloor(value, min, max) {
-      return Math.min(Math.max(Math.floor(value), min), max);
-    }
-    /**
-     * Configures the browser drag payload and drag preview image for the current
-     * drag operation.
-     */
-    applyNativeDragSetup(dataTransfer, img, metrics) {
-      if (!dataTransfer) {
-        return;
-      }
-      const { displayWidth, displayHeight, grabOffsetX, grabOffsetY, src } = metrics;
-      dataTransfer.setData("text/plain", src);
-      dataTransfer.effectAllowed = "copy";
-      const previewCanvas = this.getOrCreateDragPreviewCanvas();
-      if (previewCanvas.canvas && previewCanvas.context) {
-        previewCanvas.canvas.width = displayWidth;
-        previewCanvas.canvas.height = displayHeight;
-        previewCanvas.canvas.style.width = `${displayWidth}px`;
-        previewCanvas.canvas.style.height = `${displayHeight}px`;
-        previewCanvas.context.clearRect(0, 0, displayWidth, displayHeight);
-        previewCanvas.context.drawImage(img, 0, 0, displayWidth, displayHeight);
-        dataTransfer.setDragImage(previewCanvas.canvas, grabOffsetX, grabOffsetY);
-        return;
-      }
-      dataTransfer.setDragImage(img, grabOffsetX, grabOffsetY);
-    }
-    /**
-     * Creates and reuses the hidden canvas used as the native drag preview.
-     * Reuse one canvas as a native drag image so we can control preview size exactly.
-     * Browsers may auto-scale element drag ghosts, which shifts perceived cursor alignment.
-     * Must be in the DOM - Chrome ignores setDragImage on detached elements and falls back
-     * to a scaled ghost. Position it off-screen so it's invisible.
-     */
-    getOrCreateDragPreviewCanvas() {
-      if (typeof document === "undefined" || !document.body) {
-        return {
-          canvas: null,
-          context: null
-        };
-      }
-      if (!this.dragPreviewCanvas) {
-        this.dragPreviewCanvas = document.createElement("canvas");
-        this.dragPreviewCanvas.style.position = "fixed";
-        this.dragPreviewCanvas.style.left = HIDDEN_DRAG_PREVIEW_OFFSET_PX;
-        this.dragPreviewCanvas.style.top = HIDDEN_DRAG_PREVIEW_OFFSET_PX;
-        this.dragPreviewCanvas.style.pointerEvents = "none";
-      }
-      if (!this.dragPreviewCanvas.isConnected) {
-        document.body.appendChild(this.dragPreviewCanvas);
-      }
-      if (this.dragPreviewCtx === void 0) {
-        this.dragPreviewCtx = this.dragPreviewCanvas.getContext("2d");
-      }
-      return {
-        canvas: this.dragPreviewCanvas,
-        context: this.dragPreviewCtx ?? null
-      };
-    }
-    /**
-     * Completes the managed drag on `dragend` by ignoring cancelled/internal
-     * drops, forwarding valid drops to `dropImage(...)`, and selecting the inserted
-     * object when available.
-     */
-    async handleManagedDragEnd(metrics, event) {
-      const dropInput = {
-        x: event.clientX,
-        y: event.clientY,
-        src: metrics.src,
-        imgWidth: metrics.displayWidth,
-        imgHeight: metrics.displayHeight,
-        grabOffsetX: metrics.grabOffsetX,
-        grabOffsetY: metrics.grabOffsetY,
-        persistImage: metrics.persistImage
-      };
-      try {
-        if (event.clientX === 0 && event.clientY === 0) {
-          return;
-        }
-        if (this.isInsideIframeViewport(event.clientX, event.clientY)) {
-          return;
-        }
-        const objectId = await this.dropImage(dropInput);
-        if (!objectId) {
-          return;
-        }
-        await this.state.setSelectedObjectsIds([objectId]);
-      } catch {
-      }
-    }
-    /**
-     * Returns true when the final pointer position is still inside the iframe
-     * viewport.
-     */
-    isInsideIframeViewport(x, y) {
-      return x >= 0 && y >= 0 && x <= window.innerWidth && y <= window.innerHeight;
-    }
-  };
-
-  // src/createEditorSDKAPIs.ts
-  function createEditorSDKAPIs() {
-    return {
-      ai: bridgeHandlers.ai,
-      data: bridgeHandlers.data,
-      design: bridgeHandlers.design,
-      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,
-      auth: bridgeHandlers.auth,
-      upload: bridgeHandlers.upload,
-      stateless: bridgeHandlers.stateless,
-      font: bridgeHandlers.font,
-      createBatch: bridgeHandlers.createBatch
-    };
-  }
+  // package.json
+  var version = "1.0.0";
 
   // src/utils/syncHtmlDataThemeFromHostContext.ts
   async function syncHtmlDataThemeFromHostContext(kittl2) {
@@ -1262,12 +1142,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,9 +1163,14 @@
     return kittl2;
   }
 
-  // src/index.ts
+  // src/dashboardStandalonePage.ts
   var kittl = createKittlSDK({
-    ...createEditorSDKAPIs(),
+    auth: bridgeHandlers.auth,
+    context: bridgeHandlers.context,
+    upload: bridgeHandlers.upload,
+    brandKit: bridgeHandlers.brandKit,
+    openMicroEditor: bridgeHandlers.openMicroEditor,
+    openMainEditor: bridgeHandlers.openMainEditor,
     fileBrowser: bridgeHandlers.fileBrowser
   });
 })();