From 2742d5dcc9da8cf5a61c838bdf35f2f4803fc220 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Mon, 13 Apr 2026 13:55:15 +0200
Subject: [PATCH 1/4] update private-view slots and theme example for twelve-ui
 changes

---
 .../3.app-extensions/5.modules.md             | 28 ++++++++--------
 .../3.app-extensions/6.themes.md              | 33 ++++++++++---------
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/content/guides/09.extensions/3.app-extensions/5.modules.md b/content/guides/09.extensions/3.app-extensions/5.modules.md
index 8675d273..071d7a27 100644
--- a/content/guides/09.extensions/3.app-extensions/5.modules.md
+++ b/content/guides/09.extensions/3.app-extensions/5.modules.md
@@ -23,19 +23,19 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 ## Entrypoint Example
 
 ```js
-import { defineInterface } from '@directus/extensions-sdk'
-import ModuleComponent from './module.vue';
+import { defineInterface } from "@directus/extensions-sdk";
+import ModuleComponent from "./module.vue";
 
 export default defineInterface({
-	id: 'custom',
-	name: 'Custom',
-	icon: 'box',
-	routes: [
-		{
-			path: '',
-			component: ModuleComponent,
-		},
-	],
+  id: "custom",
+  name: "Custom",
+  icon: "box",
+  routes: [
+    {
+      path: "",
+      component: ModuleComponent,
+    },
+  ],
 });
 ```
 
@@ -62,7 +62,6 @@ The route object uses the same syntax as Vue Router, defining each route as an o
 | `path`      | The route path without the leading slash.      |
 | `component` | A Vue component to be rendered for this route. |
 
-
 The `routes` array should contain a root route with an empty path, which will load at the module's base route (the value of the module's `id`). Dynamic portions of the path can be defined using the `:param` syntax.
 
 ### Route Component
@@ -71,7 +70,7 @@ The module route component will be rendered in the Data Studio when the route is
 
 ```vue
 <template>
-	<private-view title="My Custom Module">Content goes here...</private-view>
+  <private-view title="My Custom Module">Content goes here...</private-view>
 </template>
 
 <script>
@@ -86,12 +85,11 @@ sidebar, header, and the main content area. Named slots can be used to add addit
 | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
 | `navigation`          | Adds content to the navigation area of the Directus interface.                                                   |
 | `title-outer:prepend` | Inserts content before the outer title container in the Directus header.                                         |
-| `headline`            | Displays a headline above the main title in the Directus header.                                                 |
 | `title`               | Sets the main title in the Directus header. If not used, `title:prepend` and `title:append` can be used instead. |
 | `title-outer:append`  | Inserts content after the outer title container in the Directus header.                                          |
 | `actions:prepend`     | Adds content before the action buttons in the Directus header.                                                   |
 | `actions`             | Defines the main action buttons in the Directus header.                                                          |
-| `actions:append`      | Adds content after the action buttons in the Directus header.                                                    |
+| `actions:primary`     | Adds primary action buttons in the Directus header.                                                              |
 | `splitView`           | Renders content in the split view area (only if the private layout has the split-view prop set to true).         |
 | `sidebar`             | Populates the sidebar area in the Directus interface.                                                            |
 
diff --git a/content/guides/09.extensions/3.app-extensions/6.themes.md b/content/guides/09.extensions/3.app-extensions/6.themes.md
index 44fac18f..fd22c15c 100644
--- a/content/guides/09.extensions/3.app-extensions/6.themes.md
+++ b/content/guides/09.extensions/3.app-extensions/6.themes.md
@@ -14,26 +14,27 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 ### Entrypoint Example
 
 ```js
-import { defineTheme } from '@directus/extensions-sdk';
+import { defineTheme } from "@directus/extensions-sdk";
 
 export default defineTheme({
-	id: 'custom',
-	name: 'My Custom Theme',
-	appearance: 'dark',
-	rules: {
-		background: 'tomato',
-	}
+  id: "custom",
+  name: "My Custom Theme",
+  appearance: "dark",
+  rules: {
+    background: "tomato",
+  },
 });
 ```
 
 ### Properties
 
-| Property    | Type   | Description                                                                                                        |
-|-------------|--------|--------------------------------------------------------------------------------------------------------------------|
-| `id`        | string | A unique identifier for this extension.          |
-| `name`      | string | The displayed name for this panel in the Data Studio.                               |
-| `appearance`| string | To which appearance mode the theme belongs to - `light` or `dark`.                                                  |
-| `rules`     | object | A set of theming rules from the theme schema.                                                                      |
+| Property     | Type   | Description                                                        |
+| ------------ | ------ | ------------------------------------------------------------------ |
+| `id`         | string | A unique identifier for this extension.                            |
+| `name`       | string | The displayed name for this panel in the Data Studio.              |
+| `appearance` | string | To which appearance mode the theme belongs to - `light` or `dark`. |
+| `rules`      | object | A set of theming rules from the theme schema.                      |
+
 ### Available Rules
 
 Rules that are configured in the `rules` property adhere to the rules section of the [theme schema](https://github.com/directus/directus/blob/main/packages/types/src/extensions/themes.ts).
@@ -41,7 +42,7 @@ Rules that are configured in the `rules` property adhere to the rules section of
 ```js{3-5}
 rules: {
 	borderRadius: '24px',
-	navigation: {
+	shell: {
 		background: 'rebeccapurple'
 	}
 }
@@ -82,10 +83,10 @@ downloading it through Google Fonts. For example:
 
 ```js
 // Use the locally installed font called "Comic Sans MS"
-fontFamily: 'Comic Sans MS, sans-serif'
+fontFamily: "Comic Sans MS, sans-serif";
 
 // Use the Google font "Yesteryear"
-fontFamily: '"Yesteryear", sans-serif'
+fontFamily: '"Yesteryear", sans-serif';
 ```
 
 When using a Google Font, ensure the configured weight is available for the selected font.

From 2488e716cc0ee9ecac14965091f7cd5cf97af3d8 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Wed, 13 May 2026 12:38:18 +0200
Subject: [PATCH 2/4] correct deprecated slot table; document new
 actions:primary; add theme migration callout; refresh module tutorials

---
 .../3.app-extensions/5.modules.md             |  29 +-
 .../3.app-extensions/6.themes.md              |  13 +
 ...-navigation-in-multipage-custom-modules.md | 612 +++++++++---------
 ...stand-available-slots-in-custom-modules.md | 230 ++++---
 4 files changed, 449 insertions(+), 435 deletions(-)

diff --git a/content/guides/09.extensions/3.app-extensions/5.modules.md b/content/guides/09.extensions/3.app-extensions/5.modules.md
index 071d7a27..d1400593 100644
--- a/content/guides/09.extensions/3.app-extensions/5.modules.md
+++ b/content/guides/09.extensions/3.app-extensions/5.modules.md
@@ -81,16 +81,23 @@ export default {};
 You can use the globally-registered `private-view` component to get access to Directus' page structure consisting of the module bar, navigation,
 sidebar, header, and the main content area. Named slots can be used to add additional content to these areas.
 
-| Slot                  | Description                                                                                                      |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `navigation`          | Adds content to the navigation area of the Directus interface.                                                   |
-| `title-outer:prepend` | Inserts content before the outer title container in the Directus header.                                         |
-| `title`               | Sets the main title in the Directus header. If not used, `title:prepend` and `title:append` can be used instead. |
-| `title-outer:append`  | Inserts content after the outer title container in the Directus header.                                          |
-| `actions:prepend`     | Adds content before the action buttons in the Directus header.                                                   |
-| `actions`             | Defines the main action buttons in the Directus header.                                                          |
-| `actions:primary`     | Adds primary action buttons in the Directus header.                                                              |
-| `splitView`           | Renders content in the split view area (only if the private layout has the split-view prop set to true).         |
-| `sidebar`             | Populates the sidebar area in the Directus interface.                                                            |
+| Slot                            | Description                                                                                                                                                                         |
+| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `navigation`                    | Adds content to the navigation area of the Directus interface.                                                                                                                      |
+| `title-outer:prepend`           | Inserts content before the outer title container in the Directus header.                                                                                                            |
+| `title-outer:append`            | Inserts content after the outer title container in the Directus header.                                                                                                             |
+| `title`                         | Sets the main title in the Directus header. If not used, `title:prepend` and `title:append` can be used instead.                                                                    |
+| `actions:prepend`               | Adds content before the action buttons in the Directus header.                                                                                                                      |
+| `actions`                       | Defines secondary action buttons in the Directus header.                                                                                                                            |
+| `actions:primary`               | Defines the primary action button (CTA) in the Directus header.                                                                                                                     |
+| `sidebar`                       | Populates the sidebar area in the Directus interface.                                                                                                                               |
+| `splitView`                     | Renders content in the split view area (only if the private layout has the split-view prop set to true).                                                                            |
+| `headline` _(deprecated)_       | Previously rendered a headline above the title. Existing content now renders prepended to the title.                                                                                |
+| `actions:append` _(deprecated)_ | Previously added content after the action buttons. Existing content now renders in the secondary actions zone alongside the `actions` slot. Use `actions:primary` for primary CTAs. |
+
+::callout{icon="material-symbols:info-outline"}
+**Primary vs. secondary actions**
+Use `actions:primary` for the page's main call to action — it renders with a labeled, prominent button. Use `actions` for secondary, icon-style action buttons.
+::
 
 :partial{content="extensions-app-internals"}
diff --git a/content/guides/09.extensions/3.app-extensions/6.themes.md b/content/guides/09.extensions/3.app-extensions/6.themes.md
index fd22c15c..a87b269e 100644
--- a/content/guides/09.extensions/3.app-extensions/6.themes.md
+++ b/content/guides/09.extensions/3.app-extensions/6.themes.md
@@ -48,6 +48,19 @@ rules: {
 }
 ```
 
+::callout{icon="material-symbols:warning-rounded" color="warning"}
+**Theme schema changes in Directus 12**
+The studio design refresh in Directus 12 reorganized the theme schema. Custom themes referencing the removed rules will silently lose those overrides — update your theme to the new tokens:
+
+- `navigation.background`, `navigation.backgroundAccent`, `navigation.borderWidth`, `navigation.borderColor`, `header.background`, `header.borderWidth`, and `header.borderColor` → moved to the new `shell.*` scope (e.g. `shell.background`, `shell.backgroundAccent`, `shell.borderWidth`, `shell.borderColor`). The corresponding CSS variables changed from `--theme--navigation--*` / `--theme--header--*` to `--theme--shell--*`.
+- `header.headline.foreground` and `header.headline.fontFamily` were removed along with the underlying `headline` slot. The CSS variables `--theme--header--headline--foreground` and `--theme--header--headline--font-family` no longer exist.
+- `borderColorFocus`, `boxShadowHover`, and `boxShadowFocus` were removed in favor of the new `focusRingColor` token. Interface extensions targeting `--theme--form--field--input--border-color-focus` or `--theme--form--field--input--box-shadow-focus` should migrate to `--theme--form--field--input--focus-ring-color`.
+- `navigation.project.background`, `navigation.project.borderWidth`, and `navigation.project.borderColor` were removed and no longer have any effect.
+- `section.toggle.borderWidth` and `section.toggle.borderColor` were removed in favor of section-level border tokens.
+- `defineLayout()` no longer exposes `headerShadow` or `sidebarShadow`; `boxShadow` was removed from the header theme rules.
+
+::
+
 Any rules that are not defined will fallback to the default theme for it's appearance. See the
 ([`default dark theme`](https://github.com/directus/directus/blob/main/packages/themes/src/themes/dark/default.ts) and
 [`default light theme`](https://github.com/directus/directus/blob/main/packages/themes/src/themes/light/default.ts)).
diff --git a/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md b/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md
index ee3d195e..2c847e9f 100644
--- a/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md
+++ b/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md
@@ -7,9 +7,9 @@ authors:
     title: Guest Author
 description: Learn how to navigate between multiple pages in module extensions.
 ---
+
 Modules are an empty canvas in Directus with an empty navigation panel on the left, page header at the top and the
-sidebar on the right. This guide will help you set up a multi-page module with navigation in the navigation bar and link
-breadcrumbs.
+sidebar on the right. This guide will help you set up a multi-page module with navigation in the navigation bar.
 
 ![A custom module has three items in the navigation - Home, Hello World, and Contact Us. The homepage displays an image, three navigation tiles, and some copy.](/img/db55ac3f-016e-4531-8282-a9445482c02e.webp)
 
@@ -44,21 +44,21 @@ Open `index.js` and make the following changes:
 - Update the `icon`. You can choose an icon from the library [here](https://fonts.google.com/icons).
 
 ```js
-import ModuleComponent from './module.vue';
+import ModuleComponent from "./module.vue";
 
 export default {
-  id: 'landing-page', // root URI
-  name: 'Landing Page',
-  icon: 'rocket_launch',
+  id: "landing-page", // root URI
+  name: "Landing Page",
+  icon: "rocket_launch",
   routes: [
     {
-      path: '',
+      path: "",
       props: true,
       component: ModuleComponent,
     },
     {
-      name: 'page',
-      path: ':page',
+      name: "page",
+      path: ":page",
       props: true,
       component: ModuleComponent,
     },
@@ -79,7 +79,7 @@ Open the `module.vue` file and the template will look like this:
 
 ```vue
 <template>
-    <private-view title="My Custom Module">Content goes here...</private-view>
+  <private-view title="My Custom Module">Content goes here...</private-view>
 </template>
 
 <script>
@@ -91,8 +91,8 @@ Now you need to build your page inside the `private-view`. Import `ref` and `wat
 `extensions-sdk` above the export:
 
 ```js
-import { ref, watch } from 'vue';
-import { useApi } from '@directus/extensions-sdk';
+import { ref, watch } from "vue";
+import { useApi } from "@directus/extensions-sdk";
 ```
 
 Inside `export default` add the page property to receive the URI value.
@@ -126,63 +126,44 @@ setup(props) {
 ```
 
 Directus has a header element at the top of the module that uses the title attribute of the private view as the page
-title. This will need to be converted to a variable so it changes when the page changes. It also has a breadcrumb which
-will help with page navigation. Create a variable inside the setup called `page_title` and breadcrumb using `ref`.
+title. This will need to be converted to a variable so it changes when the page changes. Create a variable inside the
+setup called `page_title` using `ref`.
 
 ```js
 setup(props) {
   const api = useApi();
   const page_title = ref('');
-  const breadcrumb = ref([
-    {
-      name: 'Home',
-      to: `/landing-page`,
-    },
-  ]);
 
   // Existing code here
 },
 ```
 
-Add `page_title` and `breadcrumb` to the returned objects and create the `render_page` function to update the
-`page_title` and `breadcrumb`:
+Add `page_title` to the returned objects and create the `render_page` function to update the `page_title`:
 
 ```js
-return { page_title, breadcrumb, };
+return { page_title };
 
-function render_page(page){
-  if(page === null){
-    page_title.value = '500: Internal Server Error';
-    breadcrumb.value[1] = {};
+function render_page(page) {
+  if (page === null) {
+    page_title.value = "500: Internal Server Error";
   } else {
-    switch(page) {
-      case 'home':
-        page_title.value = 'Home';
+    switch (page) {
+      case "home":
+        page_title.value = "Home";
         break;
-      case 'hello-world':
-        page_title.value = 'Hello World';
+      case "hello-world":
+        page_title.value = "Hello World";
         break;
-      case 'contact':
-        page_title.value = 'Contact Us';
+      case "contact":
+        page_title.value = "Contact Us";
         break;
       default:
-        page_title.value = '404: Not Found';
-    }
-
-
-    if(page === 'home'){
-      breadcrumb.value[1] = {};
-    } else {
-      breadcrumb.value[1] = {
-        name: page_title.value,
-        to: `/landing-page/${page}`,
-      };
+        page_title.value = "404: Not Found";
     }
   }
 
-
   console.log(`Title: ${page_title.value}`);
-};
+}
 ```
 
 Ideally this would be an API query instead of the switch case. The `page` variable contains the current URI, use this to
@@ -190,114 +171,105 @@ fetch the page details through the API and return the page title. If no result i
 page. Here is an example:
 
 ```js
-api.get(`/items/pages?fields=title&filter[uri][_eq]=${page}`).then((rsp) => {
-    if(rsp.data.data){
-        rsp.data.data.forEach(item => {
-            page_title.value = item.title;
-        });
+api
+  .get(`/items/pages?fields=title&filter[uri][_eq]=${page}`)
+  .then((rsp) => {
+    if (rsp.data.data) {
+      rsp.data.data.forEach((item) => {
+        page_title.value = item.title;
+      });
     } else {
-        page_title.value = "404: Not Found";
+      page_title.value = "404: Not Found";
     }
-}).catch((error) => {
+  })
+  .catch((error) => {
     console.log(error);
-});
+  });
 ```
 
-To tie all this together, update the `private-view` `title` attribute to the `page_title` variable, include the
-`breadcrumb` using the `#headline` template slot and add the `router-view` element at the bottom. Note that the router
-view is linked to the `page` property from the URI.
+To tie all this together, update the `private-view` `title` attribute to the `page_title` variable and add the
+`router-view` element at the bottom. Note that the router view is linked to the `page` property from the URI.
 
 ```html
 <private-view :title="page_title">
-  <template v-if="breadcrumb" #headline>
-    <v-breadcrumb :items="breadcrumb" />
-  </template>
   <router-view name="landing-page" :page="page" />
 </private-view>
 ```
 
-Looking at this now, the page title will be Home for the root page and the breadcrumbs are above the title:
-
-![Breadcrumb showing only Home](/img/8ecff87c-69f1-4524-87f4-7a997ffa889f.webp)
-
-When the page changes to `/admin/landing-page/hello-world`, the page title changes and the breadcrumbs are updated:
-
-![Breadcrumb showing both Home and Hello World as a second level item](/img/ed29fd15-abf7-40e7-bb74-22ed5365ac3e.webp)
+Looking at this now, the page title will be Home for the root page. When the page changes to
+`/admin/landing-page/hello-world`, the page title updates accordingly.
 
 ## Implement Page Navigation
 
 On the left side is an empty navigation panel where you can add content through template slots.
 
-Create an `all_pages` variable after the breadcrumbs to use for the navigation object:
+Create an `all_pages` variable after `page_title` to use for the navigation object:
 
 ```js
-const page_title = ref('');
-const breadcrumb = ref([
-  {
-    name: 'Home',
-    to: `/landing-page`,
-  },
-]);
+const page_title = ref("");
 const all_pages = ref([]); // [!code ++]
 ```
 
 Return the object with the others:
 
 ```js
-return { page_title, breadcrumb }; // [!code --]
-return { page_title, breadcrumb, all_pages };  // [!code ++]
+return { page_title }; // [!code --]
+return { page_title, all_pages }; // [!code ++]
 ```
 
 Create a function called `fetch_all_pages` underneath the `render_pages` function that will output the required object
 for a built-in Directus component called `v-list`. Ideally this function will use an API to fetch this information:
 
 ```js
-function fetch_all_pages(){
+function fetch_all_pages() {
   all_pages.value = [
     {
-      label: 'Home',
-      uri: 'landing-page',
-      to: '/landing-page',
-      icon: 'home',
-      color: '',
+      label: "Home",
+      uri: "landing-page",
+      to: "/landing-page",
+      icon: "home",
+      color: "",
     },
     {
-      label: 'Hello World',
-      uri: 'hello-world',
-      to: '/landing-page/hello-world',
-      icon: 'public',
-      color: '',
+      label: "Hello World",
+      uri: "hello-world",
+      to: "/landing-page/hello-world",
+      icon: "public",
+      color: "",
     },
     {
-      label: 'Contact Us',
-      uri: 'contact',
-      to: '/landing-page/contact',
-      icon: 'phone',
-      color: '',
+      label: "Contact Us",
+      uri: "contact",
+      to: "/landing-page/contact",
+      icon: "phone",
+      color: "",
     },
   ];
-};
+}
 ```
 
 Here is an example of the above code as an API using a collection in Directus called `pages`:
 
 ```js
-function fetch_all_pages(){
-  api.get('/items/pages?fields=title,uri,icon,color').then((rsp) => {
-    all_pages.value = [];
-    rsp.data.data.forEach(item => {
-      all_pages.value.push({
-        label: item.title,
-        uri: item.uri,
-        to: `/landing-page/${item.uri}`,
-        icon: item.icon,
-        color: item.color,
+function fetch_all_pages() {
+  api
+    .get("/items/pages?fields=title,uri,icon,color")
+    .then((rsp) => {
+      all_pages.value = [];
+      rsp.data.data.forEach((item) => {
+        all_pages.value.push({
+          label: item.title,
+          uri: item.uri,
+          to: `/landing-page/${item.uri}`,
+          icon: item.icon,
+          color: item.color,
+        });
       });
+    })
+    .catch((error) => {
+      console.log(error);
     });
-  }).catch((error) => {
-    console.log(error);
-  });
-};
+}
 ```
 
 Run this function after the `render_page` function:
@@ -316,8 +288,15 @@ code inside this file:
 ```vue
 <template>
   <v-list nav v-if="pages">
-    <v-list-item v-for="navItem in pages" :key="navItem.to" :active="navItem.uri == current" :to="navItem.to">
-      <v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
+    <v-list-item
+      v-for="navItem in pages"
+      :key="navItem.to"
+      :active="navItem.uri == current"
+      :to="navItem.to"
+    >
+      <v-list-item-icon
+        ><v-icon :name="navItem.icon" :color="navItem.color"
+      /></v-list-item-icon>
       <v-list-item-content>
         <v-text-overflow :text="navItem.label" />
       </v-list-item-content>
@@ -325,10 +304,9 @@ code inside this file:
   </v-list>
 </template>
 
-
 <script>
-export default{
-  name: 'PageNavigation',
+export default {
+  name: "PageNavigation",
   inheritAttrs: false,
   props: {
     current: {
@@ -338,7 +316,7 @@ export default{
     pages: {
       type: Array,
       default: [],
-    }
+    },
   },
 };
 </script>
@@ -357,19 +335,19 @@ To start using the new component in `module.vue`, add it to the `export default`
 
 ```js
 export default {
-  components: {  // [!code ++]
-    PageNavigation,  // [!code ++]
-  },  // [!code ++]
-  props: {
-  }
-}
+  components: {
+    // [!code ++]
+    PageNavigation, // [!code ++]
+  }, // [!code ++]
+  props: {},
+};
 ```
 
-Now this can be used in the template. After the `breadcrumbs`, add the following code:
+Now this can be used in the template. Inside the `private-view`, add the following code:
 
 ```vue
 <template #navigation>
-  <page-navigation :current="page" :pages="all_pages"/>
+  <page-navigation :current="page" :pages="all_pages" />
 </template>
 ```
 
@@ -394,11 +372,16 @@ In the template, create the HTML structure after the navigation and some new var
 ```html
 <div class="lp-container">
   <div class="lp-banner" v-if="page_banner">
-    <img :src="page_banner" alt=""/>
+    <img :src="page_banner" alt="" />
   </div>
   <div class="lp-cards" v-if="page_cards">
-    <div class="lp-card" v-for="card in page_cards.filter(item => (item.uri != page))" :key="card.uri" @click="change_page(card.to)">
-      <img class="lp-card-image" :src="card.image" alt=""/>
+    <div
+      class="lp-card"
+      v-for="card in page_cards.filter(item => (item.uri != page))"
+      :key="card.uri"
+      @click="change_page(card.to)"
+    >
+      <img class="lp-card-image" :src="card.image" alt="" />
       <span class="lp-card-title">{{ card.label }}</span>
     </div>
   </div>
@@ -424,10 +407,10 @@ Add a new function to change the page called `change_page`. Import the `vue-rout
 import:
 
 ```js
-import { ref, watch } from 'vue';
-import { useApi } from '@directus/extensions-sdk';
-import { useRouter } from 'vue-router';  // [!code ++]
-import PageNavigation from './components/navigation.vue';
+import { ref, watch } from "vue";
+import { useApi } from "@directus/extensions-sdk";
+import { useRouter } from "vue-router"; // [!code ++]
+import PageNavigation from "./components/navigation.vue";
 ```
 
 Assign the router to a variable:
@@ -446,38 +429,48 @@ Create the function before the return and add the three new variables and the ne
 items. This will allow them to be used in the template.
 
 ```js
-function change_page(to){
+function change_page(to) {
   const next = router.resolve(`${to}`);
   router.push(next);
 }
 
-return { page_title, page_banner, page_cards, page_body, breadcrumb, all_pages, change_page };
+return {
+  page_title,
+  page_banner,
+  page_cards,
+  page_body,
+  all_pages,
+  change_page,
+};
 ```
 
 Inside the render_page function, start adding content to these new variables. Here is an example using static content.
 
 ```js
-switch(page) {
-  case 'home':
-    page_title.value = 'Home';
-    page_banner.value = '/assets/83BD365C-C3CE-4015-B2AD-63EDA9E52A69?width=2000&height=563&fit=cover';
+switch (page) {
+  case "home":
+    page_title.value = "Home";
+    page_banner.value =
+      "/assets/83BD365C-C3CE-4015-B2AD-63EDA9E52A69?width=2000&height=563&fit=cover";
     page_cards.value = all_pages.value;
-    page_body.value = '<p>Lorem ipsum dolor sit amet</p>';
+    page_body.value = "<p>Lorem ipsum dolor sit amet</p>";
     break;
-  case 'hello-world':
-    page_title.value = 'Hello World';
-    page_banner.value = '/assets/853B243D-A1BF-6051-B1BF-23EDA8E32A09?width=2000&height=563&fit=cover';
+  case "hello-world":
+    page_title.value = "Hello World";
+    page_banner.value =
+      "/assets/853B243D-A1BF-6051-B1BF-23EDA8E32A09?width=2000&height=563&fit=cover";
     page_cards.value = all_pages.value;
-    page_body.value = '<p>Lorem ipsum dolor sit amet</p>';
+    page_body.value = "<p>Lorem ipsum dolor sit amet</p>";
     break;
-  case 'contact':
-    page_title.value = 'Contact Us';
-    page_banner.value = '/assets/91CE173D-A1AD-4104-A1EC-74FCB8F41B58?width=2000&height=563&fit=cover';
+  case "contact":
+    page_title.value = "Contact Us";
+    page_banner.value =
+      "/assets/91CE173D-A1AD-4104-A1EC-74FCB8F41B58?width=2000&height=563&fit=cover";
     page_cards.value = [];
-    page_body.value = '<p>Lorem ipsum dolor sit amet</p>';
+    page_body.value = "<p>Lorem ipsum dolor sit amet</p>";
     break;
   default:
-    page_title.value = '404: Not Found';
+    page_title.value = "404: Not Found";
 }
 ```
 
@@ -485,19 +478,22 @@ Or from the internal API providing you have a table with the fields `title`, `ba
 (WYSIWYG field):
 
 ```js
-api.get(`/items/pages?fields=title,banner,content&filter[uri][_eq]=${page}`).then((rsp) => {
-  if(rsp.data.data){
-    rsp.data.data.forEach(item => {
-      page_title.value = item.title;
-      page_banner.value = `/assets/${item.banner}?width=2000&height=563&fit=cover`;
-      page_body.value = item.content;
-    });
-  } else {
-    page_title.value = "404: Not Found";
-  }
-}).catch((error) => {
-  console.log(error);
-});
+api
+  .get(`/items/pages?fields=title,banner,content&filter[uri][_eq]=${page}`)
+  .then((rsp) => {
+    if (rsp.data.data) {
+      rsp.data.data.forEach((item) => {
+        page_title.value = item.title;
+        page_banner.value = `/assets/${item.banner}?width=2000&height=563&fit=cover`;
+        page_body.value = item.content;
+      });
+    } else {
+      page_title.value = "404: Not Found";
+    }
+  })
+  .catch((error) => {
+    console.log(error);
+  });
 ```
 
 ### Work With Images
@@ -528,13 +524,15 @@ export default function useDirectusToken(directusApi) {
       queryParams.push(`${key}=${value}`);
     }
 
-    return path.includes('?') ? `${path}&${queryParams.join('&')}` : `${path}?${queryParams.join('&')}`;
+    return path.includes("?")
+      ? `${path}&${queryParams.join("&")}`
+      : `${path}?${queryParams.join("&")}`;
   }
 
   function getToken() {
     return (
-      directusApi.defaults?.headers?.['Authorization']?.split(' ')[1] ||
-      directusApi.defaults?.headers?.common?.['Authorization']?.split(' ')[1] ||
+      directusApi.defaults?.headers?.["Authorization"]?.split(" ")[1] ||
+      directusApi.defaults?.headers?.common?.["Authorization"]?.split(" ")[1] ||
       null
     );
   }
@@ -546,7 +544,7 @@ export default function useDirectusToken(directusApi) {
       access_token: accessToken,
     });
   }
-};
+}
 ```
 
 This will use the access token of the current user to render the images. Alternatively, you can enable Read permissions
@@ -555,7 +553,7 @@ on the Public role for the image ID or images with a specific folder ID to remov
 Import the function into the `module.vue` file to make it available in your script:
 
 ```js
-import useDirectusToken from './use-directus-token';
+import useDirectusToken from "./use-directus-token";
 ```
 
 Include the function `AddTokenToURL` as a variable from the new script.
@@ -573,7 +571,9 @@ setup(props) {
 Then wrap any internal images with this function:
 
 ```js
-page_banner.value = addTokenToURL(`/assets/${item.banner}?width=2000&height=563&fit=cover`);
+page_banner.value = addTokenToURL(
+  `/assets/${item.banner}?width=2000&height=563&fit=cover`,
+);
 ```
 
 ::callout{icon="material-symbols:info-outline}
@@ -597,7 +597,7 @@ the following SCSS:
   width: 100%;
   max-width: 1024px;
 
-  &> div {
+  & > div {
     margin-bottom: var(--content-padding);
   }
 }
@@ -694,22 +694,22 @@ images from within Directus to surface on the page. From here you can create con
 of the Directus platform.
 
 ```js [index.js]
-import ModuleComponent from './module.vue';
+import ModuleComponent from "./module.vue";
 
 export default {
-  id: 'landing-page',
-  name: 'Landing Page',
-  icon: 'rocket_launch',
+  id: "landing-page",
+  name: "Landing Page",
+  icon: "rocket_launch",
   routes: [
     {
-      name: 'home',
-      path: '',
+      name: "home",
+      path: "",
       props: true,
       component: ModuleComponent,
     },
     {
-      name: 'page',
-      path: ':page',
+      name: "page",
+      path: ":page",
       props: true,
       component: ModuleComponent,
     },
@@ -720,21 +720,23 @@ export default {
 ```vue [module.vue]
 <template>
   <private-view :title="page_title">
-    <template v-if="breadcrumb" #headline>
-      <v-breadcrumb :items="breadcrumb" />
-    </template>
-
     <template #navigation>
-      <page-navigation :current="page" :pages="all_pages"/>
+      <page-navigation :current="page" :pages="all_pages" />
     </template>
 
     <div class="lp-container">
       <div class="lp-banner" v-if="page_banner">
-        <img :src="page_banner" alt=""/>
+        <img :src="page_banner" alt="" />
       </div>
       <div class="lp-cards" v-if="page_cards">
-        <div class="lp-card" v-for="card in page_cards.filter(item => (item.uri != page))" :key="card.uri" :style="`background-color: ${card.color}`" @click="change_page(card.to)">
-          <v-icon :name="card.icon"/>
+        <div
+          class="lp-card"
+          v-for="card in page_cards.filter((item) => item.uri != page)"
+          :key="card.uri"
+          :style="`background-color: ${card.color}`"
+          @click="change_page(card.to)"
+        >
+          <v-icon :name="card.icon" />
           <span class="lp-card-title">{{ card.label }}</span>
         </div>
       </div>
@@ -746,11 +748,11 @@ export default {
 </template>
 
 <script>
-import { ref, watch } from 'vue';
-import { useApi } from '@directus/extensions-sdk';
-import { useRouter } from 'vue-router';
-import PageNavigation from './components/navigation.vue';
-import useDirectusToken from './use-directus-token.js';
+import { ref, watch } from "vue";
+import { useApi } from "@directus/extensions-sdk";
+import { useRouter } from "vue-router";
+import PageNavigation from "./components/navigation.vue";
+import useDirectusToken from "./use-directus-token.js";
 
 export default {
   components: {
@@ -759,106 +761,103 @@ export default {
   props: {
     page: {
       type: String,
-      default: 'home',
+      default: "home",
     },
   },
   setup(props) {
     const router = useRouter();
     const api = useApi();
     const { addTokenToURL } = useDirectusToken(api);
-    const page_title = ref('');
-    const page_banner = ref('');
+    const page_title = ref("");
+    const page_banner = ref("");
     const page_cards = ref([]);
-    const page_body = ref('');
-    const breadcrumb = ref([
-            {
-                name: 'Home',
-                to: `/landing-page`,
-            },
-        ]);
+    const page_body = ref("");
     const all_pages = ref([]);
 
     render_page(props.page);
     fetch_all_pages();
 
     watch(
-            () => props.page,
-            () => {
-                render_page(props.page);
-            }
-        );
+      () => props.page,
+      () => {
+        render_page(props.page);
+      },
+    );
 
-    function change_page(to){
+    function change_page(to) {
       const next = router.resolve(`${to}`);
       router.push(next);
     }
 
-    return { page_title, page_banner, page_cards, page_body, breadcrumb, all_pages, change_page };
-
-    function render_page(page){
-      if(page === null){
-        page_title.value = '500: Internal Server Error';
-        breadcrumb.value.splice(1, 1);
-        page_banner.value = '';
+    return {
+      page_title,
+      page_banner,
+      page_cards,
+      page_body,
+      all_pages,
+      change_page,
+    };
+
+    function render_page(page) {
+      if (page === null) {
+        page_title.value = "500: Internal Server Error";
+        page_banner.value = "";
         page_cards.value = [];
-        page_body.value = '';
+        page_body.value = "";
       } else {
-        switch(page) {
-          case 'home':
-            page_title.value = 'Home';
-            page_banner.value = addTokenToURL('/assets/83BD365C-C3CE-4015-B2AD-63EDA9E52A69?width=2000&height=563&fit=cover');
+        switch (page) {
+          case "home":
+            page_title.value = "Home";
+            page_banner.value = addTokenToURL(
+              "/assets/83BD365C-C3CE-4015-B2AD-63EDA9E52A69?width=2000&height=563&fit=cover",
+            );
             page_cards.value = all_pages.value;
-            page_body.value = '<p>Lorem ipsum dolor sit amet.</p>';
+            page_body.value = "<p>Lorem ipsum dolor sit amet.</p>";
             break;
-          case 'hello-world':
-            page_title.value = 'Hello World';
-            page_banner.value = addTokenToURL('/assets/853B243D-A1BF-6051-B1BF-23EDA8E32A09?width=2000&height=563&fit=cover');
+          case "hello-world":
+            page_title.value = "Hello World";
+            page_banner.value = addTokenToURL(
+              "/assets/853B243D-A1BF-6051-B1BF-23EDA8E32A09?width=2000&height=563&fit=cover",
+            );
             page_cards.value = all_pages.value;
-            page_body.value = '<p>Lorem ipsum dolor sit amet.</p>';
+            page_body.value = "<p>Lorem ipsum dolor sit amet.</p>";
             break;
-          case 'contact':
-            page_title.value = 'Contact Us';
-            page_banner.value = addTokenToURL('/assets/91CE173D-A1AD-4104-A1EC-74FCB8F41B58?width=2000&height=563&fit=cover');
+          case "contact":
+            page_title.value = "Contact Us";
+            page_banner.value = addTokenToURL(
+              "/assets/91CE173D-A1AD-4104-A1EC-74FCB8F41B58?width=2000&height=563&fit=cover",
+            );
             page_cards.value = [];
-            page_body.value = '<p>Lorem ipsum dolor sit amet.</p>';
+            page_body.value = "<p>Lorem ipsum dolor sit amet.</p>";
             break;
           default:
-            page_title.value = '404: Not Found';
-        }
-
-        if(page === 'home'){
-          breadcrumb.value.splice(1, 1);
-        } else {
-          breadcrumb.value[1] = {
-            name: page_title.value,
-            to: `/landing-page/${page}`,
-          };
+            page_title.value = "404: Not Found";
         }
       }
     }
 
-    function fetch_all_pages(){
+    function fetch_all_pages() {
       all_pages.value = [
         {
-          label: 'Home',
-          uri: 'landing-page',
-          to: '/landing-page',
-          icon: 'home',
-          color: '#6644FF',
+          label: "Home",
+          uri: "landing-page",
+          to: "/landing-page",
+          icon: "home",
+          color: "#6644FF",
         },
         {
-          label: 'Hello World',
-          uri: 'hello-world',
-          to: '/landing-page/hello-world',
-          icon: 'public',
-          color: '#2ECDA7',
+          label: "Hello World",
+          uri: "hello-world",
+          to: "/landing-page/hello-world",
+          icon: "public",
+          color: "#2ECDA7",
         },
         {
-          label: 'Contact Us',
-          uri: 'contact',
-          to: '/landing-page/contact',
-          icon: 'phone',
-          color: '#3399FF',
+          label: "Contact Us",
+          uri: "contact",
+          to: "/landing-page/contact",
+          icon: "phone",
+          color: "#3399FF",
         },
       ];
       console.log(all_pages.value);
@@ -868,70 +867,77 @@ export default {
 </script>
 
 <style lang="scss">
-  .lp-container {
-    padding: var(--content-padding);
-    padding-top: 0;
-    width: 100%;
-    max-width: 1024px;
+.lp-container {
+  padding: var(--content-padding);
+  padding-top: 0;
+  width: 100%;
+  max-width: 1024px;
 
-    &> div {
-      margin-bottom: var(--content-padding);
-    }
+  & > div {
+    margin-bottom: var(--content-padding);
   }
+}
 
-  .lp-banner {
+.lp-banner {
+  border-radius: var(--border-radius);
+  overflow: hidden;
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+
+.lp-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: var(--input-padding);
+  row-gap: var(--input-padding);
+
+  .lp-card {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     border-radius: var(--border-radius);
-    overflow: hidden;
+    padding: var(--input-padding);
+    color: white;
 
-    img {
-      display: block;
+    .v-icon {
       width: 100%;
-    }
-  }
+      height: 50px;
+      margin-bottom: 6px;
 
-  .lp-cards {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    column-gap: var(--input-padding);
-      row-gap: var(--input-padding);
-
-    .lp-card {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      border-radius: var(--border-radius);
-      padding: var(--input-padding);
-      color: white;
-
-      .v-icon {
-        width: 100%;
-        height: 50px;
-        margin-bottom: 6px;
-
-        i {
-          font-size: 50px;
-            color: white;
-        }
+      i {
+        font-size: 50px;
+        color: white;
       }
+    }
 
-      .lp-card-title {
-        display: block;
-        font-weight: bold;
-        font-size: 1.4em;
-        line-height: 1.2;
-      }
+    .lp-card-title {
+      display: block;
+      font-weight: bold;
+      font-size: 1.4em;
+      line-height: 1.2;
     }
   }
+}
 </style>
 ```
 
 ```vue [components/navigation.vue]
 <template>
   <v-list nav v-if="pages">
-    <v-list-item v-for="navItem in pages" :key="navItem.to" :active="navItem.uri == current" :to="navItem.to">
-      <v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
+    <v-list-item
+      v-for="navItem in pages"
+      :key="navItem.to"
+      :active="navItem.uri == current"
+      :to="navItem.to"
+    >
+      <v-list-item-icon
+        ><v-icon :name="navItem.icon" :color="navItem.color"
+      /></v-list-item-icon>
       <v-list-item-content>
         <v-text-overflow :text="navItem.label" />
       </v-list-item-content>
@@ -941,7 +947,7 @@ export default {
 
 <script>
 export default {
-  name: 'PageNavigation',
+  name: "PageNavigation",
   inheritAttrs: false,
   props: {
     current: {
@@ -953,7 +959,7 @@ export default {
       default: [],
     },
   },
-}
+};
 </script>
 ```
 
@@ -972,13 +978,15 @@ export default function useDirectusToken(directusApi) {
       queryParams.push(`${key}=${value}`);
     }
 
-    return path.includes('?') ? `${path}&${queryParams.join('&')}` : `${path}?${queryParams.join('&')}`;
+    return path.includes("?")
+      ? `${path}&${queryParams.join("&")}`
+      : `${path}?${queryParams.join("&")}`;
   }
 
   function getToken() {
     return (
-      directusApi.defaults?.headers?.['Authorization']?.split(' ')[1] ||
-      directusApi.defaults?.headers?.common?.['Authorization']?.split(' ')[1] ||
+      directusApi.defaults?.headers?.["Authorization"]?.split(" ")[1] ||
+      directusApi.defaults?.headers?.common?.["Authorization"]?.split(" ")[1] ||
       null
     );
   }
diff --git a/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md b/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md
index b4278b74..d32a4f22 100644
--- a/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md
+++ b/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md
@@ -7,6 +7,7 @@ authors:
     title: Guest Author
 description: Learn about all of the slots available in your custom modules.
 ---
+
 This guide follows on [Create a Custom Portal Module](/tutorials/extensions/implement-navigation-in-multipage-custom-modules), where you created
 a landing page module. You will learn how to add native sidebar dropdown element, action buttons and search, a split
 view window, and layout options using the built-in functions of Directus. These help provide a more coherent experience
@@ -20,44 +21,19 @@ The private view in Directus has a number of slots available which are empty by
 template tag. For example:
 
 ```vue
-<template #slot_name>
-	// Content to insert into the slot
-</template>
+<template #slot_name>// Content to insert into the slot</template>
 ```
 
 The slots available to you in this view are:
 
-- `headline`
 - `title-outer:prepend`
 - `title-outer:append`
-- `actions`
 - `actions:prepend`
+- `actions`
+- `actions:primary`
 - `sidebar`
 - `splitView`
 
-## `headline`
-
-This is the area above the page title utilized for the breadcrumbs. Use the following code to include a breadcrumb.
-
-```vue
-<template v-if="breadcrumb" #headline>
-	<v-breadcrumb :items="breadcrumb" />
-</template>
-```
-
-`v-breadcumb` accepts a list of objects which will output the pages in order of the list:
-
-```js
-[
-	{
-		name: 'Home',
-		to: '/landing-page',
-	},
-]
-```
-
-![Two examples of breadcrumbs. One showing just Home, and one adding a second-level page called Hello World](/img/8284cf66-1d53-4113-b2f7-532d8d8498c3.webp)
-
 ## `title-outer:prepend`
 
 You can add content to the left of the title using the **Title Outer Prepend** slot, which Directus uses this slot for
@@ -65,17 +41,17 @@ an icon inside a circle. The icon relates to the current page such as the collec
 
 ```vue
 <template #title-outer:prepend>
-	<v-button class="header-icon" rounded disabled icon secondary>
-		<v-icon name="access_time" />
-	</v-button>
+  <v-button class="header-icon" disabled icon secondary>
+    <v-icon name="access_time" />
+  </v-button>
 </template>
 ```
 
-![An icon is shown to the left of the title and breadcrumbs](/img/51558a50-8edf-490b-9c54-5c39a4d3b14d.webp)
+![An icon is shown to the left of the title](/img/51558a50-8edf-490b-9c54-5c39a4d3b14d.webp)
 
 ::callout{icon="material-symbols:info-outline"}
 
-The icon is `rounded`, `disabled` and `secondary`. This will keep the same look as the rest of Directus but you can
+The icon is `disabled` and `secondary`. This will keep the same look as the rest of Directus but you can
 remove these to customize the look and feel.
 
 [Learn more about the usage of Directus UI Components ->](/guides/extensions/app-extensions/ui-library)
@@ -89,11 +65,7 @@ bookmarks. In this example, the slot is used for a clickable icon button.
 
 ```vue
 <template #title-outer:append>
-	<v-icon
-		clickable
-		name="add_circle"
-		@click="buttonAction()"
-	/>
+  <v-icon clickable name="add_circle" @click="buttonAction()" />
 </template>
 ```
 
@@ -112,12 +84,12 @@ and a search bar.
 
 ```vue
 <template #actions>
-	<v-input class="module-search" :model-value="search">
-		<template #prepend><v-icon name="search" /></template>
-	</v-input>
-	<v-button v-tooltip.bottom="'COOL'" icon rounded>
-		<v-icon name="launch" />
-	</v-button>
+  <v-input class="module-search" :model-value="search">
+    <template #prepend><v-icon name="search" /></template>
+  </v-input>
+  <v-button v-tooltip.bottom="'COOL'" icon>
+    <v-icon name="launch" />
+  </v-button>
 </template>
 ```
 
@@ -125,19 +97,19 @@ You will also need to style the search. I suggest matching the existing one in D
 
 ```scss
 .v-input.full-width.module-search {
-    display: flex;
-    width: 300px;
-    height: 44px;
-
-    .input {
-        width: auto;
-        padding: 0 10px;
-        overflow: hidden;
-        color: var(--theme--foreground);
-        text-overflow: ellipsis;
-        background-color: var(--theme--background);
-        border-radius: 22px;
-    }
+  display: flex;
+  width: 300px;
+  height: 44px;
+
+  .input {
+    width: auto;
+    padding: 0 10px;
+    overflow: hidden;
+    color: var(--theme--foreground);
+    text-overflow: ellipsis;
+    background-color: var(--theme--background);
+    border-radius: 22px;
+  }
 }
 ```
 
@@ -155,9 +127,7 @@ You can add content before the actions slot like page information and selection
 to ensure it outputs on a single line.
 
 ```vue
-<template #actions:prepend>
-	ACTION PREPEND
-</template>
+<template #actions:prepend>ACTION PREPEND</template>
 ```
 
 ![To the left of the search box is the text 'ACTION PREPEND' broken over two lines and unstyled.](/img/42c337a1-61a8-4d75-88fb-85b1e1c9dac6.webp)
@@ -168,6 +138,20 @@ This space is quite limited due to the length of the page title and the amount o
 
 ::
 
+## `actions:primary`
+
+Use this slot to render the page's primary call to action. Unlike the `actions` slot — which is intended for secondary,
+icon-style buttons — `actions:primary` renders a single, prominent labeled button on the right side of the header.
+
+```vue
+<template #actions:primary>
+  <v-button @click="createItem">
+    <v-icon name="add" left />
+    Create Item
+  </v-button>
+</template>
+```
+
 ## `sidebar`
 
 By default, your sidebar is empty but still present. It’s worth making use of this real estate with various tasks or
@@ -179,14 +163,14 @@ related to the current page, then update this content within your `setup` whenev
 section outputs some custom text.
 
 ```vue
-		<template #sidebar>
-			<sidebar-detail id="information" icon="info" title="Information">
-				PAGE DESCRIPTION
-			</sidebar-detail>
-			<sidebar-detail id="sidebar-item" icon="layers" title="SIDEBAR ITEM">
-				SIDEBAR ITEM CONTENT
-			</sidebar-detail>
-		</template>
+<template #sidebar>
+  <sidebar-detail id="information" icon="info" title="Information">
+    PAGE DESCRIPTION
+  </sidebar-detail>
+  <sidebar-detail id="sidebar-item" icon="layers" title="SIDEBAR ITEM">
+    SIDEBAR ITEM CONTENT
+  </sidebar-detail>
+</template>
 ```
 
 ![Sidebar shows a title called Information with a close button, and a collapsible section called Sidebar Item with text inside of it.](/img/7c814289-e3ed-4c29-a29e-eca48ffb432a.webp)
@@ -199,41 +183,43 @@ action button as shown below but can be triggered any way you choose. To use thi
 attributes to the parent `private-view` and create a toggle button. The actions slot is a convenient place:
 
 ```html
-<private-view :splitView="livePreviewMode" :split-view-min-width="310" :title="page_title">
-	<template #actions>
-		<v-button
-			v-tooltip.bottom="!livePreviewMode ? 'Enable Split View' : 'Disable Split View'"
-			rounded
-			icon
-			class="action-preview"
-			:secondary="!livePreviewMode"
-			@click="toggleSplitView"
-		>
-			<v-icon name="visibility" outline />
-		</v-button>
-	</template>
-
-
-	<template #splitView>
-		<div ref="livePreviewEl" class="live-preview">
-			<div class="container">
-				<div class="iframe-view">
-					<div
-						ref="resizeHandle"
-						class="resize-handle"
-						:style="{
+<private-view
+  :splitView="livePreviewMode"
+  :split-view-min-width="310"
+  :title="page_title"
+>
+  <template #actions>
+    <v-button
+      v-tooltip.bottom="!livePreviewMode ? 'Enable Split View' : 'Disable Split View'"
+      icon
+      class="action-preview"
+      :secondary="!livePreviewMode"
+      @click="toggleSplitView"
+    >
+      <v-icon name="visibility" outline />
+    </v-button>
+  </template>
+
+  <template #splitView>
+    <div ref="livePreviewEl" class="live-preview">
+      <div class="container">
+        <div class="iframe-view">
+          <div
+            ref="resizeHandle"
+            class="resize-handle"
+            :style="{
 							width: '100%',
 							height: '100%',
 							resize: 'both',
 						}"
-					>
-						<!-- <iframe id="frame" ref="frameEl" :src="url" @load="onIframeLoad" /> -->
-						SPLIT VIEW
-					</div>
-				</div>
-			</div>
-		</div>
-	</template>
+          >
+            <!-- <iframe id="frame" ref="frameEl" :src="url" @load="onIframeLoad" /> -->
+            SPLIT VIEW
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
 </private-view>
 ```
 
@@ -254,29 +240,29 @@ Add the following CSS to your style for the default styling of the `SplitView` c
 
 ```scss
 .live-preview {
-	width: 100%;
-	height: 100%;
-	.container {
-		width: 100%;
-		height: calc(100% - 44px);
-		overflow: auto;
-	}
-	.iframe-view {
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-		display: grid;
-		padding: 48px;
-		#frame {
-			width: 100%;
-			height: 100%;
-			border: 0;
-		}
-		.resize-handle {
-			overflow: hidden;
-			box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.2);
-		}
-	}
+  width: 100%;
+  height: 100%;
+  .container {
+    width: 100%;
+    height: calc(100% - 44px);
+    overflow: auto;
+  }
+  .iframe-view {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: grid;
+    padding: 48px;
+    #frame {
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+    .resize-handle {
+      overflow: hidden;
+      box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.2);
+    }
+  }
 }
 ```
 

From 8f0011ba0cc183b137dcbb523d29f0a84fb91531 Mon Sep 17 00:00:00 2001
From: "Florian C. Wachmann" <dev@formfcw.com>
Date: Sat, 16 May 2026 01:39:33 +0200
Subject: [PATCH 3/4] Document visual-editor customization vars for
 editable-element redesign (#676)

---
 content/getting-started/10.accessibility.md   |  2 --
 .../8.visual-editor/3.customization.md        | 29 ++++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/content/getting-started/10.accessibility.md b/content/getting-started/10.accessibility.md
index 2116a9d6..134163bf 100644
--- a/content/getting-started/10.accessibility.md
+++ b/content/getting-started/10.accessibility.md
@@ -26,8 +26,6 @@ Read more: https://www.tiny.cloud/docs/tinymce/6/tinymce-and-screenreaders/
 
 ### Things to keep in mind
 
-- Visual Editor is only accessible on the Directus side — not your website. So we always need to click an edit button first, then the
-  overlays are accessible.
 - Manual Sorting is currently not supported/accessible.
 - Once focused, the code interface (Codemirror) cannot be exited using the tab key.
 - The Markdown interface also doesn’t allow you to exit the field. This is because it supports tabs inside the editor’s
diff --git a/content/guides/02.content/8.visual-editor/3.customization.md b/content/guides/02.content/8.visual-editor/3.customization.md
index c9d9883a..2d8f73bf 100644
--- a/content/guides/02.content/8.visual-editor/3.customization.md
+++ b/content/guides/02.content/8.visual-editor/3.customization.md
@@ -39,6 +39,9 @@ The library ships with a number of built in CSS Selectors already applied to its
 .directus-visual-editing-edit-button {
 	/* the edit button */
 }
+.directus-visual-editing-actions-flipped {
+	/* a modifier on the rect that flips the action buttons below it, applied automatically when the rect is near the top of the viewport */
+}
 ```
 
 ## CSS Variables
@@ -48,21 +51,33 @@ The library also ships with a number of predefined CSS variables. These can be o
 ```css
 :root {
 	--directus-visual-editing--overlay--z-index: 999999999;
-	--directus-visual-editing--rect--border-spacing: 9px;
-	--directus-visual-editing--rect--border-width: 2px;
+	--directus-visual-editing--rect--border-spacing: 8px;
+	--directus-visual-editing--rect--border-width: 1px;
 	--directus-visual-editing--rect--border-color: #6644ff;
 	--directus-visual-editing--rect--border-radius: 6px;
-	--directus-visual-editing--rect-hover--opacity: 0.333;
-	--directus-visual-editing--rect-highlight--opacity: 0.333;
-	--directus-visual-editing--edit-btn--width: 28px;
-	--directus-visual-editing--edit-btn--height: 28px;
-	--directus-visual-editing--edit-btn--radius: 50%;
+	--directus-visual-editing--rect-hover--opacity: 0.4;
+	--directus-visual-editing--rect-highlight--opacity: 0.4;
+	--directus-visual-editing--actions--offset: 4px;
+	--directus-visual-editing--actions--focus-ring-color: #6644ff;
+	--directus-visual-editing--actions--focus-ring-width: 2px;
+	--directus-visual-editing--actions--focus-ring-offset: 2px;
+	--directus-visual-editing--edit-btn--width: 24px;
+	--directus-visual-editing--edit-btn--height: 24px;
+	--directus-visual-editing--edit-btn--radius: 6px;
 	--directus-visual-editing--edit-btn--bg-color: #6644ff;
+	--directus-visual-editing--edit-btn-hover--bg-color: color-mix(in srgb, #6644ff, #2e3C43 25%);
 	--directus-visual-editing--edit-btn--icon-bg-image: url('data:image/svg+xml,<svg>…</svg>');
 	--directus-visual-editing--edit-btn--icon-bg-size: 66.6%;
+	--directus-visual-editing--ai-btn--bg-color: #6644ff;
+	--directus-visual-editing--ai-btn-hover--bg-color: color-mix(in srgb, #6644ff, #2e3C43 25%);
 }
 ```
 
+::callout{icon="material-symbols:info-outline"}
+**Defaults inside the Directus Studio**
+When the visual editor runs inside the Directus Studio iframe, defaults for several variables are sourced from the active Studio theme (primary color, border radius, button size, focus-ring width/offset) rather than the compiled-in fallbacks shown above. Your own `:root` or `customClass` overrides still take precedence.
+::
+
 ## Custom Classes
 
 Finally, custom classes can be added to all or a subset of elements defined by the library’s [apply method](/guides/content/visual-editor/frontend-library#api) using the `customClass` property. This class will be applied to the `div.directus-visual-editing-overlay` element within the `div#directus-visual-editing` container.

From 14b130dff3ce8914cb066db7dfd50103665e1774 Mon Sep 17 00:00:00 2001
From: "Florian C. Wachmann" <dev@formfcw.com>
Date: Mon, 18 May 2026 19:42:04 +0200
Subject: [PATCH 4/4] Revert visual-editor overlay defaults: border-width 2px,
 hover/highlight opacity 0.333 (#678)

---
 .../guides/02.content/8.visual-editor/3.customization.md    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/guides/02.content/8.visual-editor/3.customization.md b/content/guides/02.content/8.visual-editor/3.customization.md
index 2d8f73bf..183c6512 100644
--- a/content/guides/02.content/8.visual-editor/3.customization.md
+++ b/content/guides/02.content/8.visual-editor/3.customization.md
@@ -52,11 +52,11 @@ The library also ships with a number of predefined CSS variables. These can be o
 :root {
 	--directus-visual-editing--overlay--z-index: 999999999;
 	--directus-visual-editing--rect--border-spacing: 8px;
-	--directus-visual-editing--rect--border-width: 1px;
+	--directus-visual-editing--rect--border-width: 2px;
 	--directus-visual-editing--rect--border-color: #6644ff;
 	--directus-visual-editing--rect--border-radius: 6px;
-	--directus-visual-editing--rect-hover--opacity: 0.4;
-	--directus-visual-editing--rect-highlight--opacity: 0.4;
+	--directus-visual-editing--rect-hover--opacity: 0.333;
+	--directus-visual-editing--rect-highlight--opacity: 0.333;
 	--directus-visual-editing--actions--offset: 4px;
 	--directus-visual-editing--actions--focus-ring-color: #6644ff;
 	--directus-visual-editing--actions--focus-ring-width: 2px;