jaml-ui 0.1.0 → 0.3.0

package/README.md

@@ -2,6 +2,8 @@
 
 Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.
 
+`jaml-ui` is the shared UI layer for Balatro/JAML surfaces: low-level renderers, asset helpers, visual JAML previews, and a lightweight browser-first JAML IDE shell.
+
 ## Package shape
 
 - `jaml-ui`
@@ -45,6 +47,39 @@ export function Example() {
 }
 ```
 
+## JAML preview
+
+```tsx
+"use client";
+
+import { JamlMapPreview } from "jaml-ui";
+
+export function PreviewExample({ jaml }: { jaml: string }) {
+  return <JamlMapPreview jaml={jaml} title="JAML Intent Preview" />;
+}
+```
+
+## Lightweight JAML IDE shell
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { JamlIde } from "jaml-ui";
+
+export function IdeExample() {
+  const [jaml, setJaml] = useState("must:\n  joker: Blueprint");
+
+  return (
+    <JamlIde
+      jaml={jaml}
+      onChange={setJaml}
+      results={[]}
+    />
+  );
+}
+```
+
 ## Asset handling
 
 By default, `jaml-ui` resolves its packaged sprite assets from the package `assets/` directory using `import.meta.url`.
@@ -108,3 +143,5 @@ export default nextConfig;
 ## Browser-first runtime direction
 
 `jaml-ui` is designed for browser/React consumers. The optional `jaml-ui/motely` entry targets plain `motely-wasm` and does not assume threaded WASM, SAB, or COEP setup.
+
+The built-in `JamlIde` intentionally stays lightweight. Rich editor integrations like Monaco, custom language servers, or extension-host-specific tooling should live in app-level packages on top of `jaml-ui`, not in the base renderer package.

package/dist/components/GameCard.d.ts

@@ -13,6 +13,7 @@ export interface JamlGameCardProps {
     };
     type: "joker" | "consumable" | "playing";
     className?: string;
+    hoverTilt?: boolean;
 }
 export type AnalyzerShopItem = {
     id: string;
@@ -31,22 +32,25 @@ export type AnalyzerResolvedItem = {
     label: string;
 };
 export declare function resolveAnalyzerShopItem(item: AnalyzerShopItem, scale?: number): AnalyzerResolvedItem;
-export declare function JamlGameCard({ card, type, className }: JamlGameCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlGameCard({ card, type, className, hoverTilt }: JamlGameCardProps): import("react/jsx-runtime").JSX.Element;
 export interface VoucherProps {
     voucherName: string;
     scale?: number;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlVoucher({ voucherName, scale, className }: VoucherProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JamlVoucher({ voucherName, scale, className, hoverTilt }: VoucherProps): import("react/jsx-runtime").JSX.Element | null;
 export interface TagProps {
     tagName: string;
     scale?: number;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlTag({ tagName, scale, className }: TagProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JamlTag({ tagName, scale, className, hoverTilt }: TagProps): import("react/jsx-runtime").JSX.Element | null;
 export interface BossProps {
     bossName: string;
     scale?: number;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlBoss({ bossName, scale, className }: BossProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JamlBoss({ bossName, scale, className, hoverTilt }: BossProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/GameCard.js

@@ -198,7 +198,7 @@ export function resolveAnalyzerShopItem(item, scale = 1) {
     }
     return packedResolved ?? { kind: "unknown", label: displayName };
 }
-export function JamlGameCard({ card, type, className = "" }) {
+export function JamlGameCard({ card, type, className = "", hoverTilt = false }) {
     const { name, edition, isEternal, isPerishable, isRental, rank, suit, enhancements, seal, scale = 1 } = card;
     const layers = [];
     if (type === "joker") {
@@ -299,9 +299,9 @@ export function JamlGameCard({ card, type, className = "" }) {
         }
     }
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { invert: edition === "Negative", layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { invert: edition === "Negative", layers: layers, hoverTilt: hoverTilt }) }));
 }
-export function JamlVoucher({ voucherName, scale = 1, className = "" }) {
+export function JamlVoucher({ voucherName, scale = 1, className = "", hoverTilt = false }) {
     const voucherData = VOUCHERS.find((v) => v.name === voucherName);
     if (!voucherData)
         return null;
@@ -315,9 +315,9 @@ export function JamlVoucher({ voucherName, scale = 1, className = "" }) {
         }),
     ];
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers, hoverTilt: hoverTilt }) }));
 }
-export function JamlTag({ tagName, scale = 1, className = "" }) {
+export function JamlTag({ tagName, scale = 1, className = "", hoverTilt = false }) {
     const tagData = TAGS.find((t) => t.name === tagName);
     if (!tagData)
         return null;
@@ -331,9 +331,9 @@ export function JamlTag({ tagName, scale = 1, className = "" }) {
         }),
     ];
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers, hoverTilt: hoverTilt }) }));
 }
-export function JamlBoss({ bossName, scale = 1, className = "" }) {
+export function JamlBoss({ bossName, scale = 1, className = "", hoverTilt = false }) {
     const bossData = BOSSES.find((b) => b.name === bossName);
     if (!bossData)
         return null;
@@ -347,5 +347,5 @@ export function JamlBoss({ bossName, scale = 1, className = "" }) {
         }),
     ];
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers, hoverTilt: hoverTilt }) }));
 }

package/dist/components/JamlIde.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type JamlIdeMode } from "./JamlIdeToolbar.js";
+export interface JamlIdeSearchResult {
+    seed: string;
+    score?: number;
+}
+export interface JamlIdeProps {
+    jaml: string;
+    onChange: (jaml: string) => void;
+    defaultMode?: JamlIdeMode;
+    searchResults?: JamlIdeSearchResult[];
+    className?: string;
+    title?: string;
+    actions?: React.ReactNode;
+    codePlaceholder?: string;
+}
+export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIde.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { JamlMapPreview } from "./JamlMapPreview.js";
+import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
+function ResultsView({ results }) {
+    if (results.length === 0) {
+        return (_jsx("div", { style: {
+                border: "1px dashed rgba(255,255,255,0.18)",
+                borderRadius: 12,
+                padding: 14,
+                fontSize: 12,
+                opacity: 0.72,
+                background: "rgba(255,255,255,0.03)",
+            }, children: "No results yet." }));
+    }
+    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: results.map((result, index) => (_jsxs("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                borderRadius: 12,
+                border: "1px solid rgba(255,255,255,0.08)",
+                background: "rgba(255,255,255,0.03)",
+                padding: "10px 12px",
+            }, children: [_jsx("div", { style: { fontWeight: 700, letterSpacing: 0.4 }, children: result.seed }), _jsx("div", { style: { fontSize: 12, opacity: 0.7 }, children: result.score !== undefined ? result.score : "-" })] }, `${result.seed}-${index}`))) }));
+}
+export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", }) {
+    const [mode, setMode] = useState(defaultMode);
+    const results = useMemo(() => searchResults, [searchResults]);
+    return (_jsxs("div", { className: className, style: {
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 420,
+            borderRadius: 16,
+            overflow: "hidden",
+            border: "1px solid rgba(255,255,255,0.08)",
+            background: "#17181c",
+            color: "#f5f5f5",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 12,
+                    padding: "12px 14px",
+                    borderBottom: "1px solid rgba(255,255,255,0.08)",
+                    background: "rgba(255,255,255,0.03)",
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: 800 }, children: title }), _jsx("div", { style: { fontSize: 11, opacity: 0.66 }, children: "Reusable JAML authoring and preview surface." })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: [mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
+                            width: "100%",
+                            minHeight: 320,
+                            resize: "vertical",
+                            border: 0,
+                            outline: 0,
+                            padding: 16,
+                            background: "transparent",
+                            color: "inherit",
+                            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                            fontSize: 13,
+                            lineHeight: 1.7,
+                        } })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: jaml }) : null, mode === "results" ? _jsx("div", { style: { padding: 16 }, children: _jsx(ResultsView, { results: results }) }) : null] })] }));
+}

package/dist/components/JamlIdeToolbar.d.ts

@@ -0,0 +1,8 @@
+export type JamlIdeMode = "code" | "map" | "results";
+export interface JamlIdeToolbarProps {
+    mode: JamlIdeMode;
+    onModeChange: (mode: JamlIdeMode) => void;
+    resultCount?: number;
+    className?: string;
+}
+export declare function JamlIdeToolbar({ mode, onModeChange, resultCount, className }: JamlIdeToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIdeToolbar.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TABS = [
+    { id: "code", label: "Code" },
+    { id: "map", label: "Map" },
+    { id: "results", label: "Results" },
+];
+export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "" }) {
+    return (_jsx("div", { className: className, style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            padding: "8px 10px",
+            borderBottom: "1px solid rgba(255,255,255,0.08)",
+            background: "rgba(255,255,255,0.04)",
+        }, children: _jsx("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: TABS.map((tab) => {
+                const selected = mode === tab.id;
+                return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
+                        cursor: "pointer",
+                        borderRadius: 8,
+                        border: selected ? "1px solid rgba(247,185,85,0.55)" : "1px solid transparent",
+                        background: selected ? "rgba(247,185,85,0.16)" : "transparent",
+                        color: selected ? "#f7b955" : "rgba(255,255,255,0.58)",
+                        padding: "6px 10px",
+                        fontSize: 11,
+                        fontWeight: 600,
+                    }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
+                                marginLeft: 6,
+                                borderRadius: 999,
+                                background: "rgba(0,0,0,0.25)",
+                                padding: "1px 6px",
+                                fontSize: 10,
+                            }, children: resultCount })) : null] }, tab.id));
+            }) }) }));
+}

package/dist/components/JamlMapPreview.d.ts

@@ -0,0 +1,10 @@
+export interface JamlMapPreviewProps {
+    jaml: string;
+    className?: string;
+    title?: string;
+    emptyMessage?: string;
+    cardScale?: number;
+    tagScale?: number;
+    bossScale?: number;
+}
+export declare function JamlMapPreview({ jaml, className, title, emptyMessage, cardScale, tagScale, bossScale, }: JamlMapPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlMapPreview.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher } from "./GameCard.js";
+import { extractVisualJamlItems } from "../utils/jamlMapPreview.js";
+const SECTION_ORDER = ["must", "should", "mustNot"];
+const SECTION_LABELS = {
+    must: "Must Requirements",
+    should: "Should Requirements",
+    mustNot: "Must Not Requirements",
+};
+const SECTION_ACCENTS = {
+    must: { color: "#ff6b6b", border: "rgba(255,107,107,0.35)", panel: "rgba(255,107,107,0.08)" },
+    should: { color: "#f7b955", border: "rgba(247,185,85,0.35)", panel: "rgba(247,185,85,0.08)" },
+    mustNot: { color: "#8d7dff", border: "rgba(141,125,255,0.35)", panel: "rgba(141,125,255,0.08)" },
+};
+function renderPreviewItem(item, cardScale, tagScale, bossScale) {
+    switch (item.visualType) {
+        case "joker":
+            return _jsx(JamlGameCard, { card: { name: item.value, scale: cardScale }, type: "joker" });
+        case "consumable":
+            return _jsx(JamlGameCard, { card: { name: item.value, scale: cardScale }, type: "consumable" });
+        case "voucher":
+            return _jsx(JamlVoucher, { voucherName: item.value, scale: cardScale });
+        case "tag":
+            return _jsx(JamlTag, { tagName: item.value, scale: tagScale });
+        case "boss":
+            return _jsx(JamlBoss, { bossName: item.value, scale: bossScale });
+        default:
+            return null;
+    }
+}
+export function JamlMapPreview({ jaml, className = "", title = "JAML Map Preview", emptyMessage = "No visual JAML clauses found yet.", cardScale = 0.8, tagScale = 1.1, bossScale = 1.1, }) {
+    const groups = useMemo(() => extractVisualJamlItems(jaml), [jaml]);
+    const totalItems = SECTION_ORDER.reduce((sum, section) => sum + groups[section].length, 0);
+    return (_jsxs("div", { className: className, style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 16,
+            padding: 16,
+            color: "#f5f5f5",
+            borderRadius: 20,
+            border: "1px solid rgba(152,152,192,0.18)",
+            background: "linear-gradient(180deg, rgba(28,26,52,0.96) 0%, rgba(18,16,36,0.96) 100%)",
+            boxShadow: "0 14px 32px rgba(0,0,0,0.16)",
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 700, marginBottom: 4 }, children: title }), _jsx("div", { style: { fontSize: 12, opacity: 0.74, maxWidth: 520 }, children: "Preview the visual targets described directly in your JAML without running a full search." })] }), _jsxs("div", { style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                            borderRadius: 999,
+                            border: "1px solid rgba(141,125,255,0.3)",
+                            background: "rgba(141,125,255,0.12)",
+                            padding: "6px 10px",
+                            fontSize: 11,
+                            fontWeight: 700,
+                            color: "#c8bcff",
+                            letterSpacing: "0.04em",
+                            textTransform: "uppercase",
+                        }, children: [_jsx("span", { children: totalItems }), _jsx("span", { children: totalItems === 1 ? "visual target" : "visual targets" })] })] }), totalItems === 0 ? (_jsx("div", { style: {
+                    border: "1px dashed rgba(152,152,192,0.28)",
+                    borderRadius: 16,
+                    padding: 16,
+                    fontSize: 12,
+                    opacity: 0.72,
+                    background: "rgba(255,255,255,0.035)",
+                }, children: emptyMessage })) : null, SECTION_ORDER.map((section) => {
+                const items = groups[section];
+                if (items.length === 0)
+                    return null;
+                const accent = SECTION_ACCENTS[section];
+                return (_jsxs("section", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 10,
+                        borderRadius: 18,
+                        border: `1px solid ${accent.border}`,
+                        background: `linear-gradient(180deg, ${accent.panel} 0%, rgba(255,255,255,0.02) 100%)`,
+                        padding: 12,
+                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("div", { style: {
+                                        width: 6,
+                                        height: 18,
+                                        borderRadius: 999,
+                                        background: accent.color,
+                                    } }), _jsx("div", { style: { fontSize: 12, fontWeight: 700, color: accent.color }, children: SECTION_LABELS[section] }), _jsx("div", { style: {
+                                        marginLeft: "auto",
+                                        borderRadius: 999,
+                                        padding: "3px 8px",
+                                        fontSize: 10,
+                                        fontWeight: 700,
+                                        color: accent.color,
+                                        background: "rgba(255,255,255,0.04)",
+                                    }, children: items.length })] }), _jsx("div", { style: {
+                                display: "flex",
+                                flexWrap: "wrap",
+                                gap: 12,
+                            }, children: items.map((item) => (_jsxs("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    gap: 8,
+                                    minWidth: 96,
+                                    padding: 12,
+                                    borderRadius: 16,
+                                    border: `1px solid ${accent.border}`,
+                                    background: "rgba(10,10,20,0.24)",
+                                    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
+                                }, title: `${item.clauseKey}: ${item.value}`, children: [_jsx("div", { style: { minHeight: 72, display: "flex", alignItems: "center", justifyContent: "center" }, children: renderPreviewItem(item, cardScale, tagScale, bossScale) }), _jsx("div", { style: { fontSize: 11, textAlign: "center", lineHeight: 1.35, fontWeight: 600 }, children: item.value }), _jsx("div", { style: { fontSize: 10, opacity: 0.62, textTransform: "uppercase", letterSpacing: "0.06em" }, children: item.clauseKey })] }, item.id))) })] }, section));
+            }), _jsx("div", { style: {
+                    borderRadius: 16,
+                    border: "1px dashed rgba(141,125,255,0.28)",
+                    background: "rgba(141,125,255,0.08)",
+                    padding: 14,
+                    fontSize: 11,
+                    lineHeight: 1.5,
+                    opacity: 0.84,
+                }, children: "This preview shows direct visual targets that can be read from the JAML text itself. Advanced scoring logic, positional constraints, nested groups, and runtime-only search behavior are not fully represented here yet." })] }));
+}