From 123435139c4eda59e0f867c4f03f70e40d187863 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 24 Aug 2026 23:29:03 +0000 Subject: [PATCH 1/4] docs(layout): re-fence 12 plaintext TypeScript blocks as ts/tsx Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019b5UBNMtTzKbVtZZGvFuxe --- content/docs/layout/app-shell.mdx | 8 ++++---- content/docs/layout/page-header.mdx | 6 +++--- content/docs/layout/sidebar-nav.mdx | 10 +++++----- scripts/check-doc-fence-languages.mjs | 3 --- 4 files changed, 12 insertions(+), 15 deletions(-) diff --git a/content/docs/layout/app-shell.mdx b/content/docs/layout/app-shell.mdx index e5ba3790d4..f91a010698 100644 --- a/content/docs/layout/app-shell.mdx +++ b/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,7 @@ const navItems: NavItem[] = [ ## Component Props -```plaintext +```ts interface AppShellProps { sidebar?: React.ReactNode; // Sidebar content (usually SidebarNav) navbar?: React.ReactNode; // Top navbar content (logo, search, user menu) @@ -111,7 +111,7 @@ 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'; { 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'; diff --git a/content/docs/layout/sidebar-nav.mdx b/content/docs/layout/sidebar-nav.mdx index 0baf0ff840..d0c928cb5c 100644 --- a/content/docs/layout/sidebar-nav.mdx +++ b/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,7 @@ The SidebarNav automatically highlights the active route based on the current UR Add Lucide icons to navigation items: -```plaintext +```tsx import { LayoutDashboard, Users, @@ -188,7 +188,7 @@ Set a custom title for the sidebar: ## Complete Example -```plaintext +```tsx import { SidebarNav, type NavGroup } from '@object-ui/layout'; import { Home, @@ -244,7 +244,7 @@ function App() { The SidebarNav is designed to work with AppShell: -```plaintext +```tsx import { AppShell, SidebarNav } from '@object-ui/layout'; Date: Mon, 24 Aug 2026 23:32:06 +0000 Subject: [PATCH 2/4] docs(layout): fix the four blocks the gate reddened after re-fencing Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019b5UBNMtTzKbVtZZGvFuxe --- content/docs/layout/app-shell.mdx | 8 +++++++- content/docs/layout/sidebar-nav.mdx | 4 +++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/content/docs/layout/app-shell.mdx b/content/docs/layout/app-shell.mdx index f91a010698..2f50b8ac29 100644 --- a/content/docs/layout/app-shell.mdx +++ b/content/docs/layout/app-shell.mdx @@ -33,6 +33,8 @@ const navItems: NavItem[] = [ ## Component Props ```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) @@ -113,12 +115,16 @@ The AppShell renders no toggle button of its own. What it does give you is the ```tsx import { SidebarTrigger } from '@object-ui/components'; +import { AppShell, SidebarNav, type NavItem } from '@object-ui/layout'; + +// The items defined under "Basic Usage" above. +declare const navItems: NavItem[]; } sidebar={} > - {/* Your page content */} +
Your page content
 ``` diff --git a/content/docs/layout/sidebar-nav.mdx b/content/docs/layout/sidebar-nav.mdx index d0c928cb5c..361e3967c3 100644 --- a/content/docs/layout/sidebar-nav.mdx +++ b/content/docs/layout/sidebar-nav.mdx @@ -76,6 +76,7 @@ The SidebarNav automatically highlights the active route based on the current UR Add Lucide icons to navigation items: ```tsx +import { SidebarNav } from '@object-ui/layout'; import { LayoutDashboard, Users, @@ -246,6 +247,7 @@ The SidebarNav is designed to work with AppShell: ```tsx import { AppShell, SidebarNav } from '@object-ui/layout'; +import { Home, Info } from 'lucide-react'; } > - {/* Your content */} +
Your content
 ``` From 80bcfc3577335e27733d0b77c89b3e24e6ada0dd Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 24 Aug 2026 23:33:18 +0000 Subject: [PATCH 3/4] docs(layout): declare the batch as releasing nothing Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019b5UBNMtTzKbVtZZGvFuxe --- .changeset/5867-layout-plaintext-fences-batch5.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/5867-layout-plaintext-fences-batch5.md diff --git a/.changeset/5867-layout-plaintext-fences-batch5.md b/.changeset/5867-layout-plaintext-fences-batch5.md new file mode 100644 index 0000000000..089856b3da --- /dev/null +++ b/.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. From 2c6ad7391fb1205e7ebdeca3165898f96d1f32a7 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 25 Aug 2026 01:19:05 +0000 Subject: [PATCH 4/4] docs(layout): define the collapsible-sidebar example's navItems for real MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The re-fence gave the "Collapsible Sidebar" block `declare const navItems: NavItem[]` so it would compile on its own, borrowing the array defined under "Basic Usage". `packages/layout/src/__tests__/app-shell-docs-nav-example.test.ts` reads this page from disk and requires every SidebarNav fence that mentions `const navItems` to spell `const navItems: NavItem[] = [` — the annotation is what turns a copied typo into a compile error (objectui#3999 / #4793) — so the `declare` form reddened the pin. Replace it with a real, annotated two-item array. The block still compiles standalone, and it is now self-contained rather than self-declared, which is the stronger of the two states the snippet gate offers. The array is deliberately NOT a copy of the "Basic Usage" three-item run: that run is compared line-for-line against the test file, and a second verbatim copy on the page would satisfy the parity search while the real block went stale. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019b5UBNMtTzKbVtZZGvFuxe --- content/docs/layout/app-shell.mdx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/content/docs/layout/app-shell.mdx b/content/docs/layout/app-shell.mdx index 2f50b8ac29..5e1deace18 100644 --- a/content/docs/layout/app-shell.mdx +++ b/content/docs/layout/app-shell.mdx @@ -116,9 +116,12 @@ The AppShell renders no toggle button of its own. What it does give you is the ```tsx import { SidebarTrigger } from '@object-ui/components'; import { AppShell, SidebarNav, type NavItem } from '@object-ui/layout'; +import { Home, Settings } from 'lucide-react'; -// The items defined under "Basic Usage" above. -declare const navItems: NavItem[]; +const navItems: NavItem[] = [ + { title: 'Dashboard', href: '/', icon: Home }, + { title: 'Settings', href: '/settings', icon: Settings }, +]; }