mudlet-map-renderer 1.0.0 → 1.2.0

package/{src/types/MapData.ts → dist/types/MapData.d.ts}

@@ -1,90 +1,70 @@
-declare namespace MapData {
-
-    export type direction =
-        "north"
-        | "south"
-        | "east"
-        | "west"
-        | "northwest"
-        | "northeast"
-        | "southeast"
-        | "southwest"
-        | "up"
-        | "down"
-        | "in"
-        | "out"
-
-    export interface Color {
-        alpha: number;
-        r: number;
-        g: number;
-        b: number;
-    }
-
-    export interface Line {
-        points: Point[];
-        attributes: LineAttribute;
-    }
-
-    export interface Point {
-        x: number;
-        y: number;
-    }
-
-    export interface LineAttribute {
-        color: Color;
-        style: string;
-        arrow: boolean;
-    }
-
-    export interface Room {
-        id: number;
-        area: number;
-        x: number;
-        y: number;
-        z: number;
-        areaId: string;
-        weight: number;
-        roomChar: string;
-        name: string;
-        userData: Record<string, string>;
-        customLines: Record<string, Line>;
-        stubs: number[];
-        hash: string;
-        env: number;
-        exits: Record<direction, number>;
-        doors: Record<string, 1 | 2 | 3>;
-        specialExits: Record<string, number>;
-        exitLocks?: number[];
-        mSpecialExitLocks?: number[];
-    }
-
-    export interface Label {
-        labelId: number;
-        areaId: number;
-        pixMap: string;
-        X: number;
-        Y: number;
-        Z: number;
-        Width: number;
-        Height: number;
-        Text: string;
-        FgColor: Color;
-        BgColor: Color;
-    }
-
-    export interface Area {
-        areaName: string;
-        areaId: string;
-        rooms: Room[];
-        labels: Label[];
-    }
-
-    export type Map = Area[]
-
-    export interface Env {
-        envId: number;
-        colors: number[];
-    }
-
-}
+declare namespace MapData {
+    type direction = "north" | "south" | "east" | "west" | "northwest" | "northeast" | "southeast" | "southwest" | "up" | "down" | "in" | "out";
+    interface Color {
+        alpha: number;
+        r: number;
+        g: number;
+        b: number;
+    }
+    interface Line {
+        points: Point[];
+        attributes: LineAttribute;
+    }
+    interface Point {
+        x: number;
+        y: number;
+    }
+    interface LineAttribute {
+        color: Color;
+        style: string;
+        arrow: boolean;
+    }
+    interface Room {
+        id: number;
+        area: number;
+        x: number;
+        y: number;
+        z: number;
+        areaId: string;
+        weight: number;
+        roomChar: string;
+        name: string;
+        userData: Record<string, string>;
+        customLines: Record<string, Line>;
+        stubs: number[];
+        hash: string;
+        env: number;
+        exits: Record<direction, number>;
+        doors: Record<string, 1 | 2 | 3>;
+        specialExits: Record<string, number>;
+        exitLocks?: number[];
+        exitWeights?: Record<string, number>;
+        mSpecialExitLocks?: number[];
+    }
+    interface Label {
+        labelId: number;
+        areaId: number;
+        pixMap?: string;
+        X: number;
+        Y: number;
+        Z: number;
+        Width: number;
+        Height: number;
+        Text: string;
+        FgColor: Color;
+        BgColor: Color;
+        noScaling?: boolean;
+        showOnTop?: boolean;
+    }
+    interface Area {
+        areaName: string;
+        areaId: string;
+        rooms: Room[];
+        labels: Label[];
+    }
+    type Map = Area[];
+    interface Env {
+        envId: number;
+        colors: number[];
+    }
+}

package/dist/types/Settings.d.ts

@@ -0,0 +1,206 @@
+export type LabelRenderMode = "image" | "data" | "none";
+export type CullingMode = "none" | "basic" | "indexed";
+export type RoomShape = "rectangle" | "circle" | "roundedRectangle";
+export type RoomContextMenuEventDetail = {
+    roomId: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export type RoomClickEventDetail = {
+    roomId: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export type ZoomChangeEventDetail = {
+    zoom: number;
+};
+export type AreaExitClickEventDetail = {
+    targetRoomId: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export type ViewportBounds = {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+export type PanEventDetail = ViewportBounds;
+export type RendererEventMap = {
+    roomclick: RoomClickEventDetail;
+    roomcontextmenu: RoomContextMenuEventDetail;
+    areaexitclick: AreaExitClickEventDetail;
+    mapclick: undefined;
+    pan: PanEventDetail;
+    zoom: ZoomChangeEventDetail;
+};
+/**
+ * Style configuration for the player position marker.
+ * The player marker is a circle that indicates the current player position on the map.
+ */
+export type PlayerMarkerStyle = {
+    /**
+     * Hex color for the marker's stroke/border (e.g., "#00e5b2" for cyan-green).
+     */
+    strokeColor: string;
+    /**
+     * Opacity for the stroke/border (0.0 = fully transparent, 1.0 = fully opaque).
+     */
+    strokeAlpha: number;
+    /**
+     * Hex color for the marker's fill (e.g., "#00e5b2" for cyan-green).
+     */
+    fillColor: string;
+    /**
+     * Opacity for the fill (0.0 = fully transparent, 1.0 = fully opaque).
+     * Setting this to 0 creates a hollow circle effect.
+     */
+    fillAlpha: number;
+    /**
+     * Width of the marker's stroke/border in map units (typically 0.01-0.3).
+     */
+    strokeWidth: number;
+    /**
+     * Size multiplier relative to the room size.
+     * - 1.0 = marker radius equals room radius (matches room size)
+     * - Values > 1.0 make the marker larger than rooms
+     * - Values < 1.0 make the marker smaller than rooms
+     *
+     * Note: Room circles have radius = roomSize / 2, so sizeFactor is applied to that radius.
+     */
+    sizeFactor: number;
+    /**
+     * Dash pattern for the stroke as an array of [dash length, gap length].
+     * Example: [0.05, 0.05] creates evenly spaced dashes.
+     * Only applied when dashEnabled is true.
+     */
+    dash?: number[];
+    /**
+     * Whether to apply the dash pattern to the stroke.
+     * When false, the stroke is solid regardless of the dash property.
+     */
+    dashEnabled: boolean;
+    /**
+     * When true, the marker shape matches the current roomShape setting
+     * (rectangle, circle, or roundedRectangle) instead of always being a circle.
+     */
+    matchRoomShape: boolean;
+};
+/**
+ * Style configuration for room highlights.
+ * Highlights are rings drawn around rooms registered via {@link MapRenderer.renderHighlight}.
+ * The highlight's color is supplied per-call; this style controls everything else.
+ */
+export type HighlightStyle = {
+    /**
+     * Opacity for the highlight's stroke/ring (0.0 = fully transparent, 1.0 = fully opaque).
+     */
+    strokeAlpha: number;
+    /**
+     * Opacity for the fill (0.0 = fully transparent / hollow, 1.0 = fully opaque).
+     * The fill uses the per-highlight color. Defaults to 0 to preserve the hollow ring look.
+     */
+    fillAlpha: number;
+    /**
+     * Width of the highlight stroke in map units (typically 0.01-0.3).
+     */
+    strokeWidth: number;
+    /**
+     * Size multiplier relative to the room size.
+     * - 1.0 = highlight matches room size
+     * - Values > 1.0 produce a ring outside the room
+     * - Values < 1.0 produce a smaller marker inside the room
+     */
+    sizeFactor: number;
+    /**
+     * Dash pattern for the stroke as an array of [dash length, gap length].
+     * Only applied when dashEnabled is true.
+     */
+    dash?: number[];
+    /**
+     * Whether to apply the dash pattern to the stroke.
+     * When false, the stroke is solid regardless of the dash property.
+     */
+    dashEnabled: boolean;
+    /**
+     * When true, the highlight shape matches the current roomShape setting
+     * (rectangle, circle, or roundedRectangle). When false, the highlight is always a circle.
+     */
+    matchRoomShape: boolean;
+};
+/**
+ * Settings for map rendering.
+ * All properties can be modified at runtime to change the map's appearance and behavior.
+ * Create with {@link createSettings} and pass to the renderer constructor.
+ */
+export type Settings = {
+    /** Size of each room in map units (width/height for rectangles, diameter for circles). Default: 0.6 */
+    roomSize: number;
+    /** Width of lines (exit connections, room borders) in map units. Default: 0.025 */
+    lineWidth: number;
+    /** Color of exit connection lines as RGB string. Default: 'rgb(225, 255, 225)' */
+    lineColor: string;
+    /** Background color of the map container. Default: '#000000' */
+    backgroundColor: string;
+    /** When true, map instantly jumps to new position on room change. Default: false */
+    instantMapMove: boolean;
+    /** When true, highlights the current room and its exits with an overlay. Default: true */
+    highlightCurrentRoom: boolean;
+    /** Legacy flag for enabling/disabling culling (prefer cullingMode). Default: true */
+    cullingEnabled: boolean;
+    /** How off-screen elements are culled: "none" | "basic" | "indexed". Default: "indexed" */
+    cullingMode: CullingMode;
+    /** Custom culling bounds in map coordinates, or null for viewport bounds. Default: null */
+    cullingBounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    /** How to render room labels: "image" | "data". Default: "image" */
+    labelRenderMode: LabelRenderMode;
+    /** When true, room labels have transparent backgrounds. Default: false */
+    transparentLabels: boolean;
+    /** Shape used to render rooms: "rectangle" | "circle" | "roundedRectangle". Default: "rectangle" */
+    roomShape: RoomShape;
+    /** Style configuration for the player position marker. */
+    playerMarker: PlayerMarkerStyle;
+    /** Style configuration for room highlights (added via {@link MapRenderer.renderHighlight}). */
+    highlight: HighlightStyle;
+    /** Whether to render a background grid. Default: false */
+    gridEnabled: boolean;
+    /** Grid line spacing in map units. Default: 1 */
+    gridSize: number;
+    /** Color of grid lines as CSS color string. Default: 'rgba(255, 255, 255, 0.07)' */
+    gridColor: string;
+    /** Width of grid lines in map units. Default: 0.02 */
+    gridLineWidth: number;
+    /** Whether to draw borders (strokes) on rooms. Default: true */
+    borders: boolean;
+    /** When true, rooms use frame rendering: fill=backgroundColor, stroke=envColor. Default: false */
+    frameMode: boolean;
+    /** When true, rooms use colored rendering: fill=envColor darkened 30%, stroke=envColor. Default: false */
+    coloredMode: boolean;
+    /** When true, rooms display a 3D emboss effect (rectangle/roundedRectangle only). Default: false */
+    emboss: boolean;
+    /** When true, displays the area name as a header text on the map. Default: false */
+    areaName: boolean;
+    /** Font family for the area name header. Default: 'sans-serif' */
+    fontFamily: string;
+    /** When true, uses bounds from all z-levels for viewport sizing, not just the current level. Default: false */
+    uniformLevelSize: boolean;
+    /** When true, renders a small text label next to area-exit arrows showing the target area name.
+     *  Exits leading to the same target area are grouped — one label per area at the cluster centroid. Default: false */
+    areaExitLabels: boolean;
+    /** Font size (in map units) for area-exit labels. Padding, corner radius, and stroke
+     *  scale proportionally. Default: 0.3 */
+    areaExitLabelFontSize: number;
+};
+/** Creates a new Settings object with default values. */
+export declare function createSettings(): Settings;

package/dist/utils/color.d.ts

@@ -0,0 +1,12 @@
+export declare function colorLightness(color: string): number;
+export declare function darkenColor(color: string, factor: number): string;
+export declare function lightenColor(color: string, factor: number): string;
+/**
+ * Apply an alpha value to any CSS colour. Accepts `#rgb`, `#rrggbb`, `rgb(...)`,
+ * `rgba(...)` (alphas multiply), and the named colours in {@link NAMED_COLORS}.
+ * Falls back to returning the input unchanged for unrecognised formats so the
+ * shape stays visible rather than collapsing to black.
+ *
+ * The name is historical — see also call sites that take any user-supplied colour.
+ */
+export declare function hexToRgba(color: string, alpha: number): string;

package/dist/utils/textMeasure.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Pixel-accurate vertical centering helper.
+ *
+ * The canvas TextMetrics API (actualBoundingBoxAscent / Descent) is unreliable
+ * across browsers and fonts.  Instead we draw the glyph on an offscreen canvas
+ * with a known baseline position, scan the actual rendered pixels to find the
+ * true visual top and bottom, and derive the offset we need.
+ *
+ * We use textBaseline='alphabetic' so that the result is consistent with the
+ * original rendering code (which used alphabetic + a hard-coded 0.35em offset).
+ * For a typical uppercase letter the function returns ~0.35 (same as the old
+ * magic number), but for glyphs that extend below the baseline (e.g. "[]") it
+ * returns a smaller value, shifting them up to their true visual centre.
+ *
+ * Return value: multiply by fontSize and add to room.y; use with
+ *   ctx.textBaseline = 'alphabetic'
+ *   ctx.fillText(text, room.x, room.y + result * fontSize)
+ */
+export interface BaselineResult {
+    /** Offset from room-centre to alphabetic baseline, as a ratio of fontSize (for SVG). */
+    baselineRatio: number;
+    /**
+     * Correction for Konva's built-in verticalAlign='middle', as a ratio of fontSize.
+     * Konva centres text using font-wide bounding-box metrics (measured from 'M'),
+     * which is wrong for glyphs whose visual extent differs (e.g. "[]").
+     * Apply as offsetY = konvaCorrectionRatio * fontSize (positive = shift up).
+     */
+    konvaCorrectionRatio: number;
+}
+/**
+ * Returns the Y offset from room-centre to alphabetic baseline, as a ratio of
+ * fontSize, so that the glyph appears visually centred.
+ *
+ * For a standard uppercase letter (no descenders) this is close to
+ * capHeight/2 ≈ 0.35.  For characters that extend below the baseline the
+ * returned value is smaller, which moves the rendered text upward.
+ */
+export declare function measureTextBaselineOffset(text: string, fontFamily: string): BaselineResult;

package/package.json

@@ -1,37 +1,67 @@
-{
-  "name": "mudlet-map-renderer",
-  "version": "1.0.0",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "sideEffects": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -p tsconfig.json && vite build",
-    "preview": "vite preview",
-    "demo:dev": "vite --config vite.demo.config.ts",
-    "demo:build": "vite build --config vite.demo.config.ts",
-    "demo:preview": "vite preview --config vite.demo.config.ts"
-  },
-  "dependencies": {
-    "konva": "^10.0.2",
-    "node-dijkstra": "^2.5.1"
-  },
-  "devDependencies": {
-    "tslib": "^2.8.1",
-    "tsx": "^4.19.1",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vite-plugin-dts": "^4.3.0",
-    "@types/node-dijkstra": "^2.5.6"
-  }
-}
+{
+  "name": "mudlet-map-renderer",
+  "version": "1.2.0",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/Delwing/mudlet-map-renderer"
+  },
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./binary": {
+      "types": "./dist/binary/index.d.ts",
+      "import": "./dist/binary.mjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "prepublish": "vite build",
+    "build": "tsc -p tsconfig.json && vite build",
+    "preview": "vite preview",
+    "demo:dev": "vite --config vite.demo.config.ts",
+    "demo:build": "vite build --config vite.demo.config.ts",
+    "demo:preview": "vite preview --config vite.demo.config.ts",
+    "demo:headless": "tsx --tsconfig demo/tsconfig.json demo/headless.ts",
+    "demo:regenerate": "tsx --tsconfig demo/tsconfig.json demo/regenerate-outputs.ts",
+    "snapshot-review": "tsx scripts/snapshot-review.ts",
+    "snapshot-review:master": "tsx scripts/snapshot-review.ts --from-master",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots"
+  },
+  "dependencies": {
+    "konva": "^10.2.4",
+    "node-dijkstra": "^2.5.1"
+  },
+  "peerDependencies": {
+    "mudlet-map-binary-reader": ">=0.9.0"
+  },
+  "peerDependenciesMeta": {
+    "mudlet-map-binary-reader": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "@types/node": "^25.6.0",
+    "@types/node-dijkstra": "^2.5.6",
+    "canvas": "^3.2.3",
+    "mudlet-map-binary-reader": "^0.9.0",
+    "tslib": "^2.8.1",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.4"
+  },
+  "files": [
+    "dist"
+  ]
+}

package/demo/colors.json

@@ -1 +0,0 @@
-[{"envId":1,"colors":[128,0,0]},{"envId":2,"colors":[0,128,0]},{"envId":3,"colors":[128,128,0]},{"envId":4,"colors":[0,0,128]},{"envId":5,"colors":[128,0,128]},{"envId":6,"colors":[0,128,128]},{"envId":7,"colors":[192,192,192]},{"envId":8,"colors":[0,0,0]},{"envId":9,"colors":[255,0,0]},{"envId":10,"colors":[0,255,0]},{"envId":11,"colors":[255,255,0]},{"envId":12,"colors":[0,0,255]},{"envId":13,"colors":[255,0,255]},{"envId":14,"colors":[0,255,255]},{"envId":15,"colors":[255,255,255]},{"envId":16,"colors":[128,128,128]},{"envId":17,"colors":[0,0,95]},{"envId":18,"colors":[0,0,135]},{"envId":19,"colors":[0,0,175]},{"envId":20,"colors":[0,0,215]},{"envId":21,"colors":[0,0,255]},{"envId":22,"colors":[0,95,0]},{"envId":23,"colors":[0,95,95]},{"envId":24,"colors":[0,95,135]},{"envId":25,"colors":[0,95,175]},{"envId":26,"colors":[0,95,215]},{"envId":27,"colors":[0,95,255]},{"envId":28,"colors":[0,135,0]},{"envId":29,"colors":[0,135,95]},{"envId":30,"colors":[0,135,135]},{"envId":31,"colors":[0,135,175]},{"envId":32,"colors":[0,135,215]},{"envId":33,"colors":[0,135,255]},{"envId":34,"colors":[0,175,0]},{"envId":35,"colors":[0,175,95]},{"envId":36,"colors":[0,175,135]},{"envId":37,"colors":[0,175,175]},{"envId":38,"colors":[0,175,215]},{"envId":39,"colors":[0,175,255]},{"envId":40,"colors":[0,215,0]},{"envId":41,"colors":[0,215,95]},{"envId":42,"colors":[0,215,135]},{"envId":43,"colors":[0,215,175]},{"envId":44,"colors":[0,215,215]},{"envId":45,"colors":[0,215,255]},{"envId":46,"colors":[0,255,0]},{"envId":47,"colors":[0,255,95]},{"envId":48,"colors":[0,255,135]},{"envId":49,"colors":[0,255,175]},{"envId":50,"colors":[0,255,215]},{"envId":51,"colors":[0,255,255]},{"envId":52,"colors":[95,0,0]},{"envId":53,"colors":[95,0,95]},{"envId":54,"colors":[95,0,135]},{"envId":55,"colors":[95,0,175]},{"envId":56,"colors":[95,0,215]},{"envId":57,"colors":[95,0,255]},{"envId":58,"colors":[95,95,0]},{"envId":59,"colors":[95,95,95]},{"envId":60,"colors":[95,95,135]},{"envId":61,"colors":[95,95,175]},{"envId":62,"colors":[95,95,215]},{"envId":63,"colors":[95,95,255]},{"envId":64,"colors":[95,135,0]},{"envId":65,"colors":[95,135,95]},{"envId":66,"colors":[95,135,135]},{"envId":67,"colors":[95,135,175]},{"envId":68,"colors":[95,135,215]},{"envId":69,"colors":[95,135,255]},{"envId":70,"colors":[95,175,0]},{"envId":71,"colors":[95,175,95]},{"envId":72,"colors":[95,175,135]},{"envId":73,"colors":[95,175,175]},{"envId":74,"colors":[95,175,215]},{"envId":75,"colors":[95,175,255]},{"envId":76,"colors":[95,215,0]},{"envId":77,"colors":[95,215,95]},{"envId":78,"colors":[95,215,135]},{"envId":79,"colors":[95,215,175]},{"envId":80,"colors":[95,215,215]},{"envId":81,"colors":[95,215,255]},{"envId":82,"colors":[95,255,0]},{"envId":83,"colors":[95,255,95]},{"envId":84,"colors":[95,255,135]},{"envId":85,"colors":[95,255,175]},{"envId":86,"colors":[95,255,215]},{"envId":87,"colors":[95,255,255]},{"envId":88,"colors":[135,0,0]},{"envId":89,"colors":[135,0,95]},{"envId":90,"colors":[135,0,135]},{"envId":91,"colors":[135,0,175]},{"envId":92,"colors":[135,0,215]},{"envId":93,"colors":[135,0,255]},{"envId":94,"colors":[135,95,0]},{"envId":95,"colors":[135,95,95]},{"envId":96,"colors":[135,95,135]},{"envId":97,"colors":[135,95,175]},{"envId":98,"colors":[135,95,215]},{"envId":99,"colors":[135,95,255]},{"envId":100,"colors":[135,135,0]},{"envId":101,"colors":[135,135,95]},{"envId":102,"colors":[135,135,135]},{"envId":103,"colors":[135,135,175]},{"envId":104,"colors":[135,135,215]},{"envId":105,"colors":[135,135,255]},{"envId":106,"colors":[135,175,0]},{"envId":107,"colors":[135,175,95]},{"envId":108,"colors":[135,175,135]},{"envId":109,"colors":[135,175,175]},{"envId":110,"colors":[135,175,215]},{"envId":111,"colors":[135,175,255]},{"envId":112,"colors":[135,215,0]},{"envId":113,"colors":[135,215,95]},{"envId":114,"colors":[135,215,135]},{"envId":115,"colors":[135,215,175]},{"envId":116,"colors":[135,215,215]},{"envId":117,"colors":[135,215,255]},{"envId":118,"colors":[135,255,0]},{"envId":119,"colors":[135,255,95]},{"envId":120,"colors":[135,255,135]},{"envId":121,"colors":[135,255,175]},{"envId":122,"colors":[135,255,215]},{"envId":123,"colors":[135,255,255]},{"envId":124,"colors":[175,0,0]},{"envId":125,"colors":[175,0,95]},{"envId":126,"colors":[175,0,135]},{"envId":127,"colors":[175,0,175]},{"envId":128,"colors":[175,0,215]},{"envId":129,"colors":[175,0,255]},{"envId":130,"colors":[175,95,0]},{"envId":131,"colors":[175,95,95]},{"envId":132,"colors":[175,95,135]},{"envId":133,"colors":[175,95,175]},{"envId":134,"colors":[175,95,215]},{"envId":135,"colors":[175,95,255]},{"envId":136,"colors":[175,135,0]},{"envId":137,"colors":[175,135,95]},{"envId":138,"colors":[175,135,135]},{"envId":139,"colors":[175,135,175]},{"envId":140,"colors":[175,135,215]},{"envId":141,"colors":[175,135,255]},{"envId":142,"colors":[175,175,0]},{"envId":143,"colors":[175,175,95]},{"envId":144,"colors":[175,175,135]},{"envId":145,"colors":[175,175,175]},{"envId":146,"colors":[175,175,215]},{"envId":147,"colors":[175,175,255]},{"envId":148,"colors":[175,215,0]},{"envId":149,"colors":[175,215,95]},{"envId":150,"colors":[175,215,135]},{"envId":151,"colors":[175,215,175]},{"envId":152,"colors":[175,215,215]},{"envId":153,"colors":[175,215,255]},{"envId":154,"colors":[175,255,0]},{"envId":155,"colors":[175,255,95]},{"envId":156,"colors":[175,255,135]},{"envId":157,"colors":[175,255,175]},{"envId":158,"colors":[175,255,215]},{"envId":159,"colors":[175,255,255]},{"envId":160,"colors":[215,0,0]},{"envId":161,"colors":[215,0,95]},{"envId":162,"colors":[215,0,135]},{"envId":163,"colors":[215,0,175]},{"envId":164,"colors":[215,0,215]},{"envId":165,"colors":[215,0,255]},{"envId":166,"colors":[215,95,0]},{"envId":167,"colors":[215,95,95]},{"envId":168,"colors":[215,95,135]},{"envId":169,"colors":[215,95,175]},{"envId":170,"colors":[215,95,215]},{"envId":171,"colors":[215,95,255]},{"envId":172,"colors":[215,135,0]},{"envId":173,"colors":[215,135,95]},{"envId":174,"colors":[215,135,135]},{"envId":175,"colors":[215,135,175]},{"envId":176,"colors":[215,135,215]},{"envId":177,"colors":[215,135,255]},{"envId":178,"colors":[215,175,0]},{"envId":179,"colors":[215,175,95]},{"envId":180,"colors":[215,175,135]},{"envId":181,"colors":[215,175,175]},{"envId":182,"colors":[215,175,215]},{"envId":183,"colors":[215,175,255]},{"envId":184,"colors":[215,215,0]},{"envId":185,"colors":[215,215,95]},{"envId":186,"colors":[215,215,135]},{"envId":187,"colors":[215,215,175]},{"envId":188,"colors":[215,215,215]},{"envId":189,"colors":[215,215,255]},{"envId":190,"colors":[215,255,0]},{"envId":191,"colors":[215,255,95]},{"envId":192,"colors":[215,255,135]},{"envId":193,"colors":[215,255,175]},{"envId":194,"colors":[215,255,215]},{"envId":195,"colors":[215,255,255]},{"envId":196,"colors":[255,0,0]},{"envId":197,"colors":[255,0,95]},{"envId":198,"colors":[255,0,135]},{"envId":199,"colors":[255,0,175]},{"envId":200,"colors":[0,0,255]},{"envId":201,"colors":[0,255,0]},{"envId":202,"colors":[255,0,0]},{"envId":203,"colors":[165,42,42]},{"envId":204,"colors":[255,95,135]},{"envId":205,"colors":[255,95,175]},{"envId":206,"colors":[255,95,215]},{"envId":207,"colors":[255,95,255]},{"envId":208,"colors":[255,135,0]},{"envId":209,"colors":[255,135,95]},{"envId":210,"colors":[255,135,135]},{"envId":211,"colors":[255,135,175]},{"envId":212,"colors":[255,135,215]},{"envId":213,"colors":[255,135,255]},{"envId":214,"colors":[255,175,0]},{"envId":215,"colors":[255,175,95]},{"envId":216,"colors":[255,175,135]},{"envId":217,"colors":[255,175,175]},{"envId":218,"colors":[255,175,215]},{"envId":219,"colors":[255,175,255]},{"envId":220,"colors":[255,215,0]},{"envId":221,"colors":[255,215,95]},{"envId":222,"colors":[255,215,135]},{"envId":223,"colors":[255,215,175]},{"envId":224,"colors":[255,215,215]},{"envId":225,"colors":[255,215,255]},{"envId":226,"colors":[255,255,0]},{"envId":227,"colors":[255,255,95]},{"envId":228,"colors":[255,255,135]},{"envId":229,"colors":[255,255,175]},{"envId":230,"colors":[255,255,215]},{"envId":231,"colors":[255,255,255]},{"envId":232,"colors":[8,8,8]},{"envId":233,"colors":[18,18,18]},{"envId":234,"colors":[28,28,28]},{"envId":235,"colors":[38,38,38]},{"envId":236,"colors":[48,48,48]},{"envId":237,"colors":[58,58,58]},{"envId":238,"colors":[68,68,68]},{"envId":239,"colors":[78,78,78]},{"envId":240,"colors":[88,88,88]},{"envId":241,"colors":[98,98,98]},{"envId":242,"colors":[108,108,108]},{"envId":243,"colors":[118,118,118]},{"envId":244,"colors":[128,128,128]},{"envId":245,"colors":[138,138,138]},{"envId":246,"colors":[148,148,148]},{"envId":247,"colors":[158,158,158]},{"envId":248,"colors":[168,168,168]},{"envId":249,"colors":[178,178,178]},{"envId":250,"colors":[188,188,188]},{"envId":251,"colors":[198,198,198]},{"envId":252,"colors":[208,208,208]},{"envId":253,"colors":[218,218,218]},{"envId":254,"colors":[228,228,228]},{"envId":255,"colors":[238,238,238]},{"envId":257,"colors":[128,0,0]},{"envId":258,"colors":[0,128,0]},{"envId":259,"colors":[128,128,0]},{"envId":260,"colors":[0,0,128]},{"envId":261,"colors":[128,0,128]},{"envId":262,"colors":[0,128,128]},{"envId":263,"colors":[192,192,192]},{"envId":264,"colors":[0,0,0]},{"envId":265,"colors":[255,0,0]},{"envId":266,"colors":[0,255,0]},{"envId":267,"colors":[255,255,0]},{"envId":268,"colors":[0,0,255]},{"envId":269,"colors":[255,0,255]},{"envId":270,"colors":[0,255,255]},{"envId":271,"colors":[255,255,255]},{"envId":272,"colors":[128,128,128]},{"envId":293,"colors":[0,171,192]},{"envId":294,"colors":[139,255,0]},{"envId":295,"colors":[239,176,73]},{"envId":296,"colors":[163,151,235]},{"envId":297,"colors":[236,167,236]},{"envId":298,"colors":[22,232,196]},{"envId":299,"colors":[0,170,255]},{"envId":300,"colors":[0,196,255]},{"envId":301,"colors":[255,114,14]},{"envId":303,"colors":[170,139,89]},{"envId":400,"colors":[186,112,74]},{"envId":798,"colors":[255,140,0]},{"envId":799,"colors":[230,230,250]},{"envId":800,"colors":[30,144,255]},{"envId":801,"colors":[154,205,50]},{"envId":802,"colors":[85,107,47]},{"envId":803,"colors":[0,255,255]},{"envId":805,"colors":[107,142,35]},{"envId":806,"colors":[0,100,0]},{"envId":810,"colors":[255,0,0]},{"envId":811,"colors":[139,69,19]},{"envId":812,"colors":[230,230,250]},{"envId":813,"colors":[255,255,255]},{"envId":814,"colors":[34,139,34]},{"envId":823,"colors":[255,215,0]},{"envId":824,"colors":[47,79,79]},{"envId":825,"colors":[189,183,107]},{"envId":826,"colors":[184,134,11]},{"envId":830,"colors":[255,69,0]},{"envId":855,"colors":[160,82,45]}]

package/demo/index.html

@@ -1,102 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Konva Universal Lib — Demo</title>
-    <style>
-        html, body {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            font-family: Inter, system-ui, sans-serif;
-            background-color: #000;
-            color: #fff;
-        }
-
-        body {
-            position: relative;
-            overflow: hidden;
-        }
-
-        #stage {
-            width: 100%;
-            height: 100%;
-        }
-
-        #hud {
-            position: absolute;
-            top: 1rem;
-            left: 1rem;
-            padding: 0.5rem 0.75rem;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 0.5rem;
-            font-size: 0.9rem;
-            line-height: 1.4;
-            pointer-events: auto;
-        }
-
-        #controls {
-            margin-top: 0.5rem;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
-        #controls label {
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-            font-weight: 500;
-        }
-
-        #destination-form {
-            display: flex;
-            flex-direction: column;
-            gap: 0.35rem;
-        }
-
-        #destination-inputs {
-            display: flex;
-            gap: 0.35rem;
-        }
-
-        #destination-input {
-            width: 6rem;
-        }
-
-        #destination-status {
-            font-size: 0.8rem;
-            color: #c8f7ff;
-        }
-
-        #hud strong {
-            font-weight: 600;
-        }
-    </style>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-</head>
-<body>
-<div id="stage"></div>
-<div id="hud">
-    <div id="status">Loading map…</div>
-    <div id="walker-status"></div>
-    <div id="controls">
-        <label>
-            <input type="checkbox" id="exploration-toggle" checked>
-            Exploration overlay
-        </label>
-        <form id="destination-form">
-            <label for="destination-input">Destination room</label>
-            <div id="destination-inputs">
-                <input type="number" id="destination-input" min="1" placeholder="Room ID" />
-                <button type="submit">Set</button>
-                <button type="button" id="destination-clear">Clear</button>
-            </div>
-            <div id="destination-status"></div>
-        </form>
-    </div>
-</div>
-<script type="module" src="/main.ts"></script>
-</body>
-</html>