Simplify AI Chat

- Add new `note` field
- Always clear `messages` when posting a message
- Remove follow-up questions

.changeset/bright-ladybugs-march.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Simplify AI Chat

.changeset/cuddly-eels-live.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix robots.txt preventing favicon from being indexed.

.changeset/late-mangos-draw.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Show a toolbar for authenticated users with access to the current site.

.changeset/wicked-hornets-crash.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Scope search across sections and variants

.github/CONTRIBUTING.md

@@ -54,9 +54,10 @@ After forking this repository, you'll want to [create a branch](https://docs.git
 #### 3. Install dependencies and run the project locally
 
 ##### Prerequisites:
-
-- [Node.js](https://nodejs.org/en) (see "engines" in `package.json`)
-- [Bun](https://bun.sh/) (see "packageManager" in `package.json`)
+- Node.js (Version: >=20.6)
+  - Use `nvm` for easy Node management
+- [Bun](https://bun.sh/) (Version: >=1.2.15)
+  - We use a text-based lockfile which isn't supported below 1.2.15
 
 ##### Setup steps:
 

.github/workflows/ci.yaml

@@ -4,9 +4,8 @@ on:
     push:
         branches:
             - main
-            - changeset-release/main
 env:
-    BUN_NPM_TOKEN: ${{ secrets.NPM_TOKEN_READONLY }}
+    NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
 jobs:
     format:
         runs-on: ubuntu-latest
@@ -42,7 +41,7 @@ jobs:
         name: Build (Open Source)
         timeout-minutes: 6
         env:
-            BUN_NPM_TOKEN: ''
+            NPM_TOKEN_READONLY: ''
         steps:
             - name: Checkout
               uses: actions/checkout@v4

.github/workflows/deploy-preview.yaml

@@ -5,7 +5,7 @@ on:
       branches:
         - main
 env:
-    BUN_NPM_TOKEN: ${{ secrets.NPM_TOKEN_READONLY }}
+    NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
 jobs:
     deploy-v2-vercel:
         name: Deploy v2 to Vercel (preview)

.github/workflows/deploy-production.yaml

@@ -4,7 +4,7 @@ on:
         branches:
             - main
 env:
-    BUN_NPM_TOKEN: ${{ secrets.NPM_TOKEN_READONLY }}
+    NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
 jobs:
     deploy-v2-vercel:
         name: Deploy v2 to Vercel (production)

.github/workflows/deploy-staging.yaml

@@ -4,7 +4,7 @@ on:
         branches:
             - main
 env:
-    BUN_NPM_TOKEN: ${{ secrets.NPM_TOKEN_READONLY }}
+    NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
 jobs:
     deploy-v2-vercel:
         name: Deploy v2 to Vercel (staging)

.github/workflows/publish.yaml

@@ -6,7 +6,7 @@ on:
             - main
 
 env:
-    BUN_NPM_TOKEN: ${{ secrets.NPM_TOKEN_READONLY }}
+    NPM_TOKEN_READONLY: ${{ secrets.NPM_TOKEN_READONLY }}
     
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -14,38 +14,29 @@ jobs:
     publish:
         name: Publish
         runs-on: ubuntu-latest
-        permissions:
-            id-token: write
-            pull-requests: write
-            contents: write
         steps:
             - name: Checkout Repo
               uses: actions/checkout@v3
               with:
                   # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
                   fetch-depth: 0
-            - name: Setup Node
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 22
-                  registry-url: 'https://registry.npmjs.org'
-            # Ensure npm 11.5.1 or later is installed
-            - name: Update npm
-              run: npm install -g npm@latest
             - name: Setup Bun
               uses: ./.github/composite/setup-bun
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
-            - name: Create Release Pull Request
+            - name: Create Release Pull Request or Publish to npm
               id: changesets
               uses: changesets/action@v1
               with:
-                  publish: bun run publish-all-packages
-                  version: bun run changeset-version
+                  publish: npm run release
+                  version: npm run changeset-version
               env:
                   # 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 }}
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 

.gitignore

@@ -25,7 +25,3 @@ yarn-error.log*
 
 # TypeScript
 *.tsbuildinfo
-.npmrc
-
-# Bun pack artifacts
-packages/*/*.tgz

.nvmrc

@@ -1 +1 @@
-v22.3
+v20.6

README.md

@@ -35,7 +35,7 @@ To run a local version of this project, please follow these simple steps.
 
 ### Prerequisites
 
-- Node.js (Version: >= 22.3)
+- Node.js (Version: >=20.6)
     - Use nvm for easy Node management
 - [Bun](https://bun.sh/) (Version: >=1.2.15)
   - We use a text-based lockfile which isn't supported below 1.2.15
@@ -90,7 +90,7 @@ If you are GitBook staff, you'll need our NPM token in your local environment.
 ```
 .env.local
 
-BUN_NPM_TOKEN=xxx
+NPM_TOKEN_READONLY=xxx
 ```
 
 and then reinstall dependencies.

bunfig.toml

@@ -1,2 +1,2 @@
 [install.scopes]
-"gitbook" = { token = "$BUN_NPM_TOKEN", url = "https://registry.npmjs.org" }
+"gitbook" = { token = "$NPM_TOKEN_READONLY", url = "https://registry.npmjs.org" }

package.json

@@ -1,27 +1,22 @@
 {
     "name": "gitbook",
     "version": "0.1.0",
-    "engines": {
-        "node": "^22.3.0"
-    },
     "devDependencies": {
         "@biomejs/biome": "^1.9.4",
-        "@changesets/cli": "^2.29.7",
-        "turbo": "^2.6.1",
-        "vercel": "^39.4.2"
+        "@changesets/cli": "^2.27.12",
+        "turbo": "^2.5.0",
+        "vercel": "^39.3.0"
     },
-    "packageManager": "bun@1.3.2",
+    "packageManager": "bun@1.2.15",
     "overrides": {
         "@codemirror/state": "6.4.1",
-        "@types/react": "catalog:",
-        "@types/react-dom": "catalog:",
-        "react": "catalog:",
-        "react-dom": "catalog:",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "esbuild": "0.24.2"
     },
     "private": true,
     "scripts": {
-        "dev": "turbo run dev --concurrency 20",
+        "dev": "turbo run dev",
         "build": "turbo run build",
         "clean-deps": "rm -rf node_modules && rm -rf packages/*/node_modules",
         "typecheck": "turbo run typecheck",
@@ -31,29 +26,16 @@
         "e2e": "turbo run e2e",
         "e2e-customers": "turbo run e2e-customers",
         "changeset": "changeset",
-        "changeset-version": "changeset version && bun run format && bun update",
-        "publish-all-packages": "turbo run publish-to-npm --continue=dependencies-successful",
+        "changeset-version": "changeset version && bun run format",
+        "release": "turbo run release && changeset publish",
         "download:env": "op read op://gitbook-x-dev/gitbook-open/.env.local >> .env.local",
         "clean": "turbo run clean"
     },
     "workspaces": {
         "packages": ["packages/*"],
         "catalog": {
-            "@tsconfig/strictest": "^2.0.6",
-            "@tsconfig/node20": "^20.1.6",
-            "@gitbook/api": "0.150.0",
-            "@scalar/api-client-react": "^1.3.46",
-            "@types/react": "^19.0.0",
-            "@types/react-dom": "^19.0.0",
-            "assert-never": "^1.4.0",
-            "bidc": "^0.0.2",
-            "bun-types": "^1.1.20",
-            "classnames": "^2.5.1",
-            "react": "^19.0.0",
-            "react-dom": "^19.0.0",
-            "tsdown": "^0.15.6",
-            "typescript": "^5.5.3",
-            "usehooks-ts": "^3.1.1"
+            "@gitbook/api": "^0.141.0",
+            "bidc": "^0.0.2"
         }
     },
     "patchedDependencies": {

packages/browser-types/CHANGELOG.md

@@ -1,29 +1,5 @@
 # @gitbook/browser-types
 
-## 0.1.3
-
-### Patch Changes
-
-- 10995e0: Use NPM Trusted publishing for publishing the package.
-- Updated dependencies [10995e0]
-  - @gitbook/icons@0.3.4
-
-## 0.1.2
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-- Updated dependencies [6142d6b]
-  - @gitbook/icons@0.3.3
-
-## 0.1.1
-
-### Patch Changes
-
-- 295f03d: Republish packages
-- Updated dependencies [295f03d]
-  - @gitbook/icons@0.3.2
-
 ## 0.1.0
 
 ### Minor Changes

packages/browser-types/package.json

@@ -8,29 +8,17 @@
             "default": "./dist/index.js"
         }
     },
-    "sideEffects": false,
-    "version": "0.1.3",
+    "version": "0.1.0",
     "dependencies": {
         "@gitbook/api": "catalog:",
         "@gitbook/icons": "workspace:"
     },
     "devDependencies": {
-        "bun-types": "catalog:",
-        "tsdown": "catalog:",
-        "typescript": "catalog:"
+        "typescript": "^5.5.3"
     },
     "scripts": {
-        "build": "tsdown",
-        "typecheck": "tsc --noEmit",
-        "dev": "bun run build -- --watch ./src",
-        "publish-to-npm": "../../scripts/publish-if-new.sh"
+        "build": "tsc",
+        "typecheck": "tsc --noEmit"
     },
-    "files": ["dist", "README.md", "CHANGELOG.md"],
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    },
-    "repository": {
-        "url": "https://github.com/GitbookIO/gitbook"
-    }
+    "files": ["dist", "README.md", "CHANGELOG.md"]
 }

packages/cache-tags/CHANGELOG.md

@@ -1,23 +1,5 @@
 # @gitbook/cache-tags
 
-## 0.3.4
-
-### Patch Changes
-
-- 10995e0: Use NPM Trusted publishing for publishing the package.
-
-## 0.3.3
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-
-## 0.3.2
-
-### Patch Changes
-
-- 295f03d: Republish packages
-
 ## 0.3.1
 
 ### Patch Changes

packages/cache-tags/package.json

@@ -4,32 +4,22 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
+            "development": "./src/index.ts",
             "default": "./dist/index.js"
         }
     },
-    "sideEffects": false,
-    "version": "0.3.4",
+    "version": "0.3.1",
     "dependencies": {
         "@gitbook/api": "catalog:",
-        "assert-never": "catalog:"
+        "assert-never": "^1.2.1"
     },
     "devDependencies": {
-        "bun-types": "catalog:",
-        "tsdown": "catalog:",
-        "typescript": "catalog:"
+        "typescript": "^5.5.3"
     },
     "scripts": {
-        "build": "tsdown",
+        "build": "tsc",
         "typecheck": "tsc --noEmit",
-        "dev": "bun run build -- --watch ./src",
-        "publish-to-npm": "../../scripts/publish-if-new.sh"
+        "dev": "tsc -w"
     },
-    "files": ["dist", "README.md", "CHANGELOG.md"],
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    },
-    "repository": {
-        "url": "https://github.com/GitbookIO/gitbook"
-    }
+    "files": ["dist", "src", "README.md", "CHANGELOG.md"]
 }

packages/colors/CHANGELOG.md

@@ -1,23 +1,5 @@
 # @gitbook/colors
 
-## 0.4.3
-
-### Patch Changes
-
-- 10995e0: Use NPM Trusted publishing for publishing the package.
-
-## 0.4.2
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-
-## 0.4.1
-
-### Patch Changes
-
-- 295f03d: Republish packages
-
 ## 0.4.0
 
 ### Minor Changes

packages/colors/package.json

@@ -4,28 +4,18 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
+            "development": "./src/index.ts",
             "default": "./dist/index.js"
         }
     },
-    "sideEffects": false,
-    "version": "0.4.3",
+    "version": "0.4.0",
     "devDependencies": {
-        "bun-types": "catalog:",
-        "tsdown": "catalog:",
-        "typescript": "catalog:"
+        "typescript": "^5.5.3"
     },
     "scripts": {
-        "build": "tsdown",
+        "build": "tsc",
         "typecheck": "tsc --noEmit",
-        "dev": "bun run build -- --watch ./src",
-        "publish-to-npm": "../../scripts/publish-if-new.sh"
+        "dev": "tsc -w"
     },
-    "files": ["dist", "README.md", "CHANGELOG.md"],
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    },
-    "repository": {
-        "url": "https://github.com/GitbookIO/gitbook"
-    }
+    "files": ["dist", "src", "README.md", "CHANGELOG.md"]
 }

packages/embed/CHANGELOG.md

@@ -1,35 +1,5 @@
 # @gitbook/embed
 
-## 0.1.5
-
-### Patch Changes
-
-- 10995e0: Use NPM Trusted publishing for publishing the package.
-- Updated dependencies [10995e0]
-  - @gitbook/icons@0.3.4
-
-## 0.1.4
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-- Updated dependencies [6142d6b]
-  - @gitbook/icons@0.3.3
-
-## 0.1.3
-
-### Patch Changes
-
-- 295f03d: Republish packages
-- Updated dependencies [295f03d]
-  - @gitbook/icons@0.3.2
-
-## 0.1.2
-
-### Patch Changes
-
-- 7508674: Fix bundling of packages
-
 ## 0.1.1
 
 ### Patch Changes

packages/embed/package.json

@@ -5,44 +5,27 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "default": "./dist/index.js"
-        },
-        "./react": {
-            "types": "./dist/react/index.d.ts",
-            "default": "./dist/react/index.js"
+            "default": "./dist/index.js",
+            "standalone": "./dist/standalone/index.js",
+            "react": "./dist/react/index.js"
         }
     },
-    "sideEffects": false,
-    "version": "0.1.5",
+    "version": "0.1.1",
     "dependencies": {
         "@gitbook/api": "catalog:",
         "@gitbook/icons": "workspace:",
         "bidc": "catalog:"
     },
     "peerDependencies": {
-        "react": "*"
+        "react": "^18.0.0"
     },
     "devDependencies": {
-        "@types/react": "catalog:",
-        "tsdown": "catalog:",
-        "typescript": "catalog:",
-        "react": "catalog:"
+        "typescript": "^5.5.3",
+        "react": "^19.0.0"
     },
     "scripts": {
-        "build": "bun run build-lib && bun run build-standalone",
-        "build-lib": "tsdown",
-        "build-standalone": "bun build src/standalone/index.ts --bundle --minify --outdir=standalone",
-        "clean": "rm -rf ./dist",
-        "typecheck": "tsc --noEmit",
-        "dev": "bun run build -- --watch ./src",
-        "publish-to-npm": "../../scripts/publish-if-new.sh"
+        "build": "tsc && bun build src/standalone/index.ts --bundle --minify --outdir=standalone",
+        "typecheck": "tsc --noEmit"
     },
-    "files": ["dist", "README.md", "CHANGELOG.md"],
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    },
-    "repository": {
-        "url": "https://github.com/GitbookIO/gitbook"
-    }
+    "files": ["dist", "README.md", "CHANGELOG.md", "standalone"]
 }

packages/embed/src/react/GitBookFrame.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { useEffect, useMemo, useRef, useState } from 'react';
+import React from 'react';
 import type {
     GetFrameURLOptions,
     GitBookEmbeddableConfiguration,
@@ -19,19 +17,19 @@ export type GitBookFrameProps = {
 export function GitBookFrame(props: GitBookFrameProps) {
     const { className, visitor, buttons, welcomeMessage, suggestions, tools } = props;
 
-    const frameRef = useRef<HTMLIFrameElement>(null);
+    const frameRef = React.useRef<HTMLIFrameElement>(null);
     const gitbook = useGitBook();
-    const [gitbookFrame, setGitbookFrame] = useState<GitBookFrameClient | null>(null);
+    const [gitbookFrame, setGitbookFrame] = React.useState<GitBookFrameClient | null>(null);
 
-    const frameURL = useMemo(() => gitbook.getFrameURL({ visitor }), [gitbook, visitor]);
+    const frameURL = React.useMemo(() => gitbook.getFrameURL({ visitor }), [gitbook, visitor]);
 
-    useEffect(() => {
+    React.useEffect(() => {
         if (frameRef.current) {
             setGitbookFrame(gitbook.createFrame(frameRef.current));
         }
     }, [gitbook]);
 
-    useEffect(() => {
+    React.useEffect(() => {
         gitbookFrame?.configure({
             buttons,
             welcomeMessage,

packages/embed/tsdown.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig } from 'tsdown';
-
-export default defineConfig([
-    {
-        entry: 'src/index.ts',
-        outDir: 'dist',
-    },
-    {
-        entry: 'src/react/index.ts',
-        outDir: 'dist/react',
-        unbundle: true,
-    },
-]);

packages/emoji-codepoints/CHANGELOG.md

@@ -1,25 +1,13 @@
 # @gitbook/emoji-codepoints
 
-## 0.2.2
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-
-## 0.2.1
-
-### Patch Changes
-
-- 295f03d: Republish packages
-
 ## 0.2.0
 
 ### Minor Changes
 
-- 57adb3e: Second release to fix publishing with changeset
+-   57adb3e: Second release to fix publishing with changeset
 
 ## 0.1.0
 
 ### Minor Changes
 
-- 5f8a8fe: Initial release
+-   5f8a8fe: Initial release

packages/emoji-codepoints/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@gitbook/emoji-codepoints",
     "description": "Optimized mapping of codepoints to the fully qualified emoji codepoints",
-    "version": "0.2.2",
+    "version": "0.2.0",
     "private": true,
     "exports": "./dist/index.ts",
-    "sideEffects": false,
+    "dependencies": {},
     "devDependencies": {
-        "emoji-assets": "^9.0.0"
+        "emoji-assets": "^8.0.0"
     },
     "scripts": {
         "generate": "bun ./build.ts",

packages/expr/CHANGELOG.md

@@ -1,30 +1,5 @@
 # @gitbook/expr
 
-## 1.2.4
-
-### Patch Changes
-
-- 10995e0: Use NPM Trusted publishing for publishing the package.
-- 10995e0: Use NPM dependency for eval-estree-expression
-
-## 1.2.3
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-
-## 1.2.2
-
-### Patch Changes
-
-- 295f03d: Republish packages
-
-## 1.2.1
-
-### Patch Changes
-
-- a629900: Add dev script for @gitbook/expr
-
 ## 1.2.0
 
 ### Minor Changes

packages/expr/package.json

@@ -1,47 +1,37 @@
 {
     "name": "@gitbook/expr",
     "description": "Safely evaluate & parse user-defined GitBook expressions.",
-    "version": "1.2.4",
+    "version": "1.2.0",
     "type": "module",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
             "default": "./dist/index.js"
         }
     },
     "sideEffects": false,
     "dependencies": {
+        "eval-estree-expression": "github:jonschlinkert/eval-estree-expression#9cf28d2",
         "acorn": "^8.14.0",
         "acorn-loose": "8.4.0",
         "acorn-walk": "^8.3.4",
-        "assert-never": "catalog:",
         "escodegen": "^2.1.0",
-        "eval-estree-expression": "github:jonschlinkert/eval-estree-expression#fb0246a"
+        "assert-never": "^1.2.1"
     },
     "devDependencies": {
-        "@tsconfig/strictest": "catalog:",
-        "@tsconfig/node20": "catalog:",
-        "@types/escodegen": "^0.0.10",
+        "bun-types": "^1.1.20",
+        "tsdown": "^0.15.0",
         "@types/estree": "^1.0.6",
+        "@babel/types": "^7.26.0",
         "@types/json-schema": "^7.0.15",
-        "bun-types": "catalog:",
-        "tsdown": "catalog:",
-        "typescript": "catalog:"
+        "@types/escodegen": "^0.0.10"
     },
     "scripts": {
-        "build": "tsdown",
+        "build": "tsdown --project tsconfig.build.json",
         "typecheck": "tsc --noEmit",
         "unit": "bun test",
-        "clean": "rm -rf ./dist",
-        "dev": "bun run build -- --watch ./src",
-        "publish-to-npm": "../../scripts/publish-if-new.sh"
+        "clean": "rm -rf ./dist"
     },
-    "files": ["dist", "README.md", "CHANGELOG.md"],
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    },
-    "repository": {
-        "url": "https://github.com/GitbookIO/gitbook"
-    }
+    "files": ["dist", "README.md", "CHANGELOG.md"]
 }

packages/expr/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": ["./tsconfig.json"],
+    "exclude": ["**/*.test.ts"],
+    "compilerOptions": {
+        "declaration": true,
+        "noEmit": false,
+        "outDir": "dist"
+    }
+}

packages/expr/tsdown.config.ts

@@ -2,7 +2,8 @@ import { defineConfig } from 'tsdown';
 
 export default defineConfig([
     {
-        entry: 'src/index.ts',
-        unbundle: true,
+        entry: ['src/index.ts'],
+        dts: true,
+        format: ['esm'],
     },
 ]);

packages/fonts/CHANGELOG.md

@@ -1,23 +1,5 @@
 # @gitbook/fonts
 
-## 0.1.3
-
-### Patch Changes
-
-- 10995e0: Use NPM Trusted publishing for publishing the package.
-
-## 0.1.2
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-
-## 0.1.1
-
-### Patch Changes
-
-- 295f03d: Republish packages
-
 ## 0.1.0
 
 ### Minor Changes

packages/fonts/package.json

@@ -4,38 +4,28 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
+            "development": "./src/index.ts",
             "default": "./dist/index.js"
         }
     },
-    "sideEffects": false,
-    "version": "0.1.3",
+    "version": "0.1.0",
     "dependencies": {
         "@gitbook/api": "catalog:"
     },
     "devDependencies": {
-        "bun-types": "catalog:",
-        "google-font-metadata": "^6.0.7",
-        "tsdown": "catalog:",
-        "typescript": "catalog:"
+        "google-font-metadata": "^6.0.3",
+        "typescript": "^5.5.3"
     },
     "scripts": {
         "generate": "bun ./bin/generate.js",
-        "build": "tsdown",
+        "build": "tsc --project tsconfig.build.json",
         "typecheck": "tsc --noEmit",
-        "dev": "bun run build -- --watch ./src",
+        "dev": "tsc -w",
         "clean": "rm -rf ./dist && rm -rf ./src/data",
-        "unit": "bun test",
-        "publish-to-npm": "../../scripts/publish-if-new.sh"
+        "unit": "bun test"
     },
-    "files": ["dist", "bin", "README.md", "CHANGELOG.md"],
+    "files": ["dist", "src", "bin", "README.md", "CHANGELOG.md"],
     "engines": {
         "node": ">=20.0.0"
-    },
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    },
-    "repository": {
-        "url": "https://github.com/GitbookIO/gitbook"
     }
 }

packages/fonts/src/__snapshots__/getDefaultFont.test.ts.snap

@@ -1,57 +1,57 @@
-// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+// Bun Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getDefaultFont should return correct object for Latin text 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
 }
 `;
 
 exports[`getDefaultFont should return correct object for Cyrillic text 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZthjp-Ek-_0ewmM.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZthjp-Ek-_0ewmM.woff",
 }
 `;
 
 exports[`getDefaultFont should return correct object for Greek text 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZxhjp-Ek-_0ewmM.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZxhjp-Ek-_0ewmM.woff",
 }
 `;
 
 exports[`getDefaultFont should handle mixed script text 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZthjp-Ek-_0ewmM.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZthjp-Ek-_0ewmM.woff",
 }
 `;
 
 exports[`getDefaultFont should handle different font weights: regular 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
 }
 `;
 
 exports[`getDefaultFont should handle different font weights: bold 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hjp-Ek-_0ew.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hjp-Ek-_0ew.woff",
 }
 `;
 
 exports[`getDefaultFont should handle different fonts: inter 1`] = `
 {
   "font": "Inter",
-  "url": "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
 }
 `;
 
 exports[`getDefaultFont should handle different fonts: roboto 1`] = `
 {
   "font": "Roboto",
-  "url": "https://fonts.gstatic.com/s/roboto/v49/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAz0klQm_20.woff",
+  "url": "https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxMKTU1Kg.woff",
 }
 `;

packages/fonts/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": ["node_modules", "src/**/*.test.ts"]
+}

packages/gitbook/CHANGELOG.md

@@ -1,149 +1,5 @@
 # gitbook
 
-## 0.20.0
-
-### Minor Changes
-
-- 1d92dc1: Update site layout and blocks with container queries and better transitions
-
-### Patch Changes
-
-- 8fdc5c8: Fix webframe height issue
-- 9022d87: Add breadcrumbs to search results
-- 0c01832: SearchInput fixes — Translate Clear button, Bold theme color, "Esc" keyboard shortcut
-- 1d1f0a7: Fix search container shadow
-- 2aa4f2e: Update dropdown menu styling
-- a49781e: Printable collapsed code block
-- 7d6a316: Revert contentref anchor title
-- e27986b: Reword "Everywhere" search scope to "All docs"
-- 758b34d: Move the "Ask <query>" to the bottom of search results if query is not a question
-- 0ae7cfd: Improve AI Search branding
-- f9f8011: Add alt text support to card covers
-- ebbb476: Improve ancestor label in references
-- 1b0613e: Tweak language dropdown styling
-- 3355960: Fix ToggeableLinkItem display
-- c31e564: Fix icon resolution for page group
-- 55c0b03: Support translations and generic variants together
-- 3876f70: Edgeless Assistant window on `depth: flat` sites
-- 683bb8f: Add confirmation to "Copy MCP URL" page action
-- 4534ea8: Implement unique title tags for sections & variants
-- 6d56df7: Treat pages without visible TOC items as `no-toc`
-- 8606f22: Add padding to TOC page group items
-- 3676d64: Update search scope UI
-- c32d449: Fix OpenAPI path display
-- 8ce7322: Add OpenAPI servers selection
-- 2c3066e: Improve OAuth2 scopes handling in OpenAPI
-- 6b1c9fe: Fix opacity of ScrollContainer buttons on bold themes
-- Updated dependencies [b4a021a]
-- Updated dependencies [a512c90]
-- Updated dependencies [df1966d]
-- Updated dependencies [b45feaf]
-- Updated dependencies [10995e0]
-- Updated dependencies [f9f8011]
-- Updated dependencies [10995e0]
-- Updated dependencies [8ce7322]
-- Updated dependencies [2c3066e]
-  - @gitbook/react-openapi@1.5.3
-  - @gitbook/openapi-parser@3.0.5
-  - @gitbook/react-contentkit@0.7.8
-  - @gitbook/browser-types@0.1.3
-  - @gitbook/cache-tags@0.3.4
-  - @gitbook/react-math@0.6.4
-  - @gitbook/colors@0.4.3
-  - @gitbook/embed@0.1.5
-  - @gitbook/fonts@0.1.3
-  - @gitbook/icons@0.3.4
-  - @gitbook/expr@1.2.4
-
-## 0.19.2
-
-### Patch Changes
-
-- 6142d6b: Mark as sideEffects, fix all package bundles
-- 75543b1: Update minimum Node version in .npmrc
-- 511f1cf: Add scroll margin to Expandable
-- Updated dependencies [6142d6b]
-  - @gitbook/emoji-codepoints@0.2.2
-  - @gitbook/react-contentkit@0.7.7
-  - @gitbook/openapi-parser@3.0.4
-  - @gitbook/browser-types@0.1.2
-  - @gitbook/react-openapi@1.5.2
-  - @gitbook/cache-tags@0.3.3
-  - @gitbook/react-math@0.6.3
-  - @gitbook/colors@0.4.2
-  - @gitbook/fonts@0.1.2
-  - @gitbook/icons@0.3.3
-  - @gitbook/expr@1.2.3
-
-## 0.19.1
-
-### Patch Changes
-
-- 295f03d: Republish packages
-- Updated dependencies [bdde392]
-- Updated dependencies [295f03d]
-  - @gitbook/react-contentkit@0.7.6
-  - @gitbook/browser-types@0.1.1
-  - @gitbook/cache-tags@0.3.2
-  - @gitbook/colors@0.4.1
-  - @gitbook/emoji-codepoints@0.2.1
-  - @gitbook/expr@1.2.2
-  - @gitbook/fonts@0.1.1
-  - @gitbook/icons@0.3.2
-  - @gitbook/openapi-parser@3.0.3
-  - @gitbook/react-math@0.6.2
-  - @gitbook/react-openapi@1.5.1
-
-## 0.19.0
-
-### Minor Changes
-
-- ed7d47d: Show a toolbar for authenticated users with access to the current site.
-- 50c1be3: Move inline expression evaluation from API to GBO
-- 56e46ce: Add Italian translation
-- b932e4e: Scope search across sections and variants
-
-### Patch Changes
-
-- 162cfe4: Hide sections if only one is present
-- 1456251: Unify section display condition
-- 9344431: Fix missing geo data in site insights because of incorrect proxying of events.
-- eea8f1e: Enhance OpenAPI security scopes handling
-- 2b8a2d2: Add stable scroll gutter to search container
-- b498521: Fix robots.txt preventing favicon from being indexed.
-- ceb32b1: Redo search scope UI
-- 8e99871: Highlight discriminator properties in oneOf, allOf, anyOf objects
-- 2fc2127: Make search accessible
-- f3e4041: Adapt OpenAPI code samples to prefill API key using visitor data
-- 6815dd1: Fix markdownPageURL for PageActions
-- c06b3dd: Improve default site icon
-- cba583a: Use sitespace title instead of space title in search
-- e434442: Support nested site section groups
-- 469b332: Add support for inline expressions rendering with visitor data on GBO side
-- 0ef5dc8: Update to column width sizing
-- 1e4e54e: Fix rounded outline items
-- 379d486: Expose "Best match" when site has translations
-- c21693f: Improve screen reader accessibility for hints
-- badf3a9: Add alt text to inline image
-- c23d4ef: Fix crash for card cover defined without objectFit
-- d74f8a7: Improve wide page width layout
-- b8388e5: Add scrollcontainer component
-- b85eccd: Refactor section tabs
-- 1e53f46: Fix button content truncate
-- 7a504b7: Fix OpenAPI response dropdown & vertical overflow
-- a4c3399: Fix OpenAPI alternatives not showing
-- Updated dependencies [a629900]
-- Updated dependencies [eea8f1e]
-- Updated dependencies [8e99871]
-- Updated dependencies [f3e4041]
-- Updated dependencies [319a1e5]
-- Updated dependencies [529f940]
-- Updated dependencies [754cc11]
-- Updated dependencies [d7948e3]
-- Updated dependencies [a4c3399]
-  - @gitbook/expr@1.2.1
-  - @gitbook/react-openapi@1.5.0
-
 ## 0.18.0
 
 ### Minor Changes

packages/gitbook/e2e/customers.spec.ts

@@ -62,11 +62,11 @@ const testCases: TestsCase[] = [
         contentBaseURL: 'https://docs.gmgn.ai',
         tests: [{ name: 'Home', url: '/' }],
     },
-    // {
-    //     name: 'docs.spicychat.ai',
-    //     contentBaseURL: 'https://docs.spicychat.ai',
-    //     tests: [{ name: 'Home', url: '/' }],
-    // },
+    {
+        name: 'docs.spicychat.ai',
+        contentBaseURL: 'https://docs.spicychat.ai',
+        tests: [{ name: 'Home', url: '/' }],
+    },
     {
         name: 'docs.portainer.io',
         contentBaseURL: 'https://docs.portainer.io',
@@ -112,11 +112,11 @@ const testCases: TestsCase[] = [
         contentBaseURL: 'https://adiblar.gitbook.io',
         tests: [{ name: 'Home', url: '/' }],
     },
-    // {
-    //     name: 'docs.gradient.network',
-    //     contentBaseURL: 'https://docs.gradient.network',
-    //     tests: [{ name: 'Home', url: '/' }],
-    // },
+    {
+        name: 'docs.gradient.network',
+        contentBaseURL: 'https://docs.gradient.network',
+        tests: [{ name: 'Home', url: '/' }],
+    },
     // {
     //     name: 'mygate-network.gitbook.io',
     //     contentBaseURL: 'https://mygate-network.gitbook.io',
@@ -172,6 +172,11 @@ const testCases: TestsCase[] = [
         contentBaseURL: 'https://docs.realapp.link',
         tests: [{ name: 'Home', url: '/' }],
     },
+    {
+        name: 'docs.plaza.finance',
+        contentBaseURL: 'https://docs.plaza.finance',
+        tests: [{ name: 'Home', url: '/' }],
+    },
     {
         name: 'docs.publicai.io',
         contentBaseURL: 'https://docs.publicai.io',

packages/gitbook/e2e/internal.spec.ts

@@ -33,7 +33,6 @@ import {
     headerLinks,
     runTestCases,
     waitForCookiesDialog,
-    waitForCoverImages,
     waitForNotFound,
 } from './util';
 
@@ -160,20 +159,20 @@ const searchTestCases: Test[] = [
             await expect(page.getByTestId('ai-chat-input')).toBeFocused();
         },
     },
-    // {
-    //     name: 'Ask - AI Mode: Assistant - Button',
-    //     url: getCustomizationURL({
-    //         ai: {
-    //             mode: CustomizationAIMode.Assistant,
-    //         },
-    //     }),
-    //     screenshot: false,
-    //     run: async (page) => {
-    //         await page.getByTestId('ai-chat-button').click();
-    //         await expect(page.getByTestId('ai-chat')).toBeVisible();
-    //         await expect(page.getByTestId('ai-chat-input')).toBeFocused();
-    //     },
-    // },
+    {
+        name: 'Ask - AI Mode: Assistant - Button',
+        url: getCustomizationURL({
+            ai: {
+                mode: CustomizationAIMode.Assistant,
+            },
+        }),
+        screenshot: false,
+        run: async (page) => {
+            await page.getByTestId('ai-chat-button').click();
+            await expect(page.getByTestId('ai-chat')).toBeVisible();
+            await expect(page.getByTestId('ai-chat-input')).toBeFocused();
+        },
+    },
     {
         name: 'Ask - AI Mode: Assistant - URL query (Initial)',
         url: `${getCustomizationURL({
@@ -229,58 +228,6 @@ const testCases: TestsCase[] = [
                     );
                 },
             },
-            {
-                name: 'Expandable TOC navigation',
-                url: '',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-
-                    // Verify "Navigation" link is not visible initially
-                    const navigationLink = page.getByRole('link', { name: 'Navigation' });
-                    await expect(navigationLink).not.toBeVisible();
-
-                    // Find and click the chevron element that is next to "Editor" in the TOC
-                    // It is a span inside the link
-                    const editorChevron = page
-                        .getByRole('link', { name: 'Editor' })
-                        .locator('span');
-                    await editorChevron.click();
-
-                    // Verify "Navigation" link becomes visible after expansion
-                    await expect(navigationLink).toBeVisible();
-                },
-            },
-            {
-                name: 'Expandable nested TOC navigation',
-                url: '',
-                screenshot: false,
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-
-                    // Verify "Spaces" link is not visible initially
-                    const navigationLink = page.getByRole('link', { name: 'Spaces' });
-                    await expect(navigationLink).not.toBeVisible();
-
-                    // Find and click the chevron element that is next to "Editor" in the TOC
-                    // It is a span inside the link
-                    const editorChevron = page
-                        .getByRole('link', { name: 'Editor' })
-                        .locator('span');
-                    await editorChevron.click();
-
-                    // At this stage the link should still not be visible
-                    await expect(navigationLink).not.toBeVisible();
-
-                    // Then we click 'Content Structure' chevron to expand further
-                    const contentStructureChevron = page
-                        .getByRole('link', { name: 'Content Structure' })
-                        .locator('span');
-                    await contentStructureChevron.click();
-
-                    // Verify "Spaces" link becomes visible after expansion
-                    await expect(navigationLink).toBeVisible();
-                },
-            },
             ...searchTestCases,
             {
                 name: 'Not found',
@@ -338,37 +285,6 @@ const testCases: TestsCase[] = [
                     ).toBeVisible();
                 },
             },
-            {
-                name: 'Switch variant with alternate link in metadata',
-                url: 'rfcs',
-                run: async (page) => {
-                    const spaceDropdown = page
-                        .locator('[data-testid="space-dropdown-button"]')
-                        .locator('visible=true');
-                    await spaceDropdown.click();
-
-                    const variantSelectionDropdown = page.locator(
-                        'css=[data-testid="dropdown-menu"]'
-                    );
-
-                    // Click the variant space called 'Multi-Variants' for which
-                    // there is an alternate link in the current (RFC variant) page metadata
-                    await variantSelectionDropdown
-                        .getByRole('menuitem', {
-                            name: 'Multi-Variants',
-                        })
-                        .click();
-
-                    // It should navigate to the alternate link defined in the metadata (a completely different page)
-                    await page.waitForURL((url) =>
-                        url.pathname.includes('multi-variants/reference/api-reference/pets')
-                    );
-                    // Verify we are on the correct page by checking the h1
-                    await expect(
-                        page.getByRole('heading', { level: 1, name: 'Pets' })
-                    ).toBeVisible();
-                },
-            },
         ],
     },
     {
@@ -811,10 +727,7 @@ const testCases: TestsCase[] = [
                 url: 'blocks/integrations',
                 run: async (page) => {
                     await waitForCookiesDialog(page);
-                    const mermaidIframe = page
-                        .locator('iframe[title*="mermaid"]')
-                        .first()
-                        .contentFrame();
+                    const mermaidIframe = page.locator('iframe[title*="mermaid"]').contentFrame();
                     await expect(mermaidIframe.getByText('Mermaid', { exact: true })).toBeVisible();
                     await expect(mermaidIframe.getByText('Diagram', { exact: true })).toBeVisible();
                 },
@@ -938,10 +851,7 @@ const testCases: TestsCase[] = [
             {
                 name: 'With cover',
                 url: 'page-options/page-with-cover',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-                    await waitForCoverImages(page);
-                },
+                run: waitForCookiesDialog,
             },
             {
                 name: 'With cover for dark mode',
@@ -956,18 +866,12 @@ const testCases: TestsCase[] = [
             {
                 name: 'With hero cover',
                 url: 'page-options/page-with-hero-cover',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-                    await waitForCoverImages(page);
-                },
+                run: waitForCookiesDialog,
             },
             {
                 name: 'With cover and no TOC',
                 url: 'page-options/page-with-cover-and-no-toc',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-                    await waitForCoverImages(page);
-                },
+                run: waitForCookiesDialog,
                 screenshot: {
                     waitForTOCScrolling: false,
                 },
@@ -1550,7 +1454,10 @@ const testCases: TestsCase[] = [
                     locale,
                 },
             }),
-            run: waitForCookiesDialog,
+            run: async (page) => {
+                const dialog = page.getByTestId('cookies-dialog');
+                await expect(dialog).toBeVisible();
+            },
         })),
     },
     {

packages/gitbook/e2e/util.ts

@@ -143,10 +143,7 @@ export const headerLinks: CustomizationHeaderItem[] = [
 
 export async function waitForCookiesDialog(page: Page) {
     const dialog = page.getByTestId('cookies-dialog');
-    await expect(dialog).toBeVisible({
-        // Cookies dialog may take some times to appear
-        timeout: 10_000,
-    });
+    await expect(dialog).toBeVisible();
 }
 
 export async function waitForNotFound(_page: Page, response: Response | null) {
@@ -154,13 +151,6 @@ export async function waitForNotFound(_page: Page, response: Response | null) {
     expect(response?.status()).toBe(404);
 }
 
-export async function waitForCoverImages(page: Page) {
-    // Wait for cover images to exist (not the shimmer placeholder)
-    await expect(page.locator('img[alt="Page cover"]').first()).toBeVisible({
-        timeout: 10_000,
-    });
-}
-
 /**
  * Transform test cases into Playwright tests and run it.
  */

packages/gitbook/open-next.config.ts

@@ -7,8 +7,7 @@ export default {
             converter: 'edge',
             proxyExternalRequest: 'fetch',
             queue: () => import('./openNext/queue/middleware').then((m) => m.default),
-            incrementalCache: () =>
-                import('./openNext/incrementalCache/server').then((m) => m.default),
+            incrementalCache: () => import('./openNext/incrementalCache').then((m) => m.default),
             tagCache: () => import('./openNext/tagCache/middleware').then((m) => m.default),
         },
     },
@@ -19,8 +18,7 @@ export default {
             converter: 'edge',
             proxyExternalRequest: 'fetch',
             queue: () => import('./openNext/queue/middleware').then((m) => m.default),
-            incrementalCache: () =>
-                import('./openNext/incrementalCache/middleware').then((m) => m.default),
+            incrementalCache: () => import('./openNext/incrementalCache').then((m) => m.default),
             tagCache: () => import('./openNext/tagCache/middleware').then((m) => m.default),
         },
     },

packages/gitbook/openNext/customWorkers/defaultWrangler.jsonc

@@ -1,13 +1,15 @@
 {
     "main": "default.js",
     "name": "gitbook-open-v2-server",
-    "keep_names": false,
     "compatibility_date": "2025-04-14",
     "compatibility_flags": [
         "nodejs_compat",
         "allow_importable_env",
         "global_fetch_strictly_public"
     ],
+    "observability": {
+        "enabled": true
+    },
     "vars": {
         "NEXT_CACHE_DO_QUEUE_DISABLE_SQLITE": "true"
     },

packages/gitbook/openNext/customWorkers/doWrangler.jsonc

@@ -2,12 +2,14 @@
     "main": "do.js",
     "name": "gitbook-open-v2-do",
     "compatibility_date": "2025-04-14",
-    "keep_names": false,
     "compatibility_flags": [
         "nodejs_compat",
         "allow_importable_env",
         "global_fetch_strictly_public"
     ],
+    "observability": {
+        "enabled": true
+    },
     "env": {
         "preview": {
             "vars": {

packages/gitbook/openNext/customWorkers/middleware.js

@@ -26,10 +26,8 @@ export default class extends WorkerEntrypoint {
     async fetch(request) {
         return runWithCloudflareRequestContext(request, this.env, this.ctx, async () => {
             const startTime = Date.now();
-            const middlewareRequest = new Request(request.url, request);
-            middlewareRequest.headers.set('x-open-next-continent', request.cf?.continent || '');
             // - `Request`s are handled by the Next server
-            const reqOrResp = await middlewareHandler(middlewareRequest, this.env, this.ctx);
+            const reqOrResp = await middlewareHandler(request, this.env, this.ctx);
             if (reqOrResp instanceof Response) {
                 const duration = Date.now() - startTime;
                 const logMessage = formatLog(

packages/gitbook/openNext/customWorkers/middlewareWrangler.jsonc

@@ -2,7 +2,6 @@
     "main": "middleware.js",
     "name": "gitbook-open-v2",
     "compatibility_date": "2025-04-14",
-    "keep_names": false,
     "compatibility_flags": [
         "nodejs_compat",
         "allow_importable_env",
@@ -12,6 +11,9 @@
         "directory": "../../.open-next/assets",
         "binding": "ASSETS"
     },
+    "observability": {
+        "enabled": true
+    },
     "vars": {
         "NEXT_CACHE_DO_QUEUE_DISABLE_SQLITE": "true"
     },

packages/gitbook/openNext/incrementalCache.ts

@@ -18,12 +18,15 @@ export type KeyOptions = {
 
 /**
  *
- * It is very similar to the `R2IncrementalCache` in the `@opennextjs/cloudflare` package, but it has an additional
- * R2WriteBuffer Durable Object to handle writes to R2. Given how we set up cache, we often end up writing to the same key too fast.
+ * It is very similar to the `R2IncrementalCache` in the `@opennextjs/cloudflare` package, but it allow us to trace
+ * the cache operations. It also integrates both R2 and Cache API in a single class.
+ * Having our own, will allow us to customize it in the future if needed.
  */
-export class GitbookIncrementalCache implements IncrementalCache {
+class GitbookIncrementalCache implements IncrementalCache {
     name = 'GitbookIncrementalCache';
 
+    protected localCache: Cache | undefined;
+
     async get<CacheType extends CacheEntryType = 'cache'>(
         key: string,
         cacheType?: CacheType
@@ -31,6 +34,7 @@ export class GitbookIncrementalCache implements IncrementalCache {
         const cacheKey = this.getR2Key(key, cacheType);
 
         const r2 = getCloudflareContext().env[BINDING_NAME];
+        const localCache = await this.getCacheInstance();
         if (!r2) throw new Error('No R2 bucket');
         if (process.env.SHOULD_BYPASS_CACHE === 'true') {
             // We are in a local middleware environment, we should bypass the cache
@@ -38,17 +42,27 @@ export class GitbookIncrementalCache implements IncrementalCache {
             return null;
         }
         try {
+            // Check local cache first if available
+            const localCacheEntry = await localCache.match(this.getCacheUrlKey(cacheKey));
+            if (localCacheEntry) {
+                const result = (await localCacheEntry.json()) as WithLastModified<
+                    CacheValue<CacheType>
+                >;
+                return this.returnNullOn404({
+                    ...result,
+                    // Because we use tag cache and also invalidate them every time,
+                    // if we get a cache hit, we don't need to check the tag cache as we already know it's not been revalidated
+                    // this should improve performance even further, and reduce costs
+                    shouldBypassTagCache: true,
+                });
+            }
+
             const r2Object = await r2.get(cacheKey);
             if (!r2Object) return null;
 
-            const json = (await r2Object.json()) as CacheValue<CacheType>;
-            const lastModified = r2Object.uploaded.getTime();
-
-            if (!json) return null;
-
             return this.returnNullOn404({
-                value: json,
-                lastModified,
+                value: await r2Object.json(),
+                lastModified: r2Object.uploaded.getTime(),
             });
         } catch (e) {
             console.error('Failed to get from cache', e);
@@ -75,8 +89,39 @@ export class GitbookIncrementalCache implements IncrementalCache {
     ): Promise<void> {
         const cacheKey = this.getR2Key(key, cacheType);
 
+        const localCache = await this.getCacheInstance();
+
         try {
             await this.writeToR2(cacheKey, JSON.stringify(value));
+
+            //TODO: Check if there is any places where we don't have tags
+            // Ideally we should always have tags, but in case we don't, we need to decide how to handle it
+            // For now we default to a build ID tag, which allow us to invalidate the cache in case something is wrong in this deployment
+            const tags = this.getTagsFromCacheEntry(value) ?? [
+                `build_id/${process.env.NEXT_BUILD_ID}`,
+            ];
+
+            // We consider R2 as the source of truth, so we update the local cache
+            // only after a successful R2 write
+            await localCache.put(
+                this.getCacheUrlKey(cacheKey),
+                new Response(
+                    JSON.stringify({
+                        value,
+                        // Note: `Date.now()` returns the time of the last IO rather than the actual time.
+                        //       See https://developers.cloudflare.com/workers/reference/security-model/
+                        lastModified: Date.now(),
+                    }),
+                    {
+                        headers: {
+                            // Cache-Control default to 30 minutes, will be overridden by `revalidate`
+                            // In theory we should always get the `revalidate` value
+                            'cache-control': `max-age=${value.revalidate ?? 60 * 30}`,
+                            'cache-tag': tags.join(','),
+                        },
+                    }
+                )
+            );
         } catch (e) {
             console.error('Failed to set to cache', e);
         }
@@ -86,10 +131,14 @@ export class GitbookIncrementalCache implements IncrementalCache {
         const cacheKey = this.getR2Key(key);
 
         const r2 = getCloudflareContext().env[BINDING_NAME];
+        const localCache = await this.getCacheInstance();
         if (!r2) throw new Error('No R2 bucket');
 
         try {
             await r2.delete(cacheKey);
+
+            // Here again R2 is the source of truth, so we delete from local cache first
+            await localCache.delete(this.getCacheUrlKey(cacheKey));
         } catch (e) {
             console.error('Failed to delete from cache', e);
         }
@@ -119,6 +168,12 @@ export class GitbookIncrementalCache implements IncrementalCache {
         }
     }
 
+    async getCacheInstance(): Promise<Cache> {
+        if (this.localCache) return this.localCache;
+        this.localCache = await caches.open('incremental-cache');
+        return this.localCache;
+    }
+
     // Utility function to generate keys for R2/Cache API
     getR2Key(initialKey: string, cacheType: CacheEntryType = 'cache'): string {
         let key = initialKey;
@@ -134,4 +189,28 @@ export class GitbookIncrementalCache implements IncrementalCache {
             '/'
         );
     }
+
+    getCacheUrlKey(cacheKey: string): string {
+        return `http://cache.local/${cacheKey}`;
+    }
+
+    getTagsFromCacheEntry<CacheType extends CacheEntryType>(
+        entry: CacheValue<CacheType>
+    ): string[] | undefined {
+        if ('tags' in entry && entry.tags) {
+            return entry.tags;
+        }
+
+        if ('meta' in entry && entry.meta && 'headers' in entry.meta && entry.meta.headers) {
+            const rawTags = entry.meta.headers['x-next-cache-tags'];
+            if (typeof rawTags === 'string') {
+                return rawTags.split(',');
+            }
+        }
+        if ('value' in entry) {
+            return entry.tags;
+        }
+    }
 }
+
+export default new GitbookIncrementalCache();

packages/gitbook/openNext/incrementalCache/middleware.ts

@@ -1,11 +0,0 @@
-import { withRegionalCache } from '@opennextjs/cloudflare/overrides/incremental-cache/regional-cache';
-import { GitbookIncrementalCache } from './incrementalCache';
-
-export default withRegionalCache(new GitbookIncrementalCache(), {
-    mode: 'long-lived',
-    // We can do it because we use our own logic to invalidate the cache
-    bypassTagCacheOnCacheHit: true,
-    defaultLongLivedTtlSec: 60 * 60 * 24 /* 24 hours */,
-    // We don't want to update the cache entry on every cache hit
-    shouldLazilyUpdateOnCacheHit: false,
-});

packages/gitbook/openNext/incrementalCache/server.ts

@@ -1,12 +0,0 @@
-import { withRegionalCache } from '@opennextjs/cloudflare/overrides/incremental-cache/regional-cache';
-import { GitbookIncrementalCache } from './incrementalCache';
-
-export default withRegionalCache(new GitbookIncrementalCache(), {
-    mode: 'long-lived',
-    // Because of a race condition, the middleware may have populated the cache entry before `cache.match` had time to run on the server.
-    // TODO: We should bypass the incremental cache entirely when the interceptor has caught the request. Should be done in OpenNext.
-    bypassTagCacheOnCacheHit: false,
-    defaultLongLivedTtlSec: 60 * 60 * 24 /* 24 hours */,
-    // We don't want to update the cache entry on every cache hit
-    shouldLazilyUpdateOnCacheHit: false,
-});

packages/gitbook/package.json

@@ -1,25 +1,20 @@
 {
     "name": "gitbook",
-    "version": "0.20.0",
+    "version": "0.18.0",
     "private": true,
     "dependencies": {
-        "@cloudflare/workers-types": "^4.20251011.0",
         "@gitbook/api": "catalog:",
         "@gitbook/browser-types": "workspace:*",
         "@gitbook/cache-tags": "workspace:*",
         "@gitbook/colors": "workspace:*",
         "@gitbook/emoji-codepoints": "workspace:*",
-        "@gitbook/expr": "workspace:*",
-        "@gitbook/embed": "workspace:*",
         "@gitbook/fonts": "workspace:*",
         "@gitbook/icons": "workspace:*",
         "@gitbook/openapi-parser": "workspace:*",
         "@gitbook/react-contentkit": "workspace:*",
         "@gitbook/react-math": "workspace:*",
         "@gitbook/react-openapi": "workspace:*",
-        "@modelcontextprotocol/sdk": "1.17.5",
-        "@opennextjs/aws": "^3.8.5",
-        "@opennextjs/cloudflare": "^1.11.0",
+        "@opennextjs/cloudflare": "^1.7.1",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dropdown-menu": "^2.1.12",
         "@radix-ui/react-hover-card": "^1.1.15",
@@ -31,16 +26,19 @@
         "@tailwindcss/typography": "^0.5.16",
         "@tusbar/cache-control": "^1.0.2",
         "ai": "^4.2.2",
-        "assert-never": "catalog:",
+        "assert-never": "^1.2.1",
         "bidc": "catalog:",
-        "classnames": "catalog:",
+        "bun-types": "^1.1.20",
+        "classnames": "^2.5.1",
         "direction": "^2.0.1",
         "event-iterator": "^2.0.0",
+        "framer-motion": "^10.16.14",
         "image-size": "^2.0.2",
         "js-cookie": "^3.0.5",
         "jsontoxml": "^1.0.1",
         "jwt-decode": "^4.0.0",
-        "mcp-handler": "^1.0.2",
+        "katex": "^0.16.9",
+        "mathjax": "^3.2.2",
         "mdast-util-from-markdown": "^2.0.2",
         "mdast-util-frontmatter": "^2.0.1",
         "mdast-util-gfm": "^3.1.0",
@@ -48,17 +46,15 @@
         "memoizee": "^0.4.17",
         "micromark-extension-frontmatter": "^2.0.0",
         "micromark-extension-gfm": "^3.0.0",
-        "motion": "^12.23.24",
+        "motion": "^12.23.12",
         "next": "15.4.0",
-        "next-themes": "^0.4.6",
+        "next-themes": "^0.2.1",
         "nuqs": "^2.2.3",
         "object-hash": "^3.0.0",
         "object-identity": "^0.1.2",
         "openapi-types": "^12.1.3",
         "p-map": "^7.0.3",
         "quick-lru": "^7.0.1",
-        "react": "catalog:",
-        "react-dom": "catalog:",
         "react-hotkeys-hook": "^4.4.1",
         "rehype-sanitize": "^6.0.0",
         "rehype-stringify": "^10.0.1",
@@ -74,15 +70,16 @@
         "unist-util-remove": "^4.0.0",
         "unist-util-visit": "^5.0.0",
         "url-join": "^5.0.0",
-        "usehooks-ts": "catalog:",
+        "usehooks-ts": "^3.1.0",
         "warn-once": "^0.1.1",
-        "zod": "^3",
-        "zustand": "^5.0.3"
+        "zustand": "^5.0.3",
+        "mcp-handler": "^1.0.2",
+        "@modelcontextprotocol/sdk": "^1.17.5",
+        "zod": "^3"
     },
     "devDependencies": {
         "@argos-ci/playwright": "^5.0.9",
         "@playwright/test": "^1.54.2",
-        "@scalar/api-client-react": "catalog:",
         "@tailwindcss/postcss": "^4.1.11",
         "@types/js-cookie": "^3.0.6",
         "@types/jsontoxml": "^1.0.5",
@@ -91,10 +88,9 @@
         "@types/node": "^20",
         "@types/object-hash": "^3.0.6",
         "@types/parse-cache-control": "^1.0.4",
-        "@types/react": "catalog:",
-        "@types/react-dom": "catalog:",
+        "@types/react": "18.3.13",
+        "@types/react-dom": "18.3.1",
         "@types/rison": "^0.0.9",
-        "bun-types": "catalog:",
         "deepmerge": "^4.3.1",
         "env-cmd": "^10.1.0",
         "jsonwebtoken": "^9.0.2",
@@ -102,9 +98,8 @@
         "stylelint": "^16.16.0",
         "tailwindcss": "^4.1.11",
         "ts-essentials": "^10.0.1",
-        "typescript": "catalog:",
-        "vercel": "^39.3.0",
-        "wrangler": "^4.43.0"
+        "typescript": "^5.5.3",
+        "vercel": "^39.3.0"
     },
     "scripts": {
         "generate": "./scripts/generate.sh",
@@ -125,9 +120,5 @@
     },
     "browserslist": [
         ">0.3%, chrome >= 64, edge >= 79, firefox >= 67, opera >= 51, safari >= 12 and not dead"
-    ],
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    }
+    ]
 }

packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/~gitbook/embed/demo/route.ts

@@ -16,107 +16,9 @@ export async function GET(
     return new Response(
         `
 <html>
-    <head>
-        <meta name="color-scheme" content="light dark">
-    </head>
-    <body>
-        <svg style="position: absolute; bottom: 6rem; right: 4rem;" width="719" height="644" viewBox="0 0 719 644" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect opacity="0.1" x="0.566895" y="208" width="529.567" height="228" rx="16" fill="#A4A7B0"/>
-            <g opacity="0.2">
-                <line x1="141.567" y1="472" x2="4.56689" y2="472" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="416.067" y1="472" x2="165.567" y2="472" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="526.567" y1="472" x2="440.067" y2="472" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="194.567" y1="496" x2="4.56689" y2="496" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="324.067" y1="496" x2="218.567" y2="496" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="473.567" y1="496" x2="348.067" y2="496" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="231.901" y1="520" x2="4.56689" y2="520" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="291.186" y1="520" x2="255.901" y2="520" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="442.058" y1="520" x2="315.186" y2="520" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="526.567" y1="520" x2="466.058" y2="520" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="141.567" y1="544" x2="4.56689" y2="544" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="348.191" y1="544" x2="165.567" y2="544" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="184.017" y1="592" x2="4.56689" y2="592" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="312.848" y1="592" x2="208.017" y2="592" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="386.574" y1="592" x2="336.848" y2="592" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="448.401" y1="592" x2="410.574" y2="592" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="126.633" y1="616" x2="4.56689" y2="616" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="401.133" y1="616" x2="150.633" y2="616" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="526.567" y1="616" x2="425.133" y2="616" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="179.457" y1="640" x2="4.56689" y2="640" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="329.569" y1="640" x2="203.457" y2="640" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="141.567" y1="4" x2="4.56689" y2="4" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="416.067" y1="4" x2="165.567" y2="4" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="526.567" y1="4" x2="440.067" y2="4" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="194.567" y1="28" x2="4.56689" y2="28" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="324.067" y1="28" x2="218.567" y2="28" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="473.567" y1="28" x2="348.067" y2="28" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="231.901" y1="52" x2="4.56689" y2="52" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="291.186" y1="52" x2="255.901" y2="52" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="442.058" y1="52" x2="315.186" y2="52" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="526.567" y1="52" x2="466.058" y2="52" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="141.567" y1="76" x2="4.56689" y2="76" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="348.191" y1="76" x2="165.567" y2="76" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="184.017" y1="124" x2="4.56689" y2="124" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="312.848" y1="124" x2="208.017" y2="124" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="386.574" y1="124" x2="336.848" y2="124" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="448.401" y1="124" x2="410.574" y2="124" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="126.633" y1="148" x2="4.56689" y2="148" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="401.133" y1="148" x2="150.633" y2="148" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="526.567" y1="148" x2="425.133" y2="148" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="179.457" y1="172" x2="4.56689" y2="172" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="329.569" y1="172" x2="203.457" y2="172" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-                <rect x="563" y="208" width="156" height="256" rx="16" fill="#A4A7B0" opacity="0.05"/>
-            <g opacity="0.2">
-                <line x1="682.214" y1="228" x2="583" y2="228" stroke="#656973" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="638.472" y1="252" x2="583" y2="252" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="681.396" y1="252" x2="654.472" y2="252" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="617.989" y1="276" x2="583" y2="276" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="699" y1="276" x2="633.989" y2="276" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="603.168" y1="300" x2="583" y2="300" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="657.873" y1="300" x2="619.168" y2="300" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="637" y1="324" x2="583" y2="324" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="688.836" y1="324" x2="653" y2="324" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="657.474" y1="372" x2="583" y2="372" stroke="#656973" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="633" y1="396" x2="583" y2="396" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="699" y1="396" x2="649" y2="396" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="585.416" y1="420" x2="583" y2="420" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="621.731" y1="420" x2="601.416" y2="420" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="699" y1="420" x2="637.731" y2="420" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-            <g opacity="0.2">
-                <line x1="619.471" y1="444" x2="583" y2="444" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-                <line x1="658.186" y1="444" x2="635.471" y2="444" stroke="#A4A7B0" stroke-width="8" stroke-linecap="round"/>
-            </g>
-        </svg>
-    </body>
+    <head></head>
+    <body></body>
     <script src="${context.linker.toAbsoluteURL(context.linker.toPathInSite('~gitbook/embed/script.js'))}"></script>
-    <script>
-    window.GitBook('configure', {
-        suggestions: [
-            'Help me get started',
-            'What can I ask you?',
-            'Show me tips and tricks',
-        ],
-    });
-        window.GitBook('open');
-    </script>
 </html>
 `,
         {

packages/gitbook/src/app/utils.ts

@@ -19,7 +19,7 @@ export type RouteLayoutParams = {
 };
 
 export type RouteParams = RouteLayoutParams & {
-    pagePath?: string[];
+    pagePath: string;
 };
 
 /**
@@ -80,10 +80,8 @@ export async function getDynamicSiteContext(params: RouteLayoutParams) {
  * Get the decoded page path from the params.
  */
 export function getPagePathFromParams(params: RouteParams) {
-    if (!params.pagePath || params.pagePath.length === 0) {
-        return '';
-    }
-    return params.pagePath.map((part) => decodeURIComponent(part)).join('/');
+    const decoded = decodeURIComponent(params.pagePath);
+    return decoded;
 }
 
 function getSiteURLFromParams(params: RouteLayoutParams) {

packages/gitbook/src/components/AI/useAI.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { CustomizationAIMode } from '@gitbook/api';
-import { Icon, type IconName } from '@gitbook/icons';
+import { Icon, type IconName, IconStyle } from '@gitbook/icons';
 import * as React from 'react';
 import type { ReactNode } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 import type { GitBookAssistant } from '@gitbook/browser-types';
 import { useAIChatController, useAIChatState } from '.';
-import { AIChatIcon, AISearchIcon, getAIChatName } from '../AIChat';
+import { AIChatIcon, getAIChatName } from '../AIChat';
 import { useIntegrationAssistants } from '../Integrations';
 import { useSearch } from '../Search/useSearch';
 
@@ -104,7 +104,16 @@ export function useAI(): AIContext {
         assistants.push({
             id: 'gitbook-ai-search',
             label: tString(language, 'ai_chat_context_badge'),
-            icon: <AISearchIcon />,
+            icon: (
+                <div className="relative">
+                    <Icon icon="search" className="size-4" />
+                    <Icon
+                        icon="sparkle"
+                        iconStyle={IconStyle.Solid}
+                        className="absolute top-[2.5px] left-[2.6px] size-2"
+                    />
+                </div>
+            ),
             open: (query?: string) => {
                 if (query) {
                     setSearchState((prev) =>

packages/gitbook/src/components/AI/useAIChat.tsx

@@ -21,6 +21,7 @@ export type AIChatMessage = {
     role: AIMessageRole;
     content: React.ReactNode;
     query?: string;
+    note?: string;
 };
 
 export type AIChatPendingTool = {
@@ -391,11 +392,11 @@ export function AIChatProvider(props: {
                 return {
                     ...state,
                     messages: [
-                        ...state.messages,
                         {
                             role: AIMessageRole.User,
                             content: input.message,
                             query: input.message,
+                            note: state.messages.length > 0 ? 'Starting a new chat' : undefined,
                         },
                     ],
                     query: input.message,

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -2,7 +2,6 @@
 
 import { t, tString, useLanguage } from '@/intl/client';
 import type { TranslationLanguage } from '@/intl/translations';
-import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -66,17 +65,16 @@ export function AIChat(props: { trademark: boolean }) {
         }
     }, [chat.opened, trackEvent]);
 
+    if (!chat.opened) {
+        return null;
+    }
+
     return (
         <div
             data-testid="ai-chat"
-            className={tcls(
-                'ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl scroll-mt-36 px-4 py-4 transition-[width,opacity,margin,display] transition-discrete duration-300 sm:px-6 lg:fixed lg:w-80 depth-flat:lg:p-0 lg:pr-4 lg:pl-0 xl:w-96',
-                chat.opened
-                    ? 'lg:starting:ml-0 lg:starting:w-0 lg:starting:opacity-0'
-                    : 'hidden lg:ml-0 lg:w-0! lg:opacity-0'
-            )}
+            className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enter-from-right lg:pr-4 lg:pl-0 xl:w-96"
         >
-            <EmbeddableFrame className="relative shrink-0 circular-corners:rounded-3xl rounded-corners:rounded-md border border-tint-subtle depth-subtle:shadow-lg shadow-tint transition-all duration-300 lg:w-76 depth-flat:lg:rounded-none depth-flat:lg:border-y-0 depth-flat:lg:border-r-0 xl:w-92">
+            <EmbeddableFrame className="relative circular-corners:rounded-3xl rounded-corners:rounded-md depth-subtle:shadow-lg shadow-tint ring-1 ring-tint-subtle">
                 <EmbeddableFrameHeader>
                     <AIChatDynamicIcon trademark={trademark} />
                     <EmbeddableFrameHeaderMain>

packages/gitbook/src/components/AIChat/AIChatButton.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useLanguage } from '@/intl/client';
 import { t } from '@/intl/translate';
+import { tcls } from '@/lib/tailwind';
 import type { Assistant } from '../AI';
 import { Button } from '../primitives';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
@@ -23,7 +24,7 @@ export function AIChatButton(props: {
             iconOnly={!showLabel}
             size="medium"
             variant="header"
-            className="h-9 px-2.5 @max-2xl:[&_.button-content]:hidden"
+            className={tcls('h-9 px-2.5')}
             label={
                 <div className="flex items-center gap-2">
                     {t(language, 'ai_chat_ask', assistant.label)}
@@ -37,7 +38,7 @@ export function AIChatButton(props: {
             }
             onClick={() => assistant.open()}
         >
-            {showLabel ? t(language, 'ask') : null}
+            {showLabel ? <span className="max-md:hidden">{t(language, 'ask')}</span> : null}
         </Button>
     );
 }

packages/gitbook/src/components/AIChat/AIChatIcon.tsx

@@ -1,5 +1,5 @@
 import { tcls } from '@/lib/tailwind';
-import { Icon, IconStyle } from '@gitbook/icons';
+import { Icon } from '@gitbook/icons';
 import type React from 'react';
 
 interface AIChatIconProps extends React.SVGProps<SVGSVGElement> {
@@ -9,18 +9,17 @@ interface AIChatIconProps extends React.SVGProps<SVGSVGElement> {
     trademark?: boolean;
 }
 
-export function AIChatIcon({
+export const AIChatIcon = ({
     className = 'size-4',
     size,
     trademark = true,
     state = 'default',
     ...props
-}: AIChatIconProps) {
+}: AIChatIconProps) => {
     if (!trademark) {
         return (
             <Icon
                 icon="sparkle"
-                {...props}
                 className={tcls(
                     className,
                     (state === 'thinking' || state === 'working') &&
@@ -164,36 +163,4 @@ export function AIChatIcon({
             </g>
         </svg>
     );
-}
-
-export function AISearchIcon({
-    className = 'size-4',
-    state = 'default',
-}: Pick<AIChatIconProps, 'className' | 'state'>) {
-    return (
-        <div
-            className={tcls(
-                'relative',
-                state === 'intro' && 'animate-[fadeIn_1s_both,orbit_1s_cubic-bezier(0.16,1,0.3,1)]',
-                state === 'thinking' || state === 'working'
-                    ? 'animate-[fadeIn_1s_both,orbit_1s_ease-out,orbit_2s_1s_infinite_forwards_linear]'
-                    : ''
-            )}
-        >
-            <Icon icon="search" className={className} />
-            <Icon
-                icon="sparkle"
-                iconStyle={IconStyle.Solid}
-                className={tcls(
-                    'absolute top-[15.7%] left-[15.6%] size-[50%]',
-                    state === 'thinking' || state === 'working'
-                        ? 'animate-[spin_2s_infinite_forwards_cubic-bezier(0.16,1,0.3,1)]'
-                        : '',
-                    state === 'intro'
-                        ? 'animate-[spin_2s_.5s_forwards_cubic-bezier(0.16,1,0.3,1)]'
-                        : ''
-                )}
-            />
-        </div>
-    );
-}
+};

packages/gitbook/src/components/AIChat/AIChatInput.tsx

@@ -140,7 +140,7 @@ export function AIChatInput(props: {
                             <span className="leading-none">
                                 {t(language, 'ai_chat_context_title')}
                             </span>
-                            <Icon icon="question-circle" className="size-3 shrink-0" />
+                            <Icon icon="question-circle" className="size-3" />
                         </div>
                     </HoverCardTrigger>
                 </HoverCardRoot>

packages/gitbook/src/components/AIChat/AIChatMessages.tsx

@@ -6,14 +6,13 @@ import type React from 'react';
 import type { AIChatController, AIChatState } from '../AI';
 import { AIChatToolConfirmations } from './AIChatToolConfirmations';
 import { AIResponseFeedback } from './AIResponseFeedback';
-import { AIChatFollowupSuggestions } from './AiChatFollowupSuggestions';
 
 export function AIChatMessages(props: {
     chat: AIChatState;
     chatController: AIChatController;
-    lastUserMessageRef?: React.RefObject<HTMLDivElement | null>;
+    lastUserMessageRef?: React.RefObject<HTMLDivElement>;
 }) {
-    const { chat, chatController, lastUserMessageRef } = props;
+    const { chat, lastUserMessageRef } = props;
 
     return (
         <>
@@ -24,76 +23,74 @@ export function AIChatMessages(props: {
                     index === chat.messages.map((m) => m.role).lastIndexOf(AIMessageRole.User);
 
                 return (
-                    <div
-                        ref={isLastUserMessage ? lastUserMessageRef : undefined}
-                        data-testid="ai-chat-message"
-                        className={tcls(
-                            message.content ? 'animate-fade-in-slow' : '',
-                            'shrink-0',
-                            'last:min-h-[calc(100%-5rem)]',
-                            'scroll-mt-36',
-                            'lg:scroll-mt-0',
-                            'flex flex-col gap-6',
-                            'break-words',
-                            'group/message',
-                            message.role === AIMessageRole.User
-                                ? 'max-w-[80%] self-end circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint px-4 py-2'
-                                : 'text-tint-strong'
-                        )}
-                        style={{
-                            animationDelay: `${Math.min(index * 0.05, 0.5)}s`,
-                        }}
-                        key={index}
-                    >
-                        {message.content ? message.content : null}
-
-                        {isLastMessage && chat.loading ? (
-                            <div className="flex w-full animate-fade-in-slow flex-col gap-2">
-                                {!message.content ? <HoldMessage /> : null}
-                                <LoadingSkeleton />
+                    <>
+                        {message.note ? (
+                            <div
+                                key={`${index}-note`}
+                                className="self-center text-tint-subtle text-xs"
+                            >
+                                {message.note}
                             </div>
                         ) : null}
+                        <div
+                            ref={isLastUserMessage ? lastUserMessageRef : undefined}
+                            data-testid="ai-chat-message"
+                            className={tcls(
+                                message.content ? 'animate-fade-in-slow' : '',
+                                'shrink-0',
+                                'last:min-h-[calc(100%-5rem)]',
+                                'scroll-mt-36',
+                                'lg:scroll-mt-0',
+                                'flex flex-col gap-6',
+                                'break-words',
+                                'group/message',
+                                message.role === AIMessageRole.User
+                                    ? 'max-w-[80%] self-end circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint px-4 py-2'
+                                    : 'text-tint-strong'
+                            )}
+                            style={{
+                                animationDelay: `${Math.min(index * 0.05, 0.5)}s`,
+                            }}
+                            key={index}
+                        >
+                            {message.content ? message.content : null}
 
-                        {isLastMessage ? (
-                            <>
-                                {!chat.loading &&
-                                !chat.error &&
-                                chat.query &&
-                                chat.responseId &&
-                                chat.pendingTools.length === 0 ? (
-                                    <AIResponseFeedback
-                                        responseId={chat.responseId}
-                                        query={chat.query}
-                                        className="-ml-1 -mt-4"
-                                    />
-                                ) : null}
-                                <AIChatToolConfirmations chat={chat} />
-                                <AIChatFollowupSuggestions
-                                    chat={chat}
-                                    chatController={chatController}
-                                />
-                            </>
-                        ) : null}
-                    </div>
+                            {isLastMessage && chat.loading ? (
+                                <div className="flex w-full animate-fade-in-slow flex-col gap-2">
+                                    {!message.content ? <HoldMessage /> : null}
+                                    <LoadingSkeleton />
+                                </div>
+                            ) : null}
+
+                            {isLastMessage ? (
+                                <>
+                                    {!chat.loading &&
+                                    !chat.error &&
+                                    chat.query &&
+                                    chat.responseId &&
+                                    chat.pendingTools.length === 0 ? (
+                                        <AIResponseFeedback
+                                            responseId={chat.responseId}
+                                            query={chat.query}
+                                            className="-ml-1 -mt-4"
+                                        />
+                                    ) : null}
+                                    <AIChatToolConfirmations chat={chat} />
+                                </>
+                            ) : null}
+                        </div>
+                    </>
                 );
             })}
         </>
     );
 }
 
-export function HoldMessage({
-    breakLines = false,
-    className = '',
-}: { breakLines?: boolean; className?: string }) {
+function HoldMessage() {
     const language = useLanguage();
 
     return (
-        <div
-            className={tcls(
-                'animate-[heightIn_500ms_4500ms_ease_both] overflow-hidden py-2 text-tint-subtle',
-                className
-            )}
-        >
+        <div className="animate-[heightIn_500ms_4500ms_ease_both] py-2 text-tint-subtle">
             {tString(language, 'ai_chat_hold_message_1')
                 .split(' ')
                 .map((word, index) => (
@@ -107,7 +104,6 @@ export function HoldMessage({
                         {word}{' '}
                     </span>
                 ))}
-            {breakLines ? <br /> : null}
             {tString(language, 'ai_chat_hold_message_2')
                 .split(' ')
                 .map((word, index) => (

packages/gitbook/src/components/Adaptive/AdaptiveVisitorContextProvider.tsx

@@ -4,14 +4,19 @@ import type { GitBookSiteContext } from '@/lib/context';
 import { OpenAPIPrefillContextProvider } from '@gitbook/react-openapi';
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import type { AdaptiveVisitorClaims } from './types';
+
+export type AdaptiveVisitorClaimsData = {
+    visitor: {
+        claims: Record<string, unknown> & { unsigned: Record<string, unknown> };
+    };
+};
 
 /**
  * In-memory cache of visitor claim readers keyed by contextId.
  */
 const adaptiveVisitorReaderCache = new Map<
     string,
-    ReturnType<typeof createResourceReader<AdaptiveVisitorClaims | null>>
+    ReturnType<typeof createResourceReader<AdaptiveVisitorClaimsData | null>>
 >();
 
 function createResourceReader<T>(promise: Promise<T>) {
@@ -47,7 +52,7 @@ function getAdaptiveVisitorClaimsReader(url: string, contextId: string) {
                 if (!res.ok) {
                     return null;
                 }
-                return await res.json<AdaptiveVisitorClaims>();
+                return await res.json<AdaptiveVisitorClaimsData>();
             } catch {
                 return null;
             }
@@ -59,7 +64,7 @@ function getAdaptiveVisitorClaimsReader(url: string, contextId: string) {
     return reader;
 }
 
-export type AdaptiveVisitorContextValue = () => AdaptiveVisitorClaims | null;
+export type AdaptiveVisitorContextValue = () => AdaptiveVisitorClaimsData | null;
 
 const AdaptiveVisitorContext = createContext<AdaptiveVisitorContextValue>(() => null);
 

packages/gitbook/src/components/Adaptive/index.ts

@@ -1,3 +1 @@
-export * from './types';
-export * from './utils';
 export * from './AdaptiveVisitorContextProvider';

packages/gitbook/src/components/Adaptive/types.ts

@@ -1,9 +0,0 @@
-export type AdaptiveVisitorClaimsData = Record<string, unknown> & {
-    unsigned: Record<string, unknown>;
-};
-
-export type AdaptiveVisitorClaims = {
-    visitor: {
-        claims: AdaptiveVisitorClaimsData;
-    };
-};

packages/gitbook/src/components/Adaptive/utils.ts

@@ -1,28 +0,0 @@
-import type { Variables } from '@gitbook/api';
-import type { AdaptiveVisitorClaims } from './types';
-
-/**
- * Return an evaluation context to evaluate expressions.
- */
-export function createExpressionEvaluationContext(args: {
-    visitorClaims: AdaptiveVisitorClaims | null;
-    variables: {
-        space?: Variables;
-        page?: Variables;
-    };
-}) {
-    const { visitorClaims, variables } = args;
-    return {
-        ...(visitorClaims ? visitorClaims : {}),
-        space: {
-            vars: variables.space ?? {},
-        },
-        ...(variables.page
-            ? {
-                  page: {
-                      vars: variables.page ?? {},
-                  },
-              }
-            : {}),
-    };
-}

packages/gitbook/src/components/AdminToolbar/AdminToolbarClient.tsx

@@ -5,7 +5,6 @@ import { useCheckForContentUpdate } from '../AutoRefreshContent';
 import { useVisitorSession } from '../Insights';
 import { useCurrentPagePath } from '../hooks';
 import { DateRelative } from '../primitives';
-import { HideToolbarButton } from './HideToolbarButton';
 import { IframeWrapper } from './IframeWrapper';
 import { RefreshContentButton } from './RefreshContentButton';
 import {
@@ -18,108 +17,48 @@ import {
     ToolbarSubtitle,
     ToolbarTitle,
 } from './Toolbar';
-import {
-    type ToolbarControlsContextValue,
-    ToolbarControlsProvider,
-} from './ToolbarControlsContext';
-import type { AdminToolbarClientProps, AdminToolbarContext } from './types';
-import { useToolbarVisibility } from './utils';
+import type { AdminToolbarClientProps } from './types';
 
 export function AdminToolbarClient(props: AdminToolbarClientProps) {
-    const { context, onPersistentClose, onSessionClose, onToggleMinify } = props;
-    const {
-        minified,
-        setMinified,
-        shouldAutoExpand,
-        hidden,
-        minimize,
-        closeSession,
-        closePersistent,
-    } = useToolbarVisibility({
-        onPersistentClose,
-        onSessionClose,
-        onToggleMinify,
-    });
-
+    const { context } = props;
     const visitorSession = useVisitorSession();
 
-    const toolbarControls: ToolbarControlsContextValue = {
-        minimize,
-        closeSession,
-        closePersistent,
-        shouldAutoExpand,
-    };
-
-    if (hidden) {
-        return null;
-    }
-
     // If there is a change request, show the change request toolbar
     if (context.changeRequest) {
         return (
-            <ToolbarControlsWrapper value={toolbarControls}>
-                <ChangeRequestToolbar
-                    context={context}
-                    minified={minified}
-                    onMinifiedChange={setMinified}
-                />
-            </ToolbarControlsWrapper>
+            <IframeWrapper>
+                <MotionConfig reducedMotion="user">
+                    <ChangeRequestToolbar context={context} />
+                </MotionConfig>
+            </IframeWrapper>
         );
     }
 
     // If the revision is not the current revision, the user is looking at a previous version of the site, so show the revision toolbar
     if (context.revisionId !== context.space.revision) {
         return (
-            <ToolbarControlsWrapper value={toolbarControls}>
-                <RevisionToolbar
-                    context={context}
-                    minified={minified}
-                    onMinifiedChange={setMinified}
-                />
-            </ToolbarControlsWrapper>
+            <IframeWrapper>
+                <MotionConfig reducedMotion="user">
+                    <RevisionToolbar context={context} />
+                </MotionConfig>
+            </IframeWrapper>
         );
     }
 
     // If the user is authenticated and part of the organization owning this site, show the authenticated user toolbar
     if (visitorSession?.organizationId === context.organizationId) {
         return (
-            <ToolbarControlsWrapper value={toolbarControls}>
-                <AuthenticatedUserToolbar
-                    context={context}
-                    minified={minified}
-                    onMinifiedChange={setMinified}
-                />
-            </ToolbarControlsWrapper>
+            <IframeWrapper>
+                <MotionConfig reducedMotion="user">
+                    <AuthenticatedUserToolbar context={context} />
+                </MotionConfig>
+            </IframeWrapper>
         );
     }
-
-    return null;
 }
 
-/**
- * Reusable wrapper that provides tooling and containers that are used by all types of toolbar views.
- */
-export function ToolbarControlsWrapper(
-    props: React.PropsWithChildren<{ value: ToolbarControlsContextValue | null }>
-) {
-    const { children, value } = props;
-    return (
-        <ToolbarControlsProvider value={value}>
-            <IframeWrapper>
-                <MotionConfig reducedMotion="user">{children}</MotionConfig>
-            </IframeWrapper>
-        </ToolbarControlsProvider>
-    );
-}
-
-interface ToolbarViewProps {
-    context: AdminToolbarContext;
-    minified: boolean;
-    onMinifiedChange: (value: boolean) => void;
-}
-
-function ChangeRequestToolbar(props: ToolbarViewProps) {
-    const { context, minified, onMinifiedChange } = props;
+function ChangeRequestToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
     const { changeRequest, site } = context;
     if (!changeRequest) {
         throw new Error('Change request is not set');
@@ -132,11 +71,11 @@ function ChangeRequestToolbar(props: ToolbarViewProps) {
     });
 
     return (
-        <Toolbar minified={minified} onMinifiedChange={onMinifiedChange} label="Site preview">
+        <Toolbar>
             <ToolbarBody>
                 <ToolbarTitle
-                    prefix={`Change #${changeRequest.number}:`}
-                    suffix={`${changeRequest.subject || 'Untitled'}`}
+                    prefix="Change request"
+                    suffix={`#${changeRequest.number} ${changeRequest.subject || 'Untitled'}`}
                 />
                 <ToolbarSubtitle
                     subtitle={
@@ -149,13 +88,9 @@ function ChangeRequestToolbar(props: ToolbarViewProps) {
 
             <ToolbarSeparator />
 
-            <ToolbarActions>
+            <ToolbarButtonGroup>
                 {/* Refresh to retrieve latest changes */}
                 {updated ? <RefreshContentButton refreshForUpdates={refreshForUpdates} /> : null}
-
-                {/* Edit in GitBook */}
-                <EditPageButton href={changeRequest.urls.app} siteId={site.id} />
-
                 {/* Comment in app */}
                 <ToolbarButton
                     title="Comment in a GitBook"
@@ -167,10 +102,10 @@ function ChangeRequestToolbar(props: ToolbarViewProps) {
                     icon="comment"
                 />
 
-                {/* Open published/live site */}
+                {/* Open production site */}
                 {site.urls.published ? (
                     <ToolbarButton
-                        title="Open live site"
+                        title="Open production site"
                         href={getToolbarHref({
                             href: site.urls.published,
                             siteId: site.id,
@@ -190,13 +125,16 @@ function ChangeRequestToolbar(props: ToolbarViewProps) {
                     })}
                     icon="code-pull-request"
                 />
-            </ToolbarActions>
+
+                {/* Edit in GitBook */}
+                <EditPageButton href={changeRequest.urls.app} siteId={site.id} />
+            </ToolbarButtonGroup>
         </Toolbar>
     );
 }
 
-function RevisionToolbar(props: ToolbarViewProps) {
-    const { context, minified, onMinifiedChange } = props;
+function RevisionToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
     const { revision, site } = context;
     if (!revision) {
         throw new Error('Revision is not set');
@@ -207,7 +145,7 @@ function RevisionToolbar(props: ToolbarViewProps) {
     const gitProvider = isGitHub ? 'GitHub' : 'GitLab';
 
     return (
-        <Toolbar minified={minified} onMinifiedChange={onMinifiedChange} label="Site preview">
+        <Toolbar>
             <ToolbarBody>
                 <ToolbarTitle prefix="Site version" suffix={context.site.title} />
                 <ToolbarSubtitle
@@ -219,7 +157,7 @@ function RevisionToolbar(props: ToolbarViewProps) {
                 />
             </ToolbarBody>
             <ToolbarSeparator />
-            <ToolbarActions>
+            <ToolbarButtonGroup>
                 {/* Open commit in Git client */}
                 <ToolbarButton
                     title={
@@ -249,7 +187,7 @@ function RevisionToolbar(props: ToolbarViewProps) {
                 />
                 {site.urls.published ? (
                     <ToolbarButton
-                        title="Open live site"
+                        title="Open production site"
                         href={getToolbarHref({
                             href: site.urls.published,
                             siteId: site.id,
@@ -267,26 +205,22 @@ function RevisionToolbar(props: ToolbarViewProps) {
                     })}
                     icon="code-commit"
                 />
-            </ToolbarActions>
+            </ToolbarButtonGroup>
         </Toolbar>
     );
 }
 
-function AuthenticatedUserToolbar(props: ToolbarViewProps) {
-    const { context, minified, onMinifiedChange } = props;
+function AuthenticatedUserToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
     const { revision, space, site } = context;
     const { refreshForUpdates, updated } = useCheckForContentUpdate({
         revisionId: space.revision,
     });
 
     return (
-        <Toolbar
-            minified={minified}
-            onMinifiedChange={onMinifiedChange}
-            label="Only visible to your GitBook organization"
-        >
+        <Toolbar>
             <ToolbarBody>
-                <ToolbarTitle suffix={context.site.title} />
+                <ToolbarTitle prefix="Site" suffix={context.site.title} />
                 <ToolbarSubtitle
                     subtitle={
                         <>
@@ -296,14 +230,9 @@ function AuthenticatedUserToolbar(props: ToolbarViewProps) {
                 />
             </ToolbarBody>
             <ToolbarSeparator />
-            <ToolbarActions>
+            <ToolbarButtonGroup>
                 {/* Refresh to retrieve latest changes */}
                 {updated ? <RefreshContentButton refreshForUpdates={refreshForUpdates} /> : null}
-
-                {/* Edit in GitBook */}
-                <EditPageButton href={space.urls.app} siteId={site.id} />
-
-                {/* Open site in GitBook */}
                 <ToolbarButton
                     title="Open site in GitBook"
                     href={getToolbarHref({
@@ -311,10 +240,8 @@ function AuthenticatedUserToolbar(props: ToolbarViewProps) {
                         siteId: site.id,
                         buttonId: 'site',
                     })}
-                    icon="gears"
+                    icon="gear"
                 />
-
-                {/* Customize in GitBook */}
                 <ToolbarButton
                     title="Customize in GitBook"
                     href={getToolbarHref({
@@ -324,8 +251,6 @@ function AuthenticatedUserToolbar(props: ToolbarViewProps) {
                     })}
                     icon="palette"
                 />
-
-                {/* Open insights in GitBook */}
                 <ToolbarButton
                     title="Open insights in GitBook"
                     href={getToolbarHref({
@@ -335,22 +260,12 @@ function AuthenticatedUserToolbar(props: ToolbarViewProps) {
                     })}
                     icon="chart-simple"
                 />
-            </ToolbarActions>
+                <EditPageButton href={space.urls.app} siteId={site.id} />
+            </ToolbarButtonGroup>
         </Toolbar>
     );
 }
 
-function ToolbarActions(props: { children: React.ReactNode }) {
-    const { children } = props;
-
-    return (
-        <ToolbarButtonGroup>
-            {children}
-            <HideToolbarButton />
-        </ToolbarButtonGroup>
-    );
-}
-
 function EditPageButton(props: {
     href: string;
     siteId: string;

packages/gitbook/src/components/AdminToolbar/AnimatedLogo.module.css

@@ -3,23 +3,18 @@
   --seg-A-color: #2782c4;
   --seg-B-color: #43b7f2;
   --seg-C-color: #8be2ff;
-  --trace-color: #46474c;
-
 
   --T: 2s;
   shape-rendering: geometricPrecision;
   vector-effect: non-scaling-stroke;
 }
 
-.static .trace {
-  animation: none;
-  fill: var(--logo-fill);
-  stroke: none;
-}
-
-.static .seg {
-  animation: none;
-  opacity: 0;
+:global(html.dark) .svgLogo {
+  --logo-fill: var(--color-neutral-800);
+  --seg-A-color: #19537d;
+  --seg-B-color: #2782c4;
+  --seg-C-color: #43b7f2;
+  --trace-color: #46474c;
 }
 
 /* Base segment animation */
@@ -182,4 +177,4 @@
     fill: var(--logo-fill);
     stroke:none;
   }
-}
+}

packages/gitbook/src/components/AdminToolbar/AnimatedLogo.tsx

@@ -2,16 +2,10 @@ import { tcls } from '@/lib/tailwind';
 import type React from 'react';
 import styles from './AnimatedLogo.module.css';
 
-interface AnimatedLogoProps {
-    shouldAnimate?: boolean;
-}
-
-export const AnimatedLogo: React.FC<AnimatedLogoProps> = (props) => {
-    const { shouldAnimate = true } = props;
-
+export const AnimatedLogo: React.FC = () => {
     return (
         <svg
-            className={tcls(styles.svgLogo, shouldAnimate ? undefined : styles.static)}
+            className={styles.svgLogo}
             width="28"
             height="28"
             viewBox="0 0 28 28"

packages/gitbook/src/components/AdminToolbar/HideToolbarButton.tsx

@@ -1,233 +0,0 @@
-'use client';
-import { tcls } from '@/lib/tailwind';
-import { Icon, type IconName, IconStyle } from '@gitbook/icons';
-import { motion } from 'motion/react';
-import React, { useRef } from 'react';
-import { useOnClickOutside } from 'usehooks-ts';
-import { ToolbarButton, type ToolbarButtonProps } from './Toolbar';
-import styles from './Toolbar.module.css';
-import { useToolbarControls } from './ToolbarControlsContext';
-
-const ARC_DURATION_SECONDS = 0.4;
-const ARC_STAGGER_MS = 80;
-const BASE_ROTATION_DEG = 95;
-const ROTATION_STEP_DEG = 18;
-
-interface HideToolbarButtonProps {
-    motionValues?: ToolbarButtonProps['motionValues'];
-}
-
-/**
- * Hide menu trigger. Expands a macOS Dock-like submenu with 3 labeled actions.
- */
-export function HideToolbarButton(props: HideToolbarButtonProps) {
-    const { motionValues } = props;
-    const [open, setOpen] = React.useState(false);
-    const controls = useToolbarControls();
-
-    const ref = useRef<HTMLDivElement>(null);
-    const buttonRef = useRef<HTMLDivElement>(null);
-
-    const handleClickOutsideArcMenu = (event: Event) => {
-        // Don't close the arc if we are clicking on the button itself
-        if (buttonRef.current?.contains(event.target as Node)) {
-            return;
-        }
-        setOpen(false);
-    };
-    // @ts-expect-error wrong type for ref
-    useOnClickOutside(ref, handleClickOutsideArcMenu);
-
-    // Close arc menu on scroll
-    React.useEffect(() => {
-        if (!open) return;
-
-        const handleScroll = () => setOpen(false);
-        window.addEventListener('scroll', handleScroll, { passive: true });
-
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [open]);
-
-    const items = [
-        controls?.minimize
-            ? {
-                  id: 'minimize',
-                  icon: 'minus',
-                  label: 'Minimize',
-                  onClick: controls.minimize,
-              }
-            : null,
-        controls?.closeSession
-            ? {
-                  id: 'session-close',
-                  icon: 'xmark',
-                  label: 'Close for one session',
-                  onClick: controls.closeSession,
-              }
-            : null,
-        controls?.closePersistent
-            ? {
-                  id: 'persistent-close',
-                  icon: 'ban',
-                  label: "Don't show again",
-                  onClick: controls.closePersistent,
-              }
-            : null,
-    ].filter(Boolean) as Array<ArcMenuItem>;
-
-    const sharedMotionStyle = motionValues
-        ? {
-              x: motionValues.x,
-          }
-        : undefined;
-
-    return (
-        <ToolbarButton
-            ref={buttonRef}
-            title={open ? 'Hide options' : 'Hide toolbar'}
-            onClick={() => {
-                setOpen((v) => !v);
-            }}
-            motionValues={motionValues}
-            icon="eye-slash"
-        >
-            {/* Expanding arc menu */}
-            {open && (
-                <motion.div
-                    className={tcls('pointer-events-none absolute inset-0', styles.arcMenu)}
-                    style={sharedMotionStyle as React.CSSProperties | undefined}
-                >
-                    <div
-                        className={tcls(
-                            'pointer-events-none absolute left-0 overflow-visible',
-                            styles.arcMenuPath
-                        )}
-                        ref={ref}
-                    >
-                        {items.map((item, index) => (
-                            <ArcToolbarButton
-                                index={index}
-                                staggerIndex={items.length - 1 - index}
-                                key={item.icon}
-                                {...item}
-                                onClick={() => {
-                                    setOpen(false);
-                                    item.onClick?.();
-                                }}
-                            />
-                        ))}
-                    </div>
-                </motion.div>
-            )}
-        </ToolbarButton>
-    );
-}
-
-type ArcMenuItem = {
-    id: string;
-    icon: IconName;
-    label: string;
-    description: string;
-    onClick?: () => void;
-};
-
-type ArcToolbarButtonProps = Pick<ArcMenuItem, 'label' | 'icon' | 'onClick'> & {
-    index: number;
-    staggerIndex?: number;
-    disabled?: boolean;
-    className?: string;
-    iconClassName?: string;
-};
-
-export function ArcToolbarButton(props: ArcToolbarButtonProps) {
-    const {
-        index,
-        staggerIndex = index,
-        label,
-        disabled,
-        className,
-        onClick = () => {},
-        icon,
-        iconClassName,
-    } = props;
-
-    const targetOffset = `calc(var(--start-distance) + ${index} * var(--spread-distance))`;
-
-    // Calculate rotation based on position along the arc
-    const calculateRotation = () => {
-        return BASE_ROTATION_DEG - index * ROTATION_STEP_DEG;
-    };
-
-    const itemRotation = calculateRotation();
-
-    return (
-        <div className="pointer-events-none">
-            <button
-                type="button"
-                onClick={() => {
-                    onClick();
-                }}
-                style={
-                    {
-                        '--target-offset-distance': targetOffset,
-                        '--arc-duration': `${ARC_DURATION_SECONDS}s`,
-                        '--arc-delay': `${(staggerIndex ?? 0) * ARC_STAGGER_MS}ms`,
-                        '--rotation-offset': `${itemRotation}deg`,
-                        offsetPath: 'border-box',
-                        offsetDistance: targetOffset,
-                        offsetAnchor: '0% 40%',
-                        offsetRotate: `auto ${itemRotation}deg`,
-                    } as React.CSSProperties
-                }
-                className={tcls(
-                    'group',
-                    'absolute',
-                    'top-0',
-                    'left-0',
-                    'w-40',
-                    'opacity-0',
-                    'pointer-events-auto',
-                    'flex',
-                    'items-center',
-                    'gap-2',
-                    styles.arcMenuItem,
-                    className
-                )}
-            >
-                <div
-                    className={tcls(
-                        'flex shrink-0 items-center justify-center gap-1',
-                        'h-8 w-8 rounded-full border',
-                        'truncate text-sm',
-                        'cursor-pointer transition-colors',
-                        'group-hover:-rotate-5 group-hover:scale-105',
-                        disabled ? 'cursor-not-allowed opacity-50' : '',
-                        'text-tint-1 dark:text-tint-12',
-                        'bg-[linear-gradient(110deg,rgba(51,53,57,1)_0%,rgba(50,52,56,1)_100%)]',
-                        'dark:[background:linear-gradient(110deg,rgba(255,255,255,1)_0%,rgba(240,246,248,1)_100%)]',
-                        'border border-solid dark:border-[rgba(256,_256,_256,_0.06)]'
-                    )}
-                    style={{
-                        background: 'linear-gradient(rgb(51, 53, 57), rgb(50, 52, 56))',
-                    }}
-                >
-                    <Icon
-                        icon={icon as IconName}
-                        iconStyle={IconStyle.Solid}
-                        className={tcls('size-4 shrink-0 group-hover:scale-110', iconClassName)}
-                    />
-                </div>
-                <span
-                    className={tcls(
-                        'whitespace-nowrap rounded-lg px-3 py-1 font-normal text-sm transition-transform',
-                        'group-hover:rotate-2 group-hover:scale-105',
-                        'text-neutral-1 dark:text-neutral-12',
-                        'bg-[linear-gradient(110deg,rgba(51,53,57,1)_0%,rgba(50,52,56,1)_100%)]'
-                    )}
-                >
-                    {label}
-                </span>
-            </button>
-        </div>
-    );
-}

packages/gitbook/src/components/AdminToolbar/Toolbar.module.css

@@ -1,40 +0,0 @@
-.arcMenu {
-    --arc-width: 505px;
-    --arc-height: 400px;
-    --arc-radius: 34%;
-    --start-distance: -240px;
-    --spread-distance: 45px;
-}
-
-.arcMenuPath {
-    bottom: calc(var(--arc-height) / -2);
-    width: var(--arc-width);
-    height: var(--arc-height);
-    border-radius: var(--arc-radius);
-    transform: translate(0%, 0%);
-}
-
-.arcMenuItem {
-    animation-name: hide-toolbar-arc-enter;
-    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
-    animation-fill-mode: forwards;
-    animation-duration: var(--arc-duration, 0.4s);
-    animation-delay: var(--arc-delay, 0s);
-    transform-origin: center left;
-    offset-path: border-box;
-    offset-anchor: 0% 0%;
-    offset-rotate: auto var(--rotation-offset, 0deg);
-}
-
-@keyframes hide-toolbar-arc-enter {
-    from {
-        offset-distance: var(--start-distance);
-        transform: scale(0.5);
-        opacity: 0;
-    }
-    to {
-        offset-distance: var(--target-offset-distance);
-        transform: scale(1);
-        opacity: 1;
-    }
-}

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

@@ -1,39 +1,21 @@
 'use client';
-import {
-    AnimatePresence,
-    type MotionValue,
-    motion,
-    useReducedMotion,
-    useSpring,
-} from 'motion/react';
-import React, { isValidElement } from 'react';
+import { AnimatePresence, type MotionValue, motion, useReducedMotion } from 'motion/react';
+import React from 'react';
 import { AnimatedLogo } from './AnimatedLogo';
-import { useToolbarControls } from './ToolbarControlsContext';
 
 import { tcls } from '@/lib/tailwind';
-import { Icon, type IconName, IconStyle } from '@gitbook/icons';
+import { Icon, type IconName } from '@gitbook/icons';
 import { Tooltip } from '../primitives';
-import { getCopyVariants, toolbarEasings } from './transitions';
+import { getCopyVariants, minifyButtonAnimation, toolbarEasings } from './transitions';
 import { useMagnificationEffect } from './useMagnificationEffect';
 
 const DURATION_LOGO_APPEARANCE = 2000;
 const DELAY_BETWEEN_LOGO_AND_CONTENT = 100;
 
-interface ToolbarProps {
-    label: React.ReactNode;
-    children: React.ReactNode;
-    minified: boolean;
-    onMinifiedChange: (value: boolean) => void;
-}
-
-export function Toolbar(props: ToolbarProps) {
-    const { children, label, minified, onMinifiedChange } = props;
-    const controls = useToolbarControls();
+export function Toolbar(props: { children: React.ReactNode }) {
+    const [minified, setMinified] = React.useState(true);
+    const [showToolbarControls, setShowToolbarControls] = React.useState(false);
     const [isReady, setIsReady] = React.useState(false);
-    const autoExpandTriggeredRef = React.useRef(false);
-
-    const shouldAutoExpand = Boolean(controls?.shouldAutoExpand);
-    const [shouldAnimateLogo, setShouldAnimateLogo] = React.useState(shouldAutoExpand);
 
     // Wait for page to be ready, then show the toolbar
     React.useEffect(() => {
@@ -49,41 +31,16 @@ export function Toolbar(props: ToolbarProps) {
         }
     }, []);
 
-    // After toolbar appears, wait, then show the full content
+    // After toolbar appears, wait then show the full content
     React.useEffect(() => {
-        if (!isReady || autoExpandTriggeredRef.current) {
-            return;
+        if (isReady) {
+            const expandAfterTimeout = setTimeout(() => {
+                setMinified(false);
+            }, DURATION_LOGO_APPEARANCE + DELAY_BETWEEN_LOGO_AND_CONTENT);
+
+            return () => clearTimeout(expandAfterTimeout);
         }
-
-        if (!shouldAutoExpand) {
-            // When we already know the toolbar should stay expanded (e.g. the user previously
-            // opened it this session) we short-circuit the auto-expand animation and immediately
-            // render the expanded state without replaying the logo animation.
-            autoExpandTriggeredRef.current = true;
-            setShouldAnimateLogo(false);
-            return;
-        }
-
-        autoExpandTriggeredRef.current = true;
-
-        // On a fresh session we let the toolbar appear in its compact form, play the logo
-        // animation, and only then expand the toolbar. The timeout mirrors the duration of the
-        // logo animation so both transitions feel connected.
-        const expandAfterTimeout = setTimeout(() => {
-            setShouldAnimateLogo(false);
-            onMinifiedChange(false);
-        }, DURATION_LOGO_APPEARANCE + DELAY_BETWEEN_LOGO_AND_CONTENT);
-
-        return () => clearTimeout(expandAfterTimeout);
-    }, [isReady, onMinifiedChange, shouldAutoExpand]);
-
-    React.useEffect(() => {
-        if (!minified) {
-            // Any manual expansion should stop the logo animation so the icon stays in its
-            // “settled” state once the toolbar is open.
-            setShouldAnimateLogo(false);
-        }
-    }, [minified]);
+    }, [isReady]);
 
     // Don't render anything until page is ready
     if (!isReady) {
@@ -91,47 +48,61 @@ export function Toolbar(props: ToolbarProps) {
     }
 
     return (
-        <Tooltip label={label}>
-            <motion.div className="-translate-x-1/2 fixed bottom-5 left-1/2 z-40 w-auto max-w-xl transform px-4">
-                <AnimatePresence mode="wait">
-                    <motion.div
-                        onClick={() => {
-                            if (minified) {
-                                setShouldAnimateLogo(false);
-                                onMinifiedChange(false);
-                            }
-                        }}
-                        layout
-                        transition={toolbarEasings.spring}
-                        className={tcls(
-                            minified ? 'cursor-pointer px-2' : 'pr-2 pl-3.5',
-                            'flex',
-                            'items-center',
-                            'justify-center',
-                            'min-h-11',
-                            'min-w-12',
-                            'h-12',
-                            'py-2',
-                            'backdrop-blur-sm',
-                            'origin-center',
-                            'border-[0.5px] border-neutral-5 border-solid dark:border-neutral-8',
-                            'bg-[linear-gradient(45deg,rgba(39,39,39,0.8)_100%,rgba(39,39,39,0.4)_80%)]',
-                            'dark:bg-[linear-gradient(45deg,rgba(39,39,39,0.5)_100%,rgba(39,39,39,0.3)_80%)]'
-                        )}
-                        style={{
-                            borderRadius: '100px', // This is set on `style` so Framer Motion can correct for distortions
-                        }}
-                    >
-                        {/* Logo with stroke segments animation in blue-tints */}
-                        <motion.div layout>
-                            <AnimatedLogo shouldAnimate={shouldAnimateLogo} />
-                        </motion.div>
-
-                        {!minified ? children : null}
+        <motion.div
+            onMouseEnter={() => setShowToolbarControls(true)}
+            onMouseLeave={() => setShowToolbarControls(false)}
+            className="-translate-x-1/2 fixed bottom-5 left-1/2 z-40 w-auto max-w-xl transform px-4"
+        >
+            <AnimatePresence mode="wait">
+                <motion.div
+                    onClick={() => {
+                        if (minified) {
+                            setMinified((prev) => !prev);
+                        }
+                    }}
+                    layout
+                    transition={toolbarEasings.spring}
+                    className={tcls(
+                        minified ? 'cursor-pointer px-2' : 'pr-2 pl-3.5',
+                        'flex',
+                        'items-center',
+                        'justify-center',
+                        'min-h-11',
+                        'min-w-12',
+                        'h-12',
+                        'py-2',
+                        'border-tint-1/3',
+                        'backdrop-blur-sm',
+                        'origin-center',
+                        'bg-[linear-gradient(110deg,rgba(20,23,28,0.90)_0%,rgba(20,23,28,0.80)_100%)]',
+                        'dark:bg-[linear-gradient(110deg,rgba(256,256,256,0.90)_0%,rgba(256,256,256,0.80)_100%)]'
+                    )}
+                    initial={{
+                        scale: 1,
+                        opacity: 1,
+                    }}
+                    animate={{
+                        scale: 1,
+                        opacity: 1,
+                        boxShadow: minified
+                            ? '0 4px 40px 8px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .4), inset 0 .5px 0 0 hsla(0, 0%, 100%, .15)'
+                            : '0 4px 40px 8px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(0, 0, 0, .8), inset 0 .5px 0 0 hsla(0, 0%, 100%, .3)',
+                    }}
+                    style={{
+                        borderRadius: '100px', // This is set on `style` so Framer Motion can correct for distortions
+                    }}
+                >
+                    {/* Logo with stroke segments animation in blue-tints */}
+                    <motion.div layout>
+                        <AnimatedLogo />
                     </motion.div>
-                </AnimatePresence>
-            </motion.div>
-        </Tooltip>
+
+                    {!minified ? props.children : null}
+
+                    {!minified && showToolbarControls && <MinifyButton setMinified={setMinified} />}
+                </motion.div>
+            </AnimatePresence>
+        </motion.div>
     );
 }
 
@@ -158,15 +129,12 @@ export function ToolbarButtonGroup(props: { children: React.ReactNode }) {
             className="flex items-center gap-1 overflow-visible pr-2 pl-4"
         >
             {buttonChildren.map((child, index) => {
+                const motionValues = buttonMotionValues[index];
                 const childEl = child as React.ReactElement;
-                const childKey = childEl.key ?? `toolbar-button-${index}`;
-                return (
-                    <ToolbarButtonWrapper
-                        key={childKey}
-                        child={childEl}
-                        rawMotionValues={buttonMotionValues[index]}
-                    />
-                );
+                return React.cloneElement(childEl, {
+                    key: index,
+                    motionValues,
+                });
             })}
         </motion.div>
     );
@@ -180,27 +148,15 @@ export interface ToolbarButtonProps extends Omit<React.HTMLProps<HTMLAnchorEleme
     icon: IconName;
     iconClassName?: string;
     title?: React.ReactNode;
-    children?: React.ReactNode;
 }
 
-export const ToolbarButton = React.forwardRef<HTMLDivElement, ToolbarButtonProps>((props, ref) => {
-    const {
-        title,
-        disabled,
-        motionValues,
-        className,
-        style,
-        href,
-        onClick,
-        icon,
-        iconClassName,
-        children,
-    } = props;
+export function ToolbarButton(props: ToolbarButtonProps) {
+    const { title, disabled, motionValues, className, style, href, onClick, icon, iconClassName } =
+        props;
     const reduceMotion = useReducedMotion();
 
     return (
-        <motion.div variants={toolbarEasings.staggeringChild} className="relative" ref={ref}>
-            {children ? children : null}
+        <motion.div variants={toolbarEasings.staggeringChild}>
             <Tooltip label={title}>
                 <motion.a
                     href={href}
@@ -233,81 +189,39 @@ export const ToolbarButton = React.forwardRef<HTMLDivElement, ToolbarButtonProps
                         'gap-1',
                         'text-sm',
                         'rounded-full',
+                        'border-neutral-500',
+                        'outline-neutral-800',
+                        'outline-1',
+                        'border',
                         'truncate',
                         'text-tint-1',
                         'dark:text-tint-12',
                         'cursor-pointer',
                         'transition-colors',
                         'size-8',
+                        'bg-tint-1/3',
+                        'hover:bg-tint-1/4',
+                        'dark:bg-tint-3',
+                        'dark:hover:bg-tint-1',
                         disabled ? 'cursor-not-allowed opacity-50' : '',
-                        'border border-[rgba(256,_256,_256,_0.06)] border-solid',
-                        'bg-[linear-gradient(45deg,rgba(51,53,57,1)_0%,rgba(50,52,56,1)_100%)]'
+                        'shadow-1xs'
                     )}
                 >
-                    <Icon
-                        icon={icon}
-                        iconStyle={IconStyle.Solid}
-                        className={tcls(
-                            'size-4 shrink-0 group-hover:scale-110 group-hover:text-tint-3',
-                            iconClassName
-                        )}
-                    />
+                    <Icon icon={icon} className={tcls('size-4', iconClassName)} />
                 </motion.a>
             </Tooltip>
         </motion.div>
     );
-});
-
-ToolbarButton.displayName = 'ToolbarButton';
-
-function ToolbarButtonWrapper(props: {
-    child: React.ReactElement;
-    rawMotionValues?: { scale: MotionValue<number>; x: MotionValue<number> };
-}) {
-    const { child, rawMotionValues } = props;
-
-    // Convert the raw motion values to smooth spring easings
-    const springScale = useSpring(rawMotionValues?.scale.get() ?? 1, {
-        stiffness: 400,
-        damping: 30,
-    });
-    const springX = useSpring(rawMotionValues?.x.get() ?? 0, { stiffness: 400, damping: 30 });
-
-    // Sync springs with raw motion values
-    React.useEffect(() => {
-        if (!rawMotionValues) return;
-
-        const unsubScale = rawMotionValues.scale.on('change', (v) => springScale.set(v));
-        const unsubX = rawMotionValues.x.on('change', (v) => springX.set(v));
-
-        return () => {
-            unsubScale();
-            unsubX();
-        };
-    }, [rawMotionValues, springScale, springX]);
-
-    const motionValues = {
-        scale: springScale,
-        x: springX,
-    };
-
-    if (!isValidElement<{ motionValues: typeof motionValues }>(child)) {
-        return null;
-    }
-
-    return React.cloneElement(child, {
-        motionValues,
-    });
 }
 
 export function ToolbarSeparator() {
     return <div className="h-5 w-px bg-tint-1/3" />;
 }
 
-export function ToolbarTitle(props: { prefix?: string; suffix: string }) {
+export function ToolbarTitle(props: { prefix: string; suffix: string }) {
     return (
         <div className="flex items-center gap-1 text-xs ">
-            {props.prefix ? <ToolbarTitlePrefix title={props.prefix} /> : null}
+            <ToolbarTitlePrefix title={props.prefix} />
             <ToolbarTitleSuffix title={props.suffix} />
         </div>
     );
@@ -317,7 +231,7 @@ function ToolbarTitlePrefix(props: { title: string }) {
     return (
         <motion.span
             {...getCopyVariants(0)}
-            className="truncate font-medium text-neutral-1 dark:text-neutral-12"
+            className="font-light text-neutral-7 dark:text-neutral-3"
         >
             {props.title}
         </motion.span>
@@ -328,7 +242,7 @@ function ToolbarTitleSuffix(props: { title: string }) {
     return (
         <motion.span
             {...getCopyVariants(1)}
-            className="max-w-[20ch] truncate text-neutral-1 dark:text-neutral-12"
+            className="max-w-[24ch] truncate font-semibold text-neutral-3 dark:text-neutral-2"
         >
             {props.title}
         </motion.span>
@@ -339,9 +253,36 @@ export function ToolbarSubtitle(props: { subtitle: React.ReactNode }) {
     return (
         <motion.span
             {...getCopyVariants(1)}
-            className="text-neutral-1/80 text-xxs dark:text-neutral-12/80"
+            className="text-neutral-7 text-xxs dark:text-neutral-2"
         >
             {props.subtitle}
         </motion.span>
     );
 }
+
+function MinifyButton(props: { setMinified: (minified: boolean) => void }) {
+    return (
+        <Tooltip label="Minify">
+            <motion.div
+                {...minifyButtonAnimation}
+                transition={{
+                    duration: 0.2,
+                }}
+                whileHover={{
+                    scale: 1.05,
+                }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    props.setMinified(true);
+                }}
+                className={tcls(
+                    '-top-2 -right-4 absolute flex size-4 cursor-pointer items-center justify-center rounded-full border',
+                    'border-neutral-500 bg-neutral-700 hover:border-neutral-400 hover:bg-neutral-600',
+                    'dark:border-neutral-400 dark:bg-neutral-200 dark:hover:border-neutral-200 dark:hover:bg-neutral-100'
+                )}
+            >
+                <Icon icon="minus" className="size-2 text-neutral-1 dark:text-neutral-9" />
+            </motion.div>
+        </Tooltip>
+    );
+}

packages/gitbook/src/components/AdminToolbar/ToolbarControlsContext.tsx

@@ -1,27 +0,0 @@
-'use client';
-import React from 'react';
-
-export interface ToolbarControlsContextValue {
-    minimize: () => void;
-    closeSession?: () => void;
-    closePersistent?: () => void;
-    shouldAutoExpand?: boolean;
-}
-
-const ToolbarControlsContext = React.createContext<ToolbarControlsContextValue | null>(null);
-
-/*
- * Provides reusable state setters (mainly for hiding/showing the toolbar) for the toolbar controls propagated through to the children
- */
-export function ToolbarControlsProvider(
-    props: React.PropsWithChildren<{ value: ToolbarControlsContextValue | null }>
-) {
-    const { children, value } = props;
-    return (
-        <ToolbarControlsContext.Provider value={value}>{children}</ToolbarControlsContext.Provider>
-    );
-}
-
-export function useToolbarControls() {
-    return React.useContext(ToolbarControlsContext);
-}

packages/gitbook/src/components/AdminToolbar/index.ts

@@ -3,4 +3,3 @@ export * from './AdminToolbarClient';
 export * from './IframeWrapper';
 export * from './Toolbar';
 export * from './transitions';
-export * from './utils';

packages/gitbook/src/components/AdminToolbar/types.ts

@@ -54,7 +54,4 @@ export type AdminToolbarContext = {
 
 export interface AdminToolbarClientProps {
     context: AdminToolbarContext;
-    onSessionClose?: () => void;
-    onPersistentClose?: () => void;
-    onToggleMinify?: () => void;
 }

packages/gitbook/src/components/AdminToolbar/useMagnificationEffect.ts

@@ -1,6 +1,11 @@
-import { type MotionValue, motionValue } from 'motion/react';
+import { type MotionValue, motionValue } from 'framer-motion';
 import React from 'react';
 
+interface ButtonMotionValues {
+    scale: MotionValue<number>;
+    x: MotionValue<number>;
+}
+
 interface MagnificationConfig {
     /** Size of each button in pixels - used for spacing calculations */
     buttonSize?: number;
@@ -18,16 +23,21 @@ interface MagnificationConfig {
 
 const defaultConfig: Required<MagnificationConfig> = {
     buttonSize: 32, // Standard button size for 32px (size-8) buttons
-    maxScale: 1.25, // 25% scale increase - noticeable but not overwhelming
+    maxScale: 1.3, // 30% scale increase - noticeable but not overwhelming
     influenceRadius: 80, // ~2.5 button widths of influence
     spacingMultiplier: 1.3, // Creates proportional spacing to scale increase
     scaleExponent: 2.5, // Exponential curve for dramatic close-range scaling
     padding: 10, // Small buffer zone around container edges
 };
 
-const resetMotionValues = (
-    motionValues: Array<{ scale: MotionValue<number>; x: MotionValue<number> }>
-) => {
+// Helper functions for cleaner code
+const createMotionValues = (count: number): ButtonMotionValues[] =>
+    Array.from({ length: count }, () => ({
+        scale: motionValue(1),
+        x: motionValue(0),
+    }));
+
+const resetMotionValues = (motionValues: ButtonMotionValues[]) => {
     motionValues.forEach(({ scale, x }) => {
         scale.set(1);
         x.set(0);
@@ -36,17 +46,10 @@ const resetMotionValues = (
 
 const captureButtonPositions = (buttons: HTMLElement[]) => {
     // Reset transforms to get original positions
-    buttons.forEach((button) => {
-        button.style.transform = '';
-    });
+    buttons.forEach((button) => (button.style.transform = ''));
     return buttons.map((button) => {
         const rect = button.getBoundingClientRect();
-        return {
-            left: rect.left,
-            width: rect.width,
-            top: rect.top,
-            height: rect.height,
-        };
+        return { left: rect.left, width: rect.width };
     });
 };
 
@@ -56,46 +59,26 @@ const calculateScale = (
     containerRect: DOMRect,
     config: Required<MagnificationConfig>
 ) => {
-    // Calculate only X-axis distance from mouse to button center
     const distance = Math.abs(mouseX - buttonCenterX);
 
     if (distance > config.influenceRadius) return 1;
 
-    // Calculate distance from container edge (X-axis only)
-    const distanceFromEdgeX = Math.min(mouseX - containerRect.left, containerRect.right - mouseX);
-    const distanceFromEdge = distanceFromEdgeX;
+    // Edge influence to reduce scaling near container edges
+    const distanceFromEdge = Math.min(mouseX - containerRect.left, containerRect.right - mouseX);
+    const edgeInfluence = Math.min(distanceFromEdge / 20, 1);
 
-    // Define the "heart" zone - 8px from center (16x16px total area)
-    const heartZoneRadius = 8;
+    // Exponential scaling curve
+    const progress = distance / config.influenceRadius;
+    const exponentialProgress = (1 - progress) ** config.scaleExponent;
+    const baseScale = 1 + (config.maxScale - 1) * exponentialProgress;
 
-    let baseScale: number;
-
-    if (distance <= heartZoneRadius) {
-        // Within the heart zone - always at max scale
-        baseScale = config.maxScale;
-    } else {
-        // Outside heart zone - scale from max to 1 based on distance
-        const outerRadius = config.influenceRadius - heartZoneRadius;
-        const outerDistance = distance - heartZoneRadius;
-        const progress = Math.min(outerDistance / outerRadius, 1);
-        const exponentialProgress = (1 - progress) ** config.scaleExponent;
-        baseScale = 1 + (config.maxScale - 1) * exponentialProgress;
-    }
-
-    // Only apply entry transition if we're very close to the edge (within 10px)
-    // This prevents the entry logic from interfering with normal scaling
-    if (distanceFromEdge < 10) {
-        const entryProgress = distanceFromEdge / 10;
-        return 1 + (baseScale - 1) * entryProgress;
-    }
-
-    return baseScale;
+    return 1 + (baseScale - 1) * edgeInfluence;
 };
 
 const calculateSpacing = (
     buttonIndex: number,
     buttonEffects: Array<{ scale: number; translateX: number }>,
-    positions: Array<{ left: number; width: number; top: number; height: number }>,
+    positions: Array<{ left: number; width: number }>,
     config: Required<MagnificationConfig>
 ) => {
     const currentPos = positions[buttonIndex];
@@ -136,23 +119,14 @@ const calculateSpacing = (
 
 export function useMagnificationEffect(props: {
     childrenCount: number;
-    containerRef: React.RefObject<HTMLElement | null>;
+    containerRef: React.RefObject<HTMLElement>;
     config?: MagnificationConfig;
 }) {
     const { childrenCount, containerRef, config } = props;
-    const originalPositionsRef = React.useRef<
-        Array<{ left: number; width: number; top: number; height: number }>
-    >([]);
+    const [buttonMotionValues, setButtonMotionValues] = React.useState<ButtonMotionValues[]>([]);
+    const originalPositionsRef = React.useRef<Array<{ left: number; width: number }>>([]);
 
-    const finalConfig = React.useMemo(() => ({ ...defaultConfig, ...config }), [config]);
-
-    // Create basic motion values that will be consumed by springs in the components
-    const buttonMotionValues = React.useMemo(() => {
-        return Array.from({ length: childrenCount }, () => ({
-            scale: motionValue(1),
-            x: motionValue(0),
-        }));
-    }, [childrenCount]);
+    const finalConfig = { ...defaultConfig, ...config };
 
     React.useEffect(() => {
         const container = containerRef.current;
@@ -167,6 +141,11 @@ export function useMagnificationEffect(props: {
             return;
         }
 
+        // Initialize motion values if button count changed
+        if (buttonMotionValues.length !== buttons.length) {
+            setButtonMotionValues(createMotionValues(buttons.length));
+        }
+
         const handleMouseMove = (event: MouseEvent) => {
             const buttons = Array.from(
                 container.querySelectorAll('.toolbar-button')
@@ -231,7 +210,17 @@ export function useMagnificationEffect(props: {
             container.removeEventListener('mousemove', handleMouseMove);
             container.removeEventListener('mouseleave', handleMouseLeave);
         };
-    }, [finalConfig, containerRef, buttonMotionValues, childrenCount]);
+    }, [
+        finalConfig.buttonSize,
+        finalConfig.maxScale,
+        finalConfig.influenceRadius,
+        finalConfig.spacingMultiplier,
+        finalConfig.scaleExponent,
+        finalConfig.padding,
+        containerRef,
+        buttonMotionValues,
+        childrenCount,
+    ]);
 
     return { buttonMotionValues };
 }

packages/gitbook/src/components/AdminToolbar/utils.ts

@@ -1,154 +0,0 @@
-import React from 'react';
-
-import {
-    getLocalStorageItem,
-    getSessionStorageItem,
-    removeSessionStorageItem,
-    setLocalStorageItem,
-    setSessionStorageItem,
-} from '@/lib/browser/local-storage';
-
-const STORAGE_KEY = 'gitbook_toolbar_closed';
-const SESSION_STORAGE_KEY = 'gitbook_toolbar_session_closed';
-const SESSION_MINIFIED_KEY = 'gitbook_toolbar_minified';
-
-type SessionHideReason = 'session' | 'persistent';
-
-/**
- * Read the current session hide state. We store whether the toolbar was hidden “for session” or
- * “persistently” so we can distinguish between a temporary dismissal and a user preference.
- */
-export const getSessionHideState = (): { hidden: boolean; reason?: SessionHideReason } => {
-    const value = getSessionStorageItem<SessionHideReason | null>(SESSION_STORAGE_KEY, null);
-    if (value === 'session' || value === 'persistent') {
-        return { hidden: true, reason: value };
-    }
-    return { hidden: false, reason: undefined };
-};
-
-/**
- * Persist the session hide state. Passing `false` clears the stored preference entirely.
- */
-export const setSessionHidden = (value: boolean, reason?: SessionHideReason) => {
-    if (value && reason) {
-        setSessionStorageItem(SESSION_STORAGE_KEY, reason);
-    } else {
-        removeSessionStorageItem(SESSION_STORAGE_KEY);
-    }
-};
-
-/**
- * Retrieve the last minified state from session storage. If no value was ever stored we return
- * `undefined`, which signals that the toolbar should auto-expand once the logo animation finishes.
- */
-export const getStoredMinified = (): boolean | undefined => {
-    const stored = getSessionStorageItem<boolean | null>(SESSION_MINIFIED_KEY, null);
-    if (stored === null || stored === undefined) {
-        removeSessionStorageItem(SESSION_MINIFIED_KEY);
-        return undefined;
-    }
-    return stored;
-};
-
-/**
- * Persist the current minified state for the ongoing session.
- */
-export const setStoredMinified = (value: boolean) => {
-    setSessionStorageItem(SESSION_MINIFIED_KEY, value);
-};
-
-interface UseToolbarVisibilityOptions {
-    onPersistentClose?: () => void;
-    onSessionClose?: () => void;
-    onToggleMinify?: () => void;
-}
-
-export function useToolbarVisibility(options: UseToolbarVisibilityOptions = {}) {
-    const { onPersistentClose, onSessionClose, onToggleMinify } = options;
-
-    const [initialStoredMinified] = React.useState<boolean | undefined>(() =>
-        typeof window !== 'undefined' ? getStoredMinified() : undefined
-    );
-    const shouldAutoExpand = initialStoredMinified === undefined;
-
-    const [minified, setMinifiedState] = React.useState<boolean>(() =>
-        initialStoredMinified !== undefined ? initialStoredMinified : true
-    );
-
-    const [persistentHidden, setPersistentHidden] = React.useState(() =>
-        getLocalStorageItem(STORAGE_KEY, false)
-    );
-
-    const [sessionReason, setSessionReason] = React.useState<SessionHideReason | undefined>(() => {
-        const state = getSessionHideState();
-        return state.hidden ? state.reason : undefined;
-    });
-
-    React.useEffect(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-
-        const handleStorage = () => {
-            setPersistentHidden(getLocalStorageItem(STORAGE_KEY, false));
-            const state = getSessionHideState();
-            setSessionReason(state.hidden ? state.reason : undefined);
-        };
-
-        window.addEventListener('storage', handleStorage);
-        return () => window.removeEventListener('storage', handleStorage);
-    }, []);
-
-    React.useEffect(() => {
-        if (persistentHidden) {
-            if (sessionReason !== 'persistent') {
-                // Sync the session flag so we honour the persistent preference and avoid flashes when
-                // opening new tabs in the same browsing session.
-                setSessionHidden(true, 'persistent');
-                setSessionReason('persistent');
-            }
-            return;
-        }
-
-        if (sessionReason === 'persistent') {
-            // If the persistent preference was cleared we also clear the session flag so the toolbar
-            // can reappear immediately without requiring a full reload.
-            setSessionHidden(false);
-            setSessionReason(undefined);
-        }
-    }, [persistentHidden, sessionReason]);
-
-    const setMinified = (value: boolean) => {
-        setMinifiedState(value);
-        setStoredMinified(value);
-        onToggleMinify?.();
-    };
-
-    const minimize = () => setMinified(true);
-
-    const closeSession = () => {
-        setSessionHidden(true, 'session');
-        setSessionReason('session');
-        onSessionClose?.();
-    };
-
-    const closePersistent = () => {
-        setLocalStorageItem(STORAGE_KEY, true);
-        setPersistentHidden(true);
-        setSessionHidden(true, 'persistent');
-        setSessionReason('persistent');
-        onPersistentClose?.();
-    };
-
-    const hidden = persistentHidden || sessionReason === 'session';
-
-    return {
-        minified,
-        setMinified,
-        shouldAutoExpand,
-        hidden,
-        minimize,
-        closeSession,
-        closePersistent,
-    };
-}

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

@@ -6,7 +6,6 @@ import {
     SkeletonImage,
     SkeletonParagraph,
     SkeletonSmall,
-    SkeletonUpdate,
 } from '@/components/primitives';
 import type { ClassValue } from '@/lib/tailwind';
 
@@ -35,8 +34,6 @@ import { Stepper } from './Stepper';
 import { StepperStep } from './StepperStep';
 import { Table } from './Table';
 import { Tabs } from './Tabs';
-import { Update } from './Update';
-import { Updates } from './Updates';
 
 export interface BlockProps<Block extends DocumentBlock> extends DocumentContextProps {
     block: Block;
@@ -108,10 +105,6 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
                 return <Stepper {...props} block={block} />;
             case 'stepper-step':
                 return <StepperStep {...props} block={block} />;
-            case 'updates':
-                return <Updates {...props} block={block} />;
-            case 'update':
-                return <Update {...props} block={block} />;
             case 'if':
                 // If block should be processed by the API.
                 return null;
@@ -172,13 +165,10 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'images':
         case 'drawing':
             return <SkeletonImage id={id} style={style} />;
-        case 'updates':
-            return <SkeletonUpdate id={id} style={style} />;
         case 'image':
         case 'code-line':
         case 'tabs-item':
         case 'column':
-        case 'update':
             throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
         default:
             return nullIfNever(block);

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

@@ -1,18 +1,9 @@
-import {
-    type ContentRef,
-    type DocumentBlockContentRef,
-    SiteInsightsLinkPosition,
-} from '@gitbook/api';
+import { type DocumentBlockContentRef, SiteInsightsLinkPosition } from '@gitbook/api';
 
-import { Card, type CardProps } from '@/components/primitives';
-import {
-    type ResolvedContentRef,
-    resolveContentRef,
-    resolveContentRefFallback,
-} from '@/lib/references';
+import { Card } from '@/components/primitives';
+import { type ResolvedContentRef, resolveContentRef } from '@/lib/references';
 
 import type { BlockProps } from './Block';
-import { NotFoundRefHoverCard } from './NotFoundRefHoverCard';
 
 export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>) {
     const { block, context, style } = props;
@@ -25,45 +16,51 @@ export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>
         : null;
 
     if (!resolved) {
-        const fallback = resolveContentRefFallback(block.data.ref);
-        if (!fallback) {
-            return null;
-        }
-        return (
-            <NotFoundRefHoverCard context={context}>
-                <BlockContentRefCard
-                    contentRef={block.data.ref}
-                    resolved={fallback}
-                    style={style}
-                />
-            </NotFoundRefHoverCard>
-        );
+        return null;
     }
 
-    return <BlockContentRefCard contentRef={block.data.ref} resolved={resolved} style={style} />;
-}
+    const isContentInOtherSpace =
+        context.contentContext?.space &&
+        'space' in block.data.ref &&
+        context.contentContext.space.id !== block.data.ref.space;
+    const kind = block?.data?.ref?.kind;
+    if ((resolved.active && kind === 'space') || isContentInOtherSpace) {
+        return <SpaceRefCard {...props} resolved={resolved} />;
+    }
 
-function BlockContentRefCard(
-    props: {
-        resolved: ResolvedContentRef;
-        contentRef: ContentRef;
-    } & Omit<CardProps, 'href' | 'title'>
-) {
-    const { ref, resolved, contentRef, ...rest } = props;
     return (
         <Card
-            ref={ref}
             leadingIcon={resolved.icon ? resolved.icon : null}
             href={resolved.href}
             title={resolved.text}
+            style={style}
             insights={{
                 type: 'link_click',
                 link: {
-                    target: contentRef,
+                    target: block.data.ref,
                     position: SiteInsightsLinkPosition.Content,
                 },
             }}
-            {...rest}
+        />
+    );
+}
+
+async function SpaceRefCard(
+    props: { resolved: ResolvedContentRef } & BlockProps<DocumentBlockContentRef>
+) {
+    const { context, style, resolved } = props;
+    const spaceId = context.contentContext?.space.id;
+
+    if (!spaceId) {
+        return null;
+    }
+
+    return (
+        <Card
+            href={resolved.href}
+            title={resolved.text}
+            postTitle={resolved.subText}
+            style={style}
         />
     );
 }

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

@@ -51,13 +51,11 @@ type UnwrappedBlocksProps<TBlock extends DocumentBlock> = DocumentContextProps &
  * Ideally we'd rely on the block type to determine if it can be full width, but
  * the block's `fullWidth` property does not differentiate between `undefined` and `false`.
  * So instead we hardcode a list of blocks that can be full width. */
-const FULL_WIDTH_BLOCKS: DocumentBlock['type'][] = [
+const FULL_WIDTH_BLOCKS = [
     'table',
     'tabs',
     'integration',
-    'openapi-operation',
-    'openapi-schemas',
-    'openapi-webhook',
+    'openapi',
     'images',
     'embed',
     'columns',
@@ -66,8 +64,6 @@ const FULL_WIDTH_BLOCKS: DocumentBlock['type'][] = [
     'hint',
 ];
 
-const LIST_BLOCKS: DocumentBlock['type'][] = ['list-ordered', 'list-tasks', 'list-unordered'];
-
 /**
  * Renders a list of blocks without a wrapper element.
  */
@@ -89,12 +85,11 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
                 key={node.key || `${node.type}-${index}`}
                 block={node}
                 style={[
-                    'mx-auto page-width-wide:mx-0 w-full decoration-primary/6',
+                    'mx-auto page-width-wide:mx-0 w-full decoration-primary/6 print:break-inside-avoid',
                     node.data && 'fullWidth' in node.data && node.data.fullWidth
                         ? 'max-w-screen-xl'
                         : 'max-w-3xl',
-                    !LIST_BLOCKS.includes(node.type) && 'print:break-inside-avoid',
-                    FULL_WIDTH_BLOCKS.includes(node.type) && 'page-width-wide:max-w-full',
+                    FULL_WIDTH_BLOCKS.includes(node.type) && 'page-width-wide:max-w-screen-2xl',
                     blockStyle,
                 ]}
                 isEstimatedOffscreen={isOffscreen}

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

@@ -24,7 +24,6 @@ export function Caption(
         wrapperStyle?: ClassValue;
         block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed | DocumentBlockFile;
         withBorder?: boolean;
-        withFrame?: boolean;
     } & DocumentContextProps
 ) {
     const {
@@ -34,7 +33,6 @@ export function Caption(
         context,
         fit = false,
         withBorder = false,
-        withFrame = false,
         wrapperStyle = [
             'relative',
             'overflow-hidden',
@@ -46,7 +44,6 @@ export function Caption(
             withBorder
                 ? 'rounded-corners:rounded-sm circular-corners:rounded-2xl after:border-tint-subtle after:border after:rounded circular-corners:after:rounded-2xl rounded-corners:after:rounded-sm dark:after:mix-blend-plus-lighter after:pointer-events-none'
                 : null,
-            withFrame && 'p-2',
         ],
         style,
     } = props;
@@ -65,14 +62,7 @@ export function Caption(
     return (
         <picture className={tcls('relative', style)}>
             <div className={tcls(wrapperStyle, 'mx-auto')}>{children}</div>
-            <figcaption
-                className={tcls(
-                    'text-xs',
-                    'text-center',
-                    'text-tint',
-                    withFrame ? 'mt-0.5 mb-2.5' : 'mt-2'
-                )}
-            >
+            <figcaption className={tcls('text-sm', 'text-center', 'mt-2', 'text-tint')}>
                 <Inlines
                     nodes={captionParagraph.nodes}
                     document={document}

packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx

@@ -1,49 +1,30 @@
 'use client';
 
 import type { DocumentBlockCode } from '@gitbook/api';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { useAdaptiveVisitor } from '@/components/Adaptive';
 import { useInViewportListener } from '@/components/hooks/useInViewportListener';
 import { useScrollListener } from '@/components/hooks/useScrollListener';
-import { Button } from '@/components/primitives';
-import { t, useLanguage } from '@/intl/client';
-import { tcls } from '@/lib/tailwind';
 import { useDebounceCallback } from 'usehooks-ts';
 import type { BlockProps } from '../Block';
-import { type InlineExpressionVariables, useEvaluateInlineExpression } from '../InlineExpression';
 import { CodeBlockRenderer } from './CodeBlockRenderer';
 import type { HighlightLine, RenderedInline } from './highlight';
 import { plainHighlight } from './plain-highlight';
 
 type ClientBlockProps = Pick<BlockProps<DocumentBlockCode>, 'block' | 'style'> & {
     inlines: RenderedInline[];
-    inlineExprVariables: InlineExpressionVariables;
-    mode: BlockProps<DocumentBlockCode>['context']['mode'];
 };
 
-export const CODE_BLOCK_DEFAULT_COLLAPSED_LINE_COUNT = 10;
-
 /**
  * Render a code-block client-side by loading the highlighter asynchronously.
  * It allows us to defer some load to avoid blocking the rendering of the whole page with block highlighting.
  */
 export function ClientCodeBlock(props: ClientBlockProps) {
-    const { block, mode, style, inlines, inlineExprVariables } = props;
+    const { block, style, inlines } = props;
     const blockRef = useRef<HTMLDivElement>(null);
     const isInViewportRef = useRef(false);
     const [isInViewport, setIsInViewport] = useState(false);
-
-    const getAdaptiveVisitorClaims = useAdaptiveVisitor();
-    const visitorClaims = getAdaptiveVisitorClaims();
-    const evaluateInlineExpression = useEvaluateInlineExpression({
-        visitorClaims,
-        variables: inlineExprVariables,
-    });
-    const plainLines = useMemo(
-        () => plainHighlight(block, inlines, { evaluateInlineExpression }),
-        [block, inlines, evaluateInlineExpression]
-    );
+    const plainLines = useMemo(() => plainHighlight(block, []), [block]);
     const [lines, setLines] = useState<null | HighlightLine[]>(null);
     const [highlighting, setHighlighting] = useState(false);
 
@@ -99,7 +80,7 @@ export function ClientCodeBlock(props: ClientBlockProps) {
             if (typeof window !== 'undefined') {
                 setHighlighting(true);
                 import('./highlight').then(({ highlight }) => {
-                    highlight(block, inlines, { evaluateInlineExpression }).then((lines) => {
+                    highlight(block, inlines).then((lines) => {
                         if (cancelled) {
                             return;
                         }
@@ -117,86 +98,15 @@ export function ClientCodeBlock(props: ClientBlockProps) {
 
         // Otherwise if the block is not in viewport, we reset to the plain lines
         setLines(null);
-    }, [isInViewport, block, inlines, evaluateInlineExpression]);
+    }, [isInViewport, block, inlines]);
 
-    const expandable = block.data.expandable;
-
-    const numberOfLinesOfCode = lines?.length ?? plainLines.length;
-    const collapsedLineCount =
-        block.data.collapsedLineCount || CODE_BLOCK_DEFAULT_COLLAPSED_LINE_COUNT;
-    const isExpandable = Boolean(
-        expandable && mode !== 'print' && numberOfLinesOfCode > collapsedLineCount
-    );
-
-    const codeBlockBodyId = useId();
-
-    const renderer = (
+    return (
         <CodeBlockRenderer
             ref={blockRef}
             aria-busy={highlighting}
             block={block}
             style={style}
             lines={lines ?? plainLines}
-            id={codeBlockBodyId}
         />
     );
-
-    return isExpandable ? (
-        <CodeBlockExpandable
-            lines={lines ?? plainLines}
-            controls={codeBlockBodyId}
-            collapsedLineCount={collapsedLineCount}
-        >
-            {renderer}
-        </CodeBlockExpandable>
-    ) : (
-        renderer
-    );
-}
-
-function CodeBlockExpandable(props: {
-    children: React.ReactNode;
-    lines: HighlightLine[];
-    collapsedLineCount: number;
-    controls?: string;
-}) {
-    const { children, controls, lines = [], collapsedLineCount } = props;
-    const [isExpanded, setIsExpanded] = useState(false);
-    const language = useLanguage();
-    return (
-        <div className="group/codeblock-expandable relative">
-            <div
-                className={tcls(
-                    isExpanded
-                        ? '[&_pre]:after:opacity-0'
-                        : '[&_pre]:h-[calc(2rem+var(--line-count)*var(--line-height))] [&_pre]:overflow-y-hidden [&_pre]:after:opacity-100',
-                    '[&_pre]:after:pointer-events-none [&_pre]:after:absolute [&_pre]:after:inset-0 [&_pre]:after:z-1 [&_pre]:after:bg-gradient-to-t [&_pre]:after:from-0% [&_pre]:after:from-tint-2 [&_pre]:after:to-70% [&_pre]:after:to-transparent [&_pre]:after:content-[""]'
-                )}
-                style={
-                    {
-                        '--line-count': collapsedLineCount,
-                        '--line-height': '1.25rem',
-                    } as React.CSSProperties
-                }
-            >
-                {children}
-            </div>
-            <div className="pointer-events-none absolute bottom-0 flex w-full justify-center">
-                <Button
-                    icon={isExpanded ? 'chevron-up' : 'chevron-down'}
-                    size="xsmall"
-                    variant="blank"
-                    type="button"
-                    onClick={() => setIsExpanded(!isExpanded)}
-                    className="pointer-events-auto z-1 my-2 text-primary text-sm opacity-0 focus:opacity-11 group-hover/codeblock-expandable:opacity-11"
-                    aria-expanded={isExpanded}
-                    aria-controls={controls}
-                >
-                    {isExpanded
-                        ? t(language, 'code_block_expanded')
-                        : t(language, 'code_block_collapsed', lines.length)}
-                </Button>
-            </div>
-        </div>
-    );
 }

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import type { DocumentBlockCode } from '@gitbook/api';
 
 import { getNodeFragmentByType } from '@/lib/document';
@@ -16,65 +14,32 @@ import { type RenderedInline, getInlines, highlight } from './highlight';
 export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
     const { block, document, style, isEstimatedOffscreen, context } = props;
     const inlines = getInlines(block);
-
-    let hasInlineExpression = false;
-
-    const richInlines: RenderedInline[] = inlines
-        // Exclude inline expressions from rendered inline as they are rendered as code text once evaluated
-        // and so need to be treated as plain code tokens.
-        .filter((inline) => {
-            if (inline.inline.type === 'expression') {
-                hasInlineExpression = true;
-                return false;
+    const richInlines: RenderedInline[] = inlines.map((inline, index) => {
+        const body = (() => {
+            const fragment = getNodeFragmentByType(inline.inline, 'annotation-body');
+            if (!fragment) {
+                return null;
             }
-            return true;
-        })
-        .map((inline, index) => {
-            const body = (() => {
-                const fragment = getNodeFragmentByType(inline.inline, 'annotation-body');
-                if (!fragment) {
-                    return null;
-                }
-                return (
-                    <Blocks
-                        key={index}
-                        document={document}
-                        ancestorBlocks={[]}
-                        context={context}
-                        nodes={fragment.nodes}
-                        style="space-y-4"
-                    />
-                );
-            })();
+            return (
+                <Blocks
+                    key={index}
+                    document={document}
+                    ancestorBlocks={[]}
+                    context={context}
+                    nodes={fragment.nodes}
+                    style="space-y-4"
+                />
+            );
+        })();
 
-            return { inline, body };
-        });
+        return { inline, body };
+    });
 
-    if (!isEstimatedOffscreen && !hasInlineExpression && !block.data.expandable) {
+    if (!isEstimatedOffscreen) {
         // In v2, we render the code block server-side
         const lines = await highlight(block, richInlines);
         return <CodeBlockRenderer block={block} style={style} lines={lines} />;
     }
 
-    const variables = context.contentContext
-        ? {
-              space: context.contentContext?.revision.variables,
-              page:
-                  'page' in context.contentContext
-                      ? context.contentContext.page.variables
-                      : undefined,
-          }
-        : {};
-
-    return (
-        <React.Suspense fallback={null}>
-            <ClientCodeBlock
-                block={block}
-                style={style}
-                inlines={richInlines}
-                inlineExprVariables={variables}
-                mode={context.mode}
-            />
-        </React.Suspense>
-    );
+    return <ClientCodeBlock block={block} style={style} inlines={richInlines} />;
 }

packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx

@@ -12,7 +12,6 @@ import type { HighlightLine, HighlightToken } from './highlight';
 type CodeBlockRendererProps = Pick<BlockProps<DocumentBlockCode>, 'block' | 'style'> & {
     lines: HighlightLine[];
     'aria-busy'?: boolean;
-    id?: string;
 };
 
 /**
@@ -24,17 +23,16 @@ export const CodeBlockRenderer = forwardRef(function CodeBlockRenderer(
 ) {
     const { block, style, lines, 'aria-busy': ariaBusy } = props;
 
+    const id = useId();
     const withLineNumbers = Boolean(block.data.lineNumbers) && block.nodes.length > 1;
     const withWrap = block.data.overflow === 'wrap';
     const title = block.data.title;
 
-    const id = useId();
-    const codeId = props.id || id;
     return (
         <div
             ref={ref}
             aria-busy={ariaBusy}
-            className={tcls('group/codeblock grid shrink grid-flow-col overflow-hidden', style)}
+            className={tcls('group/codeblock grid grid-flow-col', style)}
         >
             <div className="flex items-center justify-start gap-2 text-sm [grid-area:1/1]">
                 {title ? (
@@ -44,7 +42,7 @@ export const CodeBlockRenderer = forwardRef(function CodeBlockRenderer(
                 ) : null}
             </div>
             <CopyCodeButton
-                codeId={codeId}
+                codeId={id}
                 style="z-2 mt-2 mr-2 self-start justify-self-end leading-none opacity-0 backdrop-blur-md [grid-area:2/1] group-hover/codeblock:opacity-11"
             />
             <pre
@@ -55,7 +53,7 @@ export const CodeBlockRenderer = forwardRef(function CodeBlockRenderer(
                 )}
             >
                 <code
-                    id={codeId}
+                    id={id}
                     className={tcls(
                         'inline-grid min-w-full grid-cols-[auto_1fr] [count-reset:line] print:whitespace-pre-wrap',
                         withWrap && 'whitespace-pre-wrap'

packages/gitbook/src/components/DocumentView/CodeBlock/PlainCodeBlock.tsx

@@ -1,8 +1,7 @@
-import type { JSONDocument } from '@gitbook/api';
+import type { DocumentBlockCode, JSONDocument } from '@gitbook/api';
 import { useId } from 'react';
 
 import { CodeBlock } from './CodeBlock';
-import { convertCodeStringToBlock } from './utils';
 
 /**
  * Plain code block with syntax highlighting.
@@ -12,7 +11,31 @@ export function PlainCodeBlock(props: { code: string; syntax: string }) {
     const { code, syntax } = props;
     const id = useId();
 
-    const block = convertCodeStringToBlock({ key: id, code, syntax });
+    const block: DocumentBlockCode = {
+        key: id,
+        object: 'block',
+        type: 'code',
+        data: {
+            syntax,
+        },
+        nodes: code.split('\n').map((line) => ({
+            object: 'block',
+            type: 'code-line',
+            data: {},
+            nodes: [
+                {
+                    object: 'text',
+                    leaves: [
+                        {
+                            object: 'leaf',
+                            text: line,
+                            marks: [],
+                        },
+                    ],
+                },
+            ],
+        })),
+    };
 
     const document: JSONDocument = {
         object: 'document',

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

@@ -64,10 +64,7 @@ export async function preloadHighlight(block: DocumentBlockCode) {
  */
 export async function highlight(
     block: DocumentBlockCode,
-    inlines: RenderedInline[],
-    options?: {
-        evaluateInlineExpression?: (expr: string) => string;
-    }
+    inlines: RenderedInline[]
 ): Promise<HighlightLine[]> {
     const langName = getBlockLang(block);
 
@@ -77,10 +74,10 @@ export async function highlight(
         // - TEMP : language is PowerShell or C++ and browser is Safari:
         //   RegExp#[Symbol.search] throws TypeError when `lastIndex` isn’t writable
         //   Fixed in upcoming Safari 18.6, remove when it'll be released - RND-7772
-        return plainHighlight(block, inlines, options);
+        return plainHighlight(block, inlines);
     }
 
-    const code = getPlainCodeBlock(block, undefined, options);
+    const code = getPlainCodeBlock(block);
 
     const highlighter = await getSingletonHighlighter({
         langs: [langName],
@@ -258,17 +255,11 @@ function matchTokenAndInlines(
     return result;
 }
 
-function getPlainCodeBlock(
-    code: DocumentBlockCode,
-    inlines?: InlineIndexed[],
-    options?: {
-        evaluateInlineExpression?: (expr: string) => string;
-    }
-): string {
+function getPlainCodeBlock(code: DocumentBlockCode, inlines?: InlineIndexed[]): string {
     let content = '';
 
     code.nodes.forEach((node, index) => {
-        const lineContent = getPlainCodeBlockLine(node, content.length, inlines, options);
+        const lineContent = getPlainCodeBlockLine(node, content.length, inlines);
         content += lineContent;
 
         if (index < code.nodes.length - 1) {
@@ -282,10 +273,7 @@ function getPlainCodeBlock(
 function getPlainCodeBlockLine(
     parent: DocumentBlockCodeLine | DocumentInlineAnnotation,
     index: number,
-    inlines?: InlineIndexed[],
-    options?: {
-        evaluateInlineExpression?: (expr: string) => string;
-    }
+    inlines?: InlineIndexed[]
 ): string {
     let content = '';
 
@@ -296,12 +284,7 @@ function getPlainCodeBlockLine(
             switch (node.type) {
                 case 'annotation': {
                     const start = index + content.length;
-                    content += getPlainCodeBlockLine(
-                        node,
-                        index + content.length,
-                        inlines,
-                        options
-                    );
+                    content += getPlainCodeBlockLine(node, index + content.length, inlines);
                     const end = index + content.length;
 
                     if (inlines) {
@@ -314,19 +297,6 @@ function getPlainCodeBlockLine(
                     break;
                 }
                 case 'expression': {
-                    const start = index + content.length;
-                    const exprValue =
-                        options?.evaluateInlineExpression?.(node.data.expression) ?? '';
-                    content += exprValue;
-                    const end = start + exprValue.length;
-
-                    if (inlines) {
-                        inlines.push({
-                            inline: node,
-                            start,
-                            end,
-                        });
-                    }
                     break;
                 }
                 default: {

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

@@ -9,13 +9,9 @@ import type { HighlightLine, HighlightToken, RenderedInline } from './highlight'
  */
 export function plainHighlight(
     block: DocumentBlockCode,
-    inlines: RenderedInline[],
-    options?: {
-        evaluateInlineExpression?: (expr: string) => string;
-    }
+    inlines: RenderedInline[]
 ): HighlightLine[] {
     const inlinesCopy = Array.from(inlines);
-
     return block.nodes.map((lineBlock) => {
         const tokens: HighlightToken[] = lineBlock.nodes.map((node) => {
             if (node.object === 'text') {
@@ -24,14 +20,6 @@ export function plainHighlight(
                     content: getNodeText(node),
                 };
             }
-
-            if (node.type === 'expression') {
-                return {
-                    type: 'plain',
-                    content: options?.evaluateInlineExpression?.(node.data.expression) ?? '',
-                };
-            }
-
             const inline = inlinesCopy.shift();
             return {
                 type: 'annotation',

packages/gitbook/src/components/DocumentView/CodeBlock/utils.test.ts

@@ -1,219 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-import { convertCodeStringToBlock } from './utils';
-
-describe('convertCodeStringToBlock', () => {
-    it('converts plain code string without placeholders', () => {
-        const result = convertCodeStringToBlock({
-            key: 'test1',
-            code: 'console.log("hello");',
-            syntax: 'javascript',
-        });
-
-        expect(result).toEqual({
-            key: 'test1',
-            object: 'block',
-            type: 'code',
-            data: { syntax: 'javascript' },
-            nodes: [
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: 'console.log("hello");', marks: [] }],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-
-    it('converts a single placeholder into an expression node', () => {
-        const result = convertCodeStringToBlock({
-            key: 'test2',
-            code: 'const config = { API_KEY: "$$__X-GITBOOK-PREFILL[visitor.claims.apiKey ?? "YOUR_API_KEY"]__$$" }',
-            syntax: 'javascript',
-        });
-
-        expect(result).toEqual({
-            key: 'test2',
-            object: 'block',
-            type: 'code',
-            data: { syntax: 'javascript' },
-            nodes: [
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [
-                        {
-                            object: 'text',
-                            leaves: [
-                                { object: 'leaf', text: 'const config = { API_KEY: "', marks: [] },
-                            ],
-                        },
-                        {
-                            object: 'inline',
-                            type: 'expression',
-                            data: { expression: 'visitor.claims.apiKey ?? "YOUR_API_KEY"' },
-                            isVoid: true,
-                        },
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: '" }', marks: [] }],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-
-    it('handles multiple placeholders in one line', () => {
-        const result = convertCodeStringToBlock({
-            key: 'test3',
-            code: 'let a = $$__X-GITBOOK-PREFILL[valA]__$$, b = $$__X-GITBOOK-PREFILL[valB]__$$;',
-            syntax: 'javascript',
-        });
-
-        expect(result).toEqual({
-            key: 'test3',
-            object: 'block',
-            type: 'code',
-            data: { syntax: 'javascript' },
-            nodes: [
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: 'let a = ', marks: [] }],
-                        },
-                        {
-                            object: 'inline',
-                            type: 'expression',
-                            data: { expression: 'valA' },
-                            isVoid: true,
-                        },
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: ', b = ', marks: [] }],
-                        },
-                        {
-                            object: 'inline',
-                            type: 'expression',
-                            data: { expression: 'valB' },
-                            isVoid: true,
-                        },
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: ';', marks: [] }],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-
-    it('handles multiple placeholders across different lines', () => {
-        const result = convertCodeStringToBlock({
-            key: 'test4',
-            code: [
-                'const name = "$$__X-GITBOOK-PREFILL[visitor.claims.userName]__$$";',
-                'const age = $$__X-GITBOOK-PREFILL[visitor.claims.userAge]__$$;',
-                'console.log(name, age);',
-            ].join('\n'),
-            syntax: 'javascript',
-        });
-
-        expect(result).toEqual({
-            key: 'test4',
-            object: 'block',
-            type: 'code',
-            data: { syntax: 'javascript' },
-            nodes: [
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: 'const name = "', marks: [] }],
-                        },
-                        {
-                            object: 'inline',
-                            type: 'expression',
-                            data: { expression: 'visitor.claims.userName' },
-                            isVoid: true,
-                        },
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: '";', marks: [] }],
-                        },
-                    ],
-                },
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: 'const age = ', marks: [] }],
-                        },
-                        {
-                            object: 'inline',
-                            type: 'expression',
-                            data: { expression: 'visitor.claims.userAge' },
-                            isVoid: true,
-                        },
-                        {
-                            object: 'text',
-                            leaves: [{ object: 'leaf', text: ';', marks: [] }],
-                        },
-                    ],
-                },
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [
-                        {
-                            object: 'text',
-                            leaves: [
-                                { object: 'leaf', text: 'console.log(name, age);', marks: [] },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-
-    it('returns an empty code block for empty string', () => {
-        const result = convertCodeStringToBlock({
-            key: 'test5',
-            code: '',
-            syntax: 'javascript',
-        });
-
-        expect(result).toEqual({
-            key: 'test5',
-            object: 'block',
-            type: 'code',
-            data: { syntax: 'javascript' },
-            nodes: [
-                {
-                    object: 'block',
-                    type: 'code-line',
-                    data: {},
-                    nodes: [],
-                },
-            ],
-        });
-    });
-});

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

@@ -1,67 +0,0 @@
-import type { DocumentBlockCode, DocumentBlockCodeLine } from '@gitbook/api';
-
-const PREFILL_WITH_EXPR_REGEX = /\$\$__X-GITBOOK-PREFILL\[(.+?)\]__\$\$/g;
-
-/**
- * Convert a raw code string into a `DocumentBlockCode` object representation.
- *
- * Any placeholder of the form `$$__X-GITBOOK-PREFILL[<expression>]__$$` inside the code
- * string is transformed into a DocumentInlineExpression node with its `data.expression` set to the
- * extracted `<expression>`.
- */
-export function convertCodeStringToBlock(args: {
-    key: string;
-    code: string;
-    syntax: string;
-}): DocumentBlockCode {
-    const { key, code, syntax } = args;
-    const lines = code.split('\n').map<DocumentBlockCodeLine>((line) => {
-        const nodes: DocumentBlockCodeLine['nodes'] = [];
-        let lastIndex = 0;
-
-        for (const match of line.matchAll(PREFILL_WITH_EXPR_REGEX)) {
-            const [placeholder, expression] = match;
-            const start = match.index ?? 0;
-
-            if (start > lastIndex) {
-                nodes.push({
-                    object: 'text',
-                    leaves: [{ object: 'leaf', text: line.slice(lastIndex, start), marks: [] }],
-                });
-            }
-
-            if (expression) {
-                nodes.push({
-                    object: 'inline',
-                    type: 'expression',
-                    data: { expression },
-                    isVoid: true,
-                });
-            }
-
-            lastIndex = start + placeholder.length;
-        }
-
-        if (lastIndex < line.length) {
-            nodes.push({
-                object: 'text',
-                leaves: [{ object: 'leaf', text: line.slice(lastIndex), marks: [] }],
-            });
-        }
-
-        return {
-            object: 'block',
-            type: 'code-line',
-            data: {},
-            nodes,
-        };
-    });
-
-    return {
-        key,
-        object: 'block',
-        type: 'code',
-        data: { syntax },
-        nodes: lines,
-    };
-}

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

@@ -1,57 +1,17 @@
 import { tcls } from '@/lib/tailwind';
 import { type DocumentBlockColumns, type Length, VerticalAlignment } from '@gitbook/api';
-import React from 'react';
 import type { BlockProps } from '../Block';
 import { Blocks } from '../Blocks';
 
 export function Columns(props: BlockProps<DocumentBlockColumns>) {
     const { block, style, ancestorBlocks, document, context } = props;
-
-    const columnWidths = React.useMemo(() => {
-        const widths = block.nodes.map((block) => {
-            const width = block.data.width;
-            return width ? getFractionalWidth(width) : 0;
-        });
-
-        const totalWidth = widths.reduce<number>((acc, width) => acc + width, 0);
-        // If not all columns widths are set, distribute the remaining widths as equally as we can
-        if (totalWidth < 1.0 && widths.some((width) => width === 0)) {
-            const unsetWidths = widths.filter((width) => width === 0);
-            let remainingWidth = 1.0 - totalWidth;
-            let unsetWidthsLength = unsetWidths.length;
-            widths.forEach((width, index) => {
-                if (width === 0) {
-                    const calculatedWidth =
-                        Math.round((remainingWidth / unsetWidthsLength) * COLUMN_DIVISIONS) /
-                        COLUMN_DIVISIONS;
-                    widths[index] = calculatedWidth; // Assign width to empty columns
-                    unsetWidthsLength--;
-                    remainingWidth -= calculatedWidth;
-                }
-            });
-        }
-        return widths;
-    }, [block.nodes]);
-
     return (
-        <div
-            className={tcls(
-                'grid w-full grid-cols-1 gap-x-8 gap-y-4 md:grid-flow-col md:grid-cols-[repeat(var(--grid-slices),minmax(0,1fr))] md:grid-rows-1',
-                style
-            )}
-            style={{ '--grid-slices': COLUMN_DIVISIONS } as React.CSSProperties}
-        >
-            {block.nodes.map((columnBlock, index) => {
-                const columnWidth = columnWidths[index];
+        <div className={tcls('flex flex-col gap-x-8 md:flex-row', style)}>
+            {block.nodes.map((columnBlock) => {
                 return (
                     <Column
                         key={columnBlock.key}
-                        width={
-                            columnBlock.data.width ??
-                            (columnWidth
-                                ? { value: columnWidth * 100, unit: '%' }
-                                : { value: 0, unit: '%' })
-                        }
+                        width={columnBlock.data.width}
                         verticalAlignment={columnBlock.data.verticalAlignment}
                     >
                         <Blocks
@@ -71,16 +31,15 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
 
 export function Column(props: {
     children?: React.ReactNode;
-    width: Length;
+    width?: Length;
     verticalAlignment?: VerticalAlignment;
 }) {
     const { width, verticalAlignment } = props;
-    const { className, style } = transformLengthToCSS(width) ?? {};
+    const { className, style } = transformLengthToCSS(width);
     return (
         <div
             className={tcls(
                 'flex flex-col',
-                '@container/column',
                 (verticalAlignment === VerticalAlignment.Top || !verticalAlignment) &&
                     'justify-start',
                 verticalAlignment === VerticalAlignment.Middle && 'justify-center',
@@ -94,25 +53,41 @@ export function Column(props: {
     );
 }
 
-const COLUMN_DIVISIONS = 12;
-
-export function transformLengthToCSS(length: Length) {
-    if (typeof length === 'number') {
-        return; // not implemented yet with non-percentage lengths
+function transformLengthToCSS(length: Length | undefined) {
+    if (!length) {
+        return { className: ['md:w-full'] }; // default to full width if no length is specified
     }
+
+    if (typeof length === 'number') {
+        return { style: undefined }; // not implemented yet with non-percentage lengths
+    }
+
     if (length.unit === '%') {
         return {
-            className: 'md:flex-shrink-0 md:[grid-column:var(--grid-col)]',
-            style: {
-                '--grid-col': `auto / span ${Math.round(length.value * 0.01 * COLUMN_DIVISIONS)}`,
-            } as React.CSSProperties,
+            className: [
+                'md:shrink-0',
+                COLUMN_WIDTHS[Math.round(length.value * 0.01 * (COLUMN_WIDTHS.length - 1))],
+            ],
         };
     }
+
+    return { style: undefined }; // not implemented yet with non-percentage lengths
 }
 
-function getFractionalWidth(length: Length) {
-    if (typeof length === 'number') {
-        return 0;
-    }
-    return length.value / 100;
-}
+// Tailwind CSS classes for column widths.
+// The index of the array corresponds to the percentage width of the column.
+const COLUMN_WIDTHS = [
+    'md:w-0',
+    'md:w-1/12',
+    'md:w-2/12',
+    'md:w-3/12',
+    'md:w-4/12',
+    'md:w-5/12',
+    'md:w-6/12',
+    'md:w-7/12',
+    'md:w-8/12',
+    'md:w-9/12',
+    'md:w-10/12',
+    'md:w-11/12',
+    'md:w-full',
+];

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

@@ -31,7 +31,6 @@ export async function Drawing(props: BlockProps<DocumentBlockDrawing>) {
                 alt="Drawing"
                 sizes={imageBlockSizes}
                 zoom
-                loading="lazy"
             />
         </Caption>
     );

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

@@ -60,7 +60,6 @@ export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
                                 sources={{ light: { src: embed.icon } }}
                                 sizes={[{ width: 20 }]}
                                 resize={context.contentContext.imageResizer}
-                                loading="lazy"
                             />
                         ) : null
                     }

packages/gitbook/src/components/DocumentView/Expandable/Details.tsx

@@ -17,34 +17,29 @@ export function Details(props: {
 }) {
     const { children, id, className } = props;
 
-    const ref = React.useRef<HTMLDetailsElement>(null);
+    const detailsRef = React.useRef<HTMLDetailsElement>(null);
 
     const [openFromHash, setOpenFromHash] = React.useState(false);
 
     const hash = useHash();
-
     /**
      * Open the details element if the url hash refers to the id of the details element
      * or the id of some element contained within the details element.
      */
     React.useEffect(() => {
-        if (!hash || !ref.current) {
+        if (!hash || !detailsRef.current) {
             return;
         }
-
         if (hash === id) {
             setOpenFromHash(true);
-            return;
         }
-
         const activeElement = document.getElementById(hash);
-        const isOpen = Boolean(activeElement && ref.current.contains(activeElement));
-        setOpenFromHash(isOpen);
+        setOpenFromHash(Boolean(activeElement && detailsRef.current?.contains(activeElement)));
     }, [hash, id]);
 
     return (
         <details
-            ref={ref}
+            ref={detailsRef}
             id={id}
             open={props.open || openFromHash}
             className={tcls(

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

@@ -25,11 +25,7 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
     id = context.getId ? context.getId(id) : id;
 
     return (
-        <Details
-            id={id}
-            open={context.mode === 'print'}
-            className={tcls('scroll-mt-(--content-scroll-margin)', style)}
-        >
+        <Details id={id} open={context.mode === 'print'} className={style}>
             <summary
                 className={tcls(
                     'cursor-pointer',
@@ -51,7 +47,7 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
                     className={tcls(
                         'inline-block',
                         'size-3',
-                        'mr-3',
+                        'mr-2',
                         'mb-1',
                         'transition-transform',
                         'shrink-0',
@@ -96,7 +92,7 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
                 document={document}
                 ancestorBlocks={[...ancestorBlocks, block]}
                 context={context}
-                style="space-y-4 px-10 pb-5"
+                style={['px-10', 'pb-5', 'space-y-4']}
             />
         </Details>
     );

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

@@ -1,12 +1,10 @@
 import { type DocumentBlockFile, SiteInsightsLinkPosition } from '@gitbook/api';
 
-import { t } from '@/intl/translate';
 import { getSimplifiedContentType } from '@/lib/files';
 import { resolveContentRef } from '@/lib/references';
+import { tcls } from '@/lib/tailwind';
 
-import { getSpaceLanguage } from '@/intl/server';
-import { Button, Link } from '../primitives';
-import { DownloadButton } from '../primitives/DownloadButton';
+import { Link } from '../primitives';
 import type { BlockProps } from './Block';
 import { Caption } from './Caption';
 import { FileIcon } from './FileIcon';
@@ -14,70 +12,67 @@ import { FileIcon } from './FileIcon';
 export async function File(props: BlockProps<DocumentBlockFile>) {
     const { block, context } = props;
 
-    if (!context.contentContext) {
-        return null;
-    }
-
-    const contentRef = await resolveContentRef(block.data.ref, context.contentContext);
+    const contentRef = context.contentContext
+        ? await resolveContentRef(block.data.ref, context.contentContext)
+        : null;
     const file = contentRef?.file;
 
     if (!file) {
         return null;
     }
 
-    const language = getSpaceLanguage(context.contentContext);
     const contentType = getSimplifiedContentType(file.contentType);
-    const insights = {
-        type: 'link_click' as const,
-        link: {
-            target: block.data.ref,
-            position: SiteInsightsLinkPosition.Content,
-        },
-    };
 
     return (
         <Caption {...props} withBorder>
-            <div className="flex flex-wrap items-center gap-5 px-5 py-3">
-                <div className="flex min-w-14 flex-col items-center gap-1 border-tint-subtle border-r pr-5">
-                    <FileIcon contentType={contentType} className="size-5 text-primary" />
-                    <div className="text-hint text-xs">{getHumanFileSize(file.size)}</div>
-                </div>
-                <div className="min-w-24 flex-1">
-                    <div className="text-base">
-                        <Link
-                            href={file.downloadURL}
-                            target="_blank"
-                            insights={insights}
-                            className="hover:underline"
-                        >
-                            {file.name}
-                        </Link>
+            <Link
+                href={file.downloadURL}
+                download={file.name}
+                insights={{
+                    type: 'link_click',
+                    link: {
+                        target: block.data.ref,
+                        position: SiteInsightsLinkPosition.Content,
+                    },
+                }}
+                className={tcls('group/file', 'flex', 'flex-row', 'items-center', 'px-5', 'py-3')}
+            >
+                <div
+                    className={tcls(
+                        'min-w-14',
+                        'mr-5',
+                        'pr-5',
+                        'flex',
+                        'flex-col',
+                        'items-center',
+                        'gap-1',
+                        'border-r',
+                        'border-tint-subtle'
+                    )}
+                >
+                    <div>
+                        <FileIcon
+                            contentType={contentType}
+                            className={tcls('size-5', 'text-primary')}
+                        />
                     </div>
-                    <div className="text-sm opacity-9 dark:opacity-8">{contentType}</div>
-                </div>
-                <div className="flex shrink-0 flex-wrap gap-2">
-                    <DownloadButton
-                        icon="download"
-                        size="xsmall"
-                        variant="secondary"
-                        downloadUrl={file.downloadURL}
-                        filename={file.name}
-                        insights={insights}
+                    <div
+                        className={tcls(
+                            'text-xs',
+                            'text-tint',
+                            'group-hover/file:text-tint-strong'
+                        )}
                     >
-                        {t(language, 'download')}
-                    </DownloadButton>
-                    <Button
-                        icon="arrow-up-right-from-square"
-                        size="xsmall"
-                        variant="secondary"
-                        href={file.downloadURL}
-                        target="_blank"
-                        insights={insights}
-                    >
-                        {t(language, 'open')}
-                    </Button>
+                        {getHumanFileSize(file.size)}
+                    </div>
                 </div>
-            </div>
+                <div>
+                    <div className={tcls('text-base')}>{file.name}</div>
+                    <div className={tcls('text-sm', 'opacity-9', 'dark:opacity-8')}>
+                        {contentType}
+                    </div>
+                </div>
+            </Link>
         </Caption>
     );
 }

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

@@ -9,7 +9,7 @@ export function FileIcon(props: { contentType: SimplifiedFileType | null; classN
     const { contentType, className } = props;
 
     switch (contentType) {
-        case 'PDF':
+        case 'pdf':
             return <Icon icon="file-pdf" className={className} />;
         case 'image':
             return <Icon icon="file-image" className={className} />;

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

@@ -1,7 +1,6 @@
 import { type ClassValue, tcls } from '@/lib/tailwind';
 import type { DocumentBlockHeading, DocumentBlockTabs } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import { Link } from '../primitives';
 import { getBlockTextStyle } from './spacing';
 
 /**
@@ -29,8 +28,6 @@ export function HashLinkButton(props: {
                 'h-[1em]',
                 'border-0',
                 'opacity-0',
-                'site-background',
-                'rounded',
                 'group-hover/hash:opacity-[0]',
                 'group-focus/hash:opacity-[0]',
                 'md:group-hover/hash:opacity-[1]',
@@ -38,10 +35,10 @@ export function HashLinkButton(props: {
                 className
             )}
         >
-            <Link
+            <a
                 href={`#${id}`}
                 aria-label={label}
-                className={tcls('inline-flex h-full items-start', textStyle.lineHeight)}
+                className={tcls('inline-flex', 'h-full', 'items-start', textStyle.lineHeight)}
             >
                 <Icon
                     icon="hashtag"
@@ -55,7 +52,7 @@ export function HashLinkButton(props: {
                         iconClassName
                     )}
                 />
-            </Link>
+            </a>
         </div>
     );
 }

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

@@ -36,10 +36,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
             <HashLinkButton
                 id={id}
                 block={block}
-                className={tcls(
-                    '-ml-6 pr-2',
-                    '[.flip-heading-hash_&]:order-last [.flip-heading-hash_&]:ml-1 [.flip-heading-hash_&]:pl-2'
-                )}
+                className={tcls('-ml-6', 'pr-2')}
                 iconClassName={tcls('size-4')}
                 label="Direct link to heading"
             />

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

@@ -3,8 +3,6 @@ import { Icon, type IconName } from '@gitbook/icons';
 
 import { type ClassValue, tcls } from '@/lib/tailwind';
 
-import { getSpaceLanguage, tString } from '@/intl/server';
-import { languages } from '@/intl/translations';
 import { Block, type BlockProps } from './Block';
 import { Blocks } from './Blocks';
 import { getBlockTextStyle } from './spacing';
@@ -20,12 +18,6 @@ export function Hint({
     const firstLine = getBlockTextStyle(firstNode);
     const hasHeading = ['heading-1', 'heading-2', 'heading-3'].includes(firstNode.type);
 
-    const language = contextProps.context.contentContext
-        ? getSpaceLanguage(contextProps.context.contentContext)
-        : languages.en;
-
-    const label = tString(language, `hint_${block.data.style}`);
-
     return (
         <div
             className={tcls(
@@ -46,8 +38,6 @@ export function Hint({
 
                 style
             )}
-            aria-label={label}
-            role="note"
         >
             <div
                 className={tcls(
@@ -65,9 +55,9 @@ export function Hint({
             {hasHeading ? (
                 <Block
                     style={tcls(
-                        'w-full items-start py-4! pl-3 text-[1em]! *:flex-none',
+                        'w-full items-start py-4! pl-3 text-[1em] *:flex-none',
                         // Heading hash styles
-                        'flip-heading-hash pr-8 [&_.hash]:bg-transparent',
+                        'flip-heading-hash pr-8',
                         hintStyle.header
                     )}
                     ancestorBlocks={[...ancestorBlocks, block]}

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

@@ -11,50 +11,33 @@ import type { DocumentContext } from './DocumentView';
 export function Images(props: BlockProps<DocumentBlockImages>) {
     const { document, block, style, context, isEstimatedOffscreen } = props;
 
-    const hasMultipleImages = block.nodes.length > 1;
-    const { align = 'center', withFrame } = block.data;
+    const isMultipleImages = block.nodes.length > 1;
+    const { align = 'center' } = block.data;
 
     return (
         <div
             className={tcls(
                 style,
                 'flex',
-                'w-full',
+                'flex-row',
+                'gap-3',
                 align === 'center' && 'justify-center',
                 align === 'right' && 'justify-end',
-                align === 'left' && 'justify-start'
+                align === 'left' && 'justify-start',
+                isMultipleImages && ['grid', 'grid-flow-col']
             )}
         >
-            <div
-                className={tcls(
-                    'flex',
-                    'flex-row',
-                    'gap-3',
-                    hasMultipleImages && ['grid', 'grid-flow-col'],
-                    withFrame && [
-                        'rounded-2xl',
-                        'border',
-                        'border-[rgb(234,235,238)]',
-                        'dark:border-[rgb(45,50,58)]',
-                        'relative',
-                        'overflow-hidden',
-                        'w-fit',
-                    ]
-                )}
-            >
-                {block.nodes.map((node: any, _i: number) => (
-                    <ImageBlock
-                        key={node.key}
-                        block={node}
-                        document={document}
-                        style={[]}
-                        siblings={block.nodes.length}
-                        context={context}
-                        isEstimatedOffscreen={isEstimatedOffscreen}
-                        withFrame={withFrame}
-                    />
-                ))}
-            </div>
+            {block.nodes.map((node: any, _i: number) => (
+                <ImageBlock
+                    key={node.key}
+                    block={node}
+                    document={document}
+                    style={[]}
+                    siblings={block.nodes.length}
+                    context={context}
+                    isEstimatedOffscreen={isEstimatedOffscreen}
+                />
+            ))}
         </div>
     );
 }
@@ -79,9 +62,8 @@ async function ImageBlock(props: {
     context: DocumentContext;
     siblings: number;
     isEstimatedOffscreen: boolean;
-    withFrame?: boolean;
 }) {
-    const { block, context, isEstimatedOffscreen, withFrame } = props;
+    const { block, context, isEstimatedOffscreen } = props;
 
     const [src, darkSrc] = await Promise.all([
         context.contentContext ? resolveContentRef(block.data.ref, context.contentContext) : null,
@@ -95,65 +77,33 @@ async function ImageBlock(props: {
     }
 
     return (
-        <div className={tcls('relative', 'overflow-hidden')}>
-            {/* Frame grid */}
-            {withFrame && (
-                <div
-                    className={tcls(
-                        'absolute',
-                        '-top-0.5',
-                        '-left-0.5',
-                        'right-px',
-                        'bottom-px',
-                        'opacity-40',
-                        'dark:opacity-[0.1]',
-                        'bg-[length:24px_24px,24px_24px]',
-                        'bg-[linear-gradient(to_right,_rgb(234,235,238)_1px,_transparent_1px),linear-gradient(to_bottom,_rgb(234,235,238)_1px,_transparent_1px)]',
-                        'dark:bg-[linear-gradient(to_right,_rgb(122,128,139)_1px,_transparent_1px),linear-gradient(to_bottom,_rgb(122,128,139)_1px,_transparent_1px)]',
-                        'bg-repeat'
-                    )}
-                />
-            )}
-
-            {/* Shadow overlay */}
-            {withFrame && (
-                <div
-                    className={tcls(
-                        'pointer-events-none absolute inset-0 rounded-2xl',
-                        'shadow-[inset_0_0_10px_10px_rgba(255,255,255,0.9)]',
-                        'dark:shadow-[inset_0_0_10px_10px_rgb(29,29,29)]'
-                    )}
-                />
-            )}
-
-            <Caption {...props} fit>
-                <Image
-                    alt={block.data.alt ?? ''}
-                    sizes={imageBlockSizes}
-                    resize={context.contentContext?.imageResizer}
-                    sources={{
-                        light: {
-                            src: src.href,
-                            size: src.file?.dimensions,
-                        },
-                        dark: darkSrc
-                            ? {
-                                  src: darkSrc.href,
-                                  size: darkSrc.file?.dimensions,
-                              }
-                            : null,
-                    }}
-                    loading={isEstimatedOffscreen ? 'lazy' : 'eager'}
-                    zoom
-                    inlineStyle={{
-                        maxWidth: '100%',
-                        width: getImageDimension(block.data.width, undefined),
-                        height: getImageDimension(block.data.height, 'auto'),
-                    }}
-                    style={withFrame ? 'rounded-xl' : undefined}
-                />
-            </Caption>
-        </div>
+        <Caption {...props} fit>
+            <Image
+                alt={block.data.alt ?? ''}
+                sizes={imageBlockSizes}
+                resize={context.contentContext?.imageResizer}
+                sources={{
+                    light: {
+                        src: src.href,
+                        size: src.file?.dimensions,
+                    },
+                    dark: darkSrc
+                        ? {
+                              src: darkSrc.href,
+                              size: darkSrc.file?.dimensions,
+                          }
+                        : null,
+                }}
+                priority={isEstimatedOffscreen ? 'lazy' : 'high'}
+                preload
+                zoom
+                inlineStyle={{
+                    maxWidth: '100%',
+                    width: getImageDimension(block.data.width, undefined),
+                    height: getImageDimension(block.data.height, 'auto'),
+                }}
+            />
+        </Caption>
     );
 }
 

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

@@ -5,7 +5,6 @@ import { Annotation } from './Annotation/Annotation';
 import type { DocumentContextProps } from './DocumentView';
 import { Emoji } from './Emoji';
 import { InlineButton } from './InlineButton';
-import { InlineExpression } from './InlineExpression';
 import { InlineIcon } from './InlineIcon';
 import { InlineImage } from './InlineImage';
 import { InlineLink } from './InlineLink';
@@ -52,7 +51,9 @@ export function Inline<T extends DocumentInline>(props: InlineProps<T>) {
         case 'icon':
             return <InlineIcon {...contextProps} inline={inline} />;
         case 'expression':
-            return <InlineExpression {...contextProps} inline={inline} />;
+            // The GitBook API should take care of evaluating expressions.
+            // We should never need to render them.
+            return null;
         default:
             return nullIfNever(inline);
     }

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

@@ -1,29 +1,31 @@
-import { resolveContentRef, resolveContentRefFallback } from '@/lib/references';
+import { resolveContentRef } from '@/lib/references';
 import * as api from '@gitbook/api';
 import type { IconName } from '@gitbook/icons';
 import { Button } from '../primitives';
 import type { InlineProps } from './Inline';
-import { NotFoundRefHoverCard } from './NotFoundRefHoverCard';
 
 export async function InlineButton(props: InlineProps<api.DocumentInlineButton>) {
     const { inline, context } = props;
 
-    const resolved = context.contentContext
-        ? await resolveContentRef(inline.data.ref, context.contentContext)
-        : null;
+    if (!context.contentContext) {
+        throw new Error('InlineButton requires a contentContext');
+    }
 
-    const href = resolved?.href ?? resolveContentRefFallback(inline.data.ref)?.href;
+    const resolved = await resolveContentRef(inline.data.ref, context.contentContext);
 
-    const inlineElement = (
+    if (!resolved) {
+        return null;
+    }
+
+    return (
         // Set the leading to have some vertical space between adjacent buttons
         <span className="inline-button leading-12 [&:has(+.inline-button)]:mr-2">
             <Button
-                href={href}
+                href={resolved.href}
                 label={inline.data.label}
                 // TODO: use a variant specifically for user-defined buttons.
                 variant={inline.data.kind}
                 className="leading-normal"
-                disabled={href === undefined}
                 icon={inline.data.icon as IconName | undefined}
                 insights={{
                     type: 'link_click',
@@ -35,10 +37,4 @@ export async function InlineButton(props: InlineProps<api.DocumentInlineButton>)
             />
         </span>
     );
-
-    if (!resolved) {
-        return <NotFoundRefHoverCard context={context}>{inlineElement}</NotFoundRefHoverCard>;
-    }
-
-    return inlineElement;
 }