feat: support strict CSP

[hyperNURb]

Hey! Thanks for the great library — I'm running it on a project with strict CSP, and saw a good opportunity to land first-class support for it.

Adds a nonce option to DockviewOptions (and the React, Vue and Angular wrappers) so Dockview works under a CSP that forbids style-src 'unsafe-inline'. The nonce is applied to the <style> elements created when the parent window's stylesheets are copied into a popout. It accepts a string or a (targetDocument) => string | undefined function — the function form is what you want in production, since the popout is a separate response with its own fresh nonce and usually exposes it via <meta name="csp-nonce">.

Also swaps two innerHTML = '' calls in tabGroupIndicator for replaceChildren() so the library is compatible with require-trusted-types-for 'script'. New "Content Security Policy" page under Advanced covers the header, nonce wiring, and Trusted Types note.

Let me know what you think!

[Copilot]

Pull request overview

Adds first-class support for running Dockview under strict Content Security Policy (CSP) configurations by allowing callers to provide a CSP nonce for the <style> elements created during popout window style replication, and updates documentation/testing accordingly.

Changes:

• Introduces a nonce option (CspNonce) on DockviewOptions and wires it through popout window style injection.
• Updates DOM utilities to apply the nonce to generated <style> elements and batches style insertions via a DocumentFragment.
• Replaces innerHTML = '' with replaceChildren() in the tab group indicator and adds a new “Content Security Policy” docs page plus unit tests for addStyles.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/docs/docs/advanced/csp.mdx	New documentation page describing strict CSP setup, nonce wiring, and Trusted Types notes.
packages/dockview-core/src/popoutWindow.ts	Threads nonce into addStyles when copying styles into popout windows.
packages/dockview-core/src/dom.ts	Adds CspNonce/AddStylesOptions and applies nonce to created <style> elements.
packages/dockview-core/src/dockview/options.ts	Adds nonce?: CspNonce to DockviewOptions and re-exports CspNonce.
packages/dockview-core/src/dockview/dockviewComponent.ts	Passes nonce from Dockview options into PopoutWindowOptions.
packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts	Uses replaceChildren() instead of innerHTML = '' for Trusted Types compatibility.
packages/dockview-core/src/tests/dom.spec.ts	Adds unit tests covering addStyles nonce behavior and ordering behavior.
packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts	Exposes nonce as an Angular @Input() and forwards it via PROPERTY_KEYS_DOCKVIEW.
generated/dockview-core-exports.txt	Updates generated export surface to include CspNonce.

Files not reviewed (1)

• generated/dockview-core-exports.txt: Language not supported

Comments suppressed due to low confidence (1)

packages/dockview-core/src/dom.ts:235

• In addStyles, when styleSheet.href is present you always append a <link> and then still fall through to read cssRules and inject <style> elements for the same sheet. That can duplicate rules (and potentially trigger extra/incorrect asset URL fetches) and also logs warnings for cross-origin sheets even though the <link> path is sufficient. Consider continue-ing after appending the link, or only appending a link as a fallback when cssRules access fails.

        if (styleSheet.href) {
            const link = document.createElement('link');
            link.href = styleSheet.href;
            link.type = styleSheet.type;
            link.rel = 'stylesheet';

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The note that a same-origin popout "inherits your CSP and nonce" is misleading/incorrect for window.open(url, ...) (as used in PopoutWindow): the popout is a separate HTTP response with its own CSP header and per-response nonce, so the opener's nonce generally won’t be valid there. This also contradicts the later explanation that popout.html has its own freshly-generated nonce.