jaml-ui 0.3.1 → 0.4.0

package/dist/components/JamlIde.d.ts

@@ -13,5 +13,7 @@ export interface JamlIdeProps {
     title?: string;
     actions?: React.ReactNode;
     codePlaceholder?: string;
+    onSearch?: () => void;
+    isSearching?: boolean;
 }
-export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, onSearch, isSearching, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIde.js

@@ -25,7 +25,7 @@ function ResultsView({ results }) {
                 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...", }) {
+export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, }) {
     const [mode, setMode] = useState(defaultMode);
     const results = useMemo(() => searchResults, [searchResults]);
     return (_jsxs("div", { className: className, style: {
@@ -45,7 +45,7 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
                     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: {
+                }, 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, onSearch: onSearch, isSearching: isSearching }), _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",

package/dist/components/JamlIdeToolbar.d.ts

@@ -4,5 +4,7 @@ export interface JamlIdeToolbarProps {
     onModeChange: (mode: JamlIdeMode) => void;
     resultCount?: number;
     className?: string;
+    onSearch?: () => void;
+    isSearching?: boolean;
 }
-export declare function JamlIdeToolbar({ mode, onModeChange, resultCount, className }: JamlIdeToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIdeToolbar({ mode, onModeChange, resultCount, className, onSearch, isSearching }: JamlIdeToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIdeToolbar.js

@@ -5,8 +5,8 @@ const TABS = [
     { id: "map", label: "Map" },
     { id: "results", label: "Results" },
 ];
-export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "" }) {
-    return (_jsx("div", { className: className, style: {
+export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "", onSearch, isSearching = false }) {
+    return (_jsxs("div", { className: className, style: {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
@@ -14,23 +14,32 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
             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));
-            }) }) }));
+        }, 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));
+                }) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch, disabled: isSearching, style: {
+                    cursor: isSearching ? "not-allowed" : "pointer",
+                    borderRadius: 8,
+                    border: "1px solid rgba(74,222,128,0.4)",
+                    background: isSearching ? "rgba(239,68,68,0.2)" : "rgba(74,222,128,0.15)",
+                    color: isSearching ? "#ef4444" : "#4ade80",
+                    padding: "6px 14px",
+                    fontSize: 11,
+                    fontWeight: 700,
+                }, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",