jaml-ui 0.1.0 → 0.3.0

package/dist/r3f/compositedAtlas.js

@@ -0,0 +1,56 @@
+/**
+ * Composite transparent 8Bit deck pips onto Enhancers card fronts (per-cell).
+ * Output canvas matches atlas pixel size so UV math is unchanged.
+ */
+import { resolveJamlAssetUrl } from "../assets.js";
+const CELL_W = 71;
+const CELL_H = 95;
+const DEFAULT_BASE_POS = { x: 1, y: 0 };
+const cache = new Map();
+const pending = new Map();
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+export function loadCompositedPlayingAtlas(atlasUrl, cols, rows, enhancersUrl) {
+    const enh = enhancersUrl ?? resolveJamlAssetUrl("enhancers");
+    const cacheKey = `${atlasUrl}|${enh}|${cols}x${rows}`;
+    const cached = cache.get(cacheKey);
+    if (cached)
+        return Promise.resolve(cached);
+    const inflight = pending.get(cacheKey);
+    if (inflight)
+        return inflight;
+    const promise = (async () => {
+        const [atlasImg, enhancersImg] = await Promise.all([
+            loadImage(atlasUrl),
+            loadImage(enh),
+        ]);
+        const canvas = document.createElement("canvas");
+        canvas.width = atlasImg.naturalWidth;
+        canvas.height = atlasImg.naturalHeight;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            throw new Error("2d context unavailable");
+        const baseSx = DEFAULT_BASE_POS.x * CELL_W;
+        const baseSy = DEFAULT_BASE_POS.y * CELL_H;
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                const dx = col * CELL_W;
+                const dy = row * CELL_H;
+                ctx.drawImage(enhancersImg, baseSx, baseSy, CELL_W, CELL_H, dx, dy, CELL_W, CELL_H);
+                ctx.drawImage(atlasImg, dx, dy, CELL_W, CELL_H, dx, dy, CELL_W, CELL_H);
+            }
+        }
+        cache.set(cacheKey, canvas);
+        pending.delete(cacheKey);
+        return canvas;
+    })();
+    pending.set(cacheKey, promise);
+    return promise;
+}

package/dist/r3f/gridUV.d.ts

@@ -0,0 +1,22 @@
+import * as THREE from "three";
+export type GridPos = {
+    x: number;
+    y: number;
+};
+type TexImage = THREE.Texture["image"];
+/** Pixel size of a loaded texture (image, canvas, or ImageBitmap). */
+export declare function getLoadedTexturePixelSize(image: TexImage): {
+    width: number;
+    height: number;
+};
+/**
+ * Balatro / Love2D-style atlas: top-left origin, y grows downward.
+ * Maps one grid cell to UV repeat/offset on the full texture.
+ */
+export declare function applyBalatroGridUV(tex: THREE.Texture, pos: GridPos, opts: {
+    cellW: number;
+    cellH: number;
+    textureWidth: number;
+    textureHeight: number;
+}): void;
+export {};

package/dist/r3f/gridUV.js

@@ -0,0 +1,30 @@
+import * as THREE from "three";
+/** Pixel size of a loaded texture (image, canvas, or ImageBitmap). */
+export function getLoadedTexturePixelSize(image) {
+    if (typeof HTMLImageElement !== "undefined" && image instanceof HTMLImageElement) {
+        return {
+            width: image.naturalWidth || image.width,
+            height: image.naturalHeight || image.height,
+        };
+    }
+    if (typeof HTMLCanvasElement !== "undefined" && image instanceof HTMLCanvasElement) {
+        return { width: image.width, height: image.height };
+    }
+    if (typeof ImageBitmap !== "undefined" && image instanceof ImageBitmap) {
+        return { width: image.width, height: image.height };
+    }
+    return { width: 0, height: 0 };
+}
+/**
+ * Balatro / Love2D-style atlas: top-left origin, y grows downward.
+ * Maps one grid cell to UV repeat/offset on the full texture.
+ */
+export function applyBalatroGridUV(tex, pos, opts) {
+    const cols = opts.textureWidth / opts.cellW;
+    const rows = opts.textureHeight / opts.cellH;
+    tex.wrapS = THREE.ClampToEdgeWrapping;
+    tex.wrapT = THREE.ClampToEdgeWrapping;
+    tex.repeat.set(1 / cols, 1 / rows);
+    tex.offset.set(pos.x / cols, 1 - (pos.y + 1) / rows);
+    tex.needsUpdate = true;
+}

package/dist/r3f/index.d.ts

@@ -0,0 +1,12 @@
+export { applyBalatroGridUV, getLoadedTexturePixelSize, type GridPos } from "./gridUV.js";
+export { loadCompositedPlayingAtlas } from "./compositedAtlas.js";
+export { BALATRO_JOKER_ATLAS_META, BALATRO_JOKERS, findJokerByDisplayName, findJokerByKey, getJokerAtlasGridSize, getJokerAtlasImageUrl, type BalatroJokerCenter, } from "./jokerRegistry.js";
+export { DEFAULT_CARD_BOX, DEFAULT_CARD_MAGNET, type CardBoxOptions, type CardMagnetOptions, } from "./cardConstants.js";
+export { magneticTargetFromUvPlayingCard, lerpMagneticGroup, createZeroMagneticTarget, resetMagneticTarget, type MagneticTarget, } from "./magneticTilt.js";
+export { PLAYING_CARD_ATLAS, RANK_COLUMN, SUIT_COLORS, SUIT_ROW, type PlayingCard3DModel, type PlayingCardEdition, type PlayingCardEnhancement, type PlayingCardRank, type PlayingCardSeal, type PlayingCardSuit, } from "./playingCardTypes.js";
+export { editionMaterialProps, enhancementGlowHex, sealColorHex } from "./playingCardVisuals.js";
+export { usePlayingCardFaceTexture, useCardBackTexture } from "./usePlayingCardTexture.js";
+export { BalatroPlayingCard3D, type BalatroPlayingCard3DProps } from "./BalatroPlayingCard3D.js";
+export { BalatroJokerMesh3D, type BalatroJokerMesh3DProps } from "./BalatroJokerMesh3D.js";
+export { BalatroJokerPreview3D, BalatroJokerThreePreview, type BalatroJokerPreview3DProps, } from "./BalatroJokerPreview3D.js";
+export { jokerAmbientTiltAtTime, jokerPointerTiltFromUv, JOKER_TILT_LERP_IN, JOKER_TILT_LERP_OUT, stableIdFraction, } from "./jokerTilt.js";

package/dist/r3f/index.js

@@ -0,0 +1,13 @@
+"use client";
+export { applyBalatroGridUV, getLoadedTexturePixelSize } from "./gridUV.js";
+export { loadCompositedPlayingAtlas } from "./compositedAtlas.js";
+export { BALATRO_JOKER_ATLAS_META, BALATRO_JOKERS, findJokerByDisplayName, findJokerByKey, getJokerAtlasGridSize, getJokerAtlasImageUrl, } from "./jokerRegistry.js";
+export { DEFAULT_CARD_BOX, DEFAULT_CARD_MAGNET, } from "./cardConstants.js";
+export { magneticTargetFromUvPlayingCard, lerpMagneticGroup, createZeroMagneticTarget, resetMagneticTarget, } from "./magneticTilt.js";
+export { PLAYING_CARD_ATLAS, RANK_COLUMN, SUIT_COLORS, SUIT_ROW, } from "./playingCardTypes.js";
+export { editionMaterialProps, enhancementGlowHex, sealColorHex } from "./playingCardVisuals.js";
+export { usePlayingCardFaceTexture, useCardBackTexture } from "./usePlayingCardTexture.js";
+export { BalatroPlayingCard3D } from "./BalatroPlayingCard3D.js";
+export { BalatroJokerMesh3D } from "./BalatroJokerMesh3D.js";
+export { BalatroJokerPreview3D, BalatroJokerThreePreview, } from "./BalatroJokerPreview3D.js";
+export { jokerAmbientTiltAtTime, jokerPointerTiltFromUv, JOKER_TILT_LERP_IN, JOKER_TILT_LERP_OUT, stableIdFraction, } from "./jokerTilt.js";

package/dist/r3f/jokerRegistry.d.ts

@@ -0,0 +1,28 @@
+export type BalatroJokerCenter = {
+    key: string;
+    name: string;
+    pos: {
+        x: number;
+        y: number;
+    };
+    soulPos?: {
+        x: number;
+        y: number;
+    };
+};
+export declare const BALATRO_JOKER_ATLAS_META: {
+    publicPath: string;
+    cellPx: {
+        x: number;
+        y: number;
+    };
+};
+export declare const BALATRO_JOKERS: BalatroJokerCenter[];
+/** Prefer bundled asset resolver so hosts can override base URL. */
+export declare function getJokerAtlasImageUrl(): string;
+export declare function getJokerAtlasGridSize(): {
+    cols: number;
+    rows: number;
+};
+export declare function findJokerByDisplayName(displayName: string): BalatroJokerCenter | undefined;
+export declare function findJokerByKey(key: string): BalatroJokerCenter | undefined;

package/dist/r3f/jokerRegistry.js

@@ -0,0 +1,40 @@
+import jokersPayload from "../data/balatro-jokers.json";
+import { resolveJamlAssetUrl } from "../assets.js";
+const payload = jokersPayload;
+export const BALATRO_JOKER_ATLAS_META = payload.atlas;
+export const BALATRO_JOKERS = payload.jokers;
+/** Prefer bundled asset resolver so hosts can override base URL. */
+export function getJokerAtlasImageUrl() {
+    return resolveJamlAssetUrl("jokers");
+}
+export function getJokerAtlasGridSize() {
+    let mx = 0;
+    let my = 0;
+    for (const j of BALATRO_JOKERS) {
+        mx = Math.max(mx, j.pos.x);
+        my = Math.max(my, j.pos.y);
+        if (j.soulPos) {
+            mx = Math.max(mx, j.soulPos.x);
+            my = Math.max(my, j.soulPos.y);
+        }
+    }
+    return { cols: mx + 1, rows: my + 1 };
+}
+const NAME_ALIASES = {
+    canio: "Caino",
+    séance: "Seance",
+    seance: "Seance",
+};
+function normalizeLookup(name) {
+    const t = name.trim();
+    const alias = NAME_ALIASES[t.toLowerCase()];
+    return alias ?? t;
+}
+export function findJokerByDisplayName(displayName) {
+    const needle = normalizeLookup(displayName).toLowerCase();
+    return BALATRO_JOKERS.find((j) => j.name.toLowerCase() === needle);
+}
+export function findJokerByKey(key) {
+    const k = key.trim().toLowerCase();
+    return BALATRO_JOKERS.find((j) => j.key.toLowerCase() === k);
+}

package/dist/r3f/jokerTilt.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from "three";
+import type { MagneticTarget } from "./magneticTilt.js";
+export declare const JOKER_TILT_LERP_IN = 20;
+export declare const JOKER_TILT_LERP_OUT = 11;
+export declare function stableIdFraction(s: string): number;
+export declare function applyJokerTiltFromNormalized(nx: number, ny: number, amtScale: number, target: MagneticTarget): void;
+export declare function jokerPointerTiltFromUv(uv: THREE.Vector2, target: MagneticTarget): void;
+export declare function jokerAmbientTiltAtTime(t: number, idFrac: number, target: MagneticTarget): void;

package/dist/r3f/jokerTilt.js

@@ -0,0 +1,41 @@
+import * as THREE from "three";
+const AMBIENT_TILT = 0.2;
+const TILT_FACTOR = 0.3;
+const MAGNET_MAX_RX = 0.34;
+const MAGNET_MAX_RY = 0.4;
+const MAGNET_MAX_SHIFT = 0.05;
+const MAGNET_TWIST_Z = 0.1;
+export const JOKER_TILT_LERP_IN = 20;
+export const JOKER_TILT_LERP_OUT = 11;
+export function stableIdFraction(s) {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return ((h >>> 0) % 100000) / 100000;
+}
+export function applyJokerTiltFromNormalized(nx, ny, amtScale, target) {
+    const clampedX = THREE.MathUtils.clamp(nx, -1, 1);
+    const clampedY = THREE.MathUtils.clamp(ny, -1, 1);
+    target.ry = -clampedX * MAGNET_MAX_RY * amtScale;
+    target.rx = clampedY * MAGNET_MAX_RX * amtScale;
+    target.rz = -clampedX * clampedY * MAGNET_TWIST_Z * amtScale;
+    target.ox = clampedX * MAGNET_MAX_SHIFT * amtScale;
+    target.oy = -clampedY * MAGNET_MAX_SHIFT * 0.65 * amtScale;
+}
+export function jokerPointerTiltFromUv(uv, target) {
+    const nx = (uv.x - 0.5) * 2;
+    const ny = (uv.y - 0.5) * 2;
+    const amt = Math.abs(ny + nx - 1) * TILT_FACTOR;
+    applyJokerTiltFromNormalized(nx, ny, THREE.MathUtils.clamp(amt * 1.15, 0.35, 1.25), target);
+}
+export function jokerAmbientTiltAtTime(t, idFrac, target) {
+    const tiltAngle = t * (1.56 + ((idFrac / 1.14212) % 1)) + idFrac / 1.35122;
+    const nu = 0.5 + 0.5 * AMBIENT_TILT * Math.cos(tiltAngle);
+    const nv = 0.5 + 0.5 * AMBIENT_TILT * Math.sin(tiltAngle);
+    const nx = (nu - 0.5) * 2;
+    const ny = (nv - 0.5) * 2;
+    const amt = AMBIENT_TILT * (0.5 + Math.cos(tiltAngle)) * TILT_FACTOR;
+    applyJokerTiltFromNormalized(nx, ny, THREE.MathUtils.clamp(amt * 2.2, 0.2, 1), target);
+}

package/dist/r3f/magneticTilt.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from "three";
+export type MagneticTarget = {
+    rx: number;
+    ry: number;
+    rz: number;
+    ox: number;
+    oy: number;
+};
+export declare function createZeroMagneticTarget(): MagneticTarget;
+/** Map pointer UV on card face to rotation + in-plane shift (Balatro-style). */
+export declare function magneticTargetFromUvPlayingCard(uv: THREE.Vector2, magnet: {
+    MAX_TILT_X: number;
+    MAX_TILT_Y: number;
+    MAX_SHIFT: number;
+    TWIST_Z: number;
+}): MagneticTarget;
+export declare function resetMagneticTarget(t: MagneticTarget): void;
+export declare function lerpMagneticGroup(group: THREE.Group, target: MagneticTarget, dt: number, lerpIn: number, lerpOut: number, hovered: boolean, extraRz: number): void;

package/dist/r3f/magneticTilt.js

@@ -0,0 +1,34 @@
+import * as THREE from "three";
+export function createZeroMagneticTarget() {
+    return { rx: 0, ry: 0, rz: 0, ox: 0, oy: 0 };
+}
+/** Map pointer UV on card face to rotation + in-plane shift (Balatro-style). */
+export function magneticTargetFromUvPlayingCard(uv, magnet) {
+    const nx = (uv.x - 0.5) * 2;
+    const ny = (uv.y - 0.5) * 2;
+    const clampedX = THREE.MathUtils.clamp(nx, -1, 1);
+    const clampedY = THREE.MathUtils.clamp(ny, -1, 1);
+    return {
+        ry: -clampedX * magnet.MAX_TILT_Y,
+        rx: clampedY * magnet.MAX_TILT_X,
+        rz: -clampedX * clampedY * magnet.TWIST_Z,
+        ox: clampedX * magnet.MAX_SHIFT,
+        oy: -clampedY * magnet.MAX_SHIFT * 0.65,
+    };
+}
+export function resetMagneticTarget(t) {
+    t.rx = 0;
+    t.ry = 0;
+    t.rz = 0;
+    t.ox = 0;
+    t.oy = 0;
+}
+export function lerpMagneticGroup(group, target, dt, lerpIn, lerpOut, hovered, extraRz) {
+    const rate = hovered ? lerpIn : lerpOut;
+    const a = 1 - Math.exp(-rate * dt);
+    group.rotation.x = THREE.MathUtils.lerp(group.rotation.x, target.rx, a);
+    group.rotation.y = THREE.MathUtils.lerp(group.rotation.y, target.ry, a);
+    group.rotation.z = THREE.MathUtils.lerp(group.rotation.z, target.rz + extraRz, a);
+    group.position.x = THREE.MathUtils.lerp(group.position.x, target.ox, a);
+    group.position.y = THREE.MathUtils.lerp(group.position.y, target.oy, a);
+}

package/dist/r3f/playingCardTypes.d.ts

@@ -0,0 +1,24 @@
+export type PlayingCardSuit = "hearts" | "diamonds" | "clubs" | "spades";
+export type PlayingCardRank = "A" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "J" | "Q" | "K";
+export type PlayingCardEnhancement = "bonus" | "mult" | "wild" | "glass" | "steel" | "stone" | "gold" | "lucky";
+export type PlayingCardSeal = "gold" | "red" | "blue" | "purple";
+export type PlayingCardEdition = "foil" | "holographic" | "polychrome" | "negative";
+/** Minimal card model for 3D mesh (game-specific id/chips optional). */
+export interface PlayingCard3DModel {
+    suit: PlayingCardSuit;
+    rank: PlayingCardRank;
+    enhancement?: PlayingCardEnhancement;
+    seal?: PlayingCardSeal;
+    edition?: PlayingCardEdition;
+}
+export declare const PLAYING_CARD_ATLAS: {
+    readonly columns: 13;
+    readonly rows: 4;
+    readonly cellPx: {
+        readonly x: 71;
+        readonly y: 95;
+    };
+};
+export declare const SUIT_ROW: Record<PlayingCardSuit, number>;
+export declare const RANK_COLUMN: Record<PlayingCardRank, number>;
+export declare const SUIT_COLORS: Record<PlayingCardSuit, string>;

package/dist/r3f/playingCardTypes.js

@@ -0,0 +1,32 @@
+export const PLAYING_CARD_ATLAS = {
+    columns: 13,
+    rows: 4,
+    cellPx: { x: 71, y: 95 },
+};
+export const SUIT_ROW = {
+    hearts: 0,
+    clubs: 1,
+    diamonds: 2,
+    spades: 3,
+};
+export const RANK_COLUMN = {
+    "2": 0,
+    "3": 1,
+    "4": 2,
+    "5": 3,
+    "6": 4,
+    "7": 5,
+    "8": 6,
+    "9": 7,
+    "10": 8,
+    J: 9,
+    Q: 10,
+    K: 11,
+    A: 12,
+};
+export const SUIT_COLORS = {
+    hearts: "#e74c3c",
+    diamonds: "#3498db",
+    clubs: "#27ae60",
+    spades: "#2c3e50",
+};

package/dist/r3f/playingCardVisuals.d.ts

@@ -0,0 +1,7 @@
+import type { PlayingCard3DModel } from "./playingCardTypes.js";
+export declare function editionMaterialProps(edition: PlayingCard3DModel["edition"]): {
+    metalness: number;
+    roughness: number;
+};
+export declare function enhancementGlowHex(card: PlayingCard3DModel, highlighted: boolean): string;
+export declare function sealColorHex(seal: PlayingCard3DModel["seal"]): string;

package/dist/r3f/playingCardVisuals.js

@@ -0,0 +1,45 @@
+import { SUIT_COLORS } from "./playingCardTypes.js";
+export function editionMaterialProps(edition) {
+    switch (edition) {
+        case "foil":
+            return { metalness: 0.9, roughness: 0.1 };
+        case "holographic":
+            return { metalness: 0.7, roughness: 0.2 };
+        case "polychrome":
+            return { metalness: 0.8, roughness: 0.15 };
+        default:
+            return { metalness: 0.1, roughness: 0.8 };
+    }
+}
+export function enhancementGlowHex(card, highlighted) {
+    switch (card.enhancement) {
+        case "bonus":
+            return "#3498db";
+        case "mult":
+            return "#e74c3c";
+        case "wild":
+            return "#9b59b6";
+        case "glass":
+            return "#1abc9c";
+        case "steel":
+            return "#95a5a6";
+        case "gold":
+            return "#f1c40f";
+        case "lucky":
+            return "#2ecc71";
+        default:
+            return highlighted ? SUIT_COLORS[card.suit] : "#ffffff";
+    }
+}
+export function sealColorHex(seal) {
+    switch (seal) {
+        case "gold":
+            return "#f1c40f";
+        case "red":
+            return "#e74c3c";
+        case "blue":
+            return "#3498db";
+        default:
+            return "#9b59b6";
+    }
+}

package/dist/r3f/usePlayingCardTexture.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+import { type PlayingCardRank, type PlayingCardSuit } from "./playingCardTypes.js";
+export declare function usePlayingCardFaceTexture(suit: PlayingCardSuit, rank: PlayingCardRank, options?: {
+    deckUrl?: string;
+    enhancersUrl?: string;
+}): THREE.Texture | null;
+export declare function useCardBackTexture(): THREE.Texture;

package/dist/r3f/usePlayingCardTexture.js

@@ -0,0 +1,92 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { resolveJamlAssetUrl } from "../assets.js";
+import { applyBalatroGridUV } from "./gridUV.js";
+import { loadCompositedPlayingAtlas } from "./compositedAtlas.js";
+import { PLAYING_CARD_ATLAS, RANK_COLUMN, SUIT_ROW, } from "./playingCardTypes.js";
+const textureCache = new Map();
+function magnetKey(suit, rank, deckUrl, enhancersUrl) {
+    return `${deckUrl}|${enhancersUrl}|${suit}|${rank}`;
+}
+export function usePlayingCardFaceTexture(suit, rank, options) {
+    const [texture, setTexture] = useState(null);
+    const loadSerial = useRef(0);
+    const deckUrl = options?.deckUrl ?? resolveJamlAssetUrl("deck");
+    const enhancersUrl = options?.enhancersUrl ?? resolveJamlAssetUrl("enhancers");
+    useEffect(() => {
+        const serial = ++loadSerial.current;
+        let cancelled = false;
+        const key = magnetKey(suit, rank, deckUrl, enhancersUrl);
+        const cached = textureCache.get(key);
+        if (cached) {
+            setTexture(cached);
+            return;
+        }
+        loadCompositedPlayingAtlas(deckUrl, PLAYING_CARD_ATLAS.columns, PLAYING_CARD_ATLAS.rows, enhancersUrl)
+            .then((canvas) => {
+            if (cancelled || serial !== loadSerial.current)
+                return;
+            const tex = new THREE.CanvasTexture(canvas);
+            tex.colorSpace = THREE.SRGBColorSpace;
+            tex.magFilter = THREE.NearestFilter;
+            tex.minFilter = THREE.NearestFilter;
+            const tw = canvas.width;
+            const th = canvas.height;
+            const cellW = tw / PLAYING_CARD_ATLAS.columns;
+            const cellH = th / PLAYING_CARD_ATLAS.rows;
+            applyBalatroGridUV(tex, { x: RANK_COLUMN[rank], y: SUIT_ROW[suit] }, {
+                cellW,
+                cellH,
+                textureWidth: tw,
+                textureHeight: th,
+            });
+            textureCache.set(key, tex);
+            setTexture(tex);
+        })
+            .catch((err) => {
+            console.error("[jaml-ui/r3f] playing card atlas failed:", err);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [suit, rank, deckUrl, enhancersUrl]);
+    return texture;
+}
+export function useCardBackTexture() {
+    const [tex] = useState(() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = PLAYING_CARD_ATLAS.cellPx.x;
+        canvas.height = PLAYING_CARD_ATLAS.cellPx.y;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            throw new Error("2d context unavailable");
+        ctx.fillStyle = "#1a1a2e";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = "#c9a227";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(2, 2, canvas.width - 4, canvas.height - 4);
+        ctx.fillStyle = "#16213e";
+        for (let y = 8; y < canvas.height - 8; y += 10) {
+            for (let x = 8; x < canvas.width - 8; x += 10) {
+                ctx.fillRect(x, y, 5, 5);
+            }
+        }
+        ctx.fillStyle = "#c9a227";
+        const cx = canvas.width / 2;
+        const cy = canvas.height / 2;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - 17);
+        ctx.lineTo(cx + 14, cy);
+        ctx.lineTo(cx, cy + 17);
+        ctx.lineTo(cx - 14, cy);
+        ctx.closePath();
+        ctx.fill();
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.magFilter = THREE.NearestFilter;
+        texture.minFilter = THREE.NearestFilter;
+        texture.colorSpace = THREE.SRGBColorSpace;
+        return texture;
+    });
+    return tex;
+}

package/dist/render/CanvasRenderer.d.ts

@@ -3,5 +3,6 @@ export interface JamlCardRendererProps {
     layers: Layer[];
     invert?: boolean;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlCardRenderer({ layers, invert, className }: JamlCardRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlCardRenderer({ layers, invert, className, hoverTilt }: JamlCardRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/CanvasRenderer.js

@@ -40,13 +40,15 @@ function renderImage(canvas, context, image, layer, timestamp) {
     context.restore();
     return cardWidth / cardHeight;
 }
-export function JamlCardRenderer({ layers, invert = false, className = "" }) {
+export function JamlCardRenderer({ layers, invert = false, className = "", hoverTilt = false }) {
     const canvasRef = useRef(null);
     const imageCacheRef = useRef(new Map());
     const [ratio, setRatio] = useState(3 / 4);
     const [, forceUpdate] = useState(0);
     const animationFrameRef = useRef(null);
     const [elapsed, setElapsed] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    const [transform, setTransform] = useState("none");
     const hasAnimatedLayer = layers?.some((layer) => layer.animated);
     useEffect(() => {
         let cancelled = false;
@@ -133,15 +135,41 @@ export function JamlCardRenderer({ layers, invert = false, className = "" }) {
         }
         return () => { cancelled = true; };
     }, [layers, elapsed, invert, hasAnimatedLayer]);
+    const handlePointerEnter = (event) => {
+        if (!hoverTilt || event.pointerType === "touch")
+            return;
+        setIsHovered(true);
+    };
+    const handlePointerLeave = () => {
+        if (!hoverTilt)
+            return;
+        setIsHovered(false);
+        setTransform("none");
+    };
+    const handlePointerMove = (event) => {
+        if (!hoverTilt || event.pointerType === "touch")
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const rotateY = (x / rect.width) * 12 - 6;
+        const rotateX = (y / rect.height) * -16 + 8;
+        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`);
+    };
     const containerStyle = {
         aspectRatio: String(ratio),
         width: "100%",
         display: "flex",
+        transition: hoverTilt && !isHovered ? "transform 0.4s ease" : undefined,
+        transform: hoverTilt ? (isHovered ? transform : "none") : undefined,
+        transformStyle: hoverTilt ? "preserve-3d" : undefined,
+        transformOrigin: hoverTilt ? "center center" : undefined,
     };
     const canvasStyle = {
         borderRadius: "6px",
-        boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+        boxShadow: hoverTilt && isHovered ? "0 2px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.2)",
         imageRendering: "pixelated",
+        transition: hoverTilt && !isHovered ? "box-shadow 0.4s ease-out" : undefined,
     };
-    return (_jsx("div", { className: className, style: containerStyle, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+    return (_jsx("div", { className: className, style: containerStyle, onPointerEnter: hoverTilt ? handlePointerEnter : undefined, onPointerLeave: hoverTilt ? handlePointerLeave : undefined, onPointerMove: hoverTilt ? handlePointerMove : undefined, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
 }

package/dist/utils/jamlMapPreview.d.ts

@@ -0,0 +1,12 @@
+export type JamlPreviewSection = "must" | "should" | "mustNot";
+export type JamlPreviewVisualType = "joker" | "consumable" | "voucher" | "tag" | "boss";
+export interface JamlPreviewItem {
+    id: string;
+    section: JamlPreviewSection;
+    clauseKey: string;
+    visualType: JamlPreviewVisualType;
+    value: string;
+    source: string;
+}
+export type JamlPreviewGroups = Record<JamlPreviewSection, JamlPreviewItem[]>;
+export declare function extractVisualJamlItems(jaml: string): JamlPreviewGroups;