gospelo-iconcraft-react 0.1.0

package/README.md

@@ -0,0 +1,257 @@
+# @gospelo-dev/iconcraft-react
+
+React components for creating emboss-style decorative icon shapes from SVG. Features 3D-looking shapes with highlights, shadows, and smooth animations.
+
+## Installation
+
+```bash
+npm install @gospelo-dev/iconcraft-react
+```
+
+## Quick Start
+
+```tsx
+import { IconCraft } from '@gospelo-dev/iconcraft-react';
+
+function App() {
+  return (
+    <IconCraft
+      svgContent="<svg>...</svg>"
+      mode="wax"
+      baseColor="#6366f1"
+    />
+  );
+}
+```
+
+## Components
+
+### `<IconCraftShape>` (Recommended)
+
+Modern component with full feature support.
+
+```tsx
+import { IconCraftShape } from '@gospelo-dev/iconcraft-react';
+
+<IconCraftShape
+  svg="<svg>...</svg>"
+  mode="jelly"
+  color="#10b981"
+  size={120}
+  animation="bounce"
+  shadow
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `svg` | `string` | required | SVG content string |
+| `mode` | `'jelly' \| 'droplet' \| 'wax'` | `'jelly'` | Shape mode |
+| `color` | `string` | `'#6366f1'` | Base color (hex) |
+| `iconStyle` | `'original' \| 'white' \| 'dark' \| 'emboss'` | `'emboss'` | Icon rendering style |
+| `size` | `number \| string` | - | Width and height |
+| `width` | `number \| string` | - | Width |
+| `height` | `number \| string` | - | Height |
+| `shadow` | `boolean` | `true` | Show drop shadow |
+| `highlight` | `boolean` | `true` | Show highlight effect |
+| `animation` | `AnimationType \| AnimationOptions` | - | Animation preset or config |
+| `animateOnHover` | `boolean` | `false` | Trigger animation on hover |
+| `offset` | `number` | `20` | Contour offset |
+| `resolution` | `number` | `256` | Rasterization resolution |
+| `simplify` | `number` | `2.0` | Polygon simplification |
+| `className` | `string` | - | CSS class |
+| `style` | `CSSProperties` | - | Inline styles |
+| `onLoad` | `(result) => void` | - | Called when generation completes |
+| `onError` | `(error) => void` | - | Called on error |
+| `onClick` | `() => void` | - | Click handler |
+
+### `<IconCraft>` (Legacy)
+
+Original component for backwards compatibility.
+
+```tsx
+import { IconCraft } from '@gospelo-dev/iconcraft-react';
+
+<IconCraft
+  svgContent="<svg>...</svg>"
+  mode="wax"
+  baseColor="#6366f1"
+/>
+```
+
+## Shape Modes
+
+| Mode | Description |
+|------|-------------|
+| `jelly` | Smooth, organic blob shape following icon contours |
+| `droplet` | Perfect circle/sphere with glass-like highlights |
+| `wax` | Irregular wax seal shape with pressed icon indent |
+
+## Animations
+
+### Built-in Animations (17 types)
+
+```tsx
+// Basic usage
+<IconCraftShape svg={svg} animation="bounce" />
+
+// With options
+<IconCraftShape
+  svg={svg}
+  animation={{
+    type: 'pulse',
+    duration: 2,
+    iterationCount: 'infinite',
+  }}
+/>
+
+// Animate on hover
+<IconCraftShape svg={svg} animation="jello" animateOnHover />
+```
+
+#### Available Animations
+
+| Animation | Description |
+|-----------|-------------|
+| `none` | No animation |
+| `shake` | Horizontal shake |
+| `bounce` | Vertical bounce |
+| `pulse` | Scale pulse |
+| `swing` | Pendulum swing |
+| `wobble` | Wobbly movement |
+| `jello` | Jelly-like squish |
+| `heartbeat` | Double pulse |
+| `float` | Gentle floating |
+| `spin` | 360° rotation |
+| `rubberBand` | Rubber band stretch |
+| `squish` | Squish deformation |
+| `tada` | Attention-grabbing |
+| `flip` | 3D flip |
+| `drop` | Drop with bounce |
+| `pop` | Pop-in effect |
+| `wiggle` | Left-right wiggle |
+| `breathe` | Breathing effect |
+
+### Animation Options
+
+```tsx
+interface AnimationOptions {
+  type: AnimationType;
+  target?: 'shape' | 'icon' | 'both';  // What to animate
+  duration?: number;                    // Seconds
+  delay?: number;                       // Seconds
+  iterationCount?: number | 'infinite';
+  timingFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+  playState?: 'running' | 'paused';
+}
+```
+
+### Custom Animations
+
+```tsx
+import { registerAnimation, IconCraftShape } from '@gospelo-dev/iconcraft-react';
+
+// Register custom animation
+registerAnimation('myAnimation', {
+  keyframes: `
+    @keyframes iconcraft-myAnimation {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.5) rotate(10deg); }
+    }
+  `,
+  defaults: {
+    duration: 1,
+    iterationCount: 'infinite',
+  },
+  transformOrigin: 'center',
+});
+
+// Use it
+<IconCraftShape svg={svg} animation="myAnimation" />
+```
+
+## Hooks
+
+### `useIconCraft`
+
+Low-level hook for direct WASM access.
+
+```tsx
+import { useIconCraft } from '@gospelo-dev/iconcraft-react';
+
+function MyComponent() {
+  const { result, loading, error, generate } = useIconCraft({
+    svg: svgContent,
+    mode: 'wax',
+    color: '#6366f1',
+  });
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div dangerouslySetInnerHTML={{ __html: result?.emboss_svg || '' }} />
+  );
+}
+```
+
+## Context (State Management)
+
+For complex applications with multiple icons:
+
+```tsx
+import {
+  IconCraftProvider,
+  useIconCraftStore,
+  IconCraftView,
+} from '@gospelo-dev/iconcraft-react';
+
+function App() {
+  return (
+    <IconCraftProvider>
+      <IconGallery />
+    </IconCraftProvider>
+  );
+}
+
+function IconGallery() {
+  const { icons, createIcon } = useIconCraftStore();
+
+  return (
+    <div>
+      {icons.map(icon => (
+        <IconCraftView key={icon.id} instance={icon} />
+      ))}
+    </div>
+  );
+}
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type {
+  ShapeMode,
+  IconStyle,
+  AnimationType,
+  AnimationOptions,
+  IconCraftResult,
+  IconCraftShapeProps,
+} from '@gospelo-dev/iconcraft-react';
+```
+
+## Browser Support
+
+Requires WebAssembly support. Works in all modern browsers.
+
+## Related
+
+- [gospelo-iconcraft-wasm](https://www.npmjs.com/package/gospelo-iconcraft-wasm) - WASM core module
+
+## License
+
+MIT

package/dist/icon_craft_wasm-JDPURZOP.js

@@ -0,0 +1,266 @@
+// ../wasm/icon_craft_wasm.js
+var ShapeMode = Object.freeze({
+  Jelly: 0,
+  "0": "Jelly",
+  Droplet: 1,
+  "1": "Droplet",
+  Wax: 2,
+  "2": "Wax"
+});
+function generate_clippath(svg_content, mode, offset, resolution, simplify_epsilon) {
+  const ptr0 = passStringToWasm0(svg_content, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+  const len0 = WASM_VECTOR_LEN;
+  const ret = wasm.generate_clippath(ptr0, len0, mode, offset, resolution, simplify_epsilon);
+  return ret;
+}
+function generate_clippath_with_color(svg_content, mode, offset, resolution, simplify_epsilon, include_icon, base_color) {
+  const ptr0 = passStringToWasm0(svg_content, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+  const len0 = WASM_VECTOR_LEN;
+  const ptr1 = passStringToWasm0(base_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+  const len1 = WASM_VECTOR_LEN;
+  const ret = wasm.generate_clippath_with_color(ptr0, len0, mode, offset, resolution, simplify_epsilon, include_icon, ptr1, len1);
+  return ret;
+}
+function generate_clippath_with_icon(svg_content, mode, offset, resolution, simplify_epsilon, include_icon) {
+  const ptr0 = passStringToWasm0(svg_content, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+  const len0 = WASM_VECTOR_LEN;
+  const ret = wasm.generate_clippath_with_icon(ptr0, len0, mode, offset, resolution, simplify_epsilon, include_icon);
+  return ret;
+}
+function init() {
+  wasm.init();
+}
+function __wbg_get_imports() {
+  const import0 = {
+    __proto__: null,
+    __wbg_Error_8c4e43fe74559d73: function(arg0, arg1) {
+      const ret = Error(getStringFromWasm0(arg0, arg1));
+      return ret;
+    },
+    __wbg___wbindgen_throw_be289d5034ed271b: function(arg0, arg1) {
+      throw new Error(getStringFromWasm0(arg0, arg1));
+    },
+    __wbg_error_7534b8e9a36f1ab4: function(arg0, arg1) {
+      let deferred0_0;
+      let deferred0_1;
+      try {
+        deferred0_0 = arg0;
+        deferred0_1 = arg1;
+        console.error(getStringFromWasm0(arg0, arg1));
+      } finally {
+        wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
+      }
+    },
+    __wbg_new_361308b2356cecd0: function() {
+      const ret = new Object();
+      return ret;
+    },
+    __wbg_new_3eb36ae241fe6f44: function() {
+      const ret = new Array();
+      return ret;
+    },
+    __wbg_new_8a6f238a6ece86ea: function() {
+      const ret = new Error();
+      return ret;
+    },
+    __wbg_set_3f1d0b984ed272ed: function(arg0, arg1, arg2) {
+      arg0[arg1] = arg2;
+    },
+    __wbg_set_f43e577aea94465b: function(arg0, arg1, arg2) {
+      arg0[arg1 >>> 0] = arg2;
+    },
+    __wbg_stack_0ed75d68575b0f3c: function(arg0, arg1) {
+      const ret = arg1.stack;
+      const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+      const len1 = WASM_VECTOR_LEN;
+      getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+      getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    },
+    __wbindgen_cast_0000000000000001: function(arg0) {
+      const ret = arg0;
+      return ret;
+    },
+    __wbindgen_cast_0000000000000002: function(arg0, arg1) {
+      const ret = getStringFromWasm0(arg0, arg1);
+      return ret;
+    },
+    __wbindgen_cast_0000000000000003: function(arg0) {
+      const ret = BigInt.asUintN(64, arg0);
+      return ret;
+    },
+    __wbindgen_init_externref_table: function() {
+      const table = wasm.__wbindgen_externrefs;
+      const offset = table.grow(4);
+      table.set(0, void 0);
+      table.set(offset + 0, void 0);
+      table.set(offset + 1, null);
+      table.set(offset + 2, true);
+      table.set(offset + 3, false);
+    }
+  };
+  return {
+    __proto__: null,
+    "./icon_craft_wasm_bg.js": import0
+  };
+}
+var cachedDataViewMemory0 = null;
+function getDataViewMemory0() {
+  if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || cachedDataViewMemory0.buffer.detached === void 0 && cachedDataViewMemory0.buffer !== wasm.memory.buffer) {
+    cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+  }
+  return cachedDataViewMemory0;
+}
+function getStringFromWasm0(ptr, len) {
+  ptr = ptr >>> 0;
+  return decodeText(ptr, len);
+}
+var cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+  if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+    cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+  }
+  return cachedUint8ArrayMemory0;
+}
+function passStringToWasm0(arg, malloc, realloc) {
+  if (realloc === void 0) {
+    const buf = cachedTextEncoder.encode(arg);
+    const ptr2 = malloc(buf.length, 1) >>> 0;
+    getUint8ArrayMemory0().subarray(ptr2, ptr2 + buf.length).set(buf);
+    WASM_VECTOR_LEN = buf.length;
+    return ptr2;
+  }
+  let len = arg.length;
+  let ptr = malloc(len, 1) >>> 0;
+  const mem = getUint8ArrayMemory0();
+  let offset = 0;
+  for (; offset < len; offset++) {
+    const code = arg.charCodeAt(offset);
+    if (code > 127) break;
+    mem[ptr + offset] = code;
+  }
+  if (offset !== len) {
+    if (offset !== 0) {
+      arg = arg.slice(offset);
+    }
+    ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+    const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+    const ret = cachedTextEncoder.encodeInto(arg, view);
+    offset += ret.written;
+    ptr = realloc(ptr, len, offset, 1) >>> 0;
+  }
+  WASM_VECTOR_LEN = offset;
+  return ptr;
+}
+var cachedTextDecoder = new TextDecoder("utf-8", { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+var MAX_SAFARI_DECODE_BYTES = 2146435072;
+var numBytesDecoded = 0;
+function decodeText(ptr, len) {
+  numBytesDecoded += len;
+  if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+    cachedTextDecoder = new TextDecoder("utf-8", { ignoreBOM: true, fatal: true });
+    cachedTextDecoder.decode();
+    numBytesDecoded = len;
+  }
+  return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+var cachedTextEncoder = new TextEncoder();
+if (!("encodeInto" in cachedTextEncoder)) {
+  cachedTextEncoder.encodeInto = function(arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+      read: arg.length,
+      written: buf.length
+    };
+  };
+}
+var WASM_VECTOR_LEN = 0;
+var wasmModule;
+var wasm;
+function __wbg_finalize_init(instance, module) {
+  wasm = instance.exports;
+  wasmModule = module;
+  cachedDataViewMemory0 = null;
+  cachedUint8ArrayMemory0 = null;
+  wasm.__wbindgen_start();
+  return wasm;
+}
+async function __wbg_load(module, imports) {
+  if (typeof Response === "function" && module instanceof Response) {
+    if (typeof WebAssembly.instantiateStreaming === "function") {
+      try {
+        return await WebAssembly.instantiateStreaming(module, imports);
+      } catch (e) {
+        const validResponse = module.ok && expectedResponseType(module.type);
+        if (validResponse && module.headers.get("Content-Type") !== "application/wasm") {
+          console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+        } else {
+          throw e;
+        }
+      }
+    }
+    const bytes = await module.arrayBuffer();
+    return await WebAssembly.instantiate(bytes, imports);
+  } else {
+    const instance = await WebAssembly.instantiate(module, imports);
+    if (instance instanceof WebAssembly.Instance) {
+      return { instance, module };
+    } else {
+      return instance;
+    }
+  }
+  function expectedResponseType(type) {
+    switch (type) {
+      case "basic":
+      case "cors":
+      case "default":
+        return true;
+    }
+    return false;
+  }
+}
+function initSync(module) {
+  if (wasm !== void 0) return wasm;
+  if (module !== void 0) {
+    if (Object.getPrototypeOf(module) === Object.prototype) {
+      ({ module } = module);
+    } else {
+      console.warn("using deprecated parameters for `initSync()`; pass a single object instead");
+    }
+  }
+  const imports = __wbg_get_imports();
+  if (!(module instanceof WebAssembly.Module)) {
+    module = new WebAssembly.Module(module);
+  }
+  const instance = new WebAssembly.Instance(module, imports);
+  return __wbg_finalize_init(instance, module);
+}
+async function __wbg_init(module_or_path) {
+  if (wasm !== void 0) return wasm;
+  if (module_or_path !== void 0) {
+    if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+      ({ module_or_path } = module_or_path);
+    } else {
+      console.warn("using deprecated parameters for the initialization function; pass a single object instead");
+    }
+  }
+  if (module_or_path === void 0) {
+    module_or_path = new URL("icon_craft_wasm_bg.wasm", import.meta.url);
+  }
+  const imports = __wbg_get_imports();
+  if (typeof module_or_path === "string" || typeof Request === "function" && module_or_path instanceof Request || typeof URL === "function" && module_or_path instanceof URL) {
+    module_or_path = fetch(module_or_path);
+  }
+  const { instance, module } = await __wbg_load(await module_or_path, imports);
+  return __wbg_finalize_init(instance, module);
+}
+export {
+  ShapeMode,
+  __wbg_init as default,
+  generate_clippath,
+  generate_clippath_with_color,
+  generate_clippath_with_icon,
+  init,
+  initSync
+};