@imagecanvaskit/embed 1.0.0

package/dist/vanilla.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+// src/vanilla.ts
+var DEFAULT_BASE_URL = "https://imagecanvaskit.com";
+function buildEditorUrl(config) {
+  const baseUrl = config.baseUrl || DEFAULT_BASE_URL;
+  const params = new URLSearchParams();
+  params.set("embed", "true");
+  if (config.apiKey) params.set("apiKey", config.apiKey);
+  if (config.width) params.set("width", String(config.width));
+  if (config.height) params.set("height", String(config.height));
+  if (config.backgroundColor) params.set("bg", config.backgroundColor);
+  if (config.theme) params.set("theme", config.theme);
+  if (config.hideToolbar) params.set("hideToolbar", "true");
+  if (config.hideSidebar) params.set("hideSidebar", "true");
+  if (config.hideExport) params.set("hideExport", "true");
+  if (config.templateId) params.set("templateId", config.templateId);
+  if (config.endUserId) params.set("endUserId", config.endUserId);
+  if (config.exportFormats) params.set("formats", config.exportFormats.join(","));
+  if (config.whiteLabel) {
+    if (config.whiteLabel.logo) params.set("logo", config.whiteLabel.logo);
+    if (config.whiteLabel.primaryColor) params.set("primaryColor", config.whiteLabel.primaryColor);
+    if (config.whiteLabel.companyName) params.set("companyName", config.whiteLabel.companyName);
+    if (config.whiteLabel.hideBranding) params.set("hideBranding", "true");
+  }
+  return `${baseUrl}/editor?${params.toString()}`;
+}
+function createEditor(options) {
+  const {
+    container,
+    width = "100%",
+    height = "600px",
+    canvasWidth,
+    canvasHeight,
+    onReady,
+    onExport,
+    onSave,
+    onLoad,
+    onError,
+    onResize,
+    onObjectSelected,
+    onObjectDeselected,
+    onCanvasModified,
+    projectData,
+    ...config
+  } = options;
+  const editorConfig = {
+    ...config,
+    width: canvasWidth,
+    height: canvasHeight
+  };
+  const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+  if (!containerEl) {
+    throw new Error(`ImageCanvasKit: Container element not found: ${container}`);
+  }
+  const iframe = document.createElement("iframe");
+  iframe.src = buildEditorUrl(editorConfig);
+  iframe.style.border = "none";
+  iframe.style.display = "block";
+  iframe.style.width = typeof width === "number" ? `${width}px` : width;
+  iframe.style.height = typeof height === "number" ? `${height}px` : height;
+  iframe.allow = "clipboard-read; clipboard-write";
+  iframe.title = "ImageCanvasKit Editor";
+  const sendCommand = (payload) => {
+    if (iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ source: "imagecanvaskit-embed", ...payload }, "*");
+    }
+  };
+  const handleMessage = (event) => {
+    if (config.baseUrl && !event.origin.includes(new URL(config.baseUrl).hostname)) {
+      return;
+    }
+    const data = event.data;
+    if (!data || typeof data !== "object" || !data.type) return;
+    switch (data.type) {
+      case "ready":
+        onReady?.(data);
+        if (projectData) {
+          sendCommand({ command: "load", projectData });
+        }
+        break;
+      case "export":
+        onExport?.(data);
+        break;
+      case "save":
+        onSave?.(data);
+        break;
+      case "load":
+        onLoad?.(data);
+        break;
+      case "error":
+        onError?.(data);
+        break;
+      case "resize":
+        onResize?.(data);
+        break;
+      case "objectSelected":
+        onObjectSelected?.(data);
+        break;
+      case "objectDeselected":
+        onObjectDeselected?.(data);
+        break;
+      case "canvasModified":
+        onCanvasModified?.(data);
+        break;
+    }
+  };
+  window.addEventListener("message", handleMessage);
+  containerEl.appendChild(iframe);
+  const instance = {
+    sendCommand,
+    export: (opts) => sendCommand({ command: "export", ...opts }),
+    save: () => sendCommand({ command: "save" }),
+    load: (opts) => sendCommand({ command: "load", ...opts }),
+    clear: () => sendCommand({ command: "clear" }),
+    undo: () => sendCommand({ command: "undo" }),
+    redo: () => sendCommand({ command: "redo" }),
+    addText: (opts) => sendCommand({ command: "addText", ...opts }),
+    addImage: (opts) => sendCommand({ command: "addImage", ...opts }),
+    addShape: (opts) => sendCommand({ command: "addShape", ...opts }),
+    setBackground: (opts) => sendCommand({ command: "setBackground", ...opts }),
+    resize: (w, h) => sendCommand({ command: "resize", width: w, height: h }),
+    destroy: () => {
+      window.removeEventListener("message", handleMessage);
+      iframe.remove();
+    }
+  };
+  return instance;
+}
+function base64ToBlob(base64, mimeType) {
+  const byteCharacters = atob(base64.split(",")[1] || base64);
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  const byteArray = new Uint8Array(byteNumbers);
+  return new Blob([byteArray], { type: mimeType });
+}
+function downloadImage(imageData, filename, mimeType) {
+  const blob = base64ToBlob(imageData, mimeType);
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+exports.base64ToBlob = base64ToBlob;
+exports.createEditor = createEditor;
+exports.downloadImage = downloadImage;
+//# sourceMappingURL=vanilla.cjs.map
+//# sourceMappingURL=vanilla.cjs.map

package/dist/vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vanilla.ts"],"names":[],"mappings":"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","file":"vanilla.cjs","sourcesContent":["/**\n * ImageCanvasKit Vanilla JS Embed\n *\n * For use in vanilla JavaScript, Vue, Angular, or any framework.\n */\n\nimport type {\n  ImageCanvasKitConfig,\n  ImageCanvasKitInstance,\n  CommandPayload,\n  EventCallbacks,\n  ImageCanvasKitEvent,\n  ExportEventData,\n  SaveEventData,\n  LoadEventData,\n  ErrorEventData,\n  ReadyEventData,\n  ResizeEventData,\n  ObjectSelectedEventData,\n  CanvasModifiedEventData,\n} from './types';\n\nconst DEFAULT_BASE_URL = 'https://imagecanvaskit.com';\n\nexport interface CreateEditorOptions extends Omit<ImageCanvasKitConfig, 'width' | 'height'>, EventCallbacks {\n  /** Container element or selector */\n  container: HTMLElement | string;\n  /** Canvas width in pixels (passed to editor) */\n  canvasWidth?: number;\n  /** Canvas height in pixels (passed to editor) */\n  canvasHeight?: number;\n  /** iframe width (CSS value) */\n  width?: string | number;\n  /** iframe height (CSS value) */\n  height?: string | number;\n}\n\n/**\n * Build the editor URL with configuration parameters\n */\nfunction buildEditorUrl(config: ImageCanvasKitConfig): string {\n  const baseUrl = config.baseUrl || DEFAULT_BASE_URL;\n  const params = new URLSearchParams();\n\n  params.set('embed', 'true');\n\n  if (config.apiKey) params.set('apiKey', config.apiKey);\n  if (config.width) params.set('width', String(config.width));\n  if (config.height) params.set('height', String(config.height));\n  if (config.backgroundColor) params.set('bg', config.backgroundColor);\n  if (config.theme) params.set('theme', config.theme);\n  if (config.hideToolbar) params.set('hideToolbar', 'true');\n  if (config.hideSidebar) params.set('hideSidebar', 'true');\n  if (config.hideExport) params.set('hideExport', 'true');\n  if (config.templateId) params.set('templateId', config.templateId);\n  if (config.endUserId) params.set('endUserId', config.endUserId);\n  if (config.exportFormats) params.set('formats', config.exportFormats.join(','));\n\n  // White-label settings\n  if (config.whiteLabel) {\n    if (config.whiteLabel.logo) params.set('logo', config.whiteLabel.logo);\n    if (config.whiteLabel.primaryColor) params.set('primaryColor', config.whiteLabel.primaryColor);\n    if (config.whiteLabel.companyName) params.set('companyName', config.whiteLabel.companyName);\n    if (config.whiteLabel.hideBranding) params.set('hideBranding', 'true');\n  }\n\n  return `${baseUrl}/editor?${params.toString()}`;\n}\n\n/**\n * Create an ImageCanvasKit editor instance\n *\n * @example\n * ```js\n * import { createEditor } from '@imagecanvaskit/embed';\n *\n * const editor = createEditor({\n *   container: '#editor-container',\n *   apiKey: 'your-api-key',\n *   width: '100%',\n *   height: '600px',\n *   onExport: (e) => console.log('Exported:', e.data),\n *   onReady: () => console.log('Editor ready!'),\n * });\n *\n * // Later: trigger export\n * editor.export({ format: 'png' });\n *\n * // Cleanup\n * editor.destroy();\n * ```\n */\nexport function createEditor(options: CreateEditorOptions): ImageCanvasKitInstance {\n  const {\n    container,\n    width = '100%',\n    height = '600px',\n    canvasWidth,\n    canvasHeight,\n    onReady,\n    onExport,\n    onSave,\n    onLoad,\n    onError,\n    onResize,\n    onObjectSelected,\n    onObjectDeselected,\n    onCanvasModified,\n    projectData,\n    ...config\n  } = options;\n\n  // Build config with canvas dimensions\n  const editorConfig = {\n    ...config,\n    width: canvasWidth,\n    height: canvasHeight,\n  };\n\n  // Get container element\n  const containerEl =\n    typeof container === 'string' ? document.querySelector<HTMLElement>(container) : container;\n\n  if (!containerEl) {\n    throw new Error(`ImageCanvasKit: Container element not found: ${container}`);\n  }\n\n  // Create iframe\n  const iframe = document.createElement('iframe');\n  iframe.src = buildEditorUrl(editorConfig);\n  iframe.style.border = 'none';\n  iframe.style.display = 'block';\n  iframe.style.width = typeof width === 'number' ? `${width}px` : width;\n  iframe.style.height = typeof height === 'number' ? `${height}px` : height;\n  iframe.allow = 'clipboard-read; clipboard-write';\n  iframe.title = 'ImageCanvasKit Editor';\n\n  // Track ready state (for future use)\n  let _isReady = false;\n\n  // Send command to iframe\n  const sendCommand = (payload: CommandPayload) => {\n    if (iframe.contentWindow) {\n      iframe.contentWindow.postMessage({ source: 'imagecanvaskit-embed', ...payload }, '*');\n    }\n  };\n\n  // Handle incoming messages\n  const handleMessage = (event: MessageEvent) => {\n    // Verify origin in production\n    if (config.baseUrl && !event.origin.includes(new URL(config.baseUrl).hostname)) {\n      return;\n    }\n\n    const data = event.data as ImageCanvasKitEvent;\n    if (!data || typeof data !== 'object' || !data.type) return;\n\n    switch (data.type) {\n      case 'ready':\n        _isReady = true;\n        onReady?.(data as ImageCanvasKitEvent<ReadyEventData>);\n        // Load project data if provided\n        if (projectData) {\n          sendCommand({ command: 'load', projectData });\n        }\n        break;\n      case 'export':\n        onExport?.(data as ImageCanvasKitEvent<ExportEventData>);\n        break;\n      case 'save':\n        onSave?.(data as ImageCanvasKitEvent<SaveEventData>);\n        break;\n      case 'load':\n        onLoad?.(data as ImageCanvasKitEvent<LoadEventData>);\n        break;\n      case 'error':\n        onError?.(data as ImageCanvasKitEvent<ErrorEventData>);\n        break;\n      case 'resize':\n        onResize?.(data as ImageCanvasKitEvent<ResizeEventData>);\n        break;\n      case 'objectSelected':\n        onObjectSelected?.(data as ImageCanvasKitEvent<ObjectSelectedEventData>);\n        break;\n      case 'objectDeselected':\n        onObjectDeselected?.(data as ImageCanvasKitEvent<void>);\n        break;\n      case 'canvasModified':\n        onCanvasModified?.(data as ImageCanvasKitEvent<CanvasModifiedEventData>);\n        break;\n    }\n  };\n\n  window.addEventListener('message', handleMessage);\n\n  // Append iframe to container\n  containerEl.appendChild(iframe);\n\n  // Return instance API\n  const instance: ImageCanvasKitInstance = {\n    sendCommand,\n    export: (opts) => sendCommand({ command: 'export', ...opts }),\n    save: () => sendCommand({ command: 'save' }),\n    load: (opts) => sendCommand({ command: 'load', ...opts }),\n    clear: () => sendCommand({ command: 'clear' }),\n    undo: () => sendCommand({ command: 'undo' }),\n    redo: () => sendCommand({ command: 'redo' }),\n    addText: (opts) => sendCommand({ command: 'addText', ...opts }),\n    addImage: (opts) => sendCommand({ command: 'addImage', ...opts }),\n    addShape: (opts) => sendCommand({ command: 'addShape', ...opts }),\n    setBackground: (opts) => sendCommand({ command: 'setBackground', ...opts }),\n    resize: (w, h) => sendCommand({ command: 'resize', width: w, height: h }),\n    destroy: () => {\n      window.removeEventListener('message', handleMessage);\n      iframe.remove();\n    },\n  };\n\n  return instance;\n}\n\n/**\n * Helper to convert base64 image data to Blob\n */\nexport function base64ToBlob(base64: string, mimeType: string): Blob {\n  const byteCharacters = atob(base64.split(',')[1] || base64);\n  const byteNumbers = new Array(byteCharacters.length);\n  for (let i = 0; i < byteCharacters.length; i++) {\n    byteNumbers[i] = byteCharacters.charCodeAt(i);\n  }\n  const byteArray = new Uint8Array(byteNumbers);\n  return new Blob([byteArray], { type: mimeType });\n}\n\n/**\n * Helper to download exported image\n */\nexport function downloadImage(imageData: string, filename: string, mimeType: string): void {\n  const blob = base64ToBlob(imageData, mimeType);\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url);\n}\n\n"]}

package/dist/vanilla.d.cts

@@ -0,0 +1,54 @@
+import { i as ImageCanvasKitConfig, f as EventCallbacks, l as ImageCanvasKitInstance } from './types-C7ZIsAaA.cjs';
+
+/**
+ * ImageCanvasKit Vanilla JS Embed
+ *
+ * For use in vanilla JavaScript, Vue, Angular, or any framework.
+ */
+
+interface CreateEditorOptions extends Omit<ImageCanvasKitConfig, 'width' | 'height'>, EventCallbacks {
+    /** Container element or selector */
+    container: HTMLElement | string;
+    /** Canvas width in pixels (passed to editor) */
+    canvasWidth?: number;
+    /** Canvas height in pixels (passed to editor) */
+    canvasHeight?: number;
+    /** iframe width (CSS value) */
+    width?: string | number;
+    /** iframe height (CSS value) */
+    height?: string | number;
+}
+/**
+ * Create an ImageCanvasKit editor instance
+ *
+ * @example
+ * ```js
+ * import { createEditor } from '@imagecanvaskit/embed';
+ *
+ * const editor = createEditor({
+ *   container: '#editor-container',
+ *   apiKey: 'your-api-key',
+ *   width: '100%',
+ *   height: '600px',
+ *   onExport: (e) => console.log('Exported:', e.data),
+ *   onReady: () => console.log('Editor ready!'),
+ * });
+ *
+ * // Later: trigger export
+ * editor.export({ format: 'png' });
+ *
+ * // Cleanup
+ * editor.destroy();
+ * ```
+ */
+declare function createEditor(options: CreateEditorOptions): ImageCanvasKitInstance;
+/**
+ * Helper to convert base64 image data to Blob
+ */
+declare function base64ToBlob(base64: string, mimeType: string): Blob;
+/**
+ * Helper to download exported image
+ */
+declare function downloadImage(imageData: string, filename: string, mimeType: string): void;
+
+export { type CreateEditorOptions, base64ToBlob, createEditor, downloadImage };

package/dist/vanilla.d.ts

@@ -0,0 +1,54 @@
+import { i as ImageCanvasKitConfig, f as EventCallbacks, l as ImageCanvasKitInstance } from './types-C7ZIsAaA.js';
+
+/**
+ * ImageCanvasKit Vanilla JS Embed
+ *
+ * For use in vanilla JavaScript, Vue, Angular, or any framework.
+ */
+
+interface CreateEditorOptions extends Omit<ImageCanvasKitConfig, 'width' | 'height'>, EventCallbacks {
+    /** Container element or selector */
+    container: HTMLElement | string;
+    /** Canvas width in pixels (passed to editor) */
+    canvasWidth?: number;
+    /** Canvas height in pixels (passed to editor) */
+    canvasHeight?: number;
+    /** iframe width (CSS value) */
+    width?: string | number;
+    /** iframe height (CSS value) */
+    height?: string | number;
+}
+/**
+ * Create an ImageCanvasKit editor instance
+ *
+ * @example
+ * ```js
+ * import { createEditor } from '@imagecanvaskit/embed';
+ *
+ * const editor = createEditor({
+ *   container: '#editor-container',
+ *   apiKey: 'your-api-key',
+ *   width: '100%',
+ *   height: '600px',
+ *   onExport: (e) => console.log('Exported:', e.data),
+ *   onReady: () => console.log('Editor ready!'),
+ * });
+ *
+ * // Later: trigger export
+ * editor.export({ format: 'png' });
+ *
+ * // Cleanup
+ * editor.destroy();
+ * ```
+ */
+declare function createEditor(options: CreateEditorOptions): ImageCanvasKitInstance;
+/**
+ * Helper to convert base64 image data to Blob
+ */
+declare function base64ToBlob(base64: string, mimeType: string): Blob;
+/**
+ * Helper to download exported image
+ */
+declare function downloadImage(imageData: string, filename: string, mimeType: string): void;
+
+export { type CreateEditorOptions, base64ToBlob, createEditor, downloadImage };

package/dist/vanilla.js

@@ -0,0 +1,151 @@
+// src/vanilla.ts
+var DEFAULT_BASE_URL = "https://imagecanvaskit.com";
+function buildEditorUrl(config) {
+  const baseUrl = config.baseUrl || DEFAULT_BASE_URL;
+  const params = new URLSearchParams();
+  params.set("embed", "true");
+  if (config.apiKey) params.set("apiKey", config.apiKey);
+  if (config.width) params.set("width", String(config.width));
+  if (config.height) params.set("height", String(config.height));
+  if (config.backgroundColor) params.set("bg", config.backgroundColor);
+  if (config.theme) params.set("theme", config.theme);
+  if (config.hideToolbar) params.set("hideToolbar", "true");
+  if (config.hideSidebar) params.set("hideSidebar", "true");
+  if (config.hideExport) params.set("hideExport", "true");
+  if (config.templateId) params.set("templateId", config.templateId);
+  if (config.endUserId) params.set("endUserId", config.endUserId);
+  if (config.exportFormats) params.set("formats", config.exportFormats.join(","));
+  if (config.whiteLabel) {
+    if (config.whiteLabel.logo) params.set("logo", config.whiteLabel.logo);
+    if (config.whiteLabel.primaryColor) params.set("primaryColor", config.whiteLabel.primaryColor);
+    if (config.whiteLabel.companyName) params.set("companyName", config.whiteLabel.companyName);
+    if (config.whiteLabel.hideBranding) params.set("hideBranding", "true");
+  }
+  return `${baseUrl}/editor?${params.toString()}`;
+}
+function createEditor(options) {
+  const {
+    container,
+    width = "100%",
+    height = "600px",
+    canvasWidth,
+    canvasHeight,
+    onReady,
+    onExport,
+    onSave,
+    onLoad,
+    onError,
+    onResize,
+    onObjectSelected,
+    onObjectDeselected,
+    onCanvasModified,
+    projectData,
+    ...config
+  } = options;
+  const editorConfig = {
+    ...config,
+    width: canvasWidth,
+    height: canvasHeight
+  };
+  const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+  if (!containerEl) {
+    throw new Error(`ImageCanvasKit: Container element not found: ${container}`);
+  }
+  const iframe = document.createElement("iframe");
+  iframe.src = buildEditorUrl(editorConfig);
+  iframe.style.border = "none";
+  iframe.style.display = "block";
+  iframe.style.width = typeof width === "number" ? `${width}px` : width;
+  iframe.style.height = typeof height === "number" ? `${height}px` : height;
+  iframe.allow = "clipboard-read; clipboard-write";
+  iframe.title = "ImageCanvasKit Editor";
+  const sendCommand = (payload) => {
+    if (iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ source: "imagecanvaskit-embed", ...payload }, "*");
+    }
+  };
+  const handleMessage = (event) => {
+    if (config.baseUrl && !event.origin.includes(new URL(config.baseUrl).hostname)) {
+      return;
+    }
+    const data = event.data;
+    if (!data || typeof data !== "object" || !data.type) return;
+    switch (data.type) {
+      case "ready":
+        onReady?.(data);
+        if (projectData) {
+          sendCommand({ command: "load", projectData });
+        }
+        break;
+      case "export":
+        onExport?.(data);
+        break;
+      case "save":
+        onSave?.(data);
+        break;
+      case "load":
+        onLoad?.(data);
+        break;
+      case "error":
+        onError?.(data);
+        break;
+      case "resize":
+        onResize?.(data);
+        break;
+      case "objectSelected":
+        onObjectSelected?.(data);
+        break;
+      case "objectDeselected":
+        onObjectDeselected?.(data);
+        break;
+      case "canvasModified":
+        onCanvasModified?.(data);
+        break;
+    }
+  };
+  window.addEventListener("message", handleMessage);
+  containerEl.appendChild(iframe);
+  const instance = {
+    sendCommand,
+    export: (opts) => sendCommand({ command: "export", ...opts }),
+    save: () => sendCommand({ command: "save" }),
+    load: (opts) => sendCommand({ command: "load", ...opts }),
+    clear: () => sendCommand({ command: "clear" }),
+    undo: () => sendCommand({ command: "undo" }),
+    redo: () => sendCommand({ command: "redo" }),
+    addText: (opts) => sendCommand({ command: "addText", ...opts }),
+    addImage: (opts) => sendCommand({ command: "addImage", ...opts }),
+    addShape: (opts) => sendCommand({ command: "addShape", ...opts }),
+    setBackground: (opts) => sendCommand({ command: "setBackground", ...opts }),
+    resize: (w, h) => sendCommand({ command: "resize", width: w, height: h }),
+    destroy: () => {
+      window.removeEventListener("message", handleMessage);
+      iframe.remove();
+    }
+  };
+  return instance;
+}
+function base64ToBlob(base64, mimeType) {
+  const byteCharacters = atob(base64.split(",")[1] || base64);
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  const byteArray = new Uint8Array(byteNumbers);
+  return new Blob([byteArray], { type: mimeType });
+}
+function downloadImage(imageData, filename, mimeType) {
+  const blob = base64ToBlob(imageData, mimeType);
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export { base64ToBlob, createEditor, downloadImage };
+//# sourceMappingURL=vanilla.js.map
+//# sourceMappingURL=vanilla.js.map

package/dist/vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vanilla.ts"],"names":[],"mappings":"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","file":"vanilla.js","sourcesContent":["/**\n * ImageCanvasKit Vanilla JS Embed\n *\n * For use in vanilla JavaScript, Vue, Angular, or any framework.\n */\n\nimport type {\n  ImageCanvasKitConfig,\n  ImageCanvasKitInstance,\n  CommandPayload,\n  EventCallbacks,\n  ImageCanvasKitEvent,\n  ExportEventData,\n  SaveEventData,\n  LoadEventData,\n  ErrorEventData,\n  ReadyEventData,\n  ResizeEventData,\n  ObjectSelectedEventData,\n  CanvasModifiedEventData,\n} from './types';\n\nconst DEFAULT_BASE_URL = 'https://imagecanvaskit.com';\n\nexport interface CreateEditorOptions extends Omit<ImageCanvasKitConfig, 'width' | 'height'>, EventCallbacks {\n  /** Container element or selector */\n  container: HTMLElement | string;\n  /** Canvas width in pixels (passed to editor) */\n  canvasWidth?: number;\n  /** Canvas height in pixels (passed to editor) */\n  canvasHeight?: number;\n  /** iframe width (CSS value) */\n  width?: string | number;\n  /** iframe height (CSS value) */\n  height?: string | number;\n}\n\n/**\n * Build the editor URL with configuration parameters\n */\nfunction buildEditorUrl(config: ImageCanvasKitConfig): string {\n  const baseUrl = config.baseUrl || DEFAULT_BASE_URL;\n  const params = new URLSearchParams();\n\n  params.set('embed', 'true');\n\n  if (config.apiKey) params.set('apiKey', config.apiKey);\n  if (config.width) params.set('width', String(config.width));\n  if (config.height) params.set('height', String(config.height));\n  if (config.backgroundColor) params.set('bg', config.backgroundColor);\n  if (config.theme) params.set('theme', config.theme);\n  if (config.hideToolbar) params.set('hideToolbar', 'true');\n  if (config.hideSidebar) params.set('hideSidebar', 'true');\n  if (config.hideExport) params.set('hideExport', 'true');\n  if (config.templateId) params.set('templateId', config.templateId);\n  if (config.endUserId) params.set('endUserId', config.endUserId);\n  if (config.exportFormats) params.set('formats', config.exportFormats.join(','));\n\n  // White-label settings\n  if (config.whiteLabel) {\n    if (config.whiteLabel.logo) params.set('logo', config.whiteLabel.logo);\n    if (config.whiteLabel.primaryColor) params.set('primaryColor', config.whiteLabel.primaryColor);\n    if (config.whiteLabel.companyName) params.set('companyName', config.whiteLabel.companyName);\n    if (config.whiteLabel.hideBranding) params.set('hideBranding', 'true');\n  }\n\n  return `${baseUrl}/editor?${params.toString()}`;\n}\n\n/**\n * Create an ImageCanvasKit editor instance\n *\n * @example\n * ```js\n * import { createEditor } from '@imagecanvaskit/embed';\n *\n * const editor = createEditor({\n *   container: '#editor-container',\n *   apiKey: 'your-api-key',\n *   width: '100%',\n *   height: '600px',\n *   onExport: (e) => console.log('Exported:', e.data),\n *   onReady: () => console.log('Editor ready!'),\n * });\n *\n * // Later: trigger export\n * editor.export({ format: 'png' });\n *\n * // Cleanup\n * editor.destroy();\n * ```\n */\nexport function createEditor(options: CreateEditorOptions): ImageCanvasKitInstance {\n  const {\n    container,\n    width = '100%',\n    height = '600px',\n    canvasWidth,\n    canvasHeight,\n    onReady,\n    onExport,\n    onSave,\n    onLoad,\n    onError,\n    onResize,\n    onObjectSelected,\n    onObjectDeselected,\n    onCanvasModified,\n    projectData,\n    ...config\n  } = options;\n\n  // Build config with canvas dimensions\n  const editorConfig = {\n    ...config,\n    width: canvasWidth,\n    height: canvasHeight,\n  };\n\n  // Get container element\n  const containerEl =\n    typeof container === 'string' ? document.querySelector<HTMLElement>(container) : container;\n\n  if (!containerEl) {\n    throw new Error(`ImageCanvasKit: Container element not found: ${container}`);\n  }\n\n  // Create iframe\n  const iframe = document.createElement('iframe');\n  iframe.src = buildEditorUrl(editorConfig);\n  iframe.style.border = 'none';\n  iframe.style.display = 'block';\n  iframe.style.width = typeof width === 'number' ? `${width}px` : width;\n  iframe.style.height = typeof height === 'number' ? `${height}px` : height;\n  iframe.allow = 'clipboard-read; clipboard-write';\n  iframe.title = 'ImageCanvasKit Editor';\n\n  // Track ready state (for future use)\n  let _isReady = false;\n\n  // Send command to iframe\n  const sendCommand = (payload: CommandPayload) => {\n    if (iframe.contentWindow) {\n      iframe.contentWindow.postMessage({ source: 'imagecanvaskit-embed', ...payload }, '*');\n    }\n  };\n\n  // Handle incoming messages\n  const handleMessage = (event: MessageEvent) => {\n    // Verify origin in production\n    if (config.baseUrl && !event.origin.includes(new URL(config.baseUrl).hostname)) {\n      return;\n    }\n\n    const data = event.data as ImageCanvasKitEvent;\n    if (!data || typeof data !== 'object' || !data.type) return;\n\n    switch (data.type) {\n      case 'ready':\n        _isReady = true;\n        onReady?.(data as ImageCanvasKitEvent<ReadyEventData>);\n        // Load project data if provided\n        if (projectData) {\n          sendCommand({ command: 'load', projectData });\n        }\n        break;\n      case 'export':\n        onExport?.(data as ImageCanvasKitEvent<ExportEventData>);\n        break;\n      case 'save':\n        onSave?.(data as ImageCanvasKitEvent<SaveEventData>);\n        break;\n      case 'load':\n        onLoad?.(data as ImageCanvasKitEvent<LoadEventData>);\n        break;\n      case 'error':\n        onError?.(data as ImageCanvasKitEvent<ErrorEventData>);\n        break;\n      case 'resize':\n        onResize?.(data as ImageCanvasKitEvent<ResizeEventData>);\n        break;\n      case 'objectSelected':\n        onObjectSelected?.(data as ImageCanvasKitEvent<ObjectSelectedEventData>);\n        break;\n      case 'objectDeselected':\n        onObjectDeselected?.(data as ImageCanvasKitEvent<void>);\n        break;\n      case 'canvasModified':\n        onCanvasModified?.(data as ImageCanvasKitEvent<CanvasModifiedEventData>);\n        break;\n    }\n  };\n\n  window.addEventListener('message', handleMessage);\n\n  // Append iframe to container\n  containerEl.appendChild(iframe);\n\n  // Return instance API\n  const instance: ImageCanvasKitInstance = {\n    sendCommand,\n    export: (opts) => sendCommand({ command: 'export', ...opts }),\n    save: () => sendCommand({ command: 'save' }),\n    load: (opts) => sendCommand({ command: 'load', ...opts }),\n    clear: () => sendCommand({ command: 'clear' }),\n    undo: () => sendCommand({ command: 'undo' }),\n    redo: () => sendCommand({ command: 'redo' }),\n    addText: (opts) => sendCommand({ command: 'addText', ...opts }),\n    addImage: (opts) => sendCommand({ command: 'addImage', ...opts }),\n    addShape: (opts) => sendCommand({ command: 'addShape', ...opts }),\n    setBackground: (opts) => sendCommand({ command: 'setBackground', ...opts }),\n    resize: (w, h) => sendCommand({ command: 'resize', width: w, height: h }),\n    destroy: () => {\n      window.removeEventListener('message', handleMessage);\n      iframe.remove();\n    },\n  };\n\n  return instance;\n}\n\n/**\n * Helper to convert base64 image data to Blob\n */\nexport function base64ToBlob(base64: string, mimeType: string): Blob {\n  const byteCharacters = atob(base64.split(',')[1] || base64);\n  const byteNumbers = new Array(byteCharacters.length);\n  for (let i = 0; i < byteCharacters.length; i++) {\n    byteNumbers[i] = byteCharacters.charCodeAt(i);\n  }\n  const byteArray = new Uint8Array(byteNumbers);\n  return new Blob([byteArray], { type: mimeType });\n}\n\n/**\n * Helper to download exported image\n */\nexport function downloadImage(imageData: string, filename: string, mimeType: string): void {\n  const blob = base64ToBlob(imageData, mimeType);\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url);\n}\n\n"]}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@imagecanvaskit/embed",
+  "version": "1.0.0",
+  "description": "Embed the ImageCanvasKit image editor in your application",
+  "keywords": [
+    "image-editor",
+    "canvas",
+    "design",
+    "embed",
+    "iframe",
+    "react",
+    "typescript",
+    "white-label",
+    "saas"
+  ],
+  "homepage": "https://imagecanvaskit.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imagecanvaskit/embed.git"
+  },
+  "license": "MIT",
+  "author": "ImageCanvasKit <support@imagecanvaskit.com>",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./vanilla": {
+      "types": "./dist/vanilla.d.ts",
+      "import": "./dist/vanilla.js",
+      "require": "./dist/vanilla.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}