create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-tauri/tsconfig.json

@@ -1,27 +1,12 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": true,
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }

package/template-nqtr-react-vite-muijoy-tauri/tsconfig.node.json

@@ -1,11 +1,28 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
     "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
   "include": ["vite.config.ts"]
 }

package/template-nqtr-react-vite-muijoy-tauri/vite.config.ts

@@ -1,24 +1,66 @@
+import { AssetPack } from "@assetpack/core";
+import { vitePluginNqtr } from "@drincs/nqtr/vite";
+import type { AssetsManifest } from "@drincs/pixi-vn/pixi.js";
 import { vitePluginPixivn } from "@drincs/pixi-vn/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { devtools } from "@tanstack/devtools-vite";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-import checker from "vite-plugin-checker";
+import { defineConfig, type Plugin, type ResolvedConfig } from "vite";
+import { checker } from "vite-plugin-checker";
 import { VitePWA } from "vite-plugin-pwa";
+import assetPackConfig from "./.assetpack.ts";
+
+/**
+ * List of external hostnames whose responses should be cached by the service worker.
+ * Add any CDN or remote asset host here to enable offline caching for it.
+ * Examples:
+ *   "cdn.jsdelivr.net"
+ *   "your.cdn.domain.com"
+ */
+const CACHED_EXTERNAL_HOSTNAMES: string[] = ["raw.githubusercontent.com"];
 
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
     plugins: [
-        react(),
+        assetpackPlugin(),
         checker({
-            typescript: true,
+            typescript: {
+                tsconfigPath: "tsconfig.app.json",
+            },
         }),
+        mode !== "production" && devtools(),
+        tanstackRouter({ target: "react", autoCodeSplitting: true }),
+        react(),
         tailwindcss(),
+        vitePluginPixivn({
+            content: "./src/content/index.ts",
+            characters: "./src/content/characters.ts",
+            labels: "./src/content/labels/*.label.ts",
+            typeFilePath: "./src/pixi-vn.keys.gen.ts",
+            assetsManifest: async (ssrLoadModule) => {
+                const mod = (await ssrLoadModule("/src/assets/index.ts")) as {
+                    manifest: AssetsManifest;
+                };
+                if (!mod.manifest)
+                    throw new Error("Assets manifest not found in /src/assets/index.ts");
+                return mod.manifest;
+            },
+        }),
+        vitePluginNqtr({
+            activities: "./src/content/activities.tsx",
+            commitments: "./src/content/routine.tsx",
+            rooms: "./src/content/rooms.tsx",
+            locations: "./src/content/locations.tsx",
+            maps: "./src/content/maps.tsx",
+            quests: "./src/content/quests/*.quest.tsx",
+            typeFilePath: "./src/nqtr.keys.gen.ts",
+        }),
         VitePWA({
-            // you can generate the icons using: https://favicon.io/favicon-converter/
-            // and the maskable icon using: https://progressier.com/maskable-icons-editor
-            includeAssets: ["favicon.ico", "apple-touch-icon.png", "mask-icon.svg"],
+            // generate icons with: npm run icon
+            includeAssets: ["favicon.ico", "apple-touch-icon-180x180.png"],
             manifest: {
                 name: "my-app-project-name",
                 short_name: "my-app-package-name",
@@ -26,7 +68,7 @@ export default defineConfig({
                 theme_color: "#ffffff",
                 start_url: "/",
                 display: "fullscreen",
-                orientation: "portrait",
+                orientation: "landscape",
                 icons: [
                     {
                         src: "pwa-192x192.png",
@@ -38,11 +80,37 @@ export default defineConfig({
                         sizes: "512x512",
                         type: "image/png",
                     },
+                    {
+                        src: "maskable-icon-512x512.png",
+                        sizes: "512x512",
+                        type: "image/png",
+                        purpose: "maskable",
+                    },
+                ],
+            },
+            workbox: {
+                runtimeCaching: [
+                    {
+                        urlPattern: ({ url }) => CACHED_EXTERNAL_HOSTNAMES.includes(url.hostname),
+                        handler: "CacheFirst",
+                        options: {
+                            cacheName: "external-assets-v1",
+                            cacheableResponse: {
+                                statuses: [0, 200],
+                            },
+                            expiration: {
+                                maxAgeSeconds: 7 * 24 * 60 * 60,
+                            },
+                        },
+                    },
                 ],
             },
         }),
-        vitePluginPixivn(),
     ],
+    resolve: {
+        tsconfigPaths: true,
+        preserveSymlinks: true,
+    },
     define: {
         __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
         __APP_NAME__: JSON.stringify(process.env.npm_package_name),
@@ -51,11 +119,16 @@ export default defineConfig({
         rollupOptions: {
             output: {
                 manualChunks(id) {
-                    if (id.includes("react-markdown") || id.includes("rehype-raw") || id.includes("remark-gfm"))
-                        return "react-markdown";
-                    if (id.includes("@pixi/sound")) return "sound";
+                    if (
+                        id.includes("react-markdown") ||
+                        id.includes("rehype-raw") ||
+                        id.includes("remark-gfm")
+                    )
+                        return "markdown";
+                    if (id.includes("tone")) return "tone";
                     if (id.includes("@drincs/pixi-vn-spine")) return "spine";
                     if (id.includes("pixi.js")) return "pixi.js";
+                    if (id.includes("motion")) return "motion";
                     if (id.includes("@drincs/pixi-vn")) return "pixi-vn";
                 },
             },
@@ -68,7 +141,7 @@ export default defineConfig({
     clearScreen: false,
     // 2. tauri expects a fixed port, fail if that port is not available
     server: {
-        port: 1420,
+        port: 5173,
         strictPort: true,
         host: host || false,
         hmr: host
@@ -83,4 +156,35 @@ export default defineConfig({
             ignored: ["**/src-tauri/**"],
         },
     },
-});
+}));
+
+function assetpackPlugin(): Plugin {
+    let mode: ResolvedConfig["command"];
+    let ap: AssetPack | undefined;
+
+    return {
+        name: "vite-plugin-assetpack",
+        configResolved(resolvedConfig) {
+            mode = resolvedConfig.command;
+            if (!resolvedConfig.publicDir) return;
+            if (assetPackConfig.output) return;
+            const publicDir = resolvedConfig.publicDir.replace(process.cwd(), "");
+            assetPackConfig.output = `.${publicDir}/assets/`;
+        },
+        buildStart: async () => {
+            if (mode === "serve") {
+                if (ap) return;
+                ap = new AssetPack(assetPackConfig);
+                void ap.watch();
+            } else {
+                await new AssetPack(assetPackConfig).run();
+            }
+        },
+        buildEnd: async () => {
+            if (ap) {
+                await ap.stop();
+                ap = undefined;
+            }
+        },
+    };
+}

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

@@ -10,7 +10,7 @@
       "license": "GPL-3.0",
       "dependencies": {
         "@base-ui/react": "^1.6.0",
-        "@drincs/pixi-vn": "^1.8.16",
+        "@drincs/pixi-vn": "^1.8.21",
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/hotkeys": "^0.8.0",
         "@tanstack/react-hotkeys": "^0.10.0",
@@ -34,7 +34,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",
@@ -2113,9 +2113,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"
@@ -9929,6 +9929,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",
@@ -13592,6 +13593,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"
@@ -13618,6 +13620,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"
       }
@@ -13626,7 +13629,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",
@@ -14713,12 +14717,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/package.json

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

@@ -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/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/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