jaml-ui 0.5.0 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,29 +1,92 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo, useState } from "react";
|
|
4
4
|
import { JamlMapPreview } from "./JamlMapPreview.js";
|
|
5
5
|
import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
|
|
6
|
+
import { JimboColorOption } from "../ui/tokens.js";
|
|
7
|
+
function TallyBar({ value, max }) {
|
|
8
|
+
const pct = max > 0 ? Math.min(1, value / max) : 0;
|
|
9
|
+
return (_jsx("div", { style: { flex: 1, height: 4, borderRadius: 999, background: `${JimboColorOption.DARK_GREY}88`, overflow: "hidden" }, children: _jsx("div", { style: {
|
|
10
|
+
height: "100%",
|
|
11
|
+
width: `${pct * 100}%`,
|
|
12
|
+
borderRadius: 999,
|
|
13
|
+
background: value > 0 ? JimboColorOption.GREEN : JimboColorOption.GREY,
|
|
14
|
+
transition: "width 200ms ease",
|
|
15
|
+
} }) }));
|
|
16
|
+
}
|
|
6
17
|
function ResultsView({ results }) {
|
|
18
|
+
const [expanded, setExpanded] = useState(null);
|
|
7
19
|
if (results.length === 0) {
|
|
8
20
|
return (_jsx("div", { style: {
|
|
9
|
-
border:
|
|
10
|
-
borderRadius:
|
|
11
|
-
padding:
|
|
21
|
+
border: `1px dashed ${JimboColorOption.DARK_GREY}`,
|
|
22
|
+
borderRadius: 10,
|
|
23
|
+
padding: 16,
|
|
12
24
|
fontSize: 12,
|
|
13
|
-
|
|
14
|
-
background:
|
|
15
|
-
|
|
25
|
+
color: JimboColorOption.GREY,
|
|
26
|
+
background: `${JimboColorOption.DARKEST}88`,
|
|
27
|
+
textAlign: "center",
|
|
28
|
+
}, children: "No results yet. Run a search to find seeds." }));
|
|
16
29
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
30
|
+
const labels = results[0]?.tallyLabels ?? [];
|
|
31
|
+
const maxScore = Math.max(...results.map((r) => r.score ?? 0));
|
|
32
|
+
return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: results.map((result) => {
|
|
33
|
+
const isOpen = expanded === result.seed;
|
|
34
|
+
const hasTally = result.tallyColumns && result.tallyColumns.length > 0 && labels.length > 0;
|
|
35
|
+
return (_jsxs("div", { style: {
|
|
36
|
+
borderRadius: 10,
|
|
37
|
+
border: `1px solid ${isOpen ? JimboColorOption.GOLD + "55" : JimboColorOption.PANEL_EDGE}`,
|
|
38
|
+
background: isOpen ? `${JimboColorOption.GOLD}0a` : `${JimboColorOption.DARKEST}cc`,
|
|
39
|
+
overflow: "hidden",
|
|
40
|
+
transition: "border-color 120ms",
|
|
41
|
+
}, children: [_jsxs("button", { type: "button", onClick: () => hasTally && setExpanded(isOpen ? null : result.seed), style: {
|
|
42
|
+
width: "100%",
|
|
43
|
+
display: "flex",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
gap: 10,
|
|
46
|
+
padding: "9px 12px",
|
|
47
|
+
background: "none",
|
|
48
|
+
border: "none",
|
|
49
|
+
cursor: hasTally ? "pointer" : "default",
|
|
50
|
+
color: "inherit",
|
|
51
|
+
textAlign: "left",
|
|
52
|
+
}, children: [_jsx("span", { style: {
|
|
53
|
+
fontFamily: "m6x11plus, monospace",
|
|
54
|
+
fontWeight: 700,
|
|
55
|
+
fontSize: 14,
|
|
56
|
+
letterSpacing: 1,
|
|
57
|
+
color: JimboColorOption.GOLD_TEXT,
|
|
58
|
+
minWidth: 80,
|
|
59
|
+
}, children: result.seed }), result.score !== undefined ? (_jsxs(_Fragment, { children: [_jsx(TallyBar, { value: result.score, max: maxScore }), _jsx("span", { style: {
|
|
60
|
+
fontSize: 12,
|
|
61
|
+
fontWeight: 700,
|
|
62
|
+
color: result.score > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.GREY,
|
|
63
|
+
minWidth: 36,
|
|
64
|
+
textAlign: "right",
|
|
65
|
+
}, children: result.score })] })) : null, hasTally ? (_jsx("span", { style: { fontSize: 10, color: JimboColorOption.GREY, marginLeft: 2 }, children: isOpen ? "▲" : "▼" })) : null] }), isOpen && hasTally ? (_jsx("div", { style: {
|
|
66
|
+
borderTop: `1px solid ${JimboColorOption.PANEL_EDGE}`,
|
|
67
|
+
padding: "8px 12px 10px",
|
|
68
|
+
display: "flex",
|
|
69
|
+
flexDirection: "column",
|
|
70
|
+
gap: 5,
|
|
71
|
+
}, children: labels.map((label, i) => {
|
|
72
|
+
const val = result.tallyColumns[i] ?? 0;
|
|
73
|
+
const maxVal = Math.max(...results.map((r) => r.tallyColumns?.[i] ?? 0));
|
|
74
|
+
return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
|
|
75
|
+
fontSize: 11,
|
|
76
|
+
color: val > 0 ? JimboColorOption.WHITE : JimboColorOption.GREY,
|
|
77
|
+
minWidth: 140,
|
|
78
|
+
overflow: "hidden",
|
|
79
|
+
textOverflow: "ellipsis",
|
|
80
|
+
whiteSpace: "nowrap",
|
|
81
|
+
}, children: label }), _jsx(TallyBar, { value: val, max: maxVal }), _jsx("span", { style: {
|
|
82
|
+
fontSize: 11,
|
|
83
|
+
fontWeight: 700,
|
|
84
|
+
color: val > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.DARK_GREY,
|
|
85
|
+
minWidth: 24,
|
|
86
|
+
textAlign: "right",
|
|
87
|
+
}, children: val })] }, label));
|
|
88
|
+
}) })) : null] }, result.seed));
|
|
89
|
+
}) }));
|
|
27
90
|
}
|
|
28
91
|
export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, }) {
|
|
29
92
|
const [mode, setMode] = useState(defaultMode);
|
|
@@ -32,20 +95,21 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
|
|
|
32
95
|
display: "flex",
|
|
33
96
|
flexDirection: "column",
|
|
34
97
|
minHeight: 420,
|
|
35
|
-
borderRadius:
|
|
98
|
+
borderRadius: 12,
|
|
36
99
|
overflow: "hidden",
|
|
37
|
-
border:
|
|
38
|
-
|
|
39
|
-
|
|
100
|
+
border: `2px solid ${JimboColorOption.BORDER_SILVER}`,
|
|
101
|
+
boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
|
|
102
|
+
background: JimboColorOption.DARK_GREY,
|
|
103
|
+
color: JimboColorOption.WHITE,
|
|
40
104
|
}, children: [_jsxs("div", { style: {
|
|
41
105
|
display: "flex",
|
|
42
106
|
alignItems: "center",
|
|
43
107
|
justifyContent: "space-between",
|
|
44
108
|
gap: 12,
|
|
45
|
-
padding: "
|
|
46
|
-
borderBottom:
|
|
47
|
-
background:
|
|
48
|
-
}, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize:
|
|
109
|
+
padding: "10px 14px",
|
|
110
|
+
borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
|
|
111
|
+
background: JimboColorOption.TEAL_GREY,
|
|
112
|
+
}, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 800, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto", background: JimboColorOption.DARKEST }, 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: {
|
|
49
113
|
width: "100%",
|
|
50
114
|
minHeight: 320,
|
|
51
115
|
resize: "vertical",
|
|
@@ -53,9 +117,9 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
|
|
|
53
117
|
outline: 0,
|
|
54
118
|
padding: 16,
|
|
55
119
|
background: "transparent",
|
|
56
|
-
color:
|
|
120
|
+
color: JimboColorOption.WHITE,
|
|
57
121
|
fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
|
58
122
|
fontSize: 13,
|
|
59
123
|
lineHeight: 1.7,
|
|
60
|
-
} })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: jaml }) : null, mode === "results" ? _jsx("div", { style: { padding:
|
|
124
|
+
} })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: jaml }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results }) })) : null] })] }));
|
|
61
125
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { JimboColorOption } from "../ui/tokens.js";
|
|
3
4
|
const TABS = [
|
|
4
5
|
{ id: "code", label: "Code" },
|
|
5
6
|
{ id: "map", label: "Map" },
|
|
@@ -11,35 +12,43 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
|
|
|
11
12
|
alignItems: "center",
|
|
12
13
|
justifyContent: "space-between",
|
|
13
14
|
gap: 8,
|
|
14
|
-
padding: "
|
|
15
|
-
borderBottom:
|
|
16
|
-
background:
|
|
17
|
-
}, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap:
|
|
15
|
+
padding: "6px 10px",
|
|
16
|
+
borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
|
|
17
|
+
background: JimboColorOption.DARKEST,
|
|
18
|
+
}, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: TABS.map((tab) => {
|
|
18
19
|
const selected = mode === tab.id;
|
|
19
20
|
return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
|
|
20
21
|
cursor: "pointer",
|
|
21
|
-
borderRadius:
|
|
22
|
-
border: selected ?
|
|
23
|
-
background: selected ?
|
|
24
|
-
color: selected ?
|
|
25
|
-
padding: "
|
|
22
|
+
borderRadius: 6,
|
|
23
|
+
border: selected ? `1px solid ${JimboColorOption.GOLD}` : "1px solid transparent",
|
|
24
|
+
background: selected ? `${JimboColorOption.GOLD}22` : "transparent",
|
|
25
|
+
color: selected ? JimboColorOption.GOLD_TEXT : JimboColorOption.GREY,
|
|
26
|
+
padding: "5px 10px",
|
|
26
27
|
fontSize: 11,
|
|
27
|
-
fontWeight:
|
|
28
|
+
fontWeight: 700,
|
|
29
|
+
fontFamily: "m6x11plus, monospace",
|
|
30
|
+
transition: "background 120ms, color 120ms",
|
|
28
31
|
}, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
|
|
29
32
|
marginLeft: 6,
|
|
30
33
|
borderRadius: 999,
|
|
31
|
-
background:
|
|
34
|
+
background: `${JimboColorOption.GOLD}33`,
|
|
35
|
+
color: JimboColorOption.GOLD_TEXT,
|
|
32
36
|
padding: "1px 6px",
|
|
33
37
|
fontSize: 10,
|
|
34
38
|
}, children: resultCount })) : null] }, tab.id));
|
|
35
|
-
}) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch,
|
|
36
|
-
cursor:
|
|
37
|
-
borderRadius:
|
|
38
|
-
border:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
}) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch, style: {
|
|
40
|
+
cursor: "pointer",
|
|
41
|
+
borderRadius: 6,
|
|
42
|
+
border: isSearching
|
|
43
|
+
? `1px solid ${JimboColorOption.DARK_RED}`
|
|
44
|
+
: `1px solid ${JimboColorOption.GREEN}`,
|
|
45
|
+
background: isSearching
|
|
46
|
+
? `${JimboColorOption.RED}22`
|
|
47
|
+
: `${JimboColorOption.GREEN}22`,
|
|
48
|
+
color: isSearching ? JimboColorOption.RED : JimboColorOption.GREEN_TEXT,
|
|
49
|
+
padding: "5px 14px",
|
|
42
50
|
fontSize: 11,
|
|
43
51
|
fontWeight: 700,
|
|
52
|
+
fontFamily: "m6x11plus, monospace",
|
|
44
53
|
}, children: isSearching ? "Stop" : "Search" })) : null] }));
|
|
45
54
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jaml-ui",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -36,6 +36,12 @@
|
|
|
36
36
|
"README.md",
|
|
37
37
|
"LICENSE"
|
|
38
38
|
],
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsc --pretty false",
|
|
41
|
+
"dev": "tsc --watch",
|
|
42
|
+
"typecheck": "tsc --noEmit --pretty false",
|
|
43
|
+
"prepack": "npm run build"
|
|
44
|
+
},
|
|
39
45
|
"engines": {
|
|
40
46
|
"node": ">=18"
|
|
41
47
|
},
|
|
@@ -99,10 +105,5 @@
|
|
|
99
105
|
"react-icons": "^5.6.0",
|
|
100
106
|
"three": "^0.184.0",
|
|
101
107
|
"typescript": "^5.9.3"
|
|
102
|
-
},
|
|
103
|
-
"scripts": {
|
|
104
|
-
"build": "tsc --pretty false",
|
|
105
|
-
"dev": "tsc --watch",
|
|
106
|
-
"typecheck": "tsc --noEmit --pretty false"
|
|
107
108
|
}
|
|
108
|
-
}
|
|
109
|
+
}
|