jaml-ui 0.2.0 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # jaml-ui
 
-Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.
+React components and utilities for Balatro/JAML. Pair with **`motely-wasm`** when you need the engine (peer). Update both in consumers with normal **`pnpm update`** / semver like any other deps.
 
 ## Package shape
 
@@ -17,8 +17,6 @@ Balatro rendering components, sprite metadata, and optional Motely helpers for R
 npm install jaml-ui react react-dom
 ```
 
-**Latest published major features:** `0.2.x` adds `jaml-ui/r3f` (Three.js card meshes). If you need `0.2.0` from npm and hit Windows publish issues, see [PUBLISHING.md](./PUBLISHING.md) and use GitHub Actions or Linux to `npm publish`.
-
 If you want the Motely-specific helpers too:
 
 ```bash
@@ -47,6 +45,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`.
@@ -90,34 +121,9 @@ const itemName = decodeMotelyItemName(0x5001);
 const enumKey = motelyItemTypeName(0x5001);
 ```
 
-## Three.js / R3F (optional)
-
-`jaml-ui/r3f` provides **magnetic-tilt** meshes for playing cards and jokers. Peer dependencies (install in your app):
-
-- `three`
-- `@react-three/fiber`
-- `@react-spring/three`
-
-```tsx
-"use client";
-
-import { BalatroPlayingCard3D, BalatroJokerPreview3D } from "jaml-ui/r3f";
-
-// In an existing <Canvas>: BalatroPlayingCard3D with card={{ suit, rank, ... }}
-// Standalone joker preview:
-export function Preview() {
-  return <BalatroJokerPreview3D displayName="Blueprint" />;
-}
-```
-
-Atlas URLs default to packaged sprites; override with `setJamlAssetBaseUrl("/your/public/images/")` or per-component `deckUrl` / `jokersImageUrl` props.
-
-Bundled data: `balatro-jokers.json` ships in `dist/data/` for joker grid lookup.
-
 ## Next.js notes
 
 - The root `jaml-ui` entry is client-oriented and preserves the `"use client"` boundary for component consumers.
-- Add `jaml-ui/r3f` to `transpilePackages` when you use the R3F entry.
 - Import pure helpers from `jaml-ui/core` when you want server-safe metadata and asset utilities.
 - If you are consuming `jaml-ui` from a local workspace package in a Next.js app, you may need:
 
@@ -135,3 +141,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/AnalyzerExplorer.d.ts

@@ -0,0 +1,44 @@
+import { type AnalyzerShopItem } from "./GameCard.js";
+export interface AnalyzerBadge {
+    label: string;
+    tone?: "default" | "accent" | "muted";
+}
+export interface AnalyzerFact {
+    label: string;
+    value: string;
+}
+export interface AnalyzerItem extends AnalyzerShopItem {
+    desired?: boolean;
+    badges?: AnalyzerBadge[];
+    detail?: string;
+}
+export interface AnalyzerAnteView {
+    ante: number;
+    boss?: string;
+    voucher?: string;
+    smallBlindTag?: string;
+    bigBlindTag?: string;
+    packs?: string[];
+    shop?: AnalyzerItem[];
+    facts?: AnalyzerFact[];
+}
+export interface AnalyzerHighlight {
+    id: string;
+    ante: number;
+    title: string;
+    subtitle?: string;
+    desired?: boolean;
+    item?: AnalyzerItem;
+    boss?: string;
+    voucher?: string;
+    tag?: string;
+    badges?: AnalyzerBadge[];
+}
+export interface AnalyzerExplorerProps {
+    antes: AnalyzerAnteView[];
+    highlights?: AnalyzerHighlight[];
+    visibleAntes?: number;
+    totalAntes?: number;
+    className?: string;
+}
+export declare function AnalyzerExplorer({ antes, highlights, visibleAntes, totalAntes, className, }: AnalyzerExplorerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AnalyzerExplorer.js

@@ -0,0 +1,451 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher, resolveAnalyzerShopItem, } from "./GameCard.js";
+export function AnalyzerExplorer({ antes, highlights = [], visibleAntes, totalAntes, className = "", }) {
+    const [currentAnte, setCurrentAnte] = useState(antes[0]?.ante ?? 0);
+    const scrollRef = useRef(null);
+    const anteRefs = useRef(new Map());
+    const highlightRefs = useRef(new Map());
+    useEffect(() => {
+        setCurrentAnte(antes[0]?.ante ?? 0);
+    }, [antes]);
+    useEffect(() => {
+        const root = scrollRef.current;
+        if (!root) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            const mostVisibleEntry = entries
+                .filter((entry) => entry.isIntersecting)
+                .sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
+            if (!mostVisibleEntry) {
+                return;
+            }
+            const ante = Number(mostVisibleEntry.target.dataset.ante);
+            if (!Number.isNaN(ante)) {
+                setCurrentAnte(ante);
+            }
+        }, {
+            root,
+            threshold: [0.45, 0.72, 0.9],
+        });
+        for (const [, element] of anteRefs.current) {
+            observer.observe(element);
+        }
+        return () => observer.disconnect();
+    }, [antes]);
+    useEffect(() => {
+        const activeHighlight = highlights.find((highlight) => highlight.ante === currentAnte);
+        if (!activeHighlight) {
+            return;
+        }
+        const element = highlightRefs.current.get(activeHighlight.id);
+        element?.scrollIntoView({
+            behavior: "smooth",
+            inline: "center",
+            block: "nearest",
+        });
+    }, [currentAnte, highlights]);
+    const scrollToAnte = useCallback((ante) => {
+        anteRefs.current.get(ante)?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    }, []);
+    const currentAnteIndex = antes.findIndex((ante) => ante.ante === currentAnte);
+    const previousAnte = currentAnteIndex > 0 ? antes[currentAnteIndex - 1]?.ante ?? null : null;
+    const nextAnte = currentAnteIndex >= 0 && currentAnteIndex < antes.length - 1 ? antes[currentAnteIndex + 1]?.ante ?? null : null;
+    const shownAntes = visibleAntes ?? antes.length;
+    const availableAntes = totalAntes ?? shownAntes;
+    return (_jsxs("div", { className: className, style: styles.root, children: [highlights.length > 0 ? (_jsxs("section", { style: styles.highlightSection, children: [_jsxs("div", { style: styles.highlightHeader, children: [_jsx("span", { style: styles.highlightTitle, children: "Highlights" }), _jsx("span", { style: styles.highlightSubtitle, children: "Swipe, tap, jump" })] }), _jsx("div", { style: styles.highlightRail, children: highlights.map((highlight) => {
+                            const isActive = highlight.ante === currentAnte;
+                            return (_jsxs("button", { ref: (element) => {
+                                    if (element) {
+                                        highlightRefs.current.set(highlight.id, element);
+                                    }
+                                    else {
+                                        highlightRefs.current.delete(highlight.id);
+                                    }
+                                }, type: "button", onClick: () => scrollToAnte(highlight.ante), style: isActive ? styles.highlightCardActive : styles.highlightCard, children: [_jsx("div", { style: styles.highlightVisual, children: renderHighlightVisual(highlight) }), _jsxs("div", { style: styles.highlightMeta, children: [_jsxs("span", { style: styles.highlightAnte, children: ["Ante ", highlight.ante] }), _jsx("span", { style: styles.highlightLabel, children: highlight.title }), highlight.subtitle ? (_jsx("span", { style: styles.highlightDescription, children: highlight.subtitle })) : null, _jsx(BadgeRow, { badges: highlight.badges, desired: highlight.desired })] })] }, highlight.id));
+                        }) })] })) : null, _jsxs("div", { style: styles.navBar, children: [_jsx("button", { type: "button", onClick: () => previousAnte !== null && scrollToAnte(previousAnte), disabled: previousAnte === null, style: {
+                            ...styles.navButton,
+                            opacity: previousAnte !== null ? 1 : 0.25,
+                        }, children: "\u25B2" }), _jsxs("div", { style: styles.navLabel, children: ["Ante ", currentAnte, _jsxs("span", { style: styles.navSubLabel, children: ["of ", shownAntes, availableAntes > shownAntes ? ` / ${availableAntes}` : ""] })] }), _jsx("button", { type: "button", onClick: () => nextAnte !== null && scrollToAnte(nextAnte), disabled: nextAnte === null, style: {
+                            ...styles.navButton,
+                            opacity: nextAnte !== null ? 1 : 0.25,
+                        }, children: "\u25BC" })] }), _jsx("div", { ref: scrollRef, style: styles.scrollRegion, children: antes.map((ante) => (_jsx("div", { "data-ante": ante.ante, ref: (element) => {
+                        if (element) {
+                            anteRefs.current.set(ante.ante, element);
+                        }
+                        else {
+                            anteRefs.current.delete(ante.ante);
+                        }
+                    }, style: styles.antePage, children: _jsx(AnteSection, { ante: ante }) }, ante.ante))) })] }));
+}
+function AnteSection({ ante }) {
+    return (_jsxs("section", { style: styles.anteSection, children: [_jsxs("div", { style: styles.anteHeader, children: [_jsxs("span", { style: styles.anteHeading, children: ["Ante ", ante.ante] }), ante.boss ? (_jsxs("div", { style: styles.bossRow, children: [_jsx(JamlBoss, { bossName: ante.boss, scale: 0.62 }), _jsx("span", { style: styles.bossName, children: ante.boss })] })) : null] }), ante.smallBlindTag || ante.bigBlindTag ? (_jsxs(AnalyzerRow, { label: "Tags", children: [ante.smallBlindTag ? (_jsx(CompactCard, { label: "Small", visual: _jsx(JamlTag, { tagName: ante.smallBlindTag, scale: 0.58, hoverTilt: true }), text: ante.smallBlindTag })) : null, ante.bigBlindTag ? (_jsx(CompactCard, { label: "Big", visual: _jsx(JamlTag, { tagName: ante.bigBlindTag, scale: 0.58, hoverTilt: true }), text: ante.bigBlindTag })) : null] })) : null, ante.voucher ? (_jsx(AnalyzerRow, { label: "Voucher", children: _jsx(CompactCard, { visual: _jsx(JamlVoucher, { voucherName: ante.voucher, scale: 0.58, hoverTilt: true }), text: ante.voucher }) })) : null, ante.shop && ante.shop.length > 0 ? (_jsx(AnalyzerRow, { label: "Shop", dense: true, children: ante.shop.map((item) => (_jsx(ResolvedItemCard, { item: item }, `${ante.ante}-${item.id}-${item.name}`))) })) : null, ante.packs && ante.packs.length > 0 ? (_jsx(AnalyzerRow, { label: "Packs", children: ante.packs.map((pack) => (_jsx("div", { style: styles.packChip, children: pack }, `${ante.ante}-${pack}`))) })) : null, ante.facts && ante.facts.length > 0 ? (_jsx(AnalyzerRow, { label: "Facts", children: ante.facts.map((fact) => (_jsxs("div", { style: styles.factCard, children: [_jsx("span", { style: styles.factLabel, children: fact.label }), _jsx("span", { style: styles.factValue, children: fact.value })] }, `${ante.ante}-${fact.label}-${fact.value}`))) })) : null] }));
+}
+function AnalyzerRow({ label, children, dense = false, }) {
+    return (_jsxs("div", { style: styles.row, children: [_jsx("div", { style: styles.rowLabel, children: label }), _jsx("div", { style: dense ? styles.denseGrid : styles.cardFlow, children: children })] }));
+}
+function CompactCard({ label, visual, text, }) {
+    return (_jsxs("div", { style: styles.compactCard, children: [label ? _jsx("span", { style: styles.compactLabel, children: label }) : null, visual, _jsx("span", { style: styles.itemText, children: text })] }));
+}
+function ResolvedItemCard({ item }) {
+    const resolved = resolveAnalyzerShopItem(item, 0.58);
+    const wrapperStyle = item.desired ? styles.itemCardDesired : styles.itemCard;
+    if (resolved.kind === "joker" || resolved.kind === "consumable" || resolved.kind === "playing") {
+        return (_jsxs("div", { style: wrapperStyle, children: [_jsx(JamlGameCard, { card: resolved.card, type: resolved.type, hoverTilt: true }), _jsx("span", { style: styles.itemText, children: item.name }), _jsx(BadgeRow, { badges: item.badges, desired: item.desired }), item.detail ? _jsx("span", { style: styles.itemDetail, children: item.detail }) : null] }));
+    }
+    if (resolved.kind === "voucher") {
+        return (_jsxs("div", { style: wrapperStyle, children: [_jsx(JamlVoucher, { voucherName: resolved.voucherName, scale: 0.58, hoverTilt: true }), _jsx("span", { style: styles.itemText, children: item.name }), _jsx(BadgeRow, { badges: item.badges, desired: item.desired }), item.detail ? _jsx("span", { style: styles.itemDetail, children: item.detail }) : null] }));
+    }
+    return (_jsxs("div", { style: wrapperStyle, children: [_jsx("div", { style: styles.packChip, children: item.name }), _jsx(BadgeRow, { badges: item.badges, desired: item.desired }), item.detail ? _jsx("span", { style: styles.itemDetail, children: item.detail }) : null] }));
+}
+function BadgeRow({ badges, desired = false }) {
+    const combinedBadges = desired
+        ? [{ label: "desired", tone: "accent" }, ...(badges ?? [])]
+        : (badges ?? []);
+    if (combinedBadges.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { style: styles.badgeRow, children: combinedBadges.map((badge) => {
+            const badgeStyle = badge.tone === "accent"
+                ? styles.badgeAccent
+                : badge.tone === "muted"
+                    ? styles.badgeMuted
+                    : styles.badge;
+            return (_jsx("span", { style: badgeStyle, children: badge.label }, `${badge.label}-${badge.tone ?? "default"}`));
+        }) }));
+}
+function renderHighlightVisual(highlight) {
+    if (highlight.item) {
+        return _jsx(ResolvedItemCard, { item: highlight.item });
+    }
+    if (highlight.boss) {
+        return _jsx(JamlBoss, { bossName: highlight.boss, scale: 0.92, hoverTilt: true });
+    }
+    if (highlight.voucher) {
+        return _jsx(JamlVoucher, { voucherName: highlight.voucher, scale: 0.92, hoverTilt: true });
+    }
+    if (highlight.tag) {
+        return _jsx(JamlTag, { tagName: highlight.tag, scale: 0.92, hoverTilt: true });
+    }
+    return _jsx("div", { style: styles.packChip, children: highlight.title });
+}
+const styles = {
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+    },
+    highlightSection: {
+        padding: "10px 16px 8px",
+        borderBottom: "1px solid #1a1a34",
+        background: "#0f0f22",
+    },
+    highlightHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        marginBottom: 8,
+    },
+    highlightTitle: {
+        fontSize: 11,
+        color: "#6f6fa1",
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+    },
+    highlightSubtitle: {
+        fontSize: 11,
+        color: "#6f6fa1",
+    },
+    highlightRail: {
+        display: "flex",
+        gap: 10,
+        overflowX: "auto",
+        paddingBottom: 4,
+        scrollSnapType: "x mandatory",
+    },
+    highlightCard: {
+        minWidth: 150,
+        maxWidth: 150,
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        padding: 8,
+        borderRadius: 12,
+        border: "1px solid #2a2a55",
+        background: "#131326",
+        scrollSnapAlign: "center",
+        cursor: "pointer",
+    },
+    highlightCardActive: {
+        minWidth: 150,
+        maxWidth: 150,
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        padding: 8,
+        borderRadius: 12,
+        border: "1px solid rgba(245,200,66,0.45)",
+        background: "rgba(245,200,66,0.08)",
+        scrollSnapAlign: "center",
+        cursor: "pointer",
+    },
+    highlightVisual: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        minHeight: 88,
+    },
+    highlightMeta: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        alignItems: "flex-start",
+    },
+    highlightAnte: {
+        fontSize: 10,
+        color: "#a855f7",
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+    },
+    highlightLabel: {
+        fontSize: 12,
+        color: "#ececff",
+        fontWeight: 700,
+        lineHeight: 1.2,
+        textAlign: "left",
+    },
+    highlightDescription: {
+        fontSize: 11,
+        color: "#8e8eb6",
+        lineHeight: 1.2,
+        textAlign: "left",
+    },
+    navBar: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        padding: "8px 16px",
+        background: "#0f0f22",
+        borderBottom: "1px solid #1a1a34",
+    },
+    navButton: {
+        background: "none",
+        border: "1px solid #2a2a55",
+        borderRadius: 6,
+        color: "#9898c0",
+        fontSize: 14,
+        padding: "4px 10px",
+        cursor: "pointer",
+    },
+    navLabel: {
+        fontSize: 12,
+        fontWeight: 700,
+        color: "#a855f7",
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        minWidth: 130,
+        textAlign: "center",
+    },
+    navSubLabel: {
+        color: "#5a5a88",
+        fontWeight: 500,
+        textTransform: "none",
+        letterSpacing: "normal",
+        fontSize: 11,
+        marginLeft: 4,
+    },
+    scrollRegion: {
+        flex: 1,
+        overflowY: "auto",
+        overflowX: "hidden",
+        scrollSnapType: "y mandatory",
+        scrollBehavior: "smooth",
+    },
+    antePage: {
+        scrollSnapAlign: "start",
+        scrollSnapStop: "always",
+        minHeight: "100%",
+        boxSizing: "border-box",
+        paddingBottom: 16,
+        borderBottom: "1px solid #1a1a34",
+    },
+    anteSection: {
+        paddingBottom: 8,
+    },
+    anteHeader: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "8px 16px",
+    },
+    anteHeading: {
+        fontSize: 12,
+        fontWeight: 700,
+        color: "#a855f7",
+        textTransform: "uppercase",
+        letterSpacing: "0.1em",
+    },
+    bossRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+    },
+    bossName: {
+        fontSize: 13,
+        color: "#e84040",
+        fontWeight: 600,
+    },
+    row: {
+        padding: "4px 16px 8px",
+    },
+    rowLabel: {
+        fontSize: 10,
+        color: "#5a5a88",
+        textTransform: "uppercase",
+        letterSpacing: "0.07em",
+        marginBottom: 6,
+    },
+    cardFlow: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        alignItems: "flex-start",
+    },
+    denseGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(82px, 1fr))",
+        gap: 8,
+        alignItems: "start",
+    },
+    compactCard: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        minWidth: 62,
+    },
+    compactLabel: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "#18182e",
+        color: "#7f7fa7",
+        border: "1px solid #2a2a55",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    itemCard: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        width: "100%",
+        minWidth: 0,
+    },
+    itemCardDesired: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        width: "100%",
+        minWidth: 0,
+        padding: "4px 4px 6px",
+        borderRadius: 10,
+        border: "1px solid rgba(245,200,66,0.4)",
+        background: "rgba(245,200,66,0.08)",
+    },
+    itemText: {
+        fontSize: 10,
+        color: "#8e8eb6",
+        textAlign: "center",
+        lineHeight: 1.2,
+        maxWidth: 84,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    itemDetail: {
+        fontSize: 10,
+        color: "#d8d8ea",
+        textAlign: "center",
+        lineHeight: 1.2,
+    },
+    badgeRow: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 4,
+        justifyContent: "center",
+    },
+    badge: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "#202043",
+        color: "#c7c7ef",
+        border: "1px solid #35356d",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    badgeAccent: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "rgba(245,200,66,0.2)",
+        color: "#f5c842",
+        border: "1px solid rgba(245,200,66,0.35)",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    badgeMuted: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "#18182e",
+        color: "#7f7fa7",
+        border: "1px solid #2a2a55",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    packChip: {
+        fontSize: 12,
+        color: "#5a5a88",
+        background: "#131326",
+        border: "1px solid #2a2a55",
+        borderRadius: 6,
+        padding: "4px 8px",
+    },
+    factCard: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        minWidth: 110,
+        padding: "8px 10px",
+        borderRadius: 10,
+        background: "#131326",
+        border: "1px solid #2a2a55",
+    },
+    factLabel: {
+        fontSize: 10,
+        color: "#7f7fa7",
+        textTransform: "uppercase",
+        letterSpacing: "0.07em",
+    },
+    factValue: {
+        fontSize: 12,
+        color: "#ececff",
+        fontWeight: 700,
+    },
+};

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;