powerhome · nidaqg · Sep 3, 2026
@@ -87,11 +87,10 @@ def application
       Rails.logger.error("Error reading kit schema: #{e.message}")
     end
 
-    # Get kit schema and global props schema for playground.
-    # On production, omit playground_config — kit Playground tabs run on staging only.
+    # Get kit schema and global props schema for playground
     kit_schema = read_kit_schema(@kit)
     global_props_schema = read_global_props_schema
-    playground_config = playbook_production_host? ? nil : read_playground_config(@kit)
+    playground_config = read_playground_config(@kit)
 
     # first example from each kit
     examples = @examples.map do |example|
@@ -199,12 +198,6 @@ def application
     end
 
     if on_playground && request.format.json?
-      # Production must not expose Playground builder payloads (VPN / staging only).
-      if playbook_production_host?
-        head :not_found
-        return
-      end
-
       render json: {
         playground_kits: playground_kits,
         global_props_schema: global_props_schema,
@@ -593,11 +586,6 @@ def playground_kits
     end
   end
 
-  # Deployed production website host only (not review apps / localhost / staging).
-  def playbook_production_host?
-    request.host == "playbook.powerapp.cloud"
-  end
-
   # JSON + Rails prerendered examples: ERB under pb_advanced_table/docs expects
   # @table_data (OpenStruct), while the SPA passes plain JSON via @beta_table_* keys.
   # Full Screen React docs also render AdvancedTable examples, so they need the

@@ -12,7 +12,6 @@ import LayoutRight from "./src/layouts/LayoutRight";
 import Header from "./src/layouts/Header";
 import MobileNav, { MobileHamburger } from "./src/components/MobileNav";
 import { PlatformToggle } from "./src/components/PlatformToggle";
-import PlaygroundVpnRequiredDialog from "./src/components/PlaygroundVpnRequiredDialog";
 import { useLoaderData, useLocation, useNavigate } from "react-router-dom";
 import { PlatformContext } from "./src/contexts/PlatformContext";
 import { DarkModeProvider, useDarkMode } from "./src/contexts/DarkModeContext";
@@ -272,7 +271,6 @@ function WebsiteContent() {
           </Layout.Side>
           {kits.length > 0 && <LayoutRight />}
         </Layout>
-        <PlaygroundVpnRequiredDialog />
       </div>
     </PlatformContext.Provider>
   );

@@ -1,5 +1,4 @@
 import { LoaderFunctionArgs } from "react-router-dom";
-import { isProductionHost } from "../utils/siteNavigation";
 
 interface ComponentTypes {
   name: string;
@@ -116,23 +115,8 @@ export const IconsLoader = async () => {
 let playgroundCache: any = null;
 
 export const PlaygroundLoader = async () => {
-  // Production never loads Playground payloads — UI redirects to staging / shows VPN dialog.
-  // Avoids fetching /playground.json before that gate runs.
-  if (isProductionHost()) {
-    return {
-      playground_kits: [],
-      global_props_schema: null,
-    };
-  }
-
   if (playgroundCache) return playgroundCache;
   const response = await fetch("/playground.json");
-  if (!response.ok) {
-    return {
-      playground_kits: [],
-      global_props_schema: null,
-    };
-  }
   const data = await response.json();
   playgroundCache = data;
   return data;

@@ -7,7 +7,6 @@ import KitSearch from "../components/KitSearch";
 import { PlatformToggle } from "../components/PlatformToggle";
 import DarkModeToggle from "../components/DarkModeToggle";
 import { useDarkMode } from "../contexts/DarkModeContext";
-import { isStagingHost, navigateSite, siteHref } from "../utils/siteNavigation";
 import "./header.scss";
 
 interface HeaderProps {
@@ -59,15 +58,9 @@ const Header = ({
             paddingBottom="xxs"
             paddingX="md"
           >
-            {isStagingHost() ? (
-              <a href={siteHref("/")}>
-                <Image alt="Playbook logo" url={PBLogo} />
-              </a>
-            ) : (
-              <Link to="/">
-                <Image alt="Playbook logo" url={PBLogo} />
-              </Link>
-            )}
+            <Link to="/">
+              <Image alt="Playbook logo" url={PBLogo} />
+            </Link>
             <Badge
               text={PBversion}
               dark={darkMode}
@@ -103,7 +96,7 @@ const Header = ({
                 kits={search_list}
                 platform={platform}
                 global_props_and_tokens={global_props_and_tokens}
-                onNavigate={(path) => navigateSite(navigate, path)}
+                onNavigate={(path) => navigate(path)}
                 marginBottom="none"
               />
               {isKitShowPage && <DarkModeToggle />}

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { NavItem } from "playbook-ui";
 import { useNavigate, useLocation } from "react-router-dom";
 import { linkFormat } from "../../../../../../utilities/website_sidebar_helper";
-import { navigateSite } from "../../../utils/siteNavigation";
 
 export const kitsType = (type: string | null | undefined) => {
   if (type === null || type === undefined) {
@@ -29,7 +28,7 @@ export const KitsNavItem = ({
   const handleMainClick = (index:number, categoryKey:string) => {
     const linkPath = generateLink(categoryKey, null, type);
     if (linkPath && navigate) {
-      navigateSite(navigate, linkPath);
+      navigate(linkPath);
     }
 
     collapsibles.forEach(([, , setCollapsed], idx) => {
@@ -60,7 +59,7 @@ export const KitsNavItem = ({
   const handleSubItemClick = (subLinkIndex:number, sublink:string, Index:number) => {
     const linkPath = generateLink(Object.keys(link)[0], sublink, type);
     if (navigate) {
-      navigateSite(navigate, linkPath);
+      navigate(linkPath);
     }
 
     updateTopLevelNav(parentIndex);
@@ -71,7 +70,7 @@ export const KitsNavItem = ({
   const handleNonCollapseLinkClick = (linkName:string) => {
     const linkPath = generateLink(null, linkName, type);
     if (navigate) {
-      navigateSite(navigate, linkPath);
+      navigate(linkPath);
     }
 
     updateTopLevelNav(parentIndex);

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { NavItem } from "playbook-ui";
 import { useNavigate, useLocation } from "react-router-dom";
-import { navigateSite } from "../../../utils/siteNavigation";
 
 type CollapsibleGroupConfig = {
   parentKey: string;
@@ -114,7 +113,7 @@ export const OtherNavItems = ({
 
   const handleItemClick = (link) => {
     if (navigate) {
-      navigateSite(navigate, link.link);
+      navigate(link.link);
     }
     updateTopLevelNav(parentIndex);
   };

@@ -5,7 +5,6 @@ import { KitsNavItem, kitsType } from "./NavComponents/KitsNavComponent";
 import { SideBarNavItems } from "./MenuData/SidebarNavItems";
 import { OtherNavItems } from "./NavComponents/OtherNavComponent";
 import { CollapsedHoverNav } from "./CollapsedHoverNav";
-import { navigateSite } from "../../utils/siteNavigation";
 
 export const TopLevelNavItem = ({
   dark,
@@ -78,7 +77,7 @@ export const TopLevelNavItem = ({
   const handleComponentsClick = (item, index) => {
     const linkPath = TopLevelLink(SideBarNavItems[index].link);
     if (linkPath && navigate) {
-      navigateSite(navigate, linkPath);
+      navigate(linkPath);
     }
 
     topLevelCollapsibles.forEach(([, , setCollapsed], idx) => {

@@ -1,6 +1,6 @@
-import { useLoaderData, useParams, useLocation, useNavigate } from "react-router-dom";
+import { useLoaderData, useParams } from "react-router-dom";
 import { Body, Card, Detail, Flex, FlexItem, Icon, Nav, NavItem, SectionSeparator, Title } from "playbook-ui";
-import { useState, useMemo, useEffect, useCallback } from "react";
+import { useState, useMemo } from "react";
 import { useDarkMode } from "../../contexts/DarkModeContext";
 
 import { MarkdownContent } from "../../components/MarkdownContent";
@@ -12,19 +12,9 @@ import { PropsTab } from "./Tabs/PropsTab";
 // import { ReferencesTab } from "./Tabs/ReferencesTab";
 import { PlaygroundTab } from "./Tabs/PlaygroundTab";
 import { PLAYGROUND_ENABLED_KITS } from "./playgroundEnabledKits";
-import {
-  goToStaging,
-  isProductionHost,
-  isStagingHost,
-  kitShowTabHref,
-  PROD_ORIGIN,
-  STAGING_ORIGIN,
-} from "../../utils/siteNavigation";
 
 const KitShow = () => {
   const { name } = useParams();
-  const location = useLocation();
-  const navigate = useNavigate();
   const { platform } = usePlatform();
   const loaderData = useLoaderData() as any;
   const {
@@ -101,49 +91,11 @@ const KitShow = () => {
     };
   }, [currentKit, loaderData]);
 
+  const [activeTab, setActiveTab] = useState<string>("docs");
   const showPlayground = platform !== "rails" && PLAYGROUND_ENABLED_KITS.includes(currentKit);
-  const tabFromUrl = new URLSearchParams(location.search).get("tab");
-  const [activeTab, setActiveTab] = useState<string>(
-    tabFromUrl === "playground" && showPlayground
-      ? "playground"
-      : tabFromUrl === "props"
-        ? "props"
-        : "docs"
-  );
   const displayTab =
     activeTab === "playground" && !showPlayground ? "docs" : activeTab;
 
-  // Keep UI in sync when ?tab= changes (back/forward, shared links).
-  useEffect(() => {
-    const nextTab =
-      tabFromUrl === "playground" && showPlayground
-        ? "playground"
-        : tabFromUrl === "props"
-          ? "props"
-          : "docs";
-    setActiveTab(nextTab);
-  }, [tabFromUrl, showPlayground]);
-
-  // Production: kit Playground tab lives on staging; Docs/Props live on prod.
-  // Local / review: keep tabs on the current host.
-  useEffect(() => {
-    if (!isProductionHost() && !isStagingHost()) return
-
-    const onStaging = isStagingHost();
-    const wantsPlayground = tabFromUrl === "playground" && showPlayground;
-
-    if (onStaging && !wantsPlayground) {
-      window.location.replace(`${PROD_ORIGIN}${location.pathname}${location.hash}`);
-      return;
-    }
-
-    if (isProductionHost() && wantsPlayground) {
-      void goToStaging(
-        `${STAGING_ORIGIN}${location.pathname}?tab=playground${location.hash}`
-      );
-    }
-  }, [location.pathname, location.hash, showPlayground, tabFromUrl]);
-
   const kitShowTitle = useMemo(() => {
     const sectionSlug = name ?? "";
     if (currentKit === "advanced_table" && sectionSlug) {
@@ -152,48 +104,12 @@ const KitShow = () => {
     return linkFormat(sectionSlug || currentKit);
   }, [currentKit, name]);
 
-  // Keep ?tab= in sync: Props/Playground set it; Docs clears it so refresh/share match the UI.
-  const syncTabInUrl = useCallback(
-    (tab: string) => {
-      const params = new URLSearchParams(location.search);
-      if (tab === "docs") {
-        params.delete("tab");
-      } else {
-        params.set("tab", tab);
-      }
-      const search = params.toString();
-      const next = `${location.pathname}${search ? `?${search}` : ""}${location.hash}`;
-      const current = `${location.pathname}${location.search}${location.hash}`;
-      if (next !== current) {
-        navigate(next, { replace: true });
-      }
-    },
-    [location.hash, location.pathname, location.search, navigate]
-  );
-
   const handleTabChange = (tab: string) => {
-    if (!isProductionHost() && !isStagingHost()) {
-      if (tab === "playground") setDarkMode(false);
-      setActiveTab(tab);
-      syncTabInUrl(tab);
-      return;
-    }
-
-    const onStaging = isStagingHost();
-
     if (tab === "playground") {
       setDarkMode(false);
-      if (!onStaging) {
-        void goToStaging(kitShowTabHref("playground", location.pathname));
-        return;
-      }
-    } else if (onStaging) {
-      window.location.assign(kitShowTabHref(tab, location.pathname));
-      return;
     }
 
     setActiveTab(tab);
-    syncTabInUrl(tab);
   };
 
   const showStatusBadge = kitStatus === "beta" || kitStatus === "deprecated";