jaml-ui 0.16.0 → 0.17.1

package/dist/ui/JimboBadge.js

@@ -1,24 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { JimboColorOption as C } from './tokens.js';
-export function JimboBadge({ size = 'sm', tone = 'dark', children }) {
-    const bgColors = {
-        dark: C.DARKEST,
-        blue: C.BLUE,
-        red: C.RED,
-        green: C.GREEN,
-        gold: C.GOLD,
-        grey: C.GREY
-    };
-    return (_jsx("span", { style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            padding: size === 'sm' ? '2px 6px' : '4px 8px',
-            fontSize: size === 'sm' ? 10 : 12,
-            background: bgColors[tone],
-            color: tone === 'dark' || tone === 'grey' ? C.WHITE : C.DARKEST,
-            border: `1px solid ${tone === 'dark' ? C.PANEL_EDGE : C.BLACK}`,
-            borderRadius: 4,
-            fontFamily: 'var(--font-sans, m6x11plus), monospace',
-            whiteSpace: 'nowrap'
-        }, children: children }));
+/**
+ * Small colored label pill. Matches Balatro's in-game tag/rarity badges.
+ * All styling via jimbo.css `.j-badge` classes.
+ */
+export function JimboBadge({ size = 'sm', tone = 'dark', className, children }) {
+    return (_jsx("span", { className: `j-badge j-badge--${size} j-badge--${tone} ${className ?? ''}`, children: children }));
 }

package/dist/ui/JimboToggleList.js

@@ -1,10 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboPanel, JimboButton } from './panel.js';
+import { JimboPanel } from './panel.js';
 export function JimboToggleList({ items, onToggle, title }) {
-    return (_jsx(JimboPanel, { children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [title && _jsx("div", { style: { fontSize: 12, color: 'var(--c-grey)', marginBottom: 4 }, children: title }), items.map(item => (_jsxs(JimboButton, { tone: "grey", size: "sm", onClick: () => onToggle(item.id), style: { justifyContent: 'flex-start', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("div", { style: {
-                                width: 10, height: 10, flexShrink: 0,
-                                background: item.on ? 'var(--c-orange)' : 'var(--c-darkest)',
-                                border: '1px solid var(--c-dark-grey)',
-                                boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.5)'
-                            } }), item.label] }, item.id)))] }) }));
+    return (_jsx(JimboPanel, { children: _jsxs("div", { className: "j-toggle-list", children: [title && _jsx("div", { className: "j-toggle-list__title", children: title }), items.map(item => (_jsxs("button", { type: "button", className: "j-toggle-item", onClick: () => onToggle(item.id), children: [_jsx("div", { className: "j-toggle-check", "data-on": item.on }), item.label] }, item.id)))] }) }));
 }

package/dist/ui/codeBlock.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { JimboColorOption } from './tokens.js';
 export function JimboCodeBlock({ code, language, filename, className = '' }) {
     const [copied, setCopied] = useState(false);
     const copy = () => {
@@ -9,7 +8,7 @@ export function JimboCodeBlock({ code, language, filename, className = '' }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    return (_jsxs("div", { className: 'rounded-xl overflow-hidden flex flex-col border-2 ' + className, style: { backgroundColor: JimboColorOption.DARKEST, borderColor: JimboColorOption.PANEL_EDGE, boxShadow: '0 3px 0 0 rgba(0,0,0,0.5)' }, children: [_jsxs("div", { style: { padding: '0.5rem 1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${JimboColorOption.INNER_BORDER}` }, children: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [filename && _jsx("span", { style: { fontSize: 10, opacity: 0.6 }, children: filename }), language && _jsx("span", { style: { fontSize: 9, padding: '1px 6px', borderRadius: 3, background: 'rgba(0,0,0,0.4)', color: '#60a5fa' }, children: language })] }), _jsx("button", { onClick: copy, title: "Copy", style: { padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: copied ? '#4ade80' : 'rgba(255,255,255,0.5)', display: 'flex' }, children: copied
+    return (_jsxs("div", { className: `j-code-block ${className}`, children: [_jsxs("div", { className: "j-code-block__header", children: [_jsxs("div", { className: "j-code-block__meta", children: [filename && _jsx("span", { className: "j-code-block__filename", children: filename }), language && _jsx("span", { className: "j-code-block__lang", children: language })] }), _jsx("button", { onClick: copy, title: "Copy", className: "j-code-block__copy", "data-copied": copied, children: copied
                             ? _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })
-                            : _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }) })] }), _jsx("pre", { style: { padding: '1rem', overflowX: 'auto', fontFamily: 'monospace', fontSize: '0.875rem', lineHeight: 1.6, color: '#f6f0d5', margin: 0 }, children: _jsx("code", { children: code }) })] }));
+                            : _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }) })] }), _jsx("pre", { className: "j-code-block__pre", children: _jsx("code", { children: code }) })] }));
 }

package/dist/ui/footer.d.ts

@@ -2,4 +2,8 @@ export interface JimboBalatroFooterProps {
     hidden?: boolean;
     className?: string;
 }
+/**
+ * Attribution footer with animated suit cycle.
+ * All styling via jimbo.css `.j-footer` classes — zero inline styles.
+ */
 export declare function JimboBalatroFooter({ hidden, className }: JimboBalatroFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/footer.js

@@ -1,15 +1,17 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from './tokens.js';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const SUITS = [
     { char: '♥️', kf: 'jaml-heart' },
     { char: '♠️', kf: 'jaml-spade' },
     { char: '♦️', kf: 'jaml-diamond' },
     { char: '♣️', kf: 'jaml-club' },
 ];
-const CYCLE = '5s';
+/**
+ * Attribution footer with animated suit cycle.
+ * All styling via jimbo.css `.j-footer` classes — zero inline styles.
+ */
 export function JimboBalatroFooter({ hidden = false, className = '' }) {
-    return (_jsxs("div", { className: ['w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
+    return (_jsxs("div", { className: `j-footer ${hidden ? 'j-footer--hidden' : ''} ${className}`, children: [_jsx("div", { className: "j-footer__bar", children: _jsxs("p", { className: "j-footer__text", children: [_jsxs("span", { children: ["Not affiliated with LocalThunk or PlayStack \u2022", ' '] }), _jsx("a", { href: "https://store.steampowered.com/app/2379780/Balatro/", target: "_blank", rel: "noopener noreferrer", className: "j-footer__link", children: "BUY BALATRO" }), _jsxs("span", { children: [' ', "\u2022 Created with", ' '] }), _jsxs("span", { className: "j-footer__suits", children: [_jsx("span", { className: "j-footer__suit-stage", children: SUITS.map(({ char, kf }) => (_jsx("span", { className: "j-footer__suit-char", style: { animationName: kf }, children: char }, char))) }), ' ', "for the Balatro community"] })] }) }), _jsx("style", { children: `
         @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
         @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
         @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }

package/dist/ui/hooks.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { JamlVisualClause, JamlVisualFilter, JamlZone } from '../components/JamlIdeVisual.js';
+import { Layer } from '../render/Layer.js';
+/**
+ * Sway animation for Balatro-style UI elements.
+ */
+export declare function useSway(active: boolean): React.RefObject<HTMLDivElement | null>;
+/**
+ * Handles delayed visibility for transitions (e.g. modals).
+ */
+export declare function useDelayedVisibility(open: boolean, delay: number): {
+    visible: boolean;
+    opacity: number;
+};
+/**
+ * Hook for the Balatro hypnotic swirl background.
+ * Manages WebGL context, shader compilation, and animation loop.
+ */
+export declare function useBalatroBackground(): React.RefObject<HTMLCanvasElement | null>;
+export type JimboTooltipMode = 'snap' | 'mouse';
+export type JimboTooltipPlacement = 'top' | 'bottom' | 'auto';
+/**
+ * Hook for managing JimboTooltip state and positioning.
+ */
+export declare function useJimboTooltip({ mode, placement, delay, disabled, }: {
+    mode?: JimboTooltipMode;
+    placement?: JimboTooltipPlacement;
+    delay?: number;
+    disabled?: boolean;
+}): {
+    visible: boolean;
+    pos: {
+        left: number;
+        top: number;
+        align: "top" | "bottom";
+    } | null;
+    targetRef: React.RefObject<HTMLElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    show: () => void;
+    hide: () => void;
+    handleMouseMove: (e: React.MouseEvent | React.PointerEvent) => void;
+};
+/**
+ * Hook for managing the JamlCardRenderer logic.
+ */
+export declare function useJamlCardRenderer({ layers, invert, hoverTilt, }: {
+    layers: Layer[];
+    invert?: boolean;
+    hoverTilt?: boolean;
+}): {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    containerStyle: React.CSSProperties;
+    canvasStyle: React.CSSProperties;
+    handlers: {
+        onPointerEnter: ((event: React.PointerEvent) => void) | undefined;
+        onPointerLeave: (() => void) | undefined;
+        onPointerMove: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    };
+};
+/**
+ * Tracks which 'ante' section is currently most visible in a scrollable container.
+ * Used in JamlAnalyzerFullscreen and AnalyzerExplorer.
+ */
+export declare function useAnteTracker(antes: {
+    ante: number;
+}[], options?: {
+    threshold?: number[];
+}): {
+    currentAnte: number;
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    scrollToAnte: (ante: number) => void;
+    registerAnteRef: (ante: number, el: HTMLElement | null) => void;
+};
+export interface DragState {
+    clause: JamlVisualClause;
+    fromZone: JamlZone;
+    x: number;
+    y: number;
+    offX: number;
+    offY: number;
+}
+/**
+ * Manages drag-and-drop state for the Jaml IDE visual filter editor.
+ */
+export declare function useJamlIdeDrag(filter: JamlVisualFilter, onChange: (filter: JamlVisualFilter) => void, rootRef: React.RefObject<HTMLDivElement | null>): {
+    drag: DragState | null;
+    hoverZone: string | null;
+    onDragStart: (e: React.MouseEvent | React.TouchEvent, clause: JamlVisualClause, fromZone: JamlZone) => void;
+};