gospelo-iconcraft-react 0.1.0 → 0.2.0

package/README.md

@@ -1,24 +1,24 @@
-# @gospelo-dev/iconcraft-react
+# gospelo-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
+npm install gospelo-iconcraft-react
 ```
 
 ## Quick Start
 
 ```tsx
-import { IconCraft } from '@gospelo-dev/iconcraft-react';
+import { IconCraftShape } from 'gospelo-iconcraft-react';
 
 function App() {
   return (
-    <IconCraft
-      svgContent="<svg>...</svg>"
+    <IconCraftShape
+      svg="<svg>...</svg>"
       mode="wax"
-      baseColor="#6366f1"
+      shapeColor="#6366f1"
     />
   );
 }
@@ -31,12 +31,13 @@ function App() {
 Modern component with full feature support.
 
 ```tsx
-import { IconCraftShape } from '@gospelo-dev/iconcraft-react';
+import { IconCraftShape } from 'gospelo-iconcraft-react';
 
 <IconCraftShape
   svg="<svg>...</svg>"
   mode="jelly"
-  color="#10b981"
+  shapeColor="#10b981"
+  iconColor="#1d1d1f"
   size={120}
   animation="bounce"
   shadow
@@ -49,8 +50,9 @@ import { IconCraftShape } from '@gospelo-dev/iconcraft-react';
 |------|------|---------|-------------|
 | `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 |
+| `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 |
 | `size` | `number \| string` | - | Width and height |
 | `width` | `number \| string` | - | Width |
 | `height` | `number \| string` | - | Height |
@@ -72,7 +74,7 @@ import { IconCraftShape } from '@gospelo-dev/iconcraft-react';
 Original component for backwards compatibility.
 
 ```tsx
-import { IconCraft } from '@gospelo-dev/iconcraft-react';
+import { IconCraft } from 'gospelo-iconcraft-react';
 
 <IconCraft
   svgContent="<svg>...</svg>"
@@ -151,7 +153,7 @@ interface AnimationOptions {
 ### Custom Animations
 
 ```tsx
-import { registerAnimation, IconCraftShape } from '@gospelo-dev/iconcraft-react';
+import { registerAnimation, IconCraftShape } from 'gospelo-iconcraft-react';
 
 // Register custom animation
 registerAnimation('myAnimation', {
@@ -179,16 +181,16 @@ registerAnimation('myAnimation', {
 Low-level hook for direct WASM access.
 
 ```tsx
-import { useIconCraft } from '@gospelo-dev/iconcraft-react';
+import { useIconCraft } from 'gospelo-iconcraft-react';
 
 function MyComponent() {
-  const { result, loading, error, generate } = useIconCraft({
+  const { result, isLoading, error, generate } = useIconCraft({
     svg: svgContent,
     mode: 'wax',
-    color: '#6366f1',
+    shapeColor: '#6366f1',
   });
 
-  if (loading) return <div>Loading...</div>;
+  if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
 
   return (
@@ -206,7 +208,7 @@ import {
   IconCraftProvider,
   useIconCraftStore,
   IconCraftView,
-} from '@gospelo-dev/iconcraft-react';
+} from 'gospelo-iconcraft-react';
 
 function App() {
   return (
@@ -241,7 +243,7 @@ import type {
   AnimationOptions,
   IconCraftResult,
   IconCraftShapeProps,
-} from '@gospelo-dev/iconcraft-react';
+} from 'gospelo-iconcraft-react';
 ```
 
 ## Browser Support

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { CSSProperties, ReactNode } from 'react';
-import * as _gospelo_dev_iconcraft_wasm from '@gospelo-dev/iconcraft-wasm';
+import * as gospelo_iconcraft_wasm from 'gospelo-iconcraft-wasm';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ShapeMode = 'jelly' | 'droplet' | 'wax';
-type IconStyle = 'original' | 'white' | 'dark' | 'emboss';
+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';
 /**
@@ -95,7 +95,7 @@ interface IconCraftShapeProps {
     /** Shape mode: jelly, droplet, or wax */
     mode?: ShapeMode;
     /** Base color for the shape (hex) */
-    color?: string;
+    shapeColor?: string;
     /** Custom color palette (overrides color) */
     palette?: Partial<ColorPalette>;
     /** Icon rendering style */
@@ -149,8 +149,9 @@ interface IconCraftProps {
  */
 interface IconCraftConfigOptions {
     mode?: ShapeMode;
-    color?: string;
+    shapeColor?: string;
     iconStyle?: IconStyle;
+    iconColor?: string;
     shadow?: boolean;
     highlight?: boolean;
     offset?: number;
@@ -173,8 +174,9 @@ declare const DEFAULT_CONFIG: Required<Omit<IconCraftConfigOptions, 'width' | 'h
  */
 declare class IconCraftConfig {
     readonly mode: ShapeMode;
-    readonly color: string;
+    readonly shapeColor: string;
     readonly iconStyle: IconStyle;
+    readonly iconColor: string;
     readonly shadow: boolean;
     readonly highlight: boolean;
     readonly offset: number;
@@ -199,7 +201,7 @@ declare class IconCraftConfig {
         resolution: number;
         simplify: number;
         includeIcon: boolean;
-        color: string;
+        shapeColor: string;
     };
     /**
      * スタイル用のサイズを取得
@@ -325,7 +327,7 @@ interface WasmGenerateParams {
     resolution: number;
     simplify: number;
     includeIcon: boolean;
-    color: string;
+    shapeColor: string;
 }
 /**
  * WASMマネージャー（Singleton）
@@ -342,7 +344,7 @@ declare class WasmManagerClass {
     /**
      * WASMモジュールを初期化
      */
-    init(): Promise<typeof _gospelo_dev_iconcraft_wasm>;
+    init(): Promise<typeof gospelo_iconcraft_wasm>;
     /**
      * 初期化済みかどうか
      */
@@ -476,7 +478,7 @@ interface IconCraftViewProps {
  *
  * @example
  * ```tsx
- * const factory = new IconCraftFactory({ mode: 'wax', color: '#6366f1' });
+ * const factory = new IconCraftFactory({ mode: 'wax', shapeColor: '#6366f1' });
  * const icon = factory.create('<svg>...</svg>');
  *
  * <IconCraftView instance={icon} zIndex={10} />
@@ -484,6 +486,76 @@ interface IconCraftViewProps {
  */
 declare function IconCraftView({ instance, animation, animationTarget, animateOnHover, zIndex, className, style, onClick, onLoad, onError, }: IconCraftViewProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * IconCraftSimple Props
+ *
+ * シンプルなインターフェースでIconCraftを使用するためのコンポーネント
+ */
+interface IconCraftSimpleProps {
+    /** SVG URL または SVG文字列 */
+    src: string;
+    /** シェイプモード */
+    mode?: ShapeMode;
+    /** アイコンスタイル */
+    iconStyle?: IconStyle;
+    /** アイコンの色（stroke/fillスタイル時） */
+    iconColor?: string;
+    /** シェイプカラー (hex) */
+    shapeColor?: string;
+    /** サイズ (px) */
+    size?: number;
+    /** アニメーション種類 */
+    animation?: AnimationType;
+    /** アニメーションオプション */
+    animationOptions?: AnimationOptions;
+    /** アニメーションターゲット */
+    animationTarget?: AnimationTarget;
+    /** ホバー時にアニメーション */
+    animateOnHover?: boolean;
+    /** Z-index */
+    zIndex?: number;
+    /** クラス名 */
+    className?: string;
+    /** インラインスタイル */
+    style?: React.CSSProperties;
+    /** クリックイベント */
+    onClick?: () => void;
+    /** ロード完了コールバック */
+    onLoad?: () => void;
+    /** エラーコールバック */
+    onError?: (error: string) => void;
+    /** 詳細設定（IconCraftViewに渡す追加props） */
+    viewProps?: Partial<Omit<IconCraftViewProps, 'instance'>>;
+}
+/**
+ * IconCraftSimple
+ *
+ * 最もシンプルな使い方でIconCraftを利用できるコンポーネント
+ *
+ * @example
+ * ```tsx
+ * // 基本的な使い方
+ * <IconCraftSimple src="/icon.svg" />
+ *
+ * // カスタマイズ
+ * <IconCraftSimple
+ *   src="https://example.com/icon.svg"
+ *   mode="jelly"
+ *   shapeColor="#6366f1"
+ *   size={200}
+ *   animation="float"
+ * />
+ *
+ * // SVG文字列を直接渡す
+ * <IconCraftSimple
+ *   src={`<svg>...</svg>`}
+ *   mode="droplet"
+ *   iconStyle="emboss"
+ * />
+ * ```
+ */
+declare function IconCraftSimple({ src, mode, iconStyle, iconColor, shapeColor, size, animation, animationOptions, animationTarget, animateOnHover, zIndex, className, style, onClick, onLoad, onError, viewProps, }: IconCraftSimpleProps): react_jsx_runtime.JSX.Element;
+
 /**
  * IconCraftShape - Full-featured emboss icon component
  *
@@ -492,13 +564,13 @@ declare function IconCraftView({ instance, animation, animationTarget, animateOn
  * <IconCraftShape
  *   svg="<svg>...</svg>"
  *   mode="wax"
- *   color="#6366f1"
+ *   shapeColor="#6366f1"
  *   size={120}
  *   animation="float"
  * />
  * ```
  */
-declare function IconCraftShape({ svg, mode, color, iconStyle, shadow: _shadow, highlight: _highlight, offset, resolution, simplify, width, height, size, animation, animateOnHover, className, style, onLoad, onError, onClick, }: IconCraftShapeProps): react_jsx_runtime.JSX.Element | null;
+declare function IconCraftShape({ svg, mode, shapeColor, iconStyle, shadow: _shadow, highlight: _highlight, offset, resolution, simplify, width, height, size, animation, animateOnHover, className, style, onLoad, onError, onClick, }: IconCraftShapeProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Legacy IconCraft component
@@ -756,7 +828,7 @@ interface UseIconCraftCreateOptions {
  * @example
  * ```tsx
  * const createIcon = useIconCraftCreate({
- *   config: { mode: 'wax', color: '#6366f1' },
+ *   config: { mode: 'wax', shapeColor: '#6366f1' },
  *   autoSelect: true,
  * });
  *
@@ -777,8 +849,8 @@ interface UseIconCraftOptions {
     svg: string;
     /** Shape mode */
     mode?: ShapeMode;
-    /** Base color (hex) */
-    color?: string;
+    /** Shape color (hex) */
+    shapeColor?: string;
     /** Icon style */
     iconStyle?: IconStyle;
     /** Contour offset */
@@ -812,7 +884,7 @@ interface UseIconCraftReturn {
  * const { result, isLoading, error } = useIconCraft({
  *   svg: '<svg>...</svg>',
  *   mode: 'wax',
- *   color: '#6366f1',
+ *   shapeColor: '#6366f1',
  * });
  * ```
  */
@@ -939,4 +1011,101 @@ declare function getKeyframes(type: AnimationType): string;
 declare const keyframes: Record<BuiltInAnimationType, string>;
 declare function injectKeyframes(type: AnimationType): void;
 
-export { type AnimationOptions, type AnimationTarget, type AnimationType, type BuiltInAnimationType, type ColorPalette, type CustomAnimationDefinition, type CustomAnimationRegistry, DEFAULT_CONFIG, DEFAULT_METADATA, type EmbossIconData, type EmbossPath, IconCraft, IconCraftConfig, type IconCraftConfigOptions, type IconCraftContextValue, type IconCraftDispatcher, type IconCraftEvent, type IconCraftEventFilter, type IconCraftEventHandler, type IconCraftEventType, IconCraftFactory, IconCraftInstance, type IconCraftMetadata, type IconCraftProps, IconCraftProvider, type IconCraftProviderProps, IconCraftRegistry, type IconCraftResult, IconCraftShape, type IconCraftShapeProps, type IconCraftStoreActions, type IconCraftStoreState, IconCraftView, type IconCraftViewProps, type IconLayout, type IconStyle, type ShapeMode, type SvgPaths, type TransformOriginCustom, type TransformOriginPreset, type TransformOriginValue, type UseIconCraftCreateOptions, type UseIconCraftReturn$1 as UseIconCraftInstanceReturn, type UseIconCraftOptions, type UseIconCraftReturn, type UseIconCraftSelectionReturn, type WasmGenerateParams, WasmManager, animationDefaults, createDispatcher, defaultFactory, generateIconId, getAnimationDefaults, getAnimationName, getAnimationStyle, getCustomAnimation, getKeyframes, getTimestampFromId, getTransformOrigin, globalRegistry, injectKeyframes, keyframes, parseAnimationOptions, registerAnimation, useIconCraft, useIconCraftContext, useIconCraftCreate, useIconCraftEvent, useIconCraft$1 as useIconCraftInstance, useIconCraftSelection, useIconCraftStore, useLegacyIconCraft };
+/**
+ * バックアップ用のアイコンデータ
+ */
+interface IconBackupData {
+    /** SVG URL または SVG文字列 */
+    svg: string;
+    /** シェイプモード */
+    mode: ShapeMode;
+    /** アイコンスタイル */
+    iconStyle: IconStyle;
+    /** シェイプカラー */
+    shapeColor: string;
+    /** サイズ */
+    size: number;
+    /** X座標（オプション） */
+    x?: number;
+    /** Y座標（オプション） */
+    y?: number;
+    /** Z-index（オプション） */
+    zIndex?: number;
+    /** アイコンの色（オプション） */
+    iconColor?: string;
+    /** アニメーション（オプション） */
+    animation?: AnimationType;
+    /** カスタムメタデータ（オプション） */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * バックアップファイルの形式
+ */
+interface IconCraftBackup {
+    /** バージョン */
+    version: string;
+    /** 作成日時 */
+    createdAt: string;
+    /** ライセンス（オプション） */
+    license?: string;
+    /** ライセンス元URL（オプション） */
+    licenseUrl?: string;
+    /** アイコンデータの配列 */
+    icons: IconBackupData[];
+    /** グローバル設定（オプション） */
+    settings?: {
+        defaultMode?: ShapeMode;
+        defaultIconStyle?: IconStyle;
+        defaultShapeColor?: string;
+        defaultSize?: number;
+    };
+}
+/**
+ * 現在のバックアップバージョン
+ */
+declare const BACKUP_VERSION = "1.0.0";
+/**
+ * バックアップ作成オプション
+ */
+interface CreateBackupOptions {
+    /** グローバル設定 */
+    settings?: IconCraftBackup['settings'];
+    /** ライセンス */
+    license?: string;
+    /** ライセンス元URL */
+    licenseUrl?: string;
+}
+/**
+ * バックアップデータを作成
+ */
+declare function createBackup(icons: IconBackupData[], options?: CreateBackupOptions): IconCraftBackup;
+/**
+ * バックアップをJSONファイルとしてダウンロード
+ */
+declare function downloadBackup(backup: IconCraftBackup, filename?: string): void;
+/**
+ * バックアップをエクスポート（JSON文字列として）
+ */
+declare function exportBackup(backup: IconCraftBackup): string;
+/**
+ * バックアップの検証結果
+ */
+interface BackupValidationResult {
+    valid: boolean;
+    errors: string[];
+    warnings: string[];
+}
+/**
+ * バックアップデータを検証
+ */
+declare function validateBackup(data: unknown): BackupValidationResult;
+/**
+ * JSONファイルからバックアップを読み込み
+ */
+declare function parseBackup(json: string): IconCraftBackup | null;
+/**
+ * ファイル入力からバックアップを読み込み
+ */
+declare function loadBackupFromFile(file: File): Promise<IconCraftBackup | null>;
+
+export { type AnimationOptions, type AnimationTarget, type AnimationType, BACKUP_VERSION, type BackupValidationResult, type BuiltInAnimationType, type ColorPalette, type CreateBackupOptions, type CustomAnimationDefinition, type CustomAnimationRegistry, DEFAULT_CONFIG, DEFAULT_METADATA, type EmbossIconData, type EmbossPath, type IconBackupData, IconCraft, type IconCraftBackup, IconCraftConfig, type IconCraftConfigOptions, type IconCraftContextValue, type IconCraftDispatcher, type IconCraftEvent, type IconCraftEventFilter, type IconCraftEventHandler, type IconCraftEventType, IconCraftFactory, IconCraftInstance, type IconCraftMetadata, type IconCraftProps, IconCraftProvider, type IconCraftProviderProps, IconCraftRegistry, type IconCraftResult, IconCraftShape, type IconCraftShapeProps, IconCraftSimple, type IconCraftSimpleProps, type IconCraftStoreActions, type IconCraftStoreState, IconCraftView, type IconCraftViewProps, type IconLayout, type IconStyle, type ShapeMode, type SvgPaths, type TransformOriginCustom, type TransformOriginPreset, type TransformOriginValue, type UseIconCraftCreateOptions, type UseIconCraftReturn$1 as UseIconCraftInstanceReturn, type UseIconCraftOptions, type UseIconCraftReturn, type UseIconCraftSelectionReturn, type WasmGenerateParams, WasmManager, animationDefaults, createBackup, createDispatcher, defaultFactory, downloadBackup, exportBackup, generateIconId, getAnimationDefaults, getAnimationName, getAnimationStyle, getCustomAnimation, getKeyframes, getTimestampFromId, getTransformOrigin, globalRegistry, injectKeyframes, keyframes, loadBackupFromFile, parseAnimationOptions, parseBackup, registerAnimation, useIconCraft, useIconCraftContext, useIconCraftCreate, useIconCraftEvent, useIconCraft$1 as useIconCraftInstance, useIconCraftSelection, useIconCraftStore, useLegacyIconCraft, validateBackup };

package/dist/index.js

@@ -1,8 +1,9 @@
 // src/core/IconCraftConfig.ts
 var DEFAULT_CONFIG = {
   mode: "wax",
-  color: "#6366f1",
+  shapeColor: "#6366f1",
   iconStyle: "emboss",
+  iconColor: "#1d1d1f",
   shadow: true,
   highlight: true,
   offset: 20,
@@ -17,8 +18,9 @@ var DEFAULT_CONFIG = {
 var IconCraftConfig = class _IconCraftConfig {
   constructor(options = {}) {
     this.mode = options.mode ?? DEFAULT_CONFIG.mode;
-    this.color = options.color ?? DEFAULT_CONFIG.color;
+    this.shapeColor = options.shapeColor ?? DEFAULT_CONFIG.shapeColor;
     this.iconStyle = options.iconStyle ?? DEFAULT_CONFIG.iconStyle;
+    this.iconColor = options.iconColor ?? DEFAULT_CONFIG.iconColor;
     this.shadow = options.shadow ?? DEFAULT_CONFIG.shadow;
     this.highlight = options.highlight ?? DEFAULT_CONFIG.highlight;
     this.offset = options.offset ?? DEFAULT_CONFIG.offset;
@@ -36,8 +38,9 @@ var IconCraftConfig = class _IconCraftConfig {
   clone(overrides = {}) {
     return new _IconCraftConfig({
       mode: overrides.mode ?? this.mode,
-      color: overrides.color ?? this.color,
+      shapeColor: overrides.shapeColor ?? this.shapeColor,
       iconStyle: overrides.iconStyle ?? this.iconStyle,
+      iconColor: overrides.iconColor ?? this.iconColor,
       shadow: overrides.shadow ?? this.shadow,
       highlight: overrides.highlight ?? this.highlight,
       offset: overrides.offset ?? this.offset,
@@ -61,7 +64,7 @@ var IconCraftConfig = class _IconCraftConfig {
       resolution: this.resolution,
       simplify: this.simplify,
       includeIcon: needsEmbossSvg,
-      color: this.color
+      shapeColor: this.shapeColor
     };
   }
   /**
@@ -88,7 +91,7 @@ function createCacheKey(params) {
     resolution: params.resolution,
     simplify: params.simplify,
     includeIcon: params.includeIcon,
-    color: params.color
+    shapeColor: params.shapeColor
   });
 }
 var shapeModeMap = {
@@ -110,7 +113,7 @@ var WasmManagerClass = class {
     if (this.module) return this.module;
     if (this.initPromise) return this.initPromise;
     this.initPromise = (async () => {
-      const wasm = await import("./icon_craft_wasm-JDPURZOP.js");
+      const wasm = await import("gospelo-iconcraft-wasm");
       await wasm.default();
       this.module = wasm;
       return wasm;
@@ -140,7 +143,7 @@ var WasmManagerClass = class {
       params.resolution,
       params.simplify,
       params.includeIcon,
-      params.color
+      params.shapeColor
     );
     if (result.success) {
       this.addToCache(cacheKey, result);
@@ -205,7 +208,7 @@ var IconCraftRegistry = class {
   register(instance) {
     const id = instance.id;
     const mode = instance.config.mode;
-    const color = instance.config.color;
+    const color = instance.config.shapeColor;
     this.byId.set(id, instance);
     if (!this.byMode.has(mode)) {
       this.byMode.set(mode, /* @__PURE__ */ new Set());
@@ -223,7 +226,7 @@ var IconCraftRegistry = class {
     const instance = this.byId.get(id);
     if (!instance) return false;
     const mode = instance.config.mode;
-    const color = instance.config.color;
+    const color = instance.config.shapeColor;
     this.byId.delete(id);
     this.byMode.get(mode)?.delete(id);
     if (this.byMode.get(mode)?.size === 0) {
@@ -417,7 +420,7 @@ var IconCraftInstance = class _IconCraftInstance {
       console.log("[IconCraftInstance] Generating with params:", {
         id: this._id,
         mode: params.mode,
-        color: params.color
+        shapeColor: params.shapeColor
       });
       const result = await WasmManager.generate({
         svgContent,
@@ -426,7 +429,7 @@ var IconCraftInstance = class _IconCraftInstance {
         resolution: params.resolution,
         simplify: params.simplify,
         includeIcon: params.includeIcon,
-        color: params.color
+        shapeColor: params.shapeColor
       });
       if (!result.success) {
         throw new Error(result.error || "Generation failed");
@@ -497,7 +500,7 @@ var IconCraftFactory = class _IconCraftFactory {
     const newConfig = this.prototype.clone(overrides);
     return new _IconCraftFactory({
       mode: newConfig.mode,
-      color: newConfig.color,
+      shapeColor: newConfig.shapeColor,
       iconStyle: newConfig.iconStyle,
       shadow: newConfig.shadow,
       highlight: newConfig.highlight,
@@ -839,6 +842,7 @@ function IconCraftView({
   const renderedSvg = useMemo(() => {
     const instanceId = instance.id;
     const iconStyle = instance.config.iconStyle;
+    const iconColor = instance.config.iconColor;
     const result = instance.result;
     const mode = instance.config.mode;
     const isWax = mode === "wax";
@@ -861,27 +865,27 @@ function IconCraftView({
           const viewBoxMatch2 = svgContent2.match(/viewBox="([^"]*)"/);
           const viewBox2 = viewBoxMatch2 ? viewBoxMatch2[1] : "0 0 36 36";
           let innerSvg2 = svgContent2.replace(/<\/?svg[^>]*>/g, "");
-          let iconFill2;
-          let useOriginalColors2 = false;
+          let iconContent;
           switch (iconStyle) {
-            case "white":
-              iconFill2 = "#ffffff";
+            case "fill":
               innerSvg2 = innerSvg2.replace(/fill="[^"]*"/g, "");
+              iconContent = `<g fill="${iconColor}">${innerSvg2}</g>`;
               break;
-            case "dark":
-              iconFill2 = "#1d1d1f";
+            case "stroke":
               innerSvg2 = innerSvg2.replace(/fill="[^"]*"/g, "");
+              innerSvg2 = innerSvg2.replace(/stroke="[^"]*"/g, "");
+              innerSvg2 = innerSvg2.replace(/stroke-width="[^"]*"/g, "");
+              iconContent = `<g fill="none" stroke="${iconColor}" stroke-width="1.5">${innerSvg2}</g>`;
               break;
             case "original":
             default:
-              iconFill2 = "currentColor";
-              useOriginalColors2 = true;
+              iconContent = innerSvg2;
               break;
           }
           const layout2 = result?.icon_layout;
           const newIconSvg = `<g filter="none">
     <svg x="${layout2?.left_percent ?? 28}" y="${layout2?.top_percent ?? 28}" width="${layout2?.width_percent ?? 44}" height="${layout2?.height_percent ?? 44}" viewBox="${viewBox2}" overflow="visible">
-      ${useOriginalColors2 ? innerSvg2 : `<g fill="${iconFill2}">${innerSvg2}</g>`}
+      ${iconContent}
     </svg>
   </g>`;
           svg2 = svg2.replace(/<g filter="none">[\s\S]*?<\/g>\s*<\/svg>$/, `${newIconSvg}
@@ -908,16 +912,18 @@ function IconCraftView({
     if (!result || !result.svg_paths?.clip) return "";
     const svgContent = instance.svgContent;
     if (!svgContent) return "";
-    const color = instance.config.color;
+    const color = instance.config.shapeColor;
     const layout = result.icon_layout;
-    let iconFill;
     let useOriginalColors = false;
+    let isStroke = false;
+    let iconFill;
     switch (iconStyle) {
-      case "white":
-        iconFill = "#ffffff";
+      case "fill":
+        iconFill = iconColor;
         break;
-      case "dark":
-        iconFill = "#1d1d1f";
+      case "stroke":
+        iconFill = "none";
+        isStroke = true;
         break;
       case "original":
       default:
@@ -933,9 +939,13 @@ function IconCraftView({
     const viewBoxMatch = svgContent.match(/viewBox="([^"]*)"/);
     const viewBox = viewBoxMatch ? viewBoxMatch[1] : "0 0 24 24";
     let innerSvg = svgContent.replace(/<\/?svg[^>]*>/g, "");
-    if (iconStyle === "white" || iconStyle === "dark") {
+    if (iconStyle === "fill" || iconStyle === "stroke") {
       innerSvg = innerSvg.replace(/fill="[^"]*"/g, "");
     }
+    if (isStroke) {
+      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%">
           <stop offset="0%" stop-color="${color}" stop-opacity="0.35"/>
           <stop offset="50%" stop-color="${color}" stop-opacity="0.4"/>
@@ -995,11 +1005,11 @@ function IconCraftView({
       <svg x="${layout?.left_percent ?? 28}" y="${layout?.top_percent ?? 28}"
            width="${layout?.width_percent ?? 44}" height="${layout?.height_percent ?? 44}"
            viewBox="${viewBox}" overflow="visible">
-        ${useOriginalColors ? innerSvg : `<g fill="${iconFill}">${innerSvg}</g>`}
+        ${useOriginalColors ? innerSvg : isStroke ? `<g fill="none" stroke="${iconColor}" stroke-width="1.5">${innerSvg}</g>` : `<g fill="${iconFill}">${innerSvg}</g>`}
       </svg>
     </svg>`;
     return svg;
-  }, [instance.id, instance.config.mode, instance.config.iconStyle, instance.config.color, instance.embossSvg, instance.result, instance.svgContent]);
+  }, [instance.id, instance.config.mode, instance.config.iconStyle, instance.config.iconColor, instance.config.shapeColor, instance.embossSvg, instance.result, instance.svgContent]);
   const { width, height } = instance.config.getSize();
   const hoverAnim = animateOnHover ?? instance.config.animateOnHover;
   const shouldAnimate = hoverAnim ? isHovering : true;
@@ -1133,16 +1143,67 @@ function LoadingIndicator() {
   );
 }
 
+// src/components/IconCraftSimple.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function IconCraftSimple({
+  src,
+  mode = "jelly",
+  iconStyle = "original",
+  iconColor = "#1d1d1f",
+  shapeColor = "#ffffff",
+  size = 160,
+  animation,
+  animationOptions,
+  animationTarget,
+  animateOnHover,
+  zIndex,
+  className,
+  style,
+  onClick,
+  onLoad,
+  onError,
+  viewProps
+}) {
+  const instance = useMemo2(() => {
+    const factory = new IconCraftFactory({
+      mode,
+      iconStyle,
+      iconColor,
+      shapeColor,
+      size
+    });
+    return factory.create(src);
+  }, [src, mode, iconStyle, iconColor, shapeColor, size]);
+  const resolvedAnimation = animation && animationOptions ? { ...animationOptions, type: animation } : animation;
+  return /* @__PURE__ */ jsx2(
+    IconCraftView,
+    {
+      instance,
+      animation: resolvedAnimation,
+      animationTarget,
+      animateOnHover,
+      zIndex,
+      className,
+      style,
+      onClick,
+      onLoad,
+      onError,
+      ...viewProps
+    }
+  );
+}
+
 // src/IconCraftShape.tsx
-import { useEffect as useEffect2, useState as useState2, useMemo as useMemo2, useCallback } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState2, useMemo as useMemo3, useCallback } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var wasmModule = null;
 var wasmInitPromise = null;
 async function initWasm() {
   if (wasmModule) return wasmModule;
   if (wasmInitPromise) return wasmInitPromise;
   wasmInitPromise = (async () => {
-    const wasm = await import("./icon_craft_wasm-JDPURZOP.js");
+    const wasm = await import("gospelo-iconcraft-wasm");
     await wasm.default();
     wasmModule = wasm;
     return wasm;
@@ -1169,7 +1230,7 @@ function IconCraftShape({
   svg,
   // Shape Settings
   mode = "wax",
-  color = "#6366f1",
+  shapeColor = "#6366f1",
   // Icon Style
   iconStyle = "emboss",
   // Effects (reserved for future use)
@@ -1198,7 +1259,7 @@ function IconCraftShape({
   const [isLoading, setIsLoading] = useState2(true);
   const [error, setError] = useState2(null);
   const [isHovering, setIsHovering] = useState2(false);
-  const animationOptions = useMemo2(
+  const animationOptions = useMemo3(
     () => parseAnimationOptions(animation),
     [animation]
   );
@@ -1225,7 +1286,7 @@ function IconCraftShape({
         simplify,
         iconStyle === "emboss",
         // include_icon
-        color
+        shapeColor
       );
       if (!wasmResult.success) {
         throw new Error(wasmResult.error || "Generation failed");
@@ -1239,7 +1300,7 @@ function IconCraftShape({
     } finally {
       setIsLoading(false);
     }
-  }, [svg, mode, color, iconStyle, offset, resolution, simplify, onLoad, onError]);
+  }, [svg, mode, shapeColor, iconStyle, offset, resolution, simplify, onLoad, onError]);
   useEffect2(() => {
     generate();
   }, [generate]);
@@ -1259,7 +1320,7 @@ function IconCraftShape({
   const handleMouseEnter = animateOnHover ? () => setIsHovering(true) : void 0;
   const handleMouseLeave = animateOnHover ? () => setIsHovering(false) : void 0;
   if (isLoading) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "div",
       {
         className,
@@ -1271,12 +1332,12 @@ function IconCraftShape({
           background: "#f0f0f0",
           borderRadius: "50%"
         },
-        children: /* @__PURE__ */ jsx2(LoadingSpinner, {})
+        children: /* @__PURE__ */ jsx3(LoadingSpinner, {})
       }
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "div",
       {
         className,
@@ -1299,7 +1360,7 @@ function IconCraftShape({
   if (!result?.emboss_svg) {
     return null;
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className,
@@ -1322,8 +1383,8 @@ function LoadingSpinner() {
         animation: "spin 1s linear infinite"
       },
       children: [
-        /* @__PURE__ */ jsx2("style", { children: `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }` }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3("style", { children: `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }` }),
+        /* @__PURE__ */ jsx3(
           "circle",
           {
             cx: "12",
@@ -1349,7 +1410,7 @@ async function initWasm2() {
   if (wasmModule2) return wasmModule2;
   if (wasmInitPromise2) return wasmInitPromise2;
   wasmInitPromise2 = (async () => {
-    const wasm = await import("./icon_craft_wasm-JDPURZOP.js");
+    const wasm = await import("gospelo-iconcraft-wasm");
     await wasm.default();
     wasmModule2 = wasm;
     return wasm;
@@ -1375,7 +1436,7 @@ function useIconCraft(options) {
   const {
     svg,
     mode = "wax",
-    color = "#6366f1",
+    shapeColor = "#6366f1",
     iconStyle = "emboss",
     offset = 20,
     resolution = 256,
@@ -1413,7 +1474,7 @@ function useIconCraft(options) {
         resolution,
         simplify,
         iconStyle === "emboss",
-        color
+        shapeColor
       );
       if (!wasmResult.success) {
         throw new Error(wasmResult.error || "Generation failed");
@@ -1424,7 +1485,7 @@ function useIconCraft(options) {
     } finally {
       setIsLoading(false);
     }
-  }, [svg, mode, color, iconStyle, offset, resolution, simplify]);
+  }, [svg, mode, shapeColor, iconStyle, offset, resolution, simplify]);
   useEffect3(() => {
     if (autoGenerate && svg) {
       generate();
@@ -1451,7 +1512,7 @@ function useLegacyIconCraft(options) {
   const { result, isLoading, error, generate } = useIconCraft({
     svg: svgContent,
     mode,
-    color: baseColor,
+    shapeColor: baseColor,
     offset,
     resolution,
     simplify: simplifyEpsilon,
@@ -1461,7 +1522,7 @@ function useLegacyIconCraft(options) {
 }
 
 // src/IconCraft.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function IconCraft({
   svgContent,
   mode = "jelly",
@@ -1477,13 +1538,13 @@ function IconCraft({
   const { result, isLoading, error } = useIconCraft({
     svg: svgContent,
     mode,
-    color: baseColor,
+    shapeColor: baseColor,
     offset,
     resolution,
     simplify: simplifyEpsilon
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx3("div", { className, style, children: "Loading..." });
+    return /* @__PURE__ */ jsx4("div", { className, style, children: "Loading..." });
   }
   if (error) {
     return /* @__PURE__ */ jsxs3("div", { className, style, children: [
@@ -1494,7 +1555,7 @@ function IconCraft({
   if (!result?.emboss_svg) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className,
@@ -1514,7 +1575,7 @@ import {
   useContext,
   useReducer,
   useCallback as useCallback3,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useRef
 } from "react";
 
@@ -1559,7 +1620,7 @@ var DEFAULT_METADATA = {
 };
 
 // src/context/IconCraftProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var IconCraftContext = createContext(null);
 function reducer(state, action) {
   switch (action.type) {
@@ -1638,7 +1699,7 @@ function IconCraftProvider({
   }
   const dispatcher = dispatcherRef.current;
   const zIndexRef = useRef(0);
-  const factory = useMemo3(
+  const factory = useMemo4(
     () => new IconCraftFactory(defaultConfig),
     [defaultConfig]
   );
@@ -1742,7 +1803,7 @@ function IconCraftProvider({
     }
     dispatch({ type: "CLEAR_ALL" });
   }, [state.instances, dispatcher]);
-  const contextValue = useMemo3(
+  const contextValue = useMemo4(
     () => ({
       state,
       actions: {
@@ -1782,7 +1843,7 @@ function IconCraftProvider({
       defaultConfig
     ]
   );
-  return /* @__PURE__ */ jsx4(IconCraftContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx5(IconCraftContext.Provider, { value: contextValue, children });
 }
 function useIconCraftContext() {
   const context = useContext(IconCraftContext);
@@ -1793,10 +1854,10 @@ function useIconCraftContext() {
 }
 
 // src/context/hooks.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo5 } from "react";
 function useIconCraftStore() {
   const { actions, state } = useIconCraftContext();
-  return useMemo4(
+  return useMemo5(
     () => ({
       // CRUD
       create: actions.create,
@@ -1836,7 +1897,7 @@ function useIconCraft2(id) {
     (zIndex) => actions.updateMetadata(id, { zIndex }),
     [actions, id]
   );
-  return useMemo4(
+  return useMemo5(
     () => ({
       instance,
       metadata,
@@ -1866,7 +1927,7 @@ function useIconCraft2(id) {
 }
 function useIconCraftSelection() {
   const { actions, state } = useIconCraftContext();
-  const selected = useMemo4(
+  const selected = useMemo5(
     () => Array.from(state.selection),
     [state.selection]
   );
@@ -1878,7 +1939,7 @@ function useIconCraftSelection() {
   const getSelectedInstances = useCallback4(() => {
     return selected.map((id) => state.instances.get(id)).filter((inst) => inst !== void 0);
   }, [selected, state.instances]);
-  return useMemo4(
+  return useMemo5(
     () => ({
       selected,
       count: selected.length,
@@ -1915,7 +1976,100 @@ function useIconCraftCreate(options = {}) {
     [actions, config, metadata, autoSelect]
   );
 }
+
+// src/utils/backup.ts
+var BACKUP_VERSION = "1.0.0";
+function createBackup(icons, options) {
+  return {
+    version: BACKUP_VERSION,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+    license: options?.license,
+    licenseUrl: options?.licenseUrl,
+    icons,
+    settings: options?.settings
+  };
+}
+function downloadBackup(backup, filename) {
+  const json = JSON.stringify(backup, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename || `iconcraft-backup-${Date.now()}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+function exportBackup(backup) {
+  return JSON.stringify(backup, null, 2);
+}
+function validateBackup(data) {
+  const errors = [];
+  const warnings = [];
+  if (!data || typeof data !== "object") {
+    return { valid: false, errors: ["Invalid backup format"], warnings: [] };
+  }
+  const backup = data;
+  if (!backup.version) {
+    errors.push("Missing version field");
+  } else if (backup.version !== BACKUP_VERSION) {
+    warnings.push(`Version mismatch: expected ${BACKUP_VERSION}, got ${backup.version}`);
+  }
+  if (!Array.isArray(backup.icons)) {
+    errors.push("Missing or invalid icons array");
+  } else {
+    backup.icons.forEach((icon, index) => {
+      if (!icon.svg) {
+        errors.push(`Icon ${index}: missing svg field`);
+      }
+      if (!icon.mode) {
+        warnings.push(`Icon ${index}: missing mode, will use default`);
+      }
+      if (!icon.shapeColor) {
+        warnings.push(`Icon ${index}: missing shapeColor, will use default`);
+      }
+    });
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings
+  };
+}
+function parseBackup(json) {
+  try {
+    const data = JSON.parse(json);
+    const validation = validateBackup(data);
+    if (!validation.valid) {
+      console.error("Backup validation failed:", validation.errors);
+      return null;
+    }
+    if (validation.warnings.length > 0) {
+      console.warn("Backup warnings:", validation.warnings);
+    }
+    return data;
+  } catch (e) {
+    console.error("Failed to parse backup:", e);
+    return null;
+  }
+}
+function loadBackupFromFile(file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const json = e.target?.result;
+      resolve(parseBackup(json));
+    };
+    reader.onerror = () => {
+      console.error("Failed to read file");
+      resolve(null);
+    };
+    reader.readAsText(file);
+  });
+}
 export {
+  BACKUP_VERSION,
   DEFAULT_CONFIG,
   DEFAULT_METADATA,
   IconCraft,
@@ -1925,11 +2079,15 @@ export {
   IconCraftProvider,
   IconCraftRegistry,
   IconCraftShape,
+  IconCraftSimple,
   IconCraftView,
   WasmManager,
   animationDefaults,
+  createBackup,
   createDispatcher,
   defaultFactory,
+  downloadBackup,
+  exportBackup,
   generateIconId,
   getAnimationDefaults,
   getAnimationName,
@@ -1941,7 +2099,9 @@ export {
   globalRegistry,
   injectKeyframes,
   keyframes,
+  loadBackupFromFile,
   parseAnimationOptions,
+  parseBackup,
   registerAnimation,
   useIconCraft,
   useIconCraftContext,
@@ -1950,5 +2110,6 @@ export {
   useIconCraft2 as useIconCraftInstance,
   useIconCraftSelection,
   useIconCraftStore,
-  useLegacyIconCraft
+  useLegacyIconCraft,
+  validateBackup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gospelo-iconcraft-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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.1.0",
+    "gospelo-iconcraft-wasm": "^0.2.0",
     "ulid": "^3.0.2"
   },
   "devDependencies": {