gospelo-iconcraft-react 0.3.0 → 0.3.1

package/README.md

@@ -10,6 +10,21 @@ npm install gospelo-iconcraft-react
 
 ## Quick Start
 
+### Factory Pattern (Recommended)
+
+```tsx
+import { IconCraftFactory, IconCraftView } from 'gospelo-iconcraft-react';
+
+const factory = new IconCraftFactory({ mode: 'wax', shapeColor: '#6366f1' });
+const icon = factory.create('<svg>...</svg>');
+
+function App() {
+  return <IconCraftView instance={icon} />;
+}
+```
+
+### Simple Usage
+
 ```tsx
 import { IconCraftShape } from 'gospelo-iconcraft-react';
 
@@ -26,9 +41,106 @@ function App() {
 
 ## Components
 
-### `<IconCraftShape>` (Recommended)
+### `<IconCraftView>` (Recommended)
 
-Modern component with full feature support.
+Instance-based component with rotation dial, reticle, and animation support. Works with `IconCraftFactory` / `IconCraftInstance`.
+
+```tsx
+import { IconCraftFactory, IconCraftView } from 'gospelo-iconcraft-react';
+
+const factory = new IconCraftFactory({
+  mode: 'jelly',
+  shapeColor: '#10b981',
+  size: 120,
+});
+
+const icon = factory.create('<svg>...</svg>');
+
+<IconCraftView
+  instance={icon}
+  animation="bounce"
+  showRotationDial
+  onRotationChange={(deg) => console.log(deg)}
+  dialPreset={dialPresetDotted}
+  showReticle
+  reticlePreset={reticlePresetCross}
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `instance` | `IconCraftInstance` | required | Icon instance from factory |
+| `animation` | `AnimationType \| AnimationOptions` | - | Animation preset or config |
+| `animationTarget` | `'shape' \| 'icon' \| 'both'` | `'both'` | Animation target |
+| `animateOnHover` | `boolean` | `false` | Trigger animation on hover |
+| `showRotationDial` | `boolean` | `false` | Show rotation dial overlay |
+| `onRotationChange` | `(deg: number) => void` | - | Rotation change callback |
+| `rotationSnap` | `number` | `5` | Snap angle in degrees |
+| `dialPreset` | `DialPreset` | `dialPresetDotted` | Dial visual preset |
+| `showReticle` | `boolean` | `false` | Show center reticle |
+| `reticlePreset` | `ReticlePreset` | - | Reticle visual preset |
+| `renderRing` | `(props: DialRingProps) => ReactNode` | - | Custom ring renderer |
+| `renderNotch` | `(props: DialNotchProps) => ReactNode` | - | Custom notch renderer |
+| `renderLabel` | `(props: DialLabelProps) => ReactNode` | - | Custom label renderer |
+| `renderReticle` | `(props: ReticleProps) => ReactNode` | - | Custom reticle renderer |
+| `zIndex` | `number` | - | Z-index for layering |
+| `className` | `string` | - | CSS class |
+| `style` | `CSSProperties` | - | Inline styles |
+| `onClick` | `() => void` | - | Click handler |
+
+### Dial Presets
+
+10 built-in dial presets for the rotation dial appearance:
+
+```tsx
+import { dialPresets, dialPresetDotted } from 'gospelo-iconcraft-react';
+
+// Use by name
+<IconCraftView instance={icon} showRotationDial dialPreset={dialPresets.dotted} />
+
+// Available presets
+// dialPresets.dotted   - Dotted circle ring (default)
+// dialPresets.dashed   - Dashed circle ring
+// dialPresets.solid    - Solid circle ring
+// dialPresets.ticks    - Tick marks around the ring
+// dialPresets.double   - Double circle ring
+// dialPresets.crosshair - Crosshair style
+// dialPresets.minimal  - Minimal style
+// dialPresets.needle   - Needle indicator
+// dialPresets.bar      - Bar indicator
+// dialPresets.arrow    - Arrow indicator
+```
+
+### Reticle Presets
+
+3 built-in reticle presets for center overlay:
+
+```tsx
+import { reticlePresets, reticlePresetCross } from 'gospelo-iconcraft-react';
+
+<IconCraftView instance={icon} showReticle reticlePreset={reticlePresets.cross} />
+
+// Available presets
+// reticlePresets.cross    - Crosshair reticle
+// reticlePresets.bullseye - Bullseye target reticle
+// reticlePresets.globe    - Globe/sphere reticle
+```
+
+### CSS Variables
+
+The dial and reticle color can be customized via CSS variable:
+
+```css
+:root {
+  --iconcraft-dial-color: #0071e3; /* default */
+}
+```
+
+### `<IconCraftShape>`
+
+Standalone component with full feature support (no factory needed).
 
 ```tsx
 import { IconCraftShape } from 'gospelo-iconcraft-react';
@@ -70,18 +182,26 @@ import { IconCraftShape } from 'gospelo-iconcraft-react';
 | `onError` | `(error) => void` | - | Called on error |
 | `onClick` | `() => void` | - | Click handler |
 
-### `<IconCraft>` (Legacy)
+## Factory Pattern
 
-Original component for backwards compatibility.
+`IconCraftFactory` creates reusable `IconCraftInstance` objects with shared configuration:
 
 ```tsx
-import { IconCraft } from 'gospelo-iconcraft-react';
+import { IconCraftFactory } from 'gospelo-iconcraft-react';
 
-<IconCraft
-  svgContent="<svg>...</svg>"
-  mode="wax"
-  baseColor="#6366f1"
-/>
+const factory = new IconCraftFactory({
+  mode: 'wax',
+  shapeColor: '#6366f1',
+  iconStyle: 'emboss',
+  size: 100,
+});
+
+// Create multiple icons with same config
+const icon1 = factory.create('<svg>...</svg>');
+const icon2 = factory.create('<svg>...</svg>');
+
+// Update config after creation
+icon1.config.update({ shapeColor: '#10b981', rotation: 45 });
 ```
 
 ## Shape Modes
@@ -244,6 +364,15 @@ import type {
   AnimationOptions,
   IconCraftResult,
   IconCraftShapeProps,
+  IconCraftViewProps,
+  DialPreset,
+  DialPresetName,
+  ReticlePreset,
+  ReticlePresetName,
+  DialRingProps,
+  DialNotchProps,
+  DialLabelProps,
+  ReticleProps,
 } from 'gospelo-iconcraft-react';
 ```
 

package/dist/index.js

@@ -553,9 +553,9 @@ var dialPresetDashed = {
       r: radius,
       fill: "none",
       stroke: dialColor,
-      strokeWidth: "2",
+      strokeWidth: "1.2",
       strokeDasharray: "6 4",
-      opacity: 0.7
+      opacity: 0.5
     }
   ),
   renderNotch: ({ x, y, onMouseDown }) => /* @__PURE__ */ jsx(
@@ -670,7 +670,7 @@ var dialPresetDotted = {
           {
             cx: dx,
             cy: dy,
-            r: deg % 90 === 0 ? 2.5 : 1.5,
+            r: deg % 90 === 0 ? 1.8 : 1,
             fill: dialColor,
             opacity: deg % 90 === 0 ? 0.8 : 0.4
           },
@@ -701,10 +701,37 @@ var dialPresetDotted = {
 };
 var dialPresetDouble = {
   name: "double",
-  renderRing: ({ cx, cy, radius }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("circle", { cx, cy, r: radius, fill: "none", stroke: dialColor, strokeWidth: "1", opacity: 0.3 }),
-    /* @__PURE__ */ jsx("circle", { cx, cy, r: radius - 4, fill: "none", stroke: dialColor, strokeWidth: "1", opacity: 0.3 })
-  ] }),
+  renderRing: ({ cx, cy, radius }) => {
+    const lines = [];
+    for (let i = 0; i < 8; i++) {
+      const deg = i * 45;
+      const rad = (deg - 90) * Math.PI / 180;
+      const x1 = cx + (radius - 4) * Math.cos(rad);
+      const y1 = cy + (radius - 4) * Math.sin(rad);
+      const x2 = cx + radius * Math.cos(rad);
+      const y2 = cy + radius * Math.sin(rad);
+      lines.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1,
+            y1,
+            x2,
+            y2,
+            stroke: dialColor,
+            strokeWidth: "0.8",
+            opacity: 0.3
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx, cy, r: radius, fill: "none", stroke: dialColor, strokeWidth: "1", opacity: 0.3 }),
+      /* @__PURE__ */ jsx("circle", { cx, cy, r: radius - 4, fill: "none", stroke: dialColor, strokeWidth: "1", opacity: 0.3 }),
+      lines
+    ] });
+  },
   renderNotch: ({ x, y, degrees, onMouseDown }) => /* @__PURE__ */ jsx(
     "g",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gospelo-iconcraft-react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "IconCraft React components - 3D decorative icon shapes from SVG",
   "license": "MIT",
   "author": "gorosun <goro-hayakawa@no-studio.net>",