confirm build

components/ui/code.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface CodeProps {
+  code: string;
+  language?: string;
+  className?: string;
+}
+
+export default function Code({ code, language = 'json', className = '' }: CodeProps) {
+  return (
+    <pre className={`overflow-auto ${className}`}>
+      <code className={`language-${language}`}>
+        {code}
+      </code>
+    </pre>
+  );
+}

components/ui/motion/scramble-text.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+
+interface ScrambleTextProps {
+  text: string;
+  className?: string;
+  duration?: number;
+  delay?: number;
+  isInView?: boolean;
+}
+
+export default function ScrambleText({ text, className = '', duration = 1, delay = 0, isInView = true }: ScrambleTextProps) {
+  const [displayText, setDisplayText] = useState(text);
+  const [isScrambling, setIsScrambling] = useState(false);
+
+  useEffect(() => {
+    if (isScrambling) {
+      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      const durationMs = duration * 1000; // Convert seconds to milliseconds
+      const interval = setInterval(() => {
+        setDisplayText(
+          text
+            .split('')
+            .map((char) => (Math.random() > 0.5 ? chars[Math.floor(Math.random() * chars.length)] : char))
+            .join('')
+        );
+      }, 50);
+
+      setTimeout(() => {
+        clearInterval(interval);
+        setDisplayText(text);
+        setIsScrambling(false);
+      }, durationMs);
+
+      return () => clearInterval(interval);
+    }
+  }, [text, isScrambling, duration]);
+
+  useEffect(() => {
+    if (isInView) {
+      const timeout = setTimeout(() => {
+        setIsScrambling(true);
+      }, delay);
+      return () => clearTimeout(timeout);
+    }
+  }, [text, delay, isInView]);
+
+  return <span className={className}>{displayText}</span>;
+}

components/ui/shadcn/switch.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cx } from "@/lib/app/utils";
+import { cn } from "@/utils/cn";
 
 const switchVariants = cva(
   "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-muted-foreground data-[state=unchecked]:bg-input",
@@ -46,11 +46,11 @@ const Switch = React.forwardRef<
   SwitchProps
 >(({ className, size, ...props }, ref) => (
   <SwitchPrimitives.Root
-    className={cx(switchVariants({ size, className }))}
+    className={cn(switchVariants({ size, className }))}
     {...props}
     ref={ref}
   >
-    <SwitchPrimitives.Thumb className={cx(thumbVariants({ size }))} />
+    <SwitchPrimitives.Thumb className={cn(thumbVariants({ size }))} />
   </SwitchPrimitives.Root>
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;

components/ui/spinner.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface SpinnerProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  finished?: boolean;
+}
+
+export default function Spinner({ className = '', size = 'md', finished = false }: SpinnerProps) {
+  if (finished) {
+    // Return a checkmark or completed state
+    return (
+      <div className={`${className}`}>
+        ✓
+      </div>
+    );
+  }
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8'
+  };
+
+  return (
+    <div className={`${sizeClasses[size]} ${className}`}>
+      <svg 
+        className="animate-spin" 
+        xmlns="http://www.w3.org/2000/svg" 
+        fill="none" 
+        viewBox="0 0 24 24"
+      >
+        <circle 
+          className="opacity-25" 
+          cx="12" 
+          cy="12" 
+          r="10" 
+          stroke="currentColor" 
+          strokeWidth="4"
+        />
+        <path 
+          className="opacity-75" 
+          fill="currentColor" 
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+  );
+}