create-pixi-vn 2.0.13 → 2.0.15

package/template-react-vite-muijoy/package.json

@@ -18,22 +18,15 @@
     "ui:reinit": "npx shadcn@latest init -f -b base --reinstall && npm run format"
   },
   "dependencies": {
-    "@base-ui/react": "^1.5.0",
-    "@drincs/pixi-vn": "^1.8.13",
-    "@drincs/pixi-vn-spine": "^0.2.1",
+    "@base-ui/react": "^1.6.0",
+    "@drincs/pixi-vn": "^1.8.16",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/hotkeys": "^0.8.0",
-    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-hotkeys": "^0.10.0",
-    "@tanstack/react-hotkeys-devtools": "^0.7.0",
     "@tanstack/react-pacer": "^0.22.1",
-    "@tanstack/react-pacer-devtools": "^0.7.1",
     "@tanstack/react-query": "latest",
-    "@tanstack/react-query-devtools": "latest",
     "@tanstack/react-router": "latest",
-    "@tanstack/react-router-devtools": "latest",
     "@tanstack/react-store": "latest",
-    "@tanstack/router-plugin": "latest",
     "@tanstack/store": "latest",
     "@unpic/react": "^1.0.2",
     "class-variance-authority": "^0.7.1",
@@ -43,18 +36,18 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-chained-backend": "^5.0.4",
     "i18next-resources-to-backend": "^1.2.1",
-    "lucide-react": "^1.17.0",
+    "lucide-react": "^1.21.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.6",
     "react-color-palette": "^7.3.1",
     "react-dom": "^19.2.6",
     "react-i18next": "^17.0.8",
     "react-markdown": "^10.1.0",
-    "react-markdown-typewriter": "^1.2.0",
+    "react-markdown-typewriter": "^1.3.4",
     "react-resizable-panels": "^4.11.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "shadcn": "^4.10.0",
+    "shadcn": "^4.11.0",
     "shade-generator": "^1.2.7",
     "sonner": "^2.0.7",
     "tailwind-animations": "^1.0.1",
@@ -68,6 +61,12 @@
     "@biomejs/biome": "latest",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/devtools-vite": "latest",
+    "@tanstack/react-devtools": "^0.10.7",
+    "@tanstack/react-hotkeys-devtools": "^0.7.0",
+    "@tanstack/react-pacer-devtools": "^0.7.1",
+    "@tanstack/react-query-devtools": "latest",
+    "@tanstack/react-router-devtools": "latest",
+    "@tanstack/router-plugin": "latest",
     "@types/node": "^25.9.1",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/template-react-vite-muijoy/src/components/dev-devtools.tsx

@@ -0,0 +1,25 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { hotkeysDevtoolsPlugin } from "@tanstack/react-hotkeys-devtools";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+
+export default function DevDevtools() {
+    return (
+        <TanStackDevtools
+            config={{
+                position: "bottom-right",
+            }}
+            plugins={[
+                {
+                    name: "UI screens",
+                    render: <TanStackRouterDevtoolsPanel />,
+                },
+                { ...hotkeysDevtoolsPlugin(), name: "Hotkeys" },
+                {
+                    name: "UI cache",
+                    render: <ReactQueryDevtoolsPanel />,
+                },
+            ]}
+        />
+    );
+}

package/template-react-vite-muijoy/src/components/loading.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from "@/components/ui/spinner";
+import { useEffect, useState } from "react";
 
 export function PendingComponent() {
     return (
@@ -12,10 +13,19 @@ export function PendingComponent() {
 
 export function AnimatedDots() {
     return (
-        <span className="flex pointer-events-none select-none">
+        <span className="inline-flex pointer-events-none select-none">
             <span className="animate-bounce [animation-delay:0s]">.</span>
             <span className="animate-bounce [animation-delay:0.2s]">.</span>
             <span className="animate-bounce [animation-delay:0.4s]">.</span>
         </span>
     );
 }
+
+export function DelayedAnimatedDots({ delay = 300 }: { delay?: number }) {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const id = setTimeout(() => setVisible(true), delay);
+        return () => clearTimeout(id);
+    }, [delay]);
+    return visible ? <AnimatedDots /> : null;
+}

package/template-react-vite-muijoy/src/components/menus/choice-menus.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { useChoiceMenuHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
 import { useQueryChoiceMenuOptions } from "@/lib/query/narration-query";
 import { GameStatus } from "@/lib/stores/game-status-store";
@@ -13,9 +14,11 @@ export function ChoiceMenu() {
     const isTyping = useSelector(TextDisplaySettings.store, (state) => state.inProgress);
     const { selectChoice } = useNarrationFunctions();
     const [debouncedMenu] = useDebouncedValue(isTyping ? [] : menu, { wait: 50 });
+    const { menuRef } = useChoiceMenuHotkeys(debouncedMenu.length);
 
     return (
         <div
+            ref={menuRef}
             className="flex flex-col items-center justify-center gap-2 w-full h-full overflow-auto"
             role="menu"
         >
@@ -28,6 +31,7 @@ export function ChoiceMenu() {
                     style={{ animationDelay: `${index * 150}ms` }}
                 >
                     <Button
+                        role="menuitem"
                         disabled={loading}
                         onClick={() => selectChoice(item)}
                         size="sm"

package/template-react-vite-muijoy/src/components/menus/main-menu.tsx

@@ -26,7 +26,6 @@ const menuButtonClass =
     "justify-start hover:scale-105 focus-visible:scale-105 transition-transform duration-150 ease-out";
 
 export function MainMenu() {
-    const queryClient = useQueryClient();
     const gameProps = useGameProps();
     const { uiTransition: t, navigate } = gameProps;
     const setSettings = useSetSearchParamState<boolean>("settings");
@@ -147,11 +146,7 @@ export function MainMenu() {
                             setLoading(true);
                             await navigate({ to: "/game/narration" });
                             Game.start("start", gameProps)
-                                .then(() =>
-                                    queryClient.invalidateQueries({
-                                        queryKey: [INTERFACE_DATA_USE_QUERY_KEY],
-                                    }),
-                                )
+                                .then(() => gameProps.invalidateInterfaceData())
                                 .finally(() => setLoading(false));
                         }}
                         disabled={loading}

package/template-react-vite-muijoy/src/components/menus/settings/index.tsx

@@ -208,7 +208,9 @@ export function SettingsDialogue() {
             onOpenChange={(isOpen) => {
                 setOpen(isOpen || undefined);
                 if (!isOpen) {
-                    setSettingsTab(undefined);
+                    // Delay clearing the tab until after the 100ms close animation
+                    // to avoid briefly flashing the main settings view during close.
+                    setTimeout(() => setSettingsTab(undefined), 150);
                 }
             }}
         >

package/template-react-vite-muijoy/src/components/menus/settings/menus/history.tsx

@@ -15,7 +15,7 @@ import { useQueryNarrativeHistory } from "@/lib/query/narration-query";
 import { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
 import { Check, Search } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
@@ -33,80 +33,96 @@ function HistoryItemAvatar({ icon, character }: { icon?: string; character: stri
 
 export function HistoryList({ searchString }: { searchString?: string }) {
     const { data = [] } = useQueryNarrativeHistory({ searchString });
+    const bottomRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (data.length > 0) {
+            bottomRef.current?.scrollIntoView();
+        }
+    }, [data]);
 
     return (
-        <ItemGroup>
-            {data.map((item, index) => {
-                const key = `${item.character ?? "unknown"}-${item.text}-${index}`;
-                return (
-                    <Item key={key} variant="outline">
-                        {item.character && (
-                            <ItemMedia variant="image">
-                                <HistoryItemAvatar icon={item.icon} character={item.character} />
-                            </ItemMedia>
-                        )}
-                        <ItemContent
-                            className={!item.character ? "items-center text-center" : undefined}
-                        >
-                            {item.character && <ItemTitle>{item.character}</ItemTitle>}
-                            <Markdown
-                                remarkPlugins={[remarkGfm]}
-                                rehypePlugins={[rehypeRaw]}
-                                components={{
-                                    p: ({ children, id }) => (
-                                        <p key={id} className="m-0 text-sm text-muted-foreground">
-                                            {children}
-                                        </p>
-                                    ),
-                                }}
+        <>
+            <ItemGroup>
+                {data.map((item, index) => {
+                    const key = `${item.character ?? "unknown"}-${item.text}-${index}`;
+                    return (
+                        <Item key={key} variant="outline">
+                            {item.character && (
+                                <ItemMedia variant="image">
+                                    <HistoryItemAvatar
+                                        icon={item.icon}
+                                        character={item.character}
+                                    />
+                                </ItemMedia>
+                            )}
+                            <ItemContent
+                                className={!item.character ? "items-center text-center" : undefined}
                             >
-                                {item.text}
-                            </Markdown>
-                        </ItemContent>
-                        {(item.choices?.some((c) => !c.hidden) || item.inputValue) && (
-                            <ItemFooter className="flex-wrap justify-start gap-1.5">
-                                {item.choices?.map((choice) => {
-                                    const choiceKey = `${choice.text}-${choice.isResponse ? "1" : "0"}-${choice.hidden ? "1" : "0"}`;
-                                    if (choice.hidden) {
-                                        return null;
-                                    }
-                                    if (choice.isResponse) {
+                                {item.character && <ItemTitle>{item.character}</ItemTitle>}
+                                <Markdown
+                                    remarkPlugins={[remarkGfm]}
+                                    rehypePlugins={[rehypeRaw]}
+                                    components={{
+                                        p: ({ children, id }) => (
+                                            <p
+                                                key={id}
+                                                className="m-0 text-sm text-muted-foreground"
+                                            >
+                                                {children}
+                                            </p>
+                                        ),
+                                    }}
+                                >
+                                    {item.text}
+                                </Markdown>
+                            </ItemContent>
+                            {(item.choices?.some((c) => !c.hidden) || item.inputValue) && (
+                                <ItemFooter className="flex-wrap justify-center gap-1.5">
+                                    {item.choices?.map((choice) => {
+                                        const choiceKey = `${choice.text}-${choice.isResponse ? "1" : "0"}-${choice.hidden ? "1" : "0"}`;
+                                        if (choice.hidden) {
+                                            return null;
+                                        }
+                                        if (choice.isResponse) {
+                                            return (
+                                                <Kbd
+                                                    key={`choices-success-${choiceKey}`}
+                                                    className={cn(
+                                                        "h-auto border px-2 py-1",
+                                                        "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+                                                    )}
+                                                >
+                                                    {choice.text}
+                                                    <Check className="size-3" />
+                                                </Kbd>
+                                            );
+                                        }
                                         return (
                                             <Kbd
-                                                key={`choices-success-${choiceKey}`}
+                                                key={`choices-${choiceKey}`}
                                                 className={cn(
                                                     "h-auto border px-2 py-1",
-                                                    "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+                                                    "border-primary/30 bg-primary/10 text-primary",
                                                 )}
                                             >
                                                 {choice.text}
-                                                <Check className="size-3" />
                                             </Kbd>
                                         );
-                                    }
-                                    return (
-                                        <Kbd
-                                            key={`choices-${choiceKey}`}
-                                            className={cn(
-                                                "h-auto border px-2 py-1",
-                                                "border-primary/30 bg-primary/10 text-primary",
-                                            )}
-                                        >
-                                            {choice.text}
+                                    })}
+                                    {item.inputValue && (
+                                        <Kbd className="h-auto px-2 py-1">
+                                            {item.inputValue.toString()}
                                         </Kbd>
-                                    );
-                                })}
-                                {item.inputValue && (
-                                    <Kbd className="h-auto px-2 py-1">
-                                        {item.inputValue.toString()}
-                                    </Kbd>
-                                )}
-                            </ItemFooter>
-                        )}
-                    </Item>
-                );
-            })}
-        </ItemGroup>
+                                    )}
+                                </ItemFooter>
+                            )}
+                        </Item>
+                    );
+                })}
+            </ItemGroup>
+            <div ref={bottomRef} />
+        </>
     );
 }
 

package/template-react-vite-muijoy/src/components/modals/input-request-dialogues.tsx

@@ -14,7 +14,7 @@ import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
 export function InputRequestDialog() {
-    const { data: { animatedText: text } = {} } = useQueryDialogue();
+    const { data: { lastText: text } = {} } = useQueryDialogue();
     const {
         data: { isRequired, type, currentValue } = { currentValue: undefined, isRequired: false },
     } = useQueryInputValue<string | number>();

package/template-react-vite-muijoy/src/components/modals/quick-actions-wheel.tsx

@@ -223,7 +223,9 @@ function QuickActionsWheelContent({
                         >
                             <span className="font-semibold">{registration.label}</span>
                             <span className="text-[11px] opacity-85">
-                                {registration.hotkeyLabel}
+                                {registration.hotkeyLabel.length > 15
+                                    ? `${registration.hotkeyLabel.slice(0, 12)}…`
+                                    : registration.hotkeyLabel}
                             </span>
                         </button>
                     );

package/template-react-vite-muijoy/src/components/providers/alert-dialog-provider.tsx

@@ -1,3 +1,4 @@
+import { AlertDialogState } from "@/lib/stores/alert-dialog-store";
 import { createContext, type ReactNode, useCallback, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -47,6 +48,7 @@ export function AlertDialogProvider({ children }: { children: ReactNode }) {
 
     const closeDialog = useCallback((id: string) => {
         setDialogs((prev) => prev.map((d) => (d.id === id ? { ...d, open: false } : d)));
+        AlertDialogState.decrement();
         setTimeout(() => {
             setDialogs((prev) => prev.filter((d) => d.id !== id));
         }, DIALOG_CLOSE_ANIMATION_DURATION_MS);
@@ -54,6 +56,7 @@ export function AlertDialogProvider({ children }: { children: ReactNode }) {
 
     const openAlertDialog = useCallback((options: AlertDialogOptions) => {
         const id = generateId();
+        AlertDialogState.increment();
         setDialogs((prev) => [...prev, { id, open: true, loading: false, options }]);
     }, []);
 

package/template-react-vite-muijoy/src/components/screens/narration/index.tsx

@@ -1,10 +1,12 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
 import { NarrationCards } from "@/components/screens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { QuickTools } from "@/components/quick-tools";
 import { useQueryDialogue } from "@/lib/query/narration-query";
 
 export function NarrationScreen() {
     const { data: { animatedText, text } = {} } = useQueryDialogue();
+    const hasText = !!(animatedText || text);
 
     return (
         <div className="absolute flex h-full w-full flex-col">
@@ -13,17 +15,18 @@ export function NarrationScreen() {
                     <ResizablePanel>
                         <ChoiceMenu />
                     </ResizablePanel>
-                    {(animatedText || text) && (
+                    {hasText && (
                         <div className="mx-4">
                             <ResizableHandle />
                         </div>
                     )}
-                    {(animatedText || text) && (
+                    {hasText && (
                         <ResizablePanel defaultSize={"40%"}>
                             <NarrationCards />
                         </ResizablePanel>
                     )}
                 </ResizablePanelGroup>
+                {!hasText && <QuickTools />}
             </div>
         </div>
     );

package/template-react-vite-muijoy/src/components/screens/narration/narration-cards.tsx

@@ -1,4 +1,4 @@
-import { AnimatedDots } from "@/components/loading";
+import { DelayedAnimatedDots } from "@/components/loading";
 import { QuickTools } from "@/components/quick-tools";
 import { Card, CardContent } from "@/components/ui/card";
 import { Image } from "@/components/ui/image";
@@ -8,7 +8,7 @@ import { useNarrationPointerHandlers } from "@/lib/hooks/narration-hooks";
 import { useQueryDialogue } from "@/lib/query/narration-query";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { useSelector } from "@tanstack/react-store";
-import { type RefObject, useCallback, useRef } from "react";
+import { type RefObject, memo, useCallback, useMemo, useRef } from "react";
 import Markdown from "react-markdown";
 import { MarkdownTypewriterHooks } from "react-markdown-typewriter";
 import rehypeRaw from "rehype-raw";
@@ -63,9 +63,13 @@ export function NarrationCards() {
     );
 }
 
-export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement | null> }) {
+export const Text = memo(function Text({
+    paragraphRef,
+}: {
+    paragraphRef: RefObject<HTMLDivElement | null>;
+}) {
     const typewriterDelay = useSelector(TextDisplaySettings.store, (state) => state.delay);
-    const { data: { animatedText, text } = {} } = useQueryDialogue();
+    const { data: { animatedText, text } = {}, finalizeDialogue } = useQueryDialogue();
 
     const handleCharacterAnimationComplete = useCallback(
         (ref: { current: HTMLSpanElement | null }) => {
@@ -74,7 +78,6 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
             if (container && char) {
                 const containerRect = container.getBoundingClientRect();
                 const charRect = char.getBoundingClientRect();
-                // Position of the character relative to the top of the scroll container
                 const charOffsetInContainer =
                     charRect.top - containerRect.top + container.scrollTop;
                 const scrollTop = charOffsetInContainer - container.clientHeight / 2;
@@ -87,15 +90,40 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
         [paragraphRef],
     );
 
+    const markdownComponents = useMemo(() => ({ p: (props: object) => <span {...props} /> }), []);
+
+    const motionProps = useMemo(
+        () => ({
+            onAnimationStart: TextDisplaySettings.start,
+            onAnimationComplete: (definition: "visible" | "hidden") => {
+                if (definition === "visible") {
+                    finalizeDialogue();
+                    TextDisplaySettings.end();
+                }
+            },
+            onCharacterAnimationComplete: handleCharacterAnimationComplete,
+        }),
+        [finalizeDialogue, handleCharacterAnimationComplete],
+    );
+
+    const specialCharacters = useMemo(
+        () => ({
+            ".": { delayAfter: typewriterDelay + 300 },
+            "!": { delayAfter: typewriterDelay + 300 },
+            "?": { delayAfter: typewriterDelay + 300 },
+            ",": { delayAfter: typewriterDelay + 75 },
+            ":": { delay: typewriterDelay + 50, delayAfter: typewriterDelay + 150 },
+        }),
+        [typewriterDelay],
+    );
+
     return (
         <p className="prose dark:prose-invert m-0 max-w-full p-0">
             <span>
                 <Markdown
                     remarkPlugins={[remarkGfm]}
                     rehypePlugins={[rehypeRaw]}
-                    components={{
-                        p: (props) => <span {...props} />,
-                    }}
+                    components={markdownComponents}
                 >
                     {text}
                 </Markdown>
@@ -106,23 +134,16 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
                     remarkPlugins={[remarkGfm]}
                     rehypePlugins={[rehypeRaw]}
                     delay={typewriterDelay}
-                    motionProps={{
-                        onAnimationStart: TextDisplaySettings.start,
-                        onAnimationComplete: (definition: "visible" | "hidden") => {
-                            if (definition === "visible") {
-                                TextDisplaySettings.end();
-                            }
-                        },
-                        onCharacterAnimationComplete: handleCharacterAnimationComplete,
-                    }}
-                    fallback={<AnimatedDots />}
+                    motionProps={motionProps}
+                    fallback={<DelayedAnimatedDots />}
+                    specialCharacters={specialCharacters}
                 >
                     {animatedText}
                 </MarkdownTypewriterHooks>
             </span>
         </p>
     );
-}
+});
 
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (

package/template-react-vite-muijoy/src/components/ui/alert-dialog.tsx

@@ -1,7 +1,8 @@
+import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
+
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
     return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;

package/template-react-vite-muijoy/src/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
+import * as React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -88,4 +88,4 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
     );
 }
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/template-react-vite-muijoy/src/components/ui/breadcrumb.tsx

@@ -1,8 +1,9 @@
-import { cn } from "@/lib/utils";
+import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "@/lib/utils";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import type * as React from "react";
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
     return (
@@ -93,10 +94,10 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span"
 
 export {
     Breadcrumb,
-    BreadcrumbEllipsis,
+    BreadcrumbList,
     BreadcrumbItem,
     BreadcrumbLink,
-    BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator,
+    BreadcrumbEllipsis,
 };

package/template-react-vite-muijoy/src/components/ui/button-group.tsx

@@ -1,9 +1,10 @@
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
 
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
 const buttonGroupVariants = cva(
     "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
     {

package/template-react-vite-muijoy/src/components/ui/button.tsx

@@ -8,11 +8,11 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+                default: "bg-primary text-primary-foreground hover:bg-primary/80",
                 outline:
                     "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
                 secondary:
-                    "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+                    "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
                 ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
                 destructive:
                     "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",