jaml-ui 0.17.2 → 0.18.0

package/dist/components/jamlMap/MysterySlot.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MysterySlot } from './MysterySlot';
+const meta = {
+    title: 'JAML/MysterySlot',
+    component: MysterySlot,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        zone: 'must',
+        width: 64,
+    },
+    render: (args) => (_jsx("div", { style: { background: '#1e2b2d', padding: 20 }, children: _jsx(MysterySlot, { ...args }) })),
+};
+export const FilledJoker = {
+    args: {
+        zone: 'must',
+        width: 64,
+        selection: {
+            clauseKey: 'joker',
+            value: 'Joker',
+            displayLabel: 'Joker',
+            spriteName: 'Joker',
+            sheetType: 'Jokers',
+        },
+    },
+    render: (args) => (_jsx("div", { style: { background: '#1e2b2d', padding: 20 }, children: _jsx(MysterySlot, { ...args }) })),
+};

package/dist/components/jamlMap/index.d.ts

@@ -1,3 +1,4 @@
 export { MysterySlot, type MysterySlotProps, type SlotSelection, type SlotCategory, type JamlZone } from "./MysterySlot.js";
 export { JokerPicker, type JokerPickerProps, type JokerRarity } from "./JokerPicker.js";
-export { JamlMapEditorDemo, type JamlMapEditorDemoProps } from "./JamlMapEditorDemo.js";
+export { JamlMapEditor, type JamlMapEditorProps } from "./JamlMapEditor.js";
+export { CategoryPicker, type CategoryPickerConfig, type CategoryPickerProps, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";

package/dist/components/jamlMap/index.js

@@ -1,3 +1,4 @@
 export { MysterySlot } from "./MysterySlot.js";
 export { JokerPicker } from "./JokerPicker.js";
-export { JamlMapEditorDemo } from "./JamlMapEditorDemo.js";
+export { JamlMapEditor } from "./JamlMapEditor.js";
+export { CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";

package/dist/hooks/useAnalyzer.d.ts

@@ -1,9 +1,5 @@
-import type { Motely as MotelyT, MotelyWasm as MotelyWasmT } from "motely-wasm";
+import { MotelyWasm, Motely } from "motely-wasm";
 import type { AnalyzerAnteView } from "../components/AnalyzerExplorer.js";
-export interface MotelyRuntime {
-    MotelyWasm: typeof MotelyWasmT;
-    Motely: typeof MotelyT;
-}
 export type AnalyzerStatus = "idle" | "running" | "done" | "error";
 export type MotelyJsRunState = {
     voucherBitfield: number;
@@ -18,15 +14,15 @@ export type MotelyJsRunState = {
  * `createShopItemStream(ante, runState, ...)`.
  */
 export interface AnalyzerLive {
-    ctx: ReturnType<typeof MotelyWasmT.createSearchContext>;
-    Motely: typeof MotelyT;
+    ctx: ReturnType<typeof MotelyWasm.createSearchContext>;
+    Motely: typeof Motely;
     runStates: Record<number, MotelyJsRunState>;
     desiredNames: ReadonlySet<string>;
     seed: string;
     deck: string;
     stake: string;
 }
-export declare function useAnalyzer(motelyRuntime: MotelyRuntime): {
+export declare function useAnalyzer(): {
     antes: AnalyzerAnteView[];
     status: AnalyzerStatus;
     error: string | null;

package/dist/hooks/useAnalyzer.js

@@ -1,8 +1,9 @@
 "use client";
 import { useState, useCallback } from "react";
+import { MotelyWasm, Motely } from "motely-wasm";
 import { extractVisualJamlItems } from "../utils/jamlMapPreview.js";
 import { motelyItemDisplayNameFromValue } from "../motelyDisplay.js";
-export function useAnalyzer(motelyRuntime) {
+export function useAnalyzer() {
     const [antes, setAntes] = useState([]);
     const [status, setStatus] = useState("idle");
     const [error, setError] = useState(null);
@@ -17,7 +18,6 @@ export function useAnalyzer(motelyRuntime) {
         setStatus("running");
         setError(null);
         try {
-            const { MotelyWasm, Motely } = motelyRuntime;
             const deckEnum = Motely.MotelyDeck[deck] ?? Motely.MotelyDeck.Red;
             const stakeEnum = Motely.MotelyStake[stake] ?? Motely.MotelyStake.White;
             const desiredNames = new Set();
@@ -77,7 +77,7 @@ export function useAnalyzer(motelyRuntime) {
             setError(e instanceof Error ? e.message : String(e));
             setStatus("error");
         }
-    }, [motelyRuntime]);
+    }, []);
     const clearError = useCallback(() => {
         setError(null);
         setStatus((s) => (s === "error" ? "idle" : s));

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { Showcase, type ShowcaseFilter, type ShowcaseLiveStats, type ShowcasePro
 export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream, type StreamItem, type StreamState } from "./hooks/useShopStream.js";
 export { useSearch, type SearchResult, type SearchStatus, type UseSearchState, } from "./hooks/useSearch.js";
-export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, type MotelyRuntime, type MotelyJsRunState, } from "./hooks/useAnalyzer.js";
+export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, type MotelyJsRunState, } from "./hooks/useAnalyzer.js";
 export { JamlAestheticSelector, type JamlAestheticSelectorProps, type JamlAestheticOption, } from "./components/JamlAestheticSelector.js";
 export { JamlSeedInput, type JamlSeedInputProps, } from "./components/JamlSeedInput.js";
-export { JamlMapEditorDemo, JokerPicker, MysterySlot, type JamlMapEditorDemoProps, type JokerPickerProps, type JokerRarity, type MysterySlotProps, type SlotCategory, type SlotSelection, } from "./components/jamlMap/index.js";
+export { JamlMapEditor, JokerPicker, MysterySlot, CategoryPicker, type JamlMapEditorProps, type JokerPickerProps, type JokerRarity, type MysterySlotProps, type SlotCategory, type SlotSelection, type CategoryPickerConfig, type CategoryPickerProps, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./components/jamlMap/index.js";

package/dist/index.js

@@ -25,4 +25,4 @@ export { useSearch, } from "./hooks/useSearch.js";
 export { useAnalyzer, } from "./hooks/useAnalyzer.js";
 export { JamlAestheticSelector, } from "./components/JamlAestheticSelector.js";
 export { JamlSeedInput, } from "./components/JamlSeedInput.js";
-export { JamlMapEditorDemo, JokerPicker, MysterySlot, } from "./components/jamlMap/index.js";
+export { JamlMapEditor, JokerPicker, MysterySlot, CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./components/jamlMap/index.js";

package/dist/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './button.css';
+/** Primary UI component for user interaction */
+export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (_jsx("button", { type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor }, ...props, children: label }));
+};

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;
+export declare const JAMLUI: Story;

package/dist/stories/Button.stories.js

@@ -0,0 +1,50 @@
+import { fn } from 'storybook/test';
+import { Button } from './Button';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Example/Button',
+    component: Button,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+    args: { onClick: fn() },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};
+export const JAMLUI = {
+    args: {
+        primary: false,
+        label: "Button"
+    }
+};

package/dist/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/Header.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from './Button';
+import './header.css';
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (_jsx("header", { children: _jsxs("div", { className: "storybook-header", children: [_jsxs("div", { children: [_jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsx("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }), _jsx("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }), _jsx("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })] }) }), _jsx("h1", { children: "Acme" })] }), _jsx("div", { children: user ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "welcome", children: ["Welcome, ", _jsx("b", { children: user.name }), "!"] }), _jsx(Button, { size: "small", onClick: onLogout, label: "Log out" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", onClick: onLogin, label: "Log in" }), _jsx(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })] })) })] }) }));

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("storybook/test").Mock<(...args: any[]) => any>;
+        onLogout: import("storybook/test").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Header.stories.js

@@ -0,0 +1,26 @@
+import { fn } from 'storybook/test';
+import { Header } from './Header';
+const meta = {
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+    args: {
+        onLogin: fn(),
+        onLogout: fn(),
+        onCreateAccount: fn(),
+    },
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        user: {
+            name: 'Jane Doe',
+        },
+    },
+};
+export const LoggedOut = {};

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/stories/Page.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Header } from './Header';
+import './page.css';
+export const Page = () => {
+    const [user, setUser] = React.useState();
+    return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), "."] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
+};

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/stories/Page.stories.js

@@ -0,0 +1,24 @@
+import { expect, userEvent, within } from 'storybook/test';
+import { Page } from './Page';
+const meta = {
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const LoggedOut = {};
+// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const LoggedIn = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const loginButton = canvas.getByRole('button', { name: /Log in/i });
+        await expect(loginButton).toBeInTheDocument();
+        await userEvent.click(loginButton);
+        await expect(loginButton).not.toBeInTheDocument();
+        const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+        await expect(logoutButton).toBeInTheDocument();
+    },
+};

package/dist/ui/Jimbo.stories.d.ts

@@ -0,0 +1,7 @@
+import type { StoryObj } from '@storybook/react';
+import "./jimbo.css";
+declare const meta: Meta;
+export default meta;
+export declare const Typography: StoryObj;
+export declare const Buttons: StoryObj;
+export declare const Modal: StoryObj;

package/dist/ui/Jimbo.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboButton, JimboText, JimboModalRoot, useJimboModal } from './index';
+import "./jimbo.css";
+const meta = {
+    title: 'JimboUI/Core',
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Typography = {
+    render: () => (_jsxs("div", { className: "j-panel", style: { display: "flex", flexDirection: "column", gap: 10, padding: 20 }, children: [_jsx(JimboText, { size: "title", tone: "white", children: "Title Text" }), _jsx(JimboText, { size: "header", tone: "gold", children: "Header Text (Gold)" }), _jsx(JimboText, { size: "lg", tone: "white", children: "Large Text" }), _jsx(JimboText, { size: "md", tone: "grey", children: "Medium Text (Grey)" }), _jsx(JimboText, { size: "sm", tone: "blue", children: "Small Text (Blue)" }), _jsx(JimboText, { size: "xs", tone: "red", children: "Extra Small (Red)" }), _jsx(JimboText, { size: "micro", tone: "tarot", children: "Micro Text (Tarot)" })] })),
+};
+export const Buttons = {
+    render: () => (_jsxs("div", { className: "j-panel", style: { display: "flex", flexDirection: "column", gap: 10, padding: 20, width: 300 }, children: [_jsx(JimboButton, { tone: "gold", size: "lg", children: "Large Gold Button" }), _jsx(JimboButton, { tone: "blue", size: "md", children: "Medium Blue Button" }), _jsx(JimboButton, { tone: "red", size: "sm", children: "Small Red Button" }), _jsx(JimboButton, { tone: "grey", size: "xs", children: "XS Grey Button" }), _jsxs("div", { style: { display: "flex", gap: 10 }, children: [_jsx(JimboButton, { tone: "tarot", size: "md", style: { flex: 1 }, children: "Flex 1" }), _jsx(JimboButton, { tone: "planet", size: "md", style: { flex: 1 }, children: "Flex 2" })] })] })),
+};
+const ModalDemo = () => {
+    const { openModal, closeModal } = useJimboModal();
+    return (_jsxs("div", { className: "j-panel", style: { padding: 20, textAlign: "center" }, children: [_jsx(JimboText, { size: "lg", tone: "white", children: "Modal Testing" }), _jsx("div", { style: { height: 20 } }), _jsx(JimboButton, { tone: "gold", size: "md", onClick: () => {
+                    openModal("demo-modal", (_jsxs("div", { style: { padding: 20 }, children: [_jsx(JimboText, { size: "md", tone: "white", children: "This is a JimboModal!" }), _jsx("div", { style: { height: 20 } }), _jsx(JimboButton, { tone: "red", size: "sm", onClick: () => closeModal(), children: "Close" })] })));
+                }, children: "Open Modal" })] }));
+};
+export const Modal = {
+    decorators: [
+        (Story) => (_jsxs("div", { style: { width: 375, height: 600, border: "1px solid #333", position: "relative", overflow: "hidden" }, children: [_jsx(Story, {}), _jsx(JimboModalRoot, {})] }))
+    ],
+    render: () => _jsx(ModalDemo, {})
+};

package/dist/ui/jimbo.css

@@ -4,6 +4,15 @@
    Eyedropped from actual game shader output — not Lua hex values.
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* Global Scrollbar Hide */
+* {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+*::-webkit-scrollbar {
+  display: none !important;
+}
+
 /* ── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
 
 :root {
@@ -121,7 +130,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
 }
 
@@ -209,23 +218,23 @@
   border-radius: var(--j-radius-sm);
   font-family: var(--j-font);
   font-weight: 400;
-  text-transform: uppercase;
   letter-spacing: 0.04em;
   white-space: nowrap;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+  border: none;
 }
 .j-badge--sm { padding: 2px 6px; font-size: 10px; }
 .j-badge--md { padding: 4px 8px; font-size: 12px; }
 
-/* Badge tones */
-.j-badge--dark   { background: var(--j-darkest);  color: var(--j-white); border: 1px solid var(--j-panel-edge); }
-.j-badge--blue   { background: var(--j-blue);     color: var(--j-white); border: 1px solid var(--j-black); }
-.j-badge--red    { background: var(--j-red);      color: var(--j-white); border: 1px solid var(--j-black); }
-.j-badge--green  { background: var(--j-green);    color: var(--j-black); border: 1px solid var(--j-black); }
-.j-badge--gold   { background: var(--j-gold);     color: var(--j-black); border: 1px solid var(--j-black); }
-.j-badge--grey   { background: var(--j-grey);     color: var(--j-white); border: 1px solid var(--j-black); }
-.j-badge--orange { background: var(--j-orange);   color: var(--j-white); border: 1px solid var(--j-black); }
-.j-badge--purple { background: var(--j-purple);   color: var(--j-white); border: 1px solid var(--j-black); }
+/* Badge tones — dark-colored bottom edge, no thin pixel borders */
+.j-badge--dark   { background: var(--j-darkest);  color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-panel-edge); }
+.j-badge--blue   { background: var(--j-blue);     color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-blue); }
+.j-badge--red    { background: var(--j-red);      color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-red); }
+.j-badge--green  { background: var(--j-green);    color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-green); }
+.j-badge--gold   { background: var(--j-gold);     color: var(--j-black); box-shadow: 0 2px 0 0 #8a6a1e; }
+.j-badge--grey   { background: var(--j-grey);     color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-teal-grey); }
+.j-badge--orange { background: var(--j-orange);   color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-orange); }
+.j-badge--purple { background: var(--j-purple);   color: var(--j-white); box-shadow: 0 2px 0 0 var(--j-dark-purple); }
 
 
 /* ── Tabs ──────────────────────────────────────────────────────────────── */

package/dist/ui/jimboText.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type JimboTextTone = 'default' | 'mult' | 'chips' | 'gold' | 'green' | 'red' | 'blue' | 'orange' | 'purple' | 'grey';
-export type JimboTextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type JimboTextSize = 'micro' | 'label' | 'xs' | 'body' | 'sm' | 'md' | 'heading' | 'lg' | 'xl' | 'display';
 export interface JimboTextProps extends React.HTMLAttributes<HTMLElement> {
     tone?: JimboTextTone;
     size?: JimboTextSize;

package/dist/ui/panel.d.ts

@@ -8,7 +8,7 @@ export declare const JimboPanel: React.MemoExoticComponent<({ children, classNam
 export interface JimboInnerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const JimboInnerPanel: React.MemoExoticComponent<({ children, className, style, ...props }: JimboInnerPanelProps) => import("react/jsx-runtime").JSX.Element>;
-export type JimboTone = 'orange' | 'red' | 'blue' | 'green' | 'gold' | 'grey';
+export type JimboTone = 'orange' | 'red' | 'blue' | 'green' | 'gold' | 'grey' | 'tarot' | 'planet' | 'spectral';
 export interface JimboButtonProps {
     tone?: JimboTone;
     size?: 'xs' | 'sm' | 'md' | 'lg';

package/dist/ui/panel.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, memo } from 'react';
-import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
-import { useSway, useDelayedVisibility } from './hooks.js';
+import { JimboColorOption } from './tokens.js';
+import { useSway } from './hooks.js';
 import { JimboText } from './jimboText.js';
 export const JimboPanel = memo(({ children, className = '', sway = false, onBack, hideBack = false, style, ...props }) => {
     const panelRef = useSway(sway);
@@ -22,6 +22,9 @@ const JIMBO_TONE_PAIRS = {
     green: [JimboColorOption.GREEN, JimboColorOption.DARK_GREEN],
     gold: [JimboColorOption.GOLD, '#8a6a1e'],
     grey: [JimboColorOption.DARK_GREY, JimboColorOption.DARKEST],
+    tarot: ['#9e74ce', '#5e437e'],
+    planet: ['#00a7ca', '#00657c'],
+    spectral: ['#2e76fd', '#14449e'],
 };
 export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, uppercase = false, onClick, style, className = '', children, }) {
     const [pressed, setPressed] = useState(false);
@@ -36,8 +39,7 @@ export function JimboBackButton({ onClick }) {
     return (_jsx("div", { className: "j-flex j-justify-center j-w-full", style: { padding: '4px 0' }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: onClick, children: "Back" }) }));
 }
 export function JimboModal({ children, open, onClose, title, className }) {
-    const { visible, opacity } = useDelayedVisibility(open, JIMBO_ANIMATIONS.MENU_SINK_DURATION);
-    if (!visible)
+    if (!open)
         return null;
-    return (_jsx("div", { className: "j-modal-overlay", style: { opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: `j-modal ${className ?? ''}`, onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", className: "j-modal__title", children: title }), children] }) }));
+    return (_jsx("div", { className: "j-modal-overlay", onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: `j-modal ${className ?? ''}`, onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", className: "j-modal__title", children: title }), children] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -47,7 +47,9 @@
     "dev": "tsc --watch",
     "demo": "vite --config demo/vite.config.ts",
     "typecheck": "tsc --noEmit --pretty false",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "engines": {
     "node": ">=18"
@@ -123,7 +125,18 @@
     "react-icons": "^5.6.0",
     "three": "^0.184.0",
     "typescript": "^5.9.3",
-    "vite": "^8.0.9"
+    "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"