jaml-ui 0.2.0 → 0.3.1

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." })] }));
+}

package/dist/index.d.ts

@@ -2,5 +2,10 @@ export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, res
 export { Layer, type LayerOptions } from "./render/Layer.js";
 export { JamlCardRenderer, type JamlCardRendererProps } from "./render/CanvasRenderer.js";
 export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, type JamlGameCardProps, type AnalyzerShopItem, type AnalyzerResolvedItem, } from "./components/GameCard.js";
+export { AnalyzerExplorer, type AnalyzerAnteView, type AnalyzerBadge, type AnalyzerExplorerProps, type AnalyzerFact, type AnalyzerHighlight, type AnalyzerItem, } from "./components/AnalyzerExplorer.js";
+export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPreview.js";
+export { JamlIde, type JamlIdeProps, type JamlIdeSearchResult, } from "./components/JamlIde.js";
+export { JamlIdeToolbar, type JamlIdeMode, type JamlIdeToolbarProps, } from "./components/JamlIdeToolbar.js";
 export { CardList, type CardListProps } from "./components/CardList.js";
+export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream, type StreamItem, type StreamState } from "./hooks/useShopStream.js";

package/dist/index.js

@@ -3,5 +3,10 @@ export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, res
 export { Layer } from "./render/Layer.js";
 export { JamlCardRenderer } from "./render/CanvasRenderer.js";
 export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, } from "./components/GameCard.js";
+export { AnalyzerExplorer, } from "./components/AnalyzerExplorer.js";
+export { JamlMapPreview } from "./components/JamlMapPreview.js";
+export { JamlIde, } from "./components/JamlIde.js";
+export { JamlIdeToolbar, } from "./components/JamlIdeToolbar.js";
 export { CardList } from "./components/CardList.js";
+export { extractVisualJamlItems, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream } from "./hooks/useShopStream.js";

package/dist/motely.d.ts

@@ -1 +1,2 @@
 export { decodeMotelyItem, decodeMotelyItemToJamlCard, motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, motelyItemRenderCategory, motelyItemEditionName, motelyItemSealName, motelyItemEnhancementName, motelyPlayingCardRankName, motelyPlayingCardSuitName, decodeMotelyItemName, resolveMotelyItemType, warmMotelyItemCache, motelyItemCacheSize, type DecodedMotelyItem, type MotelyItemInput, type MotelyJamlCard, type MotelyRenderableCategory, type MotelyRuntimeItem, } from "./decode/motelyItemDecoder.js";
+export { MOTELY_DISPLAY_SCHEMA, motelyBossDisplayName, motelyBossDisplayNameFromKey, motelyBossKeyFromDisplayName, motelyBoosterPackDisplayName, motelyBoosterPackDisplayNameFromKey, motelyBoosterPackKeyFromDisplayName, motelyItemDisplayNameFromKey, motelyItemDisplayNameFromValue, motelyTagDisplayName, motelyTagDisplayNameFromKey, motelyTagKeyFromDisplayName, motelyVoucherDisplayName, motelyVoucherDisplayNameFromKey, motelyVoucherKeyFromDisplayName, type MotelyBoosterPackKey, type MotelyBossKey, type MotelyDisplaySchema, type MotelyTagKey, type MotelyVoucherKey, } from "./motelyDisplay.js";

package/dist/motely.js

@@ -1,2 +1,3 @@
 "use client";
 export { decodeMotelyItem, decodeMotelyItemToJamlCard, motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, motelyItemRenderCategory, motelyItemEditionName, motelyItemSealName, motelyItemEnhancementName, motelyPlayingCardRankName, motelyPlayingCardSuitName, decodeMotelyItemName, resolveMotelyItemType, warmMotelyItemCache, motelyItemCacheSize, } from "./decode/motelyItemDecoder.js";
+export { MOTELY_DISPLAY_SCHEMA, motelyBossDisplayName, motelyBossDisplayNameFromKey, motelyBossKeyFromDisplayName, motelyBoosterPackDisplayName, motelyBoosterPackDisplayNameFromKey, motelyBoosterPackKeyFromDisplayName, motelyItemDisplayNameFromKey, motelyItemDisplayNameFromValue, motelyTagDisplayName, motelyTagDisplayNameFromKey, motelyTagKeyFromDisplayName, motelyVoucherDisplayName, motelyVoucherDisplayNameFromKey, motelyVoucherKeyFromDisplayName, } from "./motelyDisplay.js";