@guinetik/gcanvas 1.0.0 → 1.0.1

package/docs/getting-started/installation.md

@@ -1,157 +1,175 @@
-# Installation
-
-> How to set up GCanvas in your project.
-
-## Prerequisites
-
-- Node.js 18+ (for development)
-- Modern browser with ES6 support
-
-## Option 1: Clone Repository
-
-The recommended way to get started:
-
-```bash
-git clone https://github.com/guinetik/gcanvas.git
-cd gcanvas
-npm install
-```
-
-### Run Development Server
-
-```bash
-npm run dev
-```
-
-This starts Vite's dev server with hot reload. Open `http://localhost:5173` to see the demos.
-
-### Build the Library
-
-```bash
-npm run build
-```
-
-Outputs to `dist/`:
-- `gcanvas.es.js` - ES Module
-- `gcanvas.es.min.js` - ES Module (minified)
-- `gcanvas.umd.js` - UMD bundle
-- `gcanvas.umd.min.js` - UMD bundle (minified)
-
-## Option 2: NPM (Coming Soon)
-
-```bash
-npm install gcanvas
-```
-
-Then import in your project:
-
-```js
-import { Game, Circle, Rectangle } from 'gcanvas';
-```
-
-## Option 3: Direct Script Include
-
-### ES Module
-
-```html
-<script type="module">
-  import { Circle, Painter } from './dist/gcanvas.es.min.js';
-
-  const canvas = document.getElementById('canvas');
-  Painter.init(canvas.getContext('2d'));
-
-  const circle = new Circle(50, { x: 100, y: 100, color: 'red' });
-  circle.draw();
-</script>
-```
-
-### UMD Bundle
-
-```html
-<script src="./dist/gcanvas.umd.min.js"></script>
-<script>
-  const { Circle, Painter } = GCanvas;
-
-  const canvas = document.getElementById('canvas');
-  Painter.init(canvas.getContext('2d'));
-
-  const circle = new GCanvas.Circle(50, { x: 100, y: 100, color: 'red' });
-  circle.draw();
-</script>
-```
-
-## Project Structure
-
-```
-gcanvas/
-├── src/              # Source code
-│   ├── shapes/       # Shape classes
-│   ├── game/         # Game loop, objects
-│   ├── painter/      # Canvas abstraction
-│   ├── motion/       # Animation
-│   ├── io/           # Input handling
-│   └── index.js      # Main entry point
-├── demos/            # Demo applications
-├── dist/             # Built library
-└── docs/             # Documentation
-```
-
-## NPM Scripts
-
-| Script | Description |
-|--------|-------------|
-| `npm run dev` | Start development server |
-| `npm run build` | Build library |
-| `npm run build:demo` | Build demos for deployment |
-| `npm run docs` | Generate JSDoc documentation |
-| `npm run test` | Run tests |
-
-## TypeScript Support
-
-TypeScript definitions are coming soon. For now, the library is written in JavaScript with JSDoc annotations.
-
-## Browser Support
-
-GCanvas works in all modern browsers:
-
-- Chrome 60+
-- Firefox 55+
-- Safari 11+
-- Edge 79+
-
-## Next Steps
-
-- [Hello World](./hello-world.md) - Draw your first shape
-- [First Game](./first-game.md) - Create an interactive game
-- [Architecture Overview](../concepts/architecture-overview.md) - Understand the design
-
-## Troubleshooting
-
-### Canvas not found
-
-Make sure your canvas element has an ID and the script runs after DOM is ready:
-
-```html
-<canvas id="game"></canvas>
-<script type="module">
-  // Script runs after DOM is parsed when using type="module"
-  const canvas = document.getElementById('game');
-</script>
-```
-
-### Module not found
-
-When using ES modules, ensure paths are correct:
-
-```js
-// Relative path from your script
-import { Circle } from './dist/gcanvas.es.min.js';
-
-// Or absolute path
-import { Circle } from '/dist/gcanvas.es.min.js';
-```
-
-## Related
-
-- [Hello World](./hello-world.md)
-- [Architecture Overview](../concepts/architecture-overview.md)
+# Installation
+
+> How to set up GCanvas in your project.
+
+## Prerequisites
+
+- Node.js 18+ (for development)
+- Modern browser with ES6 support
+
+## Option 1: Clone Repository
+
+The recommended way to get started:
+
+```bash
+git clone https://github.com/guinetik/gcanvas.git
+cd gcanvas
+npm install
+```
+
+### Run Development Server
+
+```bash
+npm run dev
+```
+
+This starts Vite's dev server with hot reload. Open `http://localhost:5173` to see the demos.
+
+### Build the Library
+
+```bash
+npm run build
+```
+
+Outputs to `dist/`:
+- `gcanvas.es.js` - ES Module
+- `gcanvas.es.min.js` - ES Module (minified)
+- `gcanvas.umd.js` - UMD bundle
+- `gcanvas.umd.min.js` - UMD bundle (minified)
+
+## Option 2: NPM
+
+```bash
+npm install @guinetik/gcanvas
+```
+
+Then import in your project:
+
+```js
+import { Game, Circle, Rectangle } from '@guinetik/gcanvas';
+```
+
+## Option 3: Direct Script Include
+
+### ES Module
+
+```html
+<script type="module">
+  import { Circle, Painter } from './dist/gcanvas.es.min.js';
+
+  const canvas = document.getElementById('canvas');
+  Painter.init(canvas.getContext('2d'));
+
+  const circle = new Circle(50, { x: 100, y: 100, color: 'red' });
+  circle.draw();
+</script>
+```
+
+### UMD Bundle
+
+```html
+<script src="./dist/gcanvas.umd.min.js"></script>
+<script>
+  const { Circle, Painter } = GCanvas;
+
+  const canvas = document.getElementById('canvas');
+  Painter.init(canvas.getContext('2d'));
+
+  const circle = new GCanvas.Circle(50, { x: 100, y: 100, color: 'red' });
+  circle.draw();
+</script>
+```
+
+## Project Structure
+
+```
+gcanvas/
+├── src/              # Source code
+│   ├── shapes/       # Shape classes
+│   ├── game/         # Game loop, objects
+│   ├── painter/      # Canvas abstraction
+│   ├── motion/       # Animation
+│   ├── io/           # Input handling
+│   └── index.js      # Main entry point
+├── demos/            # Demo applications
+├── dist/             # Built library
+└── docs/             # Documentation
+```
+
+## NPM Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Build library |
+| `npm run build:demo` | Build demos for deployment |
+| `npm run docs` | Generate JSDoc documentation |
+| `npm run test` | Run tests |
+
+## TypeScript Support
+
+GCanvas includes full TypeScript definitions. After installing, you get complete type support:
+
+```typescript
+import { Game, Circle, Camera3D, ParticleSystem } from '@guinetik/gcanvas';
+
+// Full IntelliSense and type checking
+const game = new Game(document.getElementById('canvas') as HTMLCanvasElement);
+const circle = new Circle(50, { x: 100, y: 100, fill: 'red' });
+```
+
+The types require ES2015+ target in your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"]
+  }
+}
+```
+
+## Browser Support
+
+GCanvas works in all modern browsers:
+
+- Chrome 60+
+- Firefox 55+
+- Safari 11+
+- Edge 79+
+
+## Next Steps
+
+- [Hello World](./hello-world.md) - Draw your first shape
+- [First Game](./first-game.md) - Create an interactive game
+- [Architecture Overview](../concepts/architecture-overview.md) - Understand the design
+
+## Troubleshooting
+
+### Canvas not found
+
+Make sure your canvas element has an ID and the script runs after DOM is ready:
+
+```html
+<canvas id="game"></canvas>
+<script type="module">
+  // Script runs after DOM is parsed when using type="module"
+  const canvas = document.getElementById('game');
+</script>
+```
+
+### Module not found
+
+When using ES modules, ensure paths are correct:
+
+```js
+// Relative path from your script
+import { Circle } from './dist/gcanvas.es.min.js';
+
+// Or absolute path
+import { Circle } from '/dist/gcanvas.es.min.js';
+```
+
+## Related
+
+- [Hello World](./hello-world.md)
+- [Architecture Overview](../concepts/architecture-overview.md)

package/docs/modules/collision/README.md

@@ -9,7 +9,7 @@ The collision module provides both low-level collision detection algorithms and
 ## Quick Start
 
 ```js
-import { Collision, CollisionSystem } from 'gcanvas';
+import { Collision, CollisionSystem } from '@guinetik/gcanvas';
 
 // Low-level: Direct collision checks
 const playerBounds = player.getBounds();
@@ -352,7 +352,7 @@ player.alive = false;     // Skipped
 A Space Invaders-style collision setup:
 
 ```js
-import { Game, CollisionSystem, Collision } from 'gcanvas';
+import { Game, CollisionSystem, Collision } from '@guinetik/gcanvas';
 
 class SpaceGame extends Game {
   init() {

package/docs/modules/fluent/README.md

@@ -10,7 +10,7 @@ The Fluent module provides a builder-pattern API layer on top of GCanvas's objec
 
 **Traditional approach:**
 ```js
-import { Game, Scene, GameObject, Circle } from 'gcanvas';
+import { Game, Scene, GameObject, Circle } from '@guinetik/gcanvas';
 
 const canvas = document.getElementById('game');
 const game = new Game(canvas);
@@ -32,7 +32,7 @@ game.start();
 
 **Fluent approach:**
 ```js
-import { gcanvas } from 'gcanvas';
+import { gcanvas } from '@guinetik/gcanvas';
 
 gcanvas({ bg: 'black' })
   .scene('game')
@@ -53,7 +53,7 @@ gcanvas({ bg: 'black' })
 ## Quick Start
 
 ```js
-import { gcanvas } from 'gcanvas';
+import { gcanvas } from '@guinetik/gcanvas';
 
 // Create a game with a pulsing circle
 gcanvas({ bg: '#1a1a2e' })
@@ -73,7 +73,7 @@ gcanvas({ bg: '#1a1a2e' })
 The main entry point for the full fluent API.
 
 ```js
-import { gcanvas } from 'gcanvas';
+import { gcanvas } from '@guinetik/gcanvas';
 
 const game = gcanvas({
   canvas: document.getElementById('game'),  // Optional: use existing canvas
@@ -94,7 +94,7 @@ const game = gcanvas({
 Ultra-simple mode for quick creative coding prototypes.
 
 ```js
-import { sketch } from 'gcanvas';
+import { sketch } from '@guinetik/gcanvas';
 
 sketch(800, 600, '#1a1a1a')
   .circle(400, 300, 50, 'lime')
@@ -967,7 +967,7 @@ export const uiModule = (g) => g
       .text('SCORE: 0', { font: '20px monospace', fill: 'white' });
 
 // main.js
-import { gcanvas } from 'gcanvas';
+import { gcanvas } from '@guinetik/gcanvas';
 import { playerModule } from './scenes/player';
 import { enemiesModule } from './scenes/enemies';
 import { uiModule } from './scenes/ui';