@kittl/sdk 0.0.1

package/dist/kittl-sdk.js

@@ -0,0 +1,708 @@
+// @ts-self-types="./sdk.d.ts"
+/*! Kittl SDK - https://kittl.com - see license for terms */
+
+"use strict";
+(() => {
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/types/toExtensions.js
+  var isSDKResponseMessage = (data) => {
+    return typeof data === "object" && data !== null && "command" in data && data.command === "sdk-response" && "messageId" in data && typeof data.messageId === "string";
+  };
+  var isStatelessPushMessage = (data) => {
+    return typeof data === "object" && data !== null && "command" in data && data.command === "stateless-message" && "type" in data && typeof data.type === "string" && "payload" in data && typeof data.payload === "object" && data.payload !== null;
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/shared/createApiProxyCore.js
+  var buildMethodPath = (rootPrefix, pathSegments) => {
+    if (!rootPrefix) {
+      return pathSegments.join(".");
+    }
+    if (pathSegments.length === 0) {
+      return rootPrefix;
+    }
+    return `${rootPrefix}.${pathSegments.join(".")}`;
+  };
+  var createCallablePathProxy = (options) => {
+    const createNode = (pathSegments) => {
+      const target = () => {
+      };
+      const handler = {
+        get: (_target, prop) => {
+          if (typeof prop === "symbol") {
+            return Reflect.get(target, prop);
+          }
+          return createNode([...pathSegments, String(prop)]);
+        },
+        apply: (_target, _thisArg, args) => {
+          const context = {
+            pathSegments,
+            methodPath: buildMethodPath(options.rootPrefix ?? "", pathSegments),
+            args
+          };
+          options.beforeInvoke?.(context);
+          return options.onInvoke(context);
+        }
+      };
+      return new Proxy(target, handler);
+    };
+    return createNode([]);
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/shared/index.js
+  var EDITOR_URL = typeof window !== "undefined" ? window.location?.origin : "";
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/utils/approvedDomain/approvedDomain.js
+  var parentDomain;
+  var APPROVED_EXTENSION_COMMUNICATION_DOMAINS = [
+    "https://app.stagingdesigner.com",
+    "https://*.stagingdesigner.com",
+    "http://localhost:3000",
+    "https://app.kittl.com"
+  ];
+  var toOrigin = (value) => {
+    if (!value) {
+      return null;
+    }
+    try {
+      return new URL(value).origin;
+    } catch (_error) {
+      return null;
+    }
+  };
+  var escapeRegex = (value) => {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  };
+  var matchesApprovedDomain = (origin, approvedDomain) => {
+    const normalized = approvedDomain.trim();
+    if (!normalized) {
+      return false;
+    }
+    if (normalized.includes("*")) {
+      const wildcardRegex = new RegExp(
+        // because we use wildcards only in the middle of the string
+        //  we know that our list must start with the regex and end with the regex
+        // so we add the ^ and $ to the regex too
+        `^${escapeRegex(normalized).replace(/\\\*/g, ".*")}$`
+      );
+      return wildcardRegex.test(origin);
+    }
+    return origin === normalized;
+  };
+  var getParentDomain = () => {
+    if (parentDomain) {
+      return parentDomain;
+    }
+    const referrer = window.document.referrer;
+    const ancestorOrigins = window.location.ancestorOrigins;
+    const ancestorOrigin = ancestorOrigins && ancestorOrigins.length > 0 ? ancestorOrigins[ancestorOrigins.length - 1] : void 0;
+    const currentDomainOrigin = toOrigin(referrer) ?? toOrigin(ancestorOrigin);
+    if (!currentDomainOrigin) {
+      throw new Error("No current domain origin found");
+    }
+    const approvedParentDomain = APPROVED_EXTENSION_COMMUNICATION_DOMAINS.find(
+      (domain) => {
+        return matchesApprovedDomain(currentDomainOrigin, domain);
+      }
+    );
+    if (!approvedParentDomain) {
+      throw new Error("No approved parent domain found");
+    }
+    parentDomain = currentDomainOrigin;
+    return parentDomain;
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/messageSender.js
+  var pendingRequests = /* @__PURE__ */ new Map();
+  var generateMessageId = () => {
+    if (crypto?.randomUUID && typeof crypto.randomUUID === "function") {
+      return crypto.randomUUID();
+    }
+    return Math.random().toString(36).substring(7);
+  };
+  var sendMessage = (message) => {
+    window.parent.postMessage(message, getParentDomain());
+    return new Promise((resolve, reject) => {
+      pendingRequests.set(message.messageId, {
+        resolve: (value) => {
+          resolve(value);
+        },
+        reject
+      });
+    });
+  };
+  var sendLoaded = () => {
+    const parent = window.parent;
+    if (!parent || parent === window) {
+      return;
+    }
+    const message = { command: "loaded" };
+    parent.postMessage(message, getParentDomain());
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/apiProxy/index.js
+  var createSDKCallMessage = {
+    ai: (dots, args, messageId) => ({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId,
+      apiType: "ai"
+    }),
+    context: (dots, args, messageId) => ({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId,
+      apiType: "context"
+    }),
+    design: (dots, args, messageId) => ({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId,
+      apiType: "design"
+    }),
+    font: (dots, args, messageId) => ({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId,
+      apiType: "font"
+    }),
+    state: (dots, args, messageId) => ({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId,
+      apiType: "state"
+    }),
+    upload: (dots, args, messageId) => ({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId,
+      apiType: "upload"
+    })
+  };
+  function createApiProxy(apiType) {
+    return createCallablePathProxy({
+      onInvoke: ({ pathSegments, args }) => {
+        return sendMessage(
+          createSDKCallMessage[apiType](
+            [...pathSegments],
+            [...args],
+            generateMessageId()
+          )
+        );
+      }
+    });
+  }
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/apiProxy/aiApiProxy.js
+  function createAIApiProxy() {
+    return {
+      spendCredits: async (options) => {
+        const { onAccept, onDecline, ...serializable } = options;
+        const message = {
+          command: "sdk-call",
+          dots: ["spendCredits"],
+          args: [serializable],
+          messageId: generateMessageId(),
+          apiType: "ai"
+        };
+        const response = await sendMessage(message);
+        if (response.isOk && response.result.success) {
+          onAccept?.();
+        } else {
+          onDecline?.();
+        }
+        return response;
+      }
+    };
+  }
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/authBridge/index.js
+  var hashPKCECode = async (input) => {
+    const textAsBuffer = new TextEncoder().encode(input);
+    const hashBuffer = await window.crypto.subtle.digest("SHA-256", textAsBuffer);
+    const hashArray = new Uint8Array(hashBuffer);
+    const binaryString = String.fromCharCode(...hashArray);
+    const base64 = btoa(binaryString);
+    return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+  };
+  var generatePKCECode = () => {
+    if (!window.crypto) {
+      throw new Error("Crypto API not available");
+    }
+    const array = new Uint32Array(56);
+    window.crypto.getRandomValues(array);
+    return Array.from(array, (dec) => `0${dec.toString(16)}`.slice(-2)).join("");
+  };
+  var createAuthBridgeApi = () => {
+    return {
+      startAuth: async (request) => {
+        const state = generateMessageId();
+        let pkceCode = "";
+        let code_verifier = "";
+        if (request.generatePKCE) {
+          code_verifier = generatePKCECode();
+          pkceCode = await hashPKCECode(code_verifier);
+        }
+        const message = {
+          command: "auth-start",
+          messageId: generateMessageId(),
+          state,
+          provider: request.provider,
+          params: {
+            ...request.params,
+            ...pkceCode ? {
+              code_challenge: pkceCode,
+              code_challenge_method: "S256"
+            } : {}
+          }
+        };
+        const response = await sendMessage(message);
+        if (!response.isOk) {
+          return response;
+        }
+        return {
+          ...response,
+          result: {
+            ...response.result,
+            code_verifier
+          }
+        };
+      },
+      exchangeCode: (request) => {
+        const message = {
+          command: "auth-exchange",
+          messageId: generateMessageId(),
+          code: request.code,
+          code_verifier: request.code_verifier,
+          provider: request.provider,
+          params: request.params,
+          headers: request.headers
+        };
+        return sendMessage(message);
+      },
+      getAuthToken: (request) => {
+        const message = {
+          command: "auth-get-token",
+          messageId: generateMessageId(),
+          provider: request.provider
+        };
+        return sendMessage(message);
+      },
+      refreshToken: (request) => {
+        const message = {
+          command: "auth-refresh",
+          messageId: generateMessageId(),
+          provider: request.provider,
+          refresh_token: request.refresh_token
+        };
+        return sendMessage(message);
+      },
+      logout: (request) => {
+        const message = {
+          command: "auth-logout",
+          messageId: generateMessageId(),
+          provider: request.provider
+        };
+        return sendMessage(message);
+      }
+    };
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/stateless/index.js
+  var createStatelessBridgeApi = () => {
+    const subscribers = /* @__PURE__ */ new Map();
+    return {
+      send: (message) => {
+        const messageId = generateMessageId();
+        const bridgeMessage = {
+          command: "stateless-send",
+          messageId,
+          type: message.type,
+          payload: message.payload
+        };
+        return sendMessage(bridgeMessage);
+      },
+      subscribe: async (key, handler) => {
+        let handlers = subscribers.get(key);
+        if (!handlers) {
+          handlers = /* @__PURE__ */ new Set();
+          subscribers.set(key, handlers);
+        }
+        handlers.add(handler);
+        const messageId = generateMessageId();
+        const subscribeMessage = {
+          command: "stateless-subscribe",
+          messageId,
+          key
+        };
+        return sendMessage(subscribeMessage);
+      },
+      unsubscribe: async (key) => {
+        subscribers.delete(key);
+        const messageId = generateMessageId();
+        const unsubscribeMessage = {
+          command: "stateless-unsubscribe",
+          messageId,
+          key
+        };
+        return sendMessage(unsubscribeMessage);
+      },
+      dispatch: (type, payload) => {
+        const handlers = subscribers.get(type);
+        if (handlers) {
+          for (const handler of handlers) {
+            handler(payload);
+          }
+        }
+      }
+    };
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers.js
+  var statelessApi = createStatelessBridgeApi();
+  var handleIncomingMessage = (event) => {
+    const parent = window.parent;
+    if (!parent || parent === window) {
+      return;
+    }
+    if (event.source !== parent) {
+      return;
+    }
+    const { data } = event;
+    if (isSDKResponseMessage(data)) {
+      const resolver = pendingRequests.get(data.messageId);
+      if (resolver) {
+        pendingRequests.delete(data.messageId);
+        const response = data.response;
+        resolver.resolve(response);
+      }
+      return;
+    }
+    if (isStatelessPushMessage(data)) {
+      statelessApi.dispatch(data.type, data.payload);
+      return;
+    }
+  };
+  var bridgeHandlers = {
+    ai: createAIApiProxy(),
+    context: createApiProxy("context"),
+    design: createApiProxy("design"),
+    font: createApiProxy("font"),
+    state: createApiProxy("state"),
+    upload: createApiProxy("upload"),
+    auth: createAuthBridgeApi(),
+    stateless: statelessApi
+  };
+
+  // src/api/utils.ts
+  function unwrapResult(result) {
+    if (result.isOk) {
+      return result.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/index.ts
+  var kittl = {
+    onLoadedCallback: null,
+    loaded: false,
+    onReady: (cb) => {
+      if (kittl.loaded) {
+        cb();
+        return;
+      }
+      kittl.onLoadedCallback = cb;
+    },
+    ...bridgeHandlers,
+    dragAndDrop: new DragAndDropApi({
+      state: bridgeHandlers.state,
+      context: bridgeHandlers.context,
+      design: bridgeHandlers.design,
+      upload: bridgeHandlers.upload
+    })
+  };
+  var initSdk = () => {
+    kittl.loaded = true;
+    window.addEventListener(
+      "message",
+      (event) => {
+        handleIncomingMessage(event);
+      }
+    );
+    kittl.onLoadedCallback?.();
+    sendLoaded();
+  };
+  if (typeof document !== "undefined" && typeof window !== "undefined") {
+    window.kittl = kittl;
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initSdk);
+    } else {
+      initSdk();
+    }
+  }
+})();