create-pixi-vn 2.0.13 → 2.0.15

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

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -12,7 +12,7 @@ function Card({
             data-slot="card"
             data-size={size}
             className={cn(
-                "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+                "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
                 className,
             )}
             {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
         <div
             data-slot="card-header"
             className={cn(
-                "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+                "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
                 className,
             )}
             {...props}
@@ -71,11 +71,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
     return (
-        <div
-            data-slot="card-content"
-            className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
-            {...props}
-        />
+        <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
     );
 }
 
@@ -84,7 +80,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
         <div
             data-slot="card-footer"
             className={cn(
-                "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+                "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
                 className,
             )}
             {...props}
@@ -92,4 +88,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     );
 }
 
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

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

@@ -1,8 +1,11 @@
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+"use client";
+
 import * as React from "react";
-import { Button } from "@/components/ui/button";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -177,7 +180,7 @@ function CarouselPrevious({
             className={cn(
                 "absolute touch-manipulation rounded-full",
                 orientation === "horizontal"
-                    ? "top-1/2 -left-12 -translate-y-1/2"
+                    ? "inset-y-0 -left-12 my-auto"
                     : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
                 className,
             )}
@@ -207,7 +210,7 @@ function CarouselNext({
             className={cn(
                 "absolute touch-manipulation rounded-full",
                 orientation === "horizontal"
-                    ? "top-1/2 -right-12 -translate-y-1/2"
+                    ? "inset-y-0 -right-12 my-auto"
                     : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
                 className,
             )}
@@ -222,11 +225,11 @@ function CarouselNext({
 }
 
 export {
-    Carousel,
     type CarouselApi,
+    Carousel,
     CarouselContent,
     CarouselItem,
-    CarouselNext,
     CarouselPrevious,
+    CarouselNext,
     useCarousel,
 };

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

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 

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

@@ -1,8 +1,11 @@
-import { cva, type VariantProps } from "class-variance-authority";
+"use client";
+
 import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
     return (
@@ -111,7 +114,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
         <div
             data-slot="field-label"
             className={cn(
-                "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+                "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
                 className,
             )}
             {...props}
@@ -214,13 +217,13 @@ function FieldError({
 
 export {
     Field,
-    FieldContent,
+    FieldLabel,
     FieldDescription,
     FieldError,
     FieldGroup,
-    FieldLabel,
     FieldLegend,
     FieldSeparator,
     FieldSet,
+    FieldContent,
     FieldTitle,
 };

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

@@ -1,9 +1,10 @@
+import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+
+import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
     return (
@@ -138,7 +139,7 @@ export {
     InputGroup,
     InputGroupAddon,
     InputGroupButton,
-    InputGroupInput,
     InputGroupText,
+    InputGroupInput,
     InputGroupTextarea,
 };

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

@@ -1,5 +1,5 @@
+import * as React from "react";
 import { Input as InputPrimitive } from "@base-ui/react/input";
-import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

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

@@ -1,9 +1,10 @@
-import { Separator } from "@/components/ui/separator";
-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 { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
     return (
@@ -178,13 +179,13 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 export {
     Item,
-    ItemActions,
+    ItemMedia,
     ItemContent,
-    ItemDescription,
-    ItemFooter,
+    ItemActions,
     ItemGroup,
-    ItemHeader,
-    ItemMedia,
     ItemSeparator,
     ItemTitle,
+    ItemDescription,
+    ItemHeader,
+    ItemFooter,
 };

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

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 

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

@@ -1,7 +1,10 @@
-import { cn } from "@/lib/utils";
+"use client";
+
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 
+import { cn } from "@/lib/utils";
+
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
     return (
         <RadioGroupPrimitive

package/template-react-vite-muijoy-tauri/src/components/ui/scroll-area.tsx

@@ -1,7 +1,11 @@
+"use client";
+
+import * as React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
 import { cn } from "@/lib/utils";
 
-function ScrollArea({ className, children, ref, ...props }: ScrollAreaPrimitive.Root.Props) {
+function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
     return (
         <ScrollAreaPrimitive.Root
             data-slot="scroll-area"
@@ -9,7 +13,6 @@ function ScrollArea({ className, children, ref, ...props }: ScrollAreaPrimitive.
             {...props}
         >
             <ScrollAreaPrimitive.Viewport
-                ref={ref}
                 data-slot="scroll-area-viewport"
                 className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
             >

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

@@ -1,7 +1,8 @@
+import * as React from "react";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import type * as React from "react";
+
 import { cn } from "@/lib/utils";
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 
 const Select = SelectPrimitive.Root;
 

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 
 import { cn } from "@/lib/utils";

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

@@ -1,12 +1,12 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 import {
     CircleCheckIcon,
     InfoIcon,
-    Loader2Icon,
-    OctagonXIcon,
     TriangleAlertIcon,
+    OctagonXIcon,
+    Loader2Icon,
 } from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
     const { theme = "system" } = useTheme();

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

@@ -1,9 +1,10 @@
-import { Loader2Icon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Loader2Icon } from "lucide-react";
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
     return (
         <Loader2Icon
+            data-slot="spinner"
             role="status"
             aria-label="Loading"
             className={cn("size-4 animate-spin", className)}

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

@@ -1,4 +1,7 @@
+"use client";
+
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
 import { cn } from "@/lib/utils";
 
 function Switch({

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

@@ -1,4 +1,5 @@
-import type * as React from "react";
+import * as React from "react";
+
 import { cn } from "@/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 
 import { cn } from "@/lib/utils";

package/template-react-vite-muijoy-tauri/src/lib/hooks/hotkeys-hooks.ts

@@ -2,22 +2,47 @@ import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
 import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
-import { useQueryInputValue } from "@/lib/query/narration-query";
+import { useQueryCanGoNext, useQueryInputValue } from "@/lib/query/narration-query";
 import {
     LAST_SAVE_USE_QUERY_KEY,
     SAVES_USE_QUERY_KEY,
     useQueryLastSave,
 } from "@/lib/query/save-query";
+import { AlertDialogState } from "@/lib/stores/alert-dialog-store";
 import { QuickActionsWheelState } from "@/lib/stores/quick-actions-wheel-store";
+import { SearchParams } from "@/lib/stores/search-param-store";
 import { SkipSettings } from "@/lib/stores/skip-settings-store";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { loadSave, saveGameToIndexDB } from "@/lib/utils/save-utility";
+import { narration } from "@drincs/pixi-vn";
 import { useHotkeys } from "@tanstack/react-hotkeys";
 import { useQueryClient } from "@tanstack/react-query";
 import { useLocation } from "@tanstack/react-router";
-import { useCallback } from "react";
+import { useSelector } from "@tanstack/react-store";
+import { useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
+function useMenuDialogState() {
+    const searchParams = useSelector(SearchParams.store, (state) => state);
+    const alertDialogCount = useSelector(AlertDialogState.store, (state) => state.count);
+    const { data: { isRequired } = {} } = useQueryInputValue<string | number>();
+
+    /** true when the settings menu (or any sub-page) is open */
+    const isSettingsOpen = useMemo(
+        () => Object.values(searchParams).some((v) => v !== undefined),
+        [searchParams],
+    );
+
+    /** true when an alert confirmation dialog or the input-request dialog is blocking interaction */
+    const isAlertOrInputOpen = alertDialogCount > 0 || !!isRequired;
+
+    /** true when any menu or dialog that should disable hotkeys is open */
+    const isAnyMenuOrDialogOpen = isSettingsOpen || isAlertOrInputOpen;
+
+    return { isAnyMenuOrDialogOpen, isSettingsOpen, isAlertOrInputOpen };
+}
+
 /**
  * useSaveHotkeys
  *
@@ -40,6 +65,7 @@ export function useSaveHotkeys(): null {
     const { data: lastSave = null } = useQueryLastSave();
     const { openAlertDialog } = useAlertDialog();
     const gameProps = useGameProps();
+    const { isSettingsOpen } = useMenuDialogState();
 
     const quickSave = useCallback(() => {
         if (location.pathname === "/") {
@@ -87,6 +113,7 @@ export function useSaveHotkeys(): null {
             hotkey: "F5",
             callback: quickSave,
             options: {
+                enabled: !isSettingsOpen,
                 meta: {
                     name: t("quick_save"),
                     description: t("quick_save_hotkey_description"),
@@ -97,6 +124,7 @@ export function useSaveHotkeys(): null {
             hotkey: "Control+S",
             callback: quickSave,
             options: {
+                enabled: !isSettingsOpen,
                 meta: {
                     name: t("quick_save"),
                     description: t("quick_save_hotkey_alternative_description"),
@@ -107,6 +135,7 @@ export function useSaveHotkeys(): null {
             hotkey: "F9",
             callback: quickLoad,
             options: {
+                enabled: !isSettingsOpen,
                 meta: {
                     name: t("load_last_save"),
                     description: t("quick_load_hotkey_description"),
@@ -117,6 +146,7 @@ export function useSaveHotkeys(): null {
             hotkey: "Control+L",
             callback: quickLoad,
             options: {
+                enabled: !isSettingsOpen,
                 meta: {
                     name: t("load_last_save"),
                     description: t("quick_load_hotkey_alternative_description"),
@@ -132,6 +162,7 @@ export function useSettingsHotkeys(): null {
     const { t } = useTranslation(["ui"]);
     const setSettingsOpen = useSetSearchParamState<boolean>("settings");
     const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+    const { isAnyMenuOrDialogOpen } = useMenuDialogState();
 
     const openControlsPage = useCallback(() => {
         setSettingsOpen(true);
@@ -150,9 +181,10 @@ export function useSettingsHotkeys(): null {
             },
         },
         {
-            hotkey: "Control+K",
+            hotkey: "K",
             callback: openControlsPage,
             options: {
+                enabled: !isAnyMenuOrDialogOpen,
                 meta: {
                     name: t("hotkeys_menu"),
                     description: t("hotkeys_menu_shortcut_description"),
@@ -169,6 +201,7 @@ export function useGameHotkeys(): null {
     const setSettingsTab = useSetSearchParamState<string>("settings_tab");
     const setHistory = useSetSearchParamState<boolean>("history");
     const { t } = useTranslation(["ui"]);
+    const { isAnyMenuOrDialogOpen } = useMenuDialogState();
 
     const openHistoryPage = useCallback(() => {
         setHistory(undefined);
@@ -187,9 +220,10 @@ export function useGameHotkeys(): null {
 
     useHotkeys([
         {
-            hotkey: "Control+H",
+            hotkey: "H",
             callback: openHistoryPage,
             options: {
+                enabled: !isAnyMenuOrDialogOpen,
                 meta: {
                     name: t("history"),
                     description: t("history_hotkey_description"),
@@ -200,6 +234,7 @@ export function useGameHotkeys(): null {
             hotkey: "Tab",
             callback: toggleQuickActionsWheel,
             options: {
+                enabled: !isAnyMenuOrDialogOpen,
                 meta: {
                     name: t("quick_actions"),
                     description: t("quick_actions_open_description"),
@@ -211,38 +246,104 @@ export function useGameHotkeys(): null {
     return null;
 }
 
+export function useChoiceMenuHotkeys(menuLength: number) {
+    const { t } = useTranslation(["ui"]);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    function getMenuItems(): HTMLButtonElement[] {
+        if (!menuRef.current) return [];
+        return Array.from(
+            menuRef.current.querySelectorAll<HTMLButtonElement>(
+                "button[role='menuitem']:not(:disabled)",
+            ),
+        );
+    }
+
+    function focusMenuItem(direction: "up" | "down") {
+        const items = getMenuItems();
+        if (!items.length) return;
+        const active = document.activeElement as HTMLElement;
+        const currentIndex = items.indexOf(active as HTMLButtonElement);
+        let next: number;
+        if (direction === "down") {
+            next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        } else {
+            next = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        }
+        items[next].focus();
+    }
+
+    useHotkeys([
+        {
+            hotkey: "ArrowDown",
+            callback: () => focusMenuItem("down"),
+            options: {
+                enabled: menuLength > 0,
+                preventDefault: true,
+                meta: {
+                    name: t("choice_navigation"),
+                    description: t("choice_navigation_description"),
+                },
+            },
+        },
+        {
+            hotkey: "ArrowUp",
+            callback: () => focusMenuItem("up"),
+            options: {
+                enabled: menuLength > 0,
+                preventDefault: true,
+                meta: {
+                    name: t("choice_navigation"),
+                    description: t("choice_navigation_description"),
+                },
+            },
+        },
+    ]);
+
+    return { menuRef };
+}
+
 export function useNarrationHotkeys(): null {
     const { t } = useTranslation(["ui"]);
     const { goNext } = useNarrationFunctions();
-    const { data: { isRequired } = {} } = useQueryInputValue<string | number>();
+    const typewriterInProgress = useSelector(
+        TextDisplaySettings.store,
+        (state) => state.inProgress,
+    );
+    const { isAnyMenuOrDialogOpen } = useMenuDialogState();
+    const { data: canGoNext } = useQueryCanGoNext();
 
     const onSkipKeyDown = useCallback(() => SkipSettings.setEnabled(true), []);
     const onSkipKeyUp = useCallback(() => {
         SkipSettings.setEnabled(false);
+        if (typewriterInProgress && !narration.dialogGlue) {
+            TextDisplaySettings.complete();
+            return;
+        }
         goNext();
-    }, [goNext]);
+    }, [goNext, typewriterInProgress]);
 
     useHotkeys([
         {
             hotkey: "Enter",
             callback: onSkipKeyDown,
             options: {
+                enabled: !isAnyMenuOrDialogOpen && canGoNext,
                 meta: {
                     name: t("skip"),
                     description: t("skip_hold_description"),
                 },
-                enabled: !isRequired,
             },
         },
         {
             hotkey: "Space",
             callback: onSkipKeyDown,
             options: {
+                enabled: !isAnyMenuOrDialogOpen && canGoNext,
                 meta: {
                     name: t("skip"),
                     description: t("skip_hold_space_description"),
                 },
-                enabled: !isRequired,
             },
         },
         {
@@ -250,11 +351,12 @@ export function useNarrationHotkeys(): null {
             callback: onSkipKeyUp,
             options: {
                 eventType: "keyup",
+                conflictBehavior: "allow",
+                enabled: !isAnyMenuOrDialogOpen && canGoNext,
                 meta: {
                     name: t("next"),
                     description: t("skip_release_description"),
                 },
-                enabled: !isRequired,
             },
         },
         {
@@ -262,11 +364,12 @@ export function useNarrationHotkeys(): null {
             callback: onSkipKeyUp,
             options: {
                 eventType: "keyup",
+                conflictBehavior: "allow",
+                enabled: !isAnyMenuOrDialogOpen && canGoNext,
                 meta: {
                     name: t("next"),
                     description: t("skip_release_space_description"),
                 },
-                enabled: !isRequired,
             },
         },
     ]);