jaml-ui 0.21.2 → 0.21.4

package/dist/ui/radial/RadialMenu.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { RadialPill } from "./RadialPill";
+import { RadialButton } from "./RadialButton";
+import { RadialBadge } from "./RadialBadge";
+// ── Type guards ───────────────────────────────────────────────────────────────
+function hasDim(item) {
+    return "_dim" in item;
+}
+function hasSouth(item) {
+    return "_south" in item && item._south === true;
+}
+function hasIcon(item) {
+    return "icon" in item && typeof item.icon === "string";
+}
+function hasCount(item) {
+    return "count" in item && typeof item.count === "number";
+}
+function isToggleItem(item) {
+    return "active" in item && typeof item.active === "boolean";
+}
+// ── Orbit geometry constants ──────────────────────────────────────────────────
+/** Degrees reserved on each side of south (90°) for the south-pinned button. */
+const FULL_CIRCLE_RAD = 2 * Math.PI;
+const SOUTH_ANGLE_RAD = Math.PI / 2;
+/** ~half height of a radial pill (px) — used with width for clearance vs round mascot. */
+const PILL_HALF_H = 15;
+/**
+ * Estimated pill width for clamp math — tuned for m6x11 ~12px + padding + toggle dot.
+ */
+function estimatePillWidth(item) {
+    const label = item.label || "";
+    const charW = 7.25;
+    const basePad = 36;
+    const hasToggle = "active" in item && typeof item.active === "boolean";
+    const dot = hasToggle ? 16 : 0;
+    const w = basePad + dot + label.length * charW;
+    return Math.min(200, Math.max(56, w));
+}
+/**
+ * Minimum distance from orbit center to pill center so the pill clears the round mascot bitmap.
+ */
+function minDistanceFromMascotCenter(mascotHalfPx, pillHalfW) {
+    const gap = 10;
+    const cornerReach = Math.hypot(pillHalfW, PILL_HALF_H);
+    return mascotHalfPx + gap + cornerReach;
+}
+/**
+ * Even ellipse; if a slot sits inside the mascot keep-out, scale **outward** along the same ray
+ * (`k ≥ 1`). We do **not** clamp X toward 0 — that was pulling pills **inward** onto Jammy.
+ * Edge overflow is handled by orbit radius + narrow column in `SeedMascot` / layout, not here.
+ */
+function layoutOrbitalEllipse(items, Rx, Ry, startAngle, stepRad, mascotSizePx) {
+    if (items.length === 0)
+        return [];
+    const mascotHalf = Math.max(0, mascotSizePx) / 2;
+    return items.map((item, i) => {
+        const angle = startAngle + i * stepRad;
+        const ux = Math.cos(angle) * Rx;
+        const uy = Math.sin(angle) * Ry;
+        const d0 = Math.hypot(ux, uy);
+        const halfW = estimatePillWidth(item) / 2;
+        const minDist = minDistanceFromMascotCenter(mascotHalf, halfW);
+        if (d0 < 1e-4) {
+            return { item, x: minDist, y: 0 };
+        }
+        const k = Math.max(1, minDist / d0);
+        const x = ux * k;
+        const y = uy * k;
+        return { item, x, y };
+    });
+}
+/**
+ * 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 function RadialMenu({ items, showClosing, mascotSizePx, orbitRadiusX, orbitRadiusY, mascotTranslateY, currentMenu, onItemClick, onBack, breadcrumb, showPageControls = false, onPagePrev, onPageNext, }) {
+    const rootRef = useRef(null);
+    const [containerW, setContainerW] = useState(375);
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const apply = () => setContainerW(Math.max(1, el.clientWidth));
+        apply();
+        const ro = new ResizeObserver(apply);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    if (items.length === 0)
+        return null;
+    // ── Separate south-pinned item from orbital items ─────────────────────────
+    const southItem = items.find(hasSouth) ?? null;
+    const orbitalItems = items.filter((item) => !hasSouth(item));
+    const totalSlots = orbitalItems.length + (southItem ? 1 : 0);
+    const slotStepRad = FULL_CIRCLE_RAD / totalSlots;
+    const orbitalStartAngle = southItem ? SOUTH_ANGLE_RAD + slotStepRad : SOUTH_ANGLE_RAD;
+    // South button (Start / Back) — always clearly wider than any orbital pill.
+    // Minimum 160px so it reads as the primary action even with few orbital items.
+    const MIN_SOUTH_WIDTH = 148;
+    const southWidth = Math.max(MIN_SOUTH_WIDTH, totalSlots <= 1
+        ? Math.min(Math.round(2 * orbitRadiusX * 1.05), containerW - 16)
+        : Math.min(Math.round(2 * orbitRadiusX * Math.sin(slotStepRad / 2) * 1.28), containerW - 16));
+    // Breadcrumb above south (Back): fixed ctr–ctr gap so it stays attached above the southmost pill.
+    const southButtonY = orbitRadiusY + 8;
+    const breadcrumbCenterY = southButtonY - 46;
+    const pageControlWidth = Math.max(56, Math.floor(southWidth * 0.5));
+    const pageControlY = southButtonY - 20;
+    const pageControlLeftX = -(southWidth / 2) + pageControlWidth / 2;
+    const pageControlRightX = (southWidth / 2) - pageControlWidth / 2;
+    const makeClickHandler = (item) => (e) => {
+        e.stopPropagation();
+        if (item.action === "back-action") {
+            onBack();
+        }
+        else {
+            onItemClick(item);
+        }
+    };
+    return (_jsx("div", { ref: rootRef, className: "pointer-events-none absolute inset-0 z-30 flex min-w-0 items-center justify-center", style: { transform: `translateY(${mascotTranslateY}px)` }, children: _jsxs("div", { className: "relative h-0 w-0", children: [breadcrumb ? (_jsx("div", { className: "pointer-events-auto absolute", style: {
+                        left: 0,
+                        top: breadcrumbCenterY,
+                        transform: "translate(-50%, -50%)",
+                        zIndex: 20,
+                    }, children: breadcrumb })) : null, (() => {
+                    const solved = layoutOrbitalEllipse(orbitalItems, orbitRadiusX, orbitRadiusY, orbitalStartAngle, slotStepRad, mascotSizePx);
+                    return solved.map(({ item, x, y }, i) => {
+                        const isDim = hasDim(item) && item._dim === true;
+                        const extraClass = isDim ? "opacity-40" : "";
+                        return (_jsx(RadialPill, { x: x, y: y, hiding: showClosing, children: renderItem(item, extraClass, makeClickHandler(item)) }, `${item.label}-${i}-${currentMenu}`));
+                    });
+                })(), southItem && (_jsx(RadialPill, { x: 0, y: southButtonY, hiding: showClosing, children: renderSouthItem(southItem, southWidth, makeClickHandler(southItem)) })), southItem && showPageControls && (_jsxs(_Fragment, { children: [_jsx(RadialPill, { x: pageControlLeftX, y: pageControlY, hiding: showClosing, children: _jsx(RadialButton, { label: "<", color: "blue", tooltip: "Previous page", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onPagePrev?.();
+                                }, style: { width: pageControlWidth } }) }), _jsx(RadialPill, { x: pageControlRightX, y: pageControlY, hiding: showClosing, children: _jsx(RadialButton, { label: ">", color: "blue", tooltip: "Next page", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onPageNext?.();
+                                }, style: { width: pageControlWidth } }) })] }))] }) }));
+}
+// ── South item renderer ───────────────────────────────────────────────────────
+function renderSouthItem(item, width, onClick) {
+    const variant = item.label === "Start" ? "start" : "back";
+    return (_jsx(RadialButton, { variant: variant, label: item.label, color: "orange", tooltip: item.tooltip, onClick: onClick, style: { width } }));
+}
+// ── Regular item renderer ─────────────────────────────────────────────────────
+function renderItem(item, className, onClick) {
+    // Badge (display-only)
+    if (item.badge) {
+        return (_jsx(RadialBadge, { label: item.badge.label, state: item.badge.state, color: item.color, tooltip: item.tooltip }));
+    }
+    // Toggle
+    if (isToggleItem(item)) {
+        return (_jsx(RadialButton, { variant: "toggle", label: item.label, active: item.active, disabled: item.disabled === true, color: item.color, tooltip: item.tooltip, className: className, onClick: onClick }));
+    }
+    // Count indicator (with icon or numeric count)
+    if (hasIcon(item)) {
+        return (_jsx(RadialButton, { variant: "count", label: item.label, count: 0, icon: item.icon, color: item.color, tooltip: item.tooltip, className: className, onClick: onClick }));
+    }
+    if (hasCount(item)) {
+        return (_jsx(RadialButton, { variant: "count", label: item.label, count: item.count, color: item.color, tooltip: item.tooltip, className: className, onClick: onClick }));
+    }
+    // Default action button
+    return (_jsx(RadialButton, { label: item.label, color: item.color, tooltip: item.tooltip, className: className, onClick: onClick }));
+}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import "./radial-navigation.css";
+export interface RadialPillProps {
+    /** Horizontal offset from center (px). */
+    x: number;
+    /** Vertical offset from center (px). */
+    y: number;
+    /** When true, pill collapses to center (exit animation). */
+    hiding: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Absolutely-positioned wrapper for a radial menu item.
+ *
+ * Uses CSS custom properties + a shared `@starting-style` rule
+ * instead of injecting per-instance `<style>` tags.
+ */
+export declare function RadialPill({ x, y, hiding, children }: RadialPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/radial/RadialPill.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./radial-navigation.css";
+/**
+ * Absolutely-positioned wrapper for a radial menu item.
+ *
+ * Uses CSS custom properties + a shared `@starting-style` rule
+ * instead of injecting per-instance `<style>` tags.
+ */
+export function RadialPill({ x, y, hiding, children }) {
+    return (_jsx("div", { className: "orbital-pill", "data-hiding": hiding ? "true" : "false", style: {
+            "--orbital-x": `${hiding ? 0 : x}px`,
+            "--orbital-y": `${hiding ? 0 : y}px`,
+        }, children: _jsx("span", { className: "orbital-pill-inner", children: children }) }));
+}

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

@@ -0,0 +1,16 @@
+export { RadialMenu } from "./RadialMenu";
+export type { RadialMenuProps } from "./RadialMenu";
+export { RadialPill } from "./RadialPill";
+export type { RadialPillProps } from "./RadialPill";
+export { RadialButton } from "./RadialButton";
+export type { RadialButtonProps, RadialButtonColor, RadialButtonActionProps, RadialButtonToggleProps, RadialButtonCountProps, RadialButtonBackProps, } from "./RadialButton";
+export { RadialBadge } from "./RadialBadge";
+export type { RadialBadgeProps, RadialBadgeState } from "./RadialBadge";
+export { RadialBreadcrumb } from "./RadialBreadcrumb";
+export type { RadialBreadcrumbProps } from "./RadialBreadcrumb";
+export { useRadialMenu } from "./useRadialMenu";
+export type { UseRadialMenuProps, RadialMenuState } from "./useRadialMenu";
+export { RadialButton as JimboRadialNavigationButton } from "./RadialButton";
+export { RadialBadge as JimboRadialNavigationBadge } from "./RadialBadge";
+export { RadialBreadcrumb as BreadcrumNavPill } from "./RadialBreadcrumb";
+export { RadialPill as JimboOrbitalPill } from "./RadialPill";

package/dist/ui/radial/index.js

@@ -0,0 +1,18 @@
+// Jimbo UI — Radial Navigation Module
+// Orbital/radial menu system for the Jammy mascot.
+// Layout
+export { RadialMenu } from "./RadialMenu";
+// Primitives
+export { RadialPill } from "./RadialPill";
+export { RadialButton } from "./RadialButton";
+export { RadialBadge } from "./RadialBadge";
+export { RadialBreadcrumb } from "./RadialBreadcrumb";
+// State hook
+export { useRadialMenu } from "./useRadialMenu";
+// ── Backwards-compatibility aliases ───────────────────────────────────────────
+// These match the old export names from the flat RadialNavigation.tsx file.
+// Consumers using the old names will keep working without import changes.
+export { RadialButton as JimboRadialNavigationButton } from "./RadialButton";
+export { RadialBadge as JimboRadialNavigationBadge } from "./RadialBadge";
+export { RadialBreadcrumb as BreadcrumNavPill } from "./RadialBreadcrumb";
+export { RadialPill as JimboOrbitalPill } from "./RadialPill";

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

@@ -0,0 +1,31 @@
+/** Clears pending close/navigate animation timeout (e.g. unmount). */
+export declare function clearRadialMenuTimers(): void;
+/** Full reset when `SeedMascot` unmounts — Zustand survives the component; hook `useState` did not. */
+export declare function resetRadialMenuState(): void;
+export interface RadialMenuNav {
+    stack: string[];
+    page: number;
+}
+interface RadialMenuSlice {
+    nav: RadialMenuNav;
+    breadcrumbStack: string[];
+    isClosing: boolean;
+    announcementPrimedForDismiss: boolean;
+    prevMaxScore: number;
+    prevResultCount: number;
+}
+export interface RadialMenuStore extends RadialMenuSlice {
+    open: (isWelcome: boolean) => void;
+    close: () => void;
+    back: () => void;
+    navigateTo: (submenuLabel: string) => void;
+    nextPage: (totalPages: number) => void;
+    prevPage: (totalPages: number) => void;
+    setAnnouncementPrimedForDismiss: (v: boolean) => void;
+    resetAnnouncementPrimed: () => void;
+    updateSeedResults: (seedResults: Array<{
+        score: number;
+    }>) => void;
+}
+export declare const useRadialMenuStore: import("zustand").UseBoundStore<import("zustand").StoreApi<RadialMenuStore>>;
+export {};

package/dist/ui/radial/radialMenuStore.js

@@ -0,0 +1,122 @@
+"use client";
+import { create } from "zustand";
+import { JIMBO_ANIMATIONS } from "../tokens";
+let closingTimer = null;
+/** Clears pending close/navigate animation timeout (e.g. unmount). */
+export function clearRadialMenuTimers() {
+    if (closingTimer !== null) {
+        clearTimeout(closingTimer);
+        closingTimer = null;
+    }
+}
+/** Full reset when `SeedMascot` unmounts — Zustand survives the component; hook `useState` did not. */
+export function resetRadialMenuState() {
+    clearRadialMenuTimers();
+    useRadialMenuStore.setState({
+        nav: { stack: [], page: 0 },
+        breadcrumbStack: [],
+        isClosing: false,
+        announcementPrimedForDismiss: false,
+    });
+}
+function armTimer(fn, ms) {
+    clearRadialMenuTimers();
+    closingTimer = setTimeout(() => {
+        closingTimer = null;
+        fn();
+    }, ms);
+}
+export const useRadialMenuStore = create((set, get) => ({
+    nav: { stack: [], page: 0 },
+    breadcrumbStack: [],
+    isClosing: false,
+    announcementPrimedForDismiss: false,
+    prevMaxScore: -1,
+    prevResultCount: 0,
+    resetAnnouncementPrimed: () => {
+        if (!get().announcementPrimedForDismiss)
+            return;
+        set({ announcementPrimedForDismiss: false });
+    },
+    setAnnouncementPrimedForDismiss: (v) => {
+        if (get().announcementPrimedForDismiss === v)
+            return;
+        set({ announcementPrimedForDismiss: v });
+    },
+    open: (isWelcome) => {
+        const { nav } = get();
+        const target = isWelcome ? "welcome" : "main";
+        // Guard: skip if already at the target root — avoids creating a new array
+        // reference that would trigger Zustand subscribers and cause infinite re-renders
+        // in effects that depend on the radial menu state object.
+        if (nav.stack.length === 1 && nav.stack[0] === target && nav.page === 0)
+            return;
+        set({ nav: { stack: [target], page: 0 } });
+    },
+    close: () => {
+        clearRadialMenuTimers();
+        set({ isClosing: true });
+        armTimer(() => {
+            set({ nav: { stack: [], page: 0 }, breadcrumbStack: [], isClosing: false });
+        }, JIMBO_ANIMATIONS.MENU_ORBIT_DURATION);
+    },
+    back: () => {
+        const stackBefore = get().nav.stack;
+        set((s) => ({ breadcrumbStack: s.breadcrumbStack.slice(0, -1) }));
+        if (stackBefore.length <= 1) {
+            get().close();
+            return;
+        }
+        clearRadialMenuTimers();
+        set({ isClosing: true });
+        armTimer(() => {
+            set((s) => ({
+                nav: { stack: s.nav.stack.slice(0, -1), page: 0 },
+                isClosing: false,
+            }));
+        }, JIMBO_ANIMATIONS.MENU_SINK_DURATION);
+    },
+    navigateTo: (submenuLabel) => {
+        clearRadialMenuTimers();
+        set((s) => ({
+            breadcrumbStack: [...s.breadcrumbStack, submenuLabel],
+            isClosing: true,
+        }));
+        armTimer(() => {
+            set((s) => ({
+                nav: { stack: [...s.nav.stack, submenuLabel], page: 0 },
+                isClosing: false,
+            }));
+        }, JIMBO_ANIMATIONS.MENU_SINK_DURATION);
+    },
+    nextPage: (totalPages) => set((s) => {
+        const pages = Math.max(1, totalPages);
+        const next = pages <= 1 ? 0 : (s.nav.page + 1) % pages;
+        return { nav: { ...s.nav, page: next } };
+    }),
+    prevPage: (totalPages) => set((s) => {
+        const pages = Math.max(1, totalPages);
+        const prev = pages <= 1 ? 0 : (s.nav.page - 1 + pages) % pages;
+        return { nav: { ...s.nav, page: prev } };
+    }),
+    updateSeedResults: (seedResults) => {
+        const state = get();
+        let shouldClose = false;
+        if (seedResults.length > 0) {
+            const currentMax = Math.max(...seedResults.map((r) => r.score));
+            if (currentMax > state.prevMaxScore) {
+                shouldClose = state.nav.stack.length > 1;
+            }
+        }
+        if (seedResults.length > 0 && seedResults.length > state.prevResultCount) {
+            shouldClose = shouldClose || state.nav.stack.length > 0;
+        }
+        set({
+            prevMaxScore: seedResults.length > 0 ? Math.max(...seedResults.map(r => r.score)) : -1,
+            prevResultCount: seedResults.length
+        });
+        if (shouldClose) {
+            get().close();
+        }
+    },
+}));

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

@@ -0,0 +1,6 @@
+export interface RadialViewportSnapshot {
+    baseRadius: number;
+    keyboardHeight: number;
+}
+/** Keyboard dodge + narrow-orbit radius — `useSyncExternalStore` (stable snapshot identity). */
+export declare function useRadialViewportGeometry(): RadialViewportSnapshot;

package/dist/ui/radial/radialMenuViewport.js

@@ -0,0 +1,59 @@
+"use client";
+import { useSyncExternalStore } from "react";
+/**
+ * React requires `getSnapshot` to return the **same object reference** when values are unchanged.
+ * A fresh `{ ... }` every call makes `useSyncExternalStore` think the store changed every render →
+ * maximum update depth. See: https://react.dev/reference/react/useSyncExternalStore
+ */
+const SERVER_SNAPSHOT = Object.freeze({
+    baseRadius: 66,
+    keyboardHeight: 0,
+});
+const clientCache = {
+    baseRadius: SERVER_SNAPSHOT.baseRadius,
+    keyboardHeight: SERVER_SNAPSHOT.keyboardHeight,
+};
+function getServerSnapshot() {
+    return SERVER_SNAPSHOT;
+}
+function readGeometry() {
+    if (typeof window === "undefined") {
+        return { baseRadius: 66, keyboardHeight: 0 };
+    }
+    const w = window.innerWidth;
+    const baseRadius = w < 375 ? 58 : 66;
+    const vv = window.visualViewport;
+    let keyboardHeight = 0;
+    if (vv) {
+        const raw = Math.max(0, window.innerHeight - vv.height);
+        keyboardHeight = raw > 100 ? raw * 0.6 : 0;
+    }
+    return { baseRadius, keyboardHeight };
+}
+function getSnapshot() {
+    if (typeof window === "undefined")
+        return SERVER_SNAPSHOT;
+    const { baseRadius, keyboardHeight } = readGeometry();
+    if (clientCache.baseRadius === baseRadius && clientCache.keyboardHeight === keyboardHeight) {
+        return clientCache;
+    }
+    clientCache.baseRadius = baseRadius;
+    clientCache.keyboardHeight = keyboardHeight;
+    return clientCache;
+}
+function subscribe(onStoreChange) {
+    if (typeof window === "undefined")
+        return () => { };
+    const run = () => onStoreChange();
+    const vv = window.visualViewport;
+    window.addEventListener("resize", run);
+    vv?.addEventListener("resize", run);
+    return () => {
+        window.removeEventListener("resize", run);
+        vv?.removeEventListener("resize", run);
+    };
+}
+/** Keyboard dodge + narrow-orbit radius — `useSyncExternalStore` (stable snapshot identity). */
+export function useRadialViewportGeometry() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

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

@@ -0,0 +1,35 @@
+export interface UseRadialMenuProps {
+    isWelcome: boolean;
+    announcementActive: boolean;
+    isTalking: boolean;
+    seedResults: {
+        seed: string;
+        score: number;
+    }[];
+    onDismissAnnouncement: () => void;
+}
+export interface RadialMenuState {
+    menuStack: string[];
+    breadcrumbStack: string[];
+    currentMenu: string;
+    isClosing: boolean;
+    showMenu: boolean;
+    showClosing: boolean;
+    showBack: boolean;
+    menuPage: number;
+    baseRadius: number;
+    keyboardHeight: number;
+    mascotTranslateY: number;
+    open: () => void;
+    close: () => void;
+    back: () => void;
+    navigateTo: (submenuLabel: string) => void;
+    nextPage: (totalPages: number) => void;
+    prevPage: (totalPages: number) => void;
+    handleTap: () => void;
+}
+/**
+ * Radial menu: **Zustand** (`useRadialMenuStore`) for stack / pagination / animations;
+ * **useSyncExternalStore** (`useRadialViewportGeometry`) for keyboard + narrow-width radius.
+ */
+export declare function useRadialMenu({ isWelcome, announcementActive, isTalking, seedResults, onDismissAnnouncement, }: UseRadialMenuProps): RadialMenuState;

package/dist/ui/radial/useRadialMenu.js

@@ -0,0 +1,107 @@
+"use client";
+import { useCallback, useEffect, useMemo } from "react";
+import { useRadialMenuStore } from "./radialMenuStore";
+import { useRadialViewportGeometry } from "./radialMenuViewport";
+/**
+ * Radial menu: **Zustand** (`useRadialMenuStore`) for stack / pagination / animations;
+ * **useSyncExternalStore** (`useRadialViewportGeometry`) for keyboard + narrow-width radius.
+ */
+export function useRadialMenu({ isWelcome, announcementActive, isTalking, seedResults, onDismissAnnouncement, }) {
+    const menuStack = useRadialMenuStore((s) => s.nav.stack);
+    const menuPage = useRadialMenuStore((s) => s.nav.page);
+    const breadcrumbStack = useRadialMenuStore((s) => s.breadcrumbStack);
+    const isClosing = useRadialMenuStore((s) => s.isClosing);
+    const storeOpen = useRadialMenuStore((s) => s.open);
+    const storeClose = useRadialMenuStore((s) => s.close);
+    const storeBack = useRadialMenuStore((s) => s.back);
+    const storeNavigateTo = useRadialMenuStore((s) => s.navigateTo);
+    const storeNextPage = useRadialMenuStore((s) => s.nextPage);
+    const storePrevPage = useRadialMenuStore((s) => s.prevPage);
+    const { baseRadius, keyboardHeight } = useRadialViewportGeometry();
+    useEffect(() => {
+        if (!announcementActive) {
+            useRadialMenuStore.getState().resetAnnouncementPrimed();
+        }
+    }, [announcementActive]);
+    const currentMenu = useMemo(() => (isWelcome ? "welcome" : menuStack.at(-1) ?? "main"), [isWelcome, menuStack]);
+    const showMenu = useMemo(() => !announcementActive && (menuStack.length > 0 || seedResults.length > 0) && !isClosing, [announcementActive, menuStack.length, seedResults.length, isClosing]);
+    const showClosing = useMemo(() => isClosing && menuStack.length > 0, [isClosing, menuStack.length]);
+    const showBack = useMemo(() => menuStack.length >= 1, [menuStack.length]);
+    const mascotTranslateY = useMemo(() => -keyboardHeight + 2, [keyboardHeight]);
+    const open = useCallback(() => {
+        storeOpen(isWelcome);
+    }, [isWelcome, storeOpen]);
+    const close = useCallback(() => {
+        storeClose();
+    }, [storeClose]);
+    const back = useCallback(() => {
+        storeBack();
+    }, [storeBack]);
+    const navigateTo = useCallback((submenuLabel) => {
+        storeNavigateTo(submenuLabel);
+    }, [storeNavigateTo]);
+    const nextPage = useCallback((totalPages) => {
+        storeNextPage(totalPages);
+    }, [storeNextPage]);
+    const prevPage = useCallback((totalPages) => {
+        storePrevPage(totalPages);
+    }, [storePrevPage]);
+    const handleTap = useCallback(() => {
+        const api = useRadialMenuStore.getState();
+        if (announcementActive) {
+            if (isTalking) {
+                return;
+            }
+            onDismissAnnouncement();
+            api.resetAnnouncementPrimed();
+            api.open(isWelcome);
+            return;
+        }
+        const menuIsOpen = api.nav.stack.length > 0;
+        if (!menuIsOpen && !api.isClosing) {
+            api.open(isWelcome);
+        }
+        else {
+            api.close();
+        }
+    }, [announcementActive, isTalking, isWelcome, onDismissAnnouncement]);
+    return useMemo(() => ({
+        menuStack,
+        breadcrumbStack,
+        currentMenu,
+        isClosing,
+        showMenu,
+        showClosing,
+        showBack,
+        menuPage,
+        baseRadius,
+        keyboardHeight,
+        mascotTranslateY,
+        open,
+        close,
+        back,
+        navigateTo,
+        nextPage,
+        prevPage,
+        handleTap,
+    }), [
+        menuStack,
+        breadcrumbStack,
+        currentMenu,
+        isClosing,
+        showMenu,
+        showClosing,
+        showBack,
+        menuPage,
+        baseRadius,
+        keyboardHeight,
+        mascotTranslateY,
+        open,
+        close,
+        back,
+        navigateTo,
+        nextPage,
+        prevPage,
+        handleTap,
+    ]);
+}

package/dist/ui/showcase.d.ts

@@ -1,8 +1,9 @@
+import { type JimboSectionTone } from './jimboSectionHeader.js';
 export interface ShowcaseFilter {
     name: string;
     author: string;
     hits: string;
-    tone: 'blue' | 'red' | 'gold' | 'green';
+    tone: JimboSectionTone;
     sample: string[];
 }
 export interface ShowcaseRecentFind {
@@ -15,16 +16,23 @@ export interface ShowcaseLiveStats {
     matches: string;
     speed: string;
 }
+export interface ShowcaseMcpInfo {
+    runtime: string;
+    engine: string;
+    features: string;
+}
 export interface ShowcaseProps {
+    title?: string;
+    subtitle?: string;
     hotFilters?: ShowcaseFilter[];
     recentFinds?: ShowcaseRecentFind[];
-    stats?: ShowcaseLiveStats;
+    mcpInfo?: ShowcaseMcpInfo;
     onNewSearch?: () => void;
     onBrowseFilters?: () => void;
-    onBack?: () => void;
+    onFilterClick?: (filter: ShowcaseFilter, index: number) => void;
 }
 /**
- * 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 declare function Showcase({ hotFilters, recentFinds, stats, onNewSearch, onBrowseFilters, onBack, }: ShowcaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function Showcase({ title, subtitle, hotFilters, recentFinds, mcpInfo, onNewSearch, onBrowseFilters, onFilterClick, }: ShowcaseProps): import("react/jsx-runtime").JSX.Element;