crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,346 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface FileIconProps {
+  filename: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function FileIcon({ filename, size = 'md', className }: FileIconProps) {
+  const getFileExtension = (filename: string): string => {
+    return filename.split('.').pop()?.toLowerCase() || '';
+  };
+
+  const getIconForExtension = (extension: string): string => {
+    // Code files
+    if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
+      return 'i-ph:file-js';
+    }
+
+    if (['html', 'htm', 'xhtml'].includes(extension)) {
+      return 'i-ph:file-html';
+    }
+
+    if (['css', 'scss', 'sass', 'less'].includes(extension)) {
+      return 'i-ph:file-css';
+    }
+
+    if (['json', 'jsonc'].includes(extension)) {
+      return 'i-ph:brackets-curly';
+    }
+
+    if (['md', 'markdown'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
+      return 'i-ph:file-py';
+    }
+
+    if (['java', 'class', 'jar'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['php'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['rb', 'ruby'].includes(extension)) {
+      return 'i-ph:file-rs';
+    }
+
+    if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
+      return 'i-ph:file-cpp';
+    }
+
+    if (['go'].includes(extension)) {
+      return 'i-ph:file-rs';
+    }
+
+    if (['rs', 'rust'].includes(extension)) {
+      return 'i-ph:file-rs';
+    }
+
+    if (['swift'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['kt', 'kotlin'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['dart'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    // Config files
+    if (['yml', 'yaml'].includes(extension)) {
+      return 'i-ph:file-cloud';
+    }
+
+    if (['xml', 'svg'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['toml'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    if (['ini', 'conf', 'config'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
+      return 'i-ph:file-lock';
+    }
+
+    // Document files
+    if (['pdf'].includes(extension)) {
+      return 'i-ph:file-pdf';
+    }
+
+    if (['doc', 'docx'].includes(extension)) {
+      return 'i-ph:file-doc';
+    }
+
+    if (['xls', 'xlsx'].includes(extension)) {
+      return 'i-ph:file-xls';
+    }
+
+    if (['ppt', 'pptx'].includes(extension)) {
+      return 'i-ph:file-ppt';
+    }
+
+    if (['txt'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    // Image files
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
+      return 'i-ph:file-image';
+    }
+
+    // Audio/Video files
+    if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
+      return 'i-ph:file-audio';
+    }
+
+    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
+      return 'i-ph:file-video';
+    }
+
+    // Archive files
+    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+      return 'i-ph:file-zip';
+    }
+
+    // Special files
+    if (filename === 'package.json') {
+      return 'i-ph:package';
+    }
+
+    if (filename === 'tsconfig.json') {
+      return 'i-ph:file-ts';
+    }
+
+    if (filename === 'README.md') {
+      return 'i-ph:book-open';
+    }
+
+    if (filename === 'LICENSE') {
+      return 'i-ph:scales';
+    }
+
+    if (filename === '.gitignore') {
+      return 'i-ph:git-branch';
+    }
+
+    if (filename.startsWith('Dockerfile')) {
+      return 'i-ph:file-code';
+    }
+
+    // Default
+    return 'i-ph:file';
+  };
+
+  const getIconColorForExtension = (extension: string): string => {
+    // Code files
+    if (['js', 'jsx'].includes(extension)) {
+      return 'text-yellow-500';
+    }
+
+    if (['ts', 'tsx'].includes(extension)) {
+      return 'text-blue-500';
+    }
+
+    if (['html', 'htm', 'xhtml'].includes(extension)) {
+      return 'text-orange-500';
+    }
+
+    if (['css', 'scss', 'sass', 'less'].includes(extension)) {
+      return 'text-blue-400';
+    }
+
+    if (['json', 'jsonc'].includes(extension)) {
+      return 'text-yellow-400';
+    }
+
+    if (['md', 'markdown'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
+      return 'text-green-500';
+    }
+
+    if (['java', 'class', 'jar'].includes(extension)) {
+      return 'text-red-500';
+    }
+
+    if (['php'].includes(extension)) {
+      return 'text-purple-500';
+    }
+
+    if (['rb', 'ruby'].includes(extension)) {
+      return 'text-red-600';
+    }
+
+    if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
+      return 'text-blue-600';
+    }
+
+    if (['go'].includes(extension)) {
+      return 'text-cyan-500';
+    }
+
+    if (['rs', 'rust'].includes(extension)) {
+      return 'text-orange-600';
+    }
+
+    if (['swift'].includes(extension)) {
+      return 'text-orange-500';
+    }
+
+    if (['kt', 'kotlin'].includes(extension)) {
+      return 'text-purple-400';
+    }
+
+    if (['dart'].includes(extension)) {
+      return 'text-cyan-400';
+    }
+
+    // Config files
+    if (['yml', 'yaml'].includes(extension)) {
+      return 'text-purple-300';
+    }
+
+    if (['xml'].includes(extension)) {
+      return 'text-orange-300';
+    }
+
+    if (['svg'].includes(extension)) {
+      return 'text-green-400';
+    }
+
+    if (['toml'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    if (['ini', 'conf', 'config'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
+      return 'text-green-500';
+    }
+
+    // Document files
+    if (['pdf'].includes(extension)) {
+      return 'text-red-500';
+    }
+
+    if (['doc', 'docx'].includes(extension)) {
+      return 'text-blue-600';
+    }
+
+    if (['xls', 'xlsx'].includes(extension)) {
+      return 'text-green-600';
+    }
+
+    if (['ppt', 'pptx'].includes(extension)) {
+      return 'text-red-600';
+    }
+
+    if (['txt'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    // Image files
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
+      return 'text-pink-500';
+    }
+
+    // Audio/Video files
+    if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
+      return 'text-green-500';
+    }
+
+    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
+      return 'text-blue-500';
+    }
+
+    // Archive files
+    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+      return 'text-yellow-600';
+    }
+
+    // Special files
+    if (filename === 'package.json') {
+      return 'text-red-400';
+    }
+
+    if (filename === 'tsconfig.json') {
+      return 'text-blue-500';
+    }
+
+    if (filename === 'README.md') {
+      return 'text-blue-400';
+    }
+
+    if (filename === 'LICENSE') {
+      return 'text-gray-500';
+    }
+
+    if (filename === '.gitignore') {
+      return 'text-orange-500';
+    }
+
+    if (filename.startsWith('Dockerfile')) {
+      return 'text-blue-500';
+    }
+
+    // Default
+    return 'text-gray-400';
+  };
+
+  const getSizeClass = (size: 'sm' | 'md' | 'lg'): string => {
+    switch (size) {
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const extension = getFileExtension(filename);
+  const icon = getIconForExtension(extension);
+  const color = getIconColorForExtension(extension);
+  const sizeClass = getSizeClass(size);
+
+  return <span className={classNames(icon, color, sizeClass, className)} />;
+}

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface FilterChipProps {
+  /** The label text to display */
+  label: string;
+
+  /** Optional value to display after the label */
+  value?: string | number;
+
+  /** Function to call when the remove button is clicked */
+  onRemove?: () => void;
+
+  /** Whether the chip is active/selected */
+  active?: boolean;
+
+  /** Optional icon to display before the label */
+  icon?: string;
+
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * FilterChip component
+ *
+ * A chip component for displaying filters with optional remove button.
+ */
+export function FilterChip({ label, value, onRemove, active = false, icon, className }: FilterChipProps) {
+  // Animation variants
+  const variants = {
+    initial: { opacity: 0, scale: 0.9 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.9 },
+  };
+
+  return (
+    <motion.div
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={variants}
+      transition={{ duration: 0.2 }}
+      className={classNames(
+        'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all',
+        active
+          ? 'bg-purple-500/15 text-purple-600 dark:text-purple-400 border border-purple-500/30'
+          : 'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
+        onRemove && 'pr-1',
+        className,
+      )}
+    >
+      {/* Icon */}
+      {icon && <span className={classNames(icon, 'text-inherit')} />}
+
+      {/* Label and value */}
+      <span>
+        {label}
+        {value !== undefined && ': '}
+        {value !== undefined && (
+          <span
+            className={
+              active
+                ? 'text-purple-700 dark:text-purple-300 font-semibold'
+                : 'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+            }
+          >
+            {value}
+          </span>
+        )}
+      </span>
+
+      {/* Remove button */}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className={classNames(
+            'ml-1 p-0.5 rounded-full hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors',
+            active
+              ? 'text-purple-600 dark:text-purple-400'
+              : 'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
+          )}
+          aria-label={`Remove ${label} filter`}
+        >
+          <span className="i-ph:x w-3 h-3" />
+        </button>
+      )}
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,192 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { classNames } from '~/utils/classNames';
+import { animate } from 'framer-motion';
+
+interface GlowingEffectProps {
+  blur?: number;
+  inactiveZone?: number;
+  proximity?: number;
+  spread?: number;
+  variant?: 'default' | 'white';
+  glow?: boolean;
+  className?: string;
+  disabled?: boolean;
+  movementDuration?: number;
+  borderWidth?: number;
+}
+
+const GlowingEffect = memo(
+  ({
+    blur = 0,
+    inactiveZone = 0.7,
+    proximity = 0,
+    spread = 20,
+    variant = 'default',
+    glow = false,
+    className,
+    movementDuration = 2,
+    borderWidth = 1,
+    disabled = true,
+  }: GlowingEffectProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lastPosition = useRef({ x: 0, y: 0 });
+    const animationFrameRef = useRef<number>(0);
+
+    const handleMove = useCallback(
+      (e?: MouseEvent | { x: number; y: number }) => {
+        if (!containerRef.current) {
+          return;
+        }
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const element = containerRef.current;
+
+          if (!element) {
+            return;
+          }
+
+          const { left, top, width, height } = element.getBoundingClientRect();
+          const mouseX = e?.x ?? lastPosition.current.x;
+          const mouseY = e?.y ?? lastPosition.current.y;
+
+          if (e) {
+            lastPosition.current = { x: mouseX, y: mouseY };
+          }
+
+          const center = [left + width * 0.5, top + height * 0.5];
+          const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]);
+          const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
+
+          if (distanceFromCenter < inactiveRadius) {
+            element.style.setProperty('--active', '0');
+            return;
+          }
+
+          const isActive =
+            mouseX > left - proximity &&
+            mouseX < left + width + proximity &&
+            mouseY > top - proximity &&
+            mouseY < top + height + proximity;
+
+          element.style.setProperty('--active', isActive ? '1' : '0');
+
+          if (!isActive) {
+            return;
+          }
+
+          const currentAngle = parseFloat(element.style.getPropertyValue('--start')) || 0;
+          const targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90;
+
+          const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
+          const newAngle = currentAngle + angleDiff;
+
+          animate(currentAngle, newAngle, {
+            duration: movementDuration,
+            ease: [0.16, 1, 0.3, 1],
+            onUpdate: (value) => {
+              element.style.setProperty('--start', String(value));
+            },
+          });
+        });
+      },
+      [inactiveZone, proximity, movementDuration],
+    );
+
+    useEffect(() => {
+      if (disabled) {
+        return undefined;
+      }
+
+      const handleScroll = () => handleMove();
+      const handlePointerMove = (e: PointerEvent) => handleMove(e);
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      document.body.addEventListener('pointermove', handlePointerMove, {
+        passive: true,
+      });
+
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        window.removeEventListener('scroll', handleScroll);
+        document.body.removeEventListener('pointermove', handlePointerMove);
+      };
+    }, [handleMove, disabled]);
+
+    return (
+      <>
+        <div
+          className={classNames(
+            'pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity',
+            glow && 'opacity-100',
+            variant === 'white' && 'border-white',
+            disabled && '!block',
+          )}
+        />
+        <div
+          ref={containerRef}
+          style={
+            {
+              '--blur': `${blur}px`,
+              '--spread': spread,
+              '--start': '0',
+              '--active': '0',
+              '--glowingeffect-border-width': `${borderWidth}px`,
+              '--repeating-conic-gradient-times': '5',
+              '--gradient':
+                variant === 'white'
+                  ? `repeating-conic-gradient(
+                      from 236.84deg at 50% 50%,
+                      var(--black),
+                      var(--black) calc(25% / var(--repeating-conic-gradient-times))
+                    )`
+                  : `radial-gradient(circle, #9333ea 10%, #9333ea00 20%),
+                    radial-gradient(circle at 40% 40%, #a855f7 5%, #a855f700 15%),
+                    radial-gradient(circle at 60% 60%, #8b5cf6 10%, #8b5cf600 20%),
+                    radial-gradient(circle at 40% 60%, #f63bdd 10%, #3b82f600 20%),
+                    repeating-conic-gradient(
+                      from 236.84deg at 50% 50%,
+                      #9333ea 0%,
+                      #a855f7 calc(25% / var(--repeating-conic-gradient-times)),
+                      #8b5cf6 calc(50% / var(--repeating-conic-gradient-times)),
+                      #f63bdd calc(75% / var(--repeating-conic-gradient-times)),
+                      #9333ea calc(100% / var(--repeating-conic-gradient-times))
+                    )`,
+            } as React.CSSProperties
+          }
+          className={classNames(
+            'pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity',
+            glow && 'opacity-100',
+            blur > 0 && 'blur-[var(--blur)] ',
+            className,
+            disabled && '!hidden',
+          )}
+        >
+          <div
+            className={classNames(
+              'glow',
+              'rounded-[inherit]',
+              'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
+              'after:[border:var(--glowingeffect-border-width)_solid_transparent]',
+              'after:[background:var(--gradient)] after:[background-attachment:fixed]',
+              'after:opacity-[var(--active)] after:transition-opacity after:duration-300',
+              'after:[mask-clip:padding-box,border-box]',
+              'after:[mask-composite:intersect]',
+              'after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]',
+            )}
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+GlowingEffect.displayName = 'GlowingEffect';
+
+export { GlowingEffect };