@kittl/sdk 0.0.1

package/dist/kittl-sdk.esm.js

@@ -0,0 +1,709 @@
+// @ts-self-types="./sdk.d.ts"
+/*! Kittl SDK - https://kittl.com - see license for terms */
+
+
+// ../../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();
+  }
+}
+export {
+  kittl
+};