Merge branch 'main' into compiler-hooks

Author: FarhanAliRaza

.github/workflows/check_outdated_dependencies.yml

@@ -52,32 +52,18 @@ jobs:
       - uses: ./.github/actions/setup_build_env
         with:
           python-version: 3.13
-          run-uv-sync: true
 
-      - name: Clone Reflex Website Repo
-        uses: actions/checkout@v4
-        with:
-          repository: reflex-dev/reflex-web
-          ref: main
-          path: reflex-web
-      - name: Compile pyproject.toml into requirements.txt
-        working-directory: ./reflex-web
-        run: |
-          uv pip compile pyproject.toml --no-annotate --no-header --no-deps --output-file requirements.txt
-          uv pip list --format=json | jq -r '"^" + .[].name + "[ =]"' > installed_patterns.txt
-          grep -ivf installed_patterns.txt requirements.txt > requirements.txt.tmp && mv requirements.txt.tmp requirements.txt
-          rm installed_patterns.txt
-      - name: Install Requirements for reflex-web
-        working-directory: ./reflex-web
-        run: uv pip install -r requirements.txt
-      - name: Init Website for reflex-web
-        working-directory: ./reflex-web
-        run: uv run reflex init
+      - name: Install Requirements for reflex-docs
+        working-directory: ./docs/app
+        run: uv sync
+      - name: Init Website for reflex-docs
+        working-directory: ./docs/app
+        run: uv run --active --no-sync reflex init
       - name: Run Website and Check for errors
         run: |
-          uv run bash scripts/integration.sh ./reflex-web dev
+          uv run --active --no-sync bash scripts/integration.sh ./docs/app prod
       - name: Check outdated frontend dependencies
-        working-directory: ./reflex-web/.web
+        working-directory: ./docs/app/.web
         run: |
           raw_outdated=$(/home/runner/.local/share/reflex/bun/bin/bun outdated)
           outdated=$(echo "$raw_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\|' || true)

.github/workflows/integration_tests.yml

@@ -146,55 +146,10 @@ jobs:
         with:
           node-version: 22
 
-      # Build git+https deps as wheels outside sfw (avoids sfw MITM cert issues
-      # with git), then install everything else through sfw for scanning.
-      # TODO: revisit when https://github.com/SocketDev/sfw-free/issues/30 is resolved.
-      - name: Pre-install git dependencies (outside sfw)
-        run: |
-          # Install git+https deps directly without sfw to avoid MITM cert issues.
-          # Their transitive registry deps will still be scanned by sfw uv sync.
-          grep -oP 'git\+https://[^"]+' uv.lock | sort -u > "$RUNNER_TEMP/git-deps.txt" || true
-          if [ -s "$RUNNER_TEMP/git-deps.txt" ]; then
-            echo "Installing git dependencies:"
-            cat "$RUNNER_TEMP/git-deps.txt"
-            uv pip install --no-deps -r "$RUNNER_TEMP/git-deps.txt"
-          else
-            echo "No git dependencies found."
-          fi
-      - name: Install Dependencies (scanned by Socket.dev)
+      - name: Install reflex-docs dependencies
+        working-directory: ./docs/app
         run: sfw uv sync
 
-      # TODO: revisit when https://github.com/SocketDev/sfw-free/issues/30 is resolved.
-      - name: Pre-install reflex-docs git dependencies (outside sfw)
-        working-directory: ./docs/app
-        run: |
-          # Replace reflex-dev/reflex git deps with plain package names (PR version is pre-installed)
-          sed -i -E 's|"([a-zA-Z0-9_-]+)\s*@\s*git\+https://github\.com/reflex-dev/reflex@[^"]*"|"\1"|g' pyproject.toml
-          # Install git+https deps from pyproject.toml before pip compile resolves them.
-          # Exclude reflex itself — the PR version is already installed.
-          grep -oP 'git\+https://[^"'"'"']+' pyproject.toml | sort -u > git-requirements.txt || true
-          if [ -s git-requirements.txt ]; then
-            echo "Installing git dependencies:"
-            cat git-requirements.txt
-            uv pip install --no-deps -r git-requirements.txt
-          fi
-      - name: Compile and install reflex-docs requirements (scanned by Socket.dev)
-        working-directory: ./docs/app
-        run: |
-          sfw uv pip compile pyproject.toml --no-annotate --no-header --no-deps --output-file requirements.txt
-          uv pip list --format=json | jq -r '"^" + .[].name + "[ =]"' > installed_patterns.txt
-          grep -ivf installed_patterns.txt requirements.txt > requirements.txt.tmp && mv requirements.txt.tmp requirements.txt
-          rm installed_patterns.txt
-          if [ -s requirements.txt ]; then
-            sfw uv pip install -r requirements.txt
-          fi
-      - name: Verify installed reflex version matches this checkout
-        run: |
-          expected_sha="$(git rev-parse --short=8 HEAD)"
-          installed_version="$(uv run --active --no-sync python -c 'import importlib.metadata as metadata; print(metadata.version("reflex"))')"
-          echo "Expected checkout SHA: $expected_sha"
-          echo "Installed reflex version: $installed_version"
-          [[ "$installed_version" == *"+$expected_sha" ]]
       - name: Init Website for reflex-docs
         working-directory: ./docs/app
         run: uv run --active --no-sync reflex init
@@ -259,18 +214,9 @@ jobs:
       - uses: ./.github/actions/setup_build_env
         with:
           python-version: ${{ matrix.python-version }}
-          run-uv-sync: true
-
-      - name: Install reflex-docs dependencies
-        working-directory: ./docs/app
-        run: |
-          uv pip compile pyproject.toml --no-annotate --no-header --no-deps --output-file requirements.txt
-          uv pip list --format=json | jq -r '"^" + .[].name + "[ =]"' > installed_patterns.txt
-          grep -ivf installed_patterns.txt requirements.txt > requirements.txt.tmp && mv requirements.txt.tmp requirements.txt
-          rm installed_patterns.txt
       - name: Install Requirements for reflex-docs
         working-directory: ./docs/app
-        run: uv pip install -r requirements.txt
+        run: uv sync
       - name: Init Website for reflex-docs
         working-directory: ./docs/app
         run: uv run --active --no-sync reflex init

.pre-commit-config.yaml

@@ -8,7 +8,7 @@ repos:
   - args:
     - --fix
     - --exit-non-zero-on-fix
-    exclude: ^integration/benchmarks/
+    exclude: ^(integration/benchmarks/|docs/app/)
     id: ruff-check
   repo: https://github.com/astral-sh/ruff-pre-commit
   rev: v0.15.6
@@ -45,6 +45,7 @@ repos:
     - '2'
     - --indent-style
     - space
+    exclude: (\.css$|docs/app/)
     id: biome-format
   repo: https://github.com/biomejs/pre-commit
   rev: v0.6.1

docs/app/assets/chakra_color_mode_provider.js

@@ -20,7 +20,7 @@ export default function ChakraColorModeProvider({ children }) {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
       console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
       );
       mode = defaultColorMode;
     }

docs/app/assets/components/GradientButton.tsx

@@ -1,73 +1,82 @@
-'use client'
+"use client";
 
-import { cn } from 'clsx-for-tailwind'
-import React, { useCallback, useState } from 'react'
+import { cn } from "clsx-for-tailwind";
+import React, { useCallback, useState } from "react";
 
-type ButtonVariant = 'primary' | 'destructive' | 'outline' | 'ghost'
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-xs' | 'icon-sm' | 'icon-md' | 'icon-lg'
+type ButtonVariant = "primary" | "destructive" | "outline" | "ghost";
+type ButtonSize =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-md"
+  | "icon-lg";
 
 interface GradientButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode
-  variant?: ButtonVariant
-  size?: ButtonSize
-  className?: string
-  nativeButton?: boolean
+  children: React.ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  nativeButton?: boolean;
 }
 
 const BASE_CLASSES =
-  'relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:border disabled:border-m-slate-4/80 disabled:bg-m-slate-3 disabled:text-m-slate-8 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 cursor-pointer box-border font-[525] overflow-hidden'
+  'relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:border disabled:border-m-slate-4/80 disabled:bg-m-slate-3 disabled:text-m-slate-8 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 cursor-pointer box-border font-[525] overflow-hidden';
 
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {
   primary:
-    'bg-primary-9 text-primary-2 dark:text-primary-contrast hover:bg-primary-10 shadow-[0_0_1px_var(--primary-9,#6E56CF)_inset,0_2px_0_0_rgba(255,255,255,0.22)_inset]',
-  destructive: 'bg-destructive-9 hover:bg-destructive-10 text-primary-contrast',
+    "bg-primary-9 text-primary-2 dark:text-primary-contrast hover:bg-primary-10 shadow-[0_0_1px_var(--primary-9,#6E56CF)_inset,0_2px_0_0_rgba(255,255,255,0.22)_inset]",
+  destructive: "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast",
   outline:
-    'shadow-[0_-1px_0_0_rgba(0,0,0,0.08)_inset,0_0_0_1px_rgba(0,0,0,0.08)_inset,0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.16)_inset] bg-white dark:bg-m-slate-10 hover:bg-m-slate-2 dark:hover:bg-m-slate-9 text-m-slate-12 dark:text-m-slate-3',
-  ghost: 'text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9',
-}
+    "shadow-[0_-1px_0_0_rgba(0,0,0,0.08)_inset,0_0_0_1px_rgba(0,0,0,0.08)_inset,0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.16)_inset] bg-white dark:bg-m-slate-10 hover:bg-m-slate-2 dark:hover:bg-m-slate-9 text-m-slate-12 dark:text-m-slate-3",
+  ghost:
+    "text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9",
+};
 
 const SIZE_CLASSES: Record<ButtonSize, string> = {
-  xs: 'px-1.5 h-7 rounded-lg gap-1.5 text-sm',
-  sm: 'px-2 h-8 rounded-lg gap-2 text-sm',
-  md: 'px-2.5 h-9 rounded-[0.625rem] gap-2 text-sm',
-  lg: 'px-3 h-10 rounded-[0.625rem] gap-2.5 text-base',
-  'icon-xs': 'size-7 rounded-lg',
-  'icon-sm': 'size-8 rounded-lg',
-  'icon-md': 'size-9 rounded-[0.625rem]',
-  'icon-lg': 'size-10 rounded-[0.625rem]',
-}
+  xs: "px-1.5 h-7 rounded-lg gap-1.5 text-sm",
+  sm: "px-2 h-8 rounded-lg gap-2 text-sm",
+  md: "px-2.5 h-9 rounded-[0.625rem] gap-2 text-sm",
+  lg: "px-3 h-10 rounded-[0.625rem] gap-2.5 text-base",
+  "icon-xs": "size-7 rounded-lg",
+  "icon-sm": "size-8 rounded-lg",
+  "icon-md": "size-9 rounded-[0.625rem]",
+  "icon-lg": "size-10 rounded-[0.625rem]",
+};
 
 export function GradientButton({
   children,
-  variant = 'primary',
-  size = 'md',
+  variant = "primary",
+  size = "md",
   className,
   nativeButton = true,
   ...props
 }: GradientButtonProps) {
-  const [isMouseOver, setIsMouseOver] = useState(false)
-  const [x, setX] = useState(0)
-  const [y, setY] = useState(0)
+  const [isMouseOver, setIsMouseOver] = useState(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
 
   const handleMouseMove = useCallback<
     React.MouseEventHandler<HTMLButtonElement>
   >((e) => {
-    const button = e.currentTarget
-    const rect = button.getBoundingClientRect()
-    setX(e.clientX - rect.left)
-    setY(e.clientY - rect.top)
-  }, [])
+    const button = e.currentTarget;
+    const rect = button.getBoundingClientRect();
+    setX(e.clientX - rect.left);
+    setY(e.clientY - rect.top);
+  }, []);
 
   const handleMouseEnter = useCallback(() => {
-    setIsMouseOver(true)
-  }, [])
+    setIsMouseOver(true);
+  }, []);
 
   const handleMouseLeave = useCallback(() => {
-    setIsMouseOver(false)
-  }, [])
+    setIsMouseOver(false);
+  }, []);
 
-  const Component = nativeButton ? 'button' : 'div'
+  const Component = nativeButton ? "button" : "div";
 
   return (
     <Component
@@ -79,34 +88,36 @@ export function GradientButton({
         BASE_CLASSES,
         VARIANT_CLASSES[variant],
         SIZE_CLASSES[size],
-        className
+        className,
       )}
     >
-      {variant === 'primary' ? (
+      {variant === "primary" ? (
         <>
           <span
             className="block absolute rounded-full pointer-events-none"
             style={{
-              width: '2.75rem',
-              height: '2.75rem',
+              width: "2.75rem",
+              height: "2.75rem",
               left: x,
               top: y,
-              transform: 'translate(-50%, -50%) translateZ(0)',
-              background: '#EB8E90',
-              mixBlendMode: 'plus-lighter',
-              filter: 'blur(28px)',
+              transform: "translate(-50%, -50%) translateZ(0)",
+              background: "#EB8E90",
+              mixBlendMode: "plus-lighter",
+              filter: "blur(28px)",
               opacity: isMouseOver ? 1 : 0,
-              transition: 'opacity 0.3s ease',
-              willChange: 'transform, opacity',
+              transition: "opacity 0.3s ease",
+              willChange: "transform, opacity",
             }}
           />
-          <span className="inline-flex z-10 relative items-center gap-[inherit]">{children}</span>
+          <span className="inline-flex z-10 relative items-center gap-[inherit]">
+            {children}
+          </span>
         </>
       ) : (
         children
       )}
     </Component>
-  )
+  );
 }
 
-export default GradientButton
+export default GradientButton;