diff --git a/.vscode/settings.json b/.vscode/settings.json
index b3d9da6..d385215 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,8 +20,8 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
   // Silence the stylistic rules in your IDE, but still auto fix them
   "eslint.rules.customizations": [
diff --git a/package.json b/package.json
index 96e970b..84b42d0 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "@types/youtube": "^0.0.47",
     "@unocss/svelte-scoped": "^0.55.7",
     "bumpp": "^9.2.0",
-    "kitbook": "1.0.0-beta.11",
+    "kitbook": "1.0.0-beta.23",
     "publint": "^0.2.2",
     "svelte": "^4.2.10",
     "svelte-check": "^3.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2ac193..d00af9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ devDependencies:
     specifier: ^9.2.0
     version: 9.2.0
   kitbook:
-    specifier: 1.0.0-beta.11
-    version: 1.0.0-beta.11(@sveltejs/kit@1.24.1)(svelte@4.2.10)(typescript@5.2.2)
+    specifier: 1.0.0-beta.23
+    version: 1.0.0-beta.23(@sveltejs/kit@1.24.1)(svelte@4.2.10)(typescript@5.2.2)
   publint:
     specifier: ^0.2.2
     version: 0.2.2
@@ -424,8 +424,8 @@ packages:
       type-detect: 4.0.8
     dev: true
 
-  /@kitbook/mdsvex-shiki-twoslash@1.0.0-beta.11(svelte@4.2.10)(typescript@5.2.2):
-    resolution: {integrity: sha512-InXkPzJ3j8nLNC2cQDyNV/Irxo+n4ovQIXkzjCKVdYm2coTnSYn++yr3BWWfjb9c1oqUPaKEKEtQPTGz6HfQ7w==}
+  /@kitbook/mdsvex-shiki-twoslash@1.0.0-beta.23(svelte@4.2.10)(typescript@5.2.2):
+    resolution: {integrity: sha512-oy5bf5+3N0sa+cT9rPMPiNuvGJMlU8QsTXWrxGwFeqyCXrZOJVxitQjSAtFPIcOKb3zvztoVEIrgIVcJJxABcw==}
     dependencies:
       fenceparser: 2.2.0
       mdsvex: 0.11.0(svelte@4.2.10)
@@ -437,8 +437,8 @@ packages:
       - typescript
     dev: true
 
-  /@kitbook/rehype-display-link-titles@1.0.0-beta.11:
-    resolution: {integrity: sha512-wZU3OtZhUbGPlfevtkp4AXVz56IcW7H29cylIc26+/22kLOvUZ/WD6i8SIYFYUhb+wOerjP4rQEEFzO9DQKbiQ==}
+  /@kitbook/rehype-display-link-titles@1.0.0-beta.23:
+    resolution: {integrity: sha512-VV23Q/5koOJizh460yNLMHvnpqoFRSN/Eu1hDi1gZMYfksZEvH1NdyeZ1TpGgBC4ZIU+BFbooDkYFTjV5hX1Tw==}
     dependencies:
       github-slugger: 2.0.0
       unist-util-visit: 4.1.2
@@ -1916,14 +1916,14 @@ packages:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: true
 
-  /kitbook@1.0.0-beta.11(@sveltejs/kit@1.24.1)(svelte@4.2.10)(typescript@5.2.2):
-    resolution: {integrity: sha512-5ORQqMrqDhWjLijWb5tPyDJGqvszWsWQ29TfyYXOjBrckCelxRbmtgYiVUKjYCygEaV/q4q8SuV4brg/8VkCJQ==}
+  /kitbook@1.0.0-beta.23(@sveltejs/kit@1.24.1)(svelte@4.2.10)(typescript@5.2.2):
+    resolution: {integrity: sha512-KYzC8/uoAP8S8EmXn85awEfP7A+C0xlv+SOImASmFh9W+6CfCYtAwnGoRhk6Ov3x8oik9pkzRPDoNWDSc87A6g==}
     peerDependencies:
-      '@sveltejs/kit': ^1.13.0
+      '@sveltejs/kit': ^1.13.0 || ^2.0.0
       svelte: ^3.55.0 || ^4.0.0
     dependencies:
-      '@kitbook/mdsvex-shiki-twoslash': 1.0.0-beta.11(svelte@4.2.10)(typescript@5.2.2)
-      '@kitbook/rehype-display-link-titles': 1.0.0-beta.11
+      '@kitbook/mdsvex-shiki-twoslash': 1.0.0-beta.23(svelte@4.2.10)(typescript@5.2.2)
+      '@kitbook/rehype-display-link-titles': 1.0.0-beta.23
       '@sveltejs/kit': 1.24.1(svelte@4.2.10)(vite@4.4.9)
       magicast: 0.3.0
       mdsvex: 0.11.0(svelte@4.2.10)
diff --git a/src/lib/shell/Menu.composition b/src/lib/shell/Menu.composition
new file mode 100644
index 0000000..d4cd8f4
--- /dev/null
+++ b/src/lib/shell/Menu.composition
@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+  import type { Viewport } from 'kitbook'
+  
+  const null_defaults_to_full_width = null
+  export const viewports: Viewport[] = [
+    { width: null_defaults_to_full_width, height: 250 },
+  ]
+</script>
+
+<script lang="ts">
+  import Menu from './Menu.svelte'
+</script>
+
+<Menu onclickoutside={() => alert('clicked outside')}>
+  <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
+  <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
+  <a href="/admin">
+    Admin Panel
+    <span class="i-fa-solid-key" />
+  </a>
+  <a href="/account"> Settings </a>
+  <button> Log out </button>
+</Menu>
diff --git a/src/lib/shell/Menu.md b/src/lib/shell/Menu.md
index 6991e32..de7e5ff 100644
--- a/src/lib/shell/Menu.md
+++ b/src/lib/shell/Menu.md
@@ -1,39 +1 @@
-<script>
-  import { Story } from 'kitbook';
-  import Menu from '$lib/shell/Menu.svelte';
-  import { portal } from '$lib/actions/portal';
-
-</script>
-
-<Story>
-  <div class="relative bg-white p-3 w-full" style="height: 250px;">
-    <Menu>
-      <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
-      <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
-      <a href="/admin">
-        Admin Panel
-        <span class="i-fa-solid-key" />
-      </a>
-      <a href="/account"> Settings </a>
-      <button> Log out </button>
-    </Menu>
-  </div>
-</Story>
-
-<Story name="portaled to body">
-  <div class="relative bg-white p-3 w-full" style="height: 250px;">
-    <!-- <Menu class="ltr:right-2 rtl:left-2 top-11" /> -->
-    <Menu {portal}>
-      <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
-      <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
-      <a href="/admin">
-        Admin Panel
-        <span class="i-fa-solid-key" />
-      </a>
-      <a href="/account"> Settings </a>
-      <button> Log out </button>
-    </Menu>
-  </div>
-</Story>
-
-Use `use:portal` if needed to solve z-index issues.
+Add a `portalTarget` if needed to solve z-index issues.
diff --git a/src/lib/shell/Menu.portaled-to-body.composition b/src/lib/shell/Menu.portaled-to-body.composition
new file mode 100644
index 0000000..c8491d3
--- /dev/null
+++ b/src/lib/shell/Menu.portaled-to-body.composition
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Menu from './Menu.svelte'
+</script>
+
+  <div class="relative bg-white p-3 w-full" style="height: 250px;">
+    <Menu portalTarget="body">
+      <div class="px-4 py-2 text-xs font-semibold text-gray-600">John Smith</div>
+      <div class="px-4 py-2 -mt-3 text-xs text-gray-600 border-b">j@jim.com</div>
+      <a href="/admin">
+        Admin Panel
+        <span class="i-fa-solid-key" />
+      </a>
+      <a href="/account"> Settings </a>
+      <button> Log out </button>
+    </Menu>
+  </div>
diff --git a/src/lib/shell/Menu.svelte b/src/lib/shell/Menu.svelte
index 4ee34c0..6287ae9 100644
--- a/src/lib/shell/Menu.svelte
+++ b/src/lib/shell/Menu.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
   import { portal } from '../actions/portal';
-  export let portalTarget: string; // 'body' | '#direction' for example
+  import { clickoutside } from '$lib/actions/clickoutside';
+
+  /** `body` or `#direction` for example */
+  export let portalTarget: string = undefined;
+  export let onclickoutside: (e: CustomEvent<boolean>) => any = undefined;
 </script>
 
 {#if portalTarget}
   <div
     use:portal={portalTarget}
+    use:clickoutside
+    on:clickoutside={onclickoutside}
     transition:fly={{ y: -10, duration: 150 }}
     class="{$$props.class} absolute z-30 mt-2 w-48 rounded-md
 shadow-lg"
@@ -17,6 +23,8 @@ shadow-lg"
   </div>
 {:else}
   <div
+    use:clickoutside
+    on:clickoutside={onclickoutside}
     transition:fly={{ y: -10, duration: 150 }}
     class="{$$props.class} absolute z-30 mt-2 w-48 rounded-md
 shadow-lg"
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
index 55cb9dc..f105a93 100644
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@@ -8,13 +8,13 @@ import { groupColocatedModulesIntoPages, layoutLoad, pagesStore } from 'kitbook'
  * Kitbook changes in the future will cause this file to be regenerated. Your glob patterns will be preserved as long as you only edit the patterns inside the array brackets and nothing else.
  */
 const components = import.meta.glob(['/src/**/*.svelte']);
-const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { as: 'raw' });
+const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { query: '?raw', import: 'default' });
 const variants = import.meta.glob(['/src/**/*.variants.ts']);
-const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { as: 'raw' });
+const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { query: '?raw', import: 'default' });
 const compositions = import.meta.glob(['/src/**/*.composition']);
-const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { as: 'raw' });
+const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { query: '?raw', import: 'default' });
 const markdown = import.meta.glob(['/src/**/*.md', '/README.md']);
-const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { as: 'raw' });
+const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { query: '?raw', import: 'default' });
 export const _pages = groupColocatedModulesIntoPages({ components, componentsRaw, variants, variantsRaw, compositions, compositionsRaw, markdown, markdownRaw });
 let firstLoad = true;
 if (firstLoad) {
diff --git a/src/routes/[...file]/+page.svelte b/src/routes/[...file]/+page.svelte
index 6a025ee..ef8d2d4 100644
--- a/src/routes/[...file]/+page.svelte
+++ b/src/routes/[...file]/+page.svelte
@@ -4,4 +4,4 @@ export let data;
 
 <MainPage {data} />
 
-<!-- Kitbook route files were auto-generated by kitbook@1.0.0-beta.6^ - Do not edit as they will be overwritten next time kitbook updates routing. -->
+<!-- Kitbook route files were auto-generated by kitbook@1.0.0-beta.17^ - Do not edit as they will be overwritten next time kitbook updates routing. -->