weifuwu 0.94.0 → 0.95.0

package/dist/level5/client/components/Menu/Menu.css

@@ -0,0 +1,190 @@
+/* weifuwu/client/components — Menu（侧栏导航） */
+
+.wf-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-menu-group {
+  padding: var(--wf-space-sm) var(--wf-space-sm) 2px;
+  font-size: var(--wf-font-size-xs);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text-tertiary);
+  letter-spacing: var(--wf-heading-tracking); /* CJK 默认 0，英文可覆盖 */
+}
+
+.wf-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--wf-dur-fast) var(--wf-ease-out), color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-menu-item:hover {
+  background: var(--wf-color-bg-secondary);
+  color: var(--wf-color-text);
+}
+
+.wf-menu-item:active {
+  background: var(--wf-state-pressed);
+}
+
+.wf-menu-item--active {
+  background: var(--wf-color-primary-bg);
+  color: var(--wf-color-primary-text);
+  font-weight: var(--wf-font-weight-semibold);
+}
+
+.wf-menu-item--danger { color: var(--wf-color-error-text); }
+.wf-menu-item--danger:hover { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
+
+.wf-menu-item:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: -2px;
+}
+
+.wf-menu-icon {
+  display: inline-flex;
+  font-size: var(--wf-font-size-base);
+  width: 18px;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ── 子菜单（第六批） ────────────────────────────── */
+
+.wf-menu-submenu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-menu-submenu-title {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--wf-dur-fast) var(--wf-ease-out), color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-menu-submenu-title:hover {
+  background: var(--wf-color-bg-secondary);
+  color: var(--wf-color-text);
+}
+
+.wf-menu-submenu-title:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: -2px;
+}
+
+.wf-menu-arrow {
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--wf-color-text-tertiary);
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-menu-submenu--open .wf-menu-arrow {
+  transform: rotate(90deg);
+}
+
+.wf-menu-submenu-content {
+  display: none;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-menu-submenu--open .wf-menu-submenu-content {
+  display: flex;
+}
+
+.wf-menu-item--child {
+  padding-left: var(--wf-space-xl);
+  font-size: var(--wf-font-size-sm);
+}
+
+/* ── 折叠（第六批） ────────────────────────────── */
+
+.wf-menu--collapsed {
+  width: 56px;
+}
+
+.wf-menu--collapsed .wf-menu-group {
+  display: none;
+}
+
+.wf-menu--collapsed .wf-menu-item,
+.wf-menu--collapsed .wf-menu-submenu-title {
+  justify-content: center;
+  padding: var(--wf-space-sm);
+  gap: 0;
+}
+
+.wf-menu-collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+  padding: var(--wf-space-sm);
+  border-radius: var(--wf-radius-sm);
+  color: var(--wf-color-text-tertiary);
+  cursor: pointer;
+  min-height: 36px;
+}
+
+.wf-menu-collapse-btn:hover {
+  background: var(--wf-color-bg-secondary);
+  color: var(--wf-color-text);
+}
+
+.wf-menu-collapse-btn:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: -2px;
+}
+
+/* 折叠态子菜单浮层（roadmap DO：折叠时图标点击弹出） */
+.wf-menu-submenu--collapsed {
+  position: relative;
+}
+.wf-menu-submenu-title--collapsed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: var(--wf-space) 0;
+}
+.wf-menu-popup {
+  min-width: var(--wf-menu-popup-min-width, 160px);
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-lg);
+  padding: var(--wf-space-xs);
+  z-index: var(--wf-z-popover);
+  animation: wf-menu-popup-in var(--wf-dur-fast) var(--wf-ease-out);
+}
+@keyframes wf-menu-popup-in {
+  from { opacity: 0; transform: translateY(calc(var(--wf-motion-sm) * -1)); }
+  to { opacity: 1; transform: translateY(0); }
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-menu-label) {}
+:where(.wf-menu-submenu-title--active) {}
+
+/* 计数徽标（MenuItem.badge——Badge count 胶囊——右贴合） */
+.wf-menu-badge {
+  margin-left: auto;
+}

package/dist/level5/client/components/Menu/Menu.d.ts

@@ -0,0 +1,37 @@
+/** Menu：侧栏导航：分组 + 图标 + 选中态 + 方向键（showcase /components/menu） */
+/**
+ * weifuwu/client/components — Menu
+ *
+ * 导航菜单（侧栏导航）：分组项 + 图标 + 选中态 + 方向键导航 + Enter 激活 + 子菜单 + 折叠。
+ * 用于 SaaS 应用侧边导航（替代手写 nav-item 循环）。
+ * 裁剪（CS-05，见 docs/client.md）：水平菜单栏（Menubar，独立组件）、子菜单自动互斥。折叠态子菜单浮层已实现（openPopup 内核基座）。
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export interface MenuItem {
+    key: string;
+    label?: VNodeChild;
+    icon?: VNodeChild;
+    /** 分组标题（相邻同组项之间插分组头） */
+    group?: string;
+    active?: boolean;
+    danger?: boolean;
+    /** 计数徽标（数字 → Badge count 胶囊——99+ 溢出；label 直传自定义形态） */
+    badge?: string | number;
+    onClick?: () => void;
+    /** 子菜单项（有 children 即渲染为可展开子菜单） */
+    children?: MenuItem[];
+}
+export interface MenuProps {
+    items: MenuItem[];
+    onSelect?: (key: string) => void;
+    activeKey?: string;
+    className?: string;
+    /** 受控展开 key 列表（子菜单） */
+    openKeys?: string[];
+    onOpenChange?: (keys: string[]) => void;
+    /** 可折叠侧栏（宽度收窄 + label 隐藏） */
+    collapsible?: boolean;
+    collapsed?: boolean;
+    onCollapseChange?: (collapsed: boolean) => void;
+}
+export declare const Menu: Component<MenuProps>;

package/dist/level5/client/components/Menu/Menu.ts

@@ -0,0 +1,272 @@
+/** Menu：侧栏导航：分组 + 图标 + 选中态 + 方向键（showcase /components/menu） */
+/**
+ * weifuwu/client/components — Menu
+ *
+ * 导航菜单（侧栏导航）：分组项 + 图标 + 选中态 + 方向键导航 + Enter 激活 + 子菜单 + 折叠。
+ * 用于 SaaS 应用侧边导航（替代手写 nav-item 循环）。
+ * 裁剪（CS-05，见 docs/client.md）：水平菜单栏（Menubar，独立组件）、子菜单自动互斥。折叠态子菜单浮层已实现（openPopup 内核基座）。
+ */
+
+import type {Component, VNodeChild} from '../../../../level6/client/vdom/index.ts'
+import { createClientBrowser } from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h, createItem } from '../../../../level6/client/vdom/index.ts'
+import { Icon } from '../Icon/Icon.ts'
+import { Badge } from '../Badge/Badge.ts'
+
+/** 徽标渲染（数字 → Badge count 胶囊；字符串 → 原样） */
+const badgeOf = (b: string | number | undefined): any =>
+  b == null ? null : h('span', { class: 'wf-menu-badge' }, h(Badge, { count: b }))
+
+export interface MenuItem {
+  key: string
+  label?: VNodeChild
+  icon?: VNodeChild
+  /** 分组标题（相邻同组项之间插分组头） */
+  group?: string
+  active?: boolean
+  danger?: boolean
+  /** 计数徽标（数字 → Badge count 胶囊——99+ 溢出；label 直传自定义形态） */
+  badge?: string | number
+  onClick?: ()=> void
+  /** 子菜单项（有 children 即渲染为可展开子菜单） */
+  children?: MenuItem[]
+}
+
+export interface MenuProps {
+  items: MenuItem[]
+  onSelect?: (key: string)=> void
+  activeKey?: string
+  className?: string
+  /** 受控展开 key 列表（子菜单） */
+  openKeys?: string[]
+  onOpenChange?: (keys: string[])=> void
+  /** 可折叠侧栏（宽度收窄 + label 隐藏） */
+  collapsible?: boolean
+  collapsed?: boolean
+  onCollapseChange?: (collapsed: boolean)=> void
+}
+
+export const Menu: Component<MenuProps> = (_init, ctx)=> {
+  // 交互子项状态捆绑（createItem——--active 类 + aria-current 文本值 + roving——
+  // danger/child 第二类面走 extra class 追加）
+  const menuItemActive = createItem({ cls: 'wf-menu-item', role: 'menuitem', ariaText: { key: 'aria-current', value: 'page' }, roving: true })
+  // 多状态槽（createItem states——active roving + open aria-expanded 布尔；
+  // collapsed 常量类走 extra.class 追加）
+  const multiTitleItem = createItem({
+    cls: 'wf-menu-submenu-title',
+    role: 'menuitem',
+    states: { active: { roving: true }, open: { aria: 'aria-expanded' } },
+  })
+  // 浏览器环境（ctx.browser 优先，测试/无注入环境 fallback createClientBrowser——自研惰性防御）
+  const _browser = ctx.browser ?? createClientBrowser()
+  // ── mount（只一次）──
+  let navEl: HTMLElement | null = null
+  // 非受控内部状态（手动：闭包 let + render，不触发 Proxy 依赖）
+  let internalOpen: string[] = []
+  let internalCollapsed = false
+  // 折叠态子菜单浮层（roadmap DO）：命令式弹窗（唯一形态 openPopup——外部点击/
+  // Escape/定位——零 document/window 自建）
+  let collapsedPopupKey: string | null = null
+  let popupAnchor: HTMLElement | null = null
+  /** 命令式句柄（唯一形态——openPopup——组件内部同步样板） */
+  let handle: import('../../../../level3/vdom/hooks/popup-manager.ts').PopupHandle | null = null
+  const syncCollapsedPopup = (item: MenuItem, popupOpen: boolean, content: ()=> import('../../../../level6/client/vdom/index.ts').VNode): void => {
+    // 只对打开项生效（多折叠项共享 handle——非打开项调 else-if 会误关）
+    if (popupOpen && !handle)
+      handle = ctx.ui.openPopup({
+        key: 'menu-popup',
+        anchor: ()=> popupAnchor,
+        placement: 'right',
+        gap: 6,
+        content,
+        onClose: ()=> { handle = null; if (collapsedPopupKey) { collapsedPopupKey = null; ctx.render() } },
+      })
+    else if (handle && popupOpen) handle.update(content())
+  }
+  // 稳定 ref（mount 作用域）：仅保存容器，避免内联 ref 每渲染重建
+  const navRef = (el: any)=> { if (el) navEl = el }
+
+  const onKeyDown = (e: KeyboardEvent)=> {
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return
+    const items = navEl
+      ? Array.from(navEl.querySelectorAll<HTMLElement>('.wf-menu-item, .wf-menu-submenu-title'))
+      : []
+    const idx = items.indexOf((_browser?.activeElement() ?? null) as HTMLElement)
+    if (idx < 0) return
+    e.preventDefault()
+    let next = idx
+    if (e.key === 'ArrowDown') next = (idx + 1) % items.length
+    else if (e.key === 'ArrowUp') next = (idx - 1 + items.length) % items.length
+    else if (e.key === 'Home') next = 0
+    else if (e.key === 'End') next = items.length - 1
+    items[next].focus()
+  }
+
+  return (props: MenuProps)=> {
+    const {
+      items, onSelect, activeKey, className,
+      openKeys, onOpenChange, collapsible, collapsed, onCollapseChange,
+    } = props
+
+    const isOpenControlled = openKeys !== undefined
+    const isCollapsedControlled = collapsed !== undefined
+    const openSet = new Set(isOpenControlled ? openKeys : internalOpen)
+    const isCollapsed = isCollapsedControlled ? !!collapsed : internalCollapsed
+
+    const setOpen = (keys: string[])=> {
+      if (isOpenControlled) onOpenChange?.(keys)
+      else { internalOpen = keys; ctx.render() }
+    }
+    const toggleOpen = (key: string, force?: boolean)=> {
+      const next = force != null
+        ? (force ? [...openSet, key] : [...openSet].filter(k => k !== key))
+        : (openSet.has(key) ? [...openSet].filter(k => k !== key) : [...openSet, key])
+      // 去重（子菜单只允许一个 key 出现在 openSet）
+      setOpen([...new Set(next)])
+    }
+    const toggleCollapse = ()=> {
+      const next = !isCollapsed
+      if (isCollapsedControlled) onCollapseChange?.(next)
+      else { internalCollapsed = next; ctx.render() }
+    }
+
+
+    const renderSubmenu = (item: MenuItem): any => {
+      const open = openSet.has(item.key) && !isCollapsed
+      const isActive = item.active ?? (activeKey != null && item.key === activeKey)
+
+      // 折叠态：图标标题 + 点击弹出子菜单浮层（roadmap DO，openPopup 内核基座）
+      if (isCollapsed) {
+        const popupOpen = collapsedPopupKey === item.key
+        const titleEl = h('div', multiTitleItem({ active: isActive, open: popupOpen }, {
+          'data-key': item.key,
+          class: 'wf-menu-submenu-title--collapsed',
+          'aria-haspopup': 'menu',
+          onClick: (e: MouseEvent)=> {
+            if (popupOpen) { collapsedPopupKey = null; ctx.render() }
+            else {
+              popupAnchor = e.currentTarget as HTMLElement
+              collapsedPopupKey = item.key
+              ctx.render()
+            }
+          },
+          onKeyDown: (e: KeyboardEvent)=> {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight') { e.preventDefault(); if (!popupOpen) { popupAnchor = e.currentTarget as HTMLElement; collapsedPopupKey = item.key; ctx.render() } }
+            else if (e.key === 'Escape') { e.preventDefault(); collapsedPopupKey = null; ctx.render() }
+          },
+        }), [
+          item.icon ? h('span', { class: 'wf-menu-icon' }, item.icon) : null,
+        ].filter(Boolean))
+        // 浮层：命令式弹窗（openPopup——定位/外部点击/Escape 内置——只打开项调）
+        if (popupOpen) syncCollapsedPopup(item, popupOpen, ()=> h('div', {
+          class: 'wf-menu-popup',
+        }, (item.children ?? []).map(child => renderItem(child, true, true))))
+        return h('div', { key: item.key, 'data-key': item.key, class: 'wf-menu-submenu wf-menu-submenu--collapsed' }, [titleEl])
+      }
+      // 折叠态：icon-only 标题（无 label/无展开交互——浮层裁剪，见 docs/client.md）
+      const titleChildren = [
+        item.icon ? h('span', { class: 'wf-menu-icon' }, item.icon) : null,
+        isCollapsed ? null : h('span', { class: 'wf-menu-label' }, item.label),
+        isCollapsed ? null : badgeOf(item.badge),
+        isCollapsed ? null : h('span', { class: 'wf-menu-arrow' }, h(Icon, { name: 'chevron-right', size: 12 })),
+      ].filter(Boolean)
+      const title = h('div', {
+        'data-key': item.key,
+        ...multiTitleItem({ active: isActive, open }),
+        onClick: ()=> toggleOpen(item.key),
+        onKeyDown: (e: KeyboardEvent)=> {
+          if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight') {
+            e.preventDefault()
+            if (!open) toggleOpen(item.key, true)
+          } else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            if (open) { e.preventDefault(); toggleOpen(item.key, false) }
+          }
+        },
+      }, titleChildren)
+
+      const content = h('div', {
+        class: 'wf-menu-submenu-content',
+        role: 'group',
+      }, (item.children ?? []).map(child => renderItem(child, true)))
+
+      return h('div', {
+        key: item.key,
+        'data-key': item.key,
+        class: `wf-menu-submenu${open ? ' wf-menu-submenu--open' : ''}`,
+      }, [title, content])
+    }
+
+    const renderItem = (item: MenuItem, isChild = false, forceLabel = false): any => {
+      if (item.children && item.children.length > 0 && !isCollapsed) return renderSubmenu(item)
+      const isActive = item.active ?? (activeKey != null && item.key === activeKey)
+      return h('div', {
+        key: item.key,
+        'data-key': item.key,
+        ...menuItemActive(isActive, { class: [item.danger ? 'wf-menu-item--danger' : '', isChild ? 'wf-menu-item--child' : ''] }),
+        onClick: ()=> { if (item.onClick) item.onClick(); else onSelect?.(item.key) },
+        onKeyDown: (e: KeyboardEvent)=> {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (item.onClick) item.onClick(); else onSelect?.(item.key) }
+          else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            // 子级：收回父级（焦点回父标题）
+            if (isChild) {
+              e.preventDefault()
+              const parentKey = (item as { _parentKey?: string })._parentKey
+              if (parentKey && openSet.has(parentKey)) toggleOpen(parentKey, false)
+            }
+          }
+        },
+      }, [
+        item.icon ? h('span', { class: 'wf-menu-icon' }, item.icon) : null,
+        isCollapsed && !forceLabel ? null : h('span', { class: 'wf-menu-label' }, item.label),
+        isCollapsed && !forceLabel ? null : badgeOf(item.badge),
+      ].filter(Boolean))
+    }
+
+    // 子级项注入父 key（供 Escape/← 收回父级）
+    const nodes: any[] = []
+    let lastGroup: string | undefined
+    for (const item of items) {
+      if (item.group !== lastGroup) {
+        nodes.push(h('div', { class: 'wf-menu-group', key: `g-${item.group}` }, item.group))
+        lastGroup = item.group
+      }
+      if (item.children && item.children.length > 0) {
+        const sub = renderSubmenu(item)
+        // 递归注入 _parentKey（浅处理一层——裁剪：多级子菜单）；仅非折叠分支有 content
+        if (!isCollapsed && sub.props.children[1]) {
+          sub.props.children[1].props.children = sub.props.children[1].props.children.map((c: any)=>
+            c?.props ? { ...c, props: { ...c.props, _parentKey: item.key } } : c)
+        }
+        nodes.push(sub)
+      } else {
+        nodes.push(renderItem(item))
+      }
+    }
+
+    const cls = [
+      'wf-menu',
+      isCollapsed ? 'wf-menu--collapsed' : '',
+      className ?? '',
+    ].filter(Boolean).join(' ')
+
+    const children = [
+      ...nodes,
+      collapsible ? h('div', {
+        class: 'wf-menu-collapse-btn',
+        role: 'button',
+        tabIndex: 0,
+        'aria-label': isCollapsed ? '展开菜单' : '折叠菜单',
+        onClick: toggleCollapse,
+        onKeyDown: (e: KeyboardEvent)=> {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleCollapse() }
+        },
+      }, isCollapsed ? h(Icon, { name: 'chevron-right', size: 14 }) : h(Icon, { name: 'chevron-left', size: 14 })) : null,
+    ].filter(Boolean)
+
+    // 关闭兜底（条件 sync——内部关闭后 renderFn 不再调——handle 残留防漏）
+    if (!collapsedPopupKey && handle) { handle.close(); handle = null }
+
+    return h('nav', { class: cls, role: 'menu', ref: navRef, onKeyDown }, children)
+  }
+}

package/dist/level5/client/components/Menubar/Menubar.css

@@ -0,0 +1,104 @@
+/* weifuwu/client/components — Menubar */
+
+.wf-menubar {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg);
+  font-family: var(--wf-font-sans);
+}
+
+.wf-menubar-trigger {
+  border: none;
+  background: none;
+  padding: var(--wf-space-xs) var(--wf-space);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  cursor: pointer;
+  font-family: var(--wf-font-sans);
+  transition: background var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-menubar-trigger:hover,
+.wf-menubar-trigger--open {
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-menubar-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-menubar-trigger--dis {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* 下拉面板 */
+.wf-menubar-panel {
+  position: fixed;
+  z-index: var(--wf-z-popover);
+  min-width: var(--wf-menubar-min-width,  160px);
+  background: var(--wf-color-bg-elevated);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  box-shadow: var(--wf-shadow-lg);
+  padding: var(--wf-space-xs);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.wf-menubar-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wf-gap-sm);
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: none;
+  padding: var(--wf-space-sm) var(--wf-space);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  cursor: pointer;
+  font-family: var(--wf-font-sans);
+  transition: background-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-menubar-item:hover,
+.wf-menubar-item--hl {
+  background: var(--wf-state-hover);
+}
+
+.wf-menubar-item:active {
+  background: var(--wf-state-pressed);
+}
+
+.wf-menubar-item:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-menubar-item--dis {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.wf-menubar-item-label {
+  flex: 1;
+}
+
+.wf-menubar-shortcut {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  background: var(--wf-color-bg-tertiary);
+  border-radius: var(--wf-radius-sm);
+  padding: 1px var(--wf-space-sm);
+  font-family: var(--wf-font-sans);
+}

package/dist/level5/client/components/Menubar/Menubar.d.ts

@@ -0,0 +1,23 @@
+/** Menubar：水平菜单栏：←→ 切换 + ↓ 展开（shadcn Menubar）（showcase /components/menubar） */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export interface MenubarItem {
+    key: string;
+    label: string;
+    icon?: VNodeChild;
+    shortcut?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface MenubarMenu {
+    key: string;
+    label: string;
+    items?: MenubarItem[];
+    disabled?: boolean;
+}
+export interface MenubarProps {
+    menus?: MenubarMenu[];
+    'aria-label'?: string;
+}
+/** 水平菜单栏（对应 shadcn Menubar）：trigger 点击展开下拉，←→ 切换菜单，Escape 关闭。
+ * 裁剪（CS-05，见 docs/client.md）：hover 展开、子菜单、可拖拽菜单。 */
+export declare const Menubar: Component<MenubarProps>;