Add Nutrient Web SDK demo: full host-app shell around the viewer

biome.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",
@@ -23,6 +23,7 @@
       "!web/signing/signing-demo-complete",
       "!web/signing/sign-here-upgraded",
       "!web/viewer/multi-tab",
+      "!web/viewer/web-sdk-demo",
       "!playground/form-creator",
       "!web/document-generator-vanillajs",
       "!windows/pspdfkit-with-winui3"
@@ -33,36 +34,36 @@
     "indentStyle": "space",
     "indentWidth": 2
   },
   "linter": {
     "enabled": true,
     "rules": {
       "style": {
         "useFilenamingConvention": {
           "level": "error",
           "options": {
             "filenameCases": ["kebab-case"]
           }
         },
         "noParameterAssign": "error",
         "useAsConstAssertion": "error",
         "useDefaultParameterLast": "error",
         "useEnumInitializers": "error",
         "useSelfClosingElements": "error",
         "useSingleVarDeclarator": "error",
         "noUnusedTemplateLiteral": "error",
         "useNumberNamespace": "error",
         "noInferrableTypes": "error",
         "noUselessElse": "error"
       },
       "recommended": true,
       "complexity": {
         "noForEach": "off"
       },
       "suspicious": {
         "noExplicitAny": "off"
       }
     }
   },
   "javascript": {
     "formatter": {
       "quoteStyle": "double"

document-authoring/ai-editing/src/components/document-authoring-ai-shell.tsx

@@ -139,7 +139,7 @@
       ];
     }
 
     const existing = current[existingIndex]!;
     const next = [...current];
     next[existingIndex] = {
       ...existing,
@@ -191,7 +191,7 @@
       ];
     }
 
     const existing = current[existingIndex]!;
     if (existing.text === normalized && existing.streaming === false) {
       return current;
     }
@@ -822,12 +822,12 @@
           <div className="app-header-left">
             <a href="https://nutrient.io" className="app-logo-link">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/icons/logo.svg"
                 width={148}
                 height={44}
                 alt="Nutrient"
               />
             </a>
             <span className="app-tagline">AI-Powered Document Authoring</span>
           </div>
@@ -836,7 +836,7 @@
               href="https://nutrient.io/sdk/document-authoring/"
               className="app-header-btn app-header-btn-outline"
             >
-              Learn More
+              Document Authoring SDK
             </a>
             <a
               href="https://nutrient.io/contact-sales/"

web/viewer/web-sdk-demo/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+.env
+.env.local
+.env.development
+.env.development.local
+*.log
+.DS_Store
+*.tsbuildinfo

web/viewer/web-sdk-demo/README.md

@@ -0,0 +1,73 @@
+# Nutrient Web SDK Demo
+
+A complete Vite + React + TypeScript app showcasing a custom shell around the Nutrient Web SDK:
+
+- A side file explorer with drag-and-drop PDF uploads
+- A fully custom top toolbar (page navigation, rotate, move/add/delete pages, search, zoom, download)
+- A floating, draggable **ink** toolbar with a colour grid and stroke width picker
+- A floating, draggable **text** toolbar (font colour, size, bold/italic, alignment)
+- A signing flow: signer management, drag-and-drop placement of signature/initials/auto-fill/standard fields, and a draw/type/upload/saved signature modal
+- A custom Form Creator property editor mounted into the SDK's slot
+- A shared Baseline UI dark theme applied to both the host app and the SDK iframe
+
+## Run
+
+```bash
+npm install
+npm run dev
+```
+
+Open <http://localhost:5173>.
+
+The SDK is loaded via the `<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.15.0/nutrient-viewer.js">` tag in `index.html`, so no `pspdfkit-lib` copy step is required. The SDK auto-detects its asset `baseUrl` from the script's origin.
+
+> **Important:** The grouped UI customization slots used by this demo (`tools.main`, `signatures.create`, `formCreator.propertyEditor`, etc.) were introduced in **Web SDK 1.14**. Older CDN versions (e.g. 1.5, 1.9) reject this config with "`tools` is not a valid UI element". Stick to 1.14+ unless you adapt `src/NutrientViewer.tsx` to the older flat slot names.
+
+### License key
+
+Trial mode works out of the box. To run with a license, create `.env.development`:
+
+```bash
+VITE_LICENSE_KEY=your-license-key-here
+```
+
+## Project layout
+
+```
+src/
+  App.tsx                       Orchestrates UI state
+  NutrientViewer.tsx            SDK wiring (load, unload, setUI, theme, slot bridges)
+  Toolbar.tsx                   Custom top toolbar
+  FileExplorer.tsx              Sidebar with drag-and-drop PDF uploads
+  main.tsx                      React root + ThemeProvider
+  theme.ts                      Baseline UI dark theme (shared with the SDK iframe)
+  styles.css                    Demo shell styles
+
+  form-creator/                 Custom Form Creator property editor + tooltip buttons
+    index.ts
+
+  ink/InkToolbar.tsx            Floating draw-mode toolbar
+  text/TextToolbar.tsx          Floating text-mode toolbar
+
+  signing/
+    SignersPanel.tsx            Side panel with field tray and signer dropdown
+    SignersModal.tsx            Manage signers
+    SigningModal.tsx            Draw / type / upload / pick a saved signature
+    storage.ts                  localStorage layer for signers + saved signatures
+    signatureTarget.ts          Page-space targeting for inserted signatures
+
+  lib/
+    selection.ts                Selection-shape normalization
+    color.ts                    Hex → SDK Color
+    sdk.ts                      Misc SDK helpers (FORM_CREATOR detection, Immutable.List)
+    icons.tsx                   Shared React SVG icons
+
+  types/                        Local type declarations for the window.NutrientViewer global
+```
+
+## Build
+
+```bash
+npm run build
+npm run preview
+```

web/viewer/web-sdk-demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nutrient Web SDK Demo</title>
+    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.15.0/nutrient-viewer.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>