@kittl/sdk 0.0.2 → 0.0.4

package/dist/kittl-sdk.esm.js

@@ -12,6 +12,15 @@ var isStatelessPushMessage = (data) => {
 var isAIGenerationUpdatePushMessage = (data) => {
   return typeof data === "object" && data !== null && "command" in data && data.command === "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 === "design-state-update" && "updates" in data && Array.isArray(data.updates);
+};
+var isAppStateUpdatePushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === "app-state-update" && "updates" in data && Array.isArray(data.updates);
+};
+var isContextUpdatePushMessage = (data) => {
+  return typeof data === "object" && data !== null && "command" in data && data.command === "context-update" && "subscriptionId" in data && typeof data.subscriptionId === "string" && "context" in data && typeof data.context === "object" && data.context !== null;
+};
 
 // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/shared/createApiProxyCore.js
 var buildMethodPath = (rootPrefix, pathSegments) => {
@@ -278,6 +287,71 @@ function createAIApiProxy() {
   };
 }
 
+// ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/appState/index.js
+var sendUnsubscribe = (selectorIds) => {
+  const message = {
+    command: "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: "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 };
+};
+
 // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/authBridge/index.js
 var hashPKCECode = async (input) => {
   const textAsBuffer = new TextEncoder().encode(input);
@@ -370,6 +444,165 @@ var createAuthBridgeApi = () => {
   };
 };
 
+// ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/batch/index.js
+var createBatch = async () => {
+  const response = await sendMessage({
+    command: "batch-create",
+    messageId: generateMessageId()
+  });
+  if (!response.isOk) {
+    throw response.error;
+  }
+  const { batchKey } = response.result;
+  const sendDesignCall = (dots, args) => sendMessage({
+    command: "sdk-call",
+    dots,
+    args,
+    messageId: generateMessageId(),
+    apiType: "design",
+    batchKey
+  });
+  const commit = async () => {
+    const res = await sendMessage({
+      command: "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([]);
+};
+
+// ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/context/contextBridge.js
+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: "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: "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 };
+};
+
+// ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/designState/index.js
+var sendUnsubscribe2 = (selectorIds) => {
+  const message = {
+    command: "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: "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 };
+};
+
 // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/stateless/index.js
 var createStatelessBridgeApi = () => {
   const subscribers = /* @__PURE__ */ new Map();
@@ -422,6 +655,9 @@ var createStatelessBridgeApi = () => {
 
 // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers.js
 var statelessApi = createStatelessBridgeApi();
+var designStateApi = createDesignStateBridgeApi();
+var appStateApi = createAppStateBridgeApi();
+var { api: contextApi, dispatch: dispatchContextUpdate } = createContextBridgeApi();
 var handleIncomingMessage = (event) => {
   const parent = window.parent;
   if (!parent || parent === window) {
@@ -448,16 +684,30 @@ var handleIncomingMessage = (event) => {
     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);
+  }
 };
 var bridgeHandlers = {
   ai: createAIApiProxy(),
-  context: createApiProxy("context"),
+  context: contextApi,
   design: createApiProxy("design"),
+  designStore: designStateApi,
+  appStore: appStateApi,
   font: createApiProxy("font"),
   state: createApiProxy("state"),
   upload: createApiProxy("upload"),
   auth: createAuthBridgeApi(),
-  stateless: statelessApi
+  stateless: statelessApi,
+  createBatch
 };
 
 // src/api/utils.ts
@@ -729,6 +979,24 @@ var DragAndDropApi = class {
   }
 };
 
+// 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/index.ts
 var kittl = {
   onLoadedCallback: null,
@@ -756,8 +1024,10 @@ var initSdk = () => {
       handleIncomingMessage(event);
     }
   );
-  kittl.onLoadedCallback?.();
-  sendLoaded();
+  void syncHtmlDataThemeFromHostContext(kittl).then(() => {
+    kittl.onLoadedCallback?.();
+    sendLoaded();
+  });
 };
 if (typeof document !== "undefined" && typeof window !== "undefined") {
   window.kittl = kittl;

package/dist/kittl-sdk.js

@@ -13,6 +13,15 @@
   var isAIGenerationUpdatePushMessage = (data) => {
     return typeof data === "object" && data !== null && "command" in data && data.command === "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 === "design-state-update" && "updates" in data && Array.isArray(data.updates);
+  };
+  var isAppStateUpdatePushMessage = (data) => {
+    return typeof data === "object" && data !== null && "command" in data && data.command === "app-state-update" && "updates" in data && Array.isArray(data.updates);
+  };
+  var isContextUpdatePushMessage = (data) => {
+    return typeof data === "object" && data !== null && "command" in data && data.command === "context-update" && "subscriptionId" in data && typeof data.subscriptionId === "string" && "context" in data && typeof data.context === "object" && data.context !== null;
+  };
 
   // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/shared/createApiProxyCore.js
   var buildMethodPath = (rootPrefix, pathSegments) => {
@@ -279,6 +288,71 @@
     };
   }
 
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/appState/index.js
+  var sendUnsubscribe = (selectorIds) => {
+    const message = {
+      command: "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: "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 };
+  };
+
   // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/authBridge/index.js
   var hashPKCECode = async (input) => {
     const textAsBuffer = new TextEncoder().encode(input);
@@ -371,6 +445,165 @@
     };
   };
 
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/batch/index.js
+  var createBatch = async () => {
+    const response = await sendMessage({
+      command: "batch-create",
+      messageId: generateMessageId()
+    });
+    if (!response.isOk) {
+      throw response.error;
+    }
+    const { batchKey } = response.result;
+    const sendDesignCall = (dots, args) => sendMessage({
+      command: "sdk-call",
+      dots,
+      args,
+      messageId: generateMessageId(),
+      apiType: "design",
+      batchKey
+    });
+    const commit = async () => {
+      const res = await sendMessage({
+        command: "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([]);
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/context/contextBridge.js
+  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: "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: "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 };
+  };
+
+  // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/designState/index.js
+  var sendUnsubscribe2 = (selectorIds) => {
+    const message = {
+      command: "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: "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 };
+  };
+
   // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers/stateless/index.js
   var createStatelessBridgeApi = () => {
     const subscribers = /* @__PURE__ */ new Map();
@@ -423,6 +656,9 @@
 
   // ../../packages/editor-core/sdk/sdk-bridge/dist/bridge/sandboxed/handlers.js
   var statelessApi = createStatelessBridgeApi();
+  var designStateApi = createDesignStateBridgeApi();
+  var appStateApi = createAppStateBridgeApi();
+  var { api: contextApi, dispatch: dispatchContextUpdate } = createContextBridgeApi();
   var handleIncomingMessage = (event) => {
     const parent = window.parent;
     if (!parent || parent === window) {
@@ -449,16 +685,30 @@
       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);
+    }
   };
   var bridgeHandlers = {
     ai: createAIApiProxy(),
-    context: createApiProxy("context"),
+    context: contextApi,
     design: createApiProxy("design"),
+    designStore: designStateApi,
+    appStore: appStateApi,
     font: createApiProxy("font"),
     state: createApiProxy("state"),
     upload: createApiProxy("upload"),
     auth: createAuthBridgeApi(),
-    stateless: statelessApi
+    stateless: statelessApi,
+    createBatch
   };
 
   // src/api/utils.ts
@@ -730,6 +980,24 @@
     }
   };
 
+  // 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/index.ts
   var kittl = {
     onLoadedCallback: null,
@@ -757,8 +1025,10 @@
         handleIncomingMessage(event);
       }
     );
-    kittl.onLoadedCallback?.();
-    sendLoaded();
+    void syncHtmlDataThemeFromHostContext(kittl).then(() => {
+      kittl.onLoadedCallback?.();
+      sendLoaded();
+    });
   };
   if (typeof document !== "undefined" && typeof window !== "undefined") {
     window.kittl = kittl;

package/dist/sdk.d.ts

@@ -51,7 +51,7 @@ declare const BASIC_SHAPE_DEFAULT_VALUES: {
 	locked?: boolean | undefined;
 	hidden?: boolean | undefined;
 	opacity?: number | undefined;
-	stroke?: string;
+	stroke?: string | null;
 	strokeWidth?: number;
 	fill?: ColorInfo[] | undefined;
 	scalingCorners?: boolean | undefined;
@@ -68,7 +68,7 @@ declare const BasicShapeType: {
 };
 declare const DEFAULT_VALUES$1: {
 	globalCompositeOperation: BlendMode;
-	stroke?: string;
+	stroke?: string | null;
 	strokeWidth?: number;
 	shadowOptions?: {
 		color?: string | undefined | null;
@@ -123,7 +123,7 @@ declare const DEFAULT_VALUES$2: {
 		offset?: number;
 		angle?: number;
 	};
-	stroke?: string;
+	stroke?: string | null;
 	strokeWidth?: number;
 	opacity?: number | undefined;
 	width: number;
@@ -166,7 +166,7 @@ declare const DEFAULT_VALUES: {
 	presets?: LinkedPreset[] | undefined;
 	opacity?: number | undefined;
 	hiddenColors?: Record<string, NonNullable<Color>> | undefined;
-	stroke?: string;
+	stroke?: string | null;
 	strokeWidth?: number;
 	fill?: ColorInfo[] | undefined;
 	locked?: boolean | undefined;
@@ -226,7 +226,7 @@ declare const ILLUSTRATION_DEFAULT_VALUES: {
 	gradients?: StateGradientInfo | undefined;
 	presets?: LinkedPreset[] | undefined;
 	opacity?: number | undefined;
-	stroke?: string;
+	stroke?: string | null;
 	strokeWidth?: number;
 	fill?: ColorInfo[] | undefined;
 	inLoadingStage?: boolean | undefined;
@@ -332,10 +332,9 @@ declare const PATH_TEXT_DEFAULT_VALUES: {
 	type: ObjectType.PathText;
 };
 declare const RICH_TEXT_DEFAULT_VALUES: {
-	activeTransformPlugin?: object | undefined;
 	presets?: LinkedPreset[] | undefined;
 	opacity?: number | undefined;
-	stroke?: string;
+	stroke?: string | null;
 	strokeWidth?: number;
 	fill?: Color | undefined;
 	locked?: boolean | undefined;
@@ -514,7 +513,8 @@ declare enum Origin {
 	CANVAS = 2,
 	UI = 4,
 	VOLATILE = 8,
-	EVENTS_SYNC = 16
+	EVENTS_SYNC = 16,
+	API = 32
 }
 declare enum TextAlignment {
 	right = "right",
@@ -542,6 +542,7 @@ export interface AIGenerationInputSettings {
 		id: string;
 	};
 	additionalParams?: Record<string, unknown>;
+	actionOrigin?: AIGenerationActionOrigin;
 	type: AIGenerationContentType;
 }
 export interface AIGenerationOutputSettings {
@@ -566,6 +567,7 @@ export interface AppStateAPI {
 	setCanvasMode(mode: AppState["canvasMode"], origin?: Origin): void;
 	getActiveTool(): ActiveTool | null;
 	setActiveTool(tool: ActiveTool | null): void;
+	getIsDragPanning(): boolean;
 	viewport: ViewportAPI;
 	getHighlightedObjectId(): string | null;
 	setHighlightedObjectId(id: string | null): void;
@@ -578,6 +580,34 @@ export interface AsyncAIAPI {
 }
 export interface AsyncAppStateAPI extends WithAsync<AppStateAPI> {
 }
+export interface AsyncAppStateSubscriptionAPI {
+	/**
+	 * Subscribe to one or more paths in the app state.
+	 * Each path is a dot-separated string like `'selectedObjectsIds'`.
+	 * The callback receives the current value at each path as positional
+	 * arguments whenever any subscribed value changes.
+	 * Returns a single unsubscribe function that tears down all subscriptions.
+	 *
+	 * @example
+	 * // Single path
+	 * const unsub = await kittl.appStore.subscribe(
+	 *   ['selectedObjectsIds'],
+	 *   (ids) => console.log('selection changed:', ids)
+	 * );
+	 *
+	 * // Multiple paths
+	 * const unsub = await kittl.appStore.subscribe(
+	 *   ['selectedObjectsIds', 'activeTool'],
+	 *   (ids, tool) => console.log('changed:', ids, tool)
+	 * );
+	 * unsub();
+	 */
+	subscribe<T extends readonly AppStateSelectorPath[]>(paths: [
+		...T
+	], callback: (...values: {
+		[K in keyof T]: T[K] extends string ? DeepValue<AppState, T[K]> | undefined : unknown;
+	}) => void): Promise<() => void>;
+}
 export interface AsyncAuthAPI {
 	startAuth: (request: AuthStartRequest) => Promise<SdkResult<AuthStartResult>>;
 	exchangeCode: (request: AuthExchangeRequest) => Promise<SdkResult<AuthTokenResponse>>;
@@ -585,10 +615,42 @@ export interface AsyncAuthAPI {
 	refreshToken: (request: AuthRefreshRequest) => Promise<SdkResult<AuthTokenResponse>>;
 	logout: (request: AuthLogoutRequest) => Promise<SdkResult<void>>;
 }
-export interface AsyncContextAPI extends WithAsync<ContextAPI> {
+export interface AsyncBatchDesignAPI extends AsyncDesignAPI {
+	commit: () => Promise<void>;
+}
+export interface AsyncContextAPI extends Omit<WithAsync<ContextAPI>, "subscribe"> {
+	subscribe(callback: ContextSubscriptionCallback): Promise<() => void>;
 }
 export interface AsyncDesignAPI extends WithAsync<WithOptsRemoved<DesignAPI>> {
 }
+export interface AsyncDesignStateAPI {
+	/**
+	 * Subscribe to one or more paths in the design state.
+	 * Each path is a dot-separated string like `'objects.id1.width'`.
+	 * The callback receives the current value at each path as positional
+	 * arguments whenever any subscribed value changes.
+	 * Returns a single unsubscribe function that tears down all subscriptions.
+	 *
+	 * @example
+	 * // Single path
+	 * const unsub = await kittl.designStore.subscribe(
+	 *   ['objects.id1.width'],
+	 *   (width) => console.log('width changed:', width)
+	 * );
+	 *
+	 * // Multiple paths
+	 * const unsub = await kittl.designStore.subscribe(
+	 *   ['objects.id1.width', 'objects.id1.height'],
+	 *   (width, height) => console.log('changed:', width, height)
+	 * );
+	 * unsub();
+	 */
+	subscribe<T extends readonly DesignStateSelectorPath[]>(paths: [
+		...T
+	], callback: (...values: {
+		[K in keyof T]: T[K] extends string ? DeepValue<SelectorState, T[K]> | undefined : unknown;
+	}) => void): Promise<() => void>;
+}
 export interface AsyncFontAPI extends WithAsync<FontAPI> {
 }
 export interface AsyncStatelessAPI {
@@ -702,6 +764,7 @@ export interface ConfigAPI {
 }
 export interface ContextAPI {
 	get(input?: ContextGetInput): KittlContext;
+	subscribe(callback: ContextSubscriptionCallback): () => void;
 }
 export interface ContextGetInput {
 	iframe?: Pick<HTMLIFrameElement, "getBoundingClientRect">;
@@ -837,6 +900,7 @@ export interface GetExportOptions {
 			height: number;
 		};
 	};
+	removeArtboardBackground?: boolean;
 }
 export interface GetObjectParams {
 	id: string;
@@ -906,6 +970,7 @@ export interface ImageGenerationStartedResult extends GenerationStartedResultCom
 	type: typeof ResultType.IMAGE;
 }
 export interface KittlContext {
+	colorScheme: EditorColorScheme;
 	dragAndDrop: {
 		offset: DragAndDropOffset;
 	};
@@ -916,6 +981,8 @@ export interface KittlSDK {
 	onReady: (cb: () => void) => void;
 	ai: AsyncAIAPI;
 	design: AsyncDesignAPI;
+	designStore: AsyncDesignStateAPI;
+	appStore: AsyncAppStateSubscriptionAPI;
 	context: AsyncContextAPI;
 	dragAndDrop: PublicDragAndDropAPI;
 	state: AsyncAppStateAPI;
@@ -923,6 +990,7 @@ export interface KittlSDK {
 	upload: AsyncUploadAPI;
 	stateless: AsyncStatelessAPI;
 	font: AsyncFontAPI;
+	createBatch: () => Promise<AsyncBatchDesignAPI>;
 }
 export interface LayersAPI {
 	moveTo(input: MoveToParams, opts?: DesignApiOptions): void;
@@ -1002,6 +1070,24 @@ export interface RemoveObjectParams {
 export interface RemoveObjectResult {
 	removedObject: NormalizedObject;
 }
+export interface RichTextCompressedStylesV1 {
+	version: "v1";
+	[lineIndex: LineIndex]: {
+		charsAt: CharacterIndex[];
+		styles: Partial<RichTextSerializedCharacterStyle>;
+	}[];
+}
+export interface RichTextCompressedStylesV2 {
+	version: "v2";
+	customStyles: Record<string, Partial<RichTextSerializedCharacterStyle>>;
+	[lineIndex: LineIndex]: {
+		charsAt: [
+			CharacterIndex,
+			SequenceLength
+		][];
+		styleId: string;
+	}[];
+}
 export interface RotateObjectParams {
 	id: string;
 	angle: number;
@@ -1168,6 +1254,7 @@ export interface WithObjectLayout {
 	flipX: boolean;
 	flipY: boolean;
 }
+export type AIGenerationActionOrigin = "COPILOT" | "RIGHT_PANEL" | "LEFT_PANEL" | "MICRO_APP" | "IMAGE_SETS" | "AI_CHAT" | "SMARTBOARD" | "AI_INPUT_GENERATE_IMAGE" | "AI_INPUT_REMIX_IMAGE" | "AI_INPUT_GENERATE_VIDEO" | "AI_HUB_GENERATE_IMAGE" | "AI_HUB_REMIX_IMAGE" | "AI_HUB_GENERATE_VIDEO" | "VIDEOBOARD";
 export type AIGenerationContentType = "image" | "video";
 export type AIGenerationModelTaskType = "IMAGE_TO_IMAGE" | "IMAGE_INPAINT" | "TEXT_TO_IMAGE" | "IMAGE_TO_VIDEO";
 export type APIOptions<T extends Record<string, unknown>> = {
@@ -1183,6 +1270,8 @@ export type ActiveTool = {
 	type: "artboard";
 } | {
 	type: "move";
+} | {
+	type: "hand";
 } | {
 	type: "pen";
 } | {
@@ -1265,8 +1354,23 @@ export type AppState = {
 	canvasMode: CanvasMode | string;
 	activeTool: ActiveTool | null;
 	viewport: Viewport;
+	isDragPanning: boolean;
 	highlightedObjectId: string | null;
 };
+/**
+ * A dot-separated string path into the app state.
+ * The first segment must be a valid top-level key of AppState.
+ *
+ * @example
+ * 'selectedObjectsIds'
+ * 'viewport.coords.tl.x'
+ * 'activeTool.type'
+ */
+export type AppStateSelectorPath = AppStateTopLevelKey | `${AppStateTopLevelKey}.${string}`;
+/**
+ * Top-level keys of AppState that extensions can subscribe to.
+ */
+export type AppStateTopLevelKey = keyof AppState;
 export type ArtboardLikeType = ObjectType.Artboard | ObjectType.MockupBoard | ObjectType.Smartboard | ObjectType.Videoboard;
 export type ArtboardOptions = StandardArtboardOptions | SmartboardOptions | MockupBoardOptions | VideoboardOptions;
 export type AvailableShadowOptions = Partial<Pick<ShadowOptions, "blur">> & Omit<ShadowOptions, "blur">;
@@ -1298,6 +1402,7 @@ export type BasicShapeType = (typeof BasicShapeType)[keyof typeof BasicShapeType
 export type BridgedSdkResult<T> = T extends SdkResult<infer _R, infer _E> ? T : SdkResult<T, Error>;
 export type Builtin = Date | Function | Uint8Array | RegExp | Map<unknown, unknown> | Set<unknown>;
 export type CanvasMode = "erase" | "crop" | "reframe" | "inpaint" | null;
+export type CharacterIndex = number;
 export type CloneArtboardParams = {
 	boardId: string;
 	position: CreateElementWithPositionAndSize["position"];
@@ -1310,6 +1415,7 @@ export type CombinedShapeSerializedObject = Omit<typeof DEFAULT_VALUES, "shapes"
 export type ConnectedArtboardOptions<T extends ArtboardLikeType = ArtboardLikeType> = BaseStandardArtboardOptions<T> & {
 	inputBoardIds?: string[];
 };
+export type ContextSubscriptionCallback = (context: KittlContext) => void;
 export type ConvertShapeToMaskInput = {
 	id: NormalizedBasicShapeObject["id"];
 };
@@ -1344,8 +1450,34 @@ export type CreateShapeInput = CreateElementWithPositionAndSize & {
 export type DeepPartial<T> = {
 	[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
+/**
+ * Resolves a dot-separated string path against a type `T`.
+ *
+ * For `Record<string, V>` intermediaries (e.g. `objects`), any string
+ * key is accepted and the type continues into `V`.
+ *
+ * @example
+ * DeepValue<SelectorState, 'objects.id1.width'> // number | undefined
+ * DeepValue<SelectorState, 'config'>            // DesignConfig
+ * DeepValue<AppState, 'viewport.coords.tl.x'>  // number
+ */
+export type DeepValue<T, P extends string> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? DeepValue<NonNullable<T[K]>, Rest> : T extends Record<string, infer V> ? DeepValue<NonNullable<V>, Rest> : undefined : P extends keyof T ? T[P] : T extends Record<string, infer V> ? V : undefined;
 export type DesignApiOptions = APIOptions<NormalizedDesignState>;
 export type DesignObjectId = string;
+/**
+ * A dot-separated string path into the design state.
+ * The first segment must be a valid top-level key of NormalizedDesignState.
+ *
+ * @example
+ * 'objects.id1.width'
+ * 'config.title'
+ * 'boards.board1.backgroundColor'
+ */
+export type DesignStateSelectorPath = DesignStateTopLevelKey | `${DesignStateTopLevelKey}.${string}`;
+/**
+ * Top-level keys of NormalizedDesignState that extensions can subscribe to.
+ */
+export type DesignStateTopLevelKey = keyof NormalizedDesignState;
 export type DesignStructureObject = {
 	id?: StructureObjectId | null;
 	meta?: StructureObjectMeta;
@@ -1355,11 +1487,16 @@ export type Dimensions = {
 	width: number;
 	height: number;
 };
+export type EditorColorScheme = "light" | "dark";
 export type ElementLocation = "origin" | "center";
 export type Expand<T> = T extends infer O ? {
 	[K in keyof O]: O[K];
 } : never;
 export type FillMetaTarget = "border" | "fill";
+export type FlattenUnion<T> = UnionToIntersection<T extends unknown ? Partial<T> : never>;
+export type FontVariationAxis = OrAnyString<"wght" | "wdth" | "slnt" | "ital" | "opsz" | "GRAD">;
+export type FontVariationSettings = Partial<Record<FontVariationAxis, number>>;
+export type FontWeight = OrAnyString<"Regular" | "Bold" | "Light" | "Medium" | "Black" | "SemiBold" | "Italic" | "ExtraLight" | "Thin" | "ExtraBold" | "LightItalic" | "MediumItalic" | "SemiBoldItalic" | "BlackItalic" | "ExtraBoldItalic" | "ThinItalic" | "ExtraLightItalic" | "BoldItalic">;
 export type FullColor = {
 	key: "fill" | (Exclude<string, StringColorKeysType> & {});
 	value: Color;
@@ -1392,6 +1529,8 @@ export type GuideSerializedObject = typeof GUIDE_DEFAULT_VALUES & OrientationDir
 export type ID = string;
 export type IllustrationImageSerializedObject = typeof DEFAULT_VALUES$1 & {
 	backgroundRemoved?: boolean | undefined;
+	objectNameWithBackground?: string;
+	backgroundRestorePathBoundary?: number | undefined;
 	realWidth?: number | undefined;
 	realHeight?: number | undefined;
 	erasePaths?: {
@@ -1429,6 +1568,7 @@ export type InternalPatchArgs<T> = {
 	patch: PatchTree<T> | PatchTree<T>[];
 	origin: Origin;
 	historyOrigin?: HistoryOrigins;
+	transactionMeta?: TransactionMeta;
 };
 export type LayerIconType = "drawIcon";
 export type LayerType = Exclude<SerializableObjectType, ObjectType.Guide> | typeof structuralGroupType | typeof clippingMaskType | typeof backgroundType | typeof pathType;
@@ -1437,6 +1577,12 @@ export type LeftTopPosition = {
 	left: number;
 	top: number;
 };
+export type LineHeight = {
+	value: number;
+	unit: LineHeightUnit;
+};
+export type LineHeightUnit = "px" | "%";
+export type LineIndex = number;
 export type LinkedPreset = {
 	id: string;
 	libraryId: string;
@@ -1531,6 +1677,7 @@ export type NullablePathTextShadowOptions = PathTextShadowOptions | {
 	type: null;
 };
 export type OnGenerationStatusUpdate = (update: GenerationStatusUpdate) => void | Promise<void>;
+export type OrAnyString<T extends string> = T | (string & {});
 export type OrientationConditional = {
 	orientation: Orientation.HORIZONTAL;
 	top: number;
@@ -1639,21 +1786,78 @@ export type RichTextBasePluginSerializedObject = {
 	name: string;
 	version: string;
 };
+export type RichTextCompressedColor = string | GradientObject | null;
+export type RichTextCompressedStyles = RichTextCompressedStylesV1 | RichTextCompressedStylesV2;
 export type RichTextDecorationPluginSerializedObject = RichTextBasePluginSerializedObject & {
 	fillStyle: string;
 	[key: string]: string | number;
 };
+export type RichTextHyperlinkSerializedObject = {
+	id: string;
+	url: string;
+};
 export type RichTextRenderPluginSerializedObject = RichTextBasePluginSerializedObject & {
 	color: string;
 	angle: number;
 	offset: number;
 	[key: string]: string | number;
 };
+export type RichTextResizeBehavior = "hug" | "none" | "hug-height";
+export type RichTextSerializedCharacterStyle = Partial<{
+	fontFamily: string;
+	fontWeight: FontWeight;
+	fontSize: number;
+	fill: RichTextCompressedColor;
+	underline: boolean;
+	linethrough: boolean;
+	charSpacing: number;
+	textCase: TextCase;
+	lineHeightValue: LineHeight;
+	hyperlinkId: string | null;
+	preLinkFill: RichTextCompressedColor;
+	fontVariationSettings: FontVariationSettings;
+	fontFeatureSettings: Record<string, boolean | number>;
+}>;
 export type RichTextSerializedObject = typeof RICH_TEXT_DEFAULT_VALUES & {
 	text: string;
+	fontFamily: string;
+	styles?: RichTextCompressedStyles;
 	activeRenderPlugins?: RichTextRenderPluginSerializedObject[];
 	activeDecorationPlugins?: RichTextDecorationPluginSerializedObject[];
-	[key: string]: unknown;
+	activeTransformPlugin?: RichTextSerializedTransformPluginObject;
+	fontSize?: number;
+	fontWeight?: FontWeight;
+	textAlign?: TextAlign;
+	charSpacing?: number;
+	underline?: boolean;
+	linethrough?: boolean;
+	fontVariationSettings?: FontVariationSettings;
+	textCase?: TextCase;
+	lineHeightValue?: LineHeight;
+	untransformedWidth?: number;
+	widthBeforeTransform?: number;
+	resizeBehavior?: RichTextResizeBehavior;
+	hyperlinkId?: string;
+	preLinkFill?: string | GradientObject | null;
+	fontFeatureSettings?: Record<string, boolean | number>;
+	links?: RichTextHyperlinkSerializedObject[];
+	volatileData?: {
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+		activeTransformPlugin: RichTextSerializedTransformPluginObject;
+		key: string;
+	};
+};
+export type RichTextSerializedTransformPluginObject = RichTextBasePluginSerializedObject & {
+	type?: string;
+	points: {
+		x: number;
+		y: number;
+	}[];
+	curveHeight?: number;
+	directionInverted?: boolean;
 };
 export type ScreenCoordinates = {
 	x: number;
@@ -1679,9 +1883,18 @@ export type SdkResultAsync<T, E = SdkError> = Promise<{
 	error: E;
 }>;
 export type Selector<T, U = unknown> = (state: T) => U;
+/**
+ * The design state shape exposed to string path selectors.
+ * `objects` values are flattened so that variant-specific properties
+ * (e.g. `width`, `fill`) are accessible without manual narrowing.
+ */
+export type SelectorState = Omit<NormalizedDesignState, "objects"> & {
+	objects: Record<string, FlattenUnion<NormalizedObject>>;
+};
 export type SendToParams = {
 	boardOrObjectIds: string[];
 };
+export type SequenceLength = number;
 export type SerialisedPhotoFilter = ({
 	type: ImageFilterType;
 } & PhotoFilterOptions[ImageFilterType]) | {
@@ -1775,13 +1988,15 @@ export type TempUserImageUpload = {
 	objectId: string;
 	mimeType: string;
 };
+export type TextAlign = "left" | "center" | "right" | "justify" | "justify-left" | "justify-center" | "justify-right" | "justify-legacy";
+export type TextCase = "none" | "uppercase";
 export type TextProperties = {
 	fontFamily?: string;
 	fontSize?: number;
-	fontWeight?: string | number;
+	fontWeight?: string;
 	fill?: Color;
 	textAlign?: "left" | "center" | "right" | "justify";
-	lineHeight?: number;
+	lineHeightValue?: LineHeight;
 	resizeBehavior?: "none" | "hug" | "hug-height";
 	charSpacing?: number;
 	underline?: boolean;
@@ -1793,6 +2008,16 @@ export type TextProperties = {
 	stroke?: string;
 	strokeWidth?: number;
 };
+export type TransactionMeta = {
+	isLocal: boolean;
+	isUndoRedo: boolean;
+};
+/**
+ * Collapses a union type into a single object type where:
+ * - Properties shared by all members keep their original type.
+ * - Properties that exist only on some members become optional.
+ */
+export type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 export type UpdateArtboardBackgroundParams = {
 	id: string;
 	objectName: string;
@@ -1882,6 +2107,7 @@ export type UpdateVideoPlaylistItemParams = {
 	videoId: string;
 	playlistItemId: string;
 	playlistItem: Omit<VideoPlaylistItem, "id">;
+	allowAspectRatioMismatch?: boolean;
 };
 export type UpdateVideoboardParams = {
 	videoBoardId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kittl/sdk",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "Apache-2.0",
   "private": false,
   "type": "module",
@@ -22,5 +22,8 @@
     "dist",
     "README.md",
     "LICENSE"
-  ]
+  ],
+  "scripts": {
+    "deploy": "bash ../../scripts/npm-publish.sh"
+  }
 }