create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/blank/src/components/kokonutui/smooth-tab.tsx

@@ -1,453 +0,0 @@
-"use client";
-
-/**
- * @author: @dorian_baffier
- * @description: Smooth Tab
- * @version: 1.0.0
- * @date: 2025-06-26
- * @license: MIT
- * @website: https://kokonutui.com
- * @github: https://github.com/kokonut-labs/kokonutui
- */
-
-import * as React from "react";
-import { AnimatePresence, motion } from "motion/react";
-import { cn } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-
-interface TabItem {
-    id: string;
-    title: string;
-    icon?: LucideIcon;
-    content?: React.ReactNode;
-    cardContent?: React.ReactNode;
-    color: string;
-}
-
-const WaveformPath = () => (
-    <motion.path
-        d="M0 50 
-           C 20 40, 40 30, 60 50
-           C 80 70, 100 60, 120 50
-           C 140 40, 160 30, 180 50
-           C 200 70, 220 60, 240 50
-           C 260 40, 280 30, 300 50
-           C 320 70, 340 60, 360 50
-           C 380 40, 400 30, 420 50
-           L 420 100 L 0 100 Z"
-        initial={false}
-        animate={{
-            x: [0, 10, 0],
-            transition: {
-                duration: 5,
-                ease: "linear",
-                repeat: Number.POSITIVE_INFINITY,
-            },
-        }}
-    />
-);
-
-const DEFAULT_TABS: TabItem[] = [
-    {
-        id: "Models",
-        title: "Models",
-        color: "bg-blue-500 hover:bg-blue-600",
-        cardContent: (
-            <div className="relative h-full">
-                <div className="absolute inset-0 overflow-hidden">
-                    <svg
-                        className="absolute bottom-0 w-full h-32"
-                        viewBox="0 0 420 100"
-                        preserveAspectRatio="none"
-                        aria-hidden="true"
-                        role="presentation"
-                    >
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.15 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-blue-500 stroke-blue-500"
-                            style={{ strokeWidth: 1 }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.1 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-blue-500 stroke-blue-500"
-                            style={{
-                                strokeWidth: 1,
-                                transform: "translateY(10px)",
-                            }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                    </svg>
-                </div>
-                <div className="p-6 h-full relative flex flex-col">
-                    <div className="space-y-2">
-                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
-                            Models
-                        </h3>
-                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
-                            Choose the model you want to use
-                        </p>
-                    </div>
-                </div>
-            </div>
-        ),
-    },
-    {
-        id: "MCPs",
-        title: "MCPs",
-        color: "bg-purple-500 hover:bg-purple-600",
-        cardContent: (
-            <div className="relative h-full">
-                <div className="absolute inset-0 overflow-hidden">
-                    <svg
-                        className="absolute bottom-0 w-full h-32"
-                        viewBox="0 0 420 100"
-                        preserveAspectRatio="none"
-                        aria-hidden="true"
-                        role="presentation"
-                    >
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.15 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-purple-500 stroke-purple-500"
-                            style={{ strokeWidth: 1 }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.1 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-purple-500 stroke-purple-500"
-                            style={{
-                                strokeWidth: 1,
-                                transform: "translateY(10px)",
-                            }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                    </svg>
-                </div>
-                <div className="p-6 h-full relative flex flex-col">
-                    <div className="space-y-2">
-                        <h3 className="text-xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
-                            MCPs
-                        </h3>
-                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
-                            Choose the MCP you want to use
-                        </p>
-                    </div>
-                </div>
-            </div>
-        ),
-    },
-    {
-        id: "Agents",
-        title: "Agents",
-        color: "bg-emerald-500 hover:bg-emerald-600",
-        cardContent: (
-            <div className="relative h-full">
-                <div className="absolute inset-0 overflow-hidden">
-                    <svg
-                        className="absolute bottom-0 w-full h-32"
-                        viewBox="0 0 420 100"
-                        preserveAspectRatio="none"
-                        aria-hidden="true"
-                        role="presentation"
-                    >
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.15 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-emerald-500 stroke-emerald-500"
-                            style={{ strokeWidth: 1 }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.1 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-emerald-500 stroke-emerald-500"
-                            style={{
-                                strokeWidth: 1,
-                                transform: "translateY(10px)",
-                            }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                    </svg>
-                </div>
-                <div className="p-6 h-full relative flex flex-col">
-                    <div className="space-y-2">
-                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
-                            Agents
-                        </h3>
-                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
-                            Choose the agent you want to use
-                        </p>
-                    </div>
-                </div>
-            </div>
-        ),
-    },
-    {
-        id: "Users",
-        title: "Users",
-        color: "bg-amber-500 hover:bg-amber-600",
-        cardContent: (
-            <div className="relative h-full">
-                <div className="absolute inset-0 overflow-hidden">
-                    <svg
-                        className="absolute bottom-0 w-full h-32"
-                        viewBox="0 0 420 100"
-                        preserveAspectRatio="none"
-                        aria-hidden="true"
-                        role="presentation"
-                    >
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.15 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-amber-500 stroke-amber-500"
-                            style={{ strokeWidth: 1 }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                        <motion.g
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 0.1 }}
-                            transition={{ duration: 0.5 }}
-                            className="fill-amber-500 stroke-amber-500"
-                            style={{
-                                strokeWidth: 1,
-                                transform: "translateY(10px)",
-                            }}
-                        >
-                            <WaveformPath />
-                        </motion.g>
-                    </svg>
-                </div>
-                <div className="p-6 h-full relative flex flex-col">
-                    <div className="space-y-2">
-                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
-                            Users
-                        </h3>
-                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
-                            Choose the user you want to use
-                        </p>
-                    </div>
-                </div>
-            </div>
-        ),
-    },
-];
-
-interface SmoothTabProps {
-    items?: TabItem[];
-    defaultTabId?: string;
-    className?: string;
-    activeColor?: string;
-    onChange?: (tabId: string) => void;
-}
-
-const slideVariants = {
-    enter: (direction: number) => ({
-        x: direction > 0 ? "100%" : "-100%",
-        opacity: 0,
-        filter: "blur(8px)",
-        scale: 0.95,
-        position: "absolute" as const,
-    }),
-    center: {
-        x: 0,
-        opacity: 1,
-        filter: "blur(0px)",
-        scale: 1,
-        position: "absolute" as const,
-    },
-    exit: (direction: number) => ({
-        x: direction < 0 ? "100%" : "-100%",
-        opacity: 0,
-        filter: "blur(8px)",
-        scale: 0.95,
-        position: "absolute" as const,
-    }),
-};
-
-const transition = {
-    duration: 0.4,
-    ease: [0.32, 0.72, 0, 1],
-};
-
-export default function SmoothTab({
-    items = DEFAULT_TABS,
-    defaultTabId = DEFAULT_TABS[0].id,
-    className,
-    activeColor = "bg-[#1F9CFE]",
-    onChange,
-}: SmoothTabProps) {
-    const [selected, setSelected] = React.useState<string>(defaultTabId);
-    const [direction, setDirection] = React.useState(0);
-    const [dimensions, setDimensions] = React.useState({ width: 0, left: 0 });
-
-    // Reference for the selected button
-    const buttonRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
-    const containerRef = React.useRef<HTMLDivElement>(null);
-
-    // Update dimensions whenever selected tab changes or on mount
-    React.useLayoutEffect(() => {
-        const updateDimensions = () => {
-            const selectedButton = buttonRefs.current.get(selected);
-            const container = containerRef.current;
-
-            if (selectedButton && container) {
-                const rect = selectedButton.getBoundingClientRect();
-                const containerRect = container.getBoundingClientRect();
-
-                setDimensions({
-                    width: rect.width,
-                    left: rect.left - containerRect.left,
-                });
-            }
-        };
-
-        // Initial update
-        requestAnimationFrame(() => {
-            updateDimensions();
-        });
-
-        // Update on resize
-        window.addEventListener("resize", updateDimensions);
-        return () => window.removeEventListener("resize", updateDimensions);
-    }, [selected]);
-
-    const handleTabClick = (tabId: string) => {
-        const currentIndex = items.findIndex((item) => item.id === selected);
-        const newIndex = items.findIndex((item) => item.id === tabId);
-        setDirection(newIndex > currentIndex ? 1 : -1);
-        setSelected(tabId);
-        onChange?.(tabId);
-    };
-
-    const handleKeyDown = (
-        e: React.KeyboardEvent<HTMLButtonElement>,
-        tabId: string
-    ) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleTabClick(tabId);
-        }
-    };
-
-    const selectedItem = items.find((item) => item.id === selected);
-
-    return (
-        <div className="flex flex-col h-full">
-            {/* Card Content Area */}
-            <div className="flex-1 mb-4 relative">
-                <div className="bg-card border rounded-lg h-[200px] w-full relative">
-                    <div className="absolute inset-0 overflow-hidden rounded-lg">
-                        <AnimatePresence
-                            initial={false}
-                            mode="popLayout"
-                            custom={direction}
-                        >
-                            <motion.div
-                                key={`card-${selected}`}
-                                custom={direction}
-                                variants={slideVariants as React.ComponentProps<typeof motion.div>['variants']}
-                                initial="enter"
-                                animate="center"
-                                exit="exit"
-                                transition={transition as unknown as React.ComponentProps<typeof motion.div>['transition']}
-                                className="absolute inset-0 w-full h-full will-change-transform bg-card"
-                                style={{
-                                    backfaceVisibility: "hidden",
-                                    WebkitBackfaceVisibility: "hidden",
-                                }}
-                            >
-                                {selectedItem?.cardContent}
-                            </motion.div>
-                        </AnimatePresence>
-                    </div>
-                </div>
-            </div>
-
-            {/* Bottom Toolbar */}
-            <div
-                ref={containerRef}
-                role="tablist"
-                aria-label="Smooth tabs"
-                className={cn(
-                    "flex items-center justify-between gap-1 py-1 mt-auto relative",
-                    "bg-background w-[400px] mx-auto",
-                    "border rounded-xl",
-                    "transition-all duration-200",
-                    className
-                )}
-            >
-                {/* Sliding Background */}
-                <motion.div
-                    className={cn(
-                        "absolute rounded-lg z-[1]",
-                        selectedItem?.color || activeColor
-                    )}
-                    initial={false}
-                    animate={{
-                        width: dimensions.width - 8,
-                        x: dimensions.left + 4,
-                        opacity: 1,
-                    }}
-                    transition={{
-                        type: "spring",
-                        stiffness: 400,
-                        damping: 30,
-                    }}
-                    style={{ height: "calc(100% - 8px)", top: "4px" }}
-                />
-
-                <div className="grid grid-cols-4 w-full gap-1 relative z-[2]">
-                    {items.map((item) => {
-                        const isSelected = selected === item.id;
-                        return (
-                            <motion.button
-                                key={item.id}
-                                ref={(el) => {
-                                    if (el) buttonRefs.current.set(item.id, el);
-                                    else buttonRefs.current.delete(item.id);
-                                }}
-                                type="button"
-                                role="tab"
-                                aria-selected={isSelected}
-                                aria-controls={`panel-${item.id}`}
-                                id={`tab-${item.id}`}
-                                tabIndex={isSelected ? 0 : -1}
-                                onClick={() => handleTabClick(item.id)}
-                                onKeyDown={(e) => handleKeyDown(e, item.id)}
-                                className={cn(
-                                    "relative flex items-center justify-center gap-0.5 rounded-lg px-2 py-1.5",
-                                    "text-sm font-medium transition-all duration-300",
-                                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                                    "truncate",
-                                    isSelected
-                                        ? "text-white"
-                                        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                                )}
-                            >
-                                <span className="truncate">{item.title}</span>
-                            </motion.button>
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-}

package/templates/blank/src/components/navigation/nav-card.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { Card, CardContent } from '../ui/card'
-import Link from 'next/link'
-
-const NavCard = ({
-  data,
-  href,
-  icon,
-}: {
-  data: { title: string; description: string }
-  href: string
-  icon: React.ReactNode
-}) => {
-  return (
-    <Link href={href} className="w-full">
-      <Card className="h-24 w-full border-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
-        <CardContent className="flex h-full w-full items-center gap-3 p-4">
-          <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
-            {icon}
-          </div>
-          <div className="flex min-w-0 flex-1 flex-col justify-center">
-            <span className="truncate text-sm font-medium">{data.title}</span>
-            <span className="line-clamp-2 text-xs text-muted-foreground">{data.description}</span>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  )
-}
-
-export default NavCard

package/templates/blank/src/components/node-header.tsx

@@ -1,159 +0,0 @@
-import { forwardRef, useCallback, HTMLAttributes, ReactNode } from 'react'
-import { useNodeId, useReactFlow } from '@xyflow/react'
-import { EllipsisVertical, Trash } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Slot } from '@radix-ui/react-slot'
-import { Button, ButtonProps } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@/components/ui/dropdown-menu'
-
-/* NODE HEADER -------------------------------------------------------------- */
-
-export type NodeHeaderProps = HTMLAttributes<HTMLElement>
-
-/**
- * A container for a consistent header layout intended to be used inside the
- * `<BaseNode />` component.
- */
-export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(({ className, ...props }, ref) => {
-  return (
-    <header
-      ref={ref}
-      {...props}
-      className={cn(
-        'flex items-center justify-between gap-2 px-3 py-2',
-        // Remove or modify these classes if you modify the padding in the
-        // `<BaseNode />` component.
-        className,
-      )}
-    />
-  )
-})
-
-NodeHeader.displayName = 'NodeHeader'
-
-/* NODE HEADER TITLE -------------------------------------------------------- */
-
-export type NodeHeaderTitleProps = HTMLAttributes<HTMLHeadingElement> & {
-  asChild?: boolean
-}
-
-/**
- * The title text for the node. To maintain a native application feel, the title
- * text is not selectable.
- */
-export const NodeHeaderTitle = forwardRef<HTMLHeadingElement, NodeHeaderTitleProps>(
-  ({ className, asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'h3'
-
-    return <Comp ref={ref} {...props} className={cn(className, 'user-select-none flex-1 font-semibold')} />
-  },
-)
-
-NodeHeaderTitle.displayName = 'NodeHeaderTitle'
-
-/* NODE HEADER ICON --------------------------------------------------------- */
-
-export type NodeHeaderIconProps = HTMLAttributes<HTMLSpanElement>
-
-export const NodeHeaderIcon = forwardRef<HTMLSpanElement, NodeHeaderIconProps>(({ className, ...props }, ref) => {
-  return <span ref={ref} {...props} className={cn(className, '[&>*]:size-5')} />
-})
-
-NodeHeaderIcon.displayName = 'NodeHeaderIcon'
-
-/* NODE HEADER ACTIONS ------------------------------------------------------ */
-
-export type NodeHeaderActionsProps = HTMLAttributes<HTMLDivElement>
-
-/**
- * A container for right-aligned action buttons in the node header.
- */
-export const NodeHeaderActions = forwardRef<HTMLDivElement, NodeHeaderActionsProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} {...props} className={cn('ml-auto flex items-center gap-1 justify-self-end', className)} />
-})
-
-NodeHeaderActions.displayName = 'NodeHeaderActions'
-
-/* NODE HEADER ACTION ------------------------------------------------------- */
-
-export type NodeHeaderActionProps = ButtonProps & {
-  label: string
-}
-
-/**
- * A thin wrapper around the `<Button />` component with a fixed sized suitable
- * for icons.
- *
- * Because the `<NodeHeaderAction />` component is intended to render icons, it's
- * important to provide a meaningful and accessible `label` prop that describes
- * the action.
- */
-export const NodeHeaderAction = forwardRef<HTMLButtonElement, NodeHeaderActionProps>(
-  ({ className, label, title, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        variant="ghost"
-        aria-label={label}
-        title={title ?? label}
-        className={cn(className, 'nodrag size-6 p-1')}
-        {...props}
-      />
-    )
-  },
-)
-
-NodeHeaderAction.displayName = 'NodeHeaderAction'
-
-//
-
-export type NodeHeaderMenuActionProps = Omit<NodeHeaderActionProps, 'onClick'> & {
-  trigger?: ReactNode
-}
-
-/**
- * Renders a header action that opens a dropdown menu when clicked. The dropdown
- * trigger is a button with an ellipsis icon. The trigger's content can be changed
- * by using the `trigger` prop.
- *
- * Any children passed to the `<NodeHeaderMenuAction />` component will be rendered
- * inside the dropdown menu. You can read the docs for the shadcn dropdown menu
- * here: https://ui.shadcn.com/docs/components/dropdown-menu
- *
- */
-export const NodeHeaderMenuAction = forwardRef<HTMLButtonElement, NodeHeaderMenuActionProps>(
-  ({ trigger, children, ...props }, ref) => {
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <NodeHeaderAction ref={ref} {...props}>
-            {trigger ?? <EllipsisVertical />}
-          </NodeHeaderAction>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>{children}</DropdownMenuContent>
-      </DropdownMenu>
-    )
-  },
-)
-
-NodeHeaderMenuAction.displayName = 'NodeHeaderMenuAction'
-
-/* NODE HEADER DELETE ACTION --------------------------------------- */
-
-export const NodeHeaderDeleteAction = () => {
-  const id = useNodeId()
-  const { setNodes } = useReactFlow()
-
-  const handleClick = useCallback(() => {
-    setNodes(prevNodes => prevNodes.filter(node => node.id !== id))
-  }, [id, setNodes])
-
-  return (
-    <NodeHeaderAction onClick={handleClick} variant="ghost" label="Delete node">
-      <Trash />
-    </NodeHeaderAction>
-  )
-}
-
-NodeHeaderDeleteAction.displayName = 'NodeHeaderDeleteAction'