gospelo-iconcraft-react 0.3.1 → 0.3.5

package/README.md

@@ -161,7 +161,7 @@ import { IconCraftShape } from 'gospelo-iconcraft-react';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `svg` | `string` | required | SVG content string |
-| `mode` | `'jelly' \| 'droplet' \| 'wax'` | `'jelly'` | Shape mode |
+| `mode` | `'sticker' \| 'jelly' \| 'bubble' \| 'wax'` | `'jelly'` | Shape mode |
 | `shapeColor` | `string` | `'#6366f1'` | Shape base color (hex) |
 | `iconColor` | `string` | `'#1d1d1f'` | Icon color (for stroke/fill styles) |
 | `iconStyle` | `'original' \| 'emboss' \| 'stroke' \| 'fill'` | `'emboss'` | Icon rendering style |
@@ -208,8 +208,9 @@ icon1.config.update({ shapeColor: '#10b981', rotation: 45 });
 
 | Mode | Description |
 |------|-------------|
+| `sticker` | Jelly-based shape with paper-like noise texture, no highlights |
 | `jelly` | Smooth, organic blob shape following icon contours |
-| `droplet` | Perfect circle/sphere with glass-like highlights |
+| `bubble` | Perfect circle/sphere with glass-like highlights |
 | `wax` | Irregular wax seal shape with pressed icon indent |
 
 ## Animations

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import * as gospelo_iconcraft_wasm from 'gospelo-iconcraft-wasm';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type ShapeMode = 'jelly' | 'droplet' | 'wax';
+type ShapeMode = 'jelly' | 'bubble' | 'wax' | 'sticker';
 type IconStyle = 'original' | 'emboss' | 'stroke' | 'fill';
 /** Built-in animation types */
 type BuiltInAnimationType = 'none' | 'shake' | 'bounce' | 'pulse' | 'swing' | 'wobble' | 'jello' | 'heartbeat' | 'float' | 'spin' | 'rubberBand' | 'squish' | 'tada' | 'flip' | 'drop' | 'pop' | 'wiggle' | 'breathe';
@@ -93,7 +93,7 @@ interface IconCraftResult {
 interface IconCraftShapeProps {
     /** SVG content string or URL */
     svg: string;
-    /** Shape mode: jelly, droplet, or wax */
+    /** Shape mode: jelly, bubble, or wax */
     mode?: ShapeMode;
     /** Base color for the shape (hex) */
     shapeColor?: string;
@@ -208,6 +208,7 @@ declare class IconCraftConfig {
         includeIcon: boolean;
         shapeColor: string;
         rotation: number;
+        iconColor: string;
     };
     /**
      * スタイル用のサイズを取得
@@ -335,6 +336,7 @@ interface WasmGenerateParams {
     includeIcon: boolean;
     shapeColor: string;
     rotation?: number;
+    iconColor?: string;
 }
 /**
  * WASMマネージャー（Singleton）
@@ -563,6 +565,12 @@ interface IconCraftViewProps {
     renderReticle?: (props: ReticleProps) => React.ReactNode;
     /** Reticle preset object (overrides renderReticle) */
     reticlePreset?: ReticlePreset;
+    /** Dial ring color (default: '#000') */
+    dialColor?: string;
+    /** Notch color (default: '#000') */
+    notchColor?: string;
+    /** Reticle color (default: '#000') */
+    reticleColor?: string;
 }
 /** Props passed to custom reticle renderer */
 interface ReticleProps {
@@ -603,7 +611,7 @@ interface DialLabelProps {
  * <IconCraftView instance={icon} zIndex={10} />
  * ```
  */
-declare function IconCraftView({ instance, animation, animationTarget, animateOnHover, zIndex, className, style, onClick, onLoad, onError, showRotationDial, onRotationChange, rotationSnap, renderRing: renderRingProp, renderNotch: renderNotchProp, renderLabel: renderLabelProp, dialPreset, showReticle, renderReticle: renderReticleProp, reticlePreset, }: IconCraftViewProps): react_jsx_runtime.JSX.Element | null;
+declare function IconCraftView({ instance, animation, animationTarget, animateOnHover, zIndex, className, style, onClick, onLoad, onError, showRotationDial, onRotationChange, rotationSnap, renderRing: renderRingProp, renderNotch: renderNotchProp, renderLabel: renderLabelProp, dialPreset, showReticle, renderReticle: renderReticleProp, reticlePreset, dialColor: dialColorProp, notchColor: notchColorProp, reticleColor: reticleColorProp, }: IconCraftViewProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * IconCraftSimple Props
@@ -668,7 +676,7 @@ interface IconCraftSimpleProps {
  * // SVG文字列を直接渡す
  * <IconCraftSimple
  *   src={`<svg>...</svg>`}
- *   mode="droplet"
+ *   mode="bubble"
  *   iconStyle="emboss"
  * />
  * ```

package/dist/index.js

@@ -60,7 +60,7 @@ var IconCraftConfig = class _IconCraftConfig {
    * WASM呼び出し用のパラメータを取得
    */
   getWasmParams() {
-    const needsEmbossSvg = this.mode === "wax" || this.iconStyle === "emboss";
+    const needsEmbossSvg = this.mode === "wax" || this.mode === "sticker" || this.iconStyle === "emboss";
     return {
       mode: this.mode,
       offset: this.offset,
@@ -68,7 +68,8 @@ var IconCraftConfig = class _IconCraftConfig {
       simplify: this.simplify,
       includeIcon: needsEmbossSvg,
       shapeColor: this.shapeColor,
-      rotation: this.rotation
+      rotation: this.rotation,
+      iconColor: this.iconColor
     };
   }
   /**
@@ -96,13 +97,15 @@ function createCacheKey(params) {
     simplify: params.simplify,
     includeIcon: params.includeIcon,
     shapeColor: params.shapeColor,
-    rotation: params.rotation ?? 0
+    rotation: params.rotation ?? 0,
+    iconColor: params.iconColor ?? ""
   });
 }
 var shapeModeMap = {
   jelly: 0,
-  droplet: 1,
-  wax: 2
+  bubble: 1,
+  wax: 2,
+  sticker: 3
 };
 var WasmManagerClass = class {
   constructor() {
@@ -142,6 +145,7 @@ var WasmManagerClass = class {
     }
     const wasm = await this.init();
     const rotation = params.rotation ?? 0;
+    const iconColor = params.iconColor ?? null;
     const result = typeof wasm.generate_clippath_with_rotation === "function" ? wasm.generate_clippath_with_rotation(
       params.svgContent,
       shapeModeMap[params.mode],
@@ -150,7 +154,8 @@ var WasmManagerClass = class {
       params.simplify,
       params.includeIcon,
       params.shapeColor,
-      rotation
+      rotation,
+      iconColor
     ) : wasm.generate_clippath_with_color(
       params.svgContent,
       shapeModeMap[params.mode],
@@ -542,7 +547,9 @@ import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 
 // src/components/dialPresets.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var dialColor = "var(--iconcraft-dial-color, #0071e3)";
+var dialColor = "var(--iconcraft-dial-color, #000)";
+var notchColor = "var(--iconcraft-notch-color, #000)";
+var reticleColor = "var(--iconcraft-reticle-color, #000)";
 var dialPresetDashed = {
   name: "dashed",
   renderRing: ({ cx, cy, radius }) => /* @__PURE__ */ jsx(
@@ -564,7 +571,7 @@ var dialPresetDashed = {
       cx: x,
       cy: y,
       r: "7",
-      fill: dialColor,
+      fill: notchColor,
       stroke: "#fff",
       strokeWidth: "2",
       style: { pointerEvents: "auto", cursor: "grab" },
@@ -599,7 +606,7 @@ var dialPresetSolid = {
           y: "-5",
           width: "10",
           height: "10",
-          fill: dialColor,
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1.5",
           rx: "1"
@@ -646,7 +653,7 @@ var dialPresetTicks = {
         cx: x,
         cy: y,
         r: "5",
-        fill: dialColor,
+        fill: notchColor,
         stroke: "#fff",
         strokeWidth: "1.5",
         style: { pointerEvents: "auto", cursor: "grab" },
@@ -689,8 +696,8 @@ var dialPresetDotted = {
       children: /* @__PURE__ */ jsx(
         "polygon",
         {
-          points: "0,4 -5,16 5,16",
-          fill: dialColor,
+          points: "0,-2 -5,10 5,10",
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1.5",
           strokeLinejoin: "round"
@@ -746,7 +753,7 @@ var dialPresetDouble = {
           width: "6",
           height: "16",
           rx: "3",
-          fill: dialColor,
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1.5"
         }
@@ -805,9 +812,9 @@ var dialPresetCrosshair = {
       style: { pointerEvents: "auto", cursor: "grab" },
       onMouseDown,
       children: [
-        /* @__PURE__ */ jsx("line", { x1: -6, y1: 0, x2: 6, y2: 0, stroke: dialColor, strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("line", { x1: 0, y1: -6, x2: 0, y2: 6, stroke: dialColor, strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: "3", fill: "#fff", stroke: dialColor, strokeWidth: "1.5" })
+        /* @__PURE__ */ jsx("line", { x1: -6, y1: 0, x2: 6, y2: 0, stroke: notchColor, strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: 0, y1: -6, x2: 0, y2: 6, stroke: notchColor, strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: "3", fill: "#fff", stroke: notchColor, strokeWidth: "1.5" })
       ]
     }
   )
@@ -852,7 +859,7 @@ var dialPresetMinimal = {
         "polygon",
         {
           points: "0,-8 -5,4 5,4",
-          fill: dialColor,
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1.5",
           strokeLinejoin: "round"
@@ -886,7 +893,7 @@ var dialPresetNeedle = {
         "path",
         {
           d: "M 0,-12 L 2,-2 0,4 -2,-2 Z",
-          fill: dialColor,
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1",
           strokeLinejoin: "round"
@@ -923,7 +930,7 @@ var dialPresetBar = {
           width: "4",
           height: "20",
           rx: "2",
-          fill: dialColor,
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1.5"
         }
@@ -971,7 +978,7 @@ var dialPresetArrow = {
         "path",
         {
           d: "M 0,-11 L 4,-3 1,-3 1,5 -1,5 -1,-3 -4,-3 Z",
-          fill: dialColor,
+          fill: notchColor,
           stroke: "#fff",
           strokeWidth: "1",
           strokeLinejoin: "round"
@@ -1005,7 +1012,7 @@ var reticlePresetCross = {
           y1: cy - half,
           x2: cx,
           y2: cy + half,
-          stroke: dialColor,
+          stroke: reticleColor,
           strokeWidth: "1"
         }
       ),
@@ -1016,11 +1023,11 @@ var reticlePresetCross = {
           y1: cy,
           x2: cx + half,
           y2: cy,
-          stroke: dialColor,
+          stroke: reticleColor,
           strokeWidth: "1"
         }
       ),
-      /* @__PURE__ */ jsx("circle", { cx, cy, r: "2", fill: dialColor })
+      /* @__PURE__ */ jsx("circle", { cx, cy, r: "2", fill: reticleColor })
     ] });
   }
 };
@@ -1037,11 +1044,11 @@ var reticlePresetBullseye = {
           cy,
           r,
           fill: "none",
-          stroke: dialColor,
+          stroke: reticleColor,
           strokeWidth: "1"
         }
       ),
-      /* @__PURE__ */ jsx("circle", { cx, cy, r: "2.5", fill: dialColor })
+      /* @__PURE__ */ jsx("circle", { cx, cy, r: "2.5", fill: reticleColor })
     ] });
   }
 };
@@ -1064,7 +1071,7 @@ var reticlePresetGlobe = {
               {
                 d: `M ${cx + lx} ${cy - ly} A ${rx} ${ly} 0 0 0 ${cx + lx} ${cy + ly}`,
                 fill: "none",
-                stroke: dialColor,
+                stroke: reticleColor,
                 strokeWidth: sw
               }
             ),
@@ -1073,7 +1080,7 @@ var reticlePresetGlobe = {
               {
                 d: `M ${cx - lx} ${cy - ly} A ${rx} ${ly} 0 0 1 ${cx - lx} ${cy + ly}`,
                 fill: "none",
-                stroke: dialColor,
+                stroke: reticleColor,
                 strokeWidth: sw
               }
             )
@@ -1086,7 +1093,7 @@ var reticlePresetGlobe = {
             y1: cy,
             x2: cx + r,
             y2: cy,
-            stroke: dialColor,
+            stroke: reticleColor,
             strokeWidth: sw
           }
         ),
@@ -1100,7 +1107,7 @@ var reticlePresetGlobe = {
               {
                 d: `M ${cx - lx} ${cy - ly} A ${lx} ${ry} 0 0 0 ${cx + lx} ${cy - ly}`,
                 fill: "none",
-                stroke: dialColor,
+                stroke: reticleColor,
                 strokeWidth: sw
               }
             ),
@@ -1109,7 +1116,7 @@ var reticlePresetGlobe = {
               {
                 d: `M ${cx - lx} ${cy + ly} A ${lx} ${ry} 0 0 1 ${cx + lx} ${cy + ly}`,
                 fill: "none",
-                stroke: dialColor,
+                stroke: reticleColor,
                 strokeWidth: sw
               }
             )
@@ -1125,7 +1132,7 @@ var reticlePresetGlobe = {
           cy,
           r,
           fill: "none",
-          stroke: dialColor,
+          stroke: reticleColor,
           strokeWidth: sw
         }
       ),
@@ -1136,7 +1143,7 @@ var reticlePresetGlobe = {
           y1: cy - r,
           x2: cx,
           y2: cy + r,
-          stroke: dialColor,
+          stroke: reticleColor,
           strokeWidth: sw
         }
       ),
@@ -1150,7 +1157,7 @@ var reticlePresetGlobe = {
             {
               d: `M ${cx + lx} ${cy - ly} A ${rx} ${ly} 0 0 1 ${cx + lx} ${cy + ly}`,
               fill: "none",
-              stroke: dialColor,
+              stroke: reticleColor,
               strokeWidth: sw
             }
           ),
@@ -1159,7 +1166,7 @@ var reticlePresetGlobe = {
             {
               d: `M ${cx - lx} ${cy - ly} A ${rx} ${ly} 0 0 0 ${cx - lx} ${cy + ly}`,
               fill: "none",
-              stroke: dialColor,
+              stroke: reticleColor,
               strokeWidth: sw
             }
           )
@@ -1172,7 +1179,7 @@ var reticlePresetGlobe = {
           y1: cy,
           x2: cx + r,
           y2: cy,
-          stroke: dialColor,
+          stroke: reticleColor,
           strokeWidth: sw
         }
       ),
@@ -1186,7 +1193,7 @@ var reticlePresetGlobe = {
             {
               d: `M ${cx - lx} ${cy - ly} A ${lx} ${ry} 0 0 1 ${cx + lx} ${cy - ly}`,
               fill: "none",
-              stroke: dialColor,
+              stroke: reticleColor,
               strokeWidth: sw
             }
           ),
@@ -1195,7 +1202,7 @@ var reticlePresetGlobe = {
             {
               d: `M ${cx - lx} ${cy + ly} A ${lx} ${ry} 0 0 0 ${cx + lx} ${cy + ly}`,
               fill: "none",
-              stroke: dialColor,
+              stroke: reticleColor,
               strokeWidth: sw
             }
           )
@@ -1466,9 +1473,18 @@ function getParser() {
 }
 function sanitizeSvg(html) {
   if (!html) return "";
-  const doc = getParser().parseFromString(html, "text/html");
+  const imagePlaceholders = [];
+  const preserved = html.replace(/<image\b[^>]*\/?\s*>/gi, (match) => {
+    imagePlaceholders.push(match);
+    return `<!--__IMAGE_${imagePlaceholders.length - 1}__-->`;
+  });
+  const doc = getParser().parseFromString(preserved, "text/html");
   sanitizeNode(doc.body);
-  return doc.body.innerHTML;
+  let result = doc.body.innerHTML;
+  result = result.replace(/<!--__IMAGE_(\d+)__-->/g, (_, idx) => {
+    return imagePlaceholders[parseInt(idx, 10)] ?? "";
+  });
+  return result;
 }
 function sanitizeNode(node) {
   const toRemove = [];
@@ -1537,6 +1553,8 @@ function resolveTransformOrigin(value) {
       return "center center";
   }
 }
+var ROTATE_CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><polyline points="21 3 21 9 15 9"/></svg>`;
+var ROTATE_CURSOR = `url("data:image/svg+xml,${encodeURIComponent(ROTATE_CURSOR_SVG)}") 12 12, pointer`;
 function IconCraftView({
   instance,
   animation,
@@ -1557,7 +1575,10 @@ function IconCraftView({
   dialPreset,
   showReticle = false,
   renderReticle: renderReticleProp,
-  reticlePreset
+  reticlePreset,
+  dialColor: dialColorProp,
+  notchColor: notchColorProp,
+  reticleColor: reticleColorProp
 }) {
   const resolvedDial = dialPreset ?? (renderRingProp || renderNotchProp || renderLabelProp ? void 0 : dialPresetDotted);
   const renderRing = resolvedDial?.renderRing ?? renderRingProp;
@@ -1654,7 +1675,7 @@ function IconCraftView({
     const isWax = mode === "wax";
     if (isWax && instance.embossSvg) {
       let svg2 = instance.embossSvg;
-      const modes = ["wax", "jelly", "droplet"];
+      const modes = ["wax", "jelly", "bubble", "sticker"];
       for (const m of modes) {
         svg2 = svg2.replace(
           new RegExp(`id="${m}-`, "g"),
@@ -1666,14 +1687,6 @@ function IconCraftView({
         );
       }
       if (iconStyle === "emboss") {
-        const rotation3 = instance.config.rotation;
-        if (rotation3) {
-          const layout2 = result?.icon_layout;
-          const iconCx = (layout2?.left_percent ?? 28) + (layout2?.width_percent ?? 44) / 2;
-          const iconCy = (layout2?.top_percent ?? 28) + (layout2?.height_percent ?? 44) / 2;
-          const rotateTransform = `transform="rotate(${rotation3}, ${iconCx.toFixed(2)}, ${iconCy.toFixed(2)})"`;
-          svg2 = svg2.replace(/<g filter="none">/, `<g filter="none" ${rotateTransform}>`);
-        }
         return svg2;
       }
       {
@@ -1709,7 +1722,7 @@ function IconCraftView({
       ${iconContent2}
     </svg>
   </g>`;
-          svg2 = svg2.replace(/<g filter="none">[\s\S]*?<\/g>\s*<\/svg>$/, `${newIconSvg}
+          svg2 = svg2.replace(/<g filter="none"[^>]*>[\s\S]*?<\/g>\s*<\/svg>$/, `${newIconSvg}
 </svg>`);
         }
       }
@@ -1717,7 +1730,7 @@ function IconCraftView({
     }
     if (iconStyle === "emboss" && instance.embossSvg) {
       let svg2 = instance.embossSvg;
-      const modes = ["wax", "jelly", "droplet"];
+      const modes = ["wax", "jelly", "bubble", "sticker"];
       for (const m of modes) {
         svg2 = svg2.replace(
           new RegExp(`id="${m}-`, "g"),
@@ -1728,14 +1741,6 @@ function IconCraftView({
           `url(#${instanceId}-${m}-`
         );
       }
-      const rotation3 = instance.config.rotation;
-      if (rotation3) {
-        const layout2 = result?.icon_layout;
-        const iconCx = (layout2?.left_percent ?? 28) + (layout2?.width_percent ?? 44) / 2;
-        const iconCy = (layout2?.top_percent ?? 28) + (layout2?.height_percent ?? 44) / 2;
-        const rotateTransform = `transform="rotate(${rotation3}, ${iconCx.toFixed(2)}, ${iconCy.toFixed(2)})"`;
-        svg2 = svg2.replace(/<g filter="none">/, `<g filter="none" ${rotateTransform}>`);
-      }
       return svg2;
     }
     if (!result || !result.svg_paths?.clip) return "";
@@ -1766,7 +1771,8 @@ function IconCraftView({
     }
     const clipPath = result.svg_paths.clip;
     const highlightPath = result.svg_paths.highlight;
-    const isJellyOrDroplet = mode === "jelly" || mode === "droplet";
+    const isSticker = mode === "sticker";
+    const isJellyOrBubble = mode === "jelly" || mode === "bubble" || isSticker;
     const gradientId = `${instanceId}-bg-grad`;
     const clipId = `${instanceId}-clip`;
     const viewBoxMatch = svgContent.match(/viewBox="([^"]*)"/);
@@ -1779,28 +1785,28 @@ function IconCraftView({
       innerSvg = innerSvg.replace(/stroke="[^"]*"/g, "");
       innerSvg = innerSvg.replace(/stroke-width="[^"]*"/g, "");
     }
-    const bgGradient = isJellyOrDroplet ? `<linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="100%"${gradTransform}>
+    const bgGradient = isJellyOrBubble ? `<linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100" y2="100">
           <stop offset="0%" stop-color="${color}" stop-opacity="0.35"/>
           <stop offset="50%" stop-color="${color}" stop-opacity="0.4"/>
           <stop offset="100%" stop-color="${color}" stop-opacity="0.5"/>
         </linearGradient>
-        <linearGradient id="${instanceId}-top-highlight" x1="50%" y1="0%" x2="50%" y2="100%"${gradTransform}>
+        ${isSticker ? "" : `<linearGradient id="${instanceId}-top-highlight" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100">
           <stop offset="0%" stop-color="#fff" stop-opacity="0.6"/>
           <stop offset="30%" stop-color="#fff" stop-opacity="0.3"/>
           <stop offset="60%" stop-color="#fff" stop-opacity="0.1"/>
           <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
         </linearGradient>
-        <linearGradient id="${instanceId}-bottom-shadow" x1="50%" y1="0%" x2="50%" y2="100%"${gradTransform}>
+        <linearGradient id="${instanceId}-bottom-shadow" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100">
           <stop offset="0%" stop-color="#000" stop-opacity="0"/>
           <stop offset="40%" stop-color="#000" stop-opacity="0.05"/>
           <stop offset="70%" stop-color="#000" stop-opacity="0.15"/>
           <stop offset="100%" stop-color="#000" stop-opacity="0.3"/>
         </linearGradient>
-        <linearGradient id="${instanceId}-edge-highlight" x1="0%" y1="0%" x2="100%" y2="100%"${gradTransform}>
+        <linearGradient id="${instanceId}-edge-highlight" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100" y2="100">
           <stop offset="0%" stop-color="#fff" stop-opacity="0.85"/>
           <stop offset="50%" stop-color="#fff" stop-opacity="0.5"/>
           <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
-        </linearGradient>` : `<linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="100%"${gradTransform}>
+        </linearGradient>`}` : `<linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="100%"${gradTransform}>
           <stop offset="0%" stop-color="${color}"/>
           <stop offset="100%" stop-color="${color}"/>
         </linearGradient>
@@ -1814,7 +1820,7 @@ function IconCraftView({
           <stop offset="60%" stop-color="#000" stop-opacity="0.1"/>
           <stop offset="100%" stop-color="#000" stop-opacity="0.25"/>
         </linearGradient>`;
-    const shapeContent = isJellyOrDroplet ? `<path d="${clipPath}" fill="url(#${gradientId})"/>
+    const shapeContent = isJellyOrBubble ? isSticker ? `<path d="${clipPath}" fill="url(#${gradientId})"/>` : `<path d="${clipPath}" fill="url(#${gradientId})"/>
         <path d="${clipPath}" fill="url(#${instanceId}-top-highlight)"/>
         <path d="${clipPath}" fill="url(#${instanceId}-bottom-shadow)"/>
         ${highlightPath ? `<path d="${highlightPath}" fill="url(#${instanceId}-edge-highlight)"/>` : ""}` : `<path d="${clipPath}" fill="url(#${gradientId})"/>
@@ -1871,6 +1877,9 @@ function IconCraftView({
     ...style
   };
   const cssVars = {};
+  if (dialColorProp) cssVars["--iconcraft-dial-color"] = dialColorProp;
+  if (notchColorProp) cssVars["--iconcraft-notch-color"] = notchColorProp;
+  if (reticleColorProp) cssVars["--iconcraft-reticle-color"] = reticleColorProp;
   if (target === "shape") {
     cssVars["--iconcraft-shape-animation"] = animStyle;
     cssVars["--iconcraft-icon-animation"] = "none";
@@ -2000,7 +2009,7 @@ function IconCraftView({
                     rx: reticleSize * 0.5,
                     ry: reticleSize * 0.15,
                     fill: "none",
-                    stroke: "var(--iconcraft-dial-color, #0071e3)",
+                    stroke: "var(--iconcraft-reticle-color, #000)",
                     strokeWidth: "1",
                     strokeDasharray: "3 2"
                   }
@@ -2013,7 +2022,7 @@ function IconCraftView({
                     rx: reticleSize * 0.15,
                     ry: reticleSize * 0.5,
                     fill: "none",
-                    stroke: "var(--iconcraft-dial-color, #0071e3)",
+                    stroke: "var(--iconcraft-reticle-color, #000)",
                     strokeWidth: "1",
                     strokeDasharray: "3 2"
                   }
@@ -2059,7 +2068,7 @@ function IconCraftView({
                     rx: reticleSize * 0.5,
                     ry: reticleSize * 0.3,
                     fill: "none",
-                    stroke: "var(--iconcraft-dial-color, #0071e3)",
+                    stroke: "var(--iconcraft-reticle-color, #000)",
                     strokeWidth: "1.2",
                     transform: `rotate(45, ${dialCenter}, ${dialCenter})`
                   }
@@ -2070,7 +2079,7 @@ function IconCraftView({
                     cx: dialCenter,
                     cy: dialCenter,
                     r: "2",
-                    fill: "var(--iconcraft-dial-color, #0071e3)"
+                    fill: "var(--iconcraft-reticle-color, #000)"
                   }
                 )
               ] })
@@ -2098,22 +2107,33 @@ function IconCraftView({
                   cy: dialCenter,
                   r: ringRadius,
                   fill: "none",
-                  stroke: "var(--iconcraft-dial-color, #0071e3)",
+                  stroke: "var(--iconcraft-dial-color, #000)",
                   strokeWidth: "2",
                   strokeDasharray: "6 4",
                   opacity: 0.7
                 }
               ),
+              /* @__PURE__ */ jsx2("style", { children: `
+            .iconcraft-notch {
+              transition: r 0.15s ease, filter 0.15s ease;
+              filter: none;
+            }
+            .iconcraft-notch:hover {
+              r: 9;
+              filter: drop-shadow(0 0 3px rgba(0,0,0,0.4));
+            }
+          ` }),
               renderNotch ? renderNotch({ x: notchX, y: notchY, degrees: dialDegValue, onMouseDown: handleNotchMouseDown }) : /* @__PURE__ */ jsx2(
                 "circle",
                 {
+                  className: "iconcraft-notch",
                   cx: notchX,
                   cy: notchY,
-                  r: "7",
-                  fill: "var(--iconcraft-dial-color, #0071e3)",
+                  r: 7,
+                  fill: "var(--iconcraft-notch-color, #000)",
                   stroke: "#fff",
                   strokeWidth: "2",
-                  style: { pointerEvents: "auto", cursor: "grab" },
+                  style: { pointerEvents: "auto", cursor: ROTATE_CURSOR },
                   onMouseDown: handleNotchMouseDown
                 }
               ),
@@ -2129,7 +2149,7 @@ function IconCraftView({
                     y: labelY,
                     textAnchor: "middle",
                     dominantBaseline: "central",
-                    fill: "var(--iconcraft-dial-color, #0071e3)",
+                    fill: "var(--iconcraft-dial-color, #000)",
                     fontSize: "11",
                     fontWeight: "600",
                     fontFamily: "system-ui, sans-serif",
@@ -2250,7 +2270,8 @@ async function initWasm() {
 }
 var shapeModeMap2 = {
   jelly: 0,
-  droplet: 1,
+  bubble: 1,
+  sticker: 3,
   wax: 2
 };
 function isUrl(str) {
@@ -2466,7 +2487,8 @@ async function initWasm2() {
 }
 var shapeModeMap3 = {
   jelly: 0,
-  droplet: 1,
+  bubble: 1,
+  sticker: 3,
   wax: 2
 };
 function isUrl2(str) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gospelo-iconcraft-react",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "description": "IconCraft React components - 3D decorative icon shapes from SVG",
   "license": "MIT",
   "author": "gorosun <goro-hayakawa@no-studio.net>",
@@ -32,7 +32,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "gospelo-iconcraft-wasm": "^0.3.0",
+    "gospelo-iconcraft-wasm": "workspace:*",
     "ulid": "^3.0.2"
   },
   "devDependencies": {