create-pixi-vn 2.0.14 → 2.1.0

package/template-react-vite-muijoy-ink-tauri/package-lock.json

@@ -10,8 +10,8 @@
       "license": "GPL-3.0",
       "dependencies": {
         "@base-ui/react": "^1.6.0",
-        "@drincs/pixi-vn": "^1.8.16",
-        "@drincs/pixi-vn-ink": "^1.0.6",
+        "@drincs/pixi-vn": "^1.8.21",
+        "@drincs/pixi-vn-ink": "^1.1.0",
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/hotkeys": "^0.8.0",
         "@tanstack/react-hotkeys": "^0.10.0",
@@ -37,7 +37,7 @@
         "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",
@@ -2119,9 +2119,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn": {
-      "version": "1.8.16",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.16.tgz",
-      "integrity": "sha512-FUb5EGBizpGcfx1VZ1htqRM2pnJ3vbBgfol1bWJ41EIlz543U+qanS0INPiQqeS689s/ZJXj9fnzkSs19Wbzsw==",
+      "version": "1.8.21",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.21.tgz",
+      "integrity": "sha512-20RRsCo7Gd/dJlLb/SplI+7XuCV1U/J1wUAF/cLOWC+DtcSA3moWCwMGdH+PgcQBsNCd0sQxaGYdvJLrTy/ylg==",
       "license": "LGPL-2.1",
       "workspaces": [
         "sandbox"
@@ -2146,15 +2146,15 @@
       }
     },
     "node_modules/@drincs/pixi-vn-ink": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn-ink/-/pixi-vn-ink-1.0.6.tgz",
-      "integrity": "sha512-H3YTgbrefgggXCvuQJPcaNAkjoJlhlR8hWHQfdz77e+CnnBUcYuzxRquvtzNrUWjoV9e7CNkmJ4EgsB4kDuICg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn-ink/-/pixi-vn-ink-1.1.0.tgz",
+      "integrity": "sha512-LRlpBQXiq1piPALEG7aR+j+x+1Ei3fTEX4ndhjFLfP7+UOwR+TzI41vfjYuIp1W9bbZNd0PsppPfdUEJuGNnOw==",
       "license": "LGPL-2.1",
       "workspaces": [
         "playground"
       ],
       "dependencies": {
-        "@drincs/pixi-vn-json": "^1.13.9"
+        "@drincs/pixi-vn-json": "^1.13.10"
       },
       "funding": {
         "url": "https://github.com/DRincs-Productions/pixi-vn?sponsor=1"
@@ -2170,9 +2170,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn-json": {
-      "version": "1.13.9",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn-json/-/pixi-vn-json-1.13.9.tgz",
-      "integrity": "sha512-l3pXcQBEfR/5ZBKI5Foo5hoRXGP6J73iU+84r2fB4lMIc/+oT6vuU/qws0vtf/pTJ4JR/fAU2eN1yHlY0HgpEQ==",
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn-json/-/pixi-vn-json-1.13.10.tgz",
+      "integrity": "sha512-9rY+FoiGuNYfObe2U8369c5JU30uTUE0/C+sZjyUoDk30A7/oaC+9AxkZu/DwVl4U5KvyBkvN5V3vgEFg3I2Hg==",
       "license": "LGPL-2.1",
       "funding": {
         "url": "https://github.com/DRincs-Productions/pixi-vn?sponsor=1"
@@ -10358,6 +10358,7 @@
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
       "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "motion-dom": "^12.38.0",
         "motion-utils": "^12.36.0",
@@ -14021,6 +14022,7 @@
       "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
       "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "framer-motion": "^12.38.0",
         "tslib": "^2.4.0"
@@ -14047,6 +14049,7 @@
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
       "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "motion-utils": "^12.36.0"
       }
@@ -14055,7 +14058,8 @@
       "version": "12.36.0",
       "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
       "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/ms": {
       "version": "2.1.3",
@@ -15142,12 +15146,12 @@
       }
     },
     "node_modules/react-markdown-typewriter": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-markdown-typewriter/-/react-markdown-typewriter-1.2.0.tgz",
-      "integrity": "sha512-jztq8XBfYB+CwG/fRk3VxE8A63LhVbcO7ZqjCYCg97cbn3Kl+hUFyA57LJ4vxG2b7z/FCqCuE/9hzBOhNiyzeA==",
-      "dependencies": {
-        "motion": "^12.38.0"
-      },
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/react-markdown-typewriter/-/react-markdown-typewriter-1.3.4.tgz",
+      "integrity": "sha512-LE/7xzyta4A6Gz6CfeTP0saCgVsxbCEVj4le4xobrkM/IG9MVWdrpyGFGFdsKmZ1k5otnRF3HP52YXbMv7P1rg==",
+      "workspaces": [
+        "playground"
+      ],
       "peerDependencies": {
         "motion": ">=12.9.0",
         "react": ">=18.0.0",

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

@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@drincs/pixi-vn": "^1.8.16",
-    "@drincs/pixi-vn-ink": "^1.0.6",
+    "@drincs/pixi-vn": "^1.8.21",
+    "@drincs/pixi-vn-ink": "^1.1.0",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/hotkeys": "^0.8.0",
     "@tanstack/react-hotkeys": "^0.10.0",
@@ -51,7 +51,7 @@
     "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",

package/template-react-vite-muijoy-ink-tauri/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-ink-tauri/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-ink-tauri/src/components/menus/main-menu.tsx

@@ -27,7 +27,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");
@@ -149,11 +148,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-ink-tauri/src/components/menus/save-menu/save-slots.tsx

@@ -22,7 +22,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
 
     if (isLoading) {
         return (
-            <AspectRatio ratio={16 / 9} className="m-2 sm:m-4 md:m-2 lg:m-4">
+            <AspectRatio ratio={16 / 9} className="m-2 sm:m-4 md:m-2 lg:m-4 rounded">
                 <Skeleton className="absolute inset-0" />
             </AspectRatio>
         );
@@ -30,7 +30,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
 
     if (!saveData || isError) {
         return (
-            <AspectRatio ratio={16 / 9} className="m-2 sm:m-4 md:m-2 lg:m-4">
+            <AspectRatio ratio={16 / 9} className="m-2 sm:m-4 md:m-2 lg:m-4 rounded">
                 <Button
                     variant="ghost"
                     className="absolute inset-0 h-full w-full ring-1 ring-border"
@@ -47,14 +47,14 @@ export function SaveSlot({ saveId }: { saveId: number }) {
     return (
         <AspectRatio
             ratio={16 / 9}
-            className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 cursor-pointer"
+            className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 rounded cursor-pointer"
             onClick={() => handleLoad({ ...saveData, id: saveId })}
         >
             <Image
                 src={saveData.image}
                 layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain rounded-lg pointer-events-none select-none"
+                className="absolute inset-0 size-full object-contain pointer-events-none select-none rounded-lg"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">

package/template-react-vite-muijoy-ink-tauri/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-ink-tauri/src/components/menus/settings/menus/history.tsx

@@ -36,8 +36,15 @@ export function HistoryList({ searchString }: { searchString?: string }) {
     const bottomRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        if (data.length > 0) {
-            bottomRef.current?.scrollIntoView();
+        if (data.length === 0 || !bottomRef.current) return;
+        let parent = bottomRef.current.parentElement;
+        while (parent) {
+            const { overflowY } = window.getComputedStyle(parent);
+            if (overflowY === "auto" || overflowY === "scroll") {
+                parent.scrollTop = parent.scrollHeight;
+                break;
+            }
+            parent = parent.parentElement;
         }
     }, [data]);
 

package/template-react-vite-muijoy-ink-tauri/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-ink-tauri/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-ink-tauri/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-ink-tauri/src/components/quick-tools.tsx

@@ -41,7 +41,7 @@ export function QuickTools() {
     return (
         <div
             className={cn(
-                "flex flex-nowrap items-center justify-end gap-0.5 overflow-x-auto sm:flex-wrap sm:justify-end sm:gap-1 sm:overflow-visible",
+                "flex flex-wrap items-center justify-end gap-0.5 sm:gap-1",
             )}
         >
             <Button

package/template-react-vite-muijoy-ink-tauri/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,18 +63,23 @@ 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 }) => {
-            const container = paragraphRef.current;
+            const container = paragraphRef.current?.querySelector<HTMLElement>(
+                '[data-slot="scroll-area-viewport"]',
+            );
             const char = ref.current;
             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 +92,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 +136,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-ink-tauri/src/content/ink/hashtag-commands.ts

@@ -1,9 +1,11 @@
 import { steam } from "@/lib/steam";
-import { characterIdsEnum } from "@/pixi-vn.keys.gen";
-import { RegisteredCharacters } from "@drincs/pixi-vn";
-import { HashtagCommands } from "@drincs/pixi-vn-ink";
+import { assetAliasIds, bundleIds, characterIdsEnum } from "@/pixi-vn.keys.gen";
+import { addBaseHashtagCommands, HashtagCommands } from "@drincs/pixi-vn-ink";
+import { RegisteredCharacters } from "@drincs/pixi-vn/characters";
 import zod from "zod";
 
+addBaseHashtagCommands({ bundleIds, assetAliasIds });
+
 HashtagCommands.add(
     async (script, { navigate }) => {
         await navigate({ to: script[1] });

package/template-react-vite-muijoy-ink-tauri/src/content/ink/text-replaces.ts

@@ -1,5 +1,5 @@
-import { RegisteredCharacters } from "@drincs/pixi-vn";
 import { TextReplaces } from "@drincs/pixi-vn-ink";
+import { RegisteredCharacters } from "@drincs/pixi-vn/characters";
 
 TextReplaces.add((key) => RegisteredCharacters.get(key)?.name, {
     name: "character name",