jaml-ui 0.21.2 → 0.21.4

package/dist/ui/mascot/SeedMascot.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { MenuItem } from "./menuConfig";
+export interface SeedMascotProps {
+    /** Hit target size for the mascot image (px). Default 160. */
+    size?: number;
+    /** Vertical translation for keyboard dodge (px). */
+    mascotTranslateY?: number;
+    /** Extra translateY (px) for welcome entrance sliding animation. */
+    welcomeEntranceLift?: number;
+    /** CSS class for mascot animations (boing, dance, talking, etc.) */
+    mascotMotionClass?: string;
+    /** Callback when the mascot itself is tapped. */
+    onTap?: () => void;
+    /** Whether to show the radial menu ring. */
+    showRadialMenu?: boolean;
+    /** Whether the radial menu is currently animating out. */
+    showClosingRadialMenu?: boolean;
+    /** Menu items to display. */
+    radialItems?: MenuItem[];
+    /** Key for the current menu stack level. */
+    currentMenu?: string;
+    /** Callback when a menu item is clicked. */
+    onItemClick?: (item: MenuItem) => void;
+    /** Callback for the Back button. */
+    onBack?: () => void;
+    /** Show pagination controls. */
+    showPageControls?: boolean;
+    /** Go to previous orbital menu page. */
+    onPagePrev?: () => void;
+    /** Go to next orbital menu page. */
+    onPageNext?: () => void;
+    /** Breadcrumb trail label. */
+    breadcrumb?: React.ReactNode;
+    /** Base radius for orbit (will scale up if there are many items). */
+    baseOrbitRadius?: number;
+}
+export declare const SeedMascot: React.NamedExoticComponent<SeedMascotProps>;

package/dist/ui/mascot/SeedMascot.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { RadialMenu } from "../radial";
+export const SeedMascot = React.memo(function SeedMascot({ size = 160, mascotTranslateY = 0, welcomeEntranceLift = 0, mascotMotionClass = "jammy-jimbo-idle", onTap, showRadialMenu = false, showClosingRadialMenu = false, radialItems = [], currentMenu = "main", onItemClick, onBack, showPageControls = false, onPagePrev, onPageNext, breadcrumb, baseOrbitRadius = 66, }) {
+    // Orbit geometry — tight ring around Jammy; small per-item nudge only when many slots.
+    const orbitalCount = radialItems.filter((it) => !("_south" in it && it._south)).length;
+    const mascotHalf = size / 2;
+    const minOrbitR = mascotHalf + 42;
+    const orbitRadiusX = Math.max(84, baseOrbitRadius + orbitalCount * 3, minOrbitR);
+    const orbitRadiusY = orbitRadiusX;
+    return (_jsxs("div", { className: "relative flex w-full flex-col items-center justify-center", children: [radialItems.length > 0 && (showRadialMenu || showClosingRadialMenu) ? (_jsx(RadialMenu, { items: radialItems, showClosing: showClosingRadialMenu, mascotSizePx: size, orbitRadiusX: orbitRadiusX, orbitRadiusY: orbitRadiusY, mascotTranslateY: mascotTranslateY, currentMenu: currentMenu, onItemClick: onItemClick || (() => { }), onBack: onBack || (() => { }), showPageControls: showPageControls, onPagePrev: onPagePrev, onPageNext: onPageNext, breadcrumb: breadcrumb })) : null, _jsx("div", { className: "relative z-20 transition-transform duration-500 ease-[cubic-bezier(0.22,0.92,0.2,1.08)]", style: {
+                    transform: `translateY(${mascotTranslateY + welcomeEntranceLift}px)`,
+                }, children: _jsx("button", { type: "button", onClick: onTap, className: "relative block cursor-pointer rounded-full filter-[drop-shadow(0_4_12_rgba(0,0,0,0.5))] transition-transform duration-300 ease-[cubic-bezier(0.22,0.9,0.3,1.12)] will-change-transform [-webkit-backface-visibility:hidden] backface-hidden hover:scale-105 focus-visible:ring-4 focus-visible:ring-orange-500 active:scale-95", style: {
+                        width: size,
+                        height: size,
+                    }, "aria-label": "Tap Jammy to open chat or the menu", children: _jsx("span", { className: `pointer-events-none absolute inset-0 block ${mascotMotionClass}`, style: { transformOrigin: "50% 80%" }, children: _jsx("img", { src: "/jaml-logo.png", alt: "Jammy", className: "absolute inset-0 block h-full w-full object-contain" }) }) }) })] }));
+});

package/dist/ui/mascot/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SeedMascot';
+export * from './JammySpeechBox';
+export * from './menuConfig';

package/dist/ui/mascot/index.js

@@ -0,0 +1,3 @@
+export * from './SeedMascot';
+export * from './JammySpeechBox';
+export * from './menuConfig';

package/dist/ui/mascot/menuConfig.d.ts

@@ -0,0 +1,102 @@
+export declare const MenuColors: {
+    SUBMENU: "red";
+    CHAT: "blue";
+    TOGGLE: "orange";
+    ACTION: "red";
+    START: "green";
+    UPLOAD: "orange";
+};
+export interface IndicatorLightBadge {
+    label: string;
+    state: "loading" | "success" | "error" | "info" | "warning";
+    detail?: string;
+}
+export interface SubmenuItem {
+    label: string;
+    color: typeof MenuColors.SUBMENU;
+    badge?: IndicatorLightBadge;
+    tooltip?: string;
+    active?: never;
+    action?: never;
+    _dim?: boolean;
+    _south?: boolean;
+}
+export interface ChatItem {
+    label: string;
+    action: string;
+    color: typeof MenuColors.CHAT;
+    badge?: never;
+    tooltip?: string;
+    active?: never;
+    _dim?: boolean;
+    _south?: boolean;
+    /** Structured payload — passed through onMenuAction so handlers don't parse action strings. */
+    data?: Record<string, unknown>;
+}
+export interface ToggleItem {
+    label: string;
+    action: string;
+    color: typeof MenuColors.TOGGLE;
+    active?: boolean;
+    tooltip?: string;
+    badge?: never;
+    _dim?: boolean;
+    _south?: boolean;
+    disabled?: boolean;
+}
+export interface ActionItem {
+    label: string;
+    action: string;
+    color: typeof MenuColors.ACTION;
+    badge?: never;
+    tooltip?: string;
+    active?: never;
+    _dim?: boolean;
+    _south?: boolean;
+    /** Structured payload — passed through onMenuAction so handlers don't parse action strings. */
+    data?: Record<string, unknown>;
+}
+export interface StartItem {
+    label: string;
+    action: string;
+    color: typeof MenuColors.START;
+    badge?: never;
+    tooltip?: "start";
+    active?: never;
+    _dim?: never;
+    _south?: boolean;
+}
+export interface SeedItem {
+    label: string;
+    action: string;
+    color: "seed-top" | "seed-low" | "seed-zero";
+    tooltip?: string;
+    badge?: never;
+    active?: never;
+    _south?: boolean;
+    count?: number;
+    icon?: string;
+}
+export interface CountIndicatorButtonItem {
+    label: string;
+    action?: string;
+    color: typeof MenuColors.SUBMENU | typeof MenuColors.ACTION | "seed-top" | "seed-low" | "seed-zero";
+    count: number;
+    tooltip?: string;
+    badge?: never;
+    active?: never;
+    _dim?: boolean;
+    _south?: boolean;
+    icon?: string;
+}
+export interface UploadItem {
+    label: string;
+    action: string;
+    color: typeof MenuColors.UPLOAD;
+    badge?: never;
+    tooltip?: string;
+    active?: never;
+    _dim?: boolean;
+    _south?: boolean;
+}
+export type MenuItem = SubmenuItem | ChatItem | ToggleItem | ActionItem | StartItem | SeedItem | CountIndicatorButtonItem | UploadItem;

package/dist/ui/mascot/menuConfig.js

@@ -0,0 +1,12 @@
+// ── Strict Color Semantics ────────────────────────────────────────────────────
+// RED    = Default button, opens submenu/panel/tool/modal
+// BLUE   = CHAT — sends a message to Jammy specifically
+// ORANGE = TOGGLE on/off state, also used for UPLOAD
+export const MenuColors = {
+    SUBMENU: "red", // Opens submenu/panel/tool/modal
+    CHAT: "blue", // Sends chat message to Jammy
+    TOGGLE: "orange", // On/off switch
+    ACTION: "red", // Immediate UI action without chat message
+    START: "green", // Special color for START button on welcome screen
+    UPLOAD: "orange", // File upload action - uses Jimbo orange
+};

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' | 'tarot' | 'planet' | 'spectral' | 'grey' | 'gold';
+export type JimboTone = 'orange' | 'red' | 'blue' | 'green' | 'tarot' | 'planet' | 'spectral' | 'grey';
 export interface JimboButtonProps {
     tone?: JimboTone;
     size?: 'xs' | 'sm' | 'md' | 'lg';

package/dist/ui/panel.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, memo } from 'react';
-import { JimboColorOption } from './tokens.js';
-import { useSway, useDOMMagneticTilt } from './hooks.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);
@@ -11,30 +10,13 @@ export const JimboPanel = memo(({ children, className = '', sway = false, onBack
 JimboPanel.displayName = 'JimboPanel';
 export const JimboInnerPanel = memo(({ children, className = '', style, ...props }) => (_jsx("div", { className: `j-inner-panel ${className}`, style: style, ...props, children: children })));
 JimboInnerPanel.displayName = 'JimboInnerPanel';
-// ─── JimboButton ──────────────────────────────────────────────────────────────
-// Canonical flat 2D Balatro-style button.
-// Two-layer: separate shadow div (3px south + 1px east) that disappears on press.
-// Press translates the face onto the shadow. No gradients, no hover color change.
-const JIMBO_TONE_PAIRS = {
-    orange: [JimboColorOption.ORANGE, JimboColorOption.DARK_ORANGE],
-    red: [JimboColorOption.RED, JimboColorOption.DARK_RED],
-    blue: [JimboColorOption.BLUE, JimboColorOption.DARK_BLUE],
-    green: [JimboColorOption.GREEN, JimboColorOption.DARK_GREEN],
-    tarot: ['#9e74ce', '#5e437e'],
-    planet: ['#00a7ca', '#00657c'],
-    spectral: ['#2e76fd', '#14449e'],
-    grey: ['#888888', '#555555'],
-    gold: ['#f1c40f', '#d35400'],
-};
 export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, uppercase = false, onClick, style, className = '', children, }) {
     const [pressed, setPressed] = useState(false);
-    const [fg, sh] = JIMBO_TONE_PAIRS[tone] ?? JIMBO_TONE_PAIRS.orange;
     const textSize = size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md';
-    const { handlers, tiltStyle } = useDOMMagneticTilt(!disabled);
     return (_jsx("div", { className: `j-btn j-btn--${tone} j-btn--${size} ${fullWidth ? 'j-btn--full' : ''} ${disabled ? 'j-btn--disabled' : ''} ${className}`, "data-pressed": pressed, onMouseDown: () => { if (!disabled)
-            setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: (e) => { setPressed(false); }, onTouchStart: () => { if (!disabled)
+            setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => { if (!disabled)
             setPressed(true); }, onTouchEnd: () => setPressed(false), onClick: () => { if (!disabled)
-            onClick?.(); }, onPointerEnter: handlers.onPointerEnter, onPointerMove: handlers.onPointerMove, onPointerLeave: handlers.onPointerLeave, style: style, children: _jsxs("div", { style: { ...tiltStyle, width: '100%' }, children: [_jsx("div", { className: "j-btn__shadow", style: { background: sh } }), _jsx("div", { className: "j-btn__face", style: { background: fg }, children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) })] }) }));
+            onClick?.(); }, style: style, children: _jsx("div", { className: "j-btn__face", children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) }) }));
 }
 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" }) }));

package/dist/ui/radial/RadialBadge.d.ts

@@ -0,0 +1,17 @@
+import "./radial-navigation.css";
+import type { RadialButtonColor } from "./RadialButton";
+export type RadialBadgeState = "loading" | "success" | "error" | "info" | "warning";
+export interface RadialBadgeProps {
+    label: string;
+    state: RadialBadgeState;
+    color?: RadialButtonColor;
+    tooltip?: string;
+    className?: string;
+}
+/**
+ * Display-only radial status indicator.
+ *
+ * Visually matches RadialButton but rendered as a `<div>` with no click handler.
+ * Shows a status dot (green/red/grey) + label text.
+ */
+export declare function RadialBadge({ label, state, color, tooltip, className }: RadialBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/radial/RadialBadge.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { JimboColorOption } from "../tokens";
+import "./radial-navigation.css";
+import { BUTTON_THEMES } from "./RadialButton";
+const INDICATOR_STYLES = {
+    success: { bg: JimboColorOption.GREEN_TEXT, border: JimboColorOption.BORDER_SILVER },
+    error: { bg: JimboColorOption.DARK_RED, border: JimboColorOption.DARK_GREY },
+    loading: { bg: JimboColorOption.GREY, border: JimboColorOption.DARK_GREY },
+    info: { bg: JimboColorOption.BLUE, border: JimboColorOption.DARK_GREY },
+    warning: { bg: JimboColorOption.ORANGE, border: JimboColorOption.DARK_GREY },
+};
+/**
+ * Display-only radial status indicator.
+ *
+ * Visually matches RadialButton but rendered as a `<div>` with no click handler.
+ * Shows a status dot (green/red/grey) + label text.
+ */
+export function RadialBadge({ label, state, color = "red", tooltip, className }) {
+    const theme = BUTTON_THEMES[color];
+    const altText = tooltip ?? `badge: ${label}`;
+    return (_jsxs("div", { role: "status", "aria-label": altText, title: altText, className: twMerge(clsx("flex min-w-[60px] items-center justify-center gap-1.5 rounded-[11px] px-[10px] py-[2px] select-none sm:min-w-[64px] sm:px-[14px]", "text-[11.5px] font-normal", "shadow-[var(--btn-shadow)]", className)), style: {
+            backgroundColor: theme.bg,
+            border: "none",
+            height: 24,
+            "--btn-shadow": `0 4px 0 0 ${theme.shadow}`,
+        }, children: [_jsx("div", { className: twMerge("h-[9px] w-[9px] shrink-0 rounded-full border", (state === "error" || state === "loading") && "animate-pulse"), style: {
+                    backgroundColor: INDICATOR_STYLES[state].bg,
+                    borderWidth: 1,
+                    borderColor: INDICATOR_STYLES[state].border,
+                    boxShadow: state === "success"
+                        ? "0 0 8px rgba(53,189,134,0.5)"
+                        : state === "error"
+                            ? "0 0 8px rgba(160,39,33,0.5)"
+                            : state === "info"
+                                ? "0 0 8px rgba(62,176,248,0.5)"
+                                : state === "warning"
+                                    ? "0 0 8px rgba(254,166,42,0.5)"
+                                    : "none",
+                } }), _jsx("span", { className: "jimbo-radial-label jimbo-radial-label--badge", children: label })] }));
+}

package/dist/ui/radial/RadialBreadcrumb.d.ts

@@ -0,0 +1,12 @@
+export interface RadialBreadcrumbProps {
+    label: string;
+    title?: string;
+    className?: string;
+}
+/**
+ * Breadcrumb nav pill — "currently viewing" indicator.
+ *
+ * Sits above the Back button to show the user's position in the menu tree.
+ * Non-interactive, dark styling, same pill family as orbital buttons.
+ */
+export declare function RadialBreadcrumb({ label, title, className }: RadialBreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/radial/RadialBreadcrumb.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+const BREADCRUMB_STYLE = {
+    backgroundColor: "#1a1e2e",
+    border: "1.5px solid rgba(255,255,255,0.18)",
+    color: "#f6f0d5",
+    opacity: 0.92,
+};
+/**
+ * Breadcrumb nav pill — "currently viewing" indicator.
+ *
+ * Sits above the Back button to show the user's position in the menu tree.
+ * Non-interactive, dark styling, same pill family as orbital buttons.
+ */
+export function RadialBreadcrumb({ label, title, className }) {
+    return (_jsxs("div", { role: "status", "aria-label": title ?? `In: ${label}`, title: title ?? `In: ${label}`, className: twMerge("pointer-events-auto flex items-center gap-1 rounded-[11px] px-[10px] py-[2px] font-serif text-[11.5px] font-normal shadow-[0_4px_0_0_rgba(30,30,30,0.9)] select-none sm:px-[14px]", className), style: BREADCRUMB_STYLE, children: [_jsx("span", { className: "text-[9.5px] opacity-50", children: "\u203A" }), _jsx("span", { className: "whitespace-nowrap", children: label })] }));
+}

package/dist/ui/radial/RadialButton.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import "./radial-navigation.css";
+export type RadialButtonColor = "orange" | "purple" | "red" | "green" | "blue" | "seed-zero" | "seed-low" | "seed-top";
+interface ButtonTheme {
+    bg: string;
+    shadow: string;
+    text: string;
+}
+declare const BUTTON_THEMES: Record<RadialButtonColor, ButtonTheme>;
+export interface RadialButtonActionProps {
+    variant?: "action";
+    label: string;
+    color?: RadialButtonColor;
+    tooltip?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface RadialButtonToggleProps {
+    variant: "toggle";
+    label: string;
+    active: boolean;
+    color?: RadialButtonColor;
+    tooltip?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+export interface RadialButtonCountProps {
+    variant: "count";
+    label: string;
+    count: number;
+    icon?: string;
+    color?: RadialButtonColor;
+    tooltip?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface RadialButtonBackProps {
+    variant: "back" | "start";
+    label: string;
+    color?: RadialButtonColor;
+    tooltip?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type RadialButtonProps = RadialButtonActionProps | RadialButtonToggleProps | RadialButtonCountProps | RadialButtonBackProps;
+/**
+ * Polymorphic radial navigation button.
+ *
+ * Replaces four separate components (Button, CountIndicator, Toggle, Back/Start)
+ * with a single component using a `variant` prop.
+ *
+ * All variants share the Balatro-styled pill: 3D bottom-edge shadow, press-down on active.
+ */
+export declare function RadialButton(props: RadialButtonProps): import("react/jsx-runtime").JSX.Element;
+export { BUTTON_THEMES };
+export type { ButtonTheme };

package/dist/ui/radial/RadialButton.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { JimboColorOption } from "../tokens";
+import "./radial-navigation.css";
+const BUTTON_THEMES = {
+    orange: { bg: JimboColorOption.ORANGE, shadow: JimboColorOption.DARK_ORANGE, text: JimboColorOption.WHITE },
+    purple: { bg: JimboColorOption.PURPLE, shadow: JimboColorOption.DARK_PURPLE, text: JimboColorOption.WHITE },
+    red: { bg: JimboColorOption.RED, shadow: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
+    green: { bg: JimboColorOption.GREEN, shadow: JimboColorOption.DARK_GREEN, text: JimboColorOption.WHITE },
+    blue: { bg: JimboColorOption.BLUE, shadow: JimboColorOption.DARK_BLUE, text: JimboColorOption.WHITE },
+    "seed-zero": { bg: JimboColorOption.BLACK, shadow: "#111111", text: JimboColorOption.WHITE },
+    "seed-low": { bg: JimboColorOption.DARK_GREY, shadow: JimboColorOption.DARKEST, text: JimboColorOption.WHITE },
+    "seed-top": { bg: JimboColorOption.DARKEST, shadow: JimboColorOption.BLACK, text: JimboColorOption.GOLD },
+};
+// ── Shared base classes ───────────────────────────────────────────────────────
+const BUTTON_SHADOW = "0 4px 0 0 rgba(0,0,0,0.8)";
+const BASE_CLASSES = clsx("group flex items-center justify-center gap-1.5 rounded-[10px] border-none px-[10px] py-[3px] outline-none select-none", "font-normal", "transition-[transform,box-shadow] duration-[80ms] ease-out");
+const INTERACTIVE_CLASSES = "cursor-pointer";
+const DISABLED_CLASSES = "cursor-not-allowed opacity-67";
+const WIDE_CLASSES = "w-[130px] sm:w-[160px]";
+const NORMAL_WIDTH = "min-w-[54px] sm:min-w-[64px]";
+/**
+ * Polymorphic radial navigation button.
+ *
+ * Replaces four separate components (Button, CountIndicator, Toggle, Back/Start)
+ * with a single component using a `variant` prop.
+ *
+ * All variants share the Balatro-styled pill: 3D bottom-edge shadow, press-down on active.
+ */
+export function RadialButton(props) {
+    const { label, tooltip, onClick, className } = props;
+    const variant = props.variant ?? "action";
+    const [isPressed, setIsPressed] = useState(false);
+    // South pills (Start / Back): same Balatro orange as Back — never green-vs-red split.
+    const isSouthPill = variant === "start" || variant === "back";
+    let colorKey;
+    if (isSouthPill) {
+        colorKey = props.color ?? "orange";
+    }
+    else if (variant === "toggle") {
+        colorKey = props.color ?? "red";
+    }
+    else if (variant === "count") {
+        colorKey = props.color ?? "red";
+    }
+    else {
+        colorKey = props.color ?? "red";
+    }
+    const theme = BUTTON_THEMES[colorKey];
+    const altText = _computeAltText(props, variant);
+    const isDisabled = variant === "toggle" && props.disabled === true;
+    const isWide = variant === "back" || variant === "start";
+    return (_jsxs("button", { type: "button", onClick: isDisabled ? undefined : onClick, onPointerDown: isDisabled
+            ? undefined
+            : (e) => {
+                setIsPressed(true);
+                e.currentTarget.setPointerCapture(e.pointerId);
+            }, onPointerUp: isDisabled ? undefined : () => setIsPressed(false), onPointerCancel: isDisabled ? undefined : () => setIsPressed(false), onPointerLeave: isDisabled ? undefined : () => setIsPressed(false), "aria-label": altText, title: tooltip ?? altText, disabled: isDisabled, className: twMerge(clsx(BASE_CLASSES, isWide ? WIDE_CLASSES : NORMAL_WIDTH, isDisabled ? DISABLED_CLASSES : INTERACTIVE_CLASSES, className)), style: {
+            backgroundColor: theme.bg,
+            boxShadow: isPressed && !isDisabled ? "none" : BUTTON_SHADOW,
+            transform: isPressed && !isDisabled ? "translateY(4px)" : "translateY(0)",
+            ...(props.style ?? {}),
+        }, children: [variant === "toggle" && _jsx(ToggleDot, { active: props.active, disabled: isDisabled }), _jsx("span", { className: "jimbo-radial-label jimbo-radial-label--action", children: label }), variant === "count" && _jsx(CountBadge, { count: props.count, icon: props.icon })] }));
+}
+// ── Internal sub-components ───────────────────────────────────────────────────
+function ToggleDot({ active, disabled: _disabled }) {
+    const dotStyle = active
+        ? { backgroundColor: JimboColorOption.GREEN_TEXT, borderColor: JimboColorOption.BORDER_SILVER }
+        : { backgroundColor: JimboColorOption.DARK_RED, borderColor: JimboColorOption.DARK_GREY };
+    return (_jsx("div", { className: twMerge("h-[9px] w-[9px] shrink-0 rounded-full border"), style: { borderWidth: 1, ...dotStyle } }));
+}
+function CountBadge({ count, icon }) {
+    if (icon) {
+        return (_jsx("span", { className: "inline-flex items-center justify-center text-[10px] leading-none", style: { marginLeft: 2 }, "aria-hidden": "true", children: icon }));
+    }
+    return (_jsx("span", { className: "inline-flex items-center justify-center rounded-full font-mono leading-none", style: {
+            fontSize: "10px",
+            backgroundColor: JimboColorOption.DARKEST,
+            color: count > 0 ? JimboColorOption.GOLD : JimboColorOption.GREY,
+            minWidth: 16,
+            height: 16,
+            padding: "2px 4px",
+            marginLeft: 2,
+        }, children: count }));
+}
+function _computeAltText(props, variant) {
+    if (props.tooltip)
+        return props.tooltip;
+    switch (variant) {
+        case "toggle":
+            return `toggle: ${props.label} (${props.active ? "on" : "off"})`;
+        case "count":
+            return `${props.label}: ${props.icon ?? props.count}`;
+        default:
+            return `button: ${props.label}`;
+    }
+}
+// Re-export themes for badge usage
+export { BUTTON_THEMES };

package/dist/ui/radial/RadialMenu.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import type { MenuItem } from "../mascot/menuConfig";
+export interface RadialMenuProps {
+    /** Menu items to display. The item flagged _south is always pinned at the bottom. */
+    items: MenuItem[];
+    /** When true, pills animate out to center. */
+    showClosing: boolean;
+    /** Jammy hit target / image size (px) — used so pills clear the seed graphic. */
+    mascotSizePx: number;
+    /** Horizontal radius for the orbit (px). */
+    orbitRadiusX: number;
+    /** Vertical radius (typically same or slightly larger than horizontal). */
+    orbitRadiusY: number;
+    /** Vertical translation for keyboard dodge (px). */
+    mascotTranslateY: number;
+    /** Current menu name — used for stable React keys. */
+    currentMenu: string;
+    /** Callback when a menu item is clicked. */
+    onItemClick: (item: MenuItem) => void;
+    /** Callback for the Back button. */
+    onBack: () => void;
+    /** Optional breadcrumb rendered above the Back button position. */
+    breadcrumb?: ReactNode;
+    /** Show dedicated page controls near the south back/start button. */
+    showPageControls?: boolean;
+    /** Go to previous orbital menu page. */
+    onPagePrev?: () => void;
+    /** Go to next orbital menu page. */
+    onPageNext?: () => void;
+}
+/**
+ * Orbital radial menu layout engine.
+ *
+ * South (`_south`) stays pinned under the mascot. Everyone else sits on an ellipse
+ * at equal angle steps, with a single radial push if a pill would overlap the
+ * center — no iterative “solver” (that was causing mushy, uneven layouts).
+ */
+export declare function RadialMenu({ items, showClosing, mascotSizePx, orbitRadiusX, orbitRadiusY, mascotTranslateY, currentMenu, onItemClick, onBack, breadcrumb, showPageControls, onPagePrev, onPageNext, }: RadialMenuProps): import("react/jsx-runtime").JSX.Element | null;