@guinetik/gcanvas 1.0.0 → 1.0.1

package/docs/modules/shapes/base/transformable.md

@@ -1,243 +1,243 @@
-# Transformable
-
-> Rotation and scaling with transformed bounding boxes.
-
-**Module:** [shapes](../README.md) | **Extends:** [Renderable](./renderable.md) | **Source:** `src/shapes/transformable.js`
-
-## Overview
-
-Transformable adds canvas transformation support:
-- **Rotation** in degrees
-- **Scaling** (horizontal and vertical)
-- **Transformed bounds** calculation
-
-This is the final base layer before custom shape styling is introduced.
-
-## Constructor
-
-```js
-new Transformable(options)
-```
-
-### Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `rotation` | `number` | `0` | Rotation in degrees (clockwise) |
-| `scaleX` | `number` | `1` | Horizontal scale factor |
-| `scaleY` | `number` | `1` | Vertical scale factor |
-
-Plus all options from [Renderable](./renderable.md).
-
-## Properties
-
-### Inherited
-
-From Euclidian: `x`, `y`, `width`, `height`, `debug`, `debugColor`
-
-From Geometry2d: `minX`, `maxX`, `minY`, `maxY`, `crisp`, `boundsDirty`
-
-From Renderable: `visible`, `opacity`, `active`, `zIndex`, `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`, `tick`
-
-### Own Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `rotation` | `number` | Rotation angle in degrees |
-| `scaleX` | `number` | Horizontal scale (1 = normal) |
-| `scaleY` | `number` | Vertical scale (1 = normal) |
-
-## Methods
-
-### draw()
-
-Applies transforms before subclass drawing. Always call `super.draw()` in subclasses.
-
-```js
-class MyShape extends Transformable {
-  draw() {
-    super.draw();  // Apply transforms
-    // Custom drawing (in transformed space)
-  }
-}
-```
-
-### applyTransforms()
-
-Applies rotation and scale to the canvas context. Called by `draw()`.
-
-```js
-applyTransforms() {
-  Painter.rotate(this._rotation);
-  Painter.scale(this._scaleX, this._scaleY);
-}
-```
-
-Transform order: **rotate → scale**
-
-### calculateBounds()
-
-Returns the bounding box after applying rotation and scale.
-
-```js
-const bounds = shape.getBounds();
-// Returns axis-aligned bounding box of the rotated/scaled shape
-```
-
-## Rotation
-
-Rotation is specified in **degrees** (converted to radians internally):
-
-```js
-const shape = new Rectangle({
-  width: 100,
-  height: 50,
-  rotation: 45  // 45 degrees clockwise
-});
-
-// Update rotation
-shape.rotation = 90;   // 90 degrees
-shape.rotation = -30;  // 30 degrees counter-clockwise
-```
-
-## Scaling
-
-Scale factors multiply the shape's dimensions:
-
-```js
-const shape = new Circle(50, {
-  scaleX: 2,   // Twice as wide
-  scaleY: 0.5  // Half as tall
-});
-
-// Result: ellipse 200 wide, 50 tall
-```
-
-Common patterns:
-
-```js
-// Uniform scale
-shape.scaleX = 2;
-shape.scaleY = 2;  // 2x size in both dimensions
-
-// Flip horizontally
-shape.scaleX = -1;
-
-// Flip vertically
-shape.scaleY = -1;
-```
-
-## Transform Order
-
-Transforms are applied in this order:
-
-1. **Translate** to (x, y) — from Renderable
-2. **Rotate** by rotation angle
-3. **Scale** by scaleX, scaleY
-
-```js
-// Canvas transform stack:
-ctx.translate(x, y);      // Move to position
-ctx.rotate(rotation);     // Rotate around position
-ctx.scale(scaleX, scaleY); // Scale from position
-```
-
-## Transformed Bounds
-
-`getBounds()` returns the axis-aligned bounding box that contains the rotated/scaled shape:
-
-```js
-const rect = new Rectangle({
-  x: 100,
-  y: 100,
-  width: 100,
-  height: 50,
-  rotation: 45
-});
-
-const bounds = rect.getBounds();
-// Returns AABB that contains the rotated rectangle
-// bounds.width and bounds.height will be larger than original
-```
-
-```
-Original:           Rotated 45°:
-┌──────────┐            ◇
-│          │           ╱ ╲
-│    ●     │          ╱   ╲
-│          │         ◇  ●  ◇
-└──────────┘          ╲   ╱
-                       ╲ ╱
-                        ◇
-                    ┌───────┐
-                    │ AABB  │
-                    └───────┘
-```
-
-## Example: Spinning Shape
-
-```js
-import { Rectangle, Painter } from 'gcanvas';
-
-const canvas = document.getElementById('canvas');
-Painter.init(canvas.getContext('2d'));
-
-const rect = new Rectangle({
-  x: 400,
-  y: 300,
-  width: 100,
-  height: 60,
-  color: '#4ecdc4'
-});
-
-function animate() {
-  Painter.clear();
-
-  // Rotate 1 degree per frame
-  rect.rotation += 1;
-
-  rect.draw();
-  requestAnimationFrame(animate);
-}
-
-animate();
-```
-
-## Example: Pulsing Scale
-
-```js
-let time = 0;
-
-function animate() {
-  Painter.clear();
-  time += 0.05;
-
-  // Pulse between 0.8x and 1.2x
-  const scale = 1 + Math.sin(time) * 0.2;
-  shape.scaleX = scale;
-  shape.scaleY = scale;
-
-  shape.draw();
-  requestAnimationFrame(animate);
-}
-```
-
-## Inheritance
-
-```
-Renderable
-    └── Transformable  <── You are here
-            └── Shape
-                    └── Circle, Rectangle, Star, ...
-```
-
-## Related
-
-- [Renderable](./renderable.md) - Parent class
-- [Shape](./shape.md) - Adds fill/stroke styling
-- [Shape Hierarchy](../hierarchy.md) - Full inheritance diagram
-
-## See Also
-
-- [Shapes Module](../README.md)
-- [Rendering Pipeline](../../../concepts/rendering-pipeline.md)
+# Transformable
+
+> Rotation and scaling with transformed bounding boxes.
+
+**Module:** [shapes](../README.md) | **Extends:** [Renderable](./renderable.md) | **Source:** `src/shapes/transformable.js`
+
+## Overview
+
+Transformable adds canvas transformation support:
+- **Rotation** in degrees
+- **Scaling** (horizontal and vertical)
+- **Transformed bounds** calculation
+
+This is the final base layer before custom shape styling is introduced.
+
+## Constructor
+
+```js
+new Transformable(options)
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `rotation` | `number` | `0` | Rotation in degrees (clockwise) |
+| `scaleX` | `number` | `1` | Horizontal scale factor |
+| `scaleY` | `number` | `1` | Vertical scale factor |
+
+Plus all options from [Renderable](./renderable.md).
+
+## Properties
+
+### Inherited
+
+From Euclidian: `x`, `y`, `width`, `height`, `debug`, `debugColor`
+
+From Geometry2d: `minX`, `maxX`, `minY`, `maxY`, `crisp`, `boundsDirty`
+
+From Renderable: `visible`, `opacity`, `active`, `zIndex`, `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`, `tick`
+
+### Own Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `rotation` | `number` | Rotation angle in degrees |
+| `scaleX` | `number` | Horizontal scale (1 = normal) |
+| `scaleY` | `number` | Vertical scale (1 = normal) |
+
+## Methods
+
+### draw()
+
+Applies transforms before subclass drawing. Always call `super.draw()` in subclasses.
+
+```js
+class MyShape extends Transformable {
+  draw() {
+    super.draw();  // Apply transforms
+    // Custom drawing (in transformed space)
+  }
+}
+```
+
+### applyTransforms()
+
+Applies rotation and scale to the canvas context. Called by `draw()`.
+
+```js
+applyTransforms() {
+  Painter.rotate(this._rotation);
+  Painter.scale(this._scaleX, this._scaleY);
+}
+```
+
+Transform order: **rotate → scale**
+
+### calculateBounds()
+
+Returns the bounding box after applying rotation and scale.
+
+```js
+const bounds = shape.getBounds();
+// Returns axis-aligned bounding box of the rotated/scaled shape
+```
+
+## Rotation
+
+Rotation is specified in **degrees** (converted to radians internally):
+
+```js
+const shape = new Rectangle({
+  width: 100,
+  height: 50,
+  rotation: 45  // 45 degrees clockwise
+});
+
+// Update rotation
+shape.rotation = 90;   // 90 degrees
+shape.rotation = -30;  // 30 degrees counter-clockwise
+```
+
+## Scaling
+
+Scale factors multiply the shape's dimensions:
+
+```js
+const shape = new Circle(50, {
+  scaleX: 2,   // Twice as wide
+  scaleY: 0.5  // Half as tall
+});
+
+// Result: ellipse 200 wide, 50 tall
+```
+
+Common patterns:
+
+```js
+// Uniform scale
+shape.scaleX = 2;
+shape.scaleY = 2;  // 2x size in both dimensions
+
+// Flip horizontally
+shape.scaleX = -1;
+
+// Flip vertically
+shape.scaleY = -1;
+```
+
+## Transform Order
+
+Transforms are applied in this order:
+
+1. **Translate** to (x, y) — from Renderable
+2. **Rotate** by rotation angle
+3. **Scale** by scaleX, scaleY
+
+```js
+// Canvas transform stack:
+ctx.translate(x, y);      // Move to position
+ctx.rotate(rotation);     // Rotate around position
+ctx.scale(scaleX, scaleY); // Scale from position
+```
+
+## Transformed Bounds
+
+`getBounds()` returns the axis-aligned bounding box that contains the rotated/scaled shape:
+
+```js
+const rect = new Rectangle({
+  x: 100,
+  y: 100,
+  width: 100,
+  height: 50,
+  rotation: 45
+});
+
+const bounds = rect.getBounds();
+// Returns AABB that contains the rotated rectangle
+// bounds.width and bounds.height will be larger than original
+```
+
+```
+Original:           Rotated 45°:
+┌──────────┐            ◇
+│          │           ╱ ╲
+│    ●     │          ╱   ╲
+│          │         ◇  ●  ◇
+└──────────┘          ╲   ╱
+                       ╲ ╱
+                        ◇
+                    ┌───────┐
+                    │ AABB  │
+                    └───────┘
+```
+
+## Example: Spinning Shape
+
+```js
+import { Rectangle, Painter } from '@guinetik/gcanvas';
+
+const canvas = document.getElementById('canvas');
+Painter.init(canvas.getContext('2d'));
+
+const rect = new Rectangle({
+  x: 400,
+  y: 300,
+  width: 100,
+  height: 60,
+  color: '#4ecdc4'
+});
+
+function animate() {
+  Painter.clear();
+
+  // Rotate 1 degree per frame
+  rect.rotation += 1;
+
+  rect.draw();
+  requestAnimationFrame(animate);
+}
+
+animate();
+```
+
+## Example: Pulsing Scale
+
+```js
+let time = 0;
+
+function animate() {
+  Painter.clear();
+  time += 0.05;
+
+  // Pulse between 0.8x and 1.2x
+  const scale = 1 + Math.sin(time) * 0.2;
+  shape.scaleX = scale;
+  shape.scaleY = scale;
+
+  shape.draw();
+  requestAnimationFrame(animate);
+}
+```
+
+## Inheritance
+
+```
+Renderable
+    └── Transformable  <── You are here
+            └── Shape
+                    └── Circle, Rectangle, Star, ...
+```
+
+## Related
+
+- [Renderable](./renderable.md) - Parent class
+- [Shape](./shape.md) - Adds fill/stroke styling
+- [Shape Hierarchy](../hierarchy.md) - Full inheritance diagram
+
+## See Also
+
+- [Shapes Module](../README.md)
+- [Rendering Pipeline](../../../concepts/rendering-pipeline.md)

package/docs/modules/state/README.md

@@ -9,7 +9,7 @@ The state module provides a `StateMachine` class for managing states with enter/
 ## Quick Start
 
 ```js
-import { StateMachine } from 'gcanvas';
+import { StateMachine } from '@guinetik/gcanvas';
 
 // Basic state machine
 const fsm = new StateMachine({
@@ -421,7 +421,7 @@ fsm.onStateChange = (newState, oldState, data) => {
 A complete entity with states, phases, and game integration:
 
 ```js
-import { GameObject, StateMachine } from 'gcanvas';
+import { GameObject, StateMachine } from '@guinetik/gcanvas';
 
 class Boss extends GameObject {
   constructor(game) {

package/docs/modules/util/README.md

@@ -52,7 +52,7 @@ GCanvas provides a pseudo-3D system that projects 3D coordinates to 2D canvas:
 ## Basic 3D Setup
 
 ```js
-import { Game, Camera3D, Scene3D, GameObject, Rectangle } from 'gcanvas';
+import { Game, Camera3D, Scene3D, GameObject, Rectangle } from '@guinetik/gcanvas';
 
 class My3DDemo extends Game {
   init() {

package/docs/modules/util/camera3d.md

@@ -15,7 +15,7 @@ Camera3D provides 3D to 2D projection for creating pseudo-3D effects on a 2D can
 ## Quick Start
 
 ```js
-import { Camera3D } from 'gcanvas';
+import { Camera3D } from '@guinetik/gcanvas';
 
 // Create camera with initial rotation
 const camera = new Camera3D({
@@ -224,7 +224,7 @@ camera.lookAt(100, 50, 200);  // Look toward point
 The most common usage - let Scene3D handle projection automatically:
 
 ```js
-import { Camera3D, Scene3D, GameObject } from 'gcanvas';
+import { Camera3D, Scene3D, GameObject } from '@guinetik/gcanvas';
 
 class MyDemo extends Game {
   init() {
@@ -262,7 +262,7 @@ class MyDemo extends Game {
 For 3D particle effects:
 
 ```js
-import { Camera3D, ParticleSystem, ParticleEmitter, Updaters } from 'gcanvas';
+import { Camera3D, ParticleSystem, ParticleEmitter, Updaters } from '@guinetik/gcanvas';
 
 const camera = new Camera3D({ rotationX: 0.3 });
 camera.enableMouseControl(canvas);

package/docs/modules/util/scene3d.md

@@ -16,7 +16,7 @@ Scene3D bridges the GameObject/Scene system with Camera3D. It allows you to posi
 ## Quick Start
 
 ```js
-import { Game, Camera3D, Scene3D, GameObject, Rectangle } from 'gcanvas';
+import { Game, Camera3D, Scene3D, GameObject, Rectangle } from '@guinetik/gcanvas';
 
 class BoxObject extends GameObject {
   constructor(game) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guinetik/gcanvas",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Canvas Utilities and 2d Primitives",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -43,7 +43,9 @@
   "homepage": "https://github.com/guinetik/gcanvas#readme",
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
+    "better-docs": "^2.7.3",
     "gh-pages": "^6.3.0",
+    "jsdoc": "^4.0.4",
     "jsdom": "^26.1.0",
     "terser": "^5.39.0",
     "vite": "^6.2.5",

package/readme.md

@@ -57,9 +57,13 @@ GCanvas includes TypeScript definitions (`gcanvas.d.ts`) for full IDE intellisen
 
 ## 🧑‍💻 Installation
 
-️⚠️Coming soon to NPM.
+**NPM (Recommended):**
 
-For now, clone this repo:
+```bash
+npm install @guinetik/gcanvas
+```
+
+**Or clone this repo:**
 
 ```bash
 git clone https://github.com/guinetik/gcanvas.git
@@ -89,13 +93,23 @@ npm run build:debug
 
 ## 🚀 Quick Start
 
-### Using via ESM:
+### Using via NPM:
+
+```js
+import { Circle, Painter } from '@guinetik/gcanvas';
+
+Painter.init(ctx);
+const circle = new Circle(50, { x: 100, y: 100, color: 'red' });
+circle.draw();
+```
+
+### Using via ESM (standalone):
 
 ```js
 import { Circle } from './dist/gcanvas.es.min.js';
 
-const circle = new Circle(100, 100, 50, { fillColor: 'red' });
-circle.draw(); // uses static Painter.ctx internally
+const circle = new Circle(50, { x: 100, y: 100, color: 'red' });
+circle.draw();
 ```
 
 ### Using via inline script: