jaml-ui 0.21.2 → 0.21.4

package/dist/ui/showcase.js

@@ -1,27 +1,19 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from './tokens.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { JimboButton } from './panel.js';
 import { JimboSprite } from './sprites.js';
-const TONE_COLOR = {
-    blue: JimboColorOption.BLUE,
-    red: JimboColorOption.RED,
-    gold: JimboColorOption.GOLD,
-    green: JimboColorOption.GREEN,
-};
-const DEFAULT_STATS = { searched: '0', matches: '0', speed: '0' };
+import { JimboText } from './jimboText.js';
+import { JimboApp, JimboAppFooter } from './jimboApp.js';
+import { JimboSectionHeader } from './jimboSectionHeader.js';
+import { JimboInfoCard, JimboInfoCardBody, JimboInfoCardTitle, JimboInfoCardSub, JimboInfoCardAside } from './jimboInfoCard.js';
 /**
- * Landing/showcase screen for the seed curator.
- * All styling via jimbo.css `.j-showcase` classes — zero inline styles.
+ * Landing/showcase screen — 375×667, NO SCROLL.
+ * Every pixel accounted for. No flex stretching. No gaps.
  */
-export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_STATS, onNewSearch, onBrowseFilters, onBack, }) {
-    const C = JimboColorOption;
-    return (_jsxs("div", { className: "j-showcase", children: [_jsxs("div", { className: "j-showcase__scroll", children: [_jsxs("div", { className: "j-showcase__wordmark", children: [_jsx("div", { className: "j-showcase__wordmark-title", children: "Balatro" }), _jsx("div", { className: "j-showcase__wordmark-sub", children: "Seed \u00B7 Curator" })] }), _jsx("div", { className: "j-showcase__stats", children: [
-                            [stats.searched, 'searched'],
-                            [stats.matches, 'matches'],
-                            [stats.speed, 'speed'],
-                        ].map(([n, l]) => (_jsxs("div", { children: [_jsx("div", { className: "j-showcase__stat-value", children: n }), _jsx("div", { className: "j-showcase__stat-label", children: l })] }, l))) }), _jsxs("div", { className: "j-showcase__section-header", children: [_jsx("div", { className: "j-showcase__section-tag", style: { background: C.BLUE }, children: "Hot Filters" }), _jsx("div", { className: "j-showcase__section-rule", style: { background: `${C.BLUE}55` } })] }), _jsx("div", { className: "j-showcase__filter-list", children: hotFilters.map((f, i) => {
-                            const tColor = TONE_COLOR[f.tone];
-                            return (_jsxs("div", { className: "j-showcase__filter-card", style: { border: `2px solid ${tColor}` }, children: [_jsx("div", { className: "j-showcase__filter-sprites", children: f.sample.map((name, j) => (_jsx("div", { className: "j-showcase__filter-sprite", children: _jsx(JimboSprite, { name: name, width: 28 }) }, j))) }), _jsxs("div", { className: "j-showcase__filter-info", children: [_jsx("div", { className: "j-showcase__filter-name", children: f.name }), _jsxs("div", { className: "j-showcase__filter-author", children: ["by ", f.author] })] }), _jsxs("div", { className: "j-showcase__filter-hits", children: [_jsx("div", { className: "j-showcase__filter-hits-value", style: { color: tColor }, children: f.hits }), _jsx("div", { className: "j-showcase__filter-hits-label", children: "seeds" })] })] }, i));
-                        }) }), _jsxs("div", { className: "j-showcase__section-header", children: [_jsx("div", { className: "j-showcase__section-tag", style: { background: C.GREEN }, children: "Recent Finds" }), _jsx("div", { className: "j-showcase__section-rule", style: { background: `${C.GREEN}55` } })] }), _jsx("div", { className: "j-showcase__recent", children: recentFinds.length === 0 ? (_jsx("div", { children: "No recent finds yet." })) : recentFinds.map((r, i) => (_jsxs("div", { children: [_jsx("span", { style: { color: C.GOLD_TEXT }, children: r.seed }), ' · ', r.filterName, r.score > 0 && _jsxs("span", { style: { color: C.GREEN_TEXT }, children: [" +", r.score] })] }, i))) }), _jsx("div", { style: { height: 16 } })] }), _jsxs("div", { className: "j-showcase__actions", children: [_jsx(JimboButton, { tone: "green", fullWidth: true, size: "md", onClick: onNewSearch, children: "New Search" }), _jsx(JimboButton, { tone: "blue", fullWidth: true, size: "md", onClick: onBrowseFilters, children: "Browse Filters" }), _jsx(JimboButton, { tone: "orange", fullWidth: true, size: "md", onClick: onBack, children: "Back" })] })] }));
+export function Showcase({ title = 'Balatro', subtitle = 'Seed Curator', hotFilters = [], recentFinds = [], mcpInfo, onNewSearch, onBrowseFilters, onFilterClick, }) {
+    return (_jsxs(JimboApp, { children: [_jsxs("div", { style: { padding: '12px 12px 8px', display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("div", { className: "j-text-center", children: [_jsx(JimboText, { size: "lg", tone: "gold", children: title }), _jsx(JimboText, { size: "micro", tone: "grey", style: { letterSpacing: 3 }, children: subtitle })] }), mcpInfo && (_jsxs("div", { className: "j-flex j-justify-between", style: {
+                            padding: '3px 8px',
+                            background: 'var(--j-dark-grey)', borderRadius: 4,
+                            border: '1px solid var(--j-panel-edge)',
+                        }, children: [_jsx(JimboText, { size: "micro", tone: "purple", children: mcpInfo.engine }), _jsx(JimboText, { size: "micro", tone: "grey", children: mcpInfo.features })] })), hotFilters.length > 0 && (_jsxs(_Fragment, { children: [_jsx(JimboSectionHeader, { label: "Filters", tone: "blue" }), _jsx("div", { className: "j-flex-col", style: { gap: 4 }, children: hotFilters.slice(0, 4).map((f, i) => (_jsxs(JimboInfoCard, { tone: f.tone, onClick: () => onFilterClick?.(f, i), style: { cursor: onFilterClick ? 'pointer' : undefined }, children: [_jsx("div", { className: "j-flex j-gap-xs", children: f.sample.slice(0, 2).map((name, j) => (_jsx("div", { style: { width: 22, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(JimboSprite, { name: name, width: 20 }) }, j))) }), _jsxs(JimboInfoCardBody, { children: [_jsx(JimboInfoCardTitle, { children: f.name }), _jsxs(JimboInfoCardSub, { children: ["by ", f.author] })] }), _jsx(JimboInfoCardAside, { children: _jsx(JimboText, { size: "xs", tone: f.tone === 'gold' ? 'gold' : f.tone, children: f.hits }) })] }, i))) })] })), recentFinds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(JimboSectionHeader, { label: "Recent", tone: "green" }), _jsx("div", { style: { lineHeight: 1.5 }, children: recentFinds.slice(0, 3).map((r, i) => (_jsxs("div", { className: "j-flex j-gap-sm", children: [_jsx(JimboText, { size: "micro", tone: "gold", children: r.seed }), _jsx(JimboText, { size: "micro", tone: "grey", children: r.filterName }), r.score > 0 && _jsxs(JimboText, { size: "micro", tone: "green", children: ["+", r.score] })] }, i))) })] }))] }), _jsxs(JimboAppFooter, { children: [_jsx(JimboButton, { tone: "green", fullWidth: true, size: "lg", onClick: onNewSearch, children: "New Search" }), _jsx(JimboButton, { tone: "blue", fullWidth: true, size: "lg", onClick: onBrowseFilters, children: "Browse Filters" })] })] }));
 }

package/dist/ui/tokens.d.ts

@@ -1,6 +1,10 @@
 /**
  * Balatro design tokens — colors eyedropped from actual game pixels.
  * Do NOT replace with Lua HEX values; the game's shader pipeline transforms them.
+ *
+ * IMPORTANT: For DOM components, use CSS custom properties (--j-red, etc.)
+ * from jimbo.css. Only use these JS constants for contexts that cannot use
+ * CSS — such as R3F/Canvas, inline SVG fills, or imperative animation APIs.
  */
 export declare const JimboColorOption: {
     readonly RED: "#ff4c40";
@@ -34,20 +38,8 @@ export declare const JimboColorOption: {
     readonly PLANET_BUTTON_DARK: "#00657c";
     readonly SPECTRAL_BUTTON_DARK: "#14449e";
 };
-export declare const JAML_COLORS: {
-    readonly RED: "#ff4c40";
-    readonly BLUE: "#0093ff";
-    readonly GREEN: "#429f79";
-    readonly ORANGE: "#ff9800";
-    readonly PURPLE: "#9e74ce";
-    readonly WHITE: "#ffffff";
-    readonly DARK_RED: "#a02721";
-    readonly DARK_BLUE: "#0057a1";
-    readonly DARK_ORANGE: "#a05b00";
-    readonly DARK_GREEN: "#215f46";
-    readonly DARK_PURPLE: "#5e437e";
-};
 export type JimboPaletteColor = keyof typeof JimboColorOption;
+/** Convert hex to rgba for inline styles in Canvas/SVG/R3F contexts. */
 export declare function withAlpha(hex: string, alpha: number): string;
 export declare const JIMBO_ANIMATIONS: {
     readonly JUICE_UP_SCALE: 1.05;
@@ -65,9 +57,3 @@ export declare const JIMBO_ANIMATIONS: {
     readonly LETTER_POP_RATE: 3;
     readonly LETTER_BUMP_RATE: 2.666;
 };
-export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'action' | 'back' | 'ghost';
-export declare const BUTTON_COLORS: Record<ButtonVariant, {
-    bg: string;
-    hover: string;
-    text: string;
-}>;

package/dist/ui/tokens.js

@@ -1,6 +1,10 @@
 /**
  * Balatro design tokens — colors eyedropped from actual game pixels.
  * Do NOT replace with Lua HEX values; the game's shader pipeline transforms them.
+ *
+ * IMPORTANT: For DOM components, use CSS custom properties (--j-red, etc.)
+ * from jimbo.css. Only use these JS constants for contexts that cannot use
+ * CSS — such as R3F/Canvas, inline SVG fills, or imperative animation APIs.
  */
 export const JimboColorOption = {
     RED: '#ff4c40',
@@ -34,19 +38,7 @@ export const JimboColorOption = {
     PLANET_BUTTON_DARK: '#00657c',
     SPECTRAL_BUTTON_DARK: '#14449e',
 };
-export const JAML_COLORS = {
-    RED: JimboColorOption.RED,
-    BLUE: JimboColorOption.BLUE,
-    GREEN: JimboColorOption.GREEN,
-    ORANGE: JimboColorOption.ORANGE,
-    PURPLE: JimboColorOption.PURPLE,
-    WHITE: JimboColorOption.WHITE,
-    DARK_RED: JimboColorOption.DARK_RED,
-    DARK_BLUE: JimboColorOption.DARK_BLUE,
-    DARK_ORANGE: JimboColorOption.DARK_ORANGE,
-    DARK_GREEN: JimboColorOption.DARK_GREEN,
-    DARK_PURPLE: JimboColorOption.DARK_PURPLE,
-};
+/** Convert hex to rgba for inline styles in Canvas/SVG/R3F contexts. */
 export function withAlpha(hex, alpha) {
     const clean = hex.replace('#', '');
     const r = parseInt(clean.slice(0, 2), 16);
@@ -70,11 +62,3 @@ export const JIMBO_ANIMATIONS = {
     LETTER_POP_RATE: 3,
     LETTER_BUMP_RATE: 2.666,
 };
-export const BUTTON_COLORS = {
-    primary: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
-    secondary: { bg: JimboColorOption.BLUE, hover: JimboColorOption.DARK_BLUE, text: JimboColorOption.WHITE },
-    danger: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
-    action: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
-    back: { bg: JimboColorOption.ORANGE, hover: JimboColorOption.DARK_ORANGE, text: JimboColorOption.WHITE },
-    ghost: { bg: 'transparent', hover: 'rgba(255,255,255,0.1)', text: JimboColorOption.WHITE },
-};

package/dist/ui.d.ts

@@ -15,3 +15,17 @@ export * from './ui/footer.js';
 export * from './ui/sprites.js';
 export * from './ui/showcase.js';
 export * from './ui/jimboCopyRow.js';
+export * from './ui/jimboApp.js';
+export * from './ui/jimboWordmark.js';
+export * from './ui/jimboStatGrid.js';
+export * from './ui/jimboSectionHeader.js';
+export * from './ui/jimboInfoCard.js';
+export * from './ui/jimboInset.js';
+export * from './ui/ide/JamlBuilder.js';
+export * from './ui/ide/JamlEditor.js';
+export * from './ui/ide/WasmStatus.js';
+export * from './ui/ide/AgnosticSeedCard.js';
+export * from './ui/JimboIconButton.js';
+export * from './ui/JimboInputModal.js';
+export * from './ui/JimboSelect.js';
+export * from './ui/PanelSplitter.js';

package/dist/ui.js

@@ -16,3 +16,18 @@ export * from './ui/footer.js';
 export * from './ui/sprites.js';
 export * from './ui/showcase.js';
 export * from './ui/jimboCopyRow.js';
+// Primitives
+export * from './ui/jimboApp.js';
+export * from './ui/jimboWordmark.js';
+export * from './ui/jimboStatGrid.js';
+export * from './ui/jimboSectionHeader.js';
+export * from './ui/jimboInfoCard.js';
+export * from './ui/jimboInset.js';
+export * from './ui/ide/JamlBuilder.js';
+export * from './ui/ide/JamlEditor.js';
+export * from './ui/ide/WasmStatus.js';
+export * from './ui/ide/AgnosticSeedCard.js';
+export * from './ui/JimboIconButton.js';
+export * from './ui/JimboInputModal.js';
+export * from './ui/JimboSelect.js';
+export * from './ui/PanelSplitter.js';

package/package.json

@@ -1,146 +1,145 @@
-{
-  "name": "jaml-ui",
-  "version": "0.21.2",
-  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./core": {
-      "types": "./dist/core.d.ts",
-      "import": "./dist/core.js"
-    },
-    "./motely": {
-      "types": "./dist/motely.d.ts",
-      "import": "./dist/motely.js"
-    },
-    "./ui": {
-      "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.js"
-    },
-    "./r3f": {
-      "types": "./dist/r3f.d.ts",
-      "import": "./dist/r3f.js"
-    },
-    "./fonts.css": "./fonts.css",
-    "./jaml.schema.json": "./jaml.schema.json",
-    "./package.json": "./package.json"
-  },
-  "sideEffects": [
-    "./fonts.css"
-  ],
-  "files": [
-    "dist",
-    "assets/*.png",
-    "assets/fonts",
-    "fonts.css",
-    "dist/ui/jimbo.css",
-    "jaml.schema.json",
-    "README.md",
-    "DESIGN.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');fs.copyFileSync('node_modules/motely-wasm/jaml.schema.json','jaml.schema.json');\"",
-    "dev": "tsc --watch",
-    "demo": "vite --config demo/vite.config.ts",
-    "typecheck": "tsc --noEmit --pretty false",
-    "prepack": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OptimusPi/jaml-ui"
-  },
-  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
-  "bugs": {
-    "url": "https://github.com/OptimusPi/jaml-ui/issues"
-  },
-  "keywords": [
-    "balatro",
-    "jaml",
-    "motely",
-    "seed",
-    "card",
-    "sprite",
-    "ui"
-  ],
-  "author": "pifreak",
-  "license": "MIT",
-  "peerDependencies": {
-    "@monaco-editor/react": ">=4.0.0",
-    "@react-spring/three": ">=9.0.0",
-    "@react-three/drei": ">=9.0.0",
-    "@react-three/fiber": ">=8.0.0",
-    "monaco-editor": ">=0.50.0",
-    "motely-wasm": "^14.3.3",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "react-icons": ">=5.0.0",
-    "three": ">=0.150.0"
-  },
-  "peerDependenciesMeta": {
-    "@react-spring/three": {
-      "optional": true
-    },
-    "@react-three/fiber": {
-      "optional": true
-    },
-    "motely-wasm": {
-      "optional": true
-    },
-    "react-icons": {
-      "optional": true
-    },
-    "three": {
-      "optional": true
-    },
-    "@react-three/drei": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@google/design.md": "^0.1.1",
-    "@monaco-editor/react": "^4.7.0",
-    "@react-spring/three": "^10.0.3",
-    "@react-three/fiber": "^9.6.0",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.184.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "monaco-editor": "^0.55.1",
-    "motely-wasm": "^14.3.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-icons": "^5.6.0",
-    "three": "^0.184.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.9",
-    "storybook": "^10.3.6",
-    "@storybook/react-vite": "^10.3.6",
-    "@chromatic-com/storybook": "^5.1.2",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-onboarding": "^10.3.6",
-    "vitest": "^4.1.5",
-    "playwright": "^1.59.1",
-    "@vitest/browser-playwright": "^4.1.5",
-    "@vitest/coverage-v8": "^4.1.5"
-  },
-  "dependencies": {
-    "@react-three/drei": ">=9.0.0"
-  }
-}
+{
+  "name": "jaml-ui",
+  "version": "0.21.4",
+  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./motely": {
+      "import": "./dist/motely.js",
+      "require": "./dist/motely.js",
+      "types": "./dist/motely.d.ts",
+      "default": "./dist/motely.js"
+    },
+    "./fonts.css": "./fonts.css",
+    "./jaml.schema.json": "./jaml.schema.json"
+  },
+  "sideEffects": [
+    "./fonts.css"
+  ],
+  "files": [
+    "dist",
+    "assets/*.png",
+    "assets/fonts",
+    "fonts.css",
+    "dist/ui/jimbo.css",
+    "jaml.schema.json",
+    "README.md",
+    "DESIGN.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');fs.copyFileSync('node_modules/motely-wasm/jaml.schema.json','jaml.schema.json');\"",
+    "dev": "tsc --watch",
+    "demo": "vite --config demo/vite.config.ts",
+    "typecheck": "tsc --noEmit --pretty false",
+    "prepack": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint ."
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OptimusPi/jaml-ui"
+  },
+  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
+  "bugs": {
+    "url": "https://github.com/OptimusPi/jaml-ui/issues"
+  },
+  "keywords": [
+    "balatro",
+    "jaml",
+    "motely",
+    "seed",
+    "card",
+    "sprite",
+    "ui"
+  ],
+  "author": "pifreak",
+  "license": "MIT",
+  "peerDependencies": {
+    "@monaco-editor/react": ">=4.0.0",
+    "@react-spring/three": ">=9.0.0",
+    "@react-three/drei": ">=9.0.0",
+    "@react-three/fiber": ">=8.0.0",
+    "monaco-editor": ">=0.50.0",
+    "motely-wasm": "^14.3.3",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-icons": ">=5.0.0",
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-spring/three": {
+      "optional": true
+    },
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "motely-wasm": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "@react-three/drei": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.2",
+    "@google/design.md": "^0.1.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.6.0",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-onboarding": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.184.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "monaco-editor": "^0.55.1",
+    "motely-wasm": "^14.3.3",
+    "playwright": "^1.59.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
+    "storybook": "^10.3.6",
+    "three": "^0.184.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.9",
+    "vitest": "^4.1.5"
+  },
+  "dependencies": {
+    "@json-render/core": "^0.18.0",
+    "@react-three/drei": ">=9.0.0",
+    "@types/js-yaml": "^4.0.9",
+    "clsx": "^2.1.1",
+    "js-yaml": "^4.1.1",
+    "lucide-react": "^1.14.0",
+    "tailwind-merge": "^2.6.1",
+    "zustand": "^5.0.0"
+  }
+}