@cadit-app/image-extrude 0.1.0 → 0.3.1

package/dist/src/params.js

@@ -1,8 +1,8 @@
 /**
  * Parameter schema for the Image Extrude generator.
  */
-// Default SVG - a simple star shape
-const defaultSvgDataUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDUgNjEsMzkgOTcsMzkgNjgsMjIgNzksOTUgNTAsNzAgMjEsOTUgMzIsNjIgMywzOSAzOSwzOSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=';
+// Default image - CookieCAD logo from GitHub via jsdelivr CDN
+const defaultImageUrl = 'https://cdn.jsdelivr.net/gh/CADit-app/image-extrude@master/images/cookiecad-logo-dark.svg';
 export const imageExtrudeParamsSchema = {
     mode: {
         type: 'choice',
@@ -17,10 +17,10 @@ export const imageExtrudeParamsSchema = {
         type: 'image',
         label: 'Image File',
         default: {
-            imageUrl: '',
-            dataUrl: defaultSvgDataUrl,
+            imageUrl: defaultImageUrl,
+            dataUrl: '',
             fileType: 'image/svg+xml',
-            fileName: 'star.svg'
+            fileName: 'cookiecad-logo-dark.svg'
         },
     },
     height: {

package/dist/src/resvg.d.ts

@@ -1,5 +1,8 @@
 /**
  * SVG to bitmap rendering using resvg-wasm
+ *
+ * Note: When running as a dynamically loaded script in CADit, the WASM module
+ * is loaded from esm.sh CDN since Vite's ?url import syntax isn't available.
  */
 /**
  * Renders an SVG Data URL to a PNG Data URL using resvg-wasm.

package/dist/src/resvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resvg.d.ts","sourceRoot":"","sources":["../../src/resvg.ts"],"names":[],"mappings":"AAAA;;GAEG;AA+BH;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,MAAM,EAClB,UAAU;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC9B,OAAO,CAAC,MAAM,CAuBhB,CAAC"}
+{"version":3,"file":"resvg.d.ts","sourceRoot":"","sources":["../../src/resvg.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAsCH;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,MAAM,EAClB,UAAU;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC9B,OAAO,CAAC,MAAM,CA6BhB,CAAC"}

package/dist/src/resvg.js

@@ -1,26 +1,41 @@
 /**
  * SVG to bitmap rendering using resvg-wasm
+ *
+ * Note: When running as a dynamically loaded script in CADit, the WASM module
+ * is loaded from esm.sh CDN since Vite's ?url import syntax isn't available.
  */
 import * as resvg from '@resvg/resvg-wasm';
 import { svgDataUrlToString } from './utils';
+// Hardcoded version for WASM URL - update when upgrading @resvg/resvg-wasm dependency
+const RESVG_VERSION = '2.6.2';
 let wasmInitialized = false;
+let wasmInitPromise = null;
 /**
- * Initialize resvg WASM module
- * In CLI context, we need to load from file system
- * In browser context (via bundler), the WASM is loaded differently
+ * Initialize resvg WASM module.
+ * Fetches the WASM binary from esm.sh CDN to work in dynamically loaded scripts.
+ *
+ * Safe to call multiple times - subsequent calls return immediately.
+ * If initialization fails, subsequent calls will retry.
  */
 async function initializeResvgWasm() {
     if (wasmInitialized)
         return;
-    // For CLI usage, load WASM from node_modules
-    const { readFile } = await import('fs/promises');
-    const { resolve, dirname } = await import('path');
-    const { fileURLToPath } = await import('url');
-    // Find the wasm file in node_modules
-    const wasmPath = resolve(dirname(fileURLToPath(import.meta.url)), '../node_modules/@resvg/resvg-wasm/index_bg.wasm');
-    const wasmBuffer = await readFile(wasmPath);
-    await resvg.initWasm(wasmBuffer);
-    wasmInitialized = true;
+    if (wasmInitPromise)
+        return wasmInitPromise;
+    wasmInitPromise = (async () => {
+        try {
+            // Fetch WASM from esm.sh CDN
+            const wasmUrl = `https://esm.sh/@resvg/resvg-wasm@${RESVG_VERSION}/index_bg.wasm`;
+            await resvg.initWasm(fetch(wasmUrl));
+            wasmInitialized = true;
+        }
+        catch (error) {
+            // Reset promise so retry is possible
+            wasmInitPromise = null;
+            throw error;
+        }
+    })();
+    return wasmInitPromise;
 }
 /**
  * Renders an SVG Data URL to a PNG Data URL using resvg-wasm.
@@ -40,8 +55,10 @@ export const renderSvgToBitmapDataUrl = async (svgDataUrl, options) => {
     }
     const resvgInstance = new resvg.Resvg(svgString, opts);
     const pngData = resvgInstance.render();
-    const pngBuffer = pngData.asPng();
-    // Convert to data URL
-    const base64 = Buffer.from(pngBuffer).toString('base64');
-    return `data:image/png;base64,${base64}`;
+    const pngBuffer = pngData.asPng(); // Uint8Array
+    // Convert Uint8Array to proper ArrayBuffer for Blob
+    const arrayBuffer = pngBuffer.buffer.slice(pngBuffer.byteOffset, pngBuffer.byteOffset + pngBuffer.byteLength);
+    // Return blob URL (browser-compatible and more efficient)
+    const blob = new Blob([arrayBuffer], { type: 'image/png' });
+    return URL.createObjectURL(blob);
 };

package/dist/src/tracing.d.ts

@@ -1,5 +1,8 @@
 /**
  * Image tracing and SVG sampling utilities
+ *
+ * Uses potrace for bitmap tracing. When running in CADit, potrace is exposed
+ * as an importable library by the code.worker, which handles the jimp dependency.
  */
 import { CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
 /**
@@ -16,6 +19,7 @@ export declare const svgStringToCrossSection: (svgContent: string, maxWidth?: nu
 export declare const sampleSvg: (svgDataUrl: string, maxWidth?: number) => Promise<CrossSection>;
 /**
  * Traces a bitmap image and returns a centered CrossSection
+ * Uses potrace with jimp for image loading (works in web workers).
  */
 export declare const traceImage: (imageDataUrl: string, options: {
     maxWidth?: number;

package/dist/src/tracing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tracing.d.ts","sourceRoot":"","sources":["../../src/tracing.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAKlE;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAC/B,YAAY,MAAM,EAClB,UAAU,MAAM,kCAWjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,WAAU,MAAa,KACtB,OAAO,CAAC,YAAY,CAgBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAU,YAAY,MAAM,EAAE,WAAW,MAAM,KAAG,OAAO,CAAC,YAAY,CAO3F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,MAAM,EACpB,SAAS;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,KACA,OAAO,CAAC,YAAY,CAmBtB,CAAC"}
+{"version":3,"file":"tracing.d.ts","sourceRoot":"","sources":["../../src/tracing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAKlE;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAC/B,YAAY,MAAM,EAClB,UAAU,MAAM,kCAWjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,WAAU,MAAa,KACtB,OAAO,CAAC,YAAY,CAgBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAU,YAAY,MAAM,EAAE,WAAW,MAAM,KAAG,OAAO,CAAC,YAAY,CAO3F,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,MAAM,EACpB,SAAS;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,KACA,OAAO,CAAC,YAAY,CAmBtB,CAAC"}

package/dist/src/tracing.js

@@ -1,5 +1,8 @@
 /**
  * Image tracing and SVG sampling utilities
+ *
+ * Uses potrace for bitmap tracing. When running in CADit, potrace is exposed
+ * as an importable library by the code.worker, which handles the jimp dependency.
  */
 import { svgToPolygons } from '@cadit-app/svg-sampler';
 import { CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
@@ -49,6 +52,7 @@ export const sampleSvg = async (svgDataUrl, maxWidth) => {
 };
 /**
  * Traces a bitmap image and returns a centered CrossSection
+ * Uses potrace with jimp for image loading (works in web workers).
  */
 export const traceImage = async (imageDataUrl, options) => {
     const tracer = new Potrace({
@@ -56,7 +60,7 @@ export const traceImage = async (imageDataUrl, options) => {
     });
     // Promisify tracer.loadImage
     await new Promise((resolve, reject) => {
-        tracer.loadImage(imageDataUrl, (err) => {
+        tracer.loadImage(imageDataUrl, (_potrace, err) => {
             if (err) {
                 reject(err);
             }

package/package.json

@@ -1,13 +1,25 @@
 {
   "name": "@cadit-app/image-extrude",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "description": "Image Extrude for CADit - Extrude shapes from SVG or bitmap images",
   "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "main": "dist/bundle.js",
+  "types": "dist/src/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/bundle.js",
+      "types": "./dist/src/main.d.ts"
+    },
+    "./unbundled": {
+      "import": "./dist/src/main.js",
+      "types": "./dist/src/main.d.ts"
+    }
+  },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "tsc",
+    "build:types": "tsc",
+    "build:bundle": "vite build",
+    "build": "npm run build:types && npm run build:bundle",
     "prepublishOnly": "npm run build",
     "generate": "npx tsx cli.ts",
     "build:glb": "npx tsx cli.ts output.glb",
@@ -17,7 +29,6 @@
     "@cadit-app/script-params": "0.4.1",
     "@cadit-app/svg-sampler": "^0.1.0",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@types/potrace": "^2.1.5",
     "potrace": "^2.1.8"
   },
   "peerDependencies": {
@@ -28,9 +39,12 @@
     "@gltf-transform/core": "^4.1.1",
     "@jscadui/3mf-export": "^0.5.0",
     "@types/node": "^25.0.3",
+    "@types/potrace": "^2.1.5",
+    "esbuild": "^0.24.0",
     "fflate": "^0.8.2",
     "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vite": "^7.3.1"
   },
   "keywords": [
     "cadit",

package/src/params.ts

@@ -18,8 +18,8 @@ export interface ImageFileValue {
   fileName?: string;
 }
 
-// Default SVG - a simple star shape
-const defaultSvgDataUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDUgNjEsMzkgOTcsMzkgNjgsMjIgNzksOTUgNTAsNzAgMjEsOTUgMzIsNjIgMywzOSAzOSwzOSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=';
+// Default image - CookieCAD logo from GitHub via jsdelivr CDN
+const defaultImageUrl = 'https://cdn.jsdelivr.net/gh/CADit-app/image-extrude@master/images/cookiecad-logo-dark.svg';
 
 export const imageExtrudeParamsSchema = {
   mode: {
@@ -35,10 +35,10 @@ export const imageExtrudeParamsSchema = {
     type: 'image' as const,
     label: 'Image File',
     default: {
-      imageUrl: '',
-      dataUrl: defaultSvgDataUrl,
+      imageUrl: defaultImageUrl,
+      dataUrl: '',
       fileType: 'image/svg+xml',
-      fileName: 'star.svg'
+      fileName: 'cookiecad-logo-dark.svg'
     } as ImageFileValue,
   },
   height: {

package/src/resvg.ts

@@ -1,34 +1,44 @@
 /**
  * SVG to bitmap rendering using resvg-wasm
+ * 
+ * Note: When running as a dynamically loaded script in CADit, the WASM module
+ * is loaded from esm.sh CDN since Vite's ?url import syntax isn't available.
  */
 
 import * as resvg from '@resvg/resvg-wasm';
 import { svgDataUrlToString } from './utils';
 
+// Hardcoded version for WASM URL - update when upgrading @resvg/resvg-wasm dependency
+const RESVG_VERSION = '2.6.2';
+
 let wasmInitialized = false;
+let wasmInitPromise: Promise<void> | null = null;
 
 /**
- * Initialize resvg WASM module
- * In CLI context, we need to load from file system
- * In browser context (via bundler), the WASM is loaded differently
+ * Initialize resvg WASM module.
+ * Fetches the WASM binary from esm.sh CDN to work in dynamically loaded scripts.
+ * 
+ * Safe to call multiple times - subsequent calls return immediately.
+ * If initialization fails, subsequent calls will retry.
  */
-async function initializeResvgWasm() {
+async function initializeResvgWasm(): Promise<void> {
   if (wasmInitialized) return;
-  
-  // For CLI usage, load WASM from node_modules
-  const { readFile } = await import('fs/promises');
-  const { resolve, dirname } = await import('path');
-  const { fileURLToPath } = await import('url');
-  
-  // Find the wasm file in node_modules
-  const wasmPath = resolve(
-    dirname(fileURLToPath(import.meta.url)),
-    '../node_modules/@resvg/resvg-wasm/index_bg.wasm'
-  );
-  
-  const wasmBuffer = await readFile(wasmPath);
-  await resvg.initWasm(wasmBuffer);
-  wasmInitialized = true;
+  if (wasmInitPromise) return wasmInitPromise;
+
+  wasmInitPromise = (async () => {
+    try {
+      // Fetch WASM from esm.sh CDN
+      const wasmUrl = `https://esm.sh/@resvg/resvg-wasm@${RESVG_VERSION}/index_bg.wasm`;
+      await resvg.initWasm(fetch(wasmUrl));
+      wasmInitialized = true;
+    } catch (error) {
+      // Reset promise so retry is possible
+      wasmInitPromise = null;
+      throw error;
+    }
+  })();
+
+  return wasmInitPromise;
 }
 
 /**
@@ -55,9 +65,15 @@ export const renderSvgToBitmapDataUrl = async (
 
   const resvgInstance = new resvg.Resvg(svgString, opts);
   const pngData = resvgInstance.render();
-  const pngBuffer = pngData.asPng();
+  const pngBuffer = pngData.asPng(); // Uint8Array
+
+  // Convert Uint8Array to proper ArrayBuffer for Blob
+  const arrayBuffer = pngBuffer.buffer.slice(
+    pngBuffer.byteOffset,
+    pngBuffer.byteOffset + pngBuffer.byteLength
+  ) as ArrayBuffer;
 
-  // Convert to data URL
-  const base64 = Buffer.from(pngBuffer).toString('base64');
-  return `data:image/png;base64,${base64}`;
+  // Return blob URL (browser-compatible and more efficient)
+  const blob = new Blob([arrayBuffer], { type: 'image/png' });
+  return URL.createObjectURL(blob);
 };

package/src/tracing.ts

@@ -1,5 +1,8 @@
 /**
  * Image tracing and SVG sampling utilities
+ * 
+ * Uses potrace for bitmap tracing. When running in CADit, potrace is exposed
+ * as an importable library by the code.worker, which handles the jimp dependency.
  */
 
 import { svgToPolygons } from '@cadit-app/svg-sampler';
@@ -65,6 +68,7 @@ export const sampleSvg = async (svgDataUrl: string, maxWidth?: number): Promise<
 
 /**
  * Traces a bitmap image and returns a centered CrossSection
+ * Uses potrace with jimp for image loading (works in web workers).
  */
 export const traceImage = async (
   imageDataUrl: string,
@@ -79,7 +83,7 @@ export const traceImage = async (
 
   // Promisify tracer.loadImage
   await new Promise<void>((resolve, reject) => {
-    tracer.loadImage(imageDataUrl, (err: Error | null) => {
+    tracer.loadImage(imageDataUrl, (_potrace, err) => {
       if (err) {
         reject(err);
       } else {

package/src/types.d.ts

@@ -1,40 +0,0 @@
-declare module 'potrace' {
-  interface PotraceOptions {
-    turdSize?: number;
-    turnPolicy?: string;
-    alphaMax?: number;
-    optCurve?: boolean;
-    optTolerance?: number;
-    threshold?: number;
-    blackOnWhite?: boolean;
-    color?: string;
-    background?: string;
-  }
-
-  class Potrace {
-    constructor(options?: PotraceOptions);
-    loadImage(source: string | Buffer, callback: (err: Error | null) => void): void;
-    getSVG(): string;
-    getPathTag(): string;
-  }
-
-  function trace(source: string | Buffer, options?: PotraceOptions, callback?: (err: Error | null, svg: string) => void): void;
-  function posterize(source: string | Buffer, options?: PotraceOptions, callback?: (err: Error | null, svg: string) => void): void;
-
-  export { Potrace, trace, posterize, PotraceOptions };
-}
-
-declare module '@jscadui/3mf-export' {
-  export interface ZipWriter {
-    files: Record<string, Uint8Array>;
-    add(path: string, data: string): void;
-  }
-
-  export interface Mesh3MF {
-    id: string;
-    vertices: number[];
-    indices: number[];
-  }
-
-  export function create3mf(zipWriter: ZipWriter, meshes: Mesh3MF[]): void;
-}