@imagecanvaskit/embed 1.0.0

package/README.md

@@ -0,0 +1,229 @@
+# @imagecanvaskit/embed
+
+Embed the ImageCanvasKit image editor in your application with ease.
+
+## Installation
+
+```bash
+# npm
+npm install @imagecanvaskit/embed
+
+# yarn
+yarn add @imagecanvaskit/embed
+
+# pnpm
+pnpm add @imagecanvaskit/embed
+```
+
+## CDN Usage
+
+```html
+<script type="module">
+  import { createEditor } from 'https://unpkg.com/@imagecanvaskit/embed@latest';
+
+  const editor = createEditor({
+    container: '#editor',
+    apiKey: 'your-api-key',
+  });
+</script>
+```
+
+## React Usage
+
+```tsx
+import { useRef } from 'react';
+import { ImageCanvasKit, ImageCanvasKitInstance } from '@imagecanvaskit/embed';
+
+function App() {
+  const editorRef = useRef<ImageCanvasKitInstance>(null);
+
+  const handleExport = () => {
+    editorRef.current?.export({ format: 'png' });
+  };
+
+  return (
+    <div>
+      <button onClick={handleExport}>Export</button>
+      <ImageCanvasKit
+        ref={editorRef}
+        apiKey="your-api-key"
+        width={1200}
+        height={800}
+        theme="dark"
+        onExport={(e) => {
+          console.log('Exported image:', e.data);
+          // e.data.imageData contains base64 image
+        }}
+        onReady={() => console.log('Editor is ready!')}
+      />
+    </div>
+  );
+}
+```
+
+### Next.js App Router
+
+```tsx
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const ImageCanvasKit = dynamic(
+  () => import('@imagecanvaskit/embed').then((mod) => mod.ImageCanvasKit),
+  { ssr: false }
+);
+
+export default function EditorPage() {
+  return (
+    <ImageCanvasKit
+      apiKey="your-api-key"
+      onExport={(e) => console.log(e.data)}
+    />
+  );
+}
+```
+
+## Vanilla JavaScript
+
+```js
+import { createEditor, downloadImage } from '@imagecanvaskit/embed';
+
+const editor = createEditor({
+  container: '#editor-container',
+  apiKey: 'your-api-key',
+  width: '100%',
+  height: '600px',
+  theme: 'light',
+  onExport: (e) => {
+    // Download the image
+    downloadImage(e.data.imageData, 'design.png', 'image/png');
+  },
+  onReady: () => {
+    console.log('Editor ready!');
+  },
+});
+
+// Programmatic control
+document.getElementById('export-btn').addEventListener('click', () => {
+  editor.export({ format: 'png', quality: 0.9 });
+});
+
+// Add text programmatically
+editor.addText({
+  text: 'Hello World',
+  fontSize: 48,
+  color: '#000000',
+});
+
+// Cleanup when done
+editor.destroy();
+```
+
+## Vue.js
+
+```vue
+<template>
+  <div ref="editorContainer"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { createEditor } from '@imagecanvaskit/embed';
+
+const editorContainer = ref(null);
+let editor = null;
+
+onMounted(() => {
+  editor = createEditor({
+    container: editorContainer.value,
+    apiKey: 'your-api-key',
+    onExport: (e) => console.log(e.data),
+  });
+});
+
+onUnmounted(() => {
+  editor?.destroy();
+});
+</script>
+```
+
+## Configuration Options
+
+| Option           | Type                          | Description                              |
+| ---------------- | ----------------------------- | ---------------------------------------- |
+| `apiKey`         | `string`                      | Your API key from the dashboard          |
+| `baseUrl`        | `string`                      | Custom editor URL (for self-hosted)      |
+| `width`          | `number`                      | Canvas width in pixels                   |
+| `height`         | `number`                      | Canvas height in pixels                  |
+| `backgroundColor`| `string`                      | Background color (hex) or 'transparent'  |
+| `theme`          | `'light' \| 'dark' \| 'system'` | Editor theme                           |
+| `hideToolbar`    | `boolean`                     | Hide the toolbar                         |
+| `hideSidebar`    | `boolean`                     | Hide the sidebar                         |
+| `hideExport`     | `boolean`                     | Hide export button                       |
+| `templateId`     | `string`                      | Template ID to load                      |
+| `projectData`    | `string`                      | Project JSON to load                     |
+| `endUserId`      | `string`                      | End user ID for multi-tenant tracking    |
+| `exportFormats`  | `string[]`                    | Allowed export formats                   |
+| `whiteLabel`     | `object`                      | White-label configuration                |
+
+## Event Callbacks
+
+| Callback           | Data                          | Description                              |
+| ------------------ | ----------------------------- | ---------------------------------------- |
+| `onReady`          | `{ version, canvasWidth, canvasHeight }` | Editor is loaded and ready     |
+| `onExport`         | `{ imageData, format, width, height }` | Image export completed          |
+| `onSave`           | `{ projectData, projectId }` | Project saved                             |
+| `onLoad`           | `{ success, projectId }`     | Project/template loaded                   |
+| `onError`          | `{ code, message }`          | Error occurred                            |
+| `onObjectSelected` | `{ objectId, objectType }`   | Object selected on canvas                 |
+| `onCanvasModified` | `{ action, objectId }`       | Canvas was modified                       |
+
+## Instance Methods
+
+```ts
+interface ImageCanvasKitInstance {
+  export(options?: { format?: string; quality?: number }): void;
+  save(): void;
+  load(options: { projectData?: string; templateId?: string }): void;
+  clear(): void;
+  undo(): void;
+  redo(): void;
+  addText(options: { text: string; fontSize?: number; color?: string }): void;
+  addImage(options: { url: string; width?: number; height?: number }): void;
+  addShape(options: { shape: string; fill?: string }): void;
+  setBackground(options: { color?: string; imageUrl?: string }): void;
+  resize(width: number, height: number): void;
+  destroy(): void;
+}
+```
+
+## White-Label Configuration
+
+```tsx
+<ImageCanvasKit
+  apiKey="your-api-key"
+  whiteLabel={{
+    logo: 'https://yoursite.com/logo.png',
+    primaryColor: '#FF5733',
+    companyName: 'Your Company',
+    hideBranding: true,
+  }}
+/>
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```ts
+import type {
+  ImageCanvasKitConfig,
+  ImageCanvasKitInstance,
+  ExportEventData,
+  SaveEventData,
+} from '@imagecanvaskit/embed';
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,338 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react.tsx
+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()}`;
+}
+var ImageCanvasKit = react.forwardRef(
+  function ImageCanvasKit2(props, ref) {
+    const {
+      // Config
+      apiKey,
+      baseUrl,
+      width,
+      height,
+      backgroundColor,
+      theme,
+      hideToolbar,
+      hideSidebar,
+      hideExport,
+      templateId,
+      projectData,
+      endUserId,
+      exportFormats,
+      fonts,
+      whiteLabel,
+      // Callbacks
+      onReady,
+      onExport,
+      onSave,
+      onLoad,
+      onError,
+      onResize,
+      onObjectSelected,
+      onObjectDeselected,
+      onCanvasModified,
+      // Container props
+      className,
+      style,
+      iframeWidth = "100%",
+      iframeHeight = "600px"
+    } = props;
+    const iframeRef = react.useRef(null);
+    const config = {
+      apiKey,
+      baseUrl,
+      width,
+      height,
+      backgroundColor,
+      theme,
+      hideToolbar,
+      hideSidebar,
+      hideExport,
+      templateId,
+      endUserId,
+      exportFormats,
+      whiteLabel
+    };
+    const editorUrl = buildEditorUrl(config);
+    const sendCommand = react.useCallback((payload) => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          { source: "imagecanvaskit-embed", ...payload },
+          "*"
+        );
+      }
+    }, []);
+    react.useEffect(() => {
+      const handleMessage = (event) => {
+        if (baseUrl && !event.origin.includes(new URL(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);
+      return () => window.removeEventListener("message", handleMessage);
+    }, [
+      baseUrl,
+      projectData,
+      onReady,
+      onExport,
+      onSave,
+      onLoad,
+      onError,
+      onResize,
+      onObjectSelected,
+      onObjectDeselected,
+      onCanvasModified,
+      sendCommand
+    ]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        sendCommand,
+        export: (options) => sendCommand({ command: "export", ...options }),
+        save: () => sendCommand({ command: "save" }),
+        load: (options) => sendCommand({ command: "load", ...options }),
+        clear: () => sendCommand({ command: "clear" }),
+        undo: () => sendCommand({ command: "undo" }),
+        redo: () => sendCommand({ command: "redo" }),
+        addText: (options) => sendCommand({ command: "addText", ...options }),
+        addImage: (options) => sendCommand({ command: "addImage", ...options }),
+        addShape: (options) => sendCommand({ command: "addShape", ...options }),
+        setBackground: (options) => sendCommand({ command: "setBackground", ...options }),
+        resize: (w, h) => sendCommand({ command: "resize", width: w, height: h }),
+        destroy: () => {
+        }
+      }),
+      [sendCommand]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: editorUrl,
+        width: iframeWidth,
+        height: iframeHeight,
+        style: {
+          border: "none",
+          display: "block"
+        },
+        allow: "clipboard-read; clipboard-write",
+        title: "ImageCanvasKit Editor"
+      }
+    ) });
+  }
+);
+
+// src/vanilla.ts
+var DEFAULT_BASE_URL2 = "https://imagecanvaskit.com";
+function buildEditorUrl2(config) {
+  const baseUrl = config.baseUrl || DEFAULT_BASE_URL2;
+  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 = buildEditorUrl2(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.ImageCanvasKit = ImageCanvasKit;
+exports.base64ToBlob = base64ToBlob;
+exports.createEditor = createEditor;
+exports.downloadImage = downloadImage;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.tsx","../src/vanilla.ts"],"names":["forwardRef","ImageCanvasKit","useRef","useCallback","useEffect","useImperativeHandle","jsx","DEFAULT_BASE_URL","buildEditorUrl"],"mappings":"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","file":"index.cjs","sourcesContent":["'use client';\n\nimport {\n  useRef,\n  useEffect,\n  useImperativeHandle,\n  forwardRef,\n  useCallback,\n} from 'react';\nimport type {\n  ImageCanvasKitProps,\n  ImageCanvasKitInstance,\n  ImageCanvasKitConfig,\n  CommandPayload,\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\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 * ImageCanvasKit React Component\n *\n * Embeds the ImageCanvasKit editor in your React application.\n *\n * @example\n * ```tsx\n * import { ImageCanvasKit } from '@imagecanvaskit/embed';\n *\n * function App() {\n *   const editorRef = useRef<ImageCanvasKitInstance>(null);\n *\n *   return (\n *     <ImageCanvasKit\n *       ref={editorRef}\n *       apiKey=\"your-api-key\"\n *       width={1200}\n *       height={800}\n *       onExport={(e) => console.log('Exported:', e.data)}\n *       onReady={() => console.log('Editor ready!')}\n *     />\n *   );\n * }\n * ```\n */\nexport const ImageCanvasKit = forwardRef<ImageCanvasKitInstance, ImageCanvasKitProps>(\n  function ImageCanvasKit(props, ref) {\n    const {\n      // Config\n      apiKey,\n      baseUrl,\n      width,\n      height,\n      backgroundColor,\n      theme,\n      hideToolbar,\n      hideSidebar,\n      hideExport,\n      templateId,\n      projectData,\n      endUserId,\n      exportFormats,\n      fonts,\n      whiteLabel,\n      // Callbacks\n      onReady,\n      onExport,\n      onSave,\n      onLoad,\n      onError,\n      onResize,\n      onObjectSelected,\n      onObjectDeselected,\n      onCanvasModified,\n      // Container props\n      className,\n      style,\n      iframeWidth = '100%',\n      iframeHeight = '600px',\n    } = props;\n\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n\n    // Build config object\n    const config: ImageCanvasKitConfig = {\n      apiKey,\n      baseUrl,\n      width,\n      height,\n      backgroundColor,\n      theme,\n      hideToolbar,\n      hideSidebar,\n      hideExport,\n      templateId,\n      projectData,\n      endUserId,\n      exportFormats,\n      fonts,\n      whiteLabel,\n    };\n\n    const editorUrl = buildEditorUrl(config);\n\n    // Send command to iframe\n    const sendCommand = useCallback((payload: CommandPayload) => {\n      if (iframeRef.current?.contentWindow) {\n        iframeRef.current.contentWindow.postMessage(\n          { source: 'imagecanvaskit-embed', ...payload },\n          '*'\n        );\n      }\n    }, []);\n\n    // Handle incoming messages from iframe\n    useEffect(() => {\n      const handleMessage = (event: MessageEvent) => {\n        // Verify origin in production\n        if (baseUrl && !event.origin.includes(new URL(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            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      return () => window.removeEventListener('message', handleMessage);\n    }, [\n      baseUrl,\n      projectData,\n      onReady,\n      onExport,\n      onSave,\n      onLoad,\n      onError,\n      onResize,\n      onObjectSelected,\n      onObjectDeselected,\n      onCanvasModified,\n      sendCommand,\n    ]);\n\n    // Expose instance methods via ref\n    useImperativeHandle(\n      ref,\n      () => ({\n        sendCommand,\n        export: (options) => sendCommand({ command: 'export', ...options }),\n        save: () => sendCommand({ command: 'save' }),\n        load: (options) => sendCommand({ command: 'load', ...options }),\n        clear: () => sendCommand({ command: 'clear' }),\n        undo: () => sendCommand({ command: 'undo' }),\n        redo: () => sendCommand({ command: 'redo' }),\n        addText: (options) => sendCommand({ command: 'addText', ...options }),\n        addImage: (options) => sendCommand({ command: 'addImage', ...options }),\n        addShape: (options) => sendCommand({ command: 'addShape', ...options }),\n        setBackground: (options) => sendCommand({ command: 'setBackground', ...options }),\n        resize: (w, h) => sendCommand({ command: 'resize', width: w, height: h }),\n        destroy: () => {\n          // Cleanup if needed\n        },\n      }),\n      [sendCommand]\n    );\n\n    return (\n      <div className={className} style={style}>\n        <iframe\n          ref={iframeRef}\n          src={editorUrl}\n          width={iframeWidth}\n          height={iframeHeight}\n          style={{\n            border: 'none',\n            display: 'block',\n          }}\n          allow=\"clipboard-read; clipboard-write\"\n          title=\"ImageCanvasKit Editor\"\n        />\n      </div>\n    );\n  }\n);\n\n","/**\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/index.d.cts

@@ -0,0 +1,4 @@
+export { A as AddImageCommand, a as AddShapeCommand, b as AddTextCommand, C as CanvasModifiedEventData, c as CommandPayload, d as CustomFont, E as ErrorEventData, e as EventCallback, f as EventCallbacks, g as ExportCommand, h as ExportEventData, I as ImageCanvasKitCommand, i as ImageCanvasKitConfig, j as ImageCanvasKitEvent, k as ImageCanvasKitEventType, l as ImageCanvasKitInstance, m as ImageCanvasKitProps, L as LoadCommand, n as LoadEventData, O as ObjectSelectedEventData, R as ReadyEventData, o as ResizeCommand, p as ResizeEventData, S as SaveEventData, q as SetBackgroundCommand, W as WhiteLabelConfig } from './types-C7ZIsAaA.cjs';
+export { ImageCanvasKit } from './react.cjs';
+export { base64ToBlob, createEditor, downloadImage } from './vanilla.cjs';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { A as AddImageCommand, a as AddShapeCommand, b as AddTextCommand, C as CanvasModifiedEventData, c as CommandPayload, d as CustomFont, E as ErrorEventData, e as EventCallback, f as EventCallbacks, g as ExportCommand, h as ExportEventData, I as ImageCanvasKitCommand, i as ImageCanvasKitConfig, j as ImageCanvasKitEvent, k as ImageCanvasKitEventType, l as ImageCanvasKitInstance, m as ImageCanvasKitProps, L as LoadCommand, n as LoadEventData, O as ObjectSelectedEventData, R as ReadyEventData, o as ResizeCommand, p as ResizeEventData, S as SaveEventData, q as SetBackgroundCommand, W as WhiteLabelConfig } from './types-C7ZIsAaA.js';
+export { ImageCanvasKit } from './react.js';
+export { base64ToBlob, createEditor, downloadImage } from './vanilla.js';
+import 'react';