refactor: replace return undefined with return or return null

- Replace 'return undefined;' with 'return;' in regular functions per style guide
- Replace 'return undefined;' with 'return null;' in React components
- Keep 'return undefined;' in callbacks where type requires string | undefined
- Add PanelBanner component with warning variant to page settings
- Show redirect conflict warning in page settings when redirect would override page

Author: kof

apps/builder/app/builder/features/breakpoints/breakpoint-editor-utils.ts

@@ -66,7 +66,7 @@ export const buildBreakpointFromEditorState = (
     newBreakpoint.condition = originalBreakpoint.condition;
   } else {
     // Invalid: no condition and no valid width
-    return undefined;
+    return;
   }
 
   return newBreakpoint;

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -76,6 +76,7 @@ import {
   $userPlanFeatures,
   $isDesignMode,
 } from "~/shared/nano-states";
+import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 import {
   BindingControl,
   BindingPopover,
@@ -106,6 +107,7 @@ import {
 } from "./page-utils";
 import { Form } from "./form";
 import { CustomMetadata } from "./custom-metadata";
+import { findMatchingRedirect } from "~/shared/project-settings/utils";
 
 const fieldDefaultValues = {
   name: "Untitled",
@@ -524,14 +526,24 @@ const LanguageField = ({
   );
 };
 
-const usePageUrl = (values: Values) => {
-  const pages = useStore($pages);
-  const foldersPath =
-    pages === undefined ? "" : getPagePath(values.parentFolderId, pages);
-  const path = [foldersPath, values.path]
+/**
+ * Compute the full page path from form values.
+ * This combines folder path with page path, handling home page special case.
+ */
+const computePagePath = (values: Values, pages: Pages): string => {
+  if (values.isHomePage) {
+    return "/";
+  }
+  const foldersPath = getPagePath(values.parentFolderId, pages);
+  return [foldersPath, values.path]
     .filter(Boolean)
     .join("/")
     .replace(/\/+/g, "/");
+};
+
+const usePageUrl = (values: Values) => {
+  const pages = useStore($pages);
+  const path = pages === undefined ? "" : computePagePath(values, pages);
 
   const system = useStore($currentSystem);
   const publishedOrigin = useStore($publishedOrigin);
@@ -683,9 +695,33 @@ const FormFields = ({
     computeExpression(values.excludePageFromSearch, variableValues)
   );
 
+  // Check if any redirect matches this page's path
+  const fullPagePath = computePagePath(values, pages);
+  const matchingRedirect = findMatchingRedirect(
+    fullPagePath,
+    pages.redirects ?? []
+  );
+
   return (
     <Grid css={{ height: "100%" }}>
       <ScrollArea>
+        {matchingRedirect && (
+          <PanelBanner variant="warning">
+            <Text>
+              A redirect from "{matchingRedirect.old}" will override this page.
+              The page will not be rendered when published.{" "}
+              <Link
+                color="inherit"
+                underline="always"
+                onClick={() => {
+                  $openProjectSettings.set("redirects");
+                }}
+              >
+                Go to Redirects settings
+              </Link>
+            </Text>
+          </PanelBanner>
+        )}
         {/**
          * ----------------------========<<<Page props>>>>========----------------------
          */}

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-image.tsx

@@ -16,21 +16,21 @@ export const BackgroundImage = ({ index }: { index: number }) => {
       const newValue = parsed.get("background-image");
 
       if (newValue === undefined || newValue?.type === "invalid") {
-        return undefined;
+        return;
       }
 
       const [layer] = newValue.type === "layers" ? newValue.value : [newValue];
 
       // Only validate image URLs, not keywords or other types
       if (layer?.type !== "image" || layer.value.type !== "url") {
-        return undefined;
+        return;
       }
 
       const url = layer.value.url;
 
       // If it's an absolute URL, no validation needed
       if (isAbsoluteUrl(url)) {
-        return undefined;
+        return;
       }
 
       // Check if the asset exists in the project
@@ -42,7 +42,7 @@ export const BackgroundImage = ({ index }: { index: number }) => {
         return [`Asset ${url} is not found in project`];
       }
 
-      return undefined;
+      return;
     },
     []
   );

apps/builder/app/builder/shared/css-variable-utils.tsx

@@ -444,7 +444,7 @@ export const renameCssVariable = (
     }
   });
 
-  return undefined;
+  return;
 };
 
 export const deleteUnusedCssVariables = () => {

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -488,7 +488,7 @@ const isSelectionFirstNode = () => {
 const getDomSelectionRect = () => {
   const domSelection = window.getSelection();
   if (!domSelection || !domSelection.focusNode) {
-    return undefined;
+    return;
   }
 
   // Get current line position

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -282,7 +282,7 @@ const getInstanceSelector = (
       return [...selector, ...rootInstanceSelector];
     }
   }
-  return undefined;
+  return;
 };
 
 const $indexesWithinAncestors = computed(

apps/builder/app/canvas/grid-outline-utils.ts

@@ -0,0 +1,233 @@
+import {
+  $instances,
+  $isResizingCanvas,
+  $stylesIndex,
+  $propValuesByInstanceSelectorWithMemoryProps,
+} from "~/shared/nano-states";
+import { $gridCellData, type GridCellData } from "~/shared/nano-states";
+import { subscribeScrollState } from "~/canvas/shared/scroll-state";
+import { subscribeWindowResize } from "~/shared/dom-hooks";
+import type { InstanceSelector } from "~/shared/tree-utils";
+import { $awareness } from "~/shared/awareness";
+import { getElementByInstanceSelector } from "~/shared/dom-utils";
+import { parseGridTemplateTrackList } from "@webstudio-is/css-data";
+
+const hideGridOverlay = () => {
+  $gridCellData.set(undefined);
+};
+
+// Use probe elements to measure exact cell positions
+// We probe a grid of positions and dedupe based on actual coordinates
+const computeGridCells = (
+  gridElement: HTMLElement,
+  instanceId: string
+): GridCellData | undefined => {
+  const computedStyle = window.getComputedStyle(gridElement);
+  const display = computedStyle.display;
+
+  // Only compute for grid containers
+  if (display !== "grid" && display !== "inline-grid") {
+    return;
+  }
+
+  const MAX_PROBE = 20; // Reasonable limit for probing
+
+  // Get the actual track counts from computed style
+  // This gives us the explicit tracks without creating implicit ones
+  const gridTemplateColumns = computedStyle.gridTemplateColumns;
+  const gridTemplateRows = computedStyle.gridTemplateRows;
+
+  // Parse track counts using the proper CSS parser
+  // Computed values are already expanded (no repeat(), var(), etc.)
+  const columnTracks = parseGridTemplateTrackList(gridTemplateColumns);
+  const rowTracks = parseGridTemplateTrackList(gridTemplateRows);
+
+  // Ensure at least 1 track, cap at MAX_PROBE
+  const columnCount = Math.min(Math.max(1, columnTracks.length), MAX_PROBE);
+  const rowCount = Math.min(Math.max(1, rowTracks.length), MAX_PROBE);
+
+  // First, detect actual column and row count by probing positions
+  // Place probes and track unique X/Y positions
+  const xPositions = new Set<number>();
+  const yPositions = new Set<number>();
+
+  // Probe all cells to get accurate positions (handles gaps, etc.)
+  for (let row = 1; row <= rowCount; row++) {
+    for (let col = 1; col <= columnCount; col++) {
+      const probe = document.createElement("div");
+      probe.style.cssText = `
+        grid-column: ${col};
+        grid-row: ${row};
+        pointer-events: none;
+        visibility: hidden;
+        align-self: stretch;
+        justify-self: stretch;
+      `;
+      gridElement.appendChild(probe);
+      const rect = probe.getBoundingClientRect();
+      gridElement.removeChild(probe);
+
+      xPositions.add(rect.left);
+      xPositions.add(rect.right);
+      yPositions.add(rect.top);
+      yPositions.add(rect.bottom);
+    }
+  }
+
+  // Sort positions
+  const sortedX = [...xPositions].sort((a, b) => a - b);
+  const sortedY = [...yPositions].sort((a, b) => a - b);
+
+  if (sortedX.length < 2 || sortedY.length < 2) {
+    return;
+  }
+
+  // Build lines from positions
+  const gridLeft = sortedX[0];
+  const gridRight = sortedX[sortedX.length - 1];
+  const gridTop = sortedY[0];
+  const gridBottom = sortedY[sortedY.length - 1];
+  const gridWidth = gridRight - gridLeft;
+  const gridHeight = gridBottom - gridTop;
+
+  const horizontalLines: GridCellData["horizontalLines"] = [];
+  for (const y of sortedY) {
+    horizontalLines.push({ y, x: gridLeft, width: gridWidth });
+  }
+
+  const verticalLines: GridCellData["verticalLines"] = [];
+  for (const x of sortedX) {
+    verticalLines.push({ x, y: gridTop, height: gridHeight });
+  }
+
+  return {
+    instanceId,
+    columnCount,
+    rowCount,
+    horizontalLines,
+    verticalLines,
+  };
+};
+
+const findGridContainer = (
+  instanceSelector: Readonly<InstanceSelector>
+): { element: HTMLElement; instanceId: string } | undefined => {
+  // Check each ancestor in the selector
+  for (let i = 0; i < instanceSelector.length; i++) {
+    const ancestorSelector = instanceSelector.slice(i);
+    const element = getElementByInstanceSelector(ancestorSelector);
+
+    if (element) {
+      const computedStyle = window.getComputedStyle(element);
+      const display = computedStyle.display;
+
+      if (display === "grid" || display === "inline-grid") {
+        return { element, instanceId: instanceSelector[i] };
+      }
+    }
+  }
+
+  return;
+};
+
+const subscribeGridOverlay = (
+  selectedInstanceSelector: Readonly<InstanceSelector>,
+  debounceEffect: (callback: () => void) => void
+) => {
+  if (selectedInstanceSelector.length === 0) {
+    hideGridOverlay();
+    return;
+  }
+
+  const gridInfo = findGridContainer(selectedInstanceSelector);
+
+  if (!gridInfo) {
+    hideGridOverlay();
+    return;
+  }
+
+  const { element: gridElement, instanceId } = gridInfo;
+
+  const updateGridOverlay = () => {
+    if ($isResizingCanvas.get()) {
+      hideGridOverlay();
+      return;
+    }
+
+    const cellData = computeGridCells(gridElement, instanceId);
+    $gridCellData.set(cellData);
+  };
+
+  // Initial computation
+  updateGridOverlay();
+
+  const unsubscribeStylesIndex = $stylesIndex.subscribe(() => {
+    // Styles are applied to DOM via RAF in the stylesheet renderer,
+    // then browser needs another frame to recalculate layout
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        debounceEffect(updateGridOverlay);
+      });
+    });
+  });
+
+  const unsubscribeInstances = $instances.subscribe(() => {
+    debounceEffect(updateGridOverlay);
+  });
+
+  const unsubscribePropValues =
+    $propValuesByInstanceSelectorWithMemoryProps.subscribe(() => {
+      debounceEffect(updateGridOverlay);
+    });
+
+  const unsubscribeIsResizing = $isResizingCanvas.subscribe((isResizing) => {
+    if (isResizing) {
+      hideGridOverlay();
+    } else {
+      updateGridOverlay();
+    }
+  });
+
+  const unsubscribeScrollState = subscribeScrollState({
+    onScrollStart: hideGridOverlay,
+    onScrollEnd: updateGridOverlay,
+  });
+
+  const unsubscribeWindowResize = subscribeWindowResize({
+    onResizeStart: hideGridOverlay,
+    onResizeEnd: updateGridOverlay,
+  });
+
+  return () => {
+    hideGridOverlay();
+    unsubscribeStylesIndex();
+    unsubscribeInstances();
+    unsubscribePropValues();
+    unsubscribeIsResizing();
+    unsubscribeScrollState();
+    unsubscribeWindowResize();
+  };
+};
+
+export const subscribeGridOverlayOnSelected = (
+  debounceEffect: (callback: () => void) => void
+) => {
+  let previousSelectedInstance: readonly string[] | undefined = undefined;
+  let unsubscribeGridOverlay = () => {};
+
+  const unsubscribe = $awareness.subscribe((awareness) => {
+    const instanceSelector = awareness?.instanceSelector;
+    if (instanceSelector !== previousSelectedInstance) {
+      unsubscribeGridOverlay();
+      unsubscribeGridOverlay =
+        subscribeGridOverlay(instanceSelector ?? [], debounceEffect) ??
+        (() => {});
+      previousSelectedInstance = instanceSelector;
+    }
+  });
+
+  return () => {
+    unsubscribe();
+    unsubscribeGridOverlay();
+  };
+};