compiles

package.json

@@ -83,7 +83,6 @@
     "stylelint-config-tailwindcss": "^0.0.7",
     "stylelint-scss": "^6.0.0",
     "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.1",
     "turbo": "^2.1.2",

packages/commons/react/react-commons/src/index.ts

@@ -2,7 +2,7 @@ export { PREVENT_DEFAULT } from "./preventDefault";
 export { STOP_PROPAGATION } from "./stopPropagation";
 export { useBooleanState } from "./useBooleanState";
 export { useCopyToClipboard } from "./useCopyToClipboard";
-export { useDeepCompareEffect, useDeepCompareMemoize } from "./useDeepEquals";
+export { useDeepCompareEffect, useDeepCompareEffectNoCheck, useDeepCompareMemoize } from "./useDeepEquals";
 export { useDimensions, type Dimensions } from "./useDimensions";
 export { useEventCallback } from "./useEventCallback";
 export { useInterval } from "./useInterval";
@@ -13,6 +13,7 @@ export { useKeyboardPress } from "./useKeyboardPress";
 export { useLocalTextState, type LocalTextState } from "./useLocalTextState";
 export { useMounted } from "./useMounted";
 export { useNumericState } from "./useNumericState";
+export { usePlatform, usePlatformKbdShortcut } from "./usePlatform";
 export { usePrevious } from "./usePrevious";
 export { useResizeObserver } from "./useResizeObserver";
 export { useTimeout } from "./useTimeout";

packages/commons/react/react-commons/src/usePlatform.ts

@@ -0,0 +1,30 @@
+import { PLATFORM } from "@fern-api/ui-core-utils";
+import { useEffect, useState } from "react";
+
+// this is updated by the browser
+let globalPlatform: typeof PLATFORM | undefined;
+
+/**
+ * Returns the platform that the app is running on.
+ *
+ * This is useful for conditional rendering of platform-specific components.
+ */
+export function usePlatform(): typeof PLATFORM | undefined {
+    const [platform, setPlatform] = useState(() => globalPlatform);
+
+    // upon mount, update the global platform
+    useEffect(() => {
+        globalPlatform = PLATFORM;
+        setPlatform(PLATFORM);
+    }, []);
+
+    return platform;
+}
+
+export function usePlatformKbdShortcut(): string | undefined {
+    const platform = usePlatform();
+    if (platform === undefined) {
+        return undefined;
+    }
+    return platform === "mac" ? "⌘" : "Ctrl";
+}

packages/ui/app/package.json

@@ -75,7 +75,6 @@
     "github-slugger": "^2.0.0",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "hast-util-to-string": "^3.0.0",
-    "hastscript": "^9.0.0",
     "iconoir-react": "^7.7.0",
     "jose": "^5.2.3",
     "jotai": "^2.8.1",
@@ -106,7 +105,6 @@
     "remark-math": "^6.0.0",
     "remark-smartypants": "^2.1.0",
     "selection-popover": "^0.3.0",
-    "shiki": "^1.22.0",
     "swr": "^2.2.5",
     "tinycolor2": "^1.6.0",
     "unified": "^11.0.4",

packages/ui/app/src/api-reference/ApiEndpointPage.tsx

@@ -58,7 +58,9 @@ export const ApiEndpointPage: React.FC<ApiEndpointPage.Props> = ({ content }) =>
             <div className="px-4 md:px-6 lg:px-8 lg:hidden">
                 <BottomNavigationNeighbors />
             </div>
-            <BuiltWithFern className="w-fit mx-auto my-8" />
+            <div className="w-fit mx-auto my-8">
+                <BuiltWithFern />
+            </div>
         </ApiPageContext.Provider>
     );
 };

packages/ui/app/src/api-reference/ApiReferencePage.tsx

@@ -38,7 +38,9 @@ export const ApiReferencePage: React.FC<ApiReferencePage.Props> = ({ content })
             {/* anchor links should get additional padding to scroll to on initial load */}
             {!hydrated && <div className="h-full" />}
             <div className="pb-36" />
-            <BuiltWithFern className="w-fit mx-auto my-8" />
+            <div className="w-fit mx-auto my-8">
+                <BuiltWithFern />
+            </div>
         </ApiPageContext.Provider>
     );
 };

packages/ui/app/src/changelog/ChangelogPage.tsx

@@ -167,7 +167,9 @@ export function ChangelogPage({ content }: { content: DocsContent.ChangelogPage
                 )}
 
                 <div className="h-48" />
-                <BuiltWithFern className="w-fit mx-auto my-8" />
+                <div className="w-fit mx-auto my-8">
+                    <BuiltWithFern />
+                </div>
             </main>
         </div>
     );

packages/ui/app/src/css/globals.scss

@@ -6,6 +6,7 @@
 @import "@fern-ui/components/src/index.scss";
 @import "@fern-ui/chatbot/src/index.scss";
 @import "@fern-ui/fern-docs-syntax-highlighter/src/index.scss";
+@import "@fern-ui/fern-docs-search-ui/src/index.scss";
 @import "./components";
 @import "../api-reference";
 @import "../playground";

packages/ui/app/src/layouts/CustomLayout.tsx

@@ -10,7 +10,9 @@ export function CustomLayout({ children }: CustomLayoutProps): ReactElement {
         <main>
             {children}
 
-            <BuiltWithFern className="w-fit mx-auto my-8" />
+            <div className="w-fit mx-auto my-8">
+                <BuiltWithFern />
+            </div>
         </main>
     );
 }

packages/ui/app/src/layouts/GuideLayout.tsx

@@ -37,7 +37,9 @@ export function GuideLayout({
                         </div>
 
                         {!hideNavLinks && <BottomNavigationNeighbors />}
-                        <BuiltWithFern className="w-fit mx-auto my-8" />
+                        <div className="w-fit mx-auto my-8">
+                            <BuiltWithFern />
+                        </div>
                     </footer>
                 )}
             </article>

packages/ui/app/src/layouts/OverviewLayout.tsx

@@ -32,7 +32,9 @@ export function OverviewLayout({
                             <div>{!hideFeedback && <Feedback />}</div>
                             <EditThisPageButton editThisPageUrl={editThisPageUrl} />
                         </div>
-                        <BuiltWithFern className="w-fit mx-auto my-8" />
+                        <div className="w-fit mx-auto my-8">
+                            <BuiltWithFern />
+                        </div>
                     </footer>
                 )}
             </article>

packages/ui/app/src/layouts/PageLayout.tsx

@@ -24,7 +24,9 @@ export function PageLayout({ PageHeader, children, editThisPageUrl, hideFeedback
                         <div>{!hideFeedback && <Feedback />}</div>
                         <EditThisPageButton editThisPageUrl={editThisPageUrl} />
                     </div>
-                    <BuiltWithFern className="w-fit mx-auto my-8" />
+                    <div className="w-fit mx-auto my-8">
+                        <BuiltWithFern />
+                    </div>
                 </footer>
             )}
         </main>

packages/ui/app/src/playground/endpoint/PlaygroundEndpointSelectorContent.tsx

@@ -110,7 +110,9 @@ export const PlaygroundEndpointSelectorContent = forwardRef<HTMLDivElement, Play
                         <ul className="list-none p-3 flex flex-col gap-4 w-full h-fit">{renderedListItems}</ul>
                         <div className="!h-6"></div>
                     </FernScrollArea>
-                    <BuiltWithFern className="border-t border-default py-4 px-6 bg-background" />
+                    <div className="border-t border-default py-4 px-6 bg-background">
+                        <BuiltWithFern />
+                    </div>
                 </div>
             </FernTooltipProvider>
         );

packages/ui/app/src/search/SearchV2.tsx

@@ -23,7 +23,15 @@ import { useAtomValue } from "jotai";
 import { useRouter } from "next/router";
 import { Dispatch, ReactElement, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { z } from "zod";
-import { DOMAIN_ATOM, THEME_SWITCH_ENABLED_ATOM, atomWithStorageString, useFernUser, useSetTheme } from "../atoms";
+
+import {
+    CURRENT_VERSION_ATOM,
+    DOMAIN_ATOM,
+    THEME_SWITCH_ENABLED_ATOM,
+    atomWithStorageString,
+    useFernUser,
+    useSetTheme,
+} from "../atoms";
 import { useApiRoute } from "../hooks/useApiRoute";
 import { useApiRouteSWRImmutable } from "../hooks/useApiRouteSWR";
 
@@ -42,20 +50,15 @@ function useAlgoliaUserToken() {
 }
 
 export function SearchV2(): ReactElement | false {
+    const version = useAtomValue(CURRENT_VERSION_ATOM);
+
     const userToken = useAlgoliaUserToken();
     const user = useFernUser();
 
     const [open, setOpen] = useCommandTrigger();
     const domain = useAtomValue(DOMAIN_ATOM);
     const isThemeSwitchEnabled = useAtomValue(THEME_SWITCH_ENABLED_ATOM);
     const setTheme = useSetTheme();
-    const router = useRouter();
-
-    const handleNavigate = useEventCallback((path: string) => {
-        void router.push(path).then(() => {
-            setOpen(false);
-        });
-    });
 
     const { data } = useApiRouteSWRImmutable("/api/fern-docs/search/v2/key", {
         request: { headers: { "X-User-Token": userToken } },
@@ -95,6 +98,7 @@ export function SearchV2(): ReactElement | false {
             indexName={SEARCH_INDEX}
             fetchFacets={facetFetcher}
             authenticatedUserToken={user?.email}
+            initialFilters={{ "version.title": version?.title }}
         >
             <DesktopSearchDialog open={open} onOpenChange={setOpen} asChild trigger={<DesktopSearchButton />}>
                 <DesktopCommand onClose={() => setOpen(false)}>
@@ -108,14 +112,26 @@ export function SearchV2(): ReactElement | false {
 
                     <CommandGroupFilters />
                     <CommandEmpty />
-                    <CommandSearchHits onSelect={handleNavigate} prefetch={router.prefetch} />
+                    <RouterAwareCommandSearchHits onClose={() => setOpen(false)} />
                     <CommandActions>{isThemeSwitchEnabled && <CommandGroupTheme setTheme={setTheme} />}</CommandActions>
                 </DesktopCommand>
             </DesktopSearchDialog>
         </SearchClientRoot>
     );
 }
 
+function RouterAwareCommandSearchHits({ onClose }: { onClose: () => void }) {
+    const router = useRouter();
+
+    const handleNavigate = useEventCallback((path: string) => {
+        void router.push(path).then(() => {
+            onClose();
+        });
+    });
+
+    return <CommandSearchHits onSelect={handleNavigate} prefetch={router.prefetch} />;
+}
+
 function BackButton() {
     const { filters, popFilter, clearFilters } = useFacetFilters();
     const { focus } = useCommandUx();

packages/ui/components/package.json

@@ -14,7 +14,8 @@
     "./badges": "./src/badges/index.ts",
     "./src/colors.css": "./src/colors.css",
     "./src/fern-accent.scss": "./src/fern-accent.scss",
-    "./src/badges/index.scss": "./src/badges/index.scss"
+    "./src/badges/index.scss": "./src/badges/index.scss",
+    "./src/kbd.scss": "./src/kbd.scss"
   },
   "sideEffects": [
     "*.css",
@@ -63,6 +64,7 @@
     "react": "^18",
     "react-dom": "^18",
     "sonner": "^1.5.0",
+    "tailwind-merge": "^2.3.0",
     "ts-extras": "^0.11.0"
   },
   "devDependencies": {

packages/ui/components/src/badges/index.scss

@@ -0,0 +1,72 @@
+@import "./variants.scss";
+
+@layer components {
+    .fern-docs-badge {
+        align-items: center;
+        display: inline-flex;
+        gap: 0.25rem;
+        justify-content: center;
+        line-height: 1rem;
+        box-sizing: border-box;
+        font-weight: 600;
+
+        white-space: nowrap;
+
+        &.interactive:not(:disabled):hover,
+        &[data-state="open"]:not(:disabled) {
+            cursor: pointer;
+            transition: background-color 150ms ease-in-out;
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        &.rounded {
+            border-radius: 9999px !important;
+        }
+
+        &.small {
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            height: 1rem;
+            padding: 0 0.375rem;
+        }
+
+        &.large {
+            border-radius: calc(0.5rem - 2px);
+            font-size: 0.875rem;
+            height: 1.5rem;
+            padding: 0.25rem 0.5rem;
+        }
+
+        &[data-badge-type="http-method"],
+        &[data-badge-type="status-code"] {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+                monospace !important;
+            font-variant-numeric: slashed-zero;
+            text-transform: uppercase;
+            font-weight: 700;
+        }
+
+        &.small[data-http-method="PATCH"],
+        &.small[data-http-method="TRACE"] {
+            letter-spacing: -0.025em;
+        }
+
+        &[data-badge-type="http-method"].small {
+            font-size: 0.625rem;
+            width: 2.25rem;
+        }
+
+        &[data-badge-type="http-method"].large {
+            font-size: 0.75rem;
+        }
+
+        & > svg {
+            width: 1.25em;
+            height: 1.25em;
+        }
+    }
+}

packages/ui/components/src/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}

packages/ui/components/src/colors.css

@@ -1,3 +1,6 @@
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/white-alpha.css";
+
 @import "@radix-ui/colors/gray.css";
 @import "@radix-ui/colors/mauve.css";
 @import "@radix-ui/colors/slate.css";

packages/ui/components/src/index.scss

@@ -12,3 +12,4 @@
 @import "./FernTag";
 @import "./FernHighlight";
 @import "./badges/index.scss";
+@import "./kbd.scss";

packages/ui/components/src/index.ts

@@ -23,5 +23,6 @@ export * from "./FernTextarea";
 export * from "./FernToast";
 export * from "./FernTooltip";
 export * from "./FontAwesomeIcon";
-export * from "./util/shared-component-types";
 export * from "./badges/badge";
+export * from "./kbd";
+export * from "./util/shared-component-types";

packages/ui/components/src/kbd.scss

@@ -0,0 +1,13 @@
+@layer base {
+    kbd {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+        font-variant-numeric: slashed-zero;
+        font-weight: 700;
+    }
+}
+
+@layer components {
+    .fern-kbd {
+        @apply bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] rounded px-1 py-0.5 text-xs;
+    }
+}

packages/ui/fern-docs-search-ui/src/components/ui/kbd.tsx → packages/ui/components/src/kbd.tsx

@@ -8,14 +8,7 @@ export const Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLSpanEle
     KbdProps
 >((props, ref) => {
     return (
-        <kbd
-            ref={ref}
-            {...props}
-            className={cn(
-                "bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] rounded-sm px-1 py-0.5 text-xs font-semibold font-mono",
-                props.className,
-            )}
-        >
+        <kbd ref={ref} {...props} className={cn("fern-kbd", props.className)}>
             {props.children}
         </kbd>
     );