Use private fontawesome-pro mirror

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/eleven-brooms-travel.md

@@ -1,5 +0,0 @@
----
-'@gitbook/cache-do': patch
----
-
-Disable cloudflare observability in production

.changeset/fifty-frogs-itch.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Update styling of search+ask modal

.changeset/good-garlics-taste.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Fix a regression in variant drop-down caused by missing z-index.

.changeset/hip-eggs-trade.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Add scroll margin to the top when there are sections

.changeset/honest-teachers-enjoy.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve contrast of search box placeholder

.changeset/khaki-badgers-knock.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Smoother tab transition for sections

.changeset/large-hornets-exist.md

@@ -1,5 +0,0 @@
----
-'gitbook': minor
----
-
-Fix an issue where the active site section indicator appeared above any dropdowns.

.changeset/large-kangaroos-fly.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Don't adjust fallback font for mono font.

.changeset/large-months-hang.md

@@ -1,5 +0,0 @@
----
-'@gitbook/react-openapi': patch
----
-
-Fixed scalar api client routing

.changeset/long-dryers-try.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Optimize performances by using new API endpoint for fetching site data.

.changeset/mean-pears-live.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve colour contrast of list item decoration

.changeset/metal-badgers-chew.md

@@ -1,5 +0,0 @@
----
-'@gitbook/react-openapi': patch
----
-
-Bump @scalar/api-client-react version

.changeset/perfect-pigs-try.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-Restyle hint blocks

.changeset/rotten-donkeys-greet.md

@@ -1,5 +0,0 @@
----
-'@gitbook/react-openapi': patch
----
-
-bumped the scalar api client dependency

.changeset/sharp-beans-build.md

@@ -1,5 +0,0 @@
----
-'@gitbook/react-openapi': patch
----
-
-Bumped scalar api client pacakge

.changeset/shiny-chefs-compare.md

@@ -1,5 +0,0 @@
----
-'gitbook': minor
----
-
-Fix an issue where the space dropdown was shown under the site sections in Safari.

.changeset/thick-ears-reply.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix bullet list display on full size blocks

.changeset/tough-gifts-try.md

@@ -1,5 +0,0 @@
----
-'gitbook': patch
----
-
-style: adds missing scalar css variables

.changeset/weak-dodos-love.md

@@ -1,5 +0,0 @@
----
-'gitbook': minor
----
-
-Fix an issue where the space dropdown could appear behind the header.

.changeset/weak-swans-battle.md

@@ -1,5 +0,0 @@
----
-'gitbook': minor
----
-
-Fix the styling of site section tabs on smaller screens.

.github/actions/setup-playwright/action.yml

@@ -12,7 +12,7 @@ runs:
 
         # Cache browser binaries, cache key is based on Playwright version and OS
         - name: 🧰 Cache Playwright browser binaries
-          uses: actions/cache@v3
+          uses: actions/cache@v4
           id: playwright-cache
           with:
               path: '~/.cache/ms-playwright'

.github/workflows/ci.yaml

@@ -5,7 +5,7 @@ on:
         branches:
             - main
 env:
-    NPMRC_FONT_AWESOME_TOKEN: ${{ secrets.NPMRC_FONT_AWESOME_TOKEN }}
+    NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
 jobs:
     deploy:
         name: Deploy to Cloudflare Pages
@@ -30,16 +30,6 @@ jobs:
               run: bun install --frozen-lockfile
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
-            - name: Cache Next.js build
-              uses: actions/cache@v3
-              with:
-                  path: |
-                      ${{ github.workspace }}/.next/cache
-                  # Generate a new cache whenever packages or source files change.
-                  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lockb') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
-                  # If source files changed but packages didn't, rebuild from a prior cache.
-                  restore-keys: |
-                      ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lockb') }}-
             - name: Sets env vars for production
               run: |
                   echo "SENTRY_ENVIRONMENT=production" >> $GITHUB_ENV
@@ -201,7 +191,7 @@ jobs:
         runs-on: ubuntu-latest
         name: Build (Open Source)
         env:
-            NPMRC_FONT_AWESOME_TOKEN: ''
+            NPM_TOKEN_READONLY: ''
         steps:
             - name: Checkout
               uses: actions/checkout@v4

.github/workflows/publish.yaml

@@ -34,7 +34,7 @@ jobs:
                   # Using a PAT instead of GITHUB_TOKEN because we need to run workflows when releases are created
                   # https://github.com/orgs/community/discussions/26875#discussioncomment-3253761
                   GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_TOKEN }}
-                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+                  NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
                   CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                   CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
     release-preview:

bunfig.toml

@@ -1,2 +1,2 @@
 [install.scopes]
-"awesome.me" = { token = "$NPMRC_FONT_AWESOME_TOKEN", url = "https://npm.fontawesome.com/" }
+"gitbook" = { token = "$NPM_TOKEN_READONLY", url = "https://registry.npmjs.org" }

packages/cache-do/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gitbook/cache-do
 
+## 0.1.1
+
+### Patch Changes
+
+-   b7a5106: Disable cloudflare observability in production
+
 ## 0.1.0
 
 ### Minor Changes

packages/cache-do/package.json

@@ -14,7 +14,7 @@
             "default": "./dist/api.js"
         }
     },
-    "version": "0.1.0",
+    "version": "0.1.1",
     "dependencies": {
         "@msgpack/msgpack": "^3.0.0-beta2",
         "lru_map": "^0.4.1"

packages/gitbook/CHANGELOG.md

@@ -1,5 +1,45 @@
 # gitbook
 
+## 0.5.0
+
+### Minor Changes
+
+-   57cdd25: GitBook Open now supports Ask AI in sites. When asking a question to Ask AI, GitBook will use context from across your site sections and variants to provide the best answer.
+-   ca134c8: Fix an issue where the active site section indicator appeared above any dropdowns.
+-   d48926e: Fix an issue where the space dropdown was shown under the site sections in Safari.
+-   9fe8142: Fix an issue where Ask AI was erroring due to an object being passed as a param.
+-   d843e5e: Fix an issue where the space dropdown could appear behind the header.
+-   a2e5647: Fix the styling of site section tabs on smaller screens.
+
+### Patch Changes
+
+-   076dc48: Fix expandable block anchore resolution
+-   d9bb9f9: Fix an issue with the cookie banner buttons being non responsive
+-   23584c9: Update the site header with new styling, a new search button, and refactored layout
+-   664debc: Add support for tint color
+-   4d56f11: Update styling of search+ask modal
+-   061c0c1: Fix a regression in variant drop-down caused by missing z-index.
+-   2f76712: Add breadcrumbs above page title
+-   07cf835: Add scroll margin to the top when there are sections
+-   5d72b35: Smoother tab transition for sections
+-   7c71363: Don't adjust fallback font for mono font.
+-   7675c2c: Optimize performances by using new API endpoint for fetching site data.
+-   87eea73: Fix margin and image resolution of header logo
+-   aa2ed0f: Restyle hint blocks
+-   ffd3937: Fix security issue with image resizing that could be used for phishing
+-   2ce59d7: Fix - whitespace added to site section tabs with icons.
+-   c73e07d: Increase token max length to fix code not highlighted
+-   3b3d6e2: Add icons to sections
+-   1ed18c0: style: adds missing scalar css variables
+-   Updated dependencies [b7a5106]
+-   Updated dependencies [4771c78]
+-   Updated dependencies [ff50ac2]
+-   Updated dependencies [867481c]
+-   Updated dependencies [7ba67fd]
+-   Updated dependencies [a78c1ec]
+    -   @gitbook/cache-do@0.1.1
+    -   @gitbook/react-openapi@0.7.1
+
 ## 0.4.0
 
 ### Minor Changes

packages/gitbook/e2e/pages.spec.ts

@@ -1,11 +1,16 @@
 import { argosScreenshot } from '@argos-ci/playwright';
 import {
+    CustomizationBackground,
+    CustomizationCorners,
+    CustomizationFont,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationLocale,
+    CustomizationThemeMode,
     SiteCustomizationSettings,
 } from '@gitbook/api';
 import { test, expect, Page } from '@playwright/test';
+import deepMerge from 'deepmerge';
 import jwt from 'jsonwebtoken';
 import rison from 'rison';
 import { DeepPartial } from 'ts-essentials';
@@ -34,6 +39,18 @@ const allLocales: CustomizationLocale[] = [
     CustomizationLocale.Zh,
 ];
 
+const allThemeModes: CustomizationThemeMode[] = [
+    CustomizationThemeMode.Light,
+    CustomizationThemeMode.Dark,
+];
+
+const allThemePresets: CustomizationHeaderPreset[] = [
+    CustomizationHeaderPreset.Default,
+    CustomizationHeaderPreset.Bold,
+    CustomizationHeaderPreset.Contrast,
+    CustomizationHeaderPreset.Custom,
+];
+
 async function waitForCookiesDialog(page: Page) {
     const dialog = page.getByRole('dialog', { name: 'Cookies' });
     const accept = dialog.getByRole('button', { name: 'Accept' });
@@ -95,7 +112,9 @@ const testCases: TestsCase[] = [
                 name: 'Variants dropdown',
                 url: '',
                 run: async (page) => {
-                    const spaceDrowpdown = page.locator('[data-testid="space-dropdown-button"]');
+                    const spaceDrowpdown = page
+                        .locator('[data-testid="space-dropdown-button"]')
+                        .locator('visible=true');
                     await spaceDrowpdown.waitFor();
                 },
             },
@@ -111,7 +130,9 @@ const testCases: TestsCase[] = [
                 name: 'Customized variant titles are displayed',
                 url: '',
                 run: async (page) => {
-                    const spaceDrowpdown = page.locator('[data-testid="space-dropdown-button"]');
+                    const spaceDrowpdown = page
+                        .locator('[data-testid="space-dropdown-button"]')
+                        .locator('visible=true');
                     await spaceDrowpdown.click();
 
                     const variantSelectionDropdown = page.locator(
@@ -143,9 +164,9 @@ const testCases: TestsCase[] = [
                 url: 'api-multi-versions/reference/api-reference/pets',
                 screenshot: false,
                 run: async (page) => {
-                    const spaceDrowpdown = await page.waitForSelector(
-                        '[data-testid="space-dropdown-button"]',
-                    );
+                    const spaceDrowpdown = await page
+                        .locator('[data-testid="space-dropdown-button"]')
+                        .locator('visible=true');
                     await spaceDrowpdown.click();
 
                     // Click the second variant in the dropdown
@@ -166,9 +187,9 @@ const testCases: TestsCase[] = [
                 url: 'api-multi-versions-share-links/8tNo6MeXg7CkFMzSSz81/reference/api-reference/pets',
                 screenshot: false,
                 run: async (page) => {
-                    const spaceDrowpdown = await page.waitForSelector(
-                        '[data-testid="space-dropdown-button"]',
-                    );
+                    const spaceDrowpdown = await page
+                        .locator('[data-testid="space-dropdown-button"]')
+                        .locator('visible=true');
                     await spaceDrowpdown.click();
 
                     // Click the second variant in the dropdown
@@ -201,9 +222,9 @@ const testCases: TestsCase[] = [
                     return `api-multi-versions-va/reference/api-reference/pets?jwt_token=${token}`;
                 })(),
                 run: async (page) => {
-                    const spaceDrowpdown = await page.waitForSelector(
-                        '[data-testid="space-dropdown-button"]',
-                    );
+                    const spaceDrowpdown = await page
+                        .locator('[data-testid="space-dropdown-button"]')
+                        .locator('visible=true');
                     await spaceDrowpdown.click();
 
                     // Click the second variant in the dropdown
@@ -435,30 +456,38 @@ const testCases: TestsCase[] = [
     {
         name: 'Customization',
         baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
-        tests: [
+        tests: allThemeModes.flatMap((theme) => [
             {
-                name: 'Without header',
+                name: `Without header - Theme ${theme}`,
                 url: getCustomizationURL({
                     header: {
                         preset: CustomizationHeaderPreset.None,
                         links: [],
                     },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
                 }),
                 run: waitForCookiesDialog,
             },
             {
-                name: 'With duotone icons',
+                name: `With duotone icons - Theme ${theme}`,
                 url:
                     'page-options/page-with-icon' +
                     getCustomizationURL({
                         styling: {
                             icons: CustomizationIconsStyle.Duotone,
                         },
+                        themes: {
+                            default: theme,
+                            toggeable: false,
+                        },
                     }),
                 run: waitForCookiesDialog,
             },
             {
-                name: 'With header buttons',
+                name: `With header buttons - Theme ${theme}`,
                 url: getCustomizationURL({
                     header: {
                         preset: CustomizationHeaderPreset.Default,
@@ -475,10 +504,101 @@ const testCases: TestsCase[] = [
                             },
                         ],
                     },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
                 }),
                 run: waitForCookiesDialog,
             },
-        ],
+            {
+                name: `Without tint - Default preset - Theme ${theme}`,
+                url: getCustomizationURL({
+                    header: {
+                        preset: CustomizationHeaderPreset.Default,
+                        links: [
+                            {
+                                title: 'Secondary button',
+                                to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                style: 'button-secondary',
+                            },
+                            {
+                                title: 'Primary button',
+                                to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                style: 'button-primary',
+                            },
+                        ],
+                    },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
+            ...allThemePresets.flatMap((preset) => ({
+                name: `With tint - Preset ${preset} - Theme ${theme}`,
+                url: getCustomizationURL({
+                    styling: {
+                        tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                    },
+                    header: {
+                        preset,
+                        ...(preset === CustomizationHeaderPreset.Custom
+                            ? {
+                                  backgroundColor: { light: '#C62C68', dark: '#EF96B8' },
+                                  linkColor: { light: '#4DDE98', dark: '#0C693D' },
+                              }
+                            : {}),
+                        links: [
+                            {
+                                title: 'Secondary button',
+                                to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                style: 'button-secondary',
+                            },
+                            {
+                                title: 'Primary button',
+                                to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                style: 'button-primary',
+                            },
+                        ],
+                    },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
+                }),
+                run: waitForCookiesDialog,
+            })),
+            {
+                name: `With tint - Legacy background match - Theme ${theme}`,
+                url: getCustomizationURL({
+                    styling: {
+                        background: CustomizationBackground.Match,
+                    },
+                    header: {
+                        preset: CustomizationHeaderPreset.Default,
+                        links: [
+                            {
+                                title: 'Secondary button',
+                                to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                style: 'button-secondary',
+                            },
+                            {
+                                title: 'Primary button',
+                                to: { kind: 'url', url: 'https://www.gitbook.com' },
+                                style: 'button-primary',
+                            },
+                        ],
+                    },
+                    themes: {
+                        default: theme,
+                        toggeable: false,
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
+        ]),
     },
     {
         name: 'Ads',
@@ -814,6 +934,178 @@ const testCases: TestsCase[] = [
             },
         ],
     },
+    {
+        name: 'Adaptive Content - VA',
+        baseUrl: `https://gitbook-open-e2e-sites.gitbook.io/adaptive-content-va/`,
+        tests: [
+            {
+                name: 'isAlphaUser',
+                url: (() => {
+                    const privateKey = 'afe09cdf-0f43-480a-b54c-8b1f62f174f9';
+                    const token = jwt.sign(
+                        {
+                            name: 'gitbook-open-tests',
+                            isAlphaUser: true,
+                        },
+                        privateKey,
+                        {
+                            expiresIn: '24h',
+                        },
+                    );
+                    return `?jwt_token=${token}`;
+                })(),
+                run: async (page) => {
+                    const alphaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Alpha users' });
+                    const betaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Beta users' });
+                    await expect(alphaUserPage).toBeVisible();
+                    await expect(betaUserPage).toHaveCount(0);
+                },
+            },
+            {
+                name: 'isBetaUser',
+                url: (() => {
+                    const privateKey = 'afe09cdf-0f43-480a-b54c-8b1f62f174f9';
+                    const token = jwt.sign(
+                        {
+                            name: 'gitbook-open-tests',
+                            isBetaUser: true,
+                        },
+                        privateKey,
+                        {
+                            expiresIn: '24h',
+                        },
+                    );
+                    return `?jwt_token=${token}`;
+                })(),
+                run: async (page) => {
+                    const alphaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Alpha users' });
+                    const betaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Beta users' });
+                    await expect(betaUserPage).toBeVisible();
+                    await expect(alphaUserPage).toHaveCount(0);
+                },
+            },
+            {
+                name: 'isAlphaUser & isBetaUser',
+                url: (() => {
+                    const privateKey = 'afe09cdf-0f43-480a-b54c-8b1f62f174f9';
+                    const token = jwt.sign(
+                        {
+                            name: 'gitbook-open-tests',
+                            isAlphaUser: true,
+                            isBetaUser: true,
+                        },
+                        privateKey,
+                        {
+                            expiresIn: '24h',
+                        },
+                    );
+                    return `?jwt_token=${token}`;
+                })(),
+                run: async (page) => {
+                    const alphaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Alpha users' });
+                    const betaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Beta users' });
+                    await expect(alphaUserPage).toBeVisible();
+                    await expect(betaUserPage).toBeVisible();
+                },
+            },
+        ],
+    },
+    {
+        name: 'Tables',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
+        tests: [
+            {
+                name: 'Default table',
+                url: 'blocks/tables',
+                run: waitForCookiesDialog,
+                fullPage: true,
+            },
+            {
+                name: 'Table with straight corners',
+                url:
+                    'blocks/tables' +
+                    getCustomizationURL({
+                        styling: {
+                            corners: CustomizationCorners.Straight,
+                        },
+                    }),
+                run: waitForCookiesDialog,
+                fullPage: true,
+            },
+            {
+                name: 'Table with primary color',
+                url:
+                    'blocks/tables' +
+                    getCustomizationURL({
+                        styling: {
+                            tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                        },
+                    }),
+                run: waitForCookiesDialog,
+                fullPage: true,
+            },
+            // Test dark mode for each variant
+            ...allThemeModes.flatMap((theme) => [
+                {
+                    name: `Table in ${theme} mode`,
+                    url:
+                        'blocks/tables' +
+                        getCustomizationURL({
+                            themes: {
+                                default: theme,
+                                toggeable: false,
+                            },
+                        }),
+                    run: waitForCookiesDialog,
+                    fullPage: true,
+                },
+                {
+                    name: `Table with straight corners in ${theme} mode`,
+                    url:
+                        'blocks/tables' +
+                        getCustomizationURL({
+                            styling: {
+                                corners: CustomizationCorners.Straight,
+                            },
+                            themes: {
+                                default: theme,
+                                toggeable: false,
+                            },
+                        }),
+                    run: waitForCookiesDialog,
+                    fullPage: true,
+                },
+                {
+                    name: `Table with primary color in ${theme} mode`,
+                    url:
+                        'blocks/tables' +
+                        getCustomizationURL({
+                            styling: {
+                                tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                            },
+                            themes: {
+                                default: theme,
+                                toggeable: false,
+                            },
+                        }),
+                    run: waitForCookiesDialog,
+                    fullPage: true,
+                },
+            ]),
+        ],
+    },
 ];
 
 for (const testCase of testCases) {
@@ -848,7 +1140,62 @@ for (const testCase of testCases) {
  * Create a URL with customization settings.
  */
 function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettings>): string {
-    const encoded = rison.encode_object(partial);
+    /**
+     * Default customization settings.
+     *
+     * The customization object passed to the URL should be a valid API settings object. Hence we extend the test with necessary defaults.
+     */
+    const DEFAULT_CUSTOMIZATION: SiteCustomizationSettings = {
+        styling: {
+            primaryColor: { light: '#346DDB', dark: '#346DDB' },
+            corners: CustomizationCorners.Rounded,
+            font: CustomizationFont.Inter,
+            background: CustomizationBackground.Plain,
+            icons: CustomizationIconsStyle.Regular,
+        },
+        internationalization: {
+            locale: CustomizationLocale.En,
+        },
+        favicon: {},
+        header: {
+            preset: CustomizationHeaderPreset.Default,
+            links: [],
+        },
+        footer: {
+            groups: [],
+        },
+        themes: {
+            default: CustomizationThemeMode.Light,
+            toggeable: true,
+        },
+        pdf: {
+            enabled: true,
+        },
+        feedback: {
+            enabled: false,
+        },
+        aiSearch: {
+            enabled: true,
+        },
+        advancedCustomization: {
+            enabled: true,
+        },
+        git: {
+            showEditLink: false,
+        },
+        pagination: {
+            enabled: true,
+        },
+        trademark: {
+            enabled: true,
+        },
+        privacyPolicy: {
+            url: 'https://www.gitbook.com/privacy',
+        },
+        socialPreview: {},
+    };
+
+    const encoded = rison.encode_object(deepMerge(DEFAULT_CUSTOMIZATION, partial));
 
     const searchParams = new URLSearchParams();
     searchParams.set('customization', encoded);

packages/gitbook/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gitbook",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "private": true,
     "scripts": {
         "dev": "env-cmd --silent -f ../../.env.local next dev",
@@ -16,7 +16,7 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static"
     },
     "dependencies": {
-        "@gitbook/api": "^0.77.0",
+        "@gitbook/api": "^0.81.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/emoji-codepoints": "workspace:*",
         "@gitbook/icons": "workspace:*",
@@ -43,14 +43,14 @@
         "memoizee": "^0.4.15",
         "next": "14.2.15",
         "next-themes": "^0.2.1",
-        "nuqs": "^1.17.4",
+        "nuqs": "^2.2.3",
         "object-hash": "^3.0.0",
         "openapi-types": "^12.1.3",
         "p-map": "^7.0.0",
         "parse-cache-control": "^1.0.1",
         "postcss-color-contrast": "^1.1.0",
-        "react": "^18",
-        "react-dom": "^18",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
         "react-hotkeys-hook": "^4.4.1",
         "recoil": "^0.7.7",
         "rehype-sanitize": "^6.0.0",
@@ -68,9 +68,9 @@
     },
     "devDependencies": {
         "@argos-ci/playwright": "^2.0.0",
-        "@playwright/test": "^1.42.1",
         "@cloudflare/next-on-pages": "^1.13.5",
         "@cloudflare/workers-types": "^4.20240725.0",
+        "@playwright/test": "^1.42.1",
         "@types/js-cookie": "^3.0.6",
         "@types/jsontoxml": "^1.0.5",
         "@types/jsonwebtoken": "^9.0.6",
@@ -78,10 +78,12 @@
         "@types/object-hash": "^3.0.6",
         "@types/parse-cache-control": "^1.0.4",
         "@types/psi": "^4.1.6",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "18.3.13",
+        "@types/react-dom": "18.3.1",
         "@types/rison": "^0.0.9",
         "autoprefixer": "^10",
+        "deepmerge": "^4.3.1",
+        "env-cmd": "^10.1.0",
         "eslint": "^8",
         "eslint-config-next": "^14.2.5",
         "eslint-plugin-import": "^2.29.1",
@@ -89,8 +91,7 @@
         "postcss": "^8",
         "psi": "^4.1.0",
         "tailwindcss": "^3.4.0",
-        "typescript": "^5.5.3",
-        "env-cmd": "^10.1.0",
-        "ts-essentials": "^10.0.1"
+        "ts-essentials": "^10.0.1",
+        "typescript": "^5.5.3"
     }
 }

packages/gitbook/src/app/(global)/~gitbook/image/route.ts

@@ -4,6 +4,7 @@ import {
     verifyImageSignature,
     resizeImage,
     CloudflareImageOptions,
+    imagesResizingSignVersion,
     checkIsSizableImageURL,
 } from '@/lib/images';
 import { parseImageAPIURL } from '@/lib/urls';
@@ -18,28 +19,29 @@ export const runtime = 'edge';
 export async function GET(request: NextRequest) {
     let urlParam = request.nextUrl.searchParams.get('url');
     const signature = request.nextUrl.searchParams.get('sign');
-    // The current signature algorithm sets version as 1, but we need to support the older version as well
-    // for previously generated content. In this case, we default to version 0.
-    const signatureVersion = (request.nextUrl.searchParams.get('sv') as '1') || '0';
+
+    // The current signature algorithm sets version as 2, but we need to support the older version as well
+    const signatureVersion = request.nextUrl.searchParams.get('sv') as string | undefined;
     if (!urlParam || !signature) {
         return new Response('Missing url/sign parameters', { status: 400 });
     }
 
     const url = parseImageAPIURL(urlParam);
 
-    // Prevent infinite loops
-    if (url.includes('/~gitbook/image')) {
-        return new Response('Invalid url parameter', { status: 400 });
-    }
-
     // Check again if the image can be sized, even though we checked when rendering the Image component
     // Otherwise, it's possible to pass just any link to this endpoint and trigger HTML injection on the domain
+    // Also prevent infinite redirects.
     if (!checkIsSizableImageURL(url)) {
         return new Response('Invalid url parameter', { status: 400 });
     }
 
+    // For older signatures, we redirect to the url.
+    if (signatureVersion !== imagesResizingSignVersion) {
+        return Response.redirect(url, 302);
+    }
+
     // Verify the signature
-    const verified = await verifyImageSignature(url, { signature, version: signatureVersion });
+    const verified = await verifyImageSignature(url, { signature });
     if (!verified) {
         return new Response(`Invalid signature "${signature ?? ''}" for "${url}"`, { status: 400 });
     }

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx

@@ -35,6 +35,7 @@ export default async function Page(props: {
         customization,
         pages,
         page,
+        ancestors,
         document,
     } = await getPageDataWithFallback({
         pagePathParams: params,
@@ -103,6 +104,7 @@ export default async function Page(props: {
                     customization={customization}
                     context={contentRefContext}
                     page={page}
+                    ancestors={ancestors}
                     document={document}
                     withPageFeedback={
                         // Display the page feedback in the page footer if the aside is not visible
@@ -150,7 +152,8 @@ export async function generateMetadata({
             .join(' | '),
         description: page.description ?? '',
         alternates: {
-            canonical: absoluteHref(getPagePath(pages, page), true),
+            // Trim trailing slashes in canonical URL to match the redirect behavior
+            canonical: absoluteHref(getPagePath(pages, page), true).replace(/\/+$/, ''),
         },
         openGraph: {
             images: [

packages/gitbook/src/app/(site)/(content)/layout.tsx

@@ -1,6 +1,7 @@
 import { CustomizationThemeMode } from '@gitbook/api';
 import { Metadata, Viewport } from 'next';
 import { headers } from 'next/headers';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -42,7 +43,7 @@ export default async function ContentLayout(props: { children: React.ReactNode }
         sections,
     } = await fetchContentData();
 
-    ReactDOM.preconnect(api().endpoint);
+    ReactDOM.preconnect(api().client.endpoint);
     if (assetsDomain) {
         ReactDOM.preconnect(assetsDomain);
     }
@@ -55,46 +56,48 @@ export default async function ContentLayout(props: { children: React.ReactNode }
     });
 
     return (
-        <ClientContexts
-            nonce={nonce}
-            forcedTheme={
-                getQueryStringTheme() ??
-                (customization.themes.toggeable ? undefined : customization.themes.default)
-            }
-        >
-            <SpaceLayout
-                space={space}
-                contentTarget={contentTarget}
-                site={site}
-                spaces={spaces}
-                sections={sections}
-                customization={customization}
-                pages={pages}
-                ancestors={ancestors}
-                content={content}
+        <NuqsAdapter>
+            <ClientContexts
+                nonce={nonce}
+                forcedTheme={
+                    getQueryStringTheme() ??
+                    (customization.themes.toggeable ? undefined : customization.themes.default)
+                }
             >
-                {children}
-            </SpaceLayout>
+                <SpaceLayout
+                    space={space}
+                    contentTarget={contentTarget}
+                    site={site}
+                    spaces={spaces}
+                    sections={sections}
+                    customization={customization}
+                    pages={pages}
+                    ancestors={ancestors}
+                    content={content}
+                >
+                    {children}
+                </SpaceLayout>
 
-            {scripts.length > 0 ? (
-                <>
-                    <LoadIntegrations />
-                    {scripts.map(({ script }) => (
-                        <script key={script} async src={script} nonce={nonce} />
-                    ))}
-                </>
-            ) : null}
+                {scripts.length > 0 ? (
+                    <>
+                        <LoadIntegrations />
+                        {scripts.map(({ script }) => (
+                            <script key={script} async src={script} nonce={nonce} />
+                        ))}
+                    </>
+                ) : null}
 
-            {scripts.some((script) => script.cookies) || customization.privacyPolicy.url ? (
-                <React.Suspense fallback={null}>
-                    <CookiesToast privacyPolicy={customization.privacyPolicy.url} />
-                </React.Suspense>
-            ) : null}
+                {scripts.some((script) => script.cookies) || customization.privacyPolicy.url ? (
+                    <React.Suspense fallback={null}>
+                        <CookiesToast privacyPolicy={customization.privacyPolicy.url} />
+                    </React.Suspense>
+                ) : null}
 
-            <RocketLoaderDetector nonce={nonce} />
+                <RocketLoaderDetector nonce={nonce} />
 
-            <AdminToolbar space={space} content={content} />
-        </ClientContexts>
+                <AdminToolbar space={space} content={content} />
+            </ClientContexts>
+        </NuqsAdapter>
     );
 }
 

packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts

@@ -50,7 +50,7 @@ export async function highlight(block: DocumentBlockCode): Promise<HighlightLine
 
     const lines = highlighter.codeToTokensBase(code, {
         lang: langName,
-        tokenizeMaxLineLength: 120,
+        tokenizeMaxLineLength: 400,
     });
 
     let currentIndex = 0;

packages/gitbook/src/components/DocumentView/Hint.tsx

@@ -91,6 +91,8 @@ const HINT_STYLES: {
             '[&_.can-override-bg]:bg-orange-500/3',
             '[&_.can-override-text]:text-orange-800',
             'dark:[&_.can-override-text]:text-orange-400',
+            'decoration-orange-800/6',
+            'dark:decoration-orange-400/6',
         ],
         style: ['bg-orange-500/2', 'border-orange-500/4'],
     },
@@ -104,6 +106,8 @@ const HINT_STYLES: {
             'dark:[&_a:hover]:text-red-300',
             '[&_.can-override-bg]:bg-red-500/3',
             '[&_.can-override-text]:text-red-400',
+            'decoration-red-800/6',
+            'dark:decoration-red-400/6',
         ],
         style: ['bg-red-500/2', 'border-red-500/4'],
     },
@@ -118,6 +122,8 @@ const HINT_STYLES: {
             '[&_.can-override-bg]:bg-green-500/3',
             '[&_.can-override-text]:text-green-800',
             'dark:[&_.can-override-text]:text-green-400',
+            'decoration-green-800/6',
+            'dark:decoration-green-400/6',
         ],
         style: ['bg-green-500/2', 'border-green-500/4'],
     },

packages/gitbook/src/components/DocumentView/InlineImage.tsx

@@ -25,7 +25,11 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
 
     return (
         /* Ensure images dont expand to the size of the container where this Image may be nested in. Now it's always nested in a size-restricted container */
-        <span className={tcls(size !== 'line' ? ['inline-flex', 'max-w-[300px]'] : null)}>
+        <span
+            className={tcls(
+                size !== 'line' ? ['inline-flex', 'max-w-[300px]', 'align-middle'] : null,
+            )}
+        >
             <Image
                 alt={inline.data.caption ?? ''}
                 sizes={await getImageSizes(size, src)}

packages/gitbook/src/components/DocumentView/ListItem.tsx

@@ -38,6 +38,8 @@ export function ListItem(props: BlockProps<DocumentBlockListItem>) {
                 '[&:is(h2)>div]:mt-0',
                 '[&:is(h3)>div]:mt-0',
                 '[&:is(h4)>div]:mt-0',
+                // Override the "mx-auto" class from UnwrappedBlocks
+                'mx-0',
             )}
             style="space-y-2 flex flex-col flex-1"
         />
@@ -135,7 +137,7 @@ function ListItemPrefix(props: { block: DocumentBlockListItem; children: React.R
             className={tcls(
                 textStyle.textSize,
                 textStyle.lineHeight,
-                'flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5',
+                'flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark-4 dark:text-light-4',
             )}
         >
             {props.children}

packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

@@ -5,7 +5,7 @@
 .light .scalar {
     --scalar-color-1: color-mix(
         in srgb,
-        rgb(var(--primary-base-300, 180 180 180)),
+        rgb(var(--tint-color-300, 180 180 180)),
         rgb(var(--dark-base, 23 23 23)) 96%
     );
     --scalar-color-2: color-mix(
@@ -23,12 +23,12 @@
     --scalar-background-1: rgb(var(--light-base, 255 255 255));
     --scalar-background-2: color-mix(
         in srgb,
-        rgb(var(--primary-base-800, 30 30 30)),
+        rgb(var(--tint-color-800, 30 30 30)),
         var(--scalar-background-1) 96%
     );
     --scalar-background-3: color-mix(
         in srgb,
-        rgb(var(--primary-base-800, 30 30 30)),
+        rgb(var(--tint-color-800, 30 30 30)),
         var(--scalar-background-1) 90%
     );
     --scalar-background-accent: #007d9c1f;
@@ -66,7 +66,7 @@
 .dark .scalar {
     --scalar-color-1: color-mix(
         in srgb,
-        rgb(var(--primary-base-700, 70 70 70)),
+        rgb(var(--tint-color-700, 70 70 70)),
         rgb(var(--light-base, 255 255 255)) 100%
     );
     --scalar-color-2: color-mix(
@@ -84,12 +84,12 @@
     --scalar-background-1: rgb(var(--dark-base, 22 22 22));
     --scalar-background-2: color-mix(
         in srgb,
-        rgb(var(--primary-base-200, 200 200 200)),
+        rgb(var(--tint-color-200, 200 200 200)),
         var(--scalar-background-1) 92%
     );
     --scalar-background-3: color-mix(
         in srgb,
-        rgb(var(--primary-base-200, 200 200 200)),
+        rgb(var(--tint-color-200, 200 200 200)),
         var(--scalar-background-1) 88%
     );
     --scalar-background-accent: #8ab4f81f;

packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -2,7 +2,7 @@ import { ContentRef, DocumentBlockTable } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import assertNever from 'assert-never';
 
-import { Checkbox, Emoji } from '@/components/primitives';
+import { Checkbox } from '@/components/primitives';
 import { StyledLink } from '@/components/primitives';
 import { Image } from '@/components/utils';
 import { getNodeFragmentByName } from '@/lib/document';

packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx

@@ -1,44 +1,43 @@
 import { DocumentTableViewGrid } from '@gitbook/api';
-
-import { tcls } from '@/lib/tailwind';
+import React from 'react';
 
 import { RecordColumnValue } from './RecordColumnValue';
 import { TableRecordKV, TableViewProps } from './Table';
+import styles from './table.module.css';
+import { getColumnWidth } from './ViewGrid';
 
-export async function RecordRow(
+export function RecordRow(
     props: TableViewProps<DocumentTableViewGrid> & {
         record: TableRecordKV;
+        autoSizedColumns: string[];
+        fixedColumns: string[];
     },
 ) {
-    const { view } = props;
-    const columnsLengthThreshold = view.columns.length >= 7;
-
-    const tableTR = columnsLengthThreshold
-        ? ['[&>*+*]:border-l', '[&>*]:px-4']
-        : ['[&>*+*]:border-l', '[&>*+*]:pl-4'];
+    const { view, autoSizedColumns, fixedColumns } = props;
 
     return (
-        <tr className={tcls(tableTR, 'border-dark/3', 'dark:border-light/2')}>
+        <div className={styles.row} role="row">
             {view.columns.map((column) => {
+                const columnWidth = getColumnWidth({
+                    column,
+                    columnWidths: view.columnWidths,
+                    autoSizedColumns,
+                    fixedColumns,
+                });
                 return (
-                    <td
+                    <div
                         key={column}
-                        className={tcls(
-                            'align-middle',
-                            'min-w-[8rem]',
-                            'border-dark/2',
-                            'py-3',
-                            'text-sm',
-                            'lg:text-base',
-                            'dark:border-light/2',
-                        )}
+                        role="cell"
+                        className={styles.cell}
+                        style={{
+                            width: columnWidth,
+                            minWidth: columnWidth || '100px',
+                        }}
                     >
-                        <div className={tcls('pr-4 ', 'text-balance')}>
-                            <RecordColumnValue key={column} {...props} column={column} />
-                        </div>
-                    </td>
+                        <RecordColumnValue {...props} column={column} />
+                    </div>
                 );
             })}
-        </tr>
+        </div>
     );
 }

packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx

@@ -1,4 +1,5 @@
 import { DocumentTableViewGrid } from '@gitbook/api';
+import * as React from 'react';
 
 import { tcls } from '@/lib/tailwind';
 
@@ -7,159 +8,113 @@ import { TableViewProps } from './Table';
 import styles from './table.module.css';
 import { getColumnAlignment } from './utils';
 
+/* Columns are sized in 3 ways:
+     1. Set to auto-size by default, these columns share the available width
+     2. Explicitly set by the user by dragging column separator (we then turn off auto-size)
+     3. Auto-size is turned off without setting a width, we then default to a fixed width of 100px
+*/
 export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
     const { block, view, records, style } = props;
-    const columnsOverThreshold = view.columns.length >= 7;
 
-    const tableWrapper = columnsOverThreshold
-        ? [
-              // has over X columns
-              'overflow-x-auto',
-              'overflow-y-hidden',
-              'mx-auto',
-              'rounded-md',
-              'border',
-              'border-dark/3',
-              'dark:border-light/2',
-          ]
-        : ['overflow-x-auto', 'overflow-y-hidden', 'mx-auto'];
+    /* Calculate how many columns are auto-sized vs fixed width */
+    const columnWidths = view.columnWidths;
+    const autoSizedColumns = view.columns.filter((column) => !columnWidths?.[column]);
+    const fixedColumns = view.columns.filter((column) => columnWidths?.[column]);
 
-    const tableTR = columnsOverThreshold
-        ? ['[&>*+*]:border-l', '[&>*]:px-4']
-        : ['[&>*+*]:border-l', '[&>*+*]:px-4'];
+    const tableWidth = autoSizedColumns.length > 0 ? 'w-full' : 'w-fit';
 
-    const tableTH = columnsOverThreshold ? ['py-3'] : ['py-1', 'pt-0'];
-
-    // Only show the header when configured and not empty
+    /* Only show the header when configured and not empty */
     const withHeader =
         !view.hideHeader &&
         view.columns.some((columnId) => block.data.definition[columnId].title.trim().length > 0);
 
     return (
-        <div
-            className={`${tcls(style, 'relative', 'grid', tableWrapper, styles.progressContainer)}`}
-        >
-            {/* ProgressScroller: */}
-            <div
-                className={`${styles.progressOpacitySharp} ${tcls(
-                    'grid',
-                    'items-center',
-                    'grid-area-1-1',
-                    'w-[5rem]',
-                    'h-full',
-                    'top-0',
-                    'z-[1]',
-                    'sticky',
-                    'left-[calc(100%-5rem)]',
-                    'pointer-events-none',
-                )}`}
-            >
-                <svg
-                    className={`${styles.progressSvg} ${tcls(
-                        'grid-area-1-1',
-                        'relative',
-                        '[strokeDasharray:_0_100]',
-                        'z-[1]',
-                        'w-7',
-                        'mt-3',
-                        'mr-3',
-                        'self-start',
-                        'justify-self-end',
-                        'stroke-primary-600',
-                        'shadow-1xs',
-                        'bg-light',
-                        'ring-1',
-                        'ring-inset',
-                        'rounded-full',
-                        'ring-dark/2',
-                        'dark:ring-light/2',
-                        'dark:bg-dark',
-                        'dark:stroke-primary-400',
-                    )}`}
-                    preserveAspectRatio="xMaxYMid meet"
-                    width="100%"
-                    viewBox="0 0 26 26"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <circle
-                        cx="13"
-                        className={`${styles.strokeOpacityProgressInverted}`}
-                        cy="13"
-                        r="12.5"
-                        fill="none"
-                        stroke="inherit"
-                        strokeWidth="1.5"
-                        pathLength="100"
-                        strokeLinecap="round"
-                        strokeOpacity={0}
-                    />
-
-                    <path
-                        strokeDasharray="none"
-                        d="M12 10L15 13L12 16"
-                        stroke="inherit"
-                        fill="none"
-                        strokeOpacity={0.64}
-                    />
-                </svg>
-
-                <div
-                    className={`${styles.progressOpacity}  ${tcls(
-                        'bg-gradient-to-r',
-                        'from-transparent',
-                        'to-light',
-                        'to-40%',
-                        'grid-area-1-1',
-                        'w-full',
-                        'h-full',
-                        'dark:from-transparent',
-                        'dark:to-dark/10',
-                    )}`}
-                ></div>
-            </div>
-
-            {/* Table: */}
-            <table className={tcls('w-full', 'grid-area-1-1', 'table-auto')}>
-                {withHeader ? (
-                    <thead>
-                        <tr className={tcls(tableTR)}>
+        <div className={tcls(style, styles.tableWrapper)}>
+            {/* Table */}
+            <div role="table" className={tcls('flex', 'flex-col')}>
+                {/* Header */}
+                {withHeader && (
+                    <div
+                        role="rowgroup"
+                        className={tcls(
+                            tableWidth,
+                            styles.rowGroup,
+                            'straight-corners:rounded-none',
+                        )}
+                    >
+                        <div role="row" className={tcls('flex', 'w-full')}>
                             {view.columns.map((column) => {
-                                const columnWidth = view.columnWidths?.[column];
                                 const alignment = getColumnAlignment(block.data.definition[column]);
-
                                 return (
-                                    <th
+                                    <div
                                         key={column}
+                                        role="columnheader"
                                         className={tcls(
-                                            tableTH,
-                                            'align-middle',
-                                            'text-balance',
-                                            'border-b',
-                                            'border-b-dark/5',
-                                            'text-left',
-                                            'text-xs',
-                                            'lg:text-base',
-                                            'dark:border-l-light/2',
-                                            'dark:border-b-light/4',
+                                            styles.columnHeader,
                                             alignment === 'right' ? 'text-right' : null,
                                             alignment === 'center' ? 'text-center' : null,
                                         )}
-                                        style={columnWidth ? { width: columnWidth } : undefined}
+                                        style={{
+                                            width: getColumnWidth({
+                                                column,
+                                                columnWidths,
+                                                autoSizedColumns,
+                                                fixedColumns,
+                                            }),
+                                            minWidth: columnWidths?.[column] || '100px',
+                                        }}
+                                        title={block.data.definition[column].title}
                                     >
                                         {block.data.definition[column].title}
-                                    </th>
+                                    </div>
                                 );
                             })}
-                        </tr>
-                    </thead>
-                ) : null}
-                <tbody className={tcls('[&>*+*]:border-t')}>
-                    {records.map((record) => {
-                        return <RecordRow key={record[0]} {...props} record={record} />;
-                    })}
-                </tbody>
-            </table>
+                        </div>
+                    </div>
+                )}
+                <div
+                    role="rowgroup"
+                    className={tcls('flex', 'flex-col', tableWidth, '[&>*+*]:border-t')}
+                >
+                    {records.map((record) => (
+                        <RecordRow
+                            key={record[0]}
+                            record={record}
+                            autoSizedColumns={autoSizedColumns}
+                            fixedColumns={fixedColumns}
+                            {...props}
+                        />
+                    ))}
+                </div>
+            </div>
         </div>
     );
 }
+
+export const getColumnWidth = ({
+    column,
+    columnWidths,
+    autoSizedColumns,
+    fixedColumns,
+}: {
+    column: string;
+    columnWidths: Record<string, number> | undefined;
+    autoSizedColumns: string[];
+    fixedColumns: string[];
+}) => {
+    const columnWidth = columnWidths?.[column];
+
+    /* Column was explicitly set by user or user turned off auto-sizing (in that case, columnWidth should've also been set to 100px) */
+    if (columnWidth) return `${columnWidth}px`;
+
+    /* Fallback minimum width for columns, so the columns don't become unreadable from being too narrow and instead table will become scrollable. */
+    const minAutoColumnWidth = '100px';
+
+    const totalFixedWidth = fixedColumns.reduce((sum, col) => {
+        return sum + (columnWidths?.[col] || 0);
+    }, 0);
+
+    /* Column should use auto-sizing, which means it grows to fill available space */
+    const availableWidth = `calc((100% - ${totalFixedWidth}px) / ${autoSizedColumns.length})`;
+    return `clamp(${minAutoColumnWidth}, ${availableWidth}, 100%)`;
+};

packages/gitbook/src/components/DocumentView/Table/table.module.css

@@ -1,87 +1,59 @@
-/* Hide it on browsers (firefox / safari) that do not support it */
-.progressOpacitySharp {
-    display: none;
-}
-
-@supports (animation-timeline: scroll()) {
-    .progressContainer {
-        scroll-timeline-name: --squareTimeline;
-        scroll-timeline-axis: x;
-    }
-
-    .progressOpacity {
-        animation-name: opacityProgress;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    .progressOpacitySharp {
-        display: grid;
-        opacity: 0;
-        animation-name: opacityProgressSharp;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    .strokeOpacityProgressInverted {
-        animation-name: strokeOpacityProgressInverted;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    .progressSvg {
-        animation-name: svgProgress;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    @keyframes opacityProgress {
-        0%,
-        50% {
-            opacity: 1;
-        }
-        100% {
-            opacity: 0;
-        }
-    }
-
-    @keyframes opacityProgressSharp {
-        0%,
-        98% {
-            opacity: 1;
-        }
-        100% {
-            opacity: 0;
-        }
-    }
-
-    @keyframes strokeOpacityProgressInverted {
-        0%,
-        10% {
-            stroke-opacity: 0;
-        }
-        30% {
-            stroke-opacity: 0.88;
-        }
-        100% {
-            stroke-opacity: 0.88;
-        }
-    }
-
-    @keyframes svgProgress {
-        from {
-            stroke-dasharray: 0 100;
-        }
-        to {
-            stroke-dasharray: 100 100;
-        }
+/* Detect whether a scrollbar exists on the table */
+@keyframes detect-scroll {
+    from,
+    to {
+        --can-scroll: ;
     }
 }
+
+/* Apply styles to the Table if scrollbar exists */
+.tableWrapper {
+    animation: detect-scroll linear;
+    animation-timeline: scroll(self x);
+
+    --border-radius-if-can-scroll: var(--can-scroll) 0.375rem;
+    --border-radius-if-cant-scroll: 0;
+    border-radius: var(--border-radius-if-can-scroll, var(--border-radius-if-cant-scroll));
+
+    --border-width-if-can-scroll: var(--can-scroll) 1px;
+    --border-width-if-cant-scroll: 0;
+    border-width: var(--border-width-if-can-scroll, var(--border-width-if-cant-scroll));
+
+    @apply relative grid w-full overflow-x-auto overflow-y-hidden mx-auto border-dark/3;
+}
+
+:global(.dark) .tableWrapper {
+    @apply border-tint-50;
+}
+
+.columnHeader {
+    @apply text-sm font-medium py-3 px-4 text-tint-900;
+}
+
+:global(.dark) .columnHeader {
+    @apply text-white;
+}
+
+.row {
+    @apply flex border-tint-700/2;
+}
+
+:global(.dark) .row {
+    @apply border-tint-300/3;
+}
+
+.rowGroup {
+    @apply flex flex-col border rounded-lg bg-tint-800/1 border-tint-700/2;
+}
+
+:global(.dark) .rowGroup {
+    @apply bg-tint-300/2 border-tint-300/3;
+}
+
+.cell {
+    @apply flex-1 align-middle border-dark/2 py-2 px-4 text-sm;
+}
+
+:global(.dark) .cell {
+    @apply border-light/2;
+}

packages/gitbook/src/components/Footer/FooterLinksGroup.tsx

@@ -13,7 +13,7 @@ export function FooterLinksGroup(props: {
 
     return (
         <div className={tcls('flex', 'flex-col', 'gap-3')}>
-            <p className={tcls('text-base', 'font-medium')}>{group.title}</p>
+            <p className={tcls('text-base', 'font-semibold')}>{group.title}</p>
             {group.links.map((link, index) => {
                 return <FooterLink key={index} link={link} context={context} />;
             })}
@@ -32,7 +32,14 @@ async function FooterLink(props: { link: CustomizationContentLink; context: Cont
     return (
         <Link
             href={resolved.href}
-            className={tcls('text-sm', 'text-primary-400', 'hover:text-primary-500')}
+            className={tcls(
+                'text-sm',
+                'font-normal',
+                'text-dark/8',
+                'hover:text-dark/9',
+                'dark:text-light/8',
+                'dark:hover:text-light/9',
+            )}
         >
             {link.title}
         </Link>

packages/gitbook/src/components/Header/Dropdown.tsx

@@ -25,7 +25,7 @@ export function Dropdown<E extends HTMLElement>(props: {
     const dropdownId = useId();
 
     return (
-        <div className={tcls('group/dropdown', 'relative flex')}>
+        <div className={tcls('group/dropdown', 'relative flex shrink min-w-0')}>
             {button({
                 id: dropdownId,
                 tabIndex: 0,
@@ -39,7 +39,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                 aria-labelledby={dropdownId}
                 className={tcls(
                     'w-52',
-                    'max-h-56',
+                    'max-h-80',
                     'flex',
                     'absolute',
                     'top-full',
@@ -82,11 +82,12 @@ export function Dropdown<E extends HTMLElement>(props: {
 /**
  * Animated chevron to display in the dropdown button.
  */
-export function DropdownChevron(props: {}) {
+export function DropdownChevron() {
     return (
         <Icon
             icon="chevron-down"
             className={tcls(
+                'shrink-0',
                 'opacity-6',
                 'size-3',
                 'ms-1',
@@ -110,31 +111,38 @@ export function DropdownMenu(props: { children: React.ReactNode }) {
  * Menu item in a dropdown.
  */
 export function DropdownMenuItem(props: {
-    href: string;
+    href: string | null;
     active?: boolean;
+    className?: ClassValue;
     children: React.ReactNode;
 }) {
-    const { children, active = false, href } = props;
+    const { children, active = false, href, className } = props;
+
+    if (href) {
+        return (
+            <Link
+                href={href}
+                prefetch={false}
+                className={tcls(
+                    'px-3 py-1 text-sm rounded straight-corners:rounded-sm',
+                    active ? 'bg-primary/3 dark:bg-light/2 text-primary-600' : null,
+                    'hover:bg-dark/2 dark:hover:bg-light/2',
+                    className,
+                )}
+            >
+                {children}
+            </Link>
+        );
+    }
 
     return (
-        <Link
-            href={href}
-            prefetch={false}
+        <div
             className={tcls(
-                'flex',
-                'flex-row',
-                'items-center',
-                'text-sm',
-                'px-3',
-                'py-1',
-                'rounded',
-                'straight-corners:rounded-sm',
-                active
-                    ? ['bg-primary/3', 'dark:bg-light/2', 'text-primary-600']
-                    : ['hover:bg-dark/2', 'dark:hover:bg-light/2'],
+                'text-xs px-3 py-1 font-medium text-dark/8 dark:text-light/8',
+                className,
             )}
         >
             {children}
-        </Link>
+        </div>
     );
 }

packages/gitbook/src/components/Header/Header.tsx

@@ -15,6 +15,7 @@ import { HeaderLogo } from './HeaderLogo';
 import { SpacesDropdown } from './SpacesDropdown';
 import { SearchButton } from '../Search';
 import { SiteSectionTabs } from '../SiteSectionTabs';
+import { HeaderMobileMenu } from './HeaderMobileMenu';
 /**
  * Render the header for the space.
  */
@@ -45,104 +46,156 @@ export function Header(props: {
                 'w-full',
                 'flex-none',
                 'shadow-thinbottom',
+                'dark:shadow-light/2',
+                'bg-light',
+                'dark:bg-dark',
                 withTopHeader ? null : 'lg:hidden',
-                'lg:z-10',
-                'dark:shadow-light/1',
-                `${isCustomizationDefault || !withTopHeader ? 'bg-light' : 'bg-header-background'}`,
-                `${
-                    isCustomizationDefault || !withTopHeader
-                        ? 'dark:bg-dark'
-                        : 'bg-header-background'
-                }`,
+                'text-sm',
+                'bg-opacity-9',
+                'dark:bg-opacity-9',
+                'backdrop-blur-lg',
+                'contrast-more:bg-opacity-11',
+                'contrast-more:dark:bg-opacity-11',
             )}
         >
-            <div className={tcls('scroll-nojump')}>
-                <div
-                    className={tcls(
-                        'gap-4',
-                        'grid',
-                        'grid-flow-col',
-                        'auto-cols-[auto_auto_1fr_auto]',
-                        'h-16',
-                        'items-center',
-                        'align-center',
-                        'justify-between',
-                        'w-full',
-                        CONTAINER_STYLE,
-                    )}
-                >
-                    <HeaderLogo site={site} space={space} customization={customization} />
-                    <div className="z-20">
-                        {!hasSiteSections && isMultiVariants ? (
-                            <SpacesDropdown space={space} spaces={spaces} />
-                        ) : null}
-                    </div>
-                    <HeaderLinks>
-                        {customization.header.links.map((link, index) => {
-                            return (
-                                <HeaderLink
-                                    key={index}
-                                    link={link}
+            <div
+                className={tcls(
+                    !isCustomizationDefault &&
+                        withTopHeader && [
+                            'bg-header-background',
+                            'shadow-thinbottom',
+                            'dark:shadow-light/2',
+                        ],
+                )}
+            >
+                <div className={tcls('scroll-nojump')}>
+                    <div
+                        className={tcls(
+                            'gap-4',
+                            'lg:gap-8',
+                            'flex',
+                            'h-16',
+                            'items-center',
+                            'justify-between',
+                            'w-full',
+                            CONTAINER_STYLE,
+                        )}
+                    >
+                        <div className="flex max-w-full shrink min-w-0 gap-2 lg:gap-4 justify-start items-center">
+                            <HeaderMobileMenu
+                                className={tcls(
+                                    'lg:hidden',
+                                    '-ml-2',
+                                    customization.header.preset ===
+                                        CustomizationHeaderPreset.Default
+                                        ? ['text-dark', 'dark:text-light']
+                                        : 'text-header-link',
+                                )}
+                            />
+                            <HeaderLogo site={site} space={space} customization={customization} />
+                            {!hasSiteSections && isMultiVariants ? (
+                                <div className="z-20 shrink hidden sm:block">
+                                    <SpacesDropdown space={space} spaces={spaces} />
+                                </div>
+                            ) : null}
+                        </div>
+
+                        {customization.header.links.length > 0 && (
+                            <HeaderLinks>
+                                {customization.header.links.map((link, index) => {
+                                    return (
+                                        <HeaderLink
+                                            key={index}
+                                            link={link}
+                                            context={context}
+                                            customization={customization}
+                                        />
+                                    );
+                                })}
+                                <HeaderLinkMore
+                                    label={t(getSpaceLanguage(customization), 'more')}
+                                    links={customization.header.links}
                                     context={context}
                                     customization={customization}
                                 />
-                            );
-                        })}
-                        <HeaderLinkMore
-                            label={t(getSpaceLanguage(customization), 'more')}
-                            links={customization.header.links}
-                            context={context}
-                            customization={customization}
-                        />
-                    </HeaderLinks>
-                    <div
-                        className={tcls(
-                            'flex',
-                            'md:w-56',
-                            'grow-0',
-                            'shrink-0',
-                            'justify-self-end',
+                            </HeaderLinks>
                         )}
-                    >
-                        <Suspense fallback={null}>
-                            <SearchButton
-                                style={
-                                    !isCustomizationDefault && withTopHeader
-                                        ? [
-                                              'bg-header-link/3',
-                                              'shadow-sm',
-                                              'ring-header-link/3',
-                                              '[&>span]:!text-header-link/7',
-                                              '[&_svg]:text-header-link',
-                                              'contrast-more:bg-transparent',
-                                              'contrast-more:ring-header-link',
-                                              'contrast-more:[&>span]:!text-header-link',
-                                              'dark:bg-header-link/3',
-                                              'dark:ring-header-link/3',
-                                              '[&>span]:!text-header-link/7',
-                                              'dark:[&_svg]:text-header-link',
-                                              'dark:contrast-more:bg-transparent',
-                                              'dark:contrast-more:ring-header-link',
-                                              'dark:contrast-more:[&>span]:!text-header-link',
-                                          ]
-                                        : null
-                                }
-                            >
-                                <span className={tcls('flex-1')}>
-                                    {t(
-                                        getSpaceLanguage(customization),
-                                        customization.aiSearch.enabled ? 'search_or_ask' : 'search',
-                                    )}
-                                </span>
-                            </SearchButton>
-                        </Suspense>
+                        <div
+                            className={tcls(
+                                'flex',
+                                'md:min-w-56',
+                                'grow-0',
+                                'shrink-0',
+                                'justify-self-end',
+                            )}
+                        >
+                            <Suspense fallback={null}>
+                                <SearchButton
+                                    style={
+                                        !isCustomizationDefault && withTopHeader
+                                            ? [
+                                                  'bg-header-link/2',
+                                                  'dark:bg-header-link/2',
+                                                  'hover:bg-header-link/3',
+                                                  'dark:hover:bg-header-link/3',
+
+                                                  'text-header-link/8',
+                                                  'dark:text-header-link/8',
+                                                  'hover:text-header-link',
+                                                  'dark:hover:text-header-link',
+
+                                                  'ring-header-link/4',
+                                                  'dark:ring-header-link/4',
+                                                  'hover:ring-header-link/5',
+                                                  'dark:hover:ring-header-link/5',
+
+                                                  '[&_svg]:text-header-link/10',
+                                                  'dark:[&_svg]:text-header-link/10',
+                                                  '[&_.shortcut]:text-header-link/8',
+                                                  'dark:[&_.shortcut]:text-header-link/8',
+
+                                                  'contrast-more:bg-header-background',
+                                                  'contrast-more:text-header-link',
+                                                  'contrast-more:ring-header-link',
+                                                  'contrast-more:hover:bg-header-background',
+                                                  'contrast-more:hover:ring-header-link',
+                                                  'contrast-more:focus:text-header-link',
+                                                  'contrast-more:focus:bg-header-background',
+                                                  'contrast-more:focus:ring-header-link',
+                                                  'dark:contrast-more:bg-header-background',
+                                                  'dark:contrast-more:text-header-link',
+                                                  'dark:contrast-more:ring-header-link',
+                                                  'dark:contrast-more:hover:bg-header-background',
+                                                  'dark:contrast-more:hover:ring-header-link',
+                                                  'dark:contrast-more:focus:text-header-link',
+                                                  'dark:contrast-more:focus:bg-header-background',
+                                                  'dark:contrast-more:focus:ring-header-link',
+
+                                                  'shadow-none',
+                                              ]
+                                            : null
+                                    }
+                                >
+                                    <span className={tcls('flex-1')}>
+                                        {t(
+                                            getSpaceLanguage(customization),
+                                            customization.aiSearch.enabled
+                                                ? 'search_or_ask'
+                                                : 'search',
+                                        )}
+                                        ...
+                                    </span>
+                                </SearchButton>
+                            </Suspense>
+                        </div>
                     </div>
                 </div>
             </div>
             {sections ? (
                 <div
                     className={tcls(
-                        'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark mt-0.5',
+                        'scroll-nojump',
+                        'w-full',
                         // Handle long section tabs, particularly on smaller screens.
                         'overflow-x-auto hide-scroll',
                     )}

packages/gitbook/src/components/Header/HeaderLink.tsx

@@ -1,9 +1,9 @@
 import {
     CustomizationContentLink,
-    CustomizationHeaderLink,
     CustomizationSettings,
     CustomizationHeaderPreset,
     SiteCustomizationSettings,
+    CustomizationHeaderItem,
 } from '@gitbook/api';
 import assertNever from 'assert-never';
 
@@ -21,93 +21,41 @@ import { Button, Link } from '../primitives';
 
 export async function HeaderLink(props: {
     context: ContentRefContext;
-    link: CustomizationHeaderLink;
+    link: CustomizationHeaderItem;
     customization: CustomizationSettings | SiteCustomizationSettings;
 }) {
     const { context, link, customization } = props;
 
-    const target = await resolveContentRef(link.to, context);
-
-    if (!target) {
-        return null;
-    }
-
+    const target = link.to ? await resolveContentRef(link.to, context) : null;
     const headerPreset = customization.header.preset;
-
-    const renderLink = (linkProps: DropdownButtonProps<HTMLAnchorElement>) => {
-        const linkStyle = link.style ?? 'link';
-
-        switch (linkStyle) {
-            case 'button-secondary':
-            case 'button-primary': {
-                const variant = (() => {
-                    switch (linkStyle) {
-                        case 'button-secondary':
-                            return 'secondary';
-                        case 'button-primary':
-                            return 'primary';
-                        default:
-                            assertNever(linkStyle);
-                    }
-                })();
-                return (
-                    <Button
-                        href={target.href}
-                        variant={variant}
-                        size="medium"
-                        className={tcls(
-                            {
-                                'button-primary':
-                                    headerPreset === CustomizationHeaderPreset.Custom ||
-                                    headerPreset === CustomizationHeaderPreset.Bold
-                                        ? tcls(
-                                              'bg-header-link-500 hover:bg-text-header-link-300 text-header-button-text',
-                                              'dark:bg-header-link-500 dark:hover:bg-text-header-link-300 dark:text-header-button-text',
-                                          )
-                                        : null,
-                                'button-secondary': tcls(
-                                    'bg:transparent hover:bg-transparent',
-                                    'dark:bg-transparent dark:hover:bg-transparent',
-                                    'ring-header-link-500 hover:ring-header-link-300 text-header-link-500',
-                                    'dark:ring-header-link-500 dark:hover:ring-header-link-300 dark:text-header-link-500',
-                                ),
-                            }[linkStyle],
-                        )}
-                    >
-                        {link.title}
-                    </Button>
-                );
-            }
-            case 'link': {
-                return (
-                    <Link
-                        {...linkProps}
-                        href={target.href}
-                        className={tcls(
-                            'overflow-hidden',
-                            'text-sm lg:text-base',
-                            'flex flex-row items-center',
-                            'whitespace-nowrap',
-                            'hover:text-header-link-400 dark:hover:text-light',
-
-                            headerPreset === CustomizationHeaderPreset.Default
-                                ? ['text-dark/8', 'dark:text-light/8']
-                                : ['text-header-link-500 hover:text-header-link-400'],
-                        )}
-                    >
-                        <span className={tcls('truncate')}>{link.title}</span>
-                        {link.links && link.links.length > 0 ? <DropdownChevron /> : null}
-                    </Link>
-                );
-            }
-            default:
-                assertNever(linkStyle);
-        }
-    };
+    const linkStyle = link.style ?? 'link';
 
     if (link.links && link.links.length > 0) {
         return (
-            <Dropdown button={renderLink}>
+            <Dropdown
+                className="shrink"
+                button={(buttonProps) => {
+                    if (!target) {
+                        return (
+                            <HeaderItemDropdown
+                                {...buttonProps}
+                                headerPreset={headerPreset}
+                                title={link.title}
+                            />
+                        );
+                    }
+                    return (
+                        <HeaderLinkNavItem
+                            {...buttonProps}
+                            linkStyle={linkStyle}
+                            headerPreset={headerPreset}
+                            title={link.title}
+                            isDropdown
+                            href={target?.href}
+                        />
+                    );
+                }}
+            >
                 <DropdownMenu>
                     {link.links.map((subLink, index) => (
                         <SubHeaderLink key={index} {...props} link={subLink} />
@@ -117,7 +65,125 @@ export async function HeaderLink(props: {
         );
     }
 
-    return renderLink({});
+    if (!target) {
+        return null;
+    }
+
+    return (
+        <HeaderLinkNavItem
+            linkStyle={linkStyle}
+            headerPreset={headerPreset}
+            title={link.title}
+            isDropdown={false}
+            href={target.href}
+        />
+    );
+}
+
+export type HeaderLinkNavItemProps = {
+    linkStyle: NonNullable<CustomizationHeaderItem['style']>;
+    headerPreset: CustomizationHeaderPreset;
+    title: string;
+    href: string;
+    isDropdown: boolean;
+} & DropdownButtonProps<HTMLElement>;
+
+function HeaderLinkNavItem(props: HeaderLinkNavItemProps) {
+    switch (props.linkStyle) {
+        case 'button-secondary':
+        case 'button-primary':
+            return <HeaderItemButton {...props} linkStyle={props.linkStyle} />;
+        case 'link':
+            return <HeaderItemLink {...props} />;
+        default:
+            assertNever(props.linkStyle);
+    }
+}
+
+function HeaderItemButton(
+    props: Omit<HeaderLinkNavItemProps, 'linkStyle'> & {
+        linkStyle: 'button-secondary' | 'button-primary';
+    },
+) {
+    const { linkStyle, headerPreset, title, href, isDropdown, ...rest } = props;
+    const variant = (() => {
+        switch (linkStyle) {
+            case 'button-secondary':
+                return 'secondary';
+            case 'button-primary':
+                return 'primary';
+            default:
+                assertNever(linkStyle);
+        }
+    })();
+    return (
+        <Button
+            href={href}
+            variant={variant}
+            size="medium"
+            className={tcls(
+                {
+                    'button-primary':
+                        headerPreset === CustomizationHeaderPreset.Custom ||
+                        headerPreset === CustomizationHeaderPreset.Bold
+                            ? tcls(
+                                  'bg-header-link-500 hover:bg-text-header-link-300 text-header-button-text',
+                                  'dark:bg-header-link-500 dark:hover:bg-text-header-link-300 dark:text-header-button-text',
+                              )
+                            : null,
+                    'button-secondary': tcls(
+                        'bg:transparent hover:bg-transparent',
+                        'dark:bg-transparent dark:hover:bg-transparent',
+                        'ring-header-link-500 hover:ring-header-link-300 text-header-link-500',
+                        'dark:ring-header-link-500 dark:hover:ring-header-link-300 dark:text-header-link-500',
+                    ),
+                }[linkStyle],
+            )}
+            {...rest}
+        >
+            {title}
+        </Button>
+    );
+}
+
+function getHeaderLinkClassName(props: { headerPreset: CustomizationHeaderPreset }) {
+    return tcls(
+        'flex items-center shrink',
+        'hover:text-header-link-400 dark:hover:text-light',
+        'min-w-0',
+
+        props.headerPreset === CustomizationHeaderPreset.Default
+            ? ['text-dark/8', 'dark:text-light/8']
+            : ['text-header-link-500 hover:text-header-link-400'],
+    );
+}
+
+function HeaderItemLink(props: HeaderLinkNavItemProps) {
+    const { headerPreset, title, isDropdown, href, ...rest } = props;
+    return (
+        <Link href={href} className={getHeaderLinkClassName({ headerPreset })} {...rest}>
+            <span className="truncate min-w-0">{title}</span>
+            {isDropdown ? <DropdownChevron /> : null}
+        </Link>
+    );
+}
+
+function HeaderItemDropdown(
+    props: {
+        headerPreset: CustomizationHeaderPreset;
+        title: string;
+    } & DropdownButtonProps<HTMLElement>,
+) {
+    const { headerPreset, title, ...rest } = props;
+    return (
+        <span
+            className={tcls(getHeaderLinkClassName({ headerPreset }), 'cursor-default')}
+            {...rest}
+        >
+            {title}
+            <DropdownChevron />
+        </span>
+    );
 }
 
 async function SubHeaderLink(props: {

packages/gitbook/src/components/Header/HeaderLinkMore.tsx

@@ -1,5 +1,6 @@
 import {
-    CustomizationHeaderLink,
+    CustomizationContentLink,
+    CustomizationHeaderItem,
     CustomizationHeaderPreset,
     CustomizationSettings,
     SiteCustomizationSettings,
@@ -10,7 +11,7 @@ import React from 'react';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
-import { Dropdown, DropdownMenu, DropdownMenuItem } from './Dropdown';
+import { Dropdown, DropdownChevron, DropdownMenu, DropdownMenuItem } from './Dropdown';
 import styles from './headerLinks.module.css';
 
 /**
@@ -18,7 +19,7 @@ import styles from './headerLinks.module.css';
  */
 export function HeaderLinkMore(props: {
     label: React.ReactNode;
-    links: CustomizationHeaderLink[];
+    links: CustomizationHeaderItem[];
     context: ContentRefContext;
     customization: CustomizationSettings | SiteCustomizationSettings;
 }) {
@@ -30,15 +31,22 @@ export function HeaderLinkMore(props: {
     const renderButton = () => (
         <button
             className={tcls(
-                'px-1',
-                !isCustomizationDefault
-                    ? ['text-header-link-500']
-                    : ['text-dark/8', 'dark:text-light/8', 'dark:hover:text-light'],
-                'hover:text-header-link-400',
+                isCustomizationDefault
+                    ? [
+                          'text-dark/8',
+                          'dark:text-light/8',
+                          'hover:text-primary',
+                          'dark:hover:text-primary',
+                      ]
+                    : ['text-header-link', 'hover:text-header-link/8'],
+                'flex',
+                'gap-1',
+                'items-center',
             )}
         >
             <span className="sr-only">{label}</span>
-            <Icon icon="ellipsis" className={tcls('opacity-6', 'size-3', 'ms-1')} />
+            <Icon icon="ellipsis" className={tcls('size-4')} />
+            <DropdownChevron />
         </button>
     );
 
@@ -55,14 +63,25 @@ export function HeaderLinkMore(props: {
     );
 }
 
-async function MoreMenuLink(props: { context: ContentRefContext; link: CustomizationHeaderLink }) {
+async function MoreMenuLink(props: {
+    context: ContentRefContext;
+    link: CustomizationHeaderItem | CustomizationContentLink;
+}) {
     const { context, link } = props;
 
-    const target = await resolveContentRef(link.to, context);
+    const target = link.to ? await resolveContentRef(link.to, context) : null;
 
-    if (!target) {
-        return null;
-    }
-
-    return <DropdownMenuItem href={target.href}>{link.title}</DropdownMenuItem>;
+    return (
+        <>
+            {'links' in link && link.links.length > 0 && (
+                <hr className="first:hidden border-t border-light-3 dark:border-dark-3 my-1 -mx-2" />
+            )}
+            <DropdownMenuItem href={target?.href ?? null}>{link.title}</DropdownMenuItem>
+            {'links' in link
+                ? link.links.map((subLink, index) => (
+                      <MoreMenuLink key={index} {...props} link={subLink} />
+                  ))
+                : null}
+        </>
+    );
 }

packages/gitbook/src/components/Header/HeaderLinks.tsx

@@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
         <div
             className={tcls(
                 styles.containerHeaderlinks,
-                'flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56 z-20',
+                'grow shrink flex justify-end items-center gap-x-6 lg:gap-x-8 min-w-9 z-20',
             )}
         >
             {children}

packages/gitbook/src/components/Header/HeaderLogo.tsx

@@ -30,65 +30,51 @@ export function HeaderLogo(props: HeaderLogoProps) {
     const { customization } = props;
 
     return (
-        <div className={tcls('flex', 'flex-row', 'gap-2')}>
-            <HeaderMobileMenu
-                className={tcls(
-                    'lg:hidden',
-                    customization.header.preset === CustomizationHeaderPreset.Default
-                        ? ['text-dark', 'dark:text-light']
-                        : 'text-header-link',
-                )}
-            />
-            <Link
-                href={absoluteHref('')}
-                className={tcls(
-                    'group/headerlogo',
-                    'flex-1',
-                    'flex',
-                    'flex-row',
-                    'items-center',
-                    'shrink-0',
-                )}
-            >
-                {customization.header.logo ? (
-                    <Image
-                        alt="Logo"
-                        sources={{
-                            light: {
-                                src: customization.header.logo.light,
-                            },
-                            dark: customization.header.logo.dark
-                                ? {
-                                      src: customization.header.logo.dark,
-                                  }
-                                : null,
-                        }}
-                        sizes={[
-                            {
-                                media: '(max-width: 1024px)',
-                                width: 128,
-                            },
-                            {
-                                width: 192,
-                            },
-                        ]}
-                        priority="high"
-                        style={tcls(
-                            'max-w-[8rem]',
-                            'lg:max-w-[12rem]',
-                            'max-h-[3rem]',
-                            'rounded',
-                            'straight-corners:rounded-sm',
-                            'overflow-hidden',
-                            'object-contain',
-                            'object-left',
-                        )}
-                    />
-                ) : (
-                    <LogoFallback {...props} />
-                )}
-            </Link>
-        </div>
+        <Link
+            href={absoluteHref('')}
+            className={tcls('group/headerlogo', 'min-w-0', 'shrink', 'flex', 'items-center')}
+        >
+            {customization.header.logo ? (
+                <Image
+                    alt="Logo"
+                    sources={{
+                        light: {
+                            src: customization.header.logo.light,
+                        },
+                        dark: customization.header.logo.dark
+                            ? {
+                                  src: customization.header.logo.dark,
+                              }
+                            : null,
+                    }}
+                    sizes={[
+                        {
+                            media: '(max-width: 1024px)',
+                            width: 160,
+                        },
+                        {
+                            width: 260,
+                        },
+                    ]}
+                    priority="high"
+                    style={tcls(
+                        'rounded',
+                        'straight-corners:rounded-sm',
+                        'overflow-hidden',
+                        'shrink',
+                        'min-w-0',
+                        'max-w-40',
+                        'lg:max-w-64',
+                        'max-h-10',
+                        'lg:max-h-12',
+                        'h-full',
+                        'w-auto',
+                    )}
+                />
+            ) : (
+                <LogoFallback {...props} />
+            )}
+        </Link>
     );
 }
 
@@ -111,13 +97,13 @@ function LogoFallback(props: HeaderLogoProps) {
                 className={tcls(
                     'text-pretty',
                     'line-clamp-3',
-                    'leading-[1.1]',
                     'tracking-tight',
                     'max-w-[18ch]',
                     'lg:max-w-[24ch]',
-                    'lg:text-lg/tight',
                     'font-semibold',
                     'ms-3',
+                    'text-base/tight',
+                    'lg:text-lg/tight',
                     customization.header.preset === CustomizationHeaderPreset.Default ||
                         customization.header.preset === CustomizationHeaderPreset.None
                         ? ['text-dark', 'dark:text-light']

packages/gitbook/src/components/Header/SpacesDropdown.tsx

@@ -5,8 +5,8 @@ import { tcls } from '@/lib/tailwind';
 import { Dropdown, DropdownChevron, DropdownMenu } from './Dropdown';
 import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem';
 
-export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
-    const { space, spaces } = props;
+export function SpacesDropdown(props: { space: Space; spaces: Space[]; className?: string }) {
+    const { space, spaces, className } = props;
 
     return (
         <Dropdown
@@ -20,25 +20,27 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
                         'items-center',
                         'rounded-2xl',
                         'straight-corners:rounded-none',
-                        'bg-light-2',
-                        'border',
-                        'border-light-3',
-                        'text-dark-4',
+
+                        'hover:cursor-pointer',
+                        'bg-dark/1',
+                        'dark:bg-light/1',
+
                         'text-sm',
+                        'text-dark-4',
+                        'dark:text-light-4',
+
+                        'contrast-more:bg-light',
+                        'contrast-more:ring-1',
+                        'contrast-more:ring-dark',
+                        'dark:contrast-more:ring-light',
+                        'dark:contrast-more:bg-dark',
+
                         'px-3',
                         'py-1',
-                        'contrast-more:border-dark',
-                        'contrast-more:bg-light',
-                        'contrast-more:text-dark',
-                        'dark:bg-dark-3',
-                        'dark:border-dark-4',
-                        'dark:text-light-4',
-                        'contrast-more:dark:border-light',
-                        'contrast-more:dark:bg-dark',
-                        'contrast-more:dark:text-light',
+                        className,
                     )}
                 >
-                    {space.title}
+                    <span className="line-clamp-2">{space.title}</span>
                     <DropdownChevron />
                 </div>
             )}

packages/gitbook/src/components/Header/headerLinks.module.css

@@ -60,12 +60,12 @@
     }
     .containerHeaderlinks > :nth-child(n + 5) ~ .linkEllipsis {
         display: flex;
-        & div > :nth-child(n + 5) {
+        & div > a:nth-of-type(n + 5) {
             display: flex;
         }
     }
 }
-@container headerlinks ( width < 900px ) {
+@container headerlinks ( width < 850px ) {
     .containerHeaderlinks > :nth-child(n + 6) {
         display: none;
     }

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -11,6 +11,7 @@ import { getSpaceLanguage } from '@/intl/server';
 import { t } from '@/intl/translate';
 import { ContentTarget, SiteContentPointer, api } from '@/lib/api';
 import { hasFullWidthBlock, isNodeEmpty } from '@/lib/document';
+import { AncestorRevisionPage } from '@/lib/pages';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 import { shouldTrackPageViews } from '@/lib/tracking';
@@ -31,6 +32,7 @@ export function PageBody(props: {
     contentTarget: ContentTarget;
     customization: CustomizationSettings | SiteCustomizationSettings;
     page: RevisionPageDocument;
+    ancestors: AncestorRevisionPage[];
     document: JSONDocument | null;
     context: ContentRefContext;
     withPageFeedback: boolean;
@@ -42,6 +44,7 @@ export function PageBody(props: {
         customization,
         context,
         page,
+        ancestors,
         document,
         withPageFeedback,
     } = props;
@@ -79,7 +82,7 @@ export function PageBody(props: {
                     <PageCover as="hero" page={page} cover={page.cover} context={context} />
                 ) : null}
 
-                <PageHeader page={page} />
+                <PageHeader page={page} ancestors={ancestors} pages={context.pages} />
                 {document && !isNodeEmpty(document) ? (
                     <React.Suspense
                         fallback={
@@ -148,7 +151,7 @@ export function PageBody(props: {
                     sitePointer={pointer}
                     spaceId={space.id}
                     pageId={page.id}
-                    apiHost={api().endpoint}
+                    apiHost={api().client.endpoint}
                 />
             ) : null}
         </>

packages/gitbook/src/components/PageBody/PageHeader.tsx

@@ -1,11 +1,19 @@
-import { RevisionPageDocument } from '@gitbook/api';
+import { RevisionPage, RevisionPageDocument } from '@gitbook/api';
+import { Icon } from '@gitbook/icons';
 
+import { pageHref } from '@/lib/links';
+import { AncestorRevisionPage } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
 
 import { PageIcon } from '../PageIcon';
+import { StyledLink } from '../primitives';
 
-export function PageHeader(props: { page: RevisionPageDocument }) {
-    const { page } = props;
+export function PageHeader(props: {
+    page: RevisionPageDocument;
+    ancestors: AncestorRevisionPage[];
+    pages: RevisionPage[];
+}) {
+    const { page, ancestors, pages } = props;
 
     if (!page.layout.title && !page.layout.description) {
         return null;
@@ -15,6 +23,48 @@ export function PageHeader(props: { page: RevisionPageDocument }) {
         <header
             className={tcls('max-w-3xl', 'mx-auto', 'mb-6', 'space-y-3', 'page-api-block:ml-0')}
         >
+            {ancestors.length > 0 && (
+                <nav>
+                    <ol className={tcls('flex', 'flex-wrap', 'items-center', 'gap-2')}>
+                        {ancestors.map((breadcrumb, index) => (
+                            <>
+                                <li key={breadcrumb.id}>
+                                    <StyledLink
+                                        href={pageHref(pages, breadcrumb)}
+                                        style={tcls(
+                                            'no-underline',
+                                            'hover:underline',
+                                            'text-xs',
+                                            'tracking-wide',
+                                            'font-semibold',
+                                            'uppercase',
+                                            'flex',
+                                            'items-center',
+                                            'gap-1',
+                                        )}
+                                    >
+                                        <PageIcon
+                                            page={breadcrumb}
+                                            style={tcls('size-4', 'text-base', 'leading-none')}
+                                        />
+                                        {breadcrumb.title}
+                                    </StyledLink>
+                                </li>
+                                {index != ancestors.length - 1 && (
+                                    <Icon
+                                        icon="chevron-right"
+                                        className={tcls(
+                                            'size-3',
+                                            'text-light-4',
+                                            'dark:text-dark-4',
+                                        )}
+                                    />
+                                )}
+                            </>
+                        ))}
+                    </ol>
+                </nav>
+            )}
             {page.layout.title ? (
                 <h1 className={tcls('text-4xl', 'font-bold', 'flex', 'items-center', 'gap-4')}>
                     <PageIcon page={page} style={['text-dark/6', 'dark:text-light/6']} />

packages/gitbook/src/components/PageFeedback/server-actions.ts

@@ -18,7 +18,7 @@ export async function postPageFeedback(args: {
         `No siteSpaceId in pointer. organizationId: ${organizationId}, siteId: ${siteId}, pageId: ${args.pageId}`,
     );
 
-    await api().orgs.createSitesPageFeedback(
+    await api().client.orgs.createSitesPageFeedback(
         organizationId,
         siteId,
         siteSpaceId,

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -1,9 +1,9 @@
 import {
-    CustomizationBackground,
     CustomizationCorners,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationSettings,
+    CustomizationTint,
     SiteCustomizationSettings,
 } from '@gitbook/api';
 import { IconsProvider, IconStyle } from '@gitbook/icons';
@@ -17,11 +17,13 @@ import { getStaticFileURL } from '@/lib/assets';
 import { hexToRgb, shadesOfColor } from '@/lib/colors';
 import { tcls } from '@/lib/tailwind';
 
-import { ClientContexts } from './ClientContexts';
 import { emojiFontClassName } from '../primitives';
+import { ClientContexts } from './ClientContexts';
 
-import './globals.css';
 import '@gitbook/icons/style.css';
+import './globals.css';
+
+const DEFAULT_TINT_COLOR = '#787878';
 
 /**
  * Layout shared between the content and the PDF renderer.
@@ -36,26 +38,21 @@ export async function CustomizationRootLayout(props: {
     const headerTheme = generateHeaderTheme(customization);
     const language = getSpaceLanguage(customization);
 
+    const tintColor = getTintColor(customization);
+
     return (
         <html
             suppressHydrationWarning
             lang={customization.internationalization.locale}
-            className={
-                tcls(
-                    customization.header.preset === CustomizationHeaderPreset.None
-                        ? null
-                        : [
-                              // Take the sticky header in consideration for the scrolling
-                              `scroll-pt-[76px]`,
-                          ],
-                ) +
-                (customization.styling.corners === CustomizationCorners.Straight
+            className={tcls(
+                customization.header.preset === CustomizationHeaderPreset.None
+                    ? null
+                    : 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling
+                customization.styling.corners === CustomizationCorners.Straight
                     ? ' straight-corners'
-                    : '') +
-                (customization.styling.background === CustomizationBackground.Plain
-                    ? ' plain-background'
-                    : '')
-            }
+                    : '',
+                tintColor ? ' tint' : 'no-tint',
+            )}
         >
             <head>
                 {customization.privacyPolicy.url ? (
@@ -87,10 +84,22 @@ export async function CustomizationRootLayout(props: {
                             )
                         }
 
-                        ${generateColorVariable(
-                            'primary-base',
-                            customization.styling.primaryColor.light,
-                        )}
+                        ${generateColorVariable('tint-color', tintColor?.light ?? DEFAULT_TINT_COLOR)}
+                        ${
+                            // Generate the right contrast color for each shade of tint-color
+                            generateColorVariable(
+                                'contrast-tint',
+                                Object.fromEntries(
+                                    Object.entries(
+                                        shadesOfColor(tintColor?.light || DEFAULT_TINT_COLOR),
+                                    ).map(([index, color]) => [
+                                        index,
+                                        colorContrast(color, ['#000', '#fff']),
+                                    ]),
+                                ),
+                            )
+                        }
+
                         ${generateColorVariable(
                             'header-background',
                             headerTheme.backgroundColor.light,
@@ -103,10 +112,6 @@ export async function CustomizationRootLayout(props: {
                             'primary-color',
                             customization.styling.primaryColor.dark,
                         )}
-                        ${generateColorVariable(
-                            'primary-base',
-                            customization.styling.primaryColor.dark,
-                        )}
                         ${
                             // Generate the right contrast color for each shade of primary-color
                             generateColorVariable(
@@ -121,6 +126,23 @@ export async function CustomizationRootLayout(props: {
                                 ),
                             )
                         }
+
+                        ${generateColorVariable('tint-color', tintColor?.dark ?? DEFAULT_TINT_COLOR)}
+                        ${
+                            // Generate the right contrast color for each shade of tint-color
+                            generateColorVariable(
+                                'contrast-tint',
+                                Object.fromEntries(
+                                    Object.entries(
+                                        shadesOfColor(tintColor?.dark || DEFAULT_TINT_COLOR),
+                                    ).map(([index, color]) => [
+                                        index,
+                                        colorContrast(color, ['#000', '#fff']),
+                                    ]),
+                                ),
+                            )
+                        }
+
                         ${generateColorVariable(
                             'header-background',
                             headerTheme.backgroundColor.dark,
@@ -160,6 +182,21 @@ export async function CustomizationRootLayout(props: {
     );
 }
 
+/**
+ * Get the tint color from the customization settings.
+ * If the tint color is not set or it is a space customization, it will return the default color.
+ */
+export function getTintColor(
+    customization: CustomizationSettings | SiteCustomizationSettings,
+): CustomizationTint['color'] | undefined {
+    if ('tint' in customization.styling && customization.styling.tint) {
+        return {
+            light: customization.styling.tint?.color.light ?? DEFAULT_TINT_COLOR,
+            dark: customization.styling.tint?.color.dark ?? DEFAULT_TINT_COLOR,
+        };
+    }
+}
+
 type ColorInput = string | Record<string, string>;
 function generateColorVariable(name: string, color: ColorInput) {
     const shades: Record<string, string> = typeof color === 'string' ? shadesOfColor(color) : color;
@@ -177,6 +214,8 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
     backgroundColor: { light: ColorInput; dark: ColorInput };
     linkColor: { light: ColorInput; dark: ColorInput };
 } {
+    const tintColor = getTintColor(customization);
+
     switch (customization.header.preset) {
         case CustomizationHeaderPreset.None:
         case CustomizationHeaderPreset.Default: {
@@ -194,17 +233,17 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
         case CustomizationHeaderPreset.Bold: {
             return {
                 backgroundColor: {
-                    light: customization.styling.primaryColor.light,
-                    dark: customization.styling.primaryColor.dark,
+                    light: tintColor?.light ?? customization.styling.primaryColor.light,
+                    dark: tintColor?.dark ?? customization.styling.primaryColor.dark,
                 },
                 linkColor: {
                     light: colorContrast(
-                        customization.styling.primaryColor.light,
+                        tintColor?.light ?? customization.styling.primaryColor.light,
                         [colors.white, colors.black],
                         'aaa',
                     ),
                     dark: colorContrast(
-                        customization.styling.primaryColor.dark,
+                        tintColor?.dark ?? customization.styling.primaryColor.dark,
                         [colors.white, colors.black],
                         'aaa',
                     ),
@@ -226,15 +265,25 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
         case CustomizationHeaderPreset.Custom: {
             return {
                 backgroundColor: {
-                    light: customization.header.backgroundColor?.light ?? colors.white,
-                    dark: customization.header.backgroundColor?.dark ?? colors.black,
+                    light:
+                        customization.header.backgroundColor?.light ??
+                        tintColor?.light ??
+                        colors.white,
+                    dark:
+                        customization.header.backgroundColor?.dark ??
+                        tintColor?.dark ??
+                        colors.black,
                 },
                 linkColor: {
                     light:
                         customization.header.linkColor?.light ??
+                        (tintColor?.light &&
+                            colorContrast(tintColor.light, [colors.white, colors.black], 'aaa')) ??
                         customization.styling.primaryColor.light,
                     dark:
                         customization.header.linkColor?.dark ??
+                        (tintColor?.dark &&
+                            colorContrast(tintColor.dark, [colors.white, colors.black], 'aaa')) ??
                         customization.styling.primaryColor.dark,
                 },
             };

packages/gitbook/src/components/RootLayout/globals.css

@@ -7,27 +7,19 @@
         --scrollbar-width: calc(100vw - 100%);
 
         --dark-base: 20 20 20;
-        --light-base: 251 252 252;
+        --light-base: 251 251 251;
 
-        --light-1: color-mix(in srgb, rgb(var(--primary-base-600)), rgb(var(--light-base)) 99%);
-        --light-DEFAULT: color-mix(
-            in srgb,
-            rgb(var(--primary-base-700)),
-            rgb(var(--light-base)) 96%
-        );
-        --light-2: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 92%);
-        --light-3: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 88%);
-        --light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 72%);
+        --light-1: color-mix(in srgb, rgb(var(--tint-color-600)), rgb(var(--light-base)) 99%);
+        --light-DEFAULT: color-mix(in srgb, rgb(var(--tint-color-700)), rgb(var(--light-base)) 96%);
+        --light-2: color-mix(in srgb, rgb(var(--tint-color-700)), rgb(var(--light-base)) 94%);
+        --light-3: color-mix(in srgb, rgb(var(--tint-color-800)), rgb(var(--light-base)) 88%);
+        --light-4: color-mix(in srgb, rgb(var(--tint-color-800)), rgb(var(--light-base)) 72%);
 
-        --dark-1: color-mix(in srgb, rgb(var(--primary-base-100)), rgb(1 1 1) 96%);
-        --dark-DEFAULT: color-mix(
-            in srgb,
-            rgb(var(--primary-base-300)),
-            rgb(var(--dark-base)) 94.5%
-        );
-        --dark-2: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 92%);
-        --dark-3: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(25 25 25) 91%);
-        --dark-4: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 64%);
+        --dark-1: color-mix(in srgb, rgb(var(--tint-color-400)), rgb(var(--dark-base)) 96%);
+        --dark-DEFAULT: color-mix(in srgb, rgb(var(--tint-color-300)), rgb(var(--dark-base)) 94%);
+        --dark-2: color-mix(in srgb, rgb(var(--tint-color-300)), rgb(var(--dark-base)) 92%);
+        --dark-3: color-mix(in srgb, rgb(var(--tint-color-200)), rgb(var(--dark-base)) 91%);
+        --dark-4: color-mix(in srgb, rgb(var(--tint-color-200)), rgb(var(--dark-base)) 64%);
         @apply leading-relaxed;
     }
     body {
@@ -36,29 +28,13 @@
     html {
         @apply gutter-stable;
     }
-    html:is(.plain-background) {
-        --dark-base: 22 22 22;
+    html:is(.no-tint) {
         --light-base: 255 255 255;
-        /* reset primaries as greys */
-        --primary-base-50: 239 239 239;
-        --primary-base-100: 222 222 222;
-        --primary-base-200: 200 200 200;
-        --primary-base-300: 180 180 180;
-        --primary-base-400: 150 150 150;
-        --primary-base-500: 120 120 120;
-        --primary-base-600: 90 90 90;
-        --primary-base-700: 70 70 70;
-        --primary-base-800: 30 30 30;
-        --primary-base-900: 19 19 19;
-
         --light-DEFAULT: color-mix(
             in srgb,
-            rgb(var(--primary-base-700)),
+            rgb(var(--tint-color-500)),
             rgb(var(--light-base)) 100%
         );
-        --light-2: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 96%);
-        --light-3: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 90%);
-        --light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 76%);
     }
     h1 {
         @apply tracking-[-0.025em] text-dark dark:text-light text-balance;
@@ -216,3 +192,30 @@ html {
 html.dark {
     color-scheme: dark light;
 }
+
+/* Emojis */
+
+[class*='emoji'] {
+    font-family: var(--font-emojis-sbix);
+}
+
+/* Safari Only CSS here */
+_::-webkit-full-page-media,
+_:future,
+:root [class*='emoji'] {
+    font-family: var(--font-emojis-sbix);
+}
+
+/* Chrome Only CSS here */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    .emoji {
+        font-family: var(--font-emojis-colrv1);
+    }
+}
+
+/* Firefox Only CSS here */
+@-moz-document url-prefix() {
+    .emoji {
+        font-family: var(--font-emojis-colrv1);
+    }
+}

packages/gitbook/src/components/Search/HighlightQuery.tsx

@@ -25,18 +25,22 @@ export function HighlightQuery(props: {
             'py-0.5',
             'rounded',
             'straight-corners:rounded-sm',
+            'group-[.is-active]:bg-primary-200',
+            'group-[.is-active]:text-contrast-primary-200',
+            'dark:group-[.is-active]:bg-primary-700',
+            'dark:group-[.is-active]:text-contrast-primary-700',
         ],
     } = props;
     const matches = matchString(text, query);
 
     return (
-        <div className={tcls('whitespace-break-spaces')}>
+        <span className={tcls('whitespace-break-spaces')}>
             {matches.map((entry, index) => (
                 <span key={index} className={tcls(entry.match ? highlight : null)}>
                     {entry.text}
                 </span>
             ))}
-        </div>
+        </span>
     );
 }
 

packages/gitbook/src/components/Search/SearchAskAnswer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@gitbook/icons';
 import React from 'react';
 import { atom, useRecoilState } from 'recoil';
@@ -7,29 +9,30 @@ import { useLanguage } from '@/intl/client';
 import { t } from '@/intl/translate';
 import { TranslationLanguage } from '@/intl/translations';
 import { iterateStreamResponse } from '@/lib/actions';
+import { SiteContentPointer } from '@/lib/api';
 import { tcls } from '@/lib/tailwind';
 
 import { AskAnswerResult, AskAnswerSource, streamAskQuestion } from './server-actions';
 import { useSearch, useSearchLink } from './useSearch';
 import { Link } from '../primitives';
 
-/**
- * Store the state of the answer in a global state so that it can be
- * accessed from anywhere to show a loading indicator.
- */
-export const searchAskState = atom<
+type SearchState =
     | {
           type: 'answer';
-          answer: AskAnswerResult | null;
+          answer: AskAnswerResult;
       }
     | {
           type: 'error';
       }
     | {
           type: 'loading';
-      }
-    | null
->({
+      };
+
+/**
+- * Store the state of the answer in a global state so that it can be
+- * accessed from anywhere to show a loading indicator.
+- */
+export const searchAskState = atom<SearchState | null>({
     key: 'searchAskState',
     default: null,
 });
@@ -37,51 +40,40 @@ export const searchAskState = atom<
 /**
  * Fetch and render the answers to a question.
  */
-export function SearchAskAnswer(props: { spaceId: string; query: string }) {
-    const { spaceId, query } = props;
+export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: string }) {
+    const { pointer, query } = props;
 
     const language = useLanguage();
     const [, setSearchState] = useSearch();
     const [state, setState] = useRecoilState(searchAskState);
+    const { organizationId, siteId, siteSpaceId } = pointer;
 
     React.useEffect(() => {
         let cancelled = false;
 
-        setState({
-            type: 'loading',
-        });
+        setState({ type: 'loading' });
 
         (async () => {
-            const stream = iterateStreamResponse(streamAskQuestion(spaceId, query));
+            const response = streamAskQuestion(organizationId, siteId, siteSpaceId ?? null, query);
+            const stream = iterateStreamResponse(response);
 
-            setSearchState((prev) =>
-                prev
-                    ? {
-                          ...prev,
-                          ask: true,
-                          query,
-                      }
-                    : null,
-            );
+            // When we pass in "ask" mode, the query could still be updated by the client
+            // we ensure that the query is up-to-date before starting the stream.
+            setSearchState((prev) => (prev ? { ...prev, query, ask: true } : null));
 
             for await (const chunk of stream) {
                 if (cancelled) {
                     return;
                 }
 
-                setState({
-                    type: 'answer',
-                    answer: chunk,
-                });
+                setState({ type: 'answer', answer: chunk });
             }
-        })().catch((error) => {
+        })().catch(() => {
             if (cancelled) {
                 return;
             }
 
-            setState({
-                type: 'error',
-            });
+            setState({ type: 'error' });
         });
 
         return () => {
@@ -91,7 +83,7 @@ export function SearchAskAnswer(props: { spaceId: string; query: string }) {
                 cancelled = true;
             }
         };
-    }, [spaceId, query, setSearchState, setState]);
+    }, [organizationId, siteId, siteSpaceId, query, setState, setSearchState]);
 
     React.useEffect(() => {
         return () => {
@@ -108,15 +100,9 @@ export function SearchAskAnswer(props: { spaceId: string; query: string }) {
     return (
         <div className={tcls('max-h-[60vh]', 'overflow-y-auto')}>
             {state?.type === 'answer' ? (
-                <>
-                    {state.answer ? (
-                        <React.Suspense fallback={loading}>
-                            <TransitionAnswerBody answer={state.answer} placeholder={loading} />
-                        </React.Suspense>
-                    ) : (
-                        <div className={tcls('p-4')}>{t(language, 'search_ask_no_answer')}</div>
-                    )}
-                </>
+                <React.Suspense fallback={loading}>
+                    <TransitionAnswerBody answer={state.answer} placeholder={loading} />
+                </React.Suspense>
             ) : null}
             {state?.type === 'error' ? (
                 <div className={tcls('p-4')}>{t(language, 'search_ask_error')}</div>
@@ -159,7 +145,7 @@ function AnswerBody(props: { answer: AskAnswerResult }) {
             <div
                 data-test="search-ask-answer"
                 className={tcls(
-                    'mt-4',
+                    'my-4',
                     'sm:mt-6',
                     'px-4',
                     'sm:px-12',
@@ -167,16 +153,16 @@ function AnswerBody(props: { answer: AskAnswerResult }) {
                     'dark:text-light/8',
                 )}
             >
-                {answer.hasAnswer ? answer.body : t(language, 'search_ask_no_answer')}
+                {answer.body ?? t(language, 'search_ask_no_answer')}
                 {answer.followupQuestions.length > 0 ? (
                     <AnswerFollowupQuestions followupQuestions={answer.followupQuestions} />
                 ) : null}
             </div>
             {answer.sources.length > 0 ? (
                 <AnswerSources
-                    hasAnswer={answer.hasAnswer}
                     sources={answer.sources}
                     language={language}
+                    hasAnswer={Boolean(answer.body)}
                 />
             ) : null}
         </>
@@ -233,7 +219,7 @@ function AnswerFollowupQuestions(props: { followupQuestions: string[] }) {
 function AnswerSources(props: {
     sources: AskAnswerSource[];
     language: TranslationLanguage;
-    hasAnswer?: boolean;
+    hasAnswer: boolean;
 }) {
     const { sources, language, hasAnswer } = props;
 

packages/gitbook/src/components/Search/SearchButton.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Icon } from '@gitbook/icons';
+import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 import { useLanguage, tString } from '@/intl/client';
@@ -35,45 +36,69 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'flex-row',
                 'justify-center',
                 'items-center',
-                'px-2',
-                'gap-3',
-                'text-dark/7',
-                'min-h-[2.5rem]',
-                'w-[2.5rem]',
-                'rounded-lg',
-                'straight-corners:rounded-none',
-                'bg-dark/2',
-                'transition-colors',
-                'transition-opacity',
-                'ease-out',
-                'hover:opacity-8',
+                'w-full',
+                'px-3',
+                'py-2',
+                'gap-2',
+
+                'bg-light',
+                'dark:bg-dark',
+
                 'ring-1',
-                'ring-inset',
                 'ring-dark/1',
+                'dark:ring-light/2',
+
+                'shadow-sm',
+                'shadow-dark/4',
+                'dark:shadow-none',
+
+                'text-dark/7',
+                'dark:text-light-4/7',
+
+                'rounded-lg',
+                'straight-corners:rounded-sm',
+
                 'contrast-more:ring-dark',
-                'contrast-more:bg-light',
                 'contrast-more:text-dark',
-                'dark:bg-light/1',
-                'dark:ring-light/1',
-                'dark:text-light/7',
                 'contrast-more:dark:ring-light',
-                'contrast-more:dark:bg-dark',
                 'contrast-more:dark:text-light',
-                '[&>p]:hidden',
-                '[&>span]:hidden',
+
+                'transition-all',
+                'hover:shadow-md',
+                'hover:scale-102',
+                'hover:ring-dark/2',
+                'hover:text-dark/10',
+                'focus:shadow-md',
+                'focus:scale-102',
+                'focus:ring-dark/2',
+                'focus:text-dark/10',
+                'dark:hover:bg-dark-3',
+                'dark:hover:ring-light/4',
+                'dark:hover:text-light',
+                'dark:focus:bg-dark-3',
+                'dark:focus:ring-light/4',
+                'dark:focus:text-light',
+
+                'contrast-more:hover:ring-2',
+                'contrast-more:hover:ring-dark',
+                'dark:contrast-more:hover:ring-light',
+                'contrast-more:focus:ring-2',
+                'contrast-more:focus:ring-dark',
+                'dark:contrast-more:focus:ring-light',
+
+                'active:shadow-sm',
+                'active:scale-98',
+
                 'md:justify-start',
-                'md:[&>p]:flex',
-                'md:[&>span]:flex',
                 'md:w-full',
-                'md:px-3.5',
-                'text-base',
                 style,
             )}
         >
-            <div className={tcls('text-dark/7', 'pt-1.5', 'pb-2', 'dark:text-light/7')}>
-                <Icon icon="magnifying-glass" className={tcls('shrink-0', 'size-4')} />
-            </div>
-            {children}
+            <Icon
+                icon="magnifying-glass"
+                className={tcls('text-dark/8', 'dark:text-light/8', 'shrink-0', 'size-4')}
+            />
+            <div className={tcls('w-full', 'hidden', 'md:block', 'text-left')}>{children}</div>
             <Shortcut />
         </button>
     );
@@ -96,20 +121,22 @@ const Shortcut = () => {
     }, []);
 
     return (
-        <span
+        <div
             className={tcls(
+                'shortcut',
                 'hidden',
                 'md:inline',
                 'justify-end',
                 'text-xs',
-                'text-dark/5',
+                'text-dark/7',
                 'contrast-more:text-dark',
-                'dark:text-light/5',
+                'dark:text-light-4/7',
                 'contrast-more:dark:text-light',
+                'whitespace-nowrap',
                 `[font-feature-settings:"calt",_"case"]`,
             )}
         >
             {operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K
-        </span>
+        </div>
     );
 };

packages/gitbook/src/components/Search/SearchModal.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Collection, Site } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';
@@ -15,7 +14,7 @@ import { tcls } from '@/lib/tailwind';
 import { SearchAskAnswer, searchAskState } from './SearchAskAnswer';
 import { SearchResults, SearchResultsRef } from './SearchResults';
 import { SearchScopeToggle } from './SearchScopeToggle';
-import { SearchState, useSearch } from './useSearch';
+import { SearchState, UpdateSearchState, useSearch } from './useSearch';
 import { LoadingPane } from '../primitives/LoadingPane';
 
 interface SearchModalProps {
@@ -56,14 +55,6 @@ export function SearchModal(props: SearchModalProps) {
         };
     }, [isSearchOpened]);
 
-    if (state === null) {
-        return null;
-    }
-
-    const onChangeQuery = (newQuery: SearchState) => {
-        setSearchState(newQuery);
-    };
-
     const onClose = async (to?: string) => {
         await setSearchState(null);
         if (to) {
@@ -72,69 +63,82 @@ export function SearchModal(props: SearchModalProps) {
     };
 
     return (
-        <>
-            <div
-                role="dialog"
-                className={tcls(
-                    'flex',
-                    'items-start',
-                    'justify-center',
-                    'fixed',
-                    'inset-0',
-                    'bg-dark/4',
-                    'backdrop-blur-2xl',
-                    'opacity-[1]',
-                    'z-30',
-                    'px-4',
-                    'pt-4',
-                    'dark:bg-dark/8',
-                    'md:pt-[min(8vw,_6rem)]',
-                )}
-                onClick={() => {
-                    onClose();
-                }}
-            >
-                <AnimatePresence>
-                    {askState?.type === 'loading' ? (
-                        <motion.div
-                            key="loading"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ duration: 1 }}
-                            className={tcls(
-                                'w-[100vw]',
-                                'h-[100vh]',
-                                'fixed',
-                                'inset-0',
-                                'z-10',
-                                'pointer-events-none',
-                            )}
-                        >
-                            <LoadingPane
-                                gridStyle={['h-[100vh]', 'aspect-auto', 'top-[-30%]']}
-                                pulse
-                                tile={96}
-                                style={['grid']}
-                            />
-                        </motion.div>
-                    ) : null}
-                </AnimatePresence>
-                <SearchModalBody
-                    {...props}
-                    state={state}
-                    onChangeQuery={onChangeQuery}
-                    onClose={onClose}
-                />
-            </div>
-        </>
+        <AnimatePresence>
+            {state !== null ? (
+                <motion.div
+                    initial={{
+                        opacity: 0,
+                    }}
+                    animate={{
+                        opacity: 1,
+                    }}
+                    exit={{
+                        opacity: 0,
+                    }}
+                    transition={{
+                        duration: 0.2,
+                        delay: 0.1,
+                    }}
+                    role="dialog"
+                    className={tcls(
+                        'fixed',
+                        'inset-0',
+                        'bg-dark/4',
+                        'backdrop-blur-2xl',
+                        'z-30',
+                        'px-4',
+                        'pt-4',
+                        'dark:bg-dark/8',
+                        'md:pt-[min(8vh,6rem)]',
+                    )}
+                    onClick={() => {
+                        onClose();
+                    }}
+                >
+                    <div className="scroll-nojump">
+                        <AnimatePresence>
+                            {askState?.type === 'loading' ? (
+                                <motion.div
+                                    key="loading"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    transition={{ duration: 1 }}
+                                    className={tcls(
+                                        'w-screen',
+                                        'h-screen',
+                                        'fixed',
+                                        'inset-0',
+                                        'z-10',
+                                        'pointer-events-none',
+                                    )}
+                                >
+                                    <LoadingPane
+                                        gridStyle={['h-screen', 'aspect-auto', 'top-[-30%]']}
+                                        pulse
+                                        tile={96}
+                                        style={['grid']}
+                                    />
+                                </motion.div>
+                            ) : null}
+                        </AnimatePresence>
+                        <SearchModalBody
+                            {...props}
+                            state={state}
+                            setSearchState={setSearchState}
+                            onClose={onClose}
+                        />
+                    </div>
+                </motion.div>
+            ) : null}
+        </AnimatePresence>
     );
 }
 
 function SearchModalBody(
     props: SearchModalProps & {
         state: SearchState;
-        onChangeQuery: (newQuery: SearchState) => void;
+        setSearchState: UpdateSearchState;
         onClose: (to?: string) => void;
     },
 ) {
@@ -146,7 +150,7 @@ function SearchModalBody(
         withAsk,
         isMultiVariants,
         state,
-        onChangeQuery,
+        setSearchState,
         onClose,
     } = props;
 
@@ -158,10 +162,21 @@ function SearchModalBody(
         inputRef.current?.focus();
     }, []);
 
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onClose]);
+
     const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === 'Escape') {
-            onClose();
-        } else if (event.key === 'ArrowUp') {
+        if (event.key === 'ArrowUp') {
             event.preventDefault();
             resultsRef.current?.moveUp();
         } else if (event.key === 'ArrowDown') {
@@ -174,7 +189,7 @@ function SearchModalBody(
     };
 
     const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        onChangeQuery({
+        setSearchState({
             ask: false, // When typing, we go back to the default search mode
             query: event.target.value,
             global: state.global,
@@ -183,15 +198,34 @@ function SearchModalBody(
 
     return (
         <motion.div
+            transition={{
+                duration: 0.2,
+                delay: 0.1,
+                ease: 'easeOut',
+            }}
+            initial={{
+                scale: 0.95,
+                opacity: 0,
+            }}
+            animate={{
+                scale: 1,
+                opacity: 1,
+            }}
+            exit={{
+                scale: 0.95,
+                opacity: 0,
+            }}
             role="dialog"
             aria-label={tString(language, 'search')}
             className={tcls(
                 'z-40',
+                'relative',
                 'flex',
                 'flex-col',
                 'bg-white',
-                'max-w-[768px]',
-                'mt-[-1px]',
+                'max-w-prose',
+                'mx-auto',
+                'max-h-[70dvh]',
                 'w-full',
                 'rounded-lg',
                 'straight-corners:rounded-sm',
@@ -203,14 +237,6 @@ function SearchModalBody(
                 'dark:bg-dark-3',
                 'dark:ring-light/2',
             )}
-            initial={{
-                scale: 0.95,
-                opacity: 0,
-            }}
-            animate={{
-                scale: 1,
-                opacity: 1,
-            }}
             onClick={(event) => {
                 event.stopPropagation();
             }}
@@ -282,16 +308,12 @@ function SearchModalBody(
                     query={state.query}
                     withAsk={withAsk}
                     onSwitchToAsk={() => {
-                        onChangeQuery({
-                            ask: true,
-                            query: state.query,
-                            global: state.global,
-                        });
+                        setSearchState((state) => (state ? { ...state, ask: true } : null));
                     }}
                 ></SearchResults>
             ) : null}
             {state.query && state.ask && withAsk ? (
-                <SearchAskAnswer spaceId={spaceId} query={state.query} />
+                <SearchAskAnswer pointer={pointer} query={state.query} />
             ) : null}
         </motion.div>
     );

packages/gitbook/src/components/Search/SearchPageResultItem.tsx

@@ -23,26 +23,38 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
             href={item.href}
             className={tcls(
                 'flex',
+                'gap-4',
                 'flex-row',
                 'items-center',
-                'px-4',
-                'sm:px-12',
-                'py-4',
-                'sm:py-6',
+                'p-4',
                 'border-t',
-                'first:border-t-0',
                 'border-dark/2',
-                'dark:border-light/2',
-                'hover:bg-dark-4/2',
+                'dark:border-light/1',
+                'first:border-none',
                 'text-base',
-                'text-dark',
                 'font-medium',
-                'first:mt-0',
-                'dark:text-light',
-                'dark:hover:bg-light-4/2',
-                active ? ['bg-dark/1', 'dark:bg-light/1'] : null,
+                'hover:bg-dark/1',
+                'dark:hover:bg-light/1',
+                'group',
+                active
+                    ? [
+                          'is-active',
+                          'bg-primary-50',
+                          'text-contrast-primary-50',
+                          'dark:bg-primary-800',
+                          'dark:text-contrast-primary-800',
+                          'hover:bg-primary-100/8',
+                          'dark:hover:bg-primary-700/7',
+                      ]
+                    : null,
             )}
         >
+            <div className="size-4">
+                <Icon
+                    icon="file-lines"
+                    className={tcls('size-4', active ? 'text-primary' : 'opacity-5')}
+                />
+            </div>
             <div className={tcls('flex', 'flex-col', 'w-full')}>
                 {item.spaceTitle ? (
                     <div
@@ -60,10 +72,19 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
                 ) : null}
                 <HighlightQuery query={query} text={item.title} />
             </div>
-            <Icon
-                icon="chevron-right"
-                className={tcls('size-4', 'text-dark', 'dark:text-light', 'opacity-6')}
-            />
+            <div
+                className={tcls(
+                    'p-2',
+                    'rounded',
+                    'straight-corners:rounded-none',
+                    active ? ['bg-primary', 'text-contrast-primary'] : ['opacity-6'],
+                )}
+            >
+                <Icon
+                    icon={active ? 'arrow-turn-down-left' : 'chevron-right'}
+                    className={tcls('size-4')}
+                />
+            </div>
         </Link>
     );
 });

packages/gitbook/src/components/Search/SearchQuestionResultItem.tsx

@@ -26,16 +26,21 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
             onClick={onClick}
             className={tcls(
                 'flex',
-                'flex-row',
                 'px-4',
-                'py-2',
-                'hover:bg-dark-4/2',
-                'text-dark/7',
+                recommended ? ['py-2', 'text-dark/7', 'dark:text-light/8'] : 'py-4',
+                'hover:bg-dark/1',
+                'dark:hover:bg-light/1',
                 'first:mt-0',
                 'last:pb-3',
-                'dark:text-light/8',
-                'dark:hover:bg-light-4/2',
-                active ? ['bg-dark/1', 'dark:bg-light/1'] : null,
+                active && [
+                    'is-active',
+                    'bg-primary-50',
+                    'text-contrast-primary-50',
+                    'dark:bg-primary-800',
+                    'dark:text-contrast-primary-800',
+                    'hover:bg-primary-100/8',
+                    'dark:hover:bg-primary-700/7',
+                ],
             )}
             {...getLinkProp({
                 ask: true,
@@ -43,18 +48,41 @@ export const SearchQuestionResultItem = React.forwardRef(function SearchQuestion
             })}
         >
             <Icon
-                icon="magnifying-glass"
+                icon={recommended ? 'search' : 'sparkles'}
                 className={tcls(
                     'size-4',
                     'shrink-0',
-                    'mt-0.5',
+                    'mt-1.5',
                     'mr-4',
-                    'mt-1',
-                    'text-dark/5',
-                    'dark:text-light/5',
+                    active ? ['text-primary'] : ['text-dark/5', 'dark:text-light/5'],
                 )}
             />
-            {recommended ? question : t(language, 'search_ask', [question])}
+            <div className="w-full">
+                {recommended ? (
+                    question
+                ) : (
+                    <>
+                        <div className="font-medium">{t(language, 'search_ask', [question])}</div>
+                        <div className={tcls('text-sm', 'text-dark/8', 'dark:text-light/8')}>
+                            {t(language, 'search_ask_description')}
+                        </div>
+                    </>
+                )}
+            </div>
+            <div
+                className={tcls(
+                    'p-2',
+                    'rounded',
+                    'self-center',
+                    'straight-corners:rounded-none',
+                    active ? ['bg-primary', 'text-contrast-primary'] : ['opacity-6'],
+                )}
+            >
+                <Icon
+                    icon={active ? 'arrow-turn-down-left' : 'chevron-right'}
+                    className={tcls('size-4')}
+                />
+            </div>
         </Link>
     );
 });

packages/gitbook/src/components/Search/SearchResults.tsx

@@ -5,7 +5,6 @@ import { t, useLanguage } from '@/intl/client';
 import { SiteContentPointer } from '@/lib/api';
 import { tcls } from '@/lib/tailwind';
 
-import { isQuestion } from './isQuestion';
 import { SearchPageResultItem } from './SearchPageResultItem';
 import { SearchQuestionResultItem } from './SearchQuestionResultItem';
 import { SearchSectionResultItem } from './SearchSectionResultItem';
@@ -92,8 +91,6 @@ export const SearchResults = React.forwardRef(function SearchResults(
             }
 
             debounceTimeout.current = setTimeout(async () => {
-                setCursor(null);
-
                 const fetchedResults = await (global
                     ? searchAllSiteContent(query, pointer)
                     : searchSiteSpaceContent(query, pointer, revisionId));
@@ -110,6 +107,16 @@ export const SearchResults = React.forwardRef(function SearchResults(
         }
     }, [query, global, pointer, spaceId, revisionId, withAsk]);
 
+    React.useEffect(() => {
+        if (!query) {
+            // Reset the cursor when there's no query
+            setCursor(null);
+        } else if (results && results.length > 0) {
+            // Auto-focus the first result
+            setCursor(0);
+        }
+    }, [results, query]);
+
     // Scroll to the active result.
     React.useEffect(() => {
         if (cursor === null || !refs.current[cursor]) {
@@ -174,7 +181,7 @@ export const SearchResults = React.forwardRef(function SearchResults(
     }
 
     return (
-        <div className={tcls('max-h-[70vh]', 'overflow-auto', 'relative')}>
+        <div className={tcls('overflow-auto')}>
             {children}
             {results.length === 0 ? (
                 <div
@@ -256,10 +263,13 @@ export const SearchResults = React.forwardRef(function SearchResults(
     );
 });
 
+/**
+ * Add a "Ask <question>" item at the top of the results list.
+ */
 function withQuestionResult(results: null | ResultType[], query: string): null | ResultType[] {
     const without = results ? results.filter((result) => result.type !== 'question') : null;
 
-    if (!isQuestion(query)) {
+    if (query.length === 0) {
         return without;
     }
 

packages/gitbook/src/components/Search/SearchSectionResultItem.tsx

@@ -1,3 +1,4 @@
+import { Icon } from '@gitbook/icons';
 import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
@@ -21,27 +22,39 @@ export const SearchSectionResultItem = React.forwardRef(function SearchSectionRe
             ref={ref}
             href={item.href}
             className={tcls(
-                'search-section-result-item',
                 '[&:has(+:not(&))]:mb-6',
                 'flex',
-                'flex-col',
-                'mb-2',
-                'px-4',
-                'sm:px-12',
-                'hover:bg-dark-4/2',
-                'dark:hover:bg-light-4/2',
+                'items-center',
+                'pl-6',
+                'sm:pl-12',
+                'pr-4',
                 'text-dark/8',
                 'dark:text-light/8',
+                'hover:bg-dark/1',
+                'dark:hover:bg-light/1',
                 'font-normal',
-                'transition-colors',
-                active ? ['bg-dark/1', 'dark:bg-light/1'] : null,
+                'py-2',
+                'group',
+                active && [
+                    'is-active',
+                    'bg-primary-50',
+                    'text-contrast-primary-50',
+                    'dark:bg-primary-800',
+                    'dark:text-contrast-primary-800',
+                    'hover:bg-primary-100/8',
+                    'dark:hover:bg-primary-700/7',
+                ],
             )}
         >
             <div
                 className={tcls(
                     'border-l-2',
                     'px-4',
-                    'py-2',
+                    'py-1',
+                    'flex',
+                    'flex-1',
+                    'overflow-hidden',
+                    'flex-col',
                     'border-dark/2',
                     'dark:border-light/2',
                 )}
@@ -52,18 +65,25 @@ export const SearchSectionResultItem = React.forwardRef(function SearchSectionRe
                     </p>
                 ) : null}
                 {item.body ? (
-                    <p
-                        className={tcls(
-                            'text-sm',
-                            'line-clamp-3',
-                            'z-[-1]', //to force stacking order
-                            'relative',
-                        )}
-                    >
+                    <p className={tcls('text-sm', 'line-clamp-3', 'relative')}>
                         <HighlightQuery query={query} text={item.body} />
                     </p>
                 ) : null}
             </div>
+            <div
+                className={tcls(
+                    'p-2',
+                    'rounded',
+                    'straight-corners:rounded-none',
+                    'bg-primary',
+                    'text-contrast-primary',
+                    'hidden',
+                    'sm:block',
+                    active ? ['opacity-11', 'block'] : ['opacity-0'],
+                )}
+            >
+                <Icon icon="arrow-turn-down-left" className={tcls('size-4')} />
+            </div>
         </Link>
     );
 });

packages/gitbook/src/components/Search/server-actions.tsx

@@ -39,10 +39,10 @@ export interface AskAnswerSource {
 }
 
 export interface AskAnswerResult {
+    /** Undefined if no answer. */
     body?: React.ReactNode;
     followupQuestions: string[];
     sources: AskAnswerSource[];
-    hasAnswer: boolean;
 }
 
 /**
@@ -152,16 +152,53 @@ export async function searchSiteSpaceContent(
 /**
  * Server action to ask a question in a space.
  */
-export const streamAskQuestion = streamResponse(async function* (spaceId: string, query: string) {
-    const stream = api
-        .api()
-        .spaces.streamAskInSpace(spaceId, { query, format: 'document', details: true });
-    const pagesPromise = api.getSpaceContentData({ spaceId }, undefined);
+export const streamAskQuestion = streamResponse(async function* (
+    organizationId: string,
+    siteId: string,
+    siteSpaceId: string | null,
+    question: string,
+) {
+    const stream = api.api().client.orgs.streamAskInSite(
+        organizationId,
+        siteId,
+        {
+            question,
+            context: siteSpaceId
+                ? {
+                      siteSpaceId,
+                  }
+                : undefined,
+            scope: {
+                mode: 'default',
 
+                // Include the current site space regardless.
+                includedSiteSpaces: siteSpaceId ? [siteSpaceId] : undefined,
+            },
+        },
+        { format: 'document' },
+    );
+
+    const spaceData = new PromiseQueue<string, RevisionPage[]>();
     for await (const chunk of stream) {
-        // We run the AI search and fetch the pages in parallel
-        const { pages } = await pagesPromise;
+        const answer = chunk.answer;
 
+        // Register the space of each page source into the promise queue.
+        const spaces = answer.sources
+            .map((source) => {
+                if (source.type !== 'page') {
+                    return null;
+                }
+
+                spaceData.registerPromise(source.space, () => {
+                    return api.getRevisionPages(source.space, source.revision, { metadata: false });
+                });
+
+                return source.space;
+            })
+            .filter(filterOutNullable);
+
+        // Get the pages for all spaces referenced by this answer.
+        const pages = await spaceData.getPromises(spaces);
         yield transformAnswer(chunk.answer, pages);
     }
 });
@@ -175,26 +212,28 @@ export async function getRecommendedQuestions(spaceId: string): Promise<string[]
 }
 
 function transformAnswer(
-    answer: SearchAIAnswer | undefined,
-    pages: RevisionPage[],
-): AskAnswerResult | null {
-    if (!answer) {
-        return null;
-    }
-
+    answer: SearchAIAnswer,
+    spacePages: Map<string, RevisionPage[]>,
+): AskAnswerResult {
     const sources = answer.sources
         .map((source) => {
             if (source.type !== 'page') {
                 return null;
             }
 
+            const pages = spacePages.get(source.space);
+
+            if (!pages) {
+                return null;
+            }
+
             const page = resolvePageId(pages, source.page);
             if (!page) {
                 return null;
             }
 
             return {
-                id: page.page.id,
+                id: source.page,
                 title: page.page.title,
                 href: pageHref(pages, page.page),
             };
@@ -217,7 +256,6 @@ function transformAnswer(
             ) : null,
         followupQuestions: answer.followupQuestions,
         sources,
-        hasAnswer: !!answer.answer && 'document' in answer.answer,
     };
 }
 
@@ -283,3 +321,70 @@ function transformPageResult(item: SearchPageResult, space?: Space) {
 
     return [page, ...sections];
 }
+
+/**
+ * A queue for promises that performs deduplication of requests
+ * and ensures they run sequentially.
+ *
+ * This is useful when you want to make multiple async requests
+ * but want to avoid making the same request multiple times.
+ *
+ * Running the promises sequentially gives us some safety about
+ * hitting Cloudflare Worker's 6 parallel subrequest limits.
+ */
+class PromiseQueue<Key extends string, Value> {
+    private promiseQueue: (() => Promise<Value>)[] = [];
+    private results: Map<Key, Value> = new Map();
+    private registeredKeys: Set<Key> = new Set();
+    private currentExecution: Promise<void> | null = null;
+
+    private async executeQueue() {
+        while (this.promiseQueue.length > 0) {
+            const promiseFn = this.promiseQueue.shift()!;
+            await promiseFn();
+        }
+        this.currentExecution = null; // Mark the queue as idle
+    }
+
+    registerPromise(key: Key, fn: () => Promise<Value>): void {
+        if (this.registeredKeys.has(key)) {
+            return;
+        }
+
+        this.registeredKeys.add(key);
+
+        const wrapperFn = async () => {
+            const result = await fn();
+            this.results.set(key, result);
+            return result;
+        };
+
+        this.promiseQueue.push(wrapperFn);
+
+        // Start executing if not already running
+        if (!this.currentExecution) {
+            this.currentExecution = this.executeQueue();
+        }
+    }
+
+    /**
+     * Returns a promise that resolves to a map of results for the given keys.
+     * If the key has not been registered in the queue, it will be ignored.
+     */
+    async getPromises(keys: Key[]): Promise<Map<Key, Value>> {
+        // Wait for any ongoing executions to finish
+        if (this.currentExecution) {
+            await this.currentExecution;
+        }
+
+        return keys.reduce((map, key) => {
+            const data = this.results.get(key);
+
+            if (data) {
+                return map.set(key, data);
+            }
+
+            return map;
+        }, new Map<Key, Value>());
+    }
+}

packages/gitbook/src/components/Search/useSearch.ts

@@ -16,18 +16,17 @@ const keyMap = {
     global: parseAsBoolean,
 };
 
-const options: UseQueryStatesOptions = {
-    history: 'replace',
-};
+export type UpdateSearchState = (
+    update: React.SetStateAction<SearchState | null>,
+) => Promise<URLSearchParams>;
 
 /**
  * Hook to access the current search query and update it.
  */
-export function useSearch(): [
-    SearchState | null,
-    (update: React.SetStateAction<SearchState | null>) => Promise<URLSearchParams>,
-] {
-    const [rawState, setRawState] = useQueryStates(keyMap, options);
+export function useSearch(): [SearchState | null, UpdateSearchState] {
+    const [rawState, setRawState] = useQueryStates(keyMap, {
+        history: 'replace',
+    });
 
     const state = React.useMemo<SearchState | null>(() => {
         if (rawState === null || rawState.q === null) {

packages/gitbook/src/components/SiteSectionTabs/SectionIcon.tsx

@@ -0,0 +1,21 @@
+import type { SiteSection } from '@gitbook/api';
+import { Icon, type IconName } from '@gitbook/icons';
+
+import { type ClassValue, tcls } from '@/lib/tailwind';
+
+/**
+ * Icon shown beside a section in the site section tabs.
+ */
+export function SectionIcon(props: { icon: IconName; isActive: boolean }) {
+    const { icon, isActive } = props;
+
+    return (
+        <Icon
+            icon={icon}
+            className={tcls(
+                'size-[1em] text-inherit opacity-8',
+                isActive && 'text-inherit opacity-10',
+            )}
+        />
+    );
+}

packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx

@@ -1,10 +1,13 @@
 'use client';
-import { SiteSection } from '@gitbook/api';
+
+import type { SiteSection } from '@gitbook/api';
+import type { IconName } from '@gitbook/icons';
 import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
 
 import { Link } from '../primitives';
+import { SectionIcon } from './SectionIcon';
 
 /**
  * A set of navigational tabs representing site sections for multi-section sites
@@ -14,13 +17,7 @@ export function SiteSectionTabs(props: {
     section: SiteSection;
     index: number;
 }) {
-    const { list: sections, section: currentSection, index: currentIndex } = props;
-
-    const tabs = sections.map((section) => ({
-        id: section.id,
-        label: section.title,
-        path: section.urls.published ?? '',
-    }));
+    const { list: sections, index: currentIndex } = props;
 
     const currentTabRef = React.useRef<HTMLAnchorElement>(null);
     const navRef = React.useRef<HTMLDivElement>(null);
@@ -43,7 +40,9 @@ export function SiteSectionTabs(props: {
     }, []);
 
     React.useEffect(() => {
-        updateTabDimensions();
+        if (currentIndex >= 0) {
+            updateTabDimensions();
+        }
     }, [currentIndex, updateTabDimensions]);
 
     React.useLayoutEffect(() => {
@@ -55,11 +54,11 @@ export function SiteSectionTabs(props: {
         };
     }, [updateTabDimensions]);
 
-    const opacity = Boolean(tabDimensions) ? 1 : 0.0;
+    const opacity = tabDimensions ? 1 : 0.0;
     const scale = (tabDimensions?.width ?? 0) * 0.01;
     const startPos = `${tabDimensions?.left ?? 0}px`;
 
-    return tabs.length > 0 ? (
+    return sections.length > 0 ? (
         <nav
             aria-label="Sections"
             ref={navRef}
@@ -84,15 +83,24 @@ export function SiteSectionTabs(props: {
                         'md:px-5',
                     )}
                 >
-                    {tabs.map((tab, index) => (
-                        <Tab
-                            active={currentIndex === index}
-                            key={index + tab.path}
-                            label={tab.label}
-                            href={tab.path}
-                            ref={currentIndex === index ? currentTabRef : null}
-                        />
-                    ))}
+                    {sections.map((section, index) => {
+                        const { id, urls, title, icon } = section;
+                        const isActive = index === currentIndex;
+                        return (
+                            <Tab
+                                active={isActive}
+                                key={id}
+                                label={title}
+                                href={urls.published ?? ''}
+                                ref={isActive ? currentTabRef : null}
+                                icon={
+                                    icon ? (
+                                        <SectionIcon isActive={isActive} icon={icon as IconName} />
+                                    ) : null
+                                }
+                            />
+                        );
+                    })}
                 </div>
                 {/* A container for a pseudo element for active tab indicator. A container is needed so we can set
                     a relative position without breaking the z-index of other parts of the header. */}
@@ -117,7 +125,7 @@ export function SiteSectionTabs(props: {
                         'after:bg-primary',
                         'dark:after:bg-primary-400',
                     )}
-                ></div>
+                />
             </div>
         </nav>
     ) : null;
@@ -126,24 +134,26 @@ export function SiteSectionTabs(props: {
 /**
  * The tab item - a link to a site section
  */
-const Tab = React.forwardRef<HTMLSpanElement, { active: boolean; href: string; label: string }>(
-    function Tab(props, ref) {
-        const { active, href, label } = props;
-        return (
-            <Link
-                className={tcls(
-                    'px-3 py-1 my-2 rounded straight-corners:rounded-none transition-colors',
-                    active && 'text-primary dark:text-primary-400',
-                    !active &&
-                        'text-dark/8 hover:bg-dark/1 hover:text-dark/9 dark:text-light/8 dark:hover:bg-light/2 dark:hover:text-light/9',
-                )}
-                role="tab"
-                href={href}
-            >
-                <span ref={ref} className={tcls('inline-flex w-full truncate')}>
-                    {label}
-                </span>
-            </Link>
-        );
-    },
-);
+const Tab = React.forwardRef<
+    HTMLSpanElement,
+    { active: boolean; href: string; icon?: React.ReactNode; label: string }
+>(function Tab(props, ref) {
+    const { active, href, icon, label } = props;
+    return (
+        <Link
+            className={tcls(
+                'group/tab px-3 py-1 my-2 rounded straight-corners:rounded-none transition-colors',
+                active && 'text-primary dark:text-primary-400',
+                !active &&
+                    'text-dark/8 hover:bg-dark/1 hover:text-dark/9 dark:text-light/8 dark:hover:bg-light/2 dark:hover:text-light/9',
+            )}
+            role="tab"
+            href={href}
+        >
+            <span ref={ref} className={tcls('flex gap-2 items-center w-full truncate')}>
+                {icon}
+                {label}
+            </span>
+        </Link>
+    );
+});

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -106,9 +106,13 @@ export function SpaceLayout(props: {
                             )
                         }
                         innerHeader={
-                            (sections || !withTopHeader) && withVariants ? (
-                                <SpacesDropdown space={space} spaces={spaces} />
-                            ) : null
+                            withVariants && (
+                                <SpacesDropdown
+                                    className={withTopHeader && !sections ? 'sm:hidden' : undefined}
+                                    space={space}
+                                    spaces={spaces}
+                                />
+                            )
                         }
                         headerOffset={headerOffset}
                     />

packages/gitbook/src/components/primitives/Button.tsx

@@ -1,25 +1,25 @@
 'use client';
 
+import type { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+
 import { tcls, ClassValue } from '@/lib/tailwind';
 
 import { Link } from './Link';
 
 type ButtonProps = {
     href?: string;
-    onClick?: () => void;
-    children: React.ReactNode;
     variant?: 'primary' | 'secondary';
     size?: 'default' | 'medium' | 'small';
     className?: ClassValue;
-};
+} & HTMLAttributes<HTMLElement>;
 
 export function Button({
     href,
-    onClick,
     children,
     variant = 'primary',
     size = 'default',
     className,
+    ...rest
 }: ButtonProps) {
     const variantClasses =
         variant === 'primary'
@@ -45,7 +45,7 @@ export function Button({
 
     const sizes = {
         default: ['text-base', 'px-4', 'py-2'],
-        medium: ['text-base', 'px-3', 'py-1'],
+        medium: ['text-sm', 'px-3', 'py-1'],
         small: ['text-xs', 'px-3 py-2'],
     };
 
@@ -69,14 +69,14 @@ export function Button({
 
     if (href) {
         return (
-            <Link href={href} className={domClassName}>
+            <Link href={href} className={domClassName} {...rest}>
                 {children}
             </Link>
         );
     }
 
     return (
-        <button type="button" onClick={onClick} className={domClassName}>
+        <button type="button" className={domClassName} {...rest}>
             {children}
         </button>
     );

packages/gitbook/src/components/primitives/Emoji/Emoji.tsx

@@ -3,24 +3,38 @@ import localFont from 'next/font/local';
 import { getEmojiForCode } from '@/lib/emojis';
 import { ClassValue, tcls } from '@/lib/tailwind';
 
-import './emoji.css';
-
-/* Load the 3 variants of the font as CSS variables and let the emoji.css decide on the best one to use */
-
-const svgFont = localFont({
-    src: './svg.woff2',
+/** 
+COLRv1 font.
+- lightweight, top quality
+- widely supported by modern browsers
+- currently not by Safari (or iOS)
+*/
+const colrv1Font = localFont({
+    src: './joypixels-colrv1.woff2',
     preload: false,
-    variable: '--font-emojis-svg',
+    variable: '--font-emojis-colrv1',
 });
 
+/** 
+SBIX font.
+- narrowly supported
+- currently required for Safari (or iOS)
+- provide alternative font-family name (see below)
+*/
 const sbixFont = localFont({
-    src: './sbix.woff2',
+    src: './joypixels-sbix.woff2',
     preload: false,
     variable: '--font-emojis-sbix',
 });
 
+/** 
+CBDT font.
+- widely supported
+- currently not by Safari (or iOS)
+- retain for legacy browser support
+*/
 const cbdtFont = localFont({
-    src: './cbdt.woff2',
+    src: './joypixels-cbdt.woff2',
     preload: false,
     variable: '--font-emojis-cbdt',
 });
@@ -28,7 +42,7 @@ const cbdtFont = localFont({
 /**
  * Class name to set on the <html> tag to use the emoji font.
  */
-export const emojiFontClassName = [svgFont.variable, sbixFont.variable, cbdtFont.variable].join(
+export const emojiFontClassName = [colrv1Font.variable, sbixFont.variable, cbdtFont.variable].join(
     ' ',
 );
 
@@ -40,5 +54,5 @@ export async function Emoji(props: { code: string; style?: ClassValue }) {
     const { code, style } = props;
 
     const fallback = getEmojiForCode(code);
-    return <span className={'emoji ' + tcls(style)}>{fallback}</span>;
+    return <span className={tcls('emoji', style)}>{fallback}</span>;
 }

packages/gitbook/src/components/primitives/Emoji/emoji.css

@@ -1,24 +0,0 @@
-[class*='emoji'] {
-    font-family: var(--font-emojis-cbdt);
-}
-
-/* Safari Only CSS here */
-_::-webkit-full-page-media,
-_:future,
-:root [class*='emoji'] {
-    font-family: var(--font-emojis-sbix);
-}
-
-/* Chrome Only CSS here */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    .emoji {
-        font-family: var(--font-emojis-svg);
-    }
-}
-
-/* Firefox Only CSS here */
-@-moz-document url-prefix() {
-    .emoji {
-        font-family: var(--font-emojis-svg);
-    }
-}

packages/gitbook/src/intl/translations/de.ts

@@ -13,6 +13,7 @@ export const de = {
     search_scope_space: '${1}',
     search_scope_all: 'Alle Inhalte',
     search_ask: 'Fragen "${1}"',
+    search_ask_description: 'Finden Sie die Antwort mit AI',
     search_ask_sources: 'Quellen',
     search_ask_sources_no_answer: 'Verwandte Seiten',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/en.ts

@@ -6,13 +6,14 @@ export const en = {
     switch_to_light_theme: 'Switch to light theme',
     switch_to_system_theme: 'Switch to system theme',
     search: 'Search',
-    search_or_ask: 'Ask or Search',
+    search_or_ask: 'Ask or search',
     search_input_placeholder: 'Search content',
     search_ask_input_placeholder: 'Search content or ask a question',
     search_no_results: 'No results for "${1}".',
     search_scope_space: '${1}',
     search_scope_all: 'All content',
     search_ask: 'Ask "${1}"',
+    search_ask_description: 'Find the answer with AI',
     search_ask_sources: 'Sources',
     search_ask_sources_no_answer: 'Related pages',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/es.ts

@@ -15,6 +15,7 @@ export const es: TranslationLanguage = {
     search_scope_space: '${1}',
     search_scope_all: 'Todo el contenido',
     search_ask: 'Preguntar "${1}"',
+    search_ask_description: 'Encuentra la respuesta con IA',
     search_ask_sources: 'Fuentes',
     search_ask_sources_no_answer: 'Páginas relacionadas',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/fr.ts

@@ -15,6 +15,7 @@ export const fr: TranslationLanguage = {
     search_scope_space: '${1}',
     search_scope_all: 'Tout le contenu',
     search_ask: 'Demander "${1}"',
+    search_ask_description: "Trouvez la réponse avec l'IA",
     search_ask_sources: 'Sources',
     search_ask_sources_no_answer: 'Pages connexes',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/ja.ts

@@ -15,6 +15,7 @@ export const ja: TranslationLanguage = {
     search_scope_space: '${1}',
     search_scope_all: '全てのコンテンツ',
     search_ask: '"${1}" を質問する',
+    search_ask_description: 'AIで答えを見つける',
     search_ask_sources: '情報源',
     search_ask_sources_no_answer: '関連ページ',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/nl.ts

@@ -15,6 +15,7 @@ export const nl: TranslationLanguage = {
     search_scope_space: '${1}',
     search_scope_all: 'Alle inhoud',
     search_ask: 'Vraag "${1}"',
+    search_ask_description: 'Vind het antwoord met AI',
     search_ask_sources: 'Bronnen',
     search_ask_sources_no_answer: 'Gerelateerde pagina’s',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/no.ts

@@ -15,6 +15,7 @@ export const no: TranslationLanguage = {
     search_scope_space: '${1}',
     search_scope_all: 'Alt innhold',
     search_ask: 'Spør "${1}"',
+    search_ask_description: 'Finn svaret med AI',
     search_ask_sources: 'Kilder',
     search_ask_sources_no_answer: 'Relaterte sider',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/pt-br.ts

@@ -13,6 +13,7 @@ export const pt_br = {
     search_scope_space: '${1}',
     search_scope_all: 'Todo o conteúdo',
     search_ask: 'Perguntar "${1}"',
+    search_ask_description: 'Encontre a resposta com IA',
     search_ask_sources: 'Fontes',
     search_ask_sources_no_answer: 'Páginas relacionadas',
     search_ask_no_answer:

packages/gitbook/src/intl/translations/zh.ts

@@ -15,6 +15,7 @@ export const zh: TranslationLanguage = {
     search_scope_space: '${1}',
     search_scope_all: '所有内容',
     search_ask: '询问"${1}"',
+    search_ask_description: '利用人工智能找到答案',
     search_ask_sources: '来源',
     search_ask_sources_no_answer: '相关页面',
     search_ask_no_answer: '无法找到您的问题的答案。您可以尝试改述问题或提供更具体的信息。',

packages/gitbook/src/lib/api.ts

@@ -87,14 +87,30 @@ const cacheTtl_1day = {
     ttl: 24 * 60 * 60,
 };
 
-const apiSyncStorage = new AsyncLocalStorage<GitBookAPI>();
+export type GitBookAPIContext = {
+    /**
+     * Instance of the GitBook API client.
+     */
+    client: GitBookAPI;
+
+    /**
+     * Context ID representing a hash of the visitor's attributes/assertions that are
+     * included in the claims property of the content API JWT token.
+     *
+     * It serves as a suffix for the cache key to ensure that the content cache is invalidated
+     * when these attributees/assertions change.
+     */
+    contextId: string | undefined;
+};
+
+const apiSyncStorage = new AsyncLocalStorage<GitBookAPIContext>();
 
 export const DEFAULT_API_ENDPOINT = process.env.GITBOOK_API_URL ?? 'https://api.gitbook.com';
 
 /**
  * Create a new API client with a token.
  */
-export function apiWithToken(apiToken: string): GitBookAPI {
+export function apiWithToken(apiToken: string, contextId: string | undefined): GitBookAPIContext {
     const headersList = headers();
     const apiEndpoint = headersList.get('x-gitbook-api') ?? DEFAULT_API_ENDPOINT;
 
@@ -104,13 +120,13 @@ export function apiWithToken(apiToken: string): GitBookAPI {
         userAgent: userAgent(),
     });
 
-    return gitbook;
+    return { client: gitbook, contextId };
 }
 
 /**
  * Create an API client for the current request.
  */
-export function api(): GitBookAPI {
+export function api(): GitBookAPIContext {
     const existing = apiSyncStorage.getStore();
     if (existing) {
         return existing;
@@ -118,6 +134,7 @@ export function api(): GitBookAPI {
 
     const headersList = headers();
     const apiToken = headersList.get('x-gitbook-token');
+    const contextId = headersList.get('x-gitbook-token-context') ?? undefined;
 
     if (!apiToken) {
         throw new Error(
@@ -125,13 +142,13 @@ export function api(): GitBookAPI {
         );
     }
 
-    return apiWithToken(apiToken);
+    return apiWithToken(apiToken, contextId);
 }
 
 /**
  * Use an API client for an async function.
  */
-export function withAPI<T>(client: GitBookAPI, fn: () => Promise<T>): Promise<T> {
+export function withAPI<T>(client: GitBookAPIContext, fn: () => Promise<T>): Promise<T> {
     return apiSyncStorage.run(client, fn);
 }
 
@@ -164,7 +181,7 @@ export const getUserById = cache({
         }),
     get: async (userId: string, options: CacheFunctionOptions) => {
         try {
-            const response = await api().users.getUserById(userId, {
+            const response = await api().client.users.getUserById(userId, {
                 signal: options.signal,
                 ...noCacheFetchOptions,
             });
@@ -200,7 +217,7 @@ export const getPublishedContentByUrl = cache({
         options: CacheFunctionOptions,
     ) => {
         try {
-            const response = await api().urls.getPublishedContentByUrl(
+            const response = await api().client.urls.getPublishedContentByUrl(
                 {
                     url,
                     visitorAuthToken,
@@ -249,7 +266,7 @@ export const getSpace = cache({
     name: 'api.getSpace',
     tag: (spaceId) => getAPICacheTag({ tag: 'space', space: spaceId }),
     get: async (spaceId: string, shareKey: string | undefined, options: CacheFunctionOptions) => {
-        const response = await api().spaces.getSpaceById(
+        const response = await api().client.spaces.getSpaceById(
             spaceId,
             {
                 shareKey,
@@ -273,7 +290,7 @@ export const getChangeRequest = cache({
     tag: (spaceId, changeRequestId) =>
         getAPICacheTag({ tag: 'change-request', space: spaceId, changeRequest: changeRequestId }),
     get: async (spaceId: string, changeRequestId: string, options: CacheFunctionOptions) => {
-        const response = await api().spaces.getChangeRequestById(spaceId, changeRequestId, {
+        const response = await api().client.spaces.getChangeRequestById(spaceId, changeRequestId, {
             ...noCacheFetchOptions,
             signal: options.signal,
         });
@@ -301,13 +318,14 @@ export const getRevision = cache({
     name: 'api.getRevision.v2',
     tag: (spaceId, revisionId) =>
         getAPICacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         spaceId: string,
         revisionId: string,
         fetchOptions: GetRevisionOptions,
         options: CacheFunctionOptions,
     ) => {
-        const response = await api().spaces.getRevisionById(
+        const response = await api().client.spaces.getRevisionById(
             spaceId,
             revisionId,
             {
@@ -331,13 +349,14 @@ export const getRevisionPages = cache({
     name: 'api.getRevisionPages.v4',
     tag: (spaceId, revisionId) =>
         getAPICacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         spaceId: string,
         revisionId: string,
         fetchOptions: GetRevisionOptions,
         options: CacheFunctionOptions,
     ) => {
-        const response = await api().spaces.listPagesInRevisionById(
+        const response = await api().client.spaces.listPagesInRevisionById(
             spaceId,
             revisionId,
             {
@@ -364,6 +383,7 @@ export const getRevisionPageByPath = cache({
     name: 'api.getRevisionPageByPath.v3',
     tag: (spaceId, revisionId) =>
         getAPICacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         spaceId: string,
         revisionId: string,
@@ -373,7 +393,7 @@ export const getRevisionPageByPath = cache({
         const encodedPath = encodeURIComponent(pagePath);
 
         try {
-            const response = await api().spaces.getPageInRevisionByPath(
+            const response = await api().client.spaces.getPageInRevisionByPath(
                 spaceId,
                 revisionId,
                 encodedPath,
@@ -416,7 +436,7 @@ const getRevisionFileById = cache({
     ) => {
         try {
             const response = await (async () => {
-                return api().spaces.getFileInRevisionById(
+                return api().client.spaces.getFileInRevisionById(
                     spaceId,
                     revisionId,
                     fileId,
@@ -445,6 +465,7 @@ const getRevisionReusableContentById = cache({
     name: 'api.getRevisionReusableContentById.v1',
     tag: (spaceId, revisionId) =>
         getAPICacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         spaceId: string,
         revisionId: string,
@@ -453,7 +474,7 @@ const getRevisionReusableContentById = cache({
     ) => {
         try {
             const response = await (async () => {
-                return api().spaces.getReusableContentInRevisionById(
+                return api().client.spaces.getReusableContentInRevisionById(
                     spaceId,
                     revisionId,
                     reusableContentId,
@@ -489,7 +510,7 @@ const getRevisionAllFiles = cache({
     get: async (spaceId: string, revisionId: string, options: CacheFunctionOptions) => {
         const response = await getAll(
             (params) =>
-                api().spaces.listFilesInRevisionById(
+                api().client.spaces.listFilesInRevisionById(
                     spaceId,
                     revisionId,
                     {
@@ -600,8 +621,9 @@ export const getDocument = cache({
     name: 'api.getDocument.v2',
     tag: (spaceId, documentId) =>
         getAPICacheTag({ tag: 'document', space: spaceId, document: documentId }),
+    getKeySuffix: () => api().contextId,
     get: async (spaceId: string, documentId: string, options: CacheFunctionOptions) => {
-        const response = await api().spaces.getDocumentById(
+        const response = await api().client.spaces.getDocumentById(
             spaceId,
             documentId,
             {
@@ -626,6 +648,7 @@ export const getDocument = cache({
 export const getSiteRedirectBySource = cache({
     name: 'api.getSiteRedirectBySource',
     tag: ({ siteId }) => getAPICacheTag({ tag: 'site', site: siteId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         args: {
             organizationId: string;
@@ -637,7 +660,7 @@ export const getSiteRedirectBySource = cache({
         options: CacheFunctionOptions,
     ) => {
         try {
-            const response = await api().orgs.getSiteRedirectBySource(
+            const response = await api().client.orgs.getSiteRedirectBySource(
                 args.organizationId,
                 args.siteId,
                 {
@@ -669,8 +692,9 @@ export const getSiteRedirectBySource = cache({
 export const getSite = cache({
     name: 'api.getSite',
     tag: (organizationId, siteId) => getAPICacheTag({ tag: 'site', site: siteId }),
+    getKeySuffix: () => api().contextId,
     get: async (organizationId: string, siteId: string, options: CacheFunctionOptions) => {
-        const response = await api().orgs.getSiteById(organizationId, siteId, {
+        const response = await api().client.orgs.getSiteById(organizationId, siteId, {
             ...noCacheFetchOptions,
             signal: options.signal,
         });
@@ -686,6 +710,7 @@ export const getSite = cache({
 export const getPublishedContentSite = cache({
     name: 'api.getPublishedContentSite',
     tag: ({ siteId }) => getAPICacheTag({ tag: 'site', site: siteId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         args: {
             organizationId: string;
@@ -694,7 +719,7 @@ export const getPublishedContentSite = cache({
         },
         options: CacheFunctionOptions,
     ) => {
-        const response = await api().orgs.getPublishedContentSite(
+        const response = await api().client.orgs.getPublishedContentSite(
             args.organizationId,
             args.siteId,
             {
@@ -779,7 +804,7 @@ export async function getSiteData(
     const spaces =
         siteSpaces ?? (sections ? parseSpacesFromSiteSpaces(sections.section.siteSpaces) : []);
 
-    const customization = mergeCustomizationWithExtend(
+    const customization = getActiveCustomizationSettings(
         pointer.siteSpaceId ? customizations.siteSpaces[pointer.siteSpaceId] : customizations.site,
     );
 
@@ -826,7 +851,7 @@ export const getCollection = cache({
     name: 'api.getCollection',
     tag: (collectionId) => getAPICacheTag({ tag: 'collection', collection: collectionId }),
     get: async (collectionId: string, options: CacheFunctionOptions) => {
-        const response = await api().collections.getCollectionById(collectionId, {
+        const response = await api().client.collections.getCollectionById(collectionId, {
             ...noCacheFetchOptions,
             signal: options.signal,
         });
@@ -844,7 +869,7 @@ export const getCollectionSpaces = cache({
     tag: (collectionId) => getAPICacheTag({ tag: 'collection', collection: collectionId }),
     get: async (collectionId: string, options: CacheFunctionOptions) => {
         const response = await getAll((params) =>
-            api().collections.listSpacesInCollectionById(collectionId, params, {
+            api().client.collections.listSpacesInCollectionById(collectionId, params, {
                 ...noCacheFetchOptions,
                 signal: options.signal,
             }),
@@ -896,6 +921,7 @@ export async function getSpaceContentData(
 export const searchSpaceContent = cache({
     name: 'api.searchSpaceContent',
     tag: (spaceId) => getAPICacheTag({ tag: 'space', space: spaceId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         spaceId: string,
         /** The revision ID is used as a cache bust key, to avoid revalidating lot of cache entries by tags */
@@ -903,7 +929,7 @@ export const searchSpaceContent = cache({
         query: string,
         options: CacheFunctionOptions,
     ) => {
-        const response = await api().spaces.searchSpaceContent(
+        const response = await api().client.spaces.searchSpaceContent(
             spaceId,
             { query },
             {
@@ -921,8 +947,9 @@ export const searchSpaceContent = cache({
 export const searchParentContent = cache({
     name: 'api.searchParentContent',
     tag: (spaceId) => getAPICacheTag({ tag: 'space', space: spaceId }),
+    getKeySuffix: () => api().contextId,
     get: async (parentId: string, query: string, options: CacheFunctionOptions) => {
-        const response = await api().search.searchContent(
+        const response = await api().client.search.searchContent(
             { query },
             {
                 ...noCacheFetchOptions,
@@ -941,6 +968,7 @@ export const searchParentContent = cache({
 export const searchSiteContent = cache({
     name: 'api.searchSiteContent',
     tag: (organizationId, siteId) => getAPICacheTag({ tag: 'site', site: siteId }),
+    getKeySuffix: () => api().contextId,
     get: async (
         organizationId: string,
         siteId: string,
@@ -953,7 +981,7 @@ export const searchSiteContent = cache({
         cacheBust?: string,
         options?: CacheFunctionOptions,
     ) => {
-        const response = await api().orgs.searchSiteContent(
+        const response = await api().client.orgs.searchSiteContent(
             organizationId,
             siteId,
             {
@@ -980,7 +1008,7 @@ export const getRecommendedQuestionsInSpace = cache({
     name: 'api.getRecommendedQuestionsInSpace',
     tag: (spaceId) => getAPICacheTag({ tag: 'space', space: spaceId }),
     get: async (spaceId: string, options: CacheFunctionOptions) => {
-        const response = await api().spaces.getRecommendedQuestionsInSpace(spaceId, {
+        const response = await api().client.spaces.getRecommendedQuestionsInSpace(spaceId, {
             ...noCacheFetchOptions,
             signal: options.signal,
         });
@@ -999,7 +1027,7 @@ export const renderIntegrationUi = cache({
         request: RequestRenderIntegrationUI,
         options: CacheFunctionOptions,
     ) => {
-        const response = await api().integrations.renderIntegrationUiWithPost(
+        const response = await api().client.integrations.renderIntegrationUiWithPost(
             integrationName,
             request,
             {
@@ -1018,7 +1046,7 @@ export const renderIntegrationUi = cache({
 export const getEmbedByUrl = cache({
     name: 'api.getEmbedByUrl',
     get: async (url: string, options: CacheFunctionOptions) => {
-        const response = await api().urls.getEmbedByUrl(
+        const response = await api().client.urls.getEmbedByUrl(
             { url },
             {
                 ...noCacheFetchOptions,
@@ -1036,7 +1064,7 @@ export const getEmbedByUrlInSpace = cache({
     name: 'api.getEmbedByUrlInSpace',
     tag: (spaceId) => getAPICacheTag({ tag: 'space', space: spaceId }),
     get: async (spaceId: string, url: string, options: CacheFunctionOptions) => {
-        const response = await api().spaces.getEmbedByUrlInSpace(
+        const response = await api().client.spaces.getEmbedByUrlInSpace(
             spaceId,
             { url },
             {
@@ -1204,19 +1232,19 @@ async function getAll<T, E>(
 }
 
 /**
- * Merge the customization settings with the ones passed in the x-gitbook-customization header if present.
+ * Selects the customization settings from the x-gitbook-customization header if present,
+ * otherwise returns the original API-provided settings.
  */
-function mergeCustomizationWithExtend<T extends SiteCustomizationSettings | CustomizationSettings>(
-    raw: T,
-) {
+function getActiveCustomizationSettings(
+    settings: SiteCustomizationSettings,
+): SiteCustomizationSettings {
     const headersList = headers();
     const extend = headersList.get('x-gitbook-customization');
     if (extend) {
         try {
-            const parsed = rison.decode_object<DeepPartial<T>>(extend);
+            const parsedSettings = rison.decode_object<SiteCustomizationSettings>(extend);
 
-            // Merge objects and some properties deep
-            return mergeDeepPlainObject(raw, parsed, ['styling', 'themes']);
+            return parsedSettings;
         } catch (error) {
             console.error(
                 `Failed to parse x-gitbook-customization header (ignored): ${
@@ -1226,35 +1254,5 @@ function mergeCustomizationWithExtend<T extends SiteCustomizationSettings | Cust
         }
     }
 
-    return raw;
-}
-
-function mergeDeepPlainObject<T>(target: T, source: DeepPartial<T>, keys: Array<keyof T>): T {
-    if (typeof target !== 'object' || target === null) {
-        return target;
-    }
-
-    const result = { ...target };
-
-    for (const key in source) {
-        const value = source[key];
-        if (value === undefined) {
-            continue;
-        }
-
-        if (
-            typeof value === 'object' &&
-            !Array.isArray(value) &&
-            value !== null &&
-            keys.includes(key as keyof T)
-        ) {
-            // @ts-ignore
-            result[key] = mergeDeepPlainObject(target[key] ?? {}, value, []);
-        } else {
-            // @ts-ignore
-            result[key] = value;
-        }
-    }
-
-    return result;
+    return settings;
 }

packages/gitbook/src/lib/cache/cache.test.ts

@@ -1,6 +1,7 @@
-import { Mock, beforeEach, describe, expect, it, mock } from 'bun:test';
+import { beforeEach, describe, expect, it, Mock, mock } from 'bun:test';
+import hash from 'object-hash';
 
-import { CacheFunction, CacheFunctionOptions, cache } from './cache';
+import { CacheDefinition, CacheFunction, CacheFunctionOptions, cache } from './cache';
 
 describe('cache', () => {
     const impl = mock((arg: string) => 'test-' + arg);
@@ -69,3 +70,79 @@ describe('cache', () => {
         expect(impl).toHaveBeenCalledTimes(2);
     });
 });
+
+describe('cache with suffix key', () => {
+    const impl = mock((arg: string) => 'test-' + arg);
+    const getKeySuffixImpl: Mock<NonNullable<CacheDefinition<[string], string>['getKeySuffix']>> =
+        mock(() => hash({ test: 1 }));
+
+    let fn: CacheFunction<[string], string>;
+    let testId = 0;
+    let getTtl: () => number;
+
+    beforeEach(() => {
+        impl.mockClear();
+
+        testId += 1;
+        getTtl = () => 1000;
+
+        fn = cache({
+            name: `cache-with-suffix-${testId}`,
+            getKeySuffix: getKeySuffixImpl,
+            tag: (arg) => 'test',
+            get: async (arg: string, options: CacheFunctionOptions) => {
+                await new Promise((resolve) => setTimeout(resolve, 20));
+                return {
+                    data: impl(arg),
+                    ttl: getTtl(),
+                };
+            },
+        });
+    });
+
+    it('should execute when the key suffix changes even if the args do not change', async () => {
+        const result = await Promise.all([fn('a'), fn('b')]);
+
+        expect(result).toEqual(['test-a', 'test-b']);
+
+        expect(impl).toHaveBeenCalled();
+        expect(impl).toHaveBeenCalledTimes(2);
+
+        expect(await fn('a')).toEqual('test-a');
+
+        expect(impl).toHaveBeenCalledTimes(2);
+
+        getKeySuffixImpl.mockImplementation(() => hash({ test: 2 }));
+        expect(await fn('a')).toEqual('test-a');
+
+        expect(impl).toHaveBeenCalledTimes(3);
+    });
+
+    it('should preserve behaviour even when the returned key suffix is undefined', async () => {
+        // Start with the returned suffix being undefined
+        getKeySuffixImpl.mockImplementation(() => undefined);
+        const result = await fn('a');
+        expect(result).toEqual('test-a');
+
+        expect(impl).toHaveBeenCalled();
+        expect(impl).toHaveBeenCalledTimes(1);
+
+        // The returned suffix changes so we should get the value computed by the function
+        getKeySuffixImpl.mockImplementation(() => hash({ test: 1 }));
+        expect(await fn('a')).toEqual('test-a');
+
+        expect(impl).toHaveBeenCalledTimes(2);
+
+        // The returned suffix is undefined again so we should get the value from a previous cache entry
+        getKeySuffixImpl.mockImplementation(() => undefined);
+        expect(await fn('a')).toEqual('test-a');
+
+        expect(impl).toHaveBeenCalledTimes(2);
+
+        // The returned suffix goes back to a previous hash so we should the value from a previous cache entry
+        getKeySuffixImpl.mockImplementation(() => hash({ test: 1 }));
+        expect(await fn('a')).toEqual('test-a');
+
+        expect(impl).toHaveBeenCalledTimes(2);
+    });
+});

packages/gitbook/src/lib/cache/cache.ts

@@ -55,6 +55,9 @@ export interface CacheDefinition<Args extends any[], Result> {
     /** Filter the arguments that should be taken into consideration for the cache key */
     getKeyArgs?: (args: Args) => any[];
 
+    /** Returns a precomputed hash that is used alongside arguments to generate the cache key */
+    getKeySuffix?: () => string | undefined;
+
     /** Default ttl (in seconds) */
     defaultTtl?: number;
 
@@ -222,7 +225,8 @@ export function cache<Args extends any[], Result>(
         const [args, { signal }] = extractCacheFunctionOptions<Args>(rawArgs);
 
         const cacheArgs = cacheDef.getKeyArgs ? cacheDef.getKeyArgs(args) : args;
-        const key = getCacheKey(cacheDef.name, cacheArgs);
+        const cacheKeySuffix = cacheDef.getKeySuffix ? cacheDef.getKeySuffix() : undefined;
+        const key = getCacheKey(cacheDef.name, cacheArgs, cacheKeySuffix);
 
         return await trace(
             {
@@ -239,7 +243,8 @@ export function cache<Args extends any[], Result>(
     cacheFn.revalidate = async (...rawArgs: Args | [...Args, CacheFunctionOptions]) => {
         const [args, { signal }] = extractCacheFunctionOptions<Args>(rawArgs);
         const cacheArgs = cacheDef.getKeyArgs ? cacheDef.getKeyArgs(args) : args;
-        const key = getCacheKey(cacheDef.name, cacheArgs);
+        const cacheKeySuffix = cacheDef.getKeySuffix ? cacheDef.getKeySuffix() : undefined;
+        const key = getCacheKey(cacheDef.name, cacheArgs, cacheKeySuffix);
 
         const result = await revalidate(key, signal, ...args);
         return result.data;
@@ -247,7 +252,8 @@ export function cache<Args extends any[], Result>(
 
     cacheFn.hasInMemory = async (...args: Args) => {
         const cacheArgs = cacheDef.getKeyArgs ? cacheDef.getKeyArgs(args) : args;
-        const key = getCacheKey(cacheDef.name, cacheArgs);
+        const cacheKeySuffix = cacheDef.getKeySuffix ? cacheDef.getKeySuffix() : undefined;
+        const key = getCacheKey(cacheDef.name, cacheArgs, cacheKeySuffix);
         const tag = cacheDef.tag?.(...args);
 
         const memoryEntry = await memoryCache.get({ key, tag });
@@ -275,8 +281,13 @@ export function getCache(name: string): CacheFunction<any[], any> | null {
 /**
  * Get a cache key for a function and its arguments.
  */
-export function getCacheKey(fnName: string, args: any[]) {
-    let innerKey = args.map((arg) => hashValue(arg)).join(',');
+export function getCacheKey(fnName: string, args: any[], suffix: string | undefined) {
+    const hashedArgs = args.map((arg) => hashValue(arg));
+
+    if (suffix) {
+        hashedArgs.push(suffix);
+    }
+    let innerKey = hashedArgs.join(',');
 
     // Avoid crazy long keys, by fallbacking to a hash
     if (innerKey.length > 400) {

packages/gitbook/src/lib/csp.ts

@@ -54,7 +54,7 @@ export function getContentSecurityPolicy(scripts: SpaceIntegrationScript[], nonc
         object-src 'none';
         base-uri 'self' ${assetsDomain};
         form-action 'self' ${assetsDomain};
-        frame-ancestors  https:;
+        frame-ancestors https: ${process.env.NODE_ENV !== 'production' ? 'http:' : ''};
     `;
 
     const result = scripts

packages/gitbook/src/lib/document.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'bun:test';
 
-import { isNodeEmpty } from './document';
+import { getBlockTitle, isNodeEmpty } from './document';
 
 describe('isNodeEmpty', () => {
     it('should return true for a document with an empty paragraph', () => {
@@ -54,3 +54,76 @@ describe('isNodeEmpty', () => {
         ).toEqual(false);
     });
 });
+
+describe('#getBlockTitle', () => {
+    it('should return the title of an expandable block', () => {
+        expect(
+            getBlockTitle({
+                object: 'block',
+                type: 'expandable',
+                isVoid: true,
+                data: {},
+                key: 'OX8znB9VmbgK',
+                fragments: [
+                    {
+                        object: 'fragment',
+                        nodes: [
+                            {
+                                object: 'block',
+                                type: 'paragraph',
+                                isVoid: false,
+                                data: {},
+                                nodes: [
+                                    {
+                                        object: 'text',
+                                        leaves: [
+                                            {
+                                                object: 'leaf',
+                                                text: 'Title of expandable block',
+                                                marks: [],
+                                            },
+                                        ],
+                                        key: '7sZdCBHTw6Si',
+                                    },
+                                ],
+                                key: 'msYtjdwNmiAB',
+                            },
+                        ],
+                        key: 'cNhmBygbrP8N',
+                        fragment: 'expandable-title',
+                        type: 'expandable-title',
+                    },
+                    {
+                        object: 'fragment',
+                        nodes: [
+                            {
+                                object: 'block',
+                                type: 'paragraph',
+                                isVoid: false,
+                                data: {},
+                                nodes: [
+                                    {
+                                        object: 'text',
+                                        leaves: [
+                                            {
+                                                object: 'leaf',
+                                                text: 'And content of the expandable',
+                                                marks: [],
+                                            },
+                                        ],
+                                        key: '0GEghVKyWRBt',
+                                    },
+                                ],
+                                key: '9iEwdHdZ5y0S',
+                            },
+                        ],
+                        key: 'newg71i9Ujjl',
+                        fragment: 'expandable-body',
+                        type: 'expandable-body',
+                    },
+                ],
+                meta: { id: 'expandable-block' },
+            }),
+        ).toEqual('Title of expandable block');
+    });
+});

packages/gitbook/src/lib/document.ts

@@ -154,7 +154,7 @@ export function isNodeEmpty(
 export function getBlockTitle(block: DocumentBlock): string {
     switch (block.type) {
         case 'expandable': {
-            const titleFragment = getNodeFragmentByType(block, 'title');
+            const titleFragment = getNodeFragmentByType(block, 'expandable-title');
             if (titleFragment) {
                 return getNodeText(titleFragment);
             }

packages/gitbook/src/lib/emojis.test.ts

@@ -9,6 +9,8 @@ describe('getEmojiForCode', () => {
 
     it('should handle complex codes', () => {
         expect(getEmojiForCode('1f935-2642')).toEqual('🤵‍♂️');
+        expect(getEmojiForCode('1f3c3-2642')).toEqual('🏃‍♂️');
+        expect(getEmojiForCode('1f468-2696')).toEqual('👨‍⚖️');
     });
 
     it('should return an empty string if invalid', () => {

packages/gitbook/src/lib/images.ts

@@ -4,7 +4,7 @@ import fnv1a from '@sindresorhus/fnv1a';
 
 import { noCacheFetchOptions } from '@/lib/cache/http';
 
-import { rootUrl } from './links';
+import { host, rootUrl } from './links';
 import { getImageAPIUrl } from './urls';
 
 export interface CloudflareImageJsonFormat {
@@ -31,6 +31,8 @@ export interface CloudflareImageOptions {
     quality?: number;
 }
 
+export const imagesResizingSignVersion = '2';
+
 /**
  * Return true if images resizing is enabled.
  */
@@ -53,17 +55,26 @@ export function checkIsHttpURL(input: string | URL): boolean {
  * Check if an image URL is resizable.
  * Skip it for non-http(s) URLs (data, etc).
  * Skip it for SVGs.
+ * Skip it for GitBook images (to avoid recursion).
  */
 export function checkIsSizableImageURL(input: string): boolean {
     if (!URL.canParse(input)) {
         return false;
     }
 
-    const parsed = new URL(input);
-    if (parsed.pathname.endsWith('.svg')) {
+    if (input.includes('/~gitbook/image')) {
         return false;
     }
-    return checkIsHttpURL(parsed);
+
+    const parsed = new URL(input);
+    if (parsed.pathname.endsWith('.svg') || parsed.pathname.endsWith('.avif')) {
+        return false;
+    }
+    if (!checkIsHttpURL(parsed)) {
+        return false;
+    }
+
+    return true;
 }
 
 interface ResizeImageOptions {
@@ -83,7 +94,7 @@ export function getResizedImageURLFactory(
         return null;
     }
 
-    const signature = generateSignatureV1(input);
+    const signature = generateSignature(input);
 
     return (options) => {
         const url = new URL('/~gitbook/image', rootUrl());
@@ -103,7 +114,7 @@ export function getResizedImageURLFactory(
         }
 
         url.searchParams.set('sign', signature);
-        url.searchParams.set('sv', '1');
+        url.searchParams.set('sv', imagesResizingSignVersion);
 
         return url.toString();
     };
@@ -123,11 +134,9 @@ export function getResizedImageURL(input: string, options: ResizeImageOptions):
  */
 export async function verifyImageSignature(
     input: string,
-    { signature, version }: { signature: string; version: '1' | '0' },
+    { signature }: { signature: string },
 ): Promise<boolean> {
-    const expectedSignature =
-        version === '1' ? generateSignatureV1(input) : await generateSignatureV0(input);
-    return expectedSignature === signature;
+    return generateSignature(input) === signature;
 }
 
 /**
@@ -229,26 +238,17 @@ function stringifyOptions(options: CloudflareImageOptions): string {
 const fnv1aUtf8Buffer = new Uint8Array(512);
 
 /**
- * New and faster algorithm to generate a signature for an image.
- * When setting it in a URL, we use version '1' for the 'sv' querystring parameneter
- * to know that it was the algorithm that was used.
+ * Generate a signature for an image.
+ * The signature is relative to the current site being rendered to avoid serving images from other sites on the same domain.
  */
-function generateSignatureV1(input: string): string {
-    const all = [input, process.env.GITBOOK_IMAGE_RESIZE_SIGNING_KEY].filter(Boolean).join(':');
+function generateSignature(input: string) {
+    const hostName = host();
+    const all = [
+        input,
+        hostName, // The hostname is used to avoid serving images from other sites on the same domain
+        process.env.GITBOOK_IMAGE_RESIZE_SIGNING_KEY,
+    ]
+        .filter(Boolean)
+        .join(':');
     return fnv1a(all, { utf8Buffer: fnv1aUtf8Buffer }).toString(16);
 }
-
-/**
- * Initial algorithm used to generate a signature for an image. It didn't use any versioning in the URL.
- * We still need it to validate older signatures that were generated without versioning
- * but still exist in previously generated and cached content.
- */
-async function generateSignatureV0(input: string): Promise<string> {
-    const all = [input, process.env.GITBOOK_IMAGE_RESIZE_SIGNING_KEY].filter(Boolean).join(':');
-    const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(all));
-
-    // Convert ArrayBuffer to hex string
-    const hashArray = Array.from(new Uint8Array(hash));
-    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
-    return hashHex;
-}

packages/gitbook/src/middleware.ts

@@ -1,9 +1,10 @@
-import { GitBookAPI, ContentAPITokenPayload } from '@gitbook/api';
+import { ContentAPITokenPayload, GitBookAPI } from '@gitbook/api';
 import { setTag, setContext } from '@sentry/nextjs';
 import assertNever from 'assert-never';
 import jwt from 'jsonwebtoken';
 import type { ResponseCookie } from 'next/dist/compiled/@edge-runtime/cookies';
 import { NextResponse, NextRequest } from 'next/server';
+import hash from 'object-hash';
 
 import {
     PublishedContentWithCache,
@@ -43,6 +44,12 @@ type URLLookupMode =
      * This mode is useful when self-hosting a single space.
      */
     | 'single'
+    /**
+     * Mode when a site is being proxied on a different base URL.
+     * - x-gitbook-site-url is used to determine the site to serve.
+     * - host / x-forwarded-host / x-gitbook-host + x-gitbook-basepath is used to determine the base URL.
+     */
+    | 'proxy'
     /**
      * Spaces are located using the incoming URL (using forwarded host headers).
      * This mode is the default one when serving on the GitBook infrastructure.
@@ -76,11 +83,14 @@ export type LookupResult = PublishedContentWithCache & {
 };
 
 /**
- * Middleware to lookup the space to render.
+ * Middleware to lookup the site to render.
  * It takes as input a request with an URL, and a set of headers:
  *   - x-gitbook-api: the API endpoint to use, if undefined, the default one is used
  *   - x-gitbook-basepath: base in the path that should be ignored for routing
  *
+ * Once the site has been looked-up, the middleware passes the info to the rendering
+ * using a rewrite with a set of headers. This is the only way in next.js to do this (basically similar to AsyncLocalStorage).
+ *
  * The middleware also takes care of persisting the visitor authentication state.
  */
 export async function middleware(request: NextRequest) {
@@ -105,15 +115,18 @@ export async function middleware(request: NextRequest) {
     let apiEndpoint = request.headers.get('x-gitbook-api') ?? DEFAULT_API_ENDPOINT;
     const originBasePath = request.headers.get('x-gitbook-basepath') ?? '';
 
-    const inputURL = stripURLBasePath(url, originBasePath);
+    const inputURL = mode === 'proxy' ? url : stripURLBasePath(url, originBasePath);
 
     const resolved = await withAPI(
-        new GitBookAPI({
-            endpoint: apiEndpoint,
-            authToken: getDefaultAPIToken(apiEndpoint),
-            userAgent: userAgent(),
-        }),
-        () => lookupSpaceForURL(mode, request, inputURL),
+        {
+            client: new GitBookAPI({
+                endpoint: apiEndpoint,
+                authToken: getDefaultAPIToken(apiEndpoint),
+                userAgent: userAgent(),
+            }),
+            contextId: undefined,
+        },
+        () => lookupSiteForURL(mode, request, inputURL),
     );
     if ('error' in resolved) {
         return new NextResponse(resolved.error.message, {
@@ -153,13 +166,17 @@ export async function middleware(request: NextRequest) {
     // Resolution might have changed the API endpoint
     apiEndpoint = resolved.apiEndpoint ?? apiEndpoint;
 
+    const contextId = 'site' in resolved ? resolved.contextId : undefined;
     const nonce = createContentSecurityPolicyNonce();
     const csp = await withAPI(
-        new GitBookAPI({
-            endpoint: apiEndpoint,
-            authToken: resolved.apiToken,
-            userAgent: userAgent(),
-        }),
+        {
+            client: new GitBookAPI({
+                endpoint: apiEndpoint,
+                authToken: resolved.apiToken,
+                userAgent: userAgent(),
+            }),
+            contextId,
+        },
         async () => {
             const [siteData] = await Promise.all([
                 'site' in resolved
@@ -198,9 +215,15 @@ export async function middleware(request: NextRequest) {
     headers.set('x-forwarded-host', inputURL.host);
     headers.set('origin', inputURL.origin);
     headers.set('x-gitbook-token', resolved.apiToken);
+    if (contextId) {
+        headers.set('x-gitbook-token-context', contextId);
+    }
     headers.set('x-gitbook-mode', mode);
     headers.set('x-gitbook-origin-basepath', originBasePath);
-    headers.set('x-gitbook-basepath', joinPath(originBasePath, resolved.basePath));
+    headers.set(
+        'x-gitbook-basepath',
+        mode === 'proxy' ? originBasePath : joinPath(originBasePath, resolved.basePath),
+    );
     headers.set('x-gitbook-content-space', resolved.space);
     if ('site' in resolved) {
         headers.set('x-gitbook-content-organization', resolved.organization);
@@ -291,7 +314,10 @@ export async function middleware(request: NextRequest) {
 /**
  * Compute the input URL the user is trying to access.
  */
-function getInputURL(request: NextRequest): { url: URL; mode: URLLookupMode } {
+function getInputURL(request: NextRequest): {
+    url: URL;
+    mode: URLLookupMode;
+} {
     const url = new URL(request.url);
     let mode: URLLookupMode =
         (process.env.GITBOOK_MODE as URLLookupMode | undefined) ?? 'multi-path';
@@ -321,27 +347,36 @@ function getInputURL(request: NextRequest): { url: URL; mode: URLLookupMode } {
         mode = 'multi-id';
     }
 
+    // When passing a x-gitbook-site-url header, this URL is used instead of the request URL
+    // to determine the site to serve.
+    const xGitbookSite = request.headers.get('x-gitbook-site-url');
+    if (xGitbookSite) {
+        mode = 'proxy';
+    }
+
     return { url, mode };
 }
 
-async function lookupSpaceForURL(
+async function lookupSiteForURL(
     mode: URLLookupMode,
     request: NextRequest,
     url: URL,
 ): Promise<LookupResult> {
     switch (mode) {
         case 'single': {
-            return await lookupSpaceInSingleMode(url);
+            return await lookupSiteInSingleMode(url);
         }
         case 'multi': {
-            return await lookupSpaceInMultiMode(request, url);
+            return await lookupSiteInMultiMode(request, url);
         }
         case 'multi-path': {
-            return await lookupSpaceInMultiPathMode(request, url);
+            return await lookupSiteInMultiPathMode(request, url);
         }
         case 'multi-id': {
             return await lookupSiteOrSpaceInMultiIdMode(request, url);
         }
+        case 'proxy':
+            return await lookupSiteInProxy(request, url);
         default:
             assertNever(mode);
     }
@@ -351,7 +386,7 @@ async function lookupSpaceForURL(
  * GITBOOK_MODE=single
  * When serving a single space, configured using GITBOOK_SPACE_ID and GITBOOK_TOKEN.
  */
-async function lookupSpaceInSingleMode(url: URL): Promise<LookupResult> {
+async function lookupSiteInSingleMode(url: URL): Promise<LookupResult> {
     const spaceId = process.env.GITBOOK_SPACE_ID;
     if (!spaceId) {
         throw new Error(
@@ -359,7 +394,7 @@ async function lookupSpaceInSingleMode(url: URL): Promise<LookupResult> {
         );
     }
 
-    const apiToken = getDefaultAPIToken(api().endpoint);
+    const apiToken = getDefaultAPIToken(api().client.endpoint);
     if (!apiToken) {
         throw new Error(
             `Missing GITBOOK_TOKEN environment variable. It should be passed when using GITBOOK_MODE=single.`,
@@ -375,13 +410,31 @@ async function lookupSpaceInSingleMode(url: URL): Promise<LookupResult> {
     };
 }
 
+/**
+ * GITBOOK_MODE=proxy
+ * When proxying a site on a different base URL.
+ */
+async function lookupSiteInProxy(request: NextRequest, url: URL): Promise<LookupResult> {
+    const rawSiteUrl = request.headers.get('x-gitbook-site-url');
+    if (!rawSiteUrl) {
+        throw new Error(
+            `Missing x-gitbook-site-url header. It should be passed when using GITBOOK_MODE=proxy.`,
+        );
+    }
+
+    const siteUrl = new URL(rawSiteUrl);
+    siteUrl.pathname = joinPath(siteUrl.pathname, url.pathname);
+
+    return await lookupSiteInMultiMode(request, siteUrl);
+}
+
 /**
  * GITBOOK_MODE=multi
  * When serving multi spaces based on the current URL.
  */
-async function lookupSpaceInMultiMode(request: NextRequest, url: URL): Promise<LookupResult> {
+async function lookupSiteInMultiMode(request: NextRequest, url: URL): Promise<LookupResult> {
     const visitorAuthToken = getVisitorAuthToken(request, url);
-    const lookup = await lookupSpaceByAPI(url, visitorAuthToken);
+    const lookup = await lookupSiteByAPI(url, visitorAuthToken);
     return {
         ...lookup,
         ...('basePath' in lookup && visitorAuthToken
@@ -470,8 +523,16 @@ async function lookupSiteOrSpaceInMultiIdMode(
         throw new Error('Collection is not supported in multi-id mode');
     }
 
+    // The claims property in the content API token is included when
+    // visitor attributes/assertions are passed to the site preview URL.
+    //
+    // When it's present, we generate a hash using the same method as
+    // getPublishedContentByURL to get the context ID so the cache can be
+    // invalidated when trying to preview the site with different visitor
+    // attributes.
+    const contextId = decoded.claims ? hash(decoded.claims) : undefined;
     const gitbookAPI = new GitBookAPI({
-        endpoint: apiEndpoint ?? api().endpoint,
+        endpoint: apiEndpoint ?? api().client.endpoint,
         authToken: apiToken,
         userAgent: userAgent(),
     });
@@ -479,13 +540,15 @@ async function lookupSiteOrSpaceInMultiIdMode(
     // Verify access to the space to avoid leaking cached data in this mode
     // (the cache is not dependend on the auth token, so it could leak data)
     if (source.kind === 'space') {
-        await withAPI(gitbookAPI, () => getSpace.revalidate(source.id, undefined));
+        await withAPI({ client: gitbookAPI, contextId }, () =>
+            getSpace.revalidate(source.id, undefined),
+        );
     }
 
     // Verify access to the site to avoid leaking cached data in this mode
     // (the cache is not dependend on the auth token, so it could leak data)
     if (source.kind === 'site') {
-        await withAPI(gitbookAPI, () =>
+        await withAPI({ client: gitbookAPI, contextId }, () =>
             getPublishedContentSite.revalidate({
                 organizationId: decoded.organization,
                 siteId: source.id,
@@ -501,7 +564,7 @@ async function lookupSiteOrSpaceInMultiIdMode(
                 httpOnly: true,
                 maxAge: 60 * 30,
                 secure: process.env.NODE_ENV === 'production',
-                sameSite: 'none',
+                sameSite: process.env.NODE_ENV === 'production' ? 'none' : undefined,
             },
         },
     };
@@ -536,7 +599,7 @@ async function lookupSiteOrSpaceInMultiIdMode(
  * GITBOOK_MODE=multi-path
  * When serving multi spaces with the url passed in the path.
  */
-async function lookupSpaceInMultiPathMode(request: NextRequest, url: URL): Promise<LookupResult> {
+async function lookupSiteInMultiPathMode(request: NextRequest, url: URL): Promise<LookupResult> {
     // Skip useless requests
     if (
         url.pathname === '/favicon.ico' ||
@@ -575,7 +638,7 @@ async function lookupSpaceInMultiPathMode(request: NextRequest, url: URL): Promi
 
     const visitorAuthToken = getVisitorAuthToken(request, target);
 
-    const lookup = await lookupSpaceByAPI(target, visitorAuthToken);
+    const lookup = await lookupSiteByAPI(target, visitorAuthToken);
     if ('error' in lookup) {
         return lookup;
     }
@@ -611,7 +674,7 @@ async function lookupSpaceInMultiPathMode(request: NextRequest, url: URL): Promi
  * Lookup a space by its URL using the GitBook API.
  * To optimize caching, we try multiple lookup alternatives and return the first one that matches.
  */
-async function lookupSpaceByAPI(
+async function lookupSiteByAPI(
     lookupURL: URL,
     visitorAuthToken: ReturnType<typeof getVisitorAuthToken>,
 ): Promise<LookupResult> {
@@ -701,6 +764,7 @@ async function lookupSpaceByAPI(
                           siteSpace: data.siteSpace,
                           organization: data.organization,
                           shareKey: data.shareKey,
+                          ...(data.contextId ? { contextId: data.contextId } : {}),
                       }
                     : {}),
             } as PublishedContentWithCache;
@@ -748,7 +812,7 @@ function getLookupResultForVisitorAuth(
                           ),
                           options: {
                               httpOnly: true,
-                              sameSite: 'none',
+                              sameSite: process.env.NODE_ENV === 'production' ? 'none' : undefined,
                               secure: process.env.NODE_ENV === 'production',
                               maxAge: 7 * 24 * 60 * 60,
                           },

packages/gitbook/tailwind.config.ts

@@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin';
 import { hexToRgb, shadesOfColor } from './src/lib/colors';
 
 export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-export const opacities = [0, 4, 8, 12, 16, 24, 40, 64, 72, 88, 96];
+export const opacities = [0, 4, 8, 12, 16, 24, 40, 64, 72, 88, 96, 100];
 
 /**
  * Generate a Tailwind color shades from a variable.
@@ -72,9 +72,8 @@ const config: Config = {
                 /** primary-color used to accent elements, these colors remain unchanged when toggling between the CustomizationBackground options**/
                 primary: generateVarShades('primary-color'),
                 'contrast-primary': generateVarShades('contrast-primary'),
-
-                /** primary-base is an internal color that generates the same colors as primary-color. But it's shades will change into a grayscale if CustomizationBackground.Plain is selected. (globals.css) **/
-                primarybase: generateVarShades('primary-base'),
+                tint: generateVarShades('primary-color'),
+                'contrast-tint': generateVarShades('contrast-primary'),
 
                 'header-background': generateVarShades('header-background'),
                 'header-link': generateVarShades('header-link'),
@@ -209,6 +208,10 @@ const config: Config = {
                 thintop: '0px -1px 0px  rgba(0, 0, 0, 0.05)',
                 '1xs': '0px 1px 1px rgba(0, 0, 0, 0.09), 0px 3.267px 2.754px rgb(0, 0, 0, 0.05), 0px 6.278px 6.63px rgb(0, 0, 0, 0.05), 0px 14px 22px rgb(0, 0, 0, 0.04)',
             },
+            scale: {
+                '98': '0.98',
+                '102': '1.02',
+            },
         },
         opacity: opacity(),
     },
@@ -232,7 +235,12 @@ const config: Config = {
             /**
              * Variant when the space is configured with a theme matching background.
              */
-            addVariant('plain-background', 'html.plain-background &');
+            addVariant('tint', 'html.tint &');
+
+            /**
+             * Variant when the space is configured without a theme matching background.
+             */
+            addVariant('no-tint', 'html.no-tint &');
 
             /**
              * Variant when the page contains a block that will be rendered in full-width mode.

packages/icons/bin/kit.js

@@ -11,7 +11,7 @@ export function getKitPath() {
     try {
         source = path.resolve(
             path.dirname(
-                url.fileURLToPath(import.meta.resolve('@awesome.me/kit-a463935e93/package.json')),
+                url.fileURLToPath(import.meta.resolve('@gitbook/fontawesome-pro/package.json')),
             ),
             'icons',
         );

packages/icons/package.json

@@ -22,7 +22,7 @@
         "@fortawesome/fontawesome-free": "^6.6.0"
     },
     "optionalDependencies": {
-        "@awesome.me/kit-a463935e93": "1.0.8"
+        "@gitbook/fontawesome-pro": "1.0.8"
     },
     "devDependencies": {
         "typescript": "^5.5.3"

packages/proxy/.gitignore

@@ -0,0 +1 @@
+dist/

packages/proxy/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @gitbook/proxy
+
+## 0.1.0
+
+### Minor Changes
+
+-   53b9f10: First version

packages/proxy/README.md

@@ -0,0 +1,28 @@
+# `@gitbook/proxy`
+
+Host a GitBook site on your own domain as a subpath.
+
+## Usage
+
+```ts
+import { proxyToGitBook } from '@gitbook/proxy';
+
+const site = proxyToGitBook(event.request, {
+    site: 'mycompany.gitbook.io/site/',
+    basePath: '/docs',
+});
+
+export default {
+    async fetch(request) {
+        // If the requst matches the basePath /docs, we serve from GitBook
+        if (site.match(request)) {
+            return site.fetch(request);
+        }
+
+        // Otherwise we do something else.
+        return new Response('Not found', {
+            statusCode: 404,
+        });
+    },
+};
+```