create-pixi-vn 2.0.12 → 2.0.14

package/template-react-vite-muijoy/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/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/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/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/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/src/lib/hooks/hotkeys-hooks.ts

@@ -250,6 +250,7 @@ export function useNarrationHotkeys(): null {
             callback: onSkipKeyUp,
             options: {
                 eventType: "keyup",
+                conflictBehavior: "allow",
                 meta: {
                     name: t("next"),
                     description: t("skip_release_description"),
@@ -262,6 +263,7 @@ export function useNarrationHotkeys(): null {
             callback: onSkipKeyUp,
             options: {
                 eventType: "keyup",
+                conflictBehavior: "allow",
                 meta: {
                     name: t("next"),
                     description: t("skip_release_space_description"),

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

@@ -2,6 +2,7 @@ import { SKIP_DELAY } from "@/constants";
 import { useGameProps } from "@/lib/hooks/props-hooks";
 import { AutoSettings } from "@/lib/stores/auto-settings-store";
 import { GameStatus } from "@/lib/stores/game-status-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 { hasScrollableParent, isScrollableElement } from "@/lib/utils/scroll-utils";
@@ -9,12 +10,18 @@ import { narration, stepHistory, type StoredIndexedChoiceInterface } from "@drin
 import { useDebouncer } from "@tanstack/react-pacer";
 import { useSelector } from "@tanstack/react-store";
 import type React from "react";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 export function useNarrationFunctions() {
     const gameProps = useGameProps();
+    const searchParams = useSelector(SearchParams.store, (state) => state);
+    const hasOpenMenu = useMemo(
+        () => Object.values(searchParams).some((value) => value !== undefined),
+        [searchParams],
+    );
 
     const goNext = useCallback(async () => {
+        if (hasOpenMenu) return;
         GameStatus.setLoading(true);
         try {
             if (!narration.canContinue) {
@@ -36,9 +43,10 @@ export function useNarrationFunctions() {
             console.error(e);
             return;
         }
-    }, [gameProps]);
+    }, [gameProps, hasOpenMenu]);
 
     const goBack = useCallback(async () => {
+        if (hasOpenMenu) return;
         GameStatus.setLoading(true);
         return stepHistory
             .back(gameProps)
@@ -50,10 +58,11 @@ export function useNarrationFunctions() {
                 GameStatus.setLoading(false);
                 console.error(e);
             });
-    }, [gameProps]);
+    }, [gameProps, hasOpenMenu]);
 
     const selectChoice = useCallback(
         async (item: StoredIndexedChoiceInterface) => {
+            if (hasOpenMenu) return;
             GameStatus.setLoading(true);
             return narration
                 .selectChoice(item, gameProps)
@@ -66,7 +75,7 @@ export function useNarrationFunctions() {
                     console.error(e);
                 });
         },
-        [gameProps],
+        [gameProps, hasOpenMenu],
     );
 
     return {
@@ -196,6 +205,11 @@ export function useSkipAutoDetector() {
         TextDisplaySettings.store,
         (state) => state.inProgress,
     );
+    const searchParams = useSelector(SearchParams.store, (state) => state);
+    const hasOpenMenu = useMemo(
+        () => Object.values(searchParams).some((value) => value !== undefined),
+        [searchParams],
+    );
     const { goNext } = useNarrationFunctions();
 
     const savedGoNext = useRef(goNext);
@@ -203,11 +217,11 @@ export function useSkipAutoDetector() {
         savedGoNext.current = goNext;
     }, [goNext]);
     useEffect(() => {
-        if (skipEnabled) {
+        if (skipEnabled && !hasOpenMenu) {
             const id = setInterval(() => savedGoNext.current(), SKIP_DELAY);
             return () => clearInterval(id);
         }
-    }, [skipEnabled]);
+    }, [skipEnabled, hasOpenMenu]);
 
     const autoDebouncer = useDebouncer(
         (_trigger: {
@@ -215,20 +229,21 @@ export function useSkipAutoDetector() {
             skipEnabled: boolean;
             typewriterInProgress: boolean;
             autoTime: number;
+            hasOpenMenu: boolean;
         }) => {
             goNext();
         },
         {
             wait: autoTime * 1000,
-            enabled: autoEnabled && !skipEnabled && !typewriterInProgress,
+            enabled: autoEnabled && !skipEnabled && !typewriterInProgress && !hasOpenMenu,
         },
     );
 
     const { maybeExecute } = autoDebouncer;
 
     useEffect(() => {
-        maybeExecute({ autoEnabled, skipEnabled, typewriterInProgress, autoTime });
-    }, [maybeExecute, autoEnabled, skipEnabled, typewriterInProgress, autoTime]);
+        maybeExecute({ autoEnabled, skipEnabled, typewriterInProgress, autoTime, hasOpenMenu });
+    }, [maybeExecute, autoEnabled, skipEnabled, typewriterInProgress, autoTime, hasOpenMenu]);
 
     return null;
 }

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

@@ -1,9 +1,35 @@
 import { SearchParams } from "@/lib/stores/search-param-store";
-import { useDebouncedCallback } from "@tanstack/react-pacer";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@tanstack/react-store";
 import { useCallback, useEffect } from "react";
 
+// Shared pending param changes — all synchronous setters accumulate here
+// and a single navigate fires after a very short delay.
+const _pendingParams: Record<string, unknown> = {};
+let _pendingTimer: ReturnType<typeof setTimeout> | null = null;
+let _pendingNavigate: ((...args: unknown[]) => unknown) | null = null;
+
+function scheduleNavigate(navigate: (...args: unknown[]) => unknown, key: string, value: unknown) {
+    _pendingParams[key] = value;
+    _pendingNavigate = navigate;
+    if (_pendingTimer !== null) {
+        clearTimeout(_pendingTimer);
+    }
+    _pendingTimer = setTimeout(() => {
+        _pendingTimer = null;
+        if (_pendingNavigate) {
+            const snapshot = { ..._pendingParams };
+            for (const k of Object.keys(_pendingParams)) {
+                delete _pendingParams[k];
+            }
+            _pendingNavigate({
+                search: (prev: Record<string, unknown>) => ({ ...prev, ...snapshot }),
+            });
+            _pendingNavigate = null;
+        }
+    }, 10);
+}
+
 /**
  * useConfirmBackNavigation
  *
@@ -69,13 +95,6 @@ export function useSetSearchParamState<T>(
 ): (value: T | undefined | ((previous: T | undefined) => T | undefined)) => void {
     const navigate = useNavigate();
 
-    const debouncedNavigate = useDebouncedCallback(
-        (key: string, value: unknown) => {
-            navigate({ search: ((prev: any) => ({ ...prev, [key]: value })) as any });
-        },
-        { wait: 300 },
-    );
-
     return useCallback(
         (value) => {
             const currentValue = SearchParams.store.state[field] as T | undefined;
@@ -86,8 +105,8 @@ export function useSetSearchParamState<T>(
             const normalizedValue = nextValue === false ? undefined : nextValue;
 
             SearchParams.set(field, normalizedValue);
-            debouncedNavigate(field, normalizedValue);
+            scheduleNavigate(navigate as never, field, normalizedValue);
         },
-        [field, debouncedNavigate],
+        [field, navigate],
     );
 }

package/template-react-vite-muijoy/src/main.tsx

@@ -10,7 +10,6 @@ import { ChannelSound } from "@/lib/stores/channel-sound-stores";
 import { MasterSound } from "@/lib/stores/master-sound-storage";
 import "@/styles.css";
 import { Assets, canvas, Container, drawCanvasErrorHandler, Game, sound } from "@drincs/pixi-vn";
-import "@drincs/pixi-vn-spine";
 import { createRoot } from "react-dom/client";
 
 // Canvas setup with PIXI

package/{template-react-vite-muijoy-tauri/src/pixi-vn-keys.gen.d.ts → template-react-vite-muijoy/src/pixi-vn.keys.gen.ts}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* eslint-disable */
 // noinspection JSUnusedGlobalSymbols
 // This file is auto-generated by @drincs/pixi-vn vite plugin. Do not edit manually.
@@ -17,4 +16,7 @@ declare module "@drincs/pixi-vn/narration" {
         "start": never;
     }
 }
-export {};
+export const characterIds = ["mc","james","steph","sly"] as const;
+export const characterIdsEnum = {"mc":"mc","james":"james","steph":"steph","sly":"sly"} as const;
+export const labelIds = ["animation_01","second_part","start"] as const;
+export const labelIdsEnum = {"animation_01":"animation_01","second_part":"second_part","start":"start"} as const;

package/template-react-vite-muijoy/src/routeTree.gen.ts

@@ -9,16 +9,10 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as NarrationRouteImport } from './routes/narration'
 import { Route as GameRouteImport } from './routes/game'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as GameNarrationRouteImport } from './routes/game/narration'
 
-const NarrationRoute = NarrationRouteImport.update({
-  id: '/narration',
-  path: '/narration',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const GameRoute = GameRouteImport.update({
   id: '/game',
   path: '/game',
@@ -38,45 +32,34 @@ const GameNarrationRoute = GameNarrationRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/game': typeof GameRouteWithChildren
-  '/narration': typeof NarrationRoute
   '/game/narration': typeof GameNarrationRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/game': typeof GameRouteWithChildren
-  '/narration': typeof NarrationRoute
   '/game/narration': typeof GameNarrationRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/game': typeof GameRouteWithChildren
-  '/narration': typeof NarrationRoute
   '/game/narration': typeof GameNarrationRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/game' | '/narration' | '/game/narration'
+  fullPaths: '/' | '/game' | '/game/narration'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/game' | '/narration' | '/game/narration'
-  id: '__root__' | '/' | '/game' | '/narration' | '/game/narration'
+  to: '/' | '/game' | '/game/narration'
+  id: '__root__' | '/' | '/game' | '/game/narration'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   GameRoute: typeof GameRouteWithChildren
-  NarrationRoute: typeof NarrationRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/narration': {
-      id: '/narration'
-      path: '/narration'
-      fullPath: '/narration'
-      preLoaderRoute: typeof NarrationRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/game': {
       id: '/game'
       path: '/game'
@@ -114,7 +97,6 @@ const GameRouteWithChildren = GameRoute._addFileChildren(GameRouteChildren)
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   GameRoute: GameRouteWithChildren,
-  NarrationRoute: NarrationRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

package/template-react-vite-muijoy/src/routes/__root.tsx

@@ -12,11 +12,12 @@ import { initializeIndexedDB } from "@/lib/utils/db-utility";
 import { loadRefreshSave } from "@/lib/utils/save-utility";
 import type { RouterContext } from "@/router";
 import { setupPixivnViteData } from "@drincs/pixi-vn/vite-listener";
-import { TanStackDevtools } from "@tanstack/react-devtools";
-import { hotkeysDevtoolsPlugin } from "@tanstack/react-hotkeys-devtools";
-import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
 import { createRootRouteWithContext, ErrorComponent, Outlet } from "@tanstack/react-router";
-import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { lazy, Suspense } from "react";
+
+const DevDevtools = import.meta.env.DEV
+    ? lazy(() => import("@/components/dev-devtools"))
+    : null;
 
 export const Route = createRootRouteWithContext<RouterContext>()({
     validateSearch: (search) => SearchParams.setMany(search),
@@ -54,22 +55,11 @@ function RootComponent() {
                 <Outlet />
             </RootProvider>
 
-            <TanStackDevtools
-                config={{
-                    position: "bottom-right",
-                }}
-                plugins={[
-                    {
-                        name: "UI screens",
-                        render: <TanStackRouterDevtoolsPanel />,
-                    },
-                    { ...hotkeysDevtoolsPlugin(), name: "Hotkeys" },
-                    {
-                        name: "UI cache",
-                        render: <ReactQueryDevtoolsPanel />,
-                    },
-                ]}
-            />
+            {DevDevtools && (
+                <Suspense>
+                    <DevDevtools />
+                </Suspense>
+            )}
         </>
     );
 }

package/template-react-vite-muijoy/src/styles.css

@@ -8,37 +8,37 @@
 
 :root {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.871 0.006 286.286);
-  --chart-2: oklch(0.552 0.016 285.938);
-  --chart-3: oklch(0.442 0.017 285.786);
-  --chart-4: oklch(0.37 0.013 285.805);
-  --chart-5: oklch(0.274 0.006 286.033);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 html,
@@ -56,7 +56,7 @@ body {
 
 @theme inline {
   --font-heading: var(--font-sans);
-  --font-sans: "Inter Variable", sans-serif;
+  --font-sans: "Geist Variable", sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -98,37 +98,37 @@ body {
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.871 0.006 286.286);
-  --chart-2: oklch(0.552 0.016 285.938);
-  --chart-3: oklch(0.442 0.017 285.786);
-  --chart-4: oklch(0.37 0.013 285.805);
-  --chart-5: oklch(0.274 0.006 286.033);
-  --sidebar: oklch(0.21 0.006 285.885);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {

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

@@ -35,7 +35,7 @@ export default defineConfig(({ mode }) => ({
             content: "./src/content/index.ts",
             characters: "./src/content/characters.ts",
             labels: "./src/content/labels/*.label.ts",
-            typeFilePath: "./src/pixi-vn-keys.gen.d.ts",
+            typeFilePath: "./src/pixi-vn.keys.gen.ts",
         }),
         VitePWA({
             // generate icons with: npm run icon

package/template-react-vite-muijoy-ink/.vscode/extensions.json

@@ -3,6 +3,7 @@
     "ms-vscode.vscode-typescript-next",
     "anseki.vscode-color",
     "pflannery.vscode-versionlens",
-    "biomejs.biome"
+    "biomejs.biome",
+    "drincs-productions.pixi-vn-ink-vscode"
   ]
 }

package/template-react-vite-muijoy-ink/.vscode/settings.json

@@ -55,5 +55,10 @@
   // does fetch when he does Pull
   "git.fetchOnPull": true,
   // move file
-  "js/ts.updateImportsOnFileMove.enabled": "always"
+  "js/ts.updateImportsOnFileMove.enabled": "always",
+  // ink
+  "ink.mainFile": "start.ink",
+  "ink.rootFolder": "ink",
+  "ink.markup": "Markdown",
+  "ink.engine": "pixi-vn"
 }

package/template-react-vite-muijoy-ink/_gitignore

@@ -13,6 +13,7 @@ dist-ssr
 *.local
 .assetpack
 public/assets
+public/ink-json
 
 # Editor directories and files
 .idea

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

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "",
     "css": "src/styles.css",
-    "baseColor": "zinc",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },