docs(layout): compile the 12 plaintext-fenced TypeScript blocks in content/docs/layout (#5867 batch 5)

.changeset/5867-layout-plaintext-fences-batch5.md

@@ -0,0 +1,9 @@
+---
+---
+
+Documentation only: re-fenced the 12 TypeScript blocks in `content/docs/layout/**` that were
+fenced `plaintext`, so `check-doc-snippet-types` compiles them, and fixed the four blocks it
+then reddened (a missing `AppShellBranding` import, three examples using components and values
+they never imported, and two `AppShell` examples that passed no children). Lowered
+`KNOWN_UNHIGHLIGHTED_TS_FENCES` by the three layout files in the same change. No published
+behaviour changes.

content/docs/layout/app-shell.mdx

@@ -7,7 +7,7 @@ The AppShell component provides the main application layout structure with an in
 
 ## Basic Usage
 
-```plaintext
+```tsx
 import { AppShell, SidebarNav, type NavItem } from '@object-ui/layout';
 import { Home, Settings, Users } from 'lucide-react';
 
@@ -32,7 +32,9 @@ const navItems: NavItem[] = [
 
 ## Component Props
 
-```plaintext
+```ts
+import type { AppShellBranding } from '@object-ui/layout';
+
 interface AppShellProps {
  sidebar?: React.ReactNode; // Sidebar content (usually SidebarNav)
  navbar?: React.ReactNode; // Top navbar content (logo, search, user menu)
@@ -111,14 +113,21 @@ The AppShell renders no toggle button of its own. What it does give you is the
 - Programmatic control — `useSidebar().toggleSidebar()` from any component inside the shell
 - A toggle button you render yourself; it belongs in the `navbar` slot:
 
-```plaintext
+```tsx
 import { SidebarTrigger } from '@object-ui/components';
+import { AppShell, SidebarNav, type NavItem } from '@object-ui/layout';
+import { Home, Settings } from 'lucide-react';
+
+const navItems: NavItem[] = [
+ { title: 'Dashboard', href: '/', icon: Home },
+ { title: 'Settings', href: '/settings', icon: Settings },
+];
 
 <AppShell
  navbar={<SidebarTrigger />}
  sidebar={<SidebarNav items={navItems} />}
 >
-{/* Your page content */}
+<div>Your page content</div>
 </AppShell>
 ```
 
@@ -160,7 +169,7 @@ navbar={
 
 ## Complete Example
 
-```plaintext
+```tsx
 import { AppShell, SidebarNav, type NavItem } from '@object-ui/layout';
 import { Avatar, AvatarFallback, Button, Input } from '@object-ui/components';
 import { Bell, Folder, LayoutDashboard, Settings, Users } from 'lucide-react';

content/docs/layout/page-header.mdx

@@ -34,7 +34,7 @@ The PageHeader component provides a consistent header for pages with title, subt
 
 ## Basic Usage
 
-```plaintext
+```tsx
 import { PageHeader } from '@object-ui/layout';
 
 <PageHeader
@@ -49,7 +49,7 @@ import { PageHeader } from '@object-ui/layout';
 
 ## Component Props
 
-```plaintext
+```ts
 interface PageHeaderComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string; // Page title (required); {field.path} tokens interpolated
  subtitle?: string; // Secondary line under the title — the canonical key
@@ -268,7 +268,7 @@ rename it to `subtitle`, and do not assume objectui#3789 touched it.
 
 ## Complete Example
 
-```plaintext
+```tsx
 import { PageHeader } from '@object-ui/layout';
 import { Button } from '@object-ui/components';
 import { Plus, Download, Settings } from 'lucide-react';

content/docs/layout/sidebar-nav.mdx

@@ -7,7 +7,7 @@ The SidebarNav component provides a responsive sidebar navigation menu with supp
 
 ## Basic Usage
 
-```plaintext
+```tsx
 import { SidebarNav } from '@object-ui/layout';
 import { Home, Users, Settings } from 'lucide-react';
 
@@ -35,7 +35,7 @@ import { Home, Users, Settings } from 'lucide-react';
 
 ## Component Props
 
-```plaintext
+```ts
 interface SidebarNavProps {
  items: NavItem[] | NavGroup[]; // Navigation items or grouped items
  title?: string; // Sidebar title (default: "Application")
@@ -75,7 +75,8 @@ The SidebarNav automatically highlights the active route based on the current UR
 
 Add Lucide icons to navigation items:
 
-```plaintext
+```tsx
+import { SidebarNav } from '@object-ui/layout';
 import { 
  LayoutDashboard, 
  Users, 
@@ -188,7 +189,7 @@ Set a custom title for the sidebar:
 
 ## Complete Example
 
-```plaintext
+```tsx
 import { SidebarNav, type NavGroup } from '@object-ui/layout';
 import { 
  Home,
@@ -244,8 +245,9 @@ function App() {
 
 The SidebarNav is designed to work with AppShell:
 
-```plaintext
+```tsx
 import { AppShell, SidebarNav } from '@object-ui/layout';
+import { Home, Info } from 'lucide-react';
 
 <AppShell
  sidebar={
@@ -258,7 +260,7 @@ import { AppShell, SidebarNav } from '@object-ui/layout';
  />
  }
 >
-{/* Your content */}
+<div>Your content</div>
 </AppShell>
 ```
 

scripts/check-doc-fence-languages.mjs

@@ -372,9 +372,6 @@ export const KNOWN_UNHIGHLIGHTED_TS_FENCES = new Map([
  ['content/docs/components/overlay/sheet.mdx', 1],
  ['content/docs/components/overlay/tooltip.mdx', 1],
  ['content/docs/core/report-schema.mdx', 11],
- ['content/docs/layout/app-shell.mdx', 4],
- ['content/docs/layout/page-header.mdx', 3],
- ['content/docs/layout/sidebar-nav.mdx', 5],
  ['content/docs/plugins/plugin-calendar.mdx', 1],
  ['content/docs/plugins/plugin-chatbot.mdx', 2],
  ['content/docs/plugins/plugin-dashboard.mdx', 3],