create-pixi-vn 2.0.13 → 2.0.15

package/template-react-vite-muijoy-ink/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,19 @@ 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;
+        TextDisplaySettings.resetForNext();
         GameStatus.setLoading(true);
         try {
             if (!narration.canContinue) {
@@ -36,9 +44,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 +59,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 +76,7 @@ export function useNarrationFunctions() {
                     console.error(e);
                 });
         },
-        [gameProps],
+        [gameProps, hasOpenMenu],
     );
 
     return {
@@ -85,6 +95,7 @@ const isDragGesture = (dx: number, dy: number) =>
 export function useNarrationPointerHandlers() {
     const { goNext } = useNarrationFunctions();
     const skipEnabled = useSelector(SkipSettings.store, (state) => state.enabled);
+    const typewriterInProgress = useSelector(TextDisplaySettings.store, (state) => state.inProgress);
     const pointerDownPos = useRef<{ x: number; y: number } | null>(null);
     const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const longPressTriggered = useRef(false);
@@ -157,9 +168,13 @@ export function useNarrationPointerHandlers() {
             if (skipEnabled) {
                 SkipSettings.setEnabled(false);
             }
+            if (typewriterInProgress && !narration.dialogGlue) {
+                TextDisplaySettings.complete();
+                return;
+            }
             goNext();
         },
-        [clearLongPressTimer, goNext, skipEnabled],
+        [clearLongPressTimer, goNext, skipEnabled, typewriterInProgress],
     );
 
     const handlePointerMove = useCallback(
@@ -196,6 +211,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 +223,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 +235,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-ink/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-ink/src/lib/query/narration-query.ts

@@ -1,6 +1,9 @@
 import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { type CharacterInterface, narration, stepHistory } from "@drincs/pixi-vn";
 import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useSelector } from "@tanstack/react-store";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 const CAN_GO_BACK_USE_QUERY_KEY = "can_go_back_use_query_key";
@@ -24,7 +27,6 @@ export function useQueryChoiceMenuOptions() {
                         ? t(option.text)
                         : option.text.map((text) => t(text)).join(" "),
             })) || [],
-        placeholderData: keepPreviousData,
     });
 }
 
@@ -45,13 +47,30 @@ type DialogueModel = {
     animatedText?: string;
     text?: string;
     character?: CharacterInterface;
+    lastText?: string;
 };
 const DIALOGUE_USE_QUERY_KEY = "dialogue_use_query_key";
 export function useQueryDialogue() {
     const { t } = useTranslation(["narration"]);
     const queryClient = useQueryClient();
+    const forceComplete = useSelector(TextDisplaySettings.store, (state) => state.forceComplete);
 
-    return useQuery<DialogueModel>({
+    const finalizeDialogue = useCallback(() => {
+        queryClient.setQueryData<DialogueModel>(
+            [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUERY_KEY],
+            (prev) => {
+                if (!prev) return prev;
+                const fullText = (prev.text || "") + (prev.animatedText || "");
+                return {
+                    ...prev,
+                    text: fullText || undefined,
+                    animatedText: undefined,
+                };
+            },
+        );
+    }, [queryClient]);
+
+    const query = useQuery<DialogueModel>({
         queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUERY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
@@ -78,6 +97,7 @@ export function useQueryDialogue() {
                 }
                 return {
                     animatedText: newText,
+                    lastText: newText,
                     text: oldText,
                     character: character,
                 };
@@ -85,11 +105,21 @@ export function useQueryDialogue() {
 
             return {
                 animatedText: text,
+                lastText: text,
                 character: character,
             };
         },
         placeholderData: keepPreviousData,
+        select: forceComplete
+            ? (data) => ({
+                  ...data,
+                  text: (data.text || "") + (data.animatedText || "") || undefined,
+                  animatedText: undefined,
+              })
+            : undefined,
     });
+
+    return { ...query, finalizeDialogue };
 }
 
 const CAN_GO_NEXT_USE_QUERY_KEY = "can_go_next_use_query_key";

package/template-react-vite-muijoy-ink/src/lib/stores/alert-dialog-store.ts

@@ -0,0 +1,13 @@
+import { Store } from "@tanstack/store";
+
+export namespace AlertDialogState {
+    export const store = new Store<{ count: number }>({ count: 0 });
+
+    export function increment() {
+        store.setState((state) => ({ count: state.count + 1 }));
+    }
+
+    export function decrement() {
+        store.setState((state) => ({ count: Math.max(0, state.count - 1) }));
+    }
+}

package/template-react-vite-muijoy-ink/src/lib/stores/text-display-settings-store.ts

@@ -9,6 +9,10 @@ type TextDisplayStorage = {
      * Whether the typewriter effect is in progress
      */
     inProgress: boolean;
+    /**
+     * Whether the typewriter effect should be force-completed instantly
+     */
+    forceComplete: boolean;
     /**
      * The font size in percent (100 = default)
      */
@@ -22,6 +26,7 @@ export namespace TextDisplaySettings {
     export const store = new Store<TextDisplayStorage>({
         delay: Number(localStorage.getItem("typewriter_delay_millisecond") ?? 10),
         inProgress: false,
+        forceComplete: false,
         fontSize: initialFontSize,
     });
 
@@ -57,6 +62,20 @@ export namespace TextDisplaySettings {
      * End the typewriter effect
      */
     export function end() {
-        store.setState((state) => ({ ...state, inProgress: false }));
+        store.setState((state) => ({ ...state, inProgress: false, forceComplete: false }));
+    }
+
+    /**
+     * Force the typewriter effect to complete instantly
+     */
+    export function complete() {
+        store.setState((state) => ({ ...state, forceComplete: true, inProgress: false }));
+    }
+
+    /**
+     * Clear the forceComplete flag before advancing to the next step
+     */
+    export function resetForNext() {
+        store.setState((state) => ({ ...state, forceComplete: false }));
     }
 }

package/template-react-vite-muijoy-ink/src/locales/en.json

@@ -81,6 +81,8 @@
     "menu_navigation_up_description": "Focus the previous menu item.",
     "menu_navigation_home_description": "Focus the first menu item.",
     "menu_navigation_end_description": "Focus the last menu item.",
+    "choice_navigation": "Choices",
+    "choice_navigation_description": "Use ↑ / ↓ to select an choice, then Enter to run it.",
     "success_delete": "Delete successful",
     "success_load": "Load successful",
     "success_save": "Save successful",

package/template-react-vite-muijoy-ink/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-ink/src/pixi-vn.keys.gen.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+// noinspection JSUnusedGlobalSymbols
+// This file is auto-generated by @drincs/pixi-vn vite plugin. Do not edit manually.
+declare module "@drincs/pixi-vn/characters" {
+    interface PixivnCharacterIds {
+        "mc": never;
+        "james": never;
+        "steph": never;
+        "sly": never;
+    }
+}
+declare module "@drincs/pixi-vn/narration" {
+    interface PixivnLabelIds {
+        "animation_01": never;
+        "second_part": never;
+        "start": never;
+        "start_|_c-0": never;
+        "start_|_c-1": never;
+    }
+}
+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","start_|_c-0","start_|_c-1"] as const;
+export const labelIdsEnum = {"animation_01":"animation_01","second_part":"second_part","start":"start","start_|_c-0":"start_|_c-0","start_|_c-1":"start_|_c-1"} as const;

package/template-react-vite-muijoy-ink/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-ink/src/routes/__root.tsx

@@ -12,13 +12,13 @@ import { defineAssets } from "@/lib/utils/assets-utility";
 import { initializeIndexedDB } from "@/lib/utils/db-utility";
 import { loadRefreshSave } from "@/lib/utils/save-utility";
 import type { RouterContext } from "@/router";
+import { narration } from "@drincs/pixi-vn";
 import { setupInkHmrListener } from "@drincs/pixi-vn-ink/vite-listener";
 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),
@@ -29,7 +29,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
         await Promise.all([import("@/content"), initializeIndexedDB(), defineAssets(), useI18n()]);
         await setupPixivnViteData();
         await setupInkHmrListener();
-        if (location.pathname !== "/") {
+        if (location.pathname !== "/" && narration.stepCounter === 0) {
             const isRefreshSaveExist = await loadRefreshSave();
             if (isRefreshSaveExist) {
                 await context.queryClient.invalidateQueries({
@@ -58,22 +58,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-ink/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-ink/vite.config.ts

@@ -36,7 +36,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",
         }),
         vitePluginInk({
             inkGlob: "./ink/**/*.ink",

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

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