documentation fix

Author: Thereallo1026

docs/content/docs/api/builders.mdx

@@ -12,39 +12,57 @@ import { createStar, createCircle, createRectangle, createPolygon, cornerRoundin
 ## `createCircle`
 
 ```ts
-createCircle(vertices?: number): RoundedPolygon
+createCircle(numVertices?: number, radius?: number, centerX?: number, centerY?: number): RoundedPolygon
 ```
 
-Creates a circle approximation using cubic Bezier curves. Default is 8 vertices. More vertices = smoother circle.
+Creates a circle approximation using cubic Bezier curves. Default is 8 vertices, radius 1, centered at the origin. More vertices = smoother circle.
 
 ## `createRectangle`
 
 ```ts
-createRectangle(width: number, height: number, rounding?: CornerRounding): RoundedPolygon
+createRectangle(
+  width?: number,
+  height?: number,
+  rounding?: CornerRounding,
+  perVertexRounding?: CornerRounding[] | null,
+  centerX?: number,
+  centerY?: number
+): RoundedPolygon
 ```
 
-Creates a rectangle with optional corner rounding.
+Creates a rectangle with optional corner rounding. Defaults to a 2x2 rectangle centered at the origin. Use `perVertexRounding` to apply different rounding to each corner.
 
 ## `createStar`
 
 ```ts
 createStar(
-  points: number,
-  outerRadius: number,
-  innerRadius: number,
-  rounding: CornerRounding
+  numVerticesPerRadius: number,
+  radius?: number,
+  innerRadius?: number,
+  rounding?: CornerRounding,
+  innerRounding?: CornerRounding | null,
+  perVertexRounding?: CornerRounding[] | null,
+  centerX?: number,
+  centerY?: number
 ): RoundedPolygon
 ```
 
-Creates a star polygon. `innerRadius` is relative to `outerRadius` - a value of `0.5` means the inner points are halfway to the center.
+Creates a star polygon. Defaults to radius 1, inner radius 0.5, centered at the origin. `innerRadius` is relative to `radius` - a value of `0.5` means the inner points are halfway to the center. Use `innerRounding` to apply different rounding to inner vertices.
 
 ## `createPolygon`
 
 ```ts
-createPolygon(vertices: number, rounding: CornerRounding): RoundedPolygon
+createPolygon(
+  numVertices: number,
+  radius?: number,
+  centerX?: number,
+  centerY?: number,
+  rounding?: CornerRounding,
+  perVertexRounding?: CornerRounding[] | null
+): RoundedPolygon
 ```
 
-Creates a regular polygon (triangle, pentagon, hexagon, etc.) with the given number of vertices.
+Creates a regular polygon (triangle, pentagon, hexagon, etc.) with the given number of vertices. Defaults to radius 1, centered at the origin, with no rounding.
 
 ## `cornerRounding`
 
@@ -54,13 +72,13 @@ cornerRounding(radius: number, smoothing?: number): CornerRounding
 
 Creates a corner rounding configuration.
 
-- **radius** (0–1): Fraction of edge length used for rounding. `0` is sharp, `1` rounds the entire edge.
-- **smoothing** (0–1, default `0`): Cubic Bezier easing applied to the rounding. `0` gives circular arcs, higher values produce softer organic curves.
+- **radius** (0-1): Fraction of edge length used for rounding. `0` is sharp, `1` rounds the entire edge.
+- **smoothing** (0-1, default `0`): Cubic Bezier easing applied to the rounding. `0` gives circular arcs, higher values produce softer organic curves.
 
 ## `RoundedPolygon`
 
 The base shape class. Key methods:
 
 ### `.normalized(): RoundedPolygon`
 
-Returns a copy centered at the origin and scaled to fit within a unit circle. **Required before passing custom polygons to `Morph`.**
+Returns a copy scaled to fit within a 0-1 coordinate space (unit square), centered within the bounding box. **Required before passing custom polygons to `Morph`.**

docs/content/docs/api/core.mdx

@@ -19,7 +19,7 @@ Creates a morph between two shapes. Handles feature-matching, subdivision, and i
 
 ### `morph.asCubics(progress: number): Cubic[]`
 
-Returns the interpolated cubic curves at the given progress (0–1). Progress 0 is the start shape, 1 is the end shape.
+Returns the interpolated cubic curves at the given progress (0-1). Progress 0 is the start shape, 1 is the end shape.
 
 ## `getShape`
 
@@ -32,7 +32,7 @@ Returns a preset Material Design 3 shape as a `RoundedPolygon`. See [Available S
 ## `shapeNames`
 
 ```ts
-const shapeNames: readonly ShapeName[]
+const shapeNames: ShapeName[]
 ```
 
 Array of all 35 shape names. Useful for iteration.

docs/content/docs/api/output.mdx

@@ -38,10 +38,10 @@ The fixed vertex count is what makes CSS transitions work - both start and end p
 ## `toClipPathPath`
 
 ```ts
-toClipPathPath(cubics: Cubic[], samples?: number): string
+toClipPathPath(cubics: Cubic[], size?: number): string
 ```
 
-Converts cubics to a CSS `clip-path: path("...")` string. Preserves exact cubic Bezier curves. CSS **cannot** transition between two `path()` values, so use this only for static shapes.
+Converts cubics to a CSS `clip-path: path("...")` string. Optional `size` scales the output (default 100). Preserves exact cubic Bezier curves. CSS **cannot** transition between two `path()` values, so use this only for static shapes.
 
 ## `toMorphPair`
 

docs/content/docs/guides/custom-shapes.mdx

@@ -39,6 +39,9 @@ import { createPolygon, cornerRounding } from "shape-morph";
 
 const hexagon = createPolygon(
   6,                    // number of vertices
+  1,                    // radius
+  0,                    // centerX
+  0,                    // centerY
   cornerRounding(0.1)   // corner rounding
 );
 ```
@@ -58,8 +61,8 @@ const smoothCircle = createCircle(16); // more vertices = smoother
 import { cornerRounding } from "shape-morph";
 
 const rounding = cornerRounding(
-  0.2,  // radius (0–1, fraction of edge length)
-  0.5   // smoothing (0–1, optional, default 0)
+  0.2,  // radius (0-1, fraction of edge length)
+  0.5   // smoothing (0-1, optional, default 0)
 );
 ```
 
@@ -80,4 +83,4 @@ const morph = new Morph(star.normalized(), rect.normalized());
 const d = toPathD(morph.asCubics(0.5), 200);
 ```
 
-`.normalized()` centers the shape at the origin and scales it to fit within a unit circle. This ensures both shapes share the same coordinate space for morphing.
+`.normalized()` scales the shape to fit within a 0-1 coordinate space (unit square), centered within the bounding box. This ensures both shapes share the same coordinate space for morphing.

docs/content/docs/guides/react.mdx

@@ -21,9 +21,10 @@ Props:
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `name` | `ShapeName` | required | Shape to render |
-| `size` | `number` | `24` | Width and height in pixels |
+| `size` | `number` | `48` | Width and height in pixels |
 | `fill` | `string` | `"currentColor"` | Fill color |
 | `stroke` | `string` | - | Stroke color |
+| `strokeWidth` | `number` | - | Stroke width |
 | `className` | `string` | - | Class on the `<svg>` element |
 | `style` | `CSSProperties` | - | Style on the `<svg>` element |
 
@@ -58,17 +59,18 @@ Change the target `progress` and the hook smoothly animates from the current pos
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| `progress` | `number` | `0` | Target progress (0–1) |
+| `progress` | `number` | `0` | Target progress (0-1) |
 | `duration` | `number` | `300` | Animation duration in ms |
-| `size` | `number` | - | Output size for `pathD` |
+| `samples` | `number` | `4` | Samples per cubic for polygon output |
+| `size` | `number` | `100` | Output size for `pathD` |
 
 ### Return value
 
 | Property | Type | Description |
 |---|---|---|
 | `pathD` | `string` | SVG path `d` attribute |
 | `clipPath` | `string` | CSS `clip-path: polygon(...)` |
-| `progress` | `number` | Current animated progress (0–1) |
+| `progress` | `number` | Current animated progress (0-1) |
 
 The `progress` return value is the eased, animated value - not the target. Use it to sync other animations like rotation or color transitions.
 

src/core/material-shapes.ts

@@ -1,6 +1,6 @@
 // Ported from AOSP MaterialShapes.kt
 
-// all 37 Material Design 3 predefined shapes
+// all 35 Material Design 3 predefined shapes
 
 import {
   type CornerRounding,

src/output/clip-path.ts

@@ -42,7 +42,7 @@ export function toClipPathPath(cubics: Cubic[], size = 100): string {
  * // Both have the same vertex count → CSS can transition between them
  * ```
  *
- * @param cubics - Array of Cubic bezier curves (normalized 0–1)
+ * @param cubics - Array of Cubic bezier curves (normalized 0-1)
  * @param samplesPerCubic - Points to sample per cubic segment (default 4)
  * @returns CSS `polygon(...)` string with percentage coordinates
  */

src/output/svg-path.ts

@@ -8,7 +8,7 @@ import type { RoundedPolygon } from "../core/polygon";
  * anchor1 (end). These map to the SVG cubic bezier command:
  *   C control0X,control0Y control1X,control1Y anchor1X,anchor1Y
  *
- * Shapes from `getShape()` are normalized to 0–1 coordinates.
+ * Shapes from `getShape()` are normalized to 0-1 coordinates.
  * The `size` parameter scales them to pixel/viewBox space.
  */
 export function toPathD(cubics: Cubic[], size = 100): string {

src/react/use-morph.ts

@@ -5,7 +5,7 @@ import { toClipPathPolygon } from "../output/clip-path";
 import { toPathD } from "../output/svg-path";
 
 export interface MorphOptions {
-  /** Target progress (0–1). Changes trigger animation. */
+  /** Target progress (0-1). Changes trigger animation. */
   progress: number;
   /** Animation duration in ms (default 300) */
   duration?: number;
@@ -20,7 +20,7 @@ export interface MorphOutput {
   pathD: string;
   /** CSS `clip-path: polygon(...)` value */
   clipPath: string;
-  /** Current animated progress (0–1) */
+  /** Current animated progress (0-1) */
   progress: number;
 }