diff --git a/blog/2024-05-06-symfony-libs.mdx b/blog/2024-05-06-symfony-libs.mdx
index 2940eef..c8a90b7 100644
--- a/blog/2024-05-06-symfony-libs.mdx
+++ b/blog/2024-05-06-symfony-libs.mdx
@@ -1,7 +1,11 @@
 ---
 title: "Document Symfony + PHP Libs"
 authors: [jannik]
-tags: [simple-normalizer]
+tags:
+    - simple-normalizer
+    - task-manager
+    - html-builder
+    - dune
 ---
 
 A bunch of new docs were written:
@@ -18,7 +22,7 @@ Also the TS docs were updated:
 - [Dune DOM helpers] are now documented.
 
 
-[Dune DOM helpers]: /docs/ts-scss/dune/dom
+[Dune DOM helpers]: /docs/ts-scss/dune/helpers
 [HTML Builder]: /docs/php/library/html-builder
 [Simple Normalizer]: /docs/php/symfony/simple-normalizer
 [Task Manager]: /docs/php/symfony/task-manager
diff --git a/blog/2024-05-07-dune-docs.mdx b/blog/2024-05-07-dune-docs.mdx
new file mode 100644
index 0000000..355e697
--- /dev/null
+++ b/blog/2024-05-07-dune-docs.mdx
@@ -0,0 +1,29 @@
+---
+title: "Finalize Dune Docs"
+authors: [jannik]
+tags: [dune]
+---
+
+The [Dune] docs were finalized:
+
+- [DOM Attribute helpers] are now documented.
+- [JSON helpers] are now documented.
+- [Network helpers] are now documented.
+- [Popup Interaction helpers] are now documented.
+- [Timing helpers] are now documented.
+- [Usercentrics] component and hooks is documented.
+- [HTTP Basic Auth middleware] is documented.
+- [Media Query Hooks] are documented.
+- [Debounce Hook] is documented.
+
+
+[Debounce Hook]: /docs/ts-scss/dune/react/debounce
+[DOM Attribute helpers]: /docs/ts-scss/dune/helpers#dom-attribute
+[Dune]: /docs/ts-scss/dune
+[HTTP Basic Auth middleware]: /docs/ts-scss/dune/react/http-auth
+[JSON helpers]: /docs/ts-scss/dune/helpers#json
+[Media Query Hooks]: /docs/ts-scss/dune/react/media-query
+[Network helpers]: /docs/ts-scss/dune/helpers#network
+[Popup Interaction helpers]: /docs/ts-scss/dune/helpers#popup-interaction
+[Timing helpers]: /docs/ts-scss/dune/helpers#timing
+[Usercentrics]: /docs/ts-scss/dune/react/usercentrics
diff --git a/docs/php/tooling/janus-php.mdx b/docs/php/tooling/janus-php.mdx
index fe8094f..ce75ad2 100644
--- a/docs/php/tooling/janus-php.mdx
+++ b/docs/php/tooling/janus-php.mdx
@@ -96,9 +96,9 @@ We use our own [PHP-CS-Fixer] package, as it adds custom configuration for our u
 
 
 
-[Composer bin plugin]: /docs/php/tooling#composer-bin-plugin
+[Composer bin plugin]: /docs/php/tooling/#composer-bin-plugin
 [Composer Normalize]: https://github.com/ergebnis/composer-normalize
 [PHP CS Fixer]: https://github.com/PHP-CS-Fixer/PHP-CS-Fixer
 [PHP-CS-Fixer]: /docs/php/tooling/php-cs-fixer
 [PHPStan]: https://phpstan.org/
-[the note about it]: /docs/php/tooling#phpunit
+[the note about it]: /docs/php/tooling/#phpunit
diff --git a/docs/php/tooling/php-cs-fixer.mdx b/docs/php/tooling/php-cs-fixer.mdx
index b053714..e85b971 100644
--- a/docs/php/tooling/php-cs-fixer.mdx
+++ b/docs/php/tooling/php-cs-fixer.mdx
@@ -46,4 +46,4 @@ After installation, you can run the tools like this:
 ./vendor/bin/php-cs-fixer fix --dry-run --diff --config vendor-bin/cs-fixer/vendor/21torr/php-cs-fixer/.php-cs-fixer.dist.php
 ```
 
-[Composer bin plugin]: /docs/php/tooling#composer-bin-plugin
+[Composer bin plugin]: /docs/php/tooling/#composer-bin-plugin
diff --git a/docs/ts-scss/dune/dom.mdx b/docs/ts-scss/dune/helpers.mdx
similarity index 53%
rename from docs/ts-scss/dune/dom.mdx
rename to docs/ts-scss/dune/helpers.mdx
index 6b907e8..a7f380e 100644
--- a/docs/ts-scss/dune/dom.mdx
+++ b/docs/ts-scss/dune/helpers.mdx
@@ -1,10 +1,92 @@
-# DOM Helpers
+# Helpers
 
-The library contains several helper functions for working with the DOM.
 
-## HTML Attributes
+## DOM Attribute
 
-## Events
+### `toggleClass()`
+
+```typescript
+toggleClass(element, className, addClass)
+```
+
+A helper, where you can control via the `addClass` parameter whether to add or remove classes.
+
+- You can pass an array of elements as `element`.
+- You can also pass multiple classes as array in `className`.
+
+
+
+## DOM Traversal
+
+### `findFirst()`
+
+```typescript
+findFirst(selector, context)
+```
+
+Small wrapper around `querySelector()`. Pass the container as `context` you want to search in, by default `document` is used.
+
+
+### `find()`
+
+```typescript
+find(selector, context)
+```
+
+Wrapper around `querySelectorAll`, always returns a (real) array. Pass the container as `context` you want to search in, by default `document` is used.
+
+
+### `children()`
+
+```typescript
+children(parent, selector = null)
+```
+
+Returns all children elements of the given `parent`. Can be directly filtered by the given selector.
+
+
+### `prev()`
+
+```typescript
+prev(element, selector = null)
+```
+
+Returns all previous siblings, optionally only those matching a given selector. Excludes the `element` itself.
+
+
+### `next()`
+
+```typescript
+next(element, selector = null)
+```
+
+Returns all following siblings, optionally only those matching a given selector. Excludes the `element` itself.
+
+
+### `closest()`
+
+```typescript
+closest(element, selector, rootElement = null)
+```
+
+Finds the nearest parent that matches the given selector. The element itself is **included**, if it matches.
+
+You can optionally pass a maximum root element, where the search should stop, so that you can contain the search to a specific subtree.
+
+
+### `isChildOf()`
+
+```typescript
+isChildOf(parent, node)
+```
+
+Checks, whether the given `node` is a child of the `parent`.
+
+Will return `true` if both parameters are the same node.
+
+
+
+## Event
 
 ### `on()`
 
@@ -137,70 +219,145 @@ trigger(button, "click", {
 ```
 
 
-## DOM Traversal
 
-### `findFirst()`
+## JSON
+
+### `safeParseJson()`
 
 ```typescript
-findFirst(selector, context)
+safeParseJson<DataType>(value)
 ```
 
-Small wrapper around `querySelector()`. Pass the container as `context` you want to search in, by default `document` is used.
+Parses the given value as JSON and returns it cast as the `DataType`.
+
+:::caution
+This function doesn't validate the data in any way. It is recommended to use zod to validate the schema.
+:::
 
 
-### `find()`
+### `parseElementContentAsJson()`
 
 ```typescript
-find(selector, context)
+parseElementContentAsJson<DataType>(element)
 ```
 
-Wrapper around `querySelectorAll`, always returns a (real) array. Pass the container as `context` you want to search in, by default `document` is used.
+Uses the text content of the given element, parses it as JSON and returns the parsed json.
+
+This is especially useful when hydrating `<script type="application/json">` tags.
+
+:::caution
+This function doesn't validate the data in any way. It is recommended to use zod to validate the schema.
+:::
 
 
-### `children()`
+
+## Network
+
+### `isAbortError()`
 
 ```typescript
-children(parent, selector = null)
+isAbortError(error)
 ```
 
-Returns all children elements of the given `parent`. Can be directly filtered by the given selector.
+A helper to help when catching fetch failures. They occur frequently when fetching in an effect in React and eagerly aborting the request when rerunning the effect.
 
+```typescript
+import {isAbortError} from "@21torr/dune/network";
+
+useEffect(() =>
+{
+	const controller = new AbortController();
+
+	fetch(..., {
+		signal: controller.signal,
+	})
+		.then(...)
+		.catch(error =>
+		{
+			if (isAbortError(error))
+			{
+				// don't do anything for abort errors
+				return;
+			}
+
+			// ...
+		});
+
+	return () =>
+	{
+		controller.abort();
+	};
+}, [...]);
+```
+
+:::best-practice
+Always properly abort your `fetch()` requests in effects when rerunning.
+:::
 
-### `prev()`
+
+
+## Popup Interaction
+
+These helpers provide support for overlay integrations.
+
+### `registerBodyClickHandler()`
 
 ```typescript
-prev(element, selector = null)
+registerBodyClickHandler(allowedClickTargets, onInvalidTargetClick) : UnregisterCallback
 ```
 
-Returns all previous siblings, optionally only those matching a given selector. Excludes the `element` itself.
+Registers a global click handler, that checks for every click if it is in one of the `allowedClickTargets`. If it isn't, the `onInvalidTargetClick` callback is triggered.
 
+Returns an unregister callback to remove the global click listener.
+
+> This is useful for implementing overlays: you can detect clicks outside the overlay, but add the overlay itself as allowed click target.
 
-### `next()`
+
+### `initDismissibleContainer()`
 
 ```typescript
-next(element, selector = null)
+initDismissibleContainer(
+	trigger,
+	allowedContainers,
+	callback,
+) : DismissibleContainerDirector
 ```
 
-Returns all following siblings, optionally only those matching a given selector. Excludes the `element` itself.
+It takes a list of `triggers` and a list of `allowedContainers`. To integrate the interaction, you pass a `callback`.
 
+The integration does the following things:
 
-### `closest()`
+- if the status changes, the `callback` is called with a boolean parameter, that tells you whether it is active or not
+- A click on a trigger toggles the active state
+- When active, a click outside the `triggers` / the `allowedContainers` sets the state to inactive.
+
+It returns a director, that can be called directly to set the state to inactive, and has an additional `destroy()` helper:
 
 ```typescript
-closest(element, selector, rootElement = null)
+const director = initDismissibleContainer(...);
+
+// set the state to inactive
+director();
+
+// destroy the integration (= removes all listeners etc)
+directory.destroy();
 ```
 
-Finds the nearest parent that matches the given selector. The element itself is **included**, if it matches.
 
-You can optionally pass a maximum root element, where the search should stop, so that you can contain the search to a specific sub tree.
+> This helps you to implement an overview, just like [`registerBodyClickHandler()`](#registerbodyclickhandler). The additional feature here is the automatic integration of external triggers.
+>
+> So in this example the overlay might be a navigation drawer, that can be toggled by a hamburger button somewhere in the page.
 
 
-### `isChildOf()`
+
+## Timing
+
+### `onNextAnimationFrame()`
 
 ```typescript
-isChildOf(parent, node)
+onNextAnimationFrame(callback)
 ```
 
-Checks, whether the given `node` is a child of the `parent`.
+Helper to integrate in animation frames. This will combine multiple calls during the same frame to a single call.
 
-Will return `true` if both parameters are the same node.
+> This is useful to debounce fast triggering events, like `mousemove`, `scroll` or `resize`.
diff --git a/docs/ts-scss/dune/index.mdx b/docs/ts-scss/dune/index.mdx
index 1229189..2372c85 100644
--- a/docs/ts-scss/dune/index.mdx
+++ b/docs/ts-scss/dune/index.mdx
@@ -11,3 +11,49 @@ import {LinkList} from "../../../src/components/Link/LinkList";
 
 It provides standalone functions, React components and Next.js-integrated components.
 
+
+
+## DOM + JS Helpers
+
+- [`children()`](/docs/ts-scss/dune/helpers#children)
+- [`closest()`](/docs/ts-scss/dune/helpers#closest)
+- [`delegate()`](/docs/ts-scss/dune/helpers#delegate)
+- [`find()`](/docs/ts-scss/dune/helpers#find)
+- [`findFirst()`](/docs/ts-scss/dune/helpers#findfirst)
+- [`initDismissibleContainer()`](/docs/ts-scss/dune/helpers#initdismissiblecontainer)
+- [`isAbortError()`](/docs/ts-scss/dune/helpers#isaborterror)
+- [`isChildOf()`](/docs/ts-scss/dune/helpers#ischildof)
+- [`next()`](/docs/ts-scss/dune/helpers#next)
+- [`off()`](/docs/ts-scss/dune/helpers#off)
+- [`on()`](/docs/ts-scss/dune/helpers#on)
+- [`once()`](/docs/ts-scss/dune/helpers#once)
+- [`onNextAnimationFrame()`](/docs/ts-scss/dune/helpers#onnextanimationframe)
+- [`onOff()`](/docs/ts-scss/dune/helpers#onoff)
+- [`parseElementContentAsJson()`](/docs/ts-scss/dune/helpers#parseelementcontentasjson)
+- [`prev()`](/docs/ts-scss/dune/helpers#prev)
+- [`registerBodyClickHandler()`](/docs/ts-scss/dune/helpers#registerbodyclickhandler)
+- [`safeParseJson()`](/docs/ts-scss/dune/helpers#safeparsejson)
+- [`toggleClass()`](/docs/ts-scss/dune/helpers#toggleclass)
+- [`trigger()`](/docs/ts-scss/dune/helpers#trigger)
+
+
+
+## React Helpers
+
+Some of these components / hooks are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only.
+
+- **React Components**
+	- [`<AnchorIntegration />`](/docs/ts-scss/dune/react/anchor-integration)
+	- [`<ClientOnlyPortal />`](/docs/ts-scss/dune/react/client-only-portal)
+	- [`<Cookiebot />`](/docs/ts-scss/dune/react/cookiebot#component)
+	- [`<Usercentrics />`](/docs/ts-scss/dune/react/usercentrics#component)
+
+- **React Hooks**
+	- [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook)
+	- [`useDebounced()`](/docs/ts-scss/dune/react/debounce)
+	- [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query)
+	- [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook)
+
+
+- **Next.js Middleware Integrations**
+	- [`handleHttpBasicAuth()`](/docs/ts-scss/dune/react/http-auth)
diff --git a/docs/ts-scss/dune/react/anchor-integration.mdx b/docs/ts-scss/dune/react/anchor-integration.mdx
index 74b3563..4f832b4 100644
--- a/docs/ts-scss/dune/react/anchor-integration.mdx
+++ b/docs/ts-scss/dune/react/anchor-integration.mdx
@@ -15,7 +15,7 @@ This element circumvents the issue, by waiting after the initial render (and the
 You should load this component once in your app. If you are using Next.js, a (fairly top-level) layout would be the correct place for it.
 
 ```tsx
-import {AnchorIntegration} from "@21torr/dune/next/components/Structure/AnchorIntegration.js";
+import {AnchorIntegration} from "@21torr/dune/next/components/Structure/AnchorIntegration";
 
 <AnchorIntegration />
 ```
diff --git a/docs/ts-scss/dune/react/client-only-portal.mdx b/docs/ts-scss/dune/react/client-only-portal.mdx
index 219c6b8..5e895b2 100644
--- a/docs/ts-scss/dune/react/client-only-portal.mdx
+++ b/docs/ts-scss/dune/react/client-only-portal.mdx
@@ -4,7 +4,7 @@ The ClientOnlyPortal is a React portal, that is only rendered on the client.
 On the server it will render to `null`.
 
 ```tsx
-import {ClientOnlyPortal} from "@21torr/dune/react/components/Structure/ClientOnlyPortal.js";
+import {ClientOnlyPortal} from "@21torr/dune/react/components/Structure/ClientOnlyPortal";
 
 <ClientOnlyPortal>
 	<div>My content</div>
diff --git a/docs/ts-scss/dune/react/cookiebot.mdx b/docs/ts-scss/dune/react/cookiebot.mdx
index 05c6952..f40106d 100644
--- a/docs/ts-scss/dune/react/cookiebot.mdx
+++ b/docs/ts-scss/dune/react/cookiebot.mdx
@@ -1,17 +1,22 @@
 # Cookiebot
 
+## Component
+
 There is a component for loading Cookiebot:
 
 ```tsx
-import {Cookiebot} from "@21torr/dune/next/components/Snippet/Cookiebot.js";
+import {Cookiebot} from "@21torr/dune/next/components/Snippet/Cookiebot";
 
 <Cookiebot id="..." />
 ```
 
+
+## Hook
+
 There also is a hook to be able to interact with Cookiebot inside of pages:
 
 ```tsx
-import {useCookiebot} from "@21torr/dune/react/hooks/cookiebot.js";
+import {useCookiebot} from "@21torr/dune/react/hooks/cookiebot";
 
 const cookiebot = useCookiebot();
 
diff --git a/docs/ts-scss/dune/react/debounce.mdx b/docs/ts-scss/dune/react/debounce.mdx
new file mode 100644
index 0000000..02b8757
--- /dev/null
+++ b/docs/ts-scss/dune/react/debounce.mdx
@@ -0,0 +1,19 @@
+# Debounce
+
+```typescript
+useDebounced(value, delay, onSetCallback?)
+```
+
+The `useDebounce()` hook helps when integrating rapidly changing values: the debounced value is only ever updated if it didn't change in the last `delay` milliseconds.
+
+
+```typescript
+import {useDebounced} from "@21torr/dune/react/hooks/debounce";
+
+const [actualValue, setActualValue] = useState("some value");
+const debouncedValue = useDebounced(actualValue, 500);
+```
+
+With the `onSetCallback` you can hook into the live update of the value, if you need the value directly instead of adding an effect that reacts on the debounced value.
+
+One of the prime use cases of this hook is a search input: you only ever want to search after the user stopped typing for a few ms.
diff --git a/docs/ts-scss/dune/react/http-auth.mdx b/docs/ts-scss/dune/react/http-auth.mdx
new file mode 100644
index 0000000..433886f
--- /dev/null
+++ b/docs/ts-scss/dune/react/http-auth.mdx
@@ -0,0 +1,29 @@
+# HTTP Auth Middleware
+
+A helper that integrates a HTTP Basic Auth into the Next.js Middleware.
+
+```typescript
+import {handleHttpBasicAuth} from "@21torr/dune/next/middleware/http-auth";
+
+const middleware: NextMiddleware = (request) =>
+{
+	const authResponse = handleHttpBasicAuth(
+		request,
+		username,
+		password,
+		responseText = "Auth required",
+		realmLabel = "Secure Area",
+	);
+
+	if (authResponse)
+	{
+		return authResponse;
+	}
+
+	// do you regular middleware work here
+};
+```
+
+The parameters `responseText` and `realmLabel` have defaults as written above. The response text is the text that is shown to the user if the authentication fails:
+
+![Example text](./images/http-auth-response-text.png)
diff --git a/docs/ts-scss/dune/react/images/http-auth-response-text.png b/docs/ts-scss/dune/react/images/http-auth-response-text.png
new file mode 100644
index 0000000..35f4418
Binary files /dev/null and b/docs/ts-scss/dune/react/images/http-auth-response-text.png differ
diff --git a/docs/ts-scss/dune/react/index.mdx b/docs/ts-scss/dune/react/index.mdx
index b0b6ef7..e02795e 100644
--- a/docs/ts-scss/dune/react/index.mdx
+++ b/docs/ts-scss/dune/react/index.mdx
@@ -1,10 +1,22 @@
-# React Components
+# React Helpers
 
-This is a list of all React components.
+Some of these components / hooks are intended to be used in Next.js only, some can be used in a standalone React project. Look at the imports of the implementation to see which is Next.js-only.
 
-Some of these components are intended to be used in Next.js only, some can be used in a standalone React project.
+### React Components
 
+- [`<AnchorIntegration />`](/docs/ts-scss/dune/react/anchor-integration)
+- [`<ClientOnlyPortal />`](/docs/ts-scss/dune/react/client-only-portal)
+- [`<Cookiebot />`](/docs/ts-scss/dune/react/cookiebot#component)
+- [`<Usercentrics />`](/docs/ts-scss/dune/react/usercentrics#component)
 
-- [AnchorIntegration](./anchor-integration)
-- [ClientOnlyPortal](./client-only-portal)
-- [Cookiebot component and hooks](./cookiebot)
+### React Hooks
+
+- [`useCookiebot()`](/docs/ts-scss/dune/react/cookiebot#hook)
+- [`useDebounced()`](/docs/ts-scss/dune/react/debounce)
+- [`useMediaQuery()`](/docs/ts-scss/dune/react/media-query)
+- [`useUsercentrics()`](/docs/ts-scss/dune/react/usercentrics#hook)
+
+
+### Next.js Middleware Integrations
+
+- [`handleHttpBasicAuth()`](/docs/ts-scss/dune/react/http-auth)
diff --git a/docs/ts-scss/dune/react/media-query.mdx b/docs/ts-scss/dune/react/media-query.mdx
new file mode 100644
index 0000000..4b779c6
--- /dev/null
+++ b/docs/ts-scss/dune/react/media-query.mdx
@@ -0,0 +1,27 @@
+# Media Query Hooks
+
+A simple hook that integrates into media queries.
+
+
+```typescript
+import {useMediaQuery} from "@21torr/dune/react/hooks/media-query";
+
+const isLarge = useMediaQuery("(min-width: 1000px)");
+```
+
+To avoid hydration issues, this hook will first render to `false` and on the client rerender with the actual media query.
+
+:::best-practice
+Instead of using the hook in your components directly, you should create named media query hooks, that mirror the names of your CSS media queries:
+
+```typescript
+// Create named hook
+export function useIsLarge () : bool
+{
+	return useMediaQuery("(min-width: 1000px)");
+}
+
+// use the named hooks in your components
+const isLarge = useIsLarge();
+```
+:::
diff --git a/docs/ts-scss/dune/react/usercentrics.mdx b/docs/ts-scss/dune/react/usercentrics.mdx
new file mode 100644
index 0000000..0857b64
--- /dev/null
+++ b/docs/ts-scss/dune/react/usercentrics.mdx
@@ -0,0 +1,38 @@
+# Usercentrics
+
+## Component
+
+There is a component for loading Usercentrics:
+
+```tsx
+import {Usercentrics} from "@21torr/dune/next/components/Snippet/Usercentrics";
+
+<Usercentrics id="..." />
+```
+
+
+## Hook
+
+There also is a hook to be able to interact with Usercentrics inside of pages:
+
+```tsx
+import {useUsercentrics} from "@21torr/dune/react/hooks/usercentrics";
+
+const cookiebot = useUsercentrics();
+
+// check consent levels
+console.log(true === cookiebot.consent.marketing);
+console.log(true === cookiebot.consent.preferences);
+console.log(true === cookiebot.consent.statistics);
+
+// true if any non-essential categories are selected
+console.log(true === cookiebot.hasAnyConsent);
+
+// or open the consent manager
+<button
+	type="button"
+	onClick={() => cookiebot.openConsentManager()}
+>
+	Open Consent Manager
+</button>
+```