crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/ui/BackgroundRays/styles.module.scss

@@ -0,0 +1,246 @@
+.rayContainer {
+  // Theme-specific colors
+  --ray-color-primary: color-mix(in srgb, var(--primary-color), transparent 30%);
+  --ray-color-secondary: color-mix(in srgb, var(--secondary-color), transparent 30%);
+  --ray-color-accent: color-mix(in srgb, var(--accent-color), transparent 30%);
+
+  // Theme-specific gradients
+  --ray-gradient-primary: radial-gradient(var(--ray-color-primary) 0%, transparent 70%);
+  --ray-gradient-secondary: radial-gradient(var(--ray-color-secondary) 0%, transparent 70%);
+  --ray-gradient-accent: radial-gradient(var(--ray-color-accent) 0%, transparent 70%);
+
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  animation: fadeIn 1.5s ease-out;
+  pointer-events: none;
+  z-index: 0;
+  //   background-color: transparent;
+
+  :global(html[data-theme='dark']) & {
+    mix-blend-mode: screen;
+  }
+
+  :global(html[data-theme='light']) & {
+    mix-blend-mode: multiply;
+  }
+}
+
+.lightRay {
+  position: absolute;
+  border-radius: 100%;
+
+  :global(html[data-theme='dark']) & {
+    mix-blend-mode: screen;
+  }
+
+  :global(html[data-theme='light']) & {
+    mix-blend-mode: multiply;
+    opacity: 0.4;
+  }
+}
+
+.ray1 {
+  width: 600px;
+  height: 800px;
+  background: var(--ray-gradient-primary);
+  transform: rotate(65deg);
+  top: -500px;
+  left: -100px;
+  filter: blur(80px);
+  opacity: 0.6;
+  animation: float1 15s infinite ease-in-out;
+}
+
+.ray2 {
+  width: 400px;
+  height: 600px;
+  background: var(--ray-gradient-secondary);
+  transform: rotate(-30deg);
+  top: -300px;
+  left: 200px;
+  filter: blur(60px);
+  opacity: 0.6;
+  animation: float2 18s infinite ease-in-out;
+}
+
+.ray3 {
+  width: 500px;
+  height: 400px;
+  background: var(--ray-gradient-accent);
+  top: -320px;
+  left: 500px;
+  filter: blur(65px);
+  opacity: 0.5;
+  animation: float3 20s infinite ease-in-out;
+}
+
+.ray4 {
+  width: 400px;
+  height: 450px;
+  background: var(--ray-gradient-secondary);
+  top: -350px;
+  left: 800px;
+  filter: blur(55px);
+  opacity: 0.55;
+  animation: float4 17s infinite ease-in-out;
+}
+
+.ray5 {
+  width: 350px;
+  height: 500px;
+  background: var(--ray-gradient-primary);
+  transform: rotate(-45deg);
+  top: -250px;
+  left: 1000px;
+  filter: blur(45px);
+  opacity: 0.6;
+  animation: float5 16s infinite ease-in-out;
+}
+
+.ray6 {
+  width: 300px;
+  height: 700px;
+  background: var(--ray-gradient-accent);
+  transform: rotate(75deg);
+  top: -400px;
+  left: 600px;
+  filter: blur(75px);
+  opacity: 0.45;
+  animation: float6 19s infinite ease-in-out;
+}
+
+.ray7 {
+  width: 450px;
+  height: 600px;
+  background: var(--ray-gradient-primary);
+  transform: rotate(45deg);
+  top: -450px;
+  left: 350px;
+  filter: blur(65px);
+  opacity: 0.55;
+  animation: float7 21s infinite ease-in-out;
+}
+
+.ray8 {
+  width: 380px;
+  height: 550px;
+  background: var(--ray-gradient-secondary);
+  transform: rotate(-60deg);
+  top: -380px;
+  left: 750px;
+  filter: blur(58px);
+  opacity: 0.6;
+  animation: float8 14s infinite ease-in-out;
+}
+
+@keyframes float1 {
+  0%,
+  100% {
+    transform: rotate(65deg) translate(0, 0);
+  }
+  25% {
+    transform: rotate(70deg) translate(30px, 20px);
+  }
+  50% {
+    transform: rotate(60deg) translate(-20px, 40px);
+  }
+  75% {
+    transform: rotate(68deg) translate(-40px, 10px);
+  }
+}
+
+@keyframes float2 {
+  0%,
+  100% {
+    transform: rotate(-30deg) scale(1);
+  }
+  33% {
+    transform: rotate(-25deg) scale(1.1);
+  }
+  66% {
+    transform: rotate(-35deg) scale(0.95);
+  }
+}
+
+@keyframes float3 {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(40px, 20px) rotate(5deg);
+  }
+  75% {
+    transform: translate(-30px, 40px) rotate(-5deg);
+  }
+}
+
+@keyframes float4 {
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.15) rotate(10deg);
+  }
+}
+
+@keyframes float5 {
+  0%,
+  100% {
+    transform: rotate(-45deg) translate(0, 0);
+  }
+  33% {
+    transform: rotate(-40deg) translate(25px, -20px);
+  }
+  66% {
+    transform: rotate(-50deg) translate(-25px, 20px);
+  }
+}
+
+@keyframes float6 {
+  0%,
+  100% {
+    transform: rotate(75deg) scale(1);
+    filter: blur(75px);
+  }
+  50% {
+    transform: rotate(85deg) scale(1.1);
+    filter: blur(65px);
+  }
+}
+
+@keyframes float7 {
+  0%,
+  100% {
+    transform: rotate(45deg) translate(0, 0);
+    opacity: 0.55;
+  }
+  50% {
+    transform: rotate(40deg) translate(-30px, 30px);
+    opacity: 0.65;
+  }
+}
+
+@keyframes float8 {
+  0%,
+  100% {
+    transform: rotate(-60deg) scale(1);
+  }
+  25% {
+    transform: rotate(-55deg) scale(1.05);
+  }
+  75% {
+    transform: rotate(-65deg) scale(0.95);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

tools/bolt.diy/app/components/ui/Badge.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { classNames } from '~/utils/classNames';
+
+const badgeVariants = cva(
+  'inline-flex items-center gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-bolt-elements-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-bolt-elements-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background/80',
+        secondary:
+          'border-transparent bg-bolt-elements-background text-bolt-elements-textSecondary hover:bg-bolt-elements-background/80',
+        destructive: 'border-transparent bg-red-500/10 text-red-500 hover:bg-red-500/20',
+        outline: 'text-bolt-elements-textPrimary',
+        primary: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
+        success: 'bg-green-500/10 text-green-600 dark:text-green-400',
+        warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
+        danger: 'bg-red-500/10 text-red-600 dark:text-red-400',
+        info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+        subtle:
+          'border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 bg-white/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
+      },
+      size: {
+        default: 'rounded-full px-2.5 py-0.5 text-xs font-semibold',
+        sm: 'rounded-full px-1.5 py-0.5 text-xs',
+        md: 'rounded-md px-2 py-1 text-xs font-medium',
+        lg: 'rounded-md px-2.5 py-1.5 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  icon?: string;
+}
+
+function Badge({ className, variant, size, icon, children, ...props }: BadgeProps) {
+  return (
+    <div className={classNames(badgeVariants({ variant, size }), className)} {...props}>
+      {icon && <span className={icon} />}
+      {children}
+    </div>
+  );
+}
+
+export { Badge, badgeVariants };

tools/bolt.diy/app/components/ui/BranchSelector.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from './Button';
+import { classNames } from '~/utils/classNames';
+import { GitBranch, Check, Shield, Star, RefreshCw, X } from 'lucide-react';
+
+interface BranchInfo {
+  name: string;
+  sha: string;
+  protected: boolean;
+  isDefault: boolean;
+  canPush?: boolean; // GitLab specific
+}
+
+interface BranchSelectorProps {
+  provider: 'github' | 'gitlab';
+  repoOwner: string;
+  repoName: string;
+  projectId?: string | number; // GitLab specific
+  token: string;
+  gitlabUrl?: string;
+  defaultBranch?: string;
+  onBranchSelect: (branch: string) => void;
+  onClose: () => void;
+  isOpen: boolean;
+  className?: string;
+}
+
+export function BranchSelector({
+  provider,
+  repoOwner,
+  repoName,
+  projectId,
+  token,
+  gitlabUrl,
+  defaultBranch,
+  onBranchSelect,
+  onClose,
+  isOpen,
+  className,
+}: BranchSelectorProps) {
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedBranch, setSelectedBranch] = useState<string>('');
+
+  const filteredBranches = branches.filter((branch) => branch.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const fetchBranches = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      let response: Response;
+
+      if (provider === 'github') {
+        response = await fetch('/api/github-branches', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            owner: repoOwner,
+            repo: repoName,
+            token,
+          }),
+        });
+      } else {
+        // GitLab
+        if (!projectId) {
+          throw new Error('Project ID is required for GitLab repositories');
+        }
+
+        response = await fetch('/api/gitlab-branches', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            token,
+            gitlabUrl: gitlabUrl || 'https://gitlab.com',
+            projectId,
+          }),
+        });
+      }
+
+      if (!response.ok) {
+        const errorData: any = await response.json().catch(() => ({ error: 'Failed to fetch branches' }));
+        throw new Error(errorData.error || `HTTP ${response.status}`);
+      }
+
+      const data: any = await response.json();
+      setBranches(data.branches || []);
+
+      // Set default selected branch
+      const defaultBranchToSelect = data.defaultBranch || defaultBranch || 'main';
+      setSelectedBranch(defaultBranchToSelect);
+    } catch (err) {
+      console.error('Failed to fetch branches:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch branches');
+      setBranches([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleBranchSelect = (branchName: string) => {
+    setSelectedBranch(branchName);
+  };
+
+  const handleConfirmSelection = () => {
+    onBranchSelect(selectedBranch);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (isOpen && !branches.length) {
+      fetchBranches();
+    }
+  }, [isOpen, repoOwner, repoName, projectId]);
+
+  // Reset search when closing
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.95 }}
+          transition={{ duration: 0.2 }}
+          className={classNames(
+            'bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-bolt-elements-borderColor max-w-md w-full max-h-[80vh] flex flex-col',
+            className,
+          )}
+        >
+          {/* Header */}
+          <div className="p-6 border-b border-bolt-elements-borderColor flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                <GitBranch className="w-6 h-6 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Select Branch</h3>
+                <p className="text-sm text-bolt-elements-textSecondary">
+                  {repoOwner}/{repoName}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg hover:bg-bolt-elements-background-depth-1 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-all"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex flex-col">
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8 space-y-4">
+                <div className="animate-spin w-8 h-8 border-2 border-bolt-elements-borderColorActive border-t-transparent rounded-full" />
+                <p className="text-sm text-bolt-elements-textSecondary">Loading branches...</p>
+              </div>
+            ) : error ? (
+              <div className="flex flex-col items-center justify-center p-8 space-y-4">
+                <div className="text-red-500 mb-2">
+                  <GitBranch className="w-8 h-8 mx-auto" />
+                </div>
+                <p className="text-sm text-red-600 text-center">{error}</p>
+                <Button onClick={fetchBranches} variant="outline" size="sm">
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  Retry
+                </Button>
+              </div>
+            ) : (
+              <>
+                {/* Search */}
+                {branches.length > 10 && (
+                  <div className="p-4 border-b border-bolt-elements-borderColor">
+                    <input
+                      type="text"
+                      placeholder="Search branches..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="w-full px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+                    />
+                  </div>
+                )}
+
+                {/* Branch List */}
+                <div className="flex-1 overflow-y-auto">
+                  {filteredBranches.length > 0 ? (
+                    <div className="p-4 space-y-1">
+                      {filteredBranches.map((branch) => (
+                        <button
+                          key={branch.name}
+                          onClick={() => handleBranchSelect(branch.name)}
+                          className={classNames(
+                            'w-full text-left p-3 rounded-lg transition-all duration-200 border',
+                            selectedBranch === branch.name
+                              ? 'bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-100'
+                              : 'bg-bolt-elements-background-depth-1 border-transparent hover:bg-bolt-elements-background-depth-2',
+                          )}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <GitBranch className="w-4 h-4 flex-shrink-0 text-bolt-elements-textSecondary" />
+                              <span className="font-medium text-bolt-elements-textPrimary truncate">{branch.name}</span>
+                              <div className="flex items-center gap-1 flex-shrink-0">
+                                {branch.isDefault && <Star className="w-3 h-3 text-yellow-500" />}
+                                {branch.protected && <Shield className="w-3 h-3 text-red-500" />}
+                              </div>
+                            </div>
+                            {selectedBranch === branch.name && <Check className="w-4 h-4 text-blue-600" />}
+                          </div>
+                          <div className="text-xs text-bolt-elements-textSecondary mt-1 truncate">
+                            {branch.sha.substring(0, 8)}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center p-8">
+                      <p className="text-sm text-bolt-elements-textSecondary">
+                        {searchQuery ? 'No branches found matching your search.' : 'No branches available.'}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Footer */}
+          {!isLoading && !error && branches.length > 0 && (
+            <div className="p-6 border-t border-bolt-elements-borderColor flex items-center justify-between">
+              <div className="text-sm text-bolt-elements-textSecondary">
+                {selectedBranch && (
+                  <>
+                    Selected: <span className="font-medium">{selectedBranch}</span>
+                  </>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                <Button onClick={onClose} variant="outline" size="sm">
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleConfirmSelection}
+                  disabled={!selectedBranch}
+                  size="sm"
+                  className="bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  Clone Branch
+                </Button>
+              </div>
+            </div>
+          )}
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}

tools/bolt.diy/app/components/ui/Breadcrumbs.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { motion } from 'framer-motion';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: string;
+  onClick?: () => void;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  className?: string;
+  separator?: string;
+  maxItems?: number;
+  renderItem?: (item: BreadcrumbItem, index: number, isLast: boolean) => React.ReactNode;
+}
+
+export function Breadcrumbs({
+  items,
+  className,
+  separator = 'i-ph:caret-right',
+  maxItems = 0,
+  renderItem,
+}: BreadcrumbsProps) {
+  const displayItems =
+    maxItems > 0 && items.length > maxItems
+      ? [
+          ...items.slice(0, 1),
+          { label: '...', onClick: undefined, href: undefined },
+          ...items.slice(-Math.max(1, maxItems - 2)),
+        ]
+      : items;
+
+  const defaultRenderItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
+    const content = (
+      <div className="flex items-center gap-1.5">
+        {item.icon && <span className={classNames(item.icon, 'w-3.5 h-3.5')} />}
+        <span
+          className={classNames(
+            isLast
+              ? 'font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+              : 'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary-dark',
+            item.onClick || item.href ? 'cursor-pointer' : '',
+          )}
+        >
+          {item.label}
+        </span>
+      </div>
+    );
+
+    if (item.href && !isLast) {
+      return (
+        <motion.a href={item.href} className="hover:underline" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+          {content}
+        </motion.a>
+      );
+    }
+
+    if (item.onClick && !isLast) {
+      return (
+        <motion.button
+          type="button"
+          onClick={item.onClick}
+          className="hover:underline"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          {content}
+        </motion.button>
+      );
+    }
+
+    return content;
+  };
+
+  return (
+    <nav className={classNames('flex items-center', className)} aria-label="Breadcrumbs">
+      <ol className="flex items-center gap-1.5">
+        {displayItems.map((item, index) => {
+          const isLast = index === displayItems.length - 1;
+
+          return (
+            <li key={index} className="flex items-center">
+              {renderItem ? renderItem(item, index, isLast) : defaultRenderItem(item, index, isLast)}
+              {!isLast && (
+                <span
+                  className={classNames(
+                    separator,
+                    'w-3 h-3 mx-1 text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
+                  )}
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}