importing styles from here

README.md

@@ -4,7 +4,7 @@
 
 Lightweight, typed **React hooks** and utilities for building interactive maze games with VIM-inspired controls.
 
-Part of the [VIMazing](https://github.com/andrepadez/vimazing-vimaze) project.
+Part of the [VIMazing](https://vimazing.com) project - [GitHub](https://github.com/andrepadez/vimazing-vimaze).
 
 ---
 
@@ -51,6 +51,7 @@ bun add @vimazing/vim-maze
 ```tsx
 import { useEffect } from "react";
 import { useGame } from "@vimazing/vim-maze";
+import "@vimazing/vim-maze/game.css";
 
 export function MazeGame() {
   const { containerRef, gameStatus, startGame } = useGame(20, 16);
@@ -69,6 +70,8 @@ export function MazeGame() {
 }
 ```
 
+> **Note:** You must manually import the CSS file. The package exports styles but does not auto-import them, giving you control over when and how styles are loaded.
+
 Default controls:
 
 | Key                 | Action          |

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@vimazing/vim-maze",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@vimazing/vim-maze",
-      "version": "1.1.0",
+      "version": "1.2.0",
       "license": "MIT",
       "devDependencies": {
         "typescript": "~5.9.3"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vimazing/vim-maze",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "VIMazing VIM Maze engine — a lightweight, typed React hook set for maze-based games.",
   "author": "André Padez <you@example.com>",
   "repository": {
@@ -38,7 +38,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc --outDir dist --declaration --emitDeclarationOnly false && node -e \"const fs = require('node:fs'); fs.mkdirSync('dist', { recursive: true }); fs.copyFileSync('src/maze.css', 'dist/maze.css');\"",
+    "build": "tsc --outDir dist --declaration --emitDeclarationOnly false && node -e \"const fs = require('node:fs'); fs.mkdirSync('dist', { recursive: true }); fs.copyFileSync('src/game.css', 'dist/game.css');\"",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {

src/MazeRenderer.ts

@@ -1,5 +1,4 @@
 import type { MazeData } from "./types";
-import "./maze.css";
 
 export class MazeRenderer {
   private mazeData: MazeData;

src/game.css

@@ -1,9 +1,9 @@
 /* =========================================================
-   🔧 Controls (tweak these two)
+   🔧 Controls (tweak these)
    ========================================================= */
 :root {
-  --cell-size: 24px;         /* size of every grid box (maze cells + number cells) */
+  --maze-cell-size: 24px;
-  --number-font-size: 14px;  /* size of the digits around the maze */
+  --maze-number-font-size: 14px;
 }
 
 /* =========================================================
@@ -40,8 +40,8 @@
 /* Every grid box (maze cells + number cells) shares the same size */
 #maze .maze-row > div,
 #maze .number {
-  width: var(--cell-size);
+  width: var(--maze-cell-size);
-  height: var(--cell-size);
+  height: var(--maze-cell-size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -52,14 +52,14 @@
   color: var(--muted-foreground, #828bb8);
   font-weight: 600;
   font-family: "Fira Code", monospace;
-  font-size: var(--number-font-size);
+  font-size: var(--maze-number-font-size);
   line-height: 1;
   opacity: 0.85;
   user-select: none;
 }
 
 #maze .number.corner {           /* top-left/top-right/bottom corners */
-  width: var(--cell-size);
+  width: var(--maze-cell-size);
 }
 
 /* Relative highlight (your tweak) */
@@ -87,7 +87,7 @@
     linear-gradient(225deg, color-mix(in srgb, var(--primary, #82aaff) 6%, transparent) 25%, transparent 25%),
     linear-gradient(45deg,  color-mix(in srgb, var(--primary, #82aaff) 4%, transparent) 25%, transparent 25%),
     linear-gradient(315deg, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 25%, transparent 25%);
-  background-size: var(--cell-size) var(--cell-size);
+  background-size: var(--maze-cell-size) var(--maze-cell-size);
   box-shadow: inset 0 0 3px rgba(27,29,43,0.4);
 }
 
@@ -99,7 +99,7 @@
   background-image:
     linear-gradient(45deg, rgba(27,29,43,0.5) 45%, transparent 55%),
     linear-gradient(to bottom, rgba(27,29,43,0.4) 45%, transparent 55%);
-  background-size: calc(var(--cell-size) * 0.5) calc(var(--cell-size) * 0.5);
+  background-size: calc(var(--maze-cell-size) * 0.5) calc(var(--maze-cell-size) * 0.5);
   box-shadow: inset 0 0 3px rgba(27,29,43,0.6);
 }
 
@@ -130,7 +130,7 @@
   top: -4px;
   text-align: center;
   text-shadow: 0 0 3px rgba(0,0,0,0.6);
-  font-size: calc(var(--cell-size) * 0.75); /* scale with cell */
+  font-size: calc(var(--maze-cell-size) * 0.75); /* scale with cell */
   z-index: 10;
 }
 

src/index.ts

@@ -1,3 +1,4 @@
+import './game.css';
 export { MazeGenerator } from "./MazeGenerator";
 export { MazeRenderer } from "./MazeRenderer";
 export * from './useGame';