@vobs/layout 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vobs contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @vobs/layout
+
+App-shell primitives for vobs applications: a `KitLayout` shell with header, sidebar, menu, breadcrumb, and tabs slots, responsive mobile behavior, and a shared layout context.
+
+## Install
+
+```bash
+npm install @vobs/layout
+```
+
+## Quick start
+
+```ts
+import { createComponent, createDOMRenderer, createVobs, setRenderer } from '@vobs/vobs'
+import { KitLayout } from '@vobs/layout'
+
+setRenderer(createDOMRenderer())
+
+const app = createVobs({
+  render: () => createComponent(KitLayout, {
+    title: 'Workspace',
+    menu: [{ key: '/home', label: 'Home' }],
+    children: 'Content'
+  })
+})
+
+app.mount(document.getElementById('app')!)
+```
+
+The shell renders the default header (with a sidebar toggle), sidebar, menu, and content slot. The sidebar starts collapsed unless `sidebarExpanded` is set; below `mobileBreakpoint` (default 768) a resize listener switches the root to the mobile variant, and the listener is removed on destroy.
+
+## API
+
+| Signature | Description |
+| --- | --- |
+| `KitLayout(props: KitLayoutProps)` | Shell with `header`, `sidebar`, `menu`, `breadcrumb`, `tabs`, `footer`, and `mobileBackdrop` slots; passing `null` to a slot drops the default region. Sidebar state is uncontrolled by default or controlled via `sidebarCollapsed` + `onSidebarCollapsedChange`; `mobileOpen`/`onMobileOpenChange` control the mobile drawer. |
+| `KitHeader(props: KitHeaderProps)` | Header bar with `logo`, `title`, sidebar toggle, `userMenu`, and `headerActions`. |
+| `KitSidebar(props: KitSidebarProps)` | Collapsible sidebar rendering menu `items` with `activeKey`, `variant`, mobile `closeLabel`, and `footer`. |
+| `KitMenu(props: KitMenuProps)` | Menu tree from `KitMenuItem` entries (`icon`, `badge`, `href`, `permission`, nested `children`), with `collapsed` and `activeKey`. |
+| `KitBreadcrumb(props: KitBreadcrumbProps)` | Breadcrumb from `KitBreadcrumbItem` entries with `separator` and `onNavigate`. |
+| `KitTabs(props: KitTabsProps)` | Tab strip from `KitTabItem` entries with `value`/`activeKey`, `closable`, and `onSelect`/`onChange`/`onClose`. |
+| `useKitLayout(): KitLayoutContext` | Returns the surrounding layout context (throws outside `KitLayout`): `sidebarCollapsed`, `mobileOpen`, `isMobile` signals plus `toggleSidebar()`, `setSidebarCollapsed()`, `setMobileOpen()`. |
+| `createKitViewport(breakpoint?)` | Standalone `KitViewport` with `width`/`height`/`isMobile` signals and `dispose()`; stops listening after disposal. |
+| `normalizeBreakpoint(value)` | Validates and rounds a breakpoint; throws on non-finite or non-positive values. |
+| `DEFAULT_MOBILE_BREAKPOINT` | `768`. |
+
+## Types
+
+LayoutAttributeValue, LayoutChild, LayoutChildren, LayoutCommonProps, KitMenuItem, KitSidebarVariant, KitLayoutProps, KitHeaderProps, KitSidebarProps, KitMenuProps, KitBreadcrumbItem, KitBreadcrumbProps, KitTabItem, KitTabsProps, KitReadonlySignal, KitLayoutContext, KitViewport

package/package.json

@@ -0,0 +1,38 @@
+{
+  "license": "MIT",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "name": "@vobs/layout",
+  "version": "1.0.0",
+  "description": "Optional Kit layout primitives for Vobs.",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./layout": "./src/layout.ts",
+    "./header": "./src/header.ts",
+    "./sidebar": "./src/sidebar.ts",
+    "./menu": "./src/menu.ts",
+    "./breadcrumb": "./src/breadcrumb.ts",
+    "./tabs": "./src/tabs.ts",
+    "./context": "./src/context.ts",
+    "./viewport": "./src/viewport.ts",
+    "./layout.css": "./src/styles/layout.css",
+    "./styles.css": "./src/styles/styles.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./src/styles/*.css"
+  ],
+  "dependencies": {
+    "@vobs/reactivity": "1.0.0",
+    "@vobs/vobs": "1.0.0"
+  },
+  "scripts": {
+    "test": "vitest --environment jsdom"
+  }
+}

package/src/breadcrumb.ts

@@ -0,0 +1,92 @@
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { KitBreadcrumbItem, KitBreadcrumbProps } from './types'
+
+export function KitBreadcrumb(props: KitBreadcrumbProps): VobsNode {
+  const root = createElement('nav')
+  bindClassList(root, props, () => ['vobs-kit-breadcrumb'])
+  bindCommonAttributes(root, props, ['items', 'separator', 'onNavigate'])
+  if (!hasProp(props, 'aria-label')) setAttribute(root, 'aria-label', 'Breadcrumb')
+
+  const list = createElement('ol')
+  setAttribute(list, 'class', 'vobs-kit-breadcrumb__list')
+  insertDynamic(list, null, () => createBreadcrumbItems(props))
+  insertBefore(root, list, null)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createBreadcrumbItems(props: KitBreadcrumbProps): VobsNode {
+  const items = readProp<readonly KitBreadcrumbItem[]>(props, 'items', [])
+  return createFragment((parent, anchor) => {
+    for (let index = 0; index < items.length; index++) {
+      const item = items[index]
+      const entry = createElement('li')
+      const isLast = index === items.length - 1
+      setAttribute(entry, 'class', `vobs-kit-breadcrumb__item${isLast ? ' is-current' : ''}`)
+      if (item.key !== undefined) setOptionalAttribute(entry, 'data-breadcrumb-key', item.key)
+
+      if (index > 0) {
+        const separator = createElement('span')
+        setAttribute(separator, 'class', 'vobs-kit-breadcrumb__separator')
+        setAttribute(separator, 'aria-hidden', 'true')
+        if (hasProp(props, 'separator')) mountSlot(separator, props, 'separator')
+        else insertBefore(separator, createText('/'), null)
+        insertBefore(entry, separator, null)
+      }
+
+      const content = createBreadcrumbContent(item, props, index, isLast)
+      insertBefore(entry, content, null)
+      insertBefore(parent, entry, anchor)
+    }
+  })
+}
+
+function createBreadcrumbContent(
+  item: KitBreadcrumbItem,
+  props: KitBreadcrumbProps,
+  index: number,
+  isLast: boolean
+): VobsNode {
+  const isLink = item.href !== undefined && !isLast
+  const element = isLink ? createElement('a') : createElement('span')
+  setAttribute(element, 'class', 'vobs-kit-breadcrumb__label')
+  insertBefore(element, createText(item.label), null)
+
+  if (isLink) {
+    setAttribute(element, 'href', item.href!)
+    addEventListener(element, 'click', event => {
+      if (item.disabled === true) {
+        event.preventDefault?.()
+        return
+      }
+      const handler = readProp<unknown>(props, 'onNavigate', undefined)
+      if (typeof handler === 'function') {
+        (handler as KitBreadcrumbProps['onNavigate'])!(item, index)
+      }
+    })
+  }
+  if (item.disabled === true) {
+    setAttribute(element, 'aria-disabled', 'true')
+    setProperty(element, 'tabIndex', -1)
+  }
+  if (isLast) setAttribute(element, 'aria-current', 'page')
+  return element
+}

package/src/context.ts

@@ -0,0 +1,17 @@
+import {
+  createInjectionKey,
+  inject,
+  type InjectionKey
+} from '@vobs/vobs'
+import type { KitLayoutContext } from './types'
+
+export const KIT_LAYOUT_KEY: InjectionKey<KitLayoutContext> =
+  createInjectionKey<KitLayoutContext>('vobs.kit.layout')
+
+export function useKitLayout(): KitLayoutContext {
+  const context = inject(KIT_LAYOUT_KEY)
+  if (!context) {
+    throw new Error('Vobs Layout: 找不到 KitLayout 上下文')
+  }
+  return context
+}

package/src/header.ts

@@ -0,0 +1,92 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createText,
+  insertBefore,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { KitHeaderProps } from './types'
+
+export function KitHeader(props: KitHeaderProps = {}): VobsNode {
+  const root = createElement('header')
+  const toggleRegion = createElement('div')
+  const brand = createElement('div')
+  const actions = createElement('div')
+
+  bindClassList(root, props, () => ['vobs-kit-header'])
+  bindCommonAttributes(root, props, [
+    'logo',
+    'title',
+    'sidebarToggle',
+    'userMenu',
+    'headerActions',
+    'toggleLabel',
+    'onToggleSidebar'
+  ])
+  bindUserStyle(root, props)
+  setAttribute(toggleRegion, 'class', 'vobs-kit-header__toggle')
+  if (hasProp(props, 'sidebarToggle')) {
+    mountSlot(toggleRegion, props, 'sidebarToggle')
+  } else {
+    insertBefore(toggleRegion, createDefaultToggle(props), null)
+  }
+
+  setAttribute(brand, 'class', 'vobs-kit-header__brand')
+  if (readProp(props, 'logo', undefined) !== undefined) {
+    const logo = createElement('span')
+    setAttribute(logo, 'class', 'vobs-kit-header__logo')
+    mountSlot(logo, props, 'logo')
+    insertBefore(brand, logo, null)
+  }
+  if (readProp<string | undefined>(props, 'title', undefined) !== undefined) {
+    const title = createElement('h1')
+    const text = createText('')
+    setAttribute(title, 'class', 'vobs-kit-header__title')
+    bindTextContent(text, () => readProp(props, 'title', ''))
+    insertBefore(title, text, null)
+    insertBefore(brand, title, null)
+  }
+
+  setAttribute(actions, 'class', 'vobs-kit-header__actions')
+  if (readProp(props, 'headerActions', undefined) !== undefined) mountSlot(actions, props, 'headerActions')
+  if (readProp(props, 'userMenu', undefined) !== undefined) mountSlot(actions, props, 'userMenu')
+
+  insertBefore(root, toggleRegion, null)
+  insertBefore(root, brand, null)
+  insertBefore(root, actions, null)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createDefaultToggle(props: KitHeaderProps): VobsNode {
+  const button = createElement('button')
+  const label = createText('')
+  setAttribute(button, 'type', 'button')
+  setAttribute(button, 'class', 'vobs-kit-header__toggle-button')
+  bindTextContent(label, () => readProp(props, 'toggleLabel', 'Menu'))
+  insertBefore(button, label, null)
+  addEventListener(button, 'click', () => {
+    const handler = readProp<unknown>(props, 'onToggleSidebar', undefined)
+    if (typeof handler === 'function') (handler as KitHeaderProps['onToggleSidebar'])!()
+  })
+  effectToggleLabel(button, props)
+  return button
+}
+
+function effectToggleLabel(button: Element, props: KitHeaderProps): void {
+  effect(() => {
+    setOptionalAttribute(button, 'aria-label', readProp(props, 'toggleLabel', 'Menu'))
+  })
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+export { KitLayout } from './layout'
+export { KitHeader } from './header'
+export { KitSidebar } from './sidebar'
+export { KitMenu } from './menu'
+export { KitBreadcrumb } from './breadcrumb'
+export { KitTabs } from './tabs'
+export { KIT_LAYOUT_KEY, useKitLayout } from './context'
+export {
+  createKitViewport,
+  DEFAULT_MOBILE_BREAKPOINT,
+  normalizeBreakpoint
+} from './viewport'
+
+export type {
+  KitBreadcrumbItem,
+  KitBreadcrumbProps,
+  KitHeaderProps,
+  KitLayoutContext,
+  KitLayoutProps,
+  KitMenuItem,
+  KitMenuProps,
+  KitReadonlySignal,
+  KitSidebarProps,
+  KitSidebarVariant,
+  KitTabItem,
+  KitTabsProps,
+  KitViewport,
+  LayoutAttributeValue,
+  LayoutChild,
+  LayoutChildren,
+  LayoutCommonProps
+} from './types'

package/src/layout.test.ts

@@ -0,0 +1,271 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createComponent, createDOMRenderer, createElement, createText, createVobs, setRenderer } from '@vobs/vobs'
+import { state } from '@vobs/reactivity'
+import { KitLayout } from './layout'
+import { useKitLayout } from './context'
+import { KitSidebar } from './sidebar'
+import { KitBreadcrumb } from './breadcrumb'
+import { KitTabs } from './tabs'
+
+describe('@vobs/layout', () => {
+  beforeEach(() => {
+    setRenderer(createDOMRenderer())
+    window.innerWidth = 1200
+    window.innerHeight = 800
+  })
+
+  it('默认插入 Kit header、menu 和内容插槽', () => {
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(KitLayout, {
+        title: 'Workspace',
+        menu: [{ key: '/home', label: 'Home' }],
+        children: 'Content'
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vobs-kit-layout')).toBeTruthy()
+    expect(container.querySelector('.vobs-kit-header__title')?.textContent).toBe('Workspace')
+    expect(container.querySelector('.vobs-kit-menu__label')?.textContent).toBe('Home')
+    expect(container.querySelector('.vobs-kit-layout__content')?.textContent).toBe('Content')
+    expect(container.querySelector('[class*="vui-"]')).toBeNull()
+    expect(container.querySelector('[class*="vobs-admin-"]')).toBeNull()
+    app.destroy()
+  })
+
+  it('默认侧栏宽度交给 CSS，显式配置才写入内联变量', () => {
+    const defaultContainer = document.createElement('main')
+    const defaultApp = createVobs({
+      render: () => createComponent(KitLayout, { menu: [{ key: '/home', label: 'Home' }] })
+    })
+    defaultApp.mount(defaultContainer)
+
+    const defaultRoot = defaultContainer.querySelector('.vobs-kit-layout') as HTMLElement
+    expect(defaultRoot.hasAttribute('style')).toBe(false)
+    defaultApp.destroy()
+
+    const configuredContainer = document.createElement('main')
+    const configuredApp = createVobs({
+      render: () => createComponent(KitLayout, {
+        sidebarWidth: 240,
+        style: '--vobs-kit-sidebar-width: 260px',
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    configuredApp.mount(configuredContainer)
+
+    const configuredRoot = configuredContainer.querySelector('.vobs-kit-layout') as HTMLElement
+    expect(configuredRoot.style.getPropertyValue('--vobs-kit-sidebar-width')).toBe('260px')
+    configuredApp.destroy()
+  })
+
+  it('侧栏默认收起，显式设置后才默认展开', () => {
+    const defaultContainer = document.createElement('main')
+    const defaultApp = createVobs({
+      render: () => createComponent(KitLayout, {
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    defaultApp.mount(defaultContainer)
+
+    expect(defaultContainer.querySelector('.vobs-kit-layout')?.classList.contains(
+      'vobs-kit-layout--sidebar-collapsed'
+    )).toBe(true)
+    expect(defaultContainer.querySelector('.vobs-kit-layout')?.hasAttribute('sidebarExpanded')).toBe(false)
+    defaultApp.destroy()
+
+    const expandedContainer = document.createElement('main')
+    const expandedApp = createVobs({
+      render: () => createComponent(KitLayout, {
+        sidebarExpanded: true,
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    expandedApp.mount(expandedContainer)
+
+    expect(expandedContainer.querySelector('.vobs-kit-layout')?.classList.contains(
+      'vobs-kit-layout--sidebar-collapsed'
+    )).toBe(false)
+    expandedApp.destroy()
+  })
+
+  it('显式 sidebarCollapsed 优先于默认展开配置', () => {
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(KitLayout, {
+        sidebarExpanded: true,
+        sidebarCollapsed: true,
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vobs-kit-layout')?.classList.contains(
+      'vobs-kit-layout--sidebar-collapsed'
+    )).toBe(true)
+    app.destroy()
+  })
+
+  it('非受控状态可以通过默认 header 切换侧栏', async () => {
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(KitLayout, {
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    app.mount(container)
+
+    const root = container.querySelector('.vobs-kit-layout') as HTMLElement
+    const toggle = container.querySelector('.vobs-kit-header__toggle-button') as HTMLButtonElement
+    expect(root.classList.contains('vobs-kit-layout--sidebar-collapsed')).toBe(true)
+    toggle.click()
+    await Promise.resolve()
+
+    expect(root.classList.contains('vobs-kit-layout--sidebar-collapsed')).toBe(false)
+    expect(container.querySelector('.vobs-kit-sidebar')?.classList.contains('is-collapsed')).toBe(false)
+    app.destroy()
+  })
+
+  it('窗口尺寸变化仍驱动移动端布局，但销毁后停止监听', async () => {
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(KitLayout, {
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    app.mount(container)
+
+    const root = container.querySelector('.vobs-kit-layout')!
+    expect(root.classList.contains('vobs-kit-layout--mobile')).toBe(false)
+
+    window.innerWidth = 600
+    window.dispatchEvent(new Event('resize'))
+    await Promise.resolve()
+    expect(root.classList.contains('vobs-kit-layout--mobile')).toBe(true)
+
+    window.innerWidth = 1000
+    window.dispatchEvent(new Event('resize'))
+    await Promise.resolve()
+    expect(root.classList.contains('vobs-kit-layout--mobile')).toBe(false)
+
+    app.destroy()
+    window.innerWidth = 600
+    window.dispatchEvent(new Event('resize'))
+    await Promise.resolve()
+    expect(root.classList.contains('vobs-kit-layout--mobile')).toBe(false)
+  })
+
+  it('自定义 header 可以通过 KitLayout 上下文控制布局', async () => {
+    function CustomHeader() {
+      const layout = useKitLayout()
+      const button = createElement('button') as HTMLButtonElement
+      button.textContent = 'custom toggle'
+      button.addEventListener('click', layout.toggleSidebar)
+      return button
+    }
+
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(KitLayout, {
+        header: () => createComponent(CustomHeader, {}),
+        menu: [{ key: '/home', label: 'Home' }]
+      })
+    })
+    app.mount(container)
+
+    const root = container.querySelector('.vobs-kit-layout') as HTMLElement
+    ;(container.querySelector('button') as HTMLButtonElement).click()
+    await Promise.resolve()
+    expect(root.classList.contains('vobs-kit-layout--sidebar-collapsed')).toBe(false)
+    app.destroy()
+  })
+
+  it('受控状态只通过 change 回调请求外部更新', async () => {
+    const collapsed = state(false)
+    const changes: boolean[] = []
+    const props = {
+      get sidebarCollapsed() { return collapsed.value },
+      onSidebarCollapsedChange(value: boolean) { changes.push(value) },
+      menu: [{ key: '/home', label: 'Home' }]
+    }
+    const container = document.createElement('main')
+    const app = createVobs({ render: () => createComponent(KitLayout, props) })
+    app.mount(container)
+
+    const root = container.querySelector('.vobs-kit-layout') as HTMLElement
+    ;(container.querySelector('.vobs-kit-header__toggle-button') as HTMLButtonElement).click()
+    await Promise.resolve()
+    expect(changes).toEqual([true])
+    expect(root.classList.contains('vobs-kit-layout--sidebar-collapsed')).toBe(false)
+
+    collapsed.value = true
+    app.update()
+    expect(root.classList.contains('vobs-kit-layout--sidebar-collapsed')).toBe(true)
+    app.destroy()
+  })
+
+  it('null 插槽可以关闭默认区域，显式 backdrop 支持关闭回调', async () => {
+    const mobileOpen = state(true)
+    let closed = 0
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(KitLayout, {
+        header: null,
+        sidebar: createElement('aside'),
+        mobileOpen: mobileOpen.value,
+        mobileBackdrop: createElement('div'),
+        onMobileOpenChange(value) {
+          if (!value) closed++
+        },
+        onCloseSidebar() { closed++ },
+        children: 'Content'
+      })
+    })
+    app.mount(container)
+
+    const header = container.querySelector('.vobs-kit-layout__header') as HTMLElement
+    expect(header.hidden).toBe(true)
+    const root = container.querySelector('.vobs-kit-layout') as HTMLElement
+    expect(root.classList.contains('vobs-kit-layout--mobile-open')).toBe(true)
+    app.destroy()
+    expect(closed).toBe(0)
+    void mobileOpen
+  })
+
+  it('独立原语接受第三方节点、嵌套菜单、面包屑和 tabs', () => {
+    const container = document.createElement('main')
+    const externalIcon = createElement('svg')
+    const selected: string[] = []
+    const app = createVobs({
+      render: () => {
+        const root = createElement('div')
+        root.append(
+          createComponent(KitSidebar, {
+            items: [{ key: '/group', label: 'Group', icon: externalIcon, children: [{ key: '/child', label: 'Child' }] }],
+            activeKey: '/child',
+            onSelect: key => selected.push(key)
+          }) as Node,
+          createComponent(KitBreadcrumb, {
+            items: [{ label: 'Home', href: '/' }, { label: 'Current' }]
+          }) as Node,
+          createComponent(KitTabs, {
+            tabs: [{ id: 'home', label: 'Home' }, { id: 'current', label: 'Current' }],
+            activeKey: 'current'
+          }) as Node,
+          createText('') as Node
+        )
+        return root
+      }
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vobs-kit-menu__children')).toBeTruthy()
+    expect(container.querySelector('.vobs-kit-menu__icon svg')).toBe(externalIcon)
+    expect(container.querySelector('.vobs-kit-breadcrumb [aria-current="page"]')?.textContent).toBe('Current')
+    expect(container.querySelector('.vobs-kit-tabs__tab.is-active')?.textContent).toContain('Current')
+    ;(container.querySelector('[data-menu-key="/child"] button, [data-menu-key="/child"] a') as HTMLElement)?.click()
+    expect(selected).toEqual(['/child'])
+    app.destroy()
+  })
+})