@kittl/sdk 0.0.7 → 0.0.9

package/dist/editorContentPanel/sdk.esm.js

@@ -0,0 +1,1286 @@
+// @ts-self-types="./sdk.d.ts"
+/*! Kittl SDK - https://kittl.com - see license for terms */
+
+var FROM_EXTENSION_COMMANDS = {
+  /** SDK API call */
+  SDK_CALL: "sdk-call",
+  /** AI handler registration */
+  AI_REGISTER_HANDLER: "ai-register-handler",
+  /** AI handler unregistration */
+  AI_UNREGISTER_HANDLER: "ai-unregister-handler",
+  /** File browser tab registration */
+  FILE_BROWSER_REGISTER: "file-browser-register",
+  /** File browser fetch content response */
+  FILE_BROWSER_FETCH_CONTENT_RESPONSE: "file-browser-fetch-content-response",
+  /** Stateless message send */
+  STATELESS_SEND: "stateless-send",
+  /** Stateless subscription */
+  STATELESS_SUBSCRIBE: "stateless-subscribe",
+  /** Stateless unsubscription */
+  STATELESS_UNSUBSCRIBE: "stateless-unsubscribe",
+  /** App state subscription */
+  APP_STATE_SUBSCRIBE: "app-state-subscribe",
+  /** App state unsubscription */
+  APP_STATE_UNSUBSCRIBE: "app-state-unsubscribe",
+  /** Batch creation */
+  BATCH_CREATE: "batch-create",
+  /** Batch commit */
+  BATCH_COMMIT: "batch-commit",
+  /** OAuth flow start */
+  AUTH_START: "auth-start",
+  /** OAuth token exchange */
+  AUTH_EXCHANGE: "auth-exchange",
+  /** Get OAuth token */
+  AUTH_GET_TOKEN: "auth-get-token",
+  /** Refresh OAuth token */
+  AUTH_REFRESH: "auth-refresh",
+  /** OAuth logout */
+  AUTH_LOGOUT: "auth-logout",
+  /** Get user token for authentication */
+  AUTH_GET_USER_TOKEN: "auth-get-user-token",
+  /** Context subscription */
+  CONTEXT_SUBSCRIBE: "context-subscribe",
+  /** Context unsubscription */
+  CONTEXT_UNSUBSCRIBE: "context-unsubscribe",
+  /** Design state subscription */
+  DESIGN_STATE_SUBSCRIBE: "design-state-subscribe",
+  /** Design state unsubscription */
+  DESIGN_STATE_UNSUBSCRIBE: "design-state-unsubscribe",
+  /** Extension loaded notification */
+  LOADED: "loaded"
+};
+var TO_EXTENSION_COMMANDS = {
+  /** SDK API response */
+  SDK_RESPONSE: "sdk-response",
+  /** File browser fetch content request */
+  FILE_BROWSER_FETCH_CONTENT_REQUEST: "file-browser-fetch-content-request",
+  /** Stateless message push */
+  STATELESS_MESSAGE: "stateless-message",
+  /** Context update push */
+  CONTEXT_UPDATE: "context-update",
+  /** AI generation update push */
+  AI_GENERATION_UPDATE: "ai-generation-update",
+  /** Design state update push */
+  DESIGN_STATE_UPDATE: "design-state-update",
+  /** App state update push */
+  APP_STATE_UPDATE: "app-state-update"
+};
+
+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";
+};
+var isStatelessPushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.STATELESS_MESSAGE && "type" in data && typeof data.type === "string" && "payload" in data && typeof data.payload === "object" && data.payload !== null;
+};
+var isAIGenerationUpdatePushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.AI_GENERATION_UPDATE && "subscriptionId" in data && typeof data.subscriptionId === "string" && "update" in data && typeof data.update === "object" && data.update !== null;
+};
+var isDesignStateUpdatePushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.DESIGN_STATE_UPDATE && "updates" in data && Array.isArray(data.updates);
+};
+var isAppStateUpdatePushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.APP_STATE_UPDATE && "updates" in data && Array.isArray(data.updates);
+};
+var isContextUpdatePushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.CONTEXT_UPDATE && "subscriptionId" in data && typeof data.subscriptionId === "string" && "context" in data && typeof data.context === "object" && data.context !== null;
+};
+var isFileBrowserFetchContentRequestMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === TO_EXTENSION_COMMANDS.FILE_BROWSER_FETCH_CONTENT_REQUEST && "requestId" in data && typeof data.requestId === "string" && "subscriptionId" in data && typeof data.subscriptionId === "string";
+};
+
+var generateMessageId = () => {
+  if (crypto?.randomUUID && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).substring(7);
+};
+
+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([]);
+};
+
+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;
+};
+
+var pendingRequests = /* @__PURE__ */ new Map();
+var postMessageToParent = (message) => {
+  window.parent.postMessage(message, getParentDomain());
+};
+var sendMessage = (message) => {
+  postMessageToParent(message);
+  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: FROM_EXTENSION_COMMANDS.LOADED };
+  postMessageToParent(message);
+};
+
+var createSDKCallMessage = {
+  ai: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "ai"
+  }),
+  context: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "context"
+  }),
+  design: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "design"
+  }),
+  export: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "export"
+  }),
+  font: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "font"
+  }),
+  state: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "state"
+  }),
+  upload: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "upload"
+  }),
+  data: (dots, args, messageId) => ({
+    command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+    dots,
+    args,
+    messageId,
+    apiType: "data"
+  })
+};
+function createApiProxy(apiType) {
+  return createCallablePathProxy({
+    onInvoke: ({ pathSegments, args }) => {
+      return sendMessage(
+        createSDKCallMessage[apiType](
+          [...pathSegments],
+          [...args],
+          generateMessageId()
+        )
+      );
+    }
+  });
+}
+
+var generationHandlers = /* @__PURE__ */ new Map();
+var generationSubscriptions = /* @__PURE__ */ new Map();
+var dispatchAIGenerationUpdate = (subscriptionId, update) => {
+  const handler = generationHandlers.get(subscriptionId);
+  if (!handler) {
+    return;
+  }
+  void handler(update);
+};
+function createAIApiProxy() {
+  const unregisterGenerationHandler = (generatorId) => {
+    const subscriptionId = generationSubscriptions.get(generatorId);
+    if (!subscriptionId) {
+      return;
+    }
+    generationHandlers.delete(subscriptionId);
+    generationSubscriptions.delete(generatorId);
+    const unregisterMessage = {
+      command: FROM_EXTENSION_COMMANDS.AI_UNREGISTER_HANDLER,
+      generatorId,
+      subscriptionId
+    };
+    postMessageToParent(unregisterMessage);
+  };
+  return {
+    spendCredits: async (options) => {
+      const { onAccept, onDecline, ...serializable } = options;
+      const message = {
+        command: FROM_EXTENSION_COMMANDS.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;
+    },
+    startGeneration: (generatorId, inputSettings, output) => {
+      const message = {
+        command: FROM_EXTENSION_COMMANDS.SDK_CALL,
+        dots: ["startGeneration"],
+        args: [generatorId, inputSettings, output],
+        messageId: generateMessageId(),
+        apiType: "ai"
+      };
+      return sendMessage(message);
+    },
+    registerHandler: async (generatorId, onStatusUpdate) => {
+      if (generationSubscriptions.has(generatorId)) {
+        return {
+          isOk: false,
+          error: {
+            message: `AI handler for generator "${generatorId}" is already registered`,
+            name: "SdkInternalError"
+          }
+        };
+      }
+      const subscriptionId = generateMessageId();
+      generationHandlers.set(subscriptionId, onStatusUpdate);
+      generationSubscriptions.set(generatorId, subscriptionId);
+      const registerMessage = {
+        command: FROM_EXTENSION_COMMANDS.AI_REGISTER_HANDLER,
+        messageId: generateMessageId(),
+        generatorId,
+        subscriptionId
+      };
+      try {
+        const response = await sendMessage(registerMessage);
+        if (!response.isOk) {
+          generationHandlers.delete(subscriptionId);
+          generationSubscriptions.delete(generatorId);
+          return response;
+        }
+        return {
+          isOk: true,
+          result: () => unregisterGenerationHandler(generatorId)
+        };
+      } catch {
+        generationHandlers.delete(subscriptionId);
+        generationSubscriptions.delete(generatorId);
+        return {
+          isOk: false,
+          error: {
+            message: "Failed to register AI handler",
+            name: "SdkInternalError"
+          }
+        };
+      }
+    },
+    unregisterHandler: async (generatorId) => {
+      unregisterGenerationHandler(generatorId);
+      return { isOk: true, result: void 0 };
+    }
+  };
+}
+
+var fetchContentHandlers = /* @__PURE__ */ new Map();
+var tabIdToSubscriptionId = /* @__PURE__ */ new Map();
+var removeSubscriptionHandlers = (subscriptionId) => {
+  fetchContentHandlers.delete(subscriptionId);
+};
+var dispatchFileBrowserFetchContentRequest = (requestId, subscriptionId, params) => {
+  const handler = fetchContentHandlers.get(subscriptionId);
+  if (!handler) {
+    const responseMessage = {
+      command: FROM_EXTENSION_COMMANDS.FILE_BROWSER_FETCH_CONTENT_RESPONSE,
+      requestId,
+      content: []
+    };
+    postMessageToParent(responseMessage);
+    return;
+  }
+  void handler(params).then((result) => {
+    const responseMessage = {
+      command: FROM_EXTENSION_COMMANDS.FILE_BROWSER_FETCH_CONTENT_RESPONSE,
+      requestId,
+      content: result.content,
+      next: result.next
+    };
+    postMessageToParent(responseMessage);
+  }).catch((error) => {
+    const responseMessage = {
+      command: FROM_EXTENSION_COMMANDS.FILE_BROWSER_FETCH_CONTENT_RESPONSE,
+      requestId,
+      content: [],
+      error: error instanceof Error ? error.message : "Unknown error"
+    };
+    postMessageToParent(responseMessage);
+  });
+};
+function createFileBrowserApiProxy() {
+  return {
+    registerUploadBrowser: async (tab) => {
+      const subscriptionId = generateMessageId();
+      const existingSubscriptionId = tabIdToSubscriptionId.get(tab.id);
+      if (existingSubscriptionId) {
+        removeSubscriptionHandlers(existingSubscriptionId);
+      }
+      fetchContentHandlers.set(subscriptionId, tab.fetchContent);
+      tabIdToSubscriptionId.set(tab.id, subscriptionId);
+      const registerMessage = {
+        command: FROM_EXTENSION_COMMANDS.FILE_BROWSER_REGISTER,
+        messageId: generateMessageId(),
+        tabId: tab.id,
+        label: tab.label,
+        order: tab.order,
+        emptyState: tab.emptyState,
+        subscriptionId
+      };
+      try {
+        const response = await sendMessage(registerMessage);
+        if (!response.isOk) {
+          removeSubscriptionHandlers(subscriptionId);
+          tabIdToSubscriptionId.delete(tab.id);
+          return {
+            isOk: false,
+            error: response.error
+          };
+        }
+        return {
+          isOk: true,
+          result: void 0
+        };
+      } catch {
+        removeSubscriptionHandlers(subscriptionId);
+        tabIdToSubscriptionId.delete(tab.id);
+        return {
+          isOk: false,
+          error: {
+            message: "Failed to register upload browser",
+            name: "SdkInternalError"
+          }
+        };
+      }
+    }
+  };
+}
+
+var sendUnsubscribe = (selectorIds) => {
+  const message = {
+    command: FROM_EXTENSION_COMMANDS.APP_STATE_UNSUBSCRIBE,
+    selectorIds
+  };
+  postMessageToParent(message);
+};
+var createAppStateBridgeApi = () => {
+  const localSubscriptions = /* @__PURE__ */ new Map();
+  async function subscribe(paths, callback) {
+    if (paths.length === 0) {
+      return () => {
+      };
+    }
+    const values = new Array(paths.length).fill(void 0);
+    const selectorIds = [];
+    const pathArrays = [];
+    for (const dotPath of paths) {
+      const segments = dotPath.split(".");
+      if (segments.some((s) => s === "")) {
+        throw new Error(
+          `Invalid app state path: '${dotPath}'. Path must be a non-empty dot-separated string.`
+        );
+      }
+      selectorIds.push(generateMessageId());
+      pathArrays.push(segments);
+    }
+    const messageId = generateMessageId();
+    const subscribeMessage = {
+      command: FROM_EXTENSION_COMMANDS.APP_STATE_SUBSCRIBE,
+      messageId,
+      selectorIds,
+      paths: pathArrays
+    };
+    const response = await sendMessage(subscribeMessage);
+    if (!response.isOk) {
+      throw new Error(`app-state-subscribe failed: ${response.error.message}`);
+    }
+    for (let i = 0; i < selectorIds.length; i++) {
+      localSubscriptions.set(selectorIds[i], {
+        callback: (value) => {
+          values[i] = value;
+          callback(...values);
+        }
+      });
+    }
+    return () => {
+      for (const selectorId of selectorIds) {
+        localSubscriptions.delete(selectorId);
+      }
+      sendUnsubscribe(selectorIds);
+    };
+  }
+  const dispatch = (updates) => {
+    for (const { selectorId, value } of updates) {
+      const entry = localSubscriptions.get(selectorId);
+      if (entry) {
+        entry.callback(value);
+      }
+    }
+  };
+  return { subscribe, dispatch };
+};
+
+var SandboxedAuthClient = class {
+  /**
+   * Binds the public start method because the exported SDK API may pass it
+   * around without its client object as the receiver.
+   */
+  constructor() {
+    this.startAuth = this.startAuth.bind(this);
+  }
+  /**
+   * Starts provider authentication and optionally adds an RFC 7636 PKCE
+   * challenge to the request. Successful responses include the verifier that
+   * the caller must pass to {@link exchangeCode}.
+   */
+  async startAuth(request) {
+    const state = generateMessageId();
+    let pkceCode = "";
+    let code_verifier = "";
+    if (request.generatePKCE) {
+      code_verifier = this.generatePKCECode();
+      pkceCode = await this.hashPKCECode(code_verifier);
+    }
+    const message = {
+      command: FROM_EXTENSION_COMMANDS.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
+      }
+    };
+  }
+  /** Exchanges the provider authorization code for an auth token. */
+  exchangeCode(request) {
+    const message = {
+      command: FROM_EXTENSION_COMMANDS.AUTH_EXCHANGE,
+      messageId: generateMessageId(),
+      code: request.code,
+      code_verifier: request.code_verifier,
+      provider: request.provider,
+      params: request.params,
+      headers: request.headers
+    };
+    return sendMessage(message);
+  }
+  /** Requests the current auth token for a provider. */
+  getAuthToken(request) {
+    const message = {
+      command: FROM_EXTENSION_COMMANDS.AUTH_GET_TOKEN,
+      messageId: generateMessageId(),
+      provider: request.provider
+    };
+    return sendMessage(message);
+  }
+  /** Refreshes the auth token for a provider. */
+  refreshToken(request) {
+    const message = {
+      command: FROM_EXTENSION_COMMANDS.AUTH_REFRESH,
+      messageId: generateMessageId(),
+      provider: request.provider
+    };
+    return sendMessage(message);
+  }
+  /** Logs the current user out of a provider. */
+  logout(request) {
+    const message = {
+      command: FROM_EXTENSION_COMMANDS.AUTH_LOGOUT,
+      messageId: generateMessageId(),
+      provider: request.provider
+    };
+    return sendMessage(message);
+  }
+  /** Requests the authenticated user's user token from the parent window. */
+  getUserToken() {
+    const message = {
+      command: FROM_EXTENSION_COMMANDS.AUTH_GET_USER_TOKEN,
+      messageId: generateMessageId()
+    };
+    return sendMessage(message);
+  }
+  /** Hashes a PKCE verifier and encodes the SHA-256 digest as Base64URL. */
+  async hashPKCECode(input) {
+    const subtle = window.crypto?.subtle;
+    if (!subtle) {
+      throw new Error("Web Crypto SubtleCrypto API not available");
+    }
+    const textAsBuffer = new TextEncoder().encode(input);
+    const hashBuffer = await 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(/=+$/, "");
+  }
+  /** Generates a high-entropy RFC 7636-compatible PKCE verifier. */
+  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 createBatch = async () => {
+  const response = await sendMessage({
+    command: FROM_EXTENSION_COMMANDS.BATCH_CREATE,
+    messageId: generateMessageId()
+  });
+  if (!response.isOk) {
+    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 commit = async () => {
+    const res = await sendMessage({
+      command: FROM_EXTENSION_COMMANDS.BATCH_COMMIT,
+      messageId: generateMessageId(),
+      batchKey
+    });
+    if (!res.isOk) {
+      throw res.error;
+    }
+  };
+  const buildNode = (pathSegments) => {
+    const target = () => {
+    };
+    return new Proxy(target, {
+      get: (_t, prop) => {
+        if (typeof prop === "symbol" || prop === "then") return void 0;
+        if (prop === "commit") return commit;
+        return buildNode([...pathSegments, prop]);
+      },
+      apply: (_t, _this, args) => {
+        return sendDesignCall(pathSegments, args);
+      }
+    });
+  };
+  return buildNode([]);
+};
+
+var createContextBridgeApi = () => {
+  const contextProxy = createApiProxy("context");
+  const subscriptionCallbacks = /* @__PURE__ */ new Map();
+  const dispatch = (message) => {
+    const cb = subscriptionCallbacks.get(message.subscriptionId);
+    cb?.(message.context);
+  };
+  const subscribeImpl = async (callback) => {
+    const subscriptionId = generateMessageId();
+    const messageId = generateMessageId();
+    subscriptionCallbacks.set(subscriptionId, callback);
+    let response;
+    try {
+      response = await sendMessage({
+        command: FROM_EXTENSION_COMMANDS.CONTEXT_SUBSCRIBE,
+        messageId,
+        subscriptionId
+      });
+    } catch (error) {
+      subscriptionCallbacks.delete(subscriptionId);
+      throw error;
+    }
+    if (!response.isOk) {
+      subscriptionCallbacks.delete(subscriptionId);
+      throw new Error(`context-subscribe failed: ${response.error.message}`);
+    }
+    return () => {
+      subscriptionCallbacks.delete(subscriptionId);
+      const message = {
+        command: FROM_EXTENSION_COMMANDS.CONTEXT_UNSUBSCRIBE,
+        subscriptionId
+      };
+      postMessageToParent(message);
+    };
+  };
+  const api = new Proxy(contextProxy, {
+    get(target, prop, receiver) {
+      if (prop === "subscribe") {
+        return subscribeImpl;
+      }
+      return Reflect.get(target, prop, receiver);
+    }
+  });
+  return { api, dispatch };
+};
+
+var sendUnsubscribe2 = (selectorIds) => {
+  const message = {
+    command: FROM_EXTENSION_COMMANDS.DESIGN_STATE_UNSUBSCRIBE,
+    selectorIds
+  };
+  postMessageToParent(message);
+};
+var createDesignStateBridgeApi = () => {
+  const localSubscriptions = /* @__PURE__ */ new Map();
+  async function subscribe(paths, callback) {
+    if (paths.length === 0) {
+      return () => {
+      };
+    }
+    const values = new Array(paths.length).fill(void 0);
+    const selectorIds = [];
+    const pathArrays = [];
+    for (const dotPath of paths) {
+      const segments = dotPath.split(".");
+      if (segments.some((s) => s === "")) {
+        throw new Error(
+          `Invalid design state path: '${dotPath}'. Path must be a non-empty dot-separated string.`
+        );
+      }
+      selectorIds.push(generateMessageId());
+      pathArrays.push(segments);
+    }
+    const messageId = generateMessageId();
+    const subscribeMessage = {
+      command: FROM_EXTENSION_COMMANDS.DESIGN_STATE_SUBSCRIBE,
+      messageId,
+      selectorIds,
+      paths: pathArrays
+    };
+    const response = await sendMessage(subscribeMessage);
+    if (!response.isOk) {
+      throw new Error(
+        `design-state-subscribe failed: ${response.error.message}`
+      );
+    }
+    for (let i = 0; i < selectorIds.length; i++) {
+      localSubscriptions.set(selectorIds[i], {
+        callback: (value) => {
+          values[i] = value;
+          callback(...values);
+        }
+      });
+    }
+    return () => {
+      for (const selectorId of selectorIds) {
+        localSubscriptions.delete(selectorId);
+      }
+      sendUnsubscribe2(selectorIds);
+    };
+  }
+  const dispatch = (updates) => {
+    for (const { selectorId, value } of updates) {
+      const entry = localSubscriptions.get(selectorId);
+      if (entry) {
+        entry.callback(value);
+      }
+    }
+  };
+  return { subscribe, dispatch };
+};
+
+var createStatelessBridgeApi = () => {
+  const subscribers = /* @__PURE__ */ new Map();
+  return {
+    send: (message) => {
+      const messageId = generateMessageId();
+      const bridgeMessage = {
+        command: FROM_EXTENSION_COMMANDS.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: FROM_EXTENSION_COMMANDS.STATELESS_SUBSCRIBE,
+        messageId,
+        key
+      };
+      return sendMessage(subscribeMessage);
+    },
+    unsubscribe: async (key) => {
+      subscribers.delete(key);
+      const messageId = generateMessageId();
+      const unsubscribeMessage = {
+        command: FROM_EXTENSION_COMMANDS.STATELESS_UNSUBSCRIBE,
+        messageId,
+        key
+      };
+      return sendMessage(unsubscribeMessage);
+    },
+    dispatch: (type, payload) => {
+      const handlers = subscribers.get(type);
+      if (handlers) {
+        for (const handler of handlers) {
+          handler(payload);
+        }
+      }
+    }
+  };
+};
+
+var statelessApi = createStatelessBridgeApi();
+var designStateApi = createDesignStateBridgeApi();
+var appStateApi = createAppStateBridgeApi();
+var { api: contextApi, dispatch: dispatchContextUpdate } = createContextBridgeApi();
+var authClient = new SandboxedAuthClient();
+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;
+  }
+  if (isAIGenerationUpdatePushMessage(data)) {
+    dispatchAIGenerationUpdate(data.subscriptionId, data.update);
+    return;
+  }
+  if (isDesignStateUpdatePushMessage(data)) {
+    designStateApi.dispatch(data.updates);
+    return;
+  }
+  if (isAppStateUpdatePushMessage(data)) {
+    appStateApi.dispatch(data.updates);
+    return;
+  }
+  if (isContextUpdatePushMessage(data)) {
+    dispatchContextUpdate(data);
+    return;
+  }
+  if (isFileBrowserFetchContentRequestMessage(data)) {
+    dispatchFileBrowserFetchContentRequest(
+      data.requestId,
+      data.subscriptionId,
+      data.params
+    );
+  }
+};
+var bridgeHandlers = {
+  ai: createAIApiProxy(),
+  context: contextApi,
+  data: createApiProxy("data"),
+  design: createApiProxy("design"),
+  designStore: designStateApi,
+  appStore: appStateApi,
+  export: createApiProxy("export"),
+  font: createApiProxy("font"),
+  state: createApiProxy("state"),
+  upload: createApiProxy("upload"),
+  fileBrowser: createFileBrowserApiProxy(),
+  auth: authClient,
+  stateless: statelessApi,
+  createBatch
+};
+
+// 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/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
+  };
+}
+
+// src/utils/syncHtmlDataThemeFromHostContext.ts
+async function syncHtmlDataThemeFromHostContext(kittl2) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const parent = window.parent;
+  if (!parent || parent === window) {
+    return;
+  }
+  const contextResponse = await kittl2.context.get();
+  if (contextResponse.isOk) {
+    document.documentElement.dataset.theme = contextResponse.result.colorScheme;
+  }
+  await kittl2.context.subscribe((ctx) => {
+    document.documentElement.dataset.theme = ctx.colorScheme;
+  });
+}
+
+// src/createKittlSDK.ts
+function createKittlSDK(apis) {
+  const kittl2 = {
+    onLoadedCallback: null,
+    loaded: false,
+    onReady: (callback) => {
+      if (kittl2.loaded) {
+        callback();
+        return;
+      }
+      kittl2.onLoadedCallback = callback;
+    },
+    ...apis
+  };
+  const initSdk = () => {
+    kittl2.loaded = true;
+    window.addEventListener(
+      "message",
+      (event) => {
+        handleIncomingMessage(event);
+      }
+    );
+    void syncHtmlDataThemeFromHostContext(kittl2).then(() => {
+      kittl2.onLoadedCallback?.();
+      sendLoaded();
+    });
+  };
+  if (typeof document !== "undefined" && typeof window !== "undefined") {
+    window.kittl = kittl2;
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initSdk);
+    } else {
+      initSdk();
+    }
+  }
+  return kittl2;
+}
+
+// src/editorContentPanel.ts
+var kittl = createKittlSDK({
+  ...createEditorSDKAPIs(),
+  fileBrowser: bridgeHandlers.fileBrowser
+});
+export {
+  kittl,
+  unwrapResult
+};