@kittl/sdk 0.0.9 → 1.0.0-alpha.1

package/dist/{kittl-sdk.esm.js → dashboardStandalonePage/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
@@ -933,291 +1096,8 @@ function unwrapResult(result) {
   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) {
@@ -1259,12 +1139,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);
@@ -1275,9 +1160,14 @@ function createKittlSDK(apis) {
   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
 });
 export {