@imagecanvaskit/embed 1.0.0

package/dist/react.js

@@ -0,0 +1,184 @@
+import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+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 = 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 = useRef(null);
+    const config = {
+      apiKey,
+      baseUrl,
+      width,
+      height,
+      backgroundColor,
+      theme,
+      hideToolbar,
+      hideSidebar,
+      hideExport,
+      templateId,
+      endUserId,
+      exportFormats,
+      whiteLabel
+    };
+    const editorUrl = buildEditorUrl(config);
+    const sendCommand = useCallback((payload) => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          { source: "imagecanvaskit-embed", ...payload },
+          "*"
+        );
+      }
+    }, []);
+    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
+    ]);
+    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__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: editorUrl,
+        width: iframeWidth,
+        height: iframeHeight,
+        style: {
+          border: "none",
+          display: "block"
+        },
+        allow: "clipboard-read; clipboard-write",
+        title: "ImageCanvasKit Editor"
+      }
+    ) });
+  }
+);
+
+export { ImageCanvasKit };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.tsx"],"names":["ImageCanvasKit"],"mappings":";;;AAyBA,IAAM,gBAAA,GAAmB,4BAAA;AAKzB,SAAS,eAAe,MAAA,EAAsC;AAC5D,EAAA,MAAM,OAAA,GAAU,OAAO,OAAA,IAAW,gBAAA;AAClC,EAAA,MAAM,MAAA,GAAS,IAAI,eAAA,EAAgB;AAEnC,EAAA,MAAA,CAAO,GAAA,CAAI,SAAS,MAAM,CAAA;AAE1B,EAAA,IAAI,OAAO,MAAA,EAAQ,MAAA,CAAO,GAAA,CAAI,QAAA,EAAU,OAAO,MAAM,CAAA;AACrD,EAAA,IAAI,MAAA,CAAO,OAAO,MAAA,CAAO,GAAA,CAAI,SAAS,MAAA,CAAO,MAAA,CAAO,KAAK,CAAC,CAAA;AAC1D,EAAA,IAAI,MAAA,CAAO,QAAQ,MAAA,CAAO,GAAA,CAAI,UAAU,MAAA,CAAO,MAAA,CAAO,MAAM,CAAC,CAAA;AAC7D,EAAA,IAAI,OAAO,eAAA,EAAiB,MAAA,CAAO,GAAA,CAAI,IAAA,EAAM,OAAO,eAAe,CAAA;AACnE,EAAA,IAAI,OAAO,KAAA,EAAO,MAAA,CAAO,GAAA,CAAI,OAAA,EAAS,OAAO,KAAK,CAAA;AAClD,EAAA,IAAI,MAAA,CAAO,WAAA,EAAa,MAAA,CAAO,GAAA,CAAI,eAAe,MAAM,CAAA;AACxD,EAAA,IAAI,MAAA,CAAO,WAAA,EAAa,MAAA,CAAO,GAAA,CAAI,eAAe,MAAM,CAAA;AACxD,EAAA,IAAI,MAAA,CAAO,UAAA,EAAY,MAAA,CAAO,GAAA,CAAI,cAAc,MAAM,CAAA;AACtD,EAAA,IAAI,OAAO,UAAA,EAAY,MAAA,CAAO,GAAA,CAAI,YAAA,EAAc,OAAO,UAAU,CAAA;AACjE,EAAA,IAAI,OAAO,SAAA,EAAW,MAAA,CAAO,GAAA,CAAI,WAAA,EAAa,OAAO,SAAS,CAAA;AAC9D,EAAA,IAAI,MAAA,CAAO,eAAe,MAAA,CAAO,GAAA,CAAI,WAAW,MAAA,CAAO,aAAA,CAAc,IAAA,CAAK,GAAG,CAAC,CAAA;AAG9E,EAAA,IAAI,OAAO,UAAA,EAAY;AACrB,IAAA,IAAI,MAAA,CAAO,WAAW,IAAA,EAAM,MAAA,CAAO,IAAI,MAAA,EAAQ,MAAA,CAAO,WAAW,IAAI,CAAA;AACrE,IAAA,IAAI,MAAA,CAAO,WAAW,YAAA,EAAc,MAAA,CAAO,IAAI,cAAA,EAAgB,MAAA,CAAO,WAAW,YAAY,CAAA;AAC7F,IAAA,IAAI,MAAA,CAAO,WAAW,WAAA,EAAa,MAAA,CAAO,IAAI,aAAA,EAAe,MAAA,CAAO,WAAW,WAAW,CAAA;AAC1F,IAAA,IAAI,OAAO,UAAA,CAAW,YAAA,EAAc,MAAA,CAAO,GAAA,CAAI,gBAAgB,MAAM,CAAA;AAAA,EACvE;AAEA,EAAA,OAAO,CAAA,EAAG,OAAO,CAAA,QAAA,EAAW,MAAA,CAAO,UAAU,CAAA,CAAA;AAC/C;AA2BO,IAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA;AAAA,MAEJ,MAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA;AAAA,MAEA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA;AAAA;AAAA,MAEA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,GAAc,MAAA;AAAA,MACd,YAAA,GAAe;AAAA,KACjB,GAAI,KAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,OAA0B,IAAI,CAAA;AAGhD,IAAA,MAAM,MAAA,GAA+B;AAAA,MACnC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MAEA,SAAA;AAAA,MACA,aAAA;AAAA,MAEA;AAAA,KACF;AAEA,IAAA,MAAM,SAAA,GAAY,eAAe,MAAM,CAAA;AAGvC,IAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,OAAA,KAA4B;AAC3D,MAAA,IAAI,SAAA,CAAU,SAAS,aAAA,EAAe;AACpC,QAAA,SAAA,CAAU,QAAQ,aAAA,CAAc,WAAA;AAAA,UAC9B,EAAE,MAAA,EAAQ,sBAAA,EAAwB,GAAG,OAAA,EAAQ;AAAA,UAC7C;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAGL,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAwB;AAE7C,QAAA,IAAI,OAAA,IAAW,CAAC,KAAA,CAAM,MAAA,CAAO,QAAA,CAAS,IAAI,GAAA,CAAI,OAAO,CAAA,CAAE,QAAQ,CAAA,EAAG;AAChE,UAAA;AAAA,QACF;AAEA,QAAA,MAAM,OAAO,KAAA,CAAM,IAAA;AACnB,QAAA,IAAI,CAAC,IAAA,IAAQ,OAAO,SAAS,QAAA,IAAY,CAAC,KAAK,IAAA,EAAM;AAErD,QAAA,QAAQ,KAAK,IAAA;AAAM,UACjB,KAAK,OAAA;AACH,YAAA,OAAA,GAAU,IAA2C,CAAA;AAErD,YAAA,IAAI,WAAA,EAAa;AACf,cAAA,WAAA,CAAY,EAAE,OAAA,EAAS,MAAA,EAAQ,WAAA,EAAa,CAAA;AAAA,YAC9C;AACA,YAAA;AAAA,UACF,KAAK,QAAA;AACH,YAAA,QAAA,GAAW,IAA4C,CAAA;AACvD,YAAA;AAAA,UACF,KAAK,MAAA;AACH,YAAA,MAAA,GAAS,IAA0C,CAAA;AACnD,YAAA;AAAA,UACF,KAAK,MAAA;AACH,YAAA,MAAA,GAAS,IAA0C,CAAA;AACnD,YAAA;AAAA,UACF,KAAK,OAAA;AACH,YAAA,OAAA,GAAU,IAA2C,CAAA;AACrD,YAAA;AAAA,UACF,KAAK,QAAA;AACH,YAAA,QAAA,GAAW,IAA4C,CAAA;AACvD,YAAA;AAAA,UACF,KAAK,gBAAA;AACH,YAAA,gBAAA,GAAmB,IAAoD,CAAA;AACvE,YAAA;AAAA,UACF,KAAK,kBAAA;AACH,YAAA,kBAAA,GAAqB,IAAiC,CAAA;AACtD,YAAA;AAAA,UACF,KAAK,gBAAA;AACH,YAAA,gBAAA,GAAmB,IAAoD,CAAA;AACvE,YAAA;AAAA;AACJ,MACF,CAAA;AAEA,MAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAChD,MAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAAA,IAClE,CAAA,EAAG;AAAA,MACD,OAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAGD,IAAA,mBAAA;AAAA,MACE,GAAA;AAAA,MACA,OAAO;AAAA,QACL,WAAA;AAAA,QACA,MAAA,EAAQ,CAAC,OAAA,KAAY,WAAA,CAAY,EAAE,OAAA,EAAS,QAAA,EAAU,GAAG,OAAA,EAAS,CAAA;AAAA,QAClE,MAAM,MAAM,WAAA,CAAY,EAAE,OAAA,EAAS,QAAQ,CAAA;AAAA,QAC3C,IAAA,EAAM,CAAC,OAAA,KAAY,WAAA,CAAY,EAAE,OAAA,EAAS,MAAA,EAAQ,GAAG,OAAA,EAAS,CAAA;AAAA,QAC9D,OAAO,MAAM,WAAA,CAAY,EAAE,OAAA,EAAS,SAAS,CAAA;AAAA,QAC7C,MAAM,MAAM,WAAA,CAAY,EAAE,OAAA,EAAS,QAAQ,CAAA;AAAA,QAC3C,MAAM,MAAM,WAAA,CAAY,EAAE,OAAA,EAAS,QAAQ,CAAA;AAAA,QAC3C,OAAA,EAAS,CAAC,OAAA,KAAY,WAAA,CAAY,EAAE,OAAA,EAAS,SAAA,EAAW,GAAG,OAAA,EAAS,CAAA;AAAA,QACpE,QAAA,EAAU,CAAC,OAAA,KAAY,WAAA,CAAY,EAAE,OAAA,EAAS,UAAA,EAAY,GAAG,OAAA,EAAS,CAAA;AAAA,QACtE,QAAA,EAAU,CAAC,OAAA,KAAY,WAAA,CAAY,EAAE,OAAA,EAAS,UAAA,EAAY,GAAG,OAAA,EAAS,CAAA;AAAA,QACtE,aAAA,EAAe,CAAC,OAAA,KAAY,WAAA,CAAY,EAAE,OAAA,EAAS,eAAA,EAAiB,GAAG,OAAA,EAAS,CAAA;AAAA,QAChF,MAAA,EAAQ,CAAC,CAAA,EAAG,CAAA,KAAM,WAAA,CAAY,EAAE,OAAA,EAAS,QAAA,EAAU,KAAA,EAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,CAAA;AAAA,QACxE,SAAS,MAAM;AAAA,QAEf;AAAA,OACF,CAAA;AAAA,MACA,CAAC,WAAW;AAAA,KACd;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,GAAA,EAAK,SAAA;AAAA,QACL,KAAA,EAAO,WAAA;AAAA,QACP,MAAA,EAAQ,YAAA;AAAA,QACR,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,MAAA;AAAA,UACR,OAAA,EAAS;AAAA,SACX;AAAA,QACA,KAAA,EAAM,iCAAA;AAAA,QACN,KAAA,EAAM;AAAA;AAAA,KACR,EACF,CAAA;AAAA,EAEJ;AACF","file":"react.js","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"]}

package/dist/types-C7ZIsAaA.d.cts

@@ -0,0 +1,215 @@
+/**
+ * ImageCanvasKit Embed Types
+ * TypeScript definitions for the ImageCanvasKit editor
+ */
+interface ImageCanvasKitConfig {
+    /** Your API key from the dashboard */
+    apiKey: string;
+    /** Base URL of the editor (defaults to https://imagecanvaskit.com) */
+    baseUrl?: string;
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Background color (hex) or 'transparent' */
+    backgroundColor?: string;
+    /** Theme: 'light', 'dark', or 'system' */
+    theme?: 'light' | 'dark' | 'system';
+    /** Hide the toolbar */
+    hideToolbar?: boolean;
+    /** Hide the sidebar */
+    hideSidebar?: boolean;
+    /** Hide export button */
+    hideExport?: boolean;
+    /** Template ID to load */
+    templateId?: string;
+    /** Project JSON to load */
+    projectData?: string;
+    /** End user ID for multi-tenant tracking */
+    endUserId?: string;
+    /** Allowed export formats */
+    exportFormats?: ('png' | 'jpeg' | 'webp' | 'pdf')[];
+    /** Custom fonts to load */
+    fonts?: CustomFont[];
+    /** White-label settings */
+    whiteLabel?: WhiteLabelConfig;
+}
+interface CustomFont {
+    name: string;
+    url: string;
+    weight?: number;
+    style?: 'normal' | 'italic';
+}
+interface WhiteLabelConfig {
+    /** Your logo URL */
+    logo?: string;
+    /** Primary brand color (hex) */
+    primaryColor?: string;
+    /** Company name */
+    companyName?: string;
+    /** Hide "Powered by ImageCanvasKit" */
+    hideBranding?: boolean;
+}
+type ImageCanvasKitEventType = 'ready' | 'export' | 'save' | 'load' | 'error' | 'resize' | 'objectSelected' | 'objectDeselected' | 'canvasModified';
+interface ImageCanvasKitEvent<T = unknown> {
+    type: ImageCanvasKitEventType;
+    data: T;
+    timestamp: number;
+}
+interface ReadyEventData {
+    version: string;
+    canvasWidth: number;
+    canvasHeight: number;
+}
+interface ExportEventData {
+    /** Base64 encoded image data */
+    imageData: string;
+    /** Image format */
+    format: 'png' | 'jpeg' | 'webp' | 'pdf';
+    /** Image width */
+    width: number;
+    /** Image height */
+    height: number;
+    /** File size in bytes */
+    size: number;
+    /** Blob URL (if available) */
+    blobUrl?: string;
+}
+interface SaveEventData {
+    /** Project JSON data */
+    projectData: string;
+    /** Project ID */
+    projectId?: string;
+    /** Thumbnail preview (base64) */
+    thumbnail?: string;
+}
+interface LoadEventData {
+    success: boolean;
+    projectId?: string;
+    templateId?: string;
+}
+interface ErrorEventData {
+    code: string;
+    message: string;
+    details?: unknown;
+}
+interface ResizeEventData {
+    width: number;
+    height: number;
+    previousWidth: number;
+    previousHeight: number;
+}
+interface ObjectSelectedEventData {
+    objectId: string;
+    objectType: 'text' | 'image' | 'shape' | 'group';
+    properties: Record<string, unknown>;
+}
+interface CanvasModifiedEventData {
+    action: 'add' | 'remove' | 'modify' | 'reorder';
+    objectId?: string;
+    objectType?: string;
+}
+type ImageCanvasKitCommand = 'export' | 'save' | 'load' | 'clear' | 'undo' | 'redo' | 'addText' | 'addImage' | 'addShape' | 'setBackground' | 'resize';
+interface ExportCommand {
+    command: 'export';
+    format?: 'png' | 'jpeg' | 'webp' | 'pdf';
+    quality?: number;
+    scale?: number;
+}
+interface LoadCommand {
+    command: 'load';
+    projectData?: string;
+    templateId?: string;
+}
+interface AddTextCommand {
+    command: 'addText';
+    text: string;
+    fontSize?: number;
+    fontFamily?: string;
+    color?: string;
+    x?: number;
+    y?: number;
+}
+interface AddImageCommand {
+    command: 'addImage';
+    url: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+interface AddShapeCommand {
+    command: 'addShape';
+    shape: 'rectangle' | 'circle' | 'triangle' | 'star' | 'arrow';
+    fill?: string;
+    stroke?: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+interface SetBackgroundCommand {
+    command: 'setBackground';
+    color?: string;
+    imageUrl?: string;
+}
+interface ResizeCommand {
+    command: 'resize';
+    width: number;
+    height: number;
+}
+type CommandPayload = ExportCommand | LoadCommand | AddTextCommand | AddImageCommand | AddShapeCommand | SetBackgroundCommand | ResizeCommand | {
+    command: 'save' | 'clear' | 'undo' | 'redo';
+};
+type EventCallback<T = unknown> = (event: ImageCanvasKitEvent<T>) => void;
+interface EventCallbacks {
+    onReady?: EventCallback<ReadyEventData>;
+    onExport?: EventCallback<ExportEventData>;
+    onSave?: EventCallback<SaveEventData>;
+    onLoad?: EventCallback<LoadEventData>;
+    onError?: EventCallback<ErrorEventData>;
+    onResize?: EventCallback<ResizeEventData>;
+    onObjectSelected?: EventCallback<ObjectSelectedEventData>;
+    onObjectDeselected?: EventCallback<void>;
+    onCanvasModified?: EventCallback<CanvasModifiedEventData>;
+}
+interface ImageCanvasKitProps extends ImageCanvasKitConfig, EventCallbacks {
+    /** CSS class name for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+    /** iframe width (CSS value) */
+    iframeWidth?: string | number;
+    /** iframe height (CSS value) */
+    iframeHeight?: string | number;
+}
+interface ImageCanvasKitInstance {
+    /** Send a command to the editor */
+    sendCommand: (payload: CommandPayload) => void;
+    /** Export the current design */
+    export: (options?: Omit<ExportCommand, 'command'>) => void;
+    /** Save the current project */
+    save: () => void;
+    /** Load a project or template */
+    load: (options: Omit<LoadCommand, 'command'>) => void;
+    /** Clear the canvas */
+    clear: () => void;
+    /** Undo last action */
+    undo: () => void;
+    /** Redo last undone action */
+    redo: () => void;
+    /** Add text to canvas */
+    addText: (options: Omit<AddTextCommand, 'command'>) => void;
+    /** Add image to canvas */
+    addImage: (options: Omit<AddImageCommand, 'command'>) => void;
+    /** Add shape to canvas */
+    addShape: (options: Omit<AddShapeCommand, 'command'>) => void;
+    /** Set background color or image */
+    setBackground: (options: Omit<SetBackgroundCommand, 'command'>) => void;
+    /** Resize the canvas */
+    resize: (width: number, height: number) => void;
+    /** Destroy the instance and clean up */
+    destroy: () => void;
+}
+
+export type { AddImageCommand as A, CanvasModifiedEventData as C, ErrorEventData as E, ImageCanvasKitCommand as I, LoadCommand as L, ObjectSelectedEventData as O, ReadyEventData as R, SaveEventData as S, WhiteLabelConfig as W, AddShapeCommand as a, AddTextCommand as b, CommandPayload as c, CustomFont as d, EventCallback as e, EventCallbacks as f, ExportCommand as g, ExportEventData as h, ImageCanvasKitConfig as i, ImageCanvasKitEvent as j, ImageCanvasKitEventType as k, ImageCanvasKitInstance as l, ImageCanvasKitProps as m, LoadEventData as n, ResizeCommand as o, ResizeEventData as p, SetBackgroundCommand as q };

package/dist/types-C7ZIsAaA.d.ts

@@ -0,0 +1,215 @@
+/**
+ * ImageCanvasKit Embed Types
+ * TypeScript definitions for the ImageCanvasKit editor
+ */
+interface ImageCanvasKitConfig {
+    /** Your API key from the dashboard */
+    apiKey: string;
+    /** Base URL of the editor (defaults to https://imagecanvaskit.com) */
+    baseUrl?: string;
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Background color (hex) or 'transparent' */
+    backgroundColor?: string;
+    /** Theme: 'light', 'dark', or 'system' */
+    theme?: 'light' | 'dark' | 'system';
+    /** Hide the toolbar */
+    hideToolbar?: boolean;
+    /** Hide the sidebar */
+    hideSidebar?: boolean;
+    /** Hide export button */
+    hideExport?: boolean;
+    /** Template ID to load */
+    templateId?: string;
+    /** Project JSON to load */
+    projectData?: string;
+    /** End user ID for multi-tenant tracking */
+    endUserId?: string;
+    /** Allowed export formats */
+    exportFormats?: ('png' | 'jpeg' | 'webp' | 'pdf')[];
+    /** Custom fonts to load */
+    fonts?: CustomFont[];
+    /** White-label settings */
+    whiteLabel?: WhiteLabelConfig;
+}
+interface CustomFont {
+    name: string;
+    url: string;
+    weight?: number;
+    style?: 'normal' | 'italic';
+}
+interface WhiteLabelConfig {
+    /** Your logo URL */
+    logo?: string;
+    /** Primary brand color (hex) */
+    primaryColor?: string;
+    /** Company name */
+    companyName?: string;
+    /** Hide "Powered by ImageCanvasKit" */
+    hideBranding?: boolean;
+}
+type ImageCanvasKitEventType = 'ready' | 'export' | 'save' | 'load' | 'error' | 'resize' | 'objectSelected' | 'objectDeselected' | 'canvasModified';
+interface ImageCanvasKitEvent<T = unknown> {
+    type: ImageCanvasKitEventType;
+    data: T;
+    timestamp: number;
+}
+interface ReadyEventData {
+    version: string;
+    canvasWidth: number;
+    canvasHeight: number;
+}
+interface ExportEventData {
+    /** Base64 encoded image data */
+    imageData: string;
+    /** Image format */
+    format: 'png' | 'jpeg' | 'webp' | 'pdf';
+    /** Image width */
+    width: number;
+    /** Image height */
+    height: number;
+    /** File size in bytes */
+    size: number;
+    /** Blob URL (if available) */
+    blobUrl?: string;
+}
+interface SaveEventData {
+    /** Project JSON data */
+    projectData: string;
+    /** Project ID */
+    projectId?: string;
+    /** Thumbnail preview (base64) */
+    thumbnail?: string;
+}
+interface LoadEventData {
+    success: boolean;
+    projectId?: string;
+    templateId?: string;
+}
+interface ErrorEventData {
+    code: string;
+    message: string;
+    details?: unknown;
+}
+interface ResizeEventData {
+    width: number;
+    height: number;
+    previousWidth: number;
+    previousHeight: number;
+}
+interface ObjectSelectedEventData {
+    objectId: string;
+    objectType: 'text' | 'image' | 'shape' | 'group';
+    properties: Record<string, unknown>;
+}
+interface CanvasModifiedEventData {
+    action: 'add' | 'remove' | 'modify' | 'reorder';
+    objectId?: string;
+    objectType?: string;
+}
+type ImageCanvasKitCommand = 'export' | 'save' | 'load' | 'clear' | 'undo' | 'redo' | 'addText' | 'addImage' | 'addShape' | 'setBackground' | 'resize';
+interface ExportCommand {
+    command: 'export';
+    format?: 'png' | 'jpeg' | 'webp' | 'pdf';
+    quality?: number;
+    scale?: number;
+}
+interface LoadCommand {
+    command: 'load';
+    projectData?: string;
+    templateId?: string;
+}
+interface AddTextCommand {
+    command: 'addText';
+    text: string;
+    fontSize?: number;
+    fontFamily?: string;
+    color?: string;
+    x?: number;
+    y?: number;
+}
+interface AddImageCommand {
+    command: 'addImage';
+    url: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+interface AddShapeCommand {
+    command: 'addShape';
+    shape: 'rectangle' | 'circle' | 'triangle' | 'star' | 'arrow';
+    fill?: string;
+    stroke?: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+interface SetBackgroundCommand {
+    command: 'setBackground';
+    color?: string;
+    imageUrl?: string;
+}
+interface ResizeCommand {
+    command: 'resize';
+    width: number;
+    height: number;
+}
+type CommandPayload = ExportCommand | LoadCommand | AddTextCommand | AddImageCommand | AddShapeCommand | SetBackgroundCommand | ResizeCommand | {
+    command: 'save' | 'clear' | 'undo' | 'redo';
+};
+type EventCallback<T = unknown> = (event: ImageCanvasKitEvent<T>) => void;
+interface EventCallbacks {
+    onReady?: EventCallback<ReadyEventData>;
+    onExport?: EventCallback<ExportEventData>;
+    onSave?: EventCallback<SaveEventData>;
+    onLoad?: EventCallback<LoadEventData>;
+    onError?: EventCallback<ErrorEventData>;
+    onResize?: EventCallback<ResizeEventData>;
+    onObjectSelected?: EventCallback<ObjectSelectedEventData>;
+    onObjectDeselected?: EventCallback<void>;
+    onCanvasModified?: EventCallback<CanvasModifiedEventData>;
+}
+interface ImageCanvasKitProps extends ImageCanvasKitConfig, EventCallbacks {
+    /** CSS class name for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+    /** iframe width (CSS value) */
+    iframeWidth?: string | number;
+    /** iframe height (CSS value) */
+    iframeHeight?: string | number;
+}
+interface ImageCanvasKitInstance {
+    /** Send a command to the editor */
+    sendCommand: (payload: CommandPayload) => void;
+    /** Export the current design */
+    export: (options?: Omit<ExportCommand, 'command'>) => void;
+    /** Save the current project */
+    save: () => void;
+    /** Load a project or template */
+    load: (options: Omit<LoadCommand, 'command'>) => void;
+    /** Clear the canvas */
+    clear: () => void;
+    /** Undo last action */
+    undo: () => void;
+    /** Redo last undone action */
+    redo: () => void;
+    /** Add text to canvas */
+    addText: (options: Omit<AddTextCommand, 'command'>) => void;
+    /** Add image to canvas */
+    addImage: (options: Omit<AddImageCommand, 'command'>) => void;
+    /** Add shape to canvas */
+    addShape: (options: Omit<AddShapeCommand, 'command'>) => void;
+    /** Set background color or image */
+    setBackground: (options: Omit<SetBackgroundCommand, 'command'>) => void;
+    /** Resize the canvas */
+    resize: (width: number, height: number) => void;
+    /** Destroy the instance and clean up */
+    destroy: () => void;
+}
+
+export type { AddImageCommand as A, CanvasModifiedEventData as C, ErrorEventData as E, ImageCanvasKitCommand as I, LoadCommand as L, ObjectSelectedEventData as O, ReadyEventData as R, SaveEventData as S, WhiteLabelConfig as W, AddShapeCommand as a, AddTextCommand as b, CommandPayload as c, CustomFont as d, EventCallback as e, EventCallbacks as f, ExportCommand as g, ExportEventData as h, ImageCanvasKitConfig as i, ImageCanvasKitEvent as j, ImageCanvasKitEventType as k, ImageCanvasKitInstance as l, ImageCanvasKitProps as m, LoadEventData as n, ResizeCommand as o, ResizeEventData as p, SetBackgroundCommand as q };