create-pixi-vn 2.0.13 → 2.0.14

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

@@ -18,23 +18,16 @@
     "ui:reinit": "npx shadcn@latest init -f -b base --reinstall && npm run format"
   },
   "dependencies": {
-    "@base-ui/react": "^1.5.0",
-    "@drincs/pixi-vn": "^1.8.13",
-    "@drincs/pixi-vn-ink": "^1.0.5",
-    "@drincs/pixi-vn-spine": "^0.2.1",
+    "@base-ui/react": "^1.6.0",
+    "@drincs/pixi-vn": "^1.8.16",
+    "@drincs/pixi-vn-ink": "^1.0.6",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/hotkeys": "^0.8.0",
-    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-hotkeys": "^0.10.0",
-    "@tanstack/react-hotkeys-devtools": "^0.7.0",
     "@tanstack/react-pacer": "^0.22.1",
-    "@tanstack/react-pacer-devtools": "^0.7.1",
     "@tanstack/react-query": "latest",
-    "@tanstack/react-query-devtools": "latest",
     "@tanstack/react-router": "latest",
-    "@tanstack/react-router-devtools": "latest",
     "@tanstack/react-store": "latest",
-    "@tanstack/router-plugin": "latest",
     "@tanstack/store": "latest",
     "@unpic/react": "^1.0.2",
     "class-variance-authority": "^0.7.1",
@@ -44,7 +37,7 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-chained-backend": "^5.0.4",
     "i18next-resources-to-backend": "^1.2.1",
-    "lucide-react": "^1.17.0",
+    "lucide-react": "^1.21.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.6",
     "react-color-palette": "^7.3.1",
@@ -55,7 +48,7 @@
     "react-resizable-panels": "^4.11.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "shadcn": "^4.10.0",
+    "shadcn": "^4.11.0",
     "shade-generator": "^1.2.7",
     "sonner": "^2.0.7",
     "tailwind-animations": "^1.0.1",
@@ -70,6 +63,12 @@
     "@biomejs/biome": "latest",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/devtools-vite": "latest",
+    "@tanstack/react-devtools": "^0.10.7",
+    "@tanstack/react-hotkeys-devtools": "^0.7.0",
+    "@tanstack/react-pacer-devtools": "^0.7.1",
+    "@tanstack/react-query-devtools": "latest",
+    "@tanstack/react-router-devtools": "latest",
+    "@tanstack/router-plugin": "latest",
     "@types/node": "^25.9.1",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/template-react-vite-muijoy-ink/src/components/dev-devtools.tsx

@@ -0,0 +1,25 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { hotkeysDevtoolsPlugin } from "@tanstack/react-hotkeys-devtools";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+
+export default function DevDevtools() {
+    return (
+        <TanStackDevtools
+            config={{
+                position: "bottom-right",
+            }}
+            plugins={[
+                {
+                    name: "UI screens",
+                    render: <TanStackRouterDevtoolsPanel />,
+                },
+                { ...hotkeysDevtoolsPlugin(), name: "Hotkeys" },
+                {
+                    name: "UI cache",
+                    render: <ReactQueryDevtoolsPanel />,
+                },
+            ]}
+        />
+    );
+}

package/template-react-vite-muijoy-ink/src/components/menus/settings/menus/history.tsx

@@ -15,7 +15,7 @@ import { useQueryNarrativeHistory } from "@/lib/query/narration-query";
 import { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
 import { Check, Search } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
@@ -33,80 +33,96 @@ function HistoryItemAvatar({ icon, character }: { icon?: string; character: stri
 
 export function HistoryList({ searchString }: { searchString?: string }) {
     const { data = [] } = useQueryNarrativeHistory({ searchString });
+    const bottomRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (data.length > 0) {
+            bottomRef.current?.scrollIntoView();
+        }
+    }, [data]);
 
     return (
-        <ItemGroup>
-            {data.map((item, index) => {
-                const key = `${item.character ?? "unknown"}-${item.text}-${index}`;
-                return (
-                    <Item key={key} variant="outline">
-                        {item.character && (
-                            <ItemMedia variant="image">
-                                <HistoryItemAvatar icon={item.icon} character={item.character} />
-                            </ItemMedia>
-                        )}
-                        <ItemContent
-                            className={!item.character ? "items-center text-center" : undefined}
-                        >
-                            {item.character && <ItemTitle>{item.character}</ItemTitle>}
-                            <Markdown
-                                remarkPlugins={[remarkGfm]}
-                                rehypePlugins={[rehypeRaw]}
-                                components={{
-                                    p: ({ children, id }) => (
-                                        <p key={id} className="m-0 text-sm text-muted-foreground">
-                                            {children}
-                                        </p>
-                                    ),
-                                }}
+        <>
+            <ItemGroup>
+                {data.map((item, index) => {
+                    const key = `${item.character ?? "unknown"}-${item.text}-${index}`;
+                    return (
+                        <Item key={key} variant="outline">
+                            {item.character && (
+                                <ItemMedia variant="image">
+                                    <HistoryItemAvatar
+                                        icon={item.icon}
+                                        character={item.character}
+                                    />
+                                </ItemMedia>
+                            )}
+                            <ItemContent
+                                className={!item.character ? "items-center text-center" : undefined}
                             >
-                                {item.text}
-                            </Markdown>
-                        </ItemContent>
-                        {(item.choices?.some((c) => !c.hidden) || item.inputValue) && (
-                            <ItemFooter className="flex-wrap justify-start gap-1.5">
-                                {item.choices?.map((choice) => {
-                                    const choiceKey = `${choice.text}-${choice.isResponse ? "1" : "0"}-${choice.hidden ? "1" : "0"}`;
-                                    if (choice.hidden) {
-                                        return null;
-                                    }
-                                    if (choice.isResponse) {
+                                {item.character && <ItemTitle>{item.character}</ItemTitle>}
+                                <Markdown
+                                    remarkPlugins={[remarkGfm]}
+                                    rehypePlugins={[rehypeRaw]}
+                                    components={{
+                                        p: ({ children, id }) => (
+                                            <p
+                                                key={id}
+                                                className="m-0 text-sm text-muted-foreground"
+                                            >
+                                                {children}
+                                            </p>
+                                        ),
+                                    }}
+                                >
+                                    {item.text}
+                                </Markdown>
+                            </ItemContent>
+                            {(item.choices?.some((c) => !c.hidden) || item.inputValue) && (
+                                <ItemFooter className="flex-wrap justify-center gap-1.5">
+                                    {item.choices?.map((choice) => {
+                                        const choiceKey = `${choice.text}-${choice.isResponse ? "1" : "0"}-${choice.hidden ? "1" : "0"}`;
+                                        if (choice.hidden) {
+                                            return null;
+                                        }
+                                        if (choice.isResponse) {
+                                            return (
+                                                <Kbd
+                                                    key={`choices-success-${choiceKey}`}
+                                                    className={cn(
+                                                        "h-auto border px-2 py-1",
+                                                        "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+                                                    )}
+                                                >
+                                                    {choice.text}
+                                                    <Check className="size-3" />
+                                                </Kbd>
+                                            );
+                                        }
                                         return (
                                             <Kbd
-                                                key={`choices-success-${choiceKey}`}
+                                                key={`choices-${choiceKey}`}
                                                 className={cn(
                                                     "h-auto border px-2 py-1",
-                                                    "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+                                                    "border-primary/30 bg-primary/10 text-primary",
                                                 )}
                                             >
                                                 {choice.text}
-                                                <Check className="size-3" />
                                             </Kbd>
                                         );
-                                    }
-                                    return (
-                                        <Kbd
-                                            key={`choices-${choiceKey}`}
-                                            className={cn(
-                                                "h-auto border px-2 py-1",
-                                                "border-primary/30 bg-primary/10 text-primary",
-                                            )}
-                                        >
-                                            {choice.text}
+                                    })}
+                                    {item.inputValue && (
+                                        <Kbd className="h-auto px-2 py-1">
+                                            {item.inputValue.toString()}
                                         </Kbd>
-                                    );
-                                })}
-                                {item.inputValue && (
-                                    <Kbd className="h-auto px-2 py-1">
-                                        {item.inputValue.toString()}
-                                    </Kbd>
-                                )}
-                            </ItemFooter>
-                        )}
-                    </Item>
-                );
-            })}
-        </ItemGroup>
+                                    )}
+                                </ItemFooter>
+                            )}
+                        </Item>
+                    );
+                })}
+            </ItemGroup>
+            <div ref={bottomRef} />
+        </>
     );
 }
 

package/template-react-vite-muijoy-ink/src/components/screens/narration/index.tsx

@@ -1,10 +1,12 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
 import { NarrationCards } from "@/components/screens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { QuickTools } from "@/components/quick-tools";
 import { useQueryDialogue } from "@/lib/query/narration-query";
 
 export function NarrationScreen() {
     const { data: { animatedText, text } = {} } = useQueryDialogue();
+    const hasText = !!(animatedText || text);
 
     return (
         <div className="absolute flex h-full w-full flex-col">
@@ -13,17 +15,18 @@ export function NarrationScreen() {
                     <ResizablePanel>
                         <ChoiceMenu />
                     </ResizablePanel>
-                    {(animatedText || text) && (
+                    {hasText && (
                         <div className="mx-4">
                             <ResizableHandle />
                         </div>
                     )}
-                    {(animatedText || text) && (
+                    {hasText && (
                         <ResizablePanel defaultSize={"40%"}>
                             <NarrationCards />
                         </ResizablePanel>
                     )}
                 </ResizablePanelGroup>
+                {!hasText && <QuickTools />}
             </div>
         </div>
     );

package/template-react-vite-muijoy-ink/src/components/ui/alert-dialog.tsx

@@ -1,7 +1,8 @@
+import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
+
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
     return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;

package/template-react-vite-muijoy-ink/src/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
+import * as React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -88,4 +88,4 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
     );
 }
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/template-react-vite-muijoy-ink/src/components/ui/breadcrumb.tsx

@@ -1,8 +1,9 @@
-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 { cn } from "@/lib/utils";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import type * as React from "react";
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
     return (
@@ -93,10 +94,10 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span"
 
 export {
     Breadcrumb,
-    BreadcrumbEllipsis,
+    BreadcrumbList,
     BreadcrumbItem,
     BreadcrumbLink,
-    BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator,
+    BreadcrumbEllipsis,
 };

package/template-react-vite-muijoy-ink/src/components/ui/button-group.tsx

@@ -1,9 +1,10 @@
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
 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 { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
 const buttonGroupVariants = cva(
     "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
     {

package/template-react-vite-muijoy-ink/src/components/ui/button.tsx

@@ -8,11 +8,11 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+                default: "bg-primary text-primary-foreground hover:bg-primary/80",
                 outline:
                     "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
                 secondary:
-                    "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+                    "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
                 ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
                 destructive:
                     "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",

package/template-react-vite-muijoy-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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-ink/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";