@plasius/hexagons 1.0.3

package/dist/worldMap.js

@@ -0,0 +1,120 @@
+import { SurfaceCover, TerrainBiome, } from "@plasius/gpu-world-generator";
+const SQRT3 = Math.sqrt(3);
+const SURFACE_COLORS = {
+    [SurfaceCover.Grass]: "#5bb768",
+    [SurfaceCover.Dirt]: "#86604a",
+    [SurfaceCover.Sand]: "#d7b273",
+    [SurfaceCover.Rock]: "#7c879a",
+    [SurfaceCover.Gravel]: "#91a0b2",
+    [SurfaceCover.Snowpack]: "#d7ecff",
+    [SurfaceCover.Ice]: "#99e0ff",
+    [SurfaceCover.Mud]: "#69503c",
+    [SurfaceCover.Ash]: "#6f6476",
+    [SurfaceCover.Cobble]: "#9ba7b8",
+    [SurfaceCover.Road]: "#6f6a60",
+    [SurfaceCover.Water]: "#3f83d2",
+    [SurfaceCover.Basalt]: "#4f5a70",
+    [SurfaceCover.Crystal]: "#75ffd8",
+    [SurfaceCover.Sludge]: "#5d7948",
+};
+const BIOME_COLORS = {
+    [TerrainBiome.Plains]: "#89bf67",
+    [TerrainBiome.Tundra]: "#a5b8ce",
+    [TerrainBiome.Savanna]: "#c8b470",
+    [TerrainBiome.River]: "#498dd6",
+    [TerrainBiome.City]: "#9da9b8",
+    [TerrainBiome.Village]: "#b1906d",
+    [TerrainBiome.Ice]: "#b7f0ff",
+    [TerrainBiome.Snow]: "#e2f4ff",
+    [TerrainBiome.Mountainous]: "#7a8596",
+    [TerrainBiome.Volcanic]: "#8d6c69",
+    [TerrainBiome.Road]: "#7a7469",
+    [TerrainBiome.Town]: "#958774",
+    [TerrainBiome.Castle]: "#9aa7bb",
+    [TerrainBiome.MixedForest]: "#4f9464",
+};
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function withLightness(hex, amount) {
+    const safe = hex.replace("#", "");
+    const channels = safe.length === 3
+        ? safe.split("").map((c) => parseInt(c + c, 16))
+        : [0, 2, 4].map((offset) => parseInt(safe.slice(offset, offset + 2), 16));
+    const factor = clamp(1 + amount, 0.3, 1.8);
+    const next = channels
+        .map((channel) => clamp(Math.round(channel * factor), 0, 255))
+        .map((channel) => channel.toString(16).padStart(2, "0"))
+        .join("");
+    return `#${next}`;
+}
+function defaultBiomeColor(terrain) {
+    if (terrain.biome in BIOME_COLORS) {
+        return BIOME_COLORS[terrain.biome];
+    }
+    return "#8b9eb6";
+}
+export function resolveTileColor(terrain) {
+    const base = typeof terrain.surface === "number" && terrain.surface in SURFACE_COLORS
+        ? SURFACE_COLORS[terrain.surface]
+        : defaultBiomeColor(terrain);
+    const elevationBoost = clamp(terrain.height * 0.28, -0.2, 0.22);
+    return withLightness(base, elevationBoost);
+}
+export function axialToPixel(q, r, size) {
+    return {
+        x: size * 1.5 * q,
+        y: size * SQRT3 * (r + q / 2),
+    };
+}
+export function hexPolygonPoints(x, y, size) {
+    const points = [];
+    for (let i = 0; i < 6; i += 1) {
+        const angle = (Math.PI / 180) * (60 * i + 30);
+        const px = x + size * Math.cos(angle);
+        const py = y + size * Math.sin(angle);
+        points.push(`${px.toFixed(2)},${py.toFixed(2)}`);
+    }
+    return points.join(" ");
+}
+export function buildHexMapTiles(cells, terrain, size) {
+    return cells.map((cell, index) => {
+        const terrainCell = terrain[index] ?? {
+            height: 0,
+            heat: 0,
+            moisture: 0,
+            biome: TerrainBiome.Plains,
+        };
+        const { x, y } = axialToPixel(cell.q, cell.r, size);
+        return {
+            q: cell.q,
+            r: cell.r,
+            x,
+            y,
+            points: hexPolygonPoints(x, y, size),
+            color: resolveTileColor(terrainCell),
+            terrain: terrainCell,
+        };
+    });
+}
+export function computeMapBounds(tiles, size) {
+    if (tiles.length === 0) {
+        return {
+            minX: -size,
+            maxX: size,
+            minY: -size,
+            maxY: size,
+        };
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const tile of tiles) {
+        minX = Math.min(minX, tile.x - size);
+        maxX = Math.max(maxX, tile.x + size);
+        minY = Math.min(minY, tile.y - size);
+        maxY = Math.max(maxY, tile.y + size);
+    }
+    return { minX, maxX, minY, maxY };
+}

package/dist-cjs/game.d.ts

@@ -0,0 +1,2 @@
+export declare function Game(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=game.d.ts.map

package/dist-cjs/game.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../src/game.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,IAAI,4CAgKnB"}

package/dist-cjs/game.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Game = Game;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const error_1 = require("@plasius/error");
+const gpu_world_generator_1 = require("@plasius/gpu-world-generator");
+const gpu_xr_1 = require("@plasius/gpu-xr");
+const worldMap_js_1 = require("./worldMap.js");
+const game_module_css_1 = __importDefault(require("./styles/game.module.css"));
+const HEX_SIZE = 18;
+function formatPercent(value) {
+    return `${Math.round(value * 100)}%`;
+}
+function formatNumber(value) {
+    return Number.isFinite(value) ? value.toFixed(2) : "n/a";
+}
+function Game() {
+    const [seed, setSeed] = (0, react_1.useState)(1337);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const world = (0, react_1.useMemo)(() => (0, gpu_world_generator_1.generateTemperateMixedForest)({ seed, radius: 9 }), [seed]);
+    const tiles = (0, react_1.useMemo)(() => (0, worldMap_js_1.buildHexMapTiles)(world.cells, world.terrain, HEX_SIZE), [world]);
+    const bounds = (0, react_1.useMemo)(() => (0, worldMap_js_1.computeMapBounds)(tiles, HEX_SIZE), [tiles]);
+    const safeSelectedIndex = selectedIndex >= 0 && selectedIndex < tiles.length ? selectedIndex : 0;
+    const selected = tiles[safeSelectedIndex];
+    const viewBox = `${bounds.minX} ${bounds.minY} ${bounds.maxX - bounds.minX} ${bounds.maxY - bounds.minY}`;
+    const handleRegenerate = () => {
+        setSeed((current) => ((current * 1664525 + 1013904223) >>> 0) % 2147483647);
+        setSelectedIndex(0);
+    };
+    return ((0, jsx_runtime_1.jsx)(error_1.ErrorBoundary, { name: "Game", children: (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.game, children: [(0, jsx_runtime_1.jsxs)("header", { className: game_module_css_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: game_module_css_1.default.title, children: "GPU World Cell Explorer" }), (0, jsx_runtime_1.jsxs)("p", { className: game_module_css_1.default.subtitle, children: ["Hex terrain generated through ", (0, jsx_runtime_1.jsx)("code", { children: "@plasius/gpu-world-generator" }), " ", "and configured alongside lighting/particle/XR package profiles."] })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.controls, children: [(0, jsx_runtime_1.jsxs)("span", { className: game_module_css_1.default.seed, children: ["Seed ", seed] }), (0, jsx_runtime_1.jsx)("button", { className: game_module_css_1.default.button, onClick: handleRegenerate, children: "Regenerate" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.layout, children: [(0, jsx_runtime_1.jsx)("section", { className: game_module_css_1.default.mapCard, children: (0, jsx_runtime_1.jsx)("svg", { className: game_module_css_1.default.map, viewBox: viewBox, role: "img", "aria-label": "Hex terrain map", children: tiles.map((tile, index) => ((0, jsx_runtime_1.jsx)("polygon", { className: `${game_module_css_1.default.tile} ${index === safeSelectedIndex ? game_module_css_1.default.tileActive : ""}`, points: tile.points, fill: tile.color, onPointerEnter: () => setSelectedIndex(index), onClick: () => setSelectedIndex(index) }, `${tile.q}:${tile.r}`))) }) }), (0, jsx_runtime_1.jsxs)("aside", { className: game_module_css_1.default.panel, children: [(0, jsx_runtime_1.jsx)("h2", { className: game_module_css_1.default.panelTitle, children: "Selected Tile" }), (0, jsx_runtime_1.jsxs)("dl", { className: game_module_css_1.default.stats, children: [(0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Axial" }), (0, jsx_runtime_1.jsxs)("dd", { className: game_module_css_1.default.value, children: ["q ", selected?.q ?? 0, ", r ", selected?.r ?? 0] })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Biome" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected
+                                                        ? gpu_world_generator_1.TerrainBiomeLabel[selected.terrain.biome]
+                                                        : "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Macro Biome" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected?.terrain.macroBiome === undefined
+                                                        ? "n/a"
+                                                        : gpu_world_generator_1.MacroBiomeLabel[selected.terrain.macroBiome] })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Surface" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected?.terrain.surface === undefined
+                                                        ? "n/a"
+                                                        : gpu_world_generator_1.SurfaceCoverLabel[selected.terrain.surface] })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Feature" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected?.terrain.feature === undefined
+                                                        ? "none"
+                                                        : gpu_world_generator_1.MicroFeatureLabel[selected.terrain.feature] })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Height" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected ? formatNumber(selected.terrain.height) : "n/a" })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Heat" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected ? formatPercent(selected.terrain.heat) : "n/a" })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "Moisture" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: selected ? formatPercent(selected.terrain.moisture) : "n/a" })] })] }), (0, jsx_runtime_1.jsx)("h2", { className: game_module_css_1.default.panelTitle, children: "GPU Stack" }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.chipRow, children: [(0, jsx_runtime_1.jsx)("span", { className: game_module_css_1.default.chip, children: "worldgen: mixed-forest" }), (0, jsx_runtime_1.jsxs)("span", { className: game_module_css_1.default.chip, children: ["tiles: ", tiles.length] }), (0, jsx_runtime_1.jsxs)("span", { className: game_module_css_1.default.chip, children: ["xr modes: ", gpu_xr_1.xrSessionModes.filter((mode) => mode !== "inline").length] })] }), (0, jsx_runtime_1.jsxs)("dl", { className: game_module_css_1.default.stats, children: [(0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "World Generator" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: "@plasius/gpu-world-generator" })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "XR Runtime" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: "@plasius/gpu-xr" })] }), (0, jsx_runtime_1.jsxs)("div", { className: game_module_css_1.default.row, children: [(0, jsx_runtime_1.jsx)("dt", { className: game_module_css_1.default.label, children: "XR Session Modes" }), (0, jsx_runtime_1.jsx)("dd", { className: game_module_css_1.default.value, children: gpu_xr_1.xrSessionModes.filter((mode) => mode !== "inline").join(", ") })] })] })] })] })] }) }));
+}

package/dist-cjs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./game.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist-cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./game.js"), exports);

package/dist-cjs/state/gameActions.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=gameActions.d.ts.map

package/dist-cjs/state/gameActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gameActions.d.ts","sourceRoot":"","sources":["../../src/state/gameActions.ts"],"names":[],"mappings":""}

package/dist-cjs/state/gameActions.js

@@ -0,0 +1 @@
+"use strict";

package/dist-cjs/state/gameStateProvider.d.ts

@@ -0,0 +1,28 @@
+type GameAction = {
+    type: "INCREMENT_SCORE";
+    payload: number;
+} | {
+    type: "SET_LEVEL";
+    payload: number;
+} | {
+    type: "TOGGLE_PAUSE";
+} | {
+    type: "RESET_GAME";
+};
+interface GameState {
+    score: number;
+    level: number;
+    isPaused: boolean;
+}
+export declare const GameStateStore: {
+    Context: import("react").Context<import("@plasius/react-state").Store<GameState, GameAction> | null>;
+    Provider: ({ children, initialState: override, }: {
+        children: React.ReactNode;
+        initialState?: GameState | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useStore: () => GameState;
+    useDispatch: () => (action: GameAction) => void;
+    useSelector: <T>(selector: (state: GameState) => T, isEqual?: ((a: T, b: T) => boolean) | undefined) => T;
+};
+export {};
+//# sourceMappingURL=gameStateProvider.d.ts.map

package/dist-cjs/state/gameStateProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gameStateProvider.d.ts","sourceRoot":"","sources":["../../src/state/gameStateProvider.tsx"],"names":[],"mappings":"AAEA,KAAK,UAAU,GACX;IACE,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAC;CACtB,GACD;IACE,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEN,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAuBD,eAAO,MAAM,cAAc;;;;;;;;;CAG1B,CAAC"}

package/dist-cjs/state/gameStateProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GameStateStore = void 0;
+const react_state_1 = require("@plasius/react-state");
+const initialState = {
+    score: 0,
+    level: 1,
+    isPaused: false,
+};
+function gameReducer(state, action) {
+    switch (action.type) {
+        case "INCREMENT_SCORE":
+            return { ...state, score: state.score + action.payload };
+        case "SET_LEVEL":
+            return { ...state, level: action.payload };
+        case "TOGGLE_PAUSE":
+            return { ...state, isPaused: !state.isPaused };
+        case "RESET_GAME":
+            return { ...initialState };
+        default:
+            return state;
+    }
+}
+exports.GameStateStore = (0, react_state_1.createScopedStoreContext)(gameReducer, initialState);

package/dist-cjs/styles/game.module.css

@@ -0,0 +1,208 @@
+.game {
+  --bg-deep: #070d17;
+  --bg-mid: #102035;
+  --bg-bright: #1b3a5a;
+  --panel: rgba(7, 13, 23, 0.72);
+  --panel-border: rgba(163, 198, 255, 0.24);
+  --text: #e7f0ff;
+  --text-muted: #9fb4d2;
+  --accent: #78c9ff;
+  min-height: calc(100vh - 8rem);
+  padding: 1.25rem;
+  color: var(--text);
+  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(120% 120% at 0% 0%, rgba(120, 201, 255, 0.2), transparent 52%),
+    radial-gradient(100% 160% at 100% 20%, rgba(141, 255, 204, 0.15), transparent 48%),
+    linear-gradient(160deg, var(--bg-bright), var(--bg-mid) 46%, var(--bg-deep));
+  border-radius: 1rem;
+  overflow: hidden;
+  animation: reveal 350ms ease-out;
+}
+
+.header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.title {
+  margin: 0;
+  font-size: clamp(1.2rem, 1.4vw + 1rem, 2.1rem);
+  letter-spacing: 0.03em;
+}
+
+.subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--text-muted);
+  max-width: 56ch;
+  line-height: 1.35;
+  font-size: 0.94rem;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.seed {
+  font-size: 0.84rem;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  padding: 0.3rem 0.7rem;
+}
+
+.button {
+  border: 0;
+  color: #001323;
+  background: linear-gradient(120deg, #8ad6ff, #87f6d1);
+  border-radius: 999px;
+  padding: 0.55rem 1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: transform 120ms ease, filter 120ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.08);
+}
+
+.button:active {
+  transform: translateY(0);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
+  gap: 1rem;
+}
+
+.mapCard,
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: 0.95rem;
+  backdrop-filter: blur(7px);
+}
+
+.mapCard {
+  padding: 0.65rem;
+}
+
+.map {
+  display: block;
+  width: 100%;
+  height: min(72vh, 760px);
+}
+
+.tile {
+  stroke: rgba(7, 11, 18, 0.35);
+  stroke-width: 1.3;
+  transition: filter 140ms ease, stroke 140ms ease, transform 140ms ease;
+  transform-origin: center;
+}
+
+.tile:hover {
+  filter: brightness(1.12);
+  stroke: rgba(240, 248, 255, 0.8);
+}
+
+.tileActive {
+  stroke: #ffffff;
+  stroke-width: 2.1;
+  filter: drop-shadow(0 0 6px rgba(138, 214, 255, 0.6));
+}
+
+.panel {
+  padding: 0.95rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.95rem;
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: 0.96rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.stats {
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  font-size: 0.87rem;
+}
+
+.label {
+  color: var(--text-muted);
+}
+
+.value {
+  text-align: right;
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.chip {
+  border-radius: 999px;
+  padding: 0.3rem 0.58rem;
+  font-size: 0.74rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: #e8f2ff;
+  background: rgba(120, 201, 255, 0.16);
+  border: 1px solid rgba(120, 201, 255, 0.34);
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 980px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .game {
+    min-height: auto;
+    padding: 0.8rem;
+    border-radius: 0.75rem;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .map {
+    height: min(58vh, 540px);
+  }
+}

package/dist-cjs/worldMap.d.ts

@@ -0,0 +1,24 @@
+import { type HexCell, type TerrainCell } from "@plasius/gpu-world-generator";
+export interface HexMapTile {
+    q: number;
+    r: number;
+    x: number;
+    y: number;
+    points: string;
+    color: string;
+    terrain: TerrainCell;
+}
+export declare function resolveTileColor(terrain: TerrainCell): string;
+export declare function axialToPixel(q: number, r: number, size: number): {
+    x: number;
+    y: number;
+};
+export declare function hexPolygonPoints(x: number, y: number, size: number): string;
+export declare function buildHexMapTiles(cells: HexCell[], terrain: TerrainCell[], size: number): HexMapTile[];
+export declare function computeMapBounds(tiles: HexMapTile[], size: number): {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+//# sourceMappingURL=worldMap.d.ts.map

package/dist-cjs/worldMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"worldMap.d.ts","sourceRoot":"","sources":["../src/worldMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;CACtB;AA+DD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAQ7D;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAKzF;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAS3E;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,OAAO,EAAE,EAChB,OAAO,EAAE,WAAW,EAAE,EACtB,IAAI,EAAE,MAAM,GACX,UAAU,EAAE,CAmBd;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,UAAU,EAAE,EACnB,IAAI,EAAE,MAAM,GACX;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAuB5D"}

package/dist-cjs/worldMap.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTileColor = resolveTileColor;
+exports.axialToPixel = axialToPixel;
+exports.hexPolygonPoints = hexPolygonPoints;
+exports.buildHexMapTiles = buildHexMapTiles;
+exports.computeMapBounds = computeMapBounds;
+const gpu_world_generator_1 = require("@plasius/gpu-world-generator");
+const SQRT3 = Math.sqrt(3);
+const SURFACE_COLORS = {
+    [gpu_world_generator_1.SurfaceCover.Grass]: "#5bb768",
+    [gpu_world_generator_1.SurfaceCover.Dirt]: "#86604a",
+    [gpu_world_generator_1.SurfaceCover.Sand]: "#d7b273",
+    [gpu_world_generator_1.SurfaceCover.Rock]: "#7c879a",
+    [gpu_world_generator_1.SurfaceCover.Gravel]: "#91a0b2",
+    [gpu_world_generator_1.SurfaceCover.Snowpack]: "#d7ecff",
+    [gpu_world_generator_1.SurfaceCover.Ice]: "#99e0ff",
+    [gpu_world_generator_1.SurfaceCover.Mud]: "#69503c",
+    [gpu_world_generator_1.SurfaceCover.Ash]: "#6f6476",
+    [gpu_world_generator_1.SurfaceCover.Cobble]: "#9ba7b8",
+    [gpu_world_generator_1.SurfaceCover.Road]: "#6f6a60",
+    [gpu_world_generator_1.SurfaceCover.Water]: "#3f83d2",
+    [gpu_world_generator_1.SurfaceCover.Basalt]: "#4f5a70",
+    [gpu_world_generator_1.SurfaceCover.Crystal]: "#75ffd8",
+    [gpu_world_generator_1.SurfaceCover.Sludge]: "#5d7948",
+};
+const BIOME_COLORS = {
+    [gpu_world_generator_1.TerrainBiome.Plains]: "#89bf67",
+    [gpu_world_generator_1.TerrainBiome.Tundra]: "#a5b8ce",
+    [gpu_world_generator_1.TerrainBiome.Savanna]: "#c8b470",
+    [gpu_world_generator_1.TerrainBiome.River]: "#498dd6",
+    [gpu_world_generator_1.TerrainBiome.City]: "#9da9b8",
+    [gpu_world_generator_1.TerrainBiome.Village]: "#b1906d",
+    [gpu_world_generator_1.TerrainBiome.Ice]: "#b7f0ff",
+    [gpu_world_generator_1.TerrainBiome.Snow]: "#e2f4ff",
+    [gpu_world_generator_1.TerrainBiome.Mountainous]: "#7a8596",
+    [gpu_world_generator_1.TerrainBiome.Volcanic]: "#8d6c69",
+    [gpu_world_generator_1.TerrainBiome.Road]: "#7a7469",
+    [gpu_world_generator_1.TerrainBiome.Town]: "#958774",
+    [gpu_world_generator_1.TerrainBiome.Castle]: "#9aa7bb",
+    [gpu_world_generator_1.TerrainBiome.MixedForest]: "#4f9464",
+};
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function withLightness(hex, amount) {
+    const safe = hex.replace("#", "");
+    const channels = safe.length === 3
+        ? safe.split("").map((c) => parseInt(c + c, 16))
+        : [0, 2, 4].map((offset) => parseInt(safe.slice(offset, offset + 2), 16));
+    const factor = clamp(1 + amount, 0.3, 1.8);
+    const next = channels
+        .map((channel) => clamp(Math.round(channel * factor), 0, 255))
+        .map((channel) => channel.toString(16).padStart(2, "0"))
+        .join("");
+    return `#${next}`;
+}
+function defaultBiomeColor(terrain) {
+    if (terrain.biome in BIOME_COLORS) {
+        return BIOME_COLORS[terrain.biome];
+    }
+    return "#8b9eb6";
+}
+function resolveTileColor(terrain) {
+    const base = typeof terrain.surface === "number" && terrain.surface in SURFACE_COLORS
+        ? SURFACE_COLORS[terrain.surface]
+        : defaultBiomeColor(terrain);
+    const elevationBoost = clamp(terrain.height * 0.28, -0.2, 0.22);
+    return withLightness(base, elevationBoost);
+}
+function axialToPixel(q, r, size) {
+    return {
+        x: size * 1.5 * q,
+        y: size * SQRT3 * (r + q / 2),
+    };
+}
+function hexPolygonPoints(x, y, size) {
+    const points = [];
+    for (let i = 0; i < 6; i += 1) {
+        const angle = (Math.PI / 180) * (60 * i + 30);
+        const px = x + size * Math.cos(angle);
+        const py = y + size * Math.sin(angle);
+        points.push(`${px.toFixed(2)},${py.toFixed(2)}`);
+    }
+    return points.join(" ");
+}
+function buildHexMapTiles(cells, terrain, size) {
+    return cells.map((cell, index) => {
+        const terrainCell = terrain[index] ?? {
+            height: 0,
+            heat: 0,
+            moisture: 0,
+            biome: gpu_world_generator_1.TerrainBiome.Plains,
+        };
+        const { x, y } = axialToPixel(cell.q, cell.r, size);
+        return {
+            q: cell.q,
+            r: cell.r,
+            x,
+            y,
+            points: hexPolygonPoints(x, y, size),
+            color: resolveTileColor(terrainCell),
+            terrain: terrainCell,
+        };
+    });
+}
+function computeMapBounds(tiles, size) {
+    if (tiles.length === 0) {
+        return {
+            minX: -size,
+            maxX: size,
+            minY: -size,
+            maxY: size,
+        };
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const tile of tiles) {
+        minX = Math.min(minX, tile.x - size);
+        maxX = Math.max(maxX, tile.x + size);
+        minY = Math.min(minY, tile.y - size);
+        maxY = Math.max(maxY, tile.y + size);
+    }
+    return { minX, maxX, minY, maxY };
+}

package/docs/adrs/adr-0001-hexagons-package-scope.md

@@ -0,0 +1,21 @@
+# ADR-0001: Standalone @plasius/hexagons Package Scope
+
+- Date: 2026-02-11
+- Status: Accepted
+
+## Context
+
+This package was previously maintained as a workspace-only module inside
+`plasius-ltd-site`. External consumers and remote builds require it to be
+installable from npm without monorepo-local links.
+
+## Decision
+
+Move `@plasius/hexagons` to a standalone root package with independent build,
+test, governance, CI, and publish workflows.
+
+## Consequences
+
+- The package can be versioned and released independently.
+- `plasius-ltd-site` and other repositories can depend on npm-published versions.
+- Build and lint rules must no longer rely on monorepo-relative tsconfig paths.