jaml-ui 0.24.10 → 0.24.11
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.
|
@@ -19,6 +19,8 @@ export interface JamlIdeProps {
|
|
|
19
19
|
className?: string;
|
|
20
20
|
style?: React.CSSProperties;
|
|
21
21
|
title?: string;
|
|
22
|
+
subtitle?: React.ReactNode;
|
|
23
|
+
compactHeader?: boolean;
|
|
22
24
|
actions?: React.ReactNode;
|
|
23
25
|
codePlaceholder?: string;
|
|
24
26
|
onSearch?: () => void;
|
|
@@ -32,4 +34,4 @@ export interface JamlIdeProps {
|
|
|
32
34
|
}
|
|
33
35
|
export type { JamlVisualFilter } from "./JamlIdeVisual.js";
|
|
34
36
|
export type { JamlVisualClause, JamlZone } from "./JamlIdeVisual.js";
|
|
35
|
-
export declare function JamlIde({ jaml, defaultJaml, onChange, defaultMode, searchResults, className, style, title, actions, codePlaceholder, onSearch, isSearching, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare function JamlIde({ jaml, defaultJaml, onChange, defaultMode, searchResults, className, style, title, subtitle, compactHeader, actions, codePlaceholder, onSearch, isSearching, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -88,7 +88,7 @@ function ResultsView({ results, jaml }) {
|
|
|
88
88
|
})] })] })) : null] }, result.seed));
|
|
89
89
|
}) }));
|
|
90
90
|
}
|
|
91
|
-
export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, visualFilter, onVisualFilterChange, }) {
|
|
91
|
+
export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", subtitle = "Jimbo's Ante Markup Language", compactHeader = false, actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, visualFilter, onVisualFilterChange, }) {
|
|
92
92
|
const [mode, setMode] = useState(defaultMode);
|
|
93
93
|
const [internalText, setInternalText] = useState(jaml ?? defaultJaml ?? "");
|
|
94
94
|
const [lastJamlProp, setLastJamlProp] = useState(jaml);
|
|
@@ -184,9 +184,9 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
|
|
|
184
184
|
alignItems: "center",
|
|
185
185
|
justifyContent: "space-between",
|
|
186
186
|
flexWrap: "wrap",
|
|
187
|
-
gap: 12,
|
|
188
|
-
padding: "10px 14px",
|
|
187
|
+
gap: compactHeader ? 8 : 12,
|
|
188
|
+
padding: compactHeader ? "8px 10px" : "10px 14px",
|
|
189
189
|
borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
|
|
190
190
|
background: JimboColorOption.TEAL_GREY,
|
|
191
|
-
}, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children:
|
|
191
|
+
}, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), subtitle ? _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: subtitle }) : null] }), 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: mode === "map" ? "hidden" : "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange, onAddClause: handleAddClause })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapEditor, { onChange: handleTextChange }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null] }), _jsx(JimboModal, { open: addZone !== null, onClose: handlePickerClose, children: addZone !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: (cat) => setPickerFlow(cat) })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handlePickerSelect, onCancel: handlePickerClose })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handlePickerSelect, onCancel: handlePickerClose }))) })] }));
|
|
192
192
|
}
|
|
@@ -110,13 +110,18 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
|
|
|
110
110
|
};
|
|
111
111
|
return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsx("div", { ref: handleScrollAttach, className: "hide-scrollbar", style: {
|
|
112
112
|
flex: 1,
|
|
113
|
-
overflowY: "
|
|
113
|
+
overflowY: "scroll",
|
|
114
|
+
overflowX: "hidden",
|
|
114
115
|
scrollSnapType: "y mandatory",
|
|
115
|
-
scrollBehavior: "smooth"
|
|
116
|
+
scrollBehavior: "smooth",
|
|
117
|
+
WebkitOverflowScrolling: "touch",
|
|
118
|
+
overscrollBehaviorY: "contain",
|
|
116
119
|
}, children: Array.from({ length: 40 }, (_, i) => i).map((a) => (_jsxs("div", { style: {
|
|
117
120
|
scrollSnapAlign: "start",
|
|
121
|
+
scrollSnapStop: "always",
|
|
118
122
|
padding: "24px 8px 64px 8px",
|
|
119
|
-
minHeight: "100%",
|
|
123
|
+
minHeight: "100%",
|
|
124
|
+
boxSizing: "border-box",
|
|
120
125
|
display: "flex",
|
|
121
126
|
flexDirection: "column",
|
|
122
127
|
gap: 24,
|