@sparkelf/dsh-plus 0.2.1-rc.2.4 → 0.2.2-alpha.2.1

package/patches/composer-popover-boundaries.patch

@@ -0,0 +1,337 @@
+diff --git a/apps/web/tests/access-confirmation.e2e.ts b/apps/web/tests/access-confirmation.e2e.ts
+index f97978d346..edab518be0 100644
+--- a/apps/web/tests/access-confirmation.e2e.ts
++++ b/apps/web/tests/access-confirmation.e2e.ts
+@@ -151,6 +151,12 @@ describe('web e2e: experimental Auto and Full access confirmation', () => {
+     expect(await access.getAttribute('aria-label')).toBe('访问模式，当前：工作区内修改')
+ 
+     await access.click()
++    const permissionMenu = await page.getByRole('menu').boundingBox()
++    const permissionCenter = await page.locator('[data-dsh-center-col]').boundingBox()
++    expect(permissionMenu).not.toBeNull()
++    expect(permissionCenter).not.toBeNull()
++    expect(permissionMenu!.x).toBeGreaterThanOrEqual(permissionCenter!.x + 11)
++    expect(permissionMenu!.x + permissionMenu!.width).toBeLessThanOrEqual(permissionCenter!.x + permissionCenter!.width - 11)
+     await page.getByRole('menuitem', { name: '完全权限' }).click()
+     const dialog = page.getByRole('dialog', { name: '确认启用完全权限？' })
+     await dialog.waitFor({ timeout: 10_000 })
+diff --git a/apps/web/tests/default-model.e2e.ts b/apps/web/tests/default-model.e2e.ts
+index 9625333287..c71f8c02de 100644
+--- a/apps/web/tests/default-model.e2e.ts
++++ b/apps/web/tests/default-model.e2e.ts
+@@ -480,6 +480,13 @@ describe('web e2e: the composer model switch is the default for later sessions',
+     await trigger.waitFor({ timeout: 15_000 })
+     expect(await trigger.evaluate(element => getComputedStyle(element).fontWeight)).toBe('400')
+     await trigger.click()
++    // The composer popover must stay inside the centre column rather than touching its edges.
++    const boundaryMenu = await page.getByRole('menu').boundingBox()
++    const boundaryCenter = await page.locator('[data-dsh-center-col]').boundingBox()
++    expect(boundaryMenu).not.toBeNull()
++    expect(boundaryCenter).not.toBeNull()
++    expect(boundaryMenu!.x).toBeGreaterThanOrEqual(boundaryCenter!.x + 11)
++    expect(boundaryMenu!.x + boundaryMenu!.width).toBeLessThanOrEqual(boundaryCenter!.x + boundaryCenter!.width - 11)
+     const modelMenuBounds = await page.getByRole('menu', { name: '模型与推理等级', exact: true }).boundingBox()
+     const composerBounds = await page.locator('[data-composer-card]').first().boundingBox()
+     expect(modelMenuBounds!.width).toBeLessThan(composerBounds!.width)
+diff --git a/packages/client/ui-layout/README.md b/packages/client/ui-layout/README.md
+index 43c61b89d1..8fa5117005 100644
+--- a/packages/client/ui-layout/README.md
++++ b/packages/client/ui-layout/README.md
+@@ -56,7 +56,7 @@ The presenter consumes resolved theme snapshots and projects them onto the docum
+ 
+ `selectPanel(id)` checks the live `main` registry before changing selection; an absent key throws and leaves the current panel intact. `beginNavigation()` returns an abort signal for an asynchronous UI navigation. A later call, a valid panel selection (including repeated selection), or layout disposal aborts that signal without cancelling underlying Session creation. Consumers check the signal before committing navigation or moving drafts.
+ 
+-One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
++One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The center column marks its DOM owner so portaled composer menus can stay inside its horizontal bounds. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
+ 
+ </details>
+ 
+diff --git a/packages/client/ui-layout/src/client/AppFrame.tsx b/packages/client/ui-layout/src/client/AppFrame.tsx
+index 5614947447..e3fc26d707 100644
+--- a/packages/client/ui-layout/src/client/AppFrame.tsx
++++ b/packages/client/ui-layout/src/client/AppFrame.tsx
+@@ -33,7 +33,7 @@ export type AppFrameProps =
+ 
+ /** Center column grid item (session-body building block). */
+ function CenterColumn(props: { children?: ReactNode }) {
+-  return <div className={css.centerCol}>{props.children}</div>
++  return <div className={css.centerCol} data-dsh-center-col>{props.children}</div>
+ }
+ 
+ /** Subscribe to the main key without subscribing the column frame to each panel id. */
+diff --git a/packages/client/ui-model-selection/src/client/ModelSelect.module.css b/packages/client/ui-model-selection/src/client/ModelSelect.module.css
+index c36809acaa..21fb6c73b8 100644
+--- a/packages/client/ui-model-selection/src/client/ModelSelect.module.css
++++ b/packages/client/ui-model-selection/src/client/ModelSelect.module.css
+@@ -97,7 +97,9 @@
+   display: flex;
+   flex-direction: column;
+   /* Let the visible pane's rows set the card width, but keep pathological ids
+-     and narrow screens inside a bounded card where ellipsis remains. */
++     and narrow screens inside a bounded card where ellipsis remains. The card's
++     own pad is part of that bound, as it is on the Menu primitive's surface. */
++  box-sizing: border-box;
+   width: max-content;
+   min-width: min(240px, calc(100vw - 32px));
+   max-width: min(420px, calc(100vw - 32px));
+diff --git a/packages/client/ui-model-selection/src/client/ModelSelect.tsx b/packages/client/ui-model-selection/src/client/ModelSelect.tsx
+index f68d355317..c8a0089c19 100644
+--- a/packages/client/ui-model-selection/src/client/ModelSelect.tsx
++++ b/packages/client/ui-model-selection/src/client/ModelSelect.tsx
+@@ -224,13 +224,25 @@ export function ModelSelect(
+       const rect = triggerRef.current?.getBoundingClientRect()
+       if (rect === undefined) return
+       const MARGIN = 12
++      // The composer's center column narrows both clamp edges when this trigger
++      // sits in one; without it the viewport alone decides, as before.
++      const boundary = triggerRef.current?.closest<HTMLElement>('[data-dsh-center-col]')?.getBoundingClientRect()
++      const minX = Math.max(MARGIN, (boundary?.left ?? 0) + MARGIN)
++      const maxX = Math.min(window.innerWidth - MARGIN, (boundary?.right ?? window.innerWidth) - MARGIN)
++      const availableWidth = Math.max(0, maxX - minX)
+       const lw = menuRef.current?.offsetWidth ?? 0
++      const placedWidth = boundary === undefined ? lw : Math.min(lw, availableWidth)
+       const lh = menuRef.current?.offsetHeight ?? 0
+-      let x = rect.right - lw
++      let x = rect.right - placedWidth
+       let y = rect.top - 8 - lh
+-      if (lw > 0) x = Math.min(Math.max(x, MARGIN), window.innerWidth - lw - MARGIN)
++      if (lw > 0) x = Math.min(Math.max(x, minX), maxX - placedWidth)
+       if (lh > 0) y = Math.min(Math.max(y, MARGIN), window.innerHeight - lh - MARGIN)
+-      setMenuPos({ left: x, top: y })
++      // A bounded card takes the owner's width: the same 12px inset on both
++      // sides, never wider than the room between them.
++      const bounds = boundary === undefined
++        ? {}
++        : { minWidth: Math.min(264, availableWidth), maxWidth: availableWidth }
++      setMenuPos({ left: x, top: y, ...bounds })
+     }
+     place()
+     window.addEventListener('scroll', place, true)
+diff --git a/packages/client/ui-model-selection/tests/model-select.client.spec.tsx b/packages/client/ui-model-selection/tests/model-select.client.spec.tsx
+index dbb5b247db..584e1f0366 100644
+--- a/packages/client/ui-model-selection/tests/model-select.client.spec.tsx
++++ b/packages/client/ui-model-selection/tests/model-select.client.spec.tsx
+@@ -454,14 +454,19 @@ describe('ModelSelect reasoning effort', () => {
+     Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: () => 200 })
+     Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, get: () => 300 })
+     try {
+-      const { container } = render(<ModelSelect renderSlot={renderLabel}
++      const { container } = render(<div data-dsh-center-col><ModelSelect renderSlot={renderLabel}
+         locked={false}
+         available
+         directory={createSnapshotStore(state())}
+         load={vi.fn()} resolveText={resolveText}
+         select={vi.fn().mockResolvedValue({ ok: true, value: undefined })}
+         t={t}
+-      />)
++      /></div>)
++      // The composer card's own rect is a zero rect in jsdom; the column's is not.
++      Object.defineProperty(container.firstElementChild, 'getBoundingClientRect', {
++        configurable: true,
++        value: () => ({ left: 280, right: 520, top: 0, bottom: 700, width: 240, height: 700, x: 280, y: 0, toJSON: () => ({}) }),
++      })
+       const trigger = screen.getByRole('button', { name: /选择模型/ })
+       fireEvent.click(trigger)
+       const menu = screen.getByRole('menu')
+@@ -469,8 +474,9 @@ describe('ModelSelect reasoning effort', () => {
+       expect(container.contains(menu)).toBe(false)
+       expect(menu.parentElement).toBe(document.body)
+       // jsdom anchor rects are all zero, so the measured 200x300 card clamps
+-      // to the 12px viewport margin on both axes.
+-      expect(menu.style.left).toBe('12px')
++      // to the centre column's 12px inset horizontally and the viewport's on
++      // the vertical axis.
++      expect(menu.style.left).toBe('292px')
+       expect(menu.style.top).toBe('12px')
+       // Interactions inside the trigger subtree or the portaled card stay open.
+       expect(fireEvent.mouseDown(menu)).toBe(true)
+diff --git a/packages/client/ui-permission-presets/src/client/PermissionSelect.tsx b/packages/client/ui-permission-presets/src/client/PermissionSelect.tsx
+index 0281c41a24..f44f20a8fc 100644
+--- a/packages/client/ui-permission-presets/src/client/PermissionSelect.tsx
++++ b/packages/client/ui-permission-presets/src/client/PermissionSelect.tsx
+@@ -1,4 +1,4 @@
+-import { useEffect, useState } from 'react'
++import { useEffect, useRef, useState } from 'react'
+ import type { ReactNode } from 'react'
+ import clsx from 'clsx'
+ import {
+@@ -81,6 +81,8 @@ export function PermissionSelect({
+   const catalog = usePermissionCatalog(state => state.value)
+   const [pick, setPick] = useState<string | null>(null)
+   const [open, setOpen] = useState(false)
++  /** The center column this trigger sits in; the portaled menu clamps to it. */
++  const boundaryRef = useRef<HTMLElement | null>(null)
+   const [confirmation, setConfirmation] = useState<string | null>(null)
+   const [acknowledged, setAcknowledged] = useState(false)
+ 
+@@ -171,8 +173,12 @@ export function PermissionSelect({
+         onClose={() => { setOpen(false) }}
+         side="top"
+         portal
++        boundaryRef={boundaryRef}
+         anchor={
+           <button
++            ref={(node) => {
++              boundaryRef.current = node?.closest<HTMLElement>('[data-dsh-center-col]') ?? null
++            }}
+             type="button"
+             className={css.trigger}
+             aria-label={t('mode', { name: currentLabel })}
+diff --git a/packages/client/ui-primitives/README.md b/packages/client/ui-primitives/README.md
+index d95d802886..bb1d53df18 100644
+--- a/packages/client/ui-primitives/README.md
++++ b/packages/client/ui-primitives/README.md
+@@ -49,7 +49,7 @@ Check this table before writing a control in a feature package. A plugin cannot
+ | `Input` | Single-line text entry for search boxes and inline forms. Its ref targets the native input for focus and is cleared on unmount. |
+ | `InlineEditor` | Autofocused multi-line inline editor for short drafts such as queued messages and goals. It grows with its text and its width up to six lines, then scrolls; Enter saves, Shift+Enter breaks the line, Enter during IME composition does nothing, and Escape cancels. The caller supplies the localized `label` and rebinds the scrollbar on an elevated surface. |
+ | `ZoomControls`, `DOCUMENT_ZOOM` | Floating document zoom controls with localized labels, fixed presets, and visibility/activity callbacks. An omitted `fit` hides the fitting row. The toolbar carries `data-document-zoom-controls`, plus `data-document-zoom-visible` while visible. An owner `className` overrides `bottom` and `max-width` regardless of stylesheet order; `inset-inline-start` and `transform` center the toolbar and move it on enter and exit, `opacity` fades it, and all three stay with the primitive. Renderers share the published scale limits. |
+-| `Menu`, `MenuItemButton` | Dropdown of `items` data rows, separators, and group labels, with nested submenus; `children` adds component rows, each a `MenuItemButton` (`separatorBefore` starts a new group), in the same list. `MenuItemButton.current` exposes the current page or view through `aria-current` without changing selection or appearance. Every row shares the styling, the keyboard walk, and the focus return; closing stays the owner's state change for both kinds. While open, ↑/↓ (with Home and End) walk the list, Tab settles the focused row, and Escape or Shift+Tab close back to the anchor; selecting a row also returns the keyboard to the anchor unless the owner moved it itself. Only a keyboard on the anchor or inside the list is intercepted, and `autoFocus` decides solely whether opening focuses the first row. |
++| `Menu`, `MenuItemButton` | Dropdown of `items` data rows, separators, and group labels, with nested submenus; `children` adds component rows, each a `MenuItemButton` (`separatorBefore` starts a new group), in the same list. `MenuItemButton.current` exposes the current page or view through `aria-current` without changing selection or appearance. Every row shares the styling, the keyboard walk, and the focus return; closing stays the owner's state change for both kinds. While open, ↑/↓ (with Home and End) walk the list, Tab settles the focused row, and Escape or Shift+Tab close back to the anchor; selecting a row also returns the keyboard to the anchor unless the owner moved it itself. Only a keyboard on the anchor or inside the list is intercepted, and `autoFocus` decides solely whether opening focuses the first row. A portaled list may intersect viewport clamping with an owner boundary. |
+ | `MenuGroup`, `observeStickyMenuGroups` | Localized, accessible groups for custom menus and listboxes, with shared sticky-heading styling and native intersection/size observation; the caller owns the observer's lifetime. |
+ | `Pill` | Selectable capsule button for view switchers and filters; takes `active` and `onClick`. |
+ | `SegmentedTabs` | Controlled equal-width tabs with a sliding indicator and Left/Right, Home, and End navigation. The caller supplies labels, tab/panel ids, and panel content. Default `size="md"` is 42px tall with a 4px inset; `size="sm"` is 34px tall with a 2px inset. |
+diff --git a/packages/client/ui-primitives/README.zh.md b/packages/client/ui-primitives/README.zh.md
+index 115e1defe5..9972ffe785 100644
+--- a/packages/client/ui-primitives/README.zh.md
++++ b/packages/client/ui-primitives/README.zh.md
+@@ -25,7 +25,7 @@ kind: "package-library"
+ <a id="use-this-package"></a>
+ ## 使用本包
+ 
+-`Toast` 在浅色和深色模式下均使用主题的系统提示背景与文字颜色。`Menu` 数据条目与 `MenuItemButton` 组件条目接收功能 owner 提供的有效快捷键，并在末端以无背景的浅灰色文字对齐显示，子菜单也采用同一呈现。主指针为粗指针（`pointer: coarse`）且未使用[键盘导航](#input-modality)时，菜单隐藏这些提示。键盘导航会显示提示，直到下一次指针按下；快捷键绑定始终生效。`ShortcutKeys` 默认以无方块的按键文字显示菜单和行内提示。`tooltip` 变体在深色气泡上使用稍浅的键帽，以加号连接的组合则共用一个填充色块。`Tooltip.shortcutKeys` 将键帽与可选的本地化操作文本垂直居中排列，标签为空时只显示按键。可选的 `className` 供调用方设置交互状态样式。`Modal` 使用框架共享的浮层起点，视口边距至少为 24px。其遮罩不绘制 Windows 顶栏区域，覆盖整个视口的模态层仍阻挡背景点击。`Modal` 与设置外壳通过 `useModalLayer` 共用顶层 Esc 和 Tab 处理，关闭时恢复先前焦点。`closeTopModal(document)` 请求前台弹窗当前的关闭操作；上层菜单或未注册的对话框会阻止关闭其后方弹窗。组件通过 `isBehindModal` 避免将焦点移到嵌套弹窗后方。菜单先消费自己的 Esc，再由模态层处理关闭。 `observeComposition` 为局部弹层和录键处理提供相同的 composition-end 与旧版 IME 保护；调用方随交互生命周期释放其 document 监听。
++`Toast` 在浅色和深色模式下均使用主题的系统提示背景与文字颜色。`Menu` 数据条目与 `MenuItemButton` 组件条目接收功能 owner 提供的有效快捷键，并在末端以无背景的浅灰色文字对齐显示，子菜单也采用同一呈现。主指针为粗指针（`pointer: coarse`）且未使用[键盘导航](#input-modality)时，菜单隐藏这些提示。键盘导航会显示提示，直到下一次指针按下；快捷键绑定始终生效。`ShortcutKeys` 默认以无方块的按键文字显示菜单和行内提示。`tooltip` 变体在深色气泡上使用稍浅的键帽，以加号连接的组合则共用一个填充色块。`Tooltip.shortcutKeys` 将键帽与可选的本地化操作文本垂直居中排列，标签为空时只显示按键。可选的 `className` 供调用方设置交互状态样式。`Modal` 使用框架共享的浮层起点，视口边距至少为 24px。其遮罩不绘制 Windows 顶栏区域，覆盖整个视口的模态层仍阻挡背景点击。`Modal` 与设置外壳通过 `useModalLayer` 共用顶层 Esc 和 Tab 处理，关闭时恢复先前焦点。`closeTopModal(document)` 请求前台弹窗当前的关闭操作；上层菜单或未注册的对话框会阻止关闭其后方弹窗。组件通过 `isBehindModal` 避免将焦点移到嵌套弹窗后方。菜单先消费自己的 Esc，再由模态层处理关闭。 portal 模式的列表可把视口钳制与 owner boundary 取交集。 `observeComposition` 为局部弹层和录键处理提供相同的 composition-end 与旧版 IME 保护；调用方随交互生命周期释放其 document 监听。
+ 
+ `isMobileDevice()` 识别 iOS 和 Android 手机及平板，供自动聚焦和收起键盘使用。它识别 UA 中的 `Android`、`iPhone`、`iPad` 或 `iPod`，以及报告 `MacIntel` 且触摸点数大于一的 iPad。其他设备（包括 Windows 触屏电脑）返回 false，不受窗口宽度影响。函数缓存首次判断结果，供页面内的所有调用方共享；组件重新挂载会复用该结果，重新加载页面时会再次读取浏览器环境。识别出的移动设备需要用户主动聚焦文本输入框。隐藏移动平台信息的浏览器模式或自定义 UA 可能导致识别失败；未识别的 UA 返回 false。仅凭桌面 UA 无法区分 Android 平板与 Linux 电脑。
+ 
+diff --git a/packages/client/ui-primitives/src/Menu.tsx b/packages/client/ui-primitives/src/Menu.tsx
+index 68b3a5766e..e25866591a 100644
+--- a/packages/client/ui-primitives/src/Menu.tsx
++++ b/packages/client/ui-primitives/src/Menu.tsx
+@@ -1,5 +1,5 @@
+ import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+-import type { CSSProperties, ReactNode, SyntheticEvent } from 'react'
++import type { CSSProperties, ReactNode, RefObject, SyntheticEvent } from 'react'
+ import { createPortal } from 'react-dom'
+ import clsx from 'clsx'
+ import { IconCheckOutlineRegular } from './icons/index.tsx'
+@@ -154,6 +154,10 @@ const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
+  * wrapper there races the host's layout effects). Called on open, each animation
+  * frame, and scroll/resize; return null to skip placement for that frame.
+  * @param props.minWidthFromAnchor - in portal mode, keep the menu at least as wide as its anchor, bounded by viewport margins.
++ * @param props.boundaryRef - portal mode only: intersect horizontal placement
++ * with this owner element's rect as well as the viewport, so a menu owned by a
++ * column stays inside that column when a sidebar or panel leaves a narrow
++ * center.
+  * @param props.footer - rows pinned below the scrolling items area, separated
+  * by a hairline; they stay visible while the items above scroll.
+  * @param props.children - component rows rendered after `items` in the same
+@@ -170,7 +174,7 @@ const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
+  * document.body outside the owner's DOM subtree.
+  * @returns anchor wrapper with the conditional list.
+  */
+-export function Menu({ open, anchor, items = [], children, selectedId, selectedIds, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, dense = false, compact = false, autoFocus = false, selection = 'check', getAnchorRect, minWidthFromAnchor = false, footer, className, listClassName }: {
++export function Menu({ open, anchor, items = [], children, selectedId, selectedIds, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, dense = false, compact = false, autoFocus = false, selection = 'check', getAnchorRect, minWidthFromAnchor = false, boundaryRef, footer, className, listClassName }: {
+   open: boolean
+   autoFocus?: boolean
+   anchor: ReactNode
+@@ -190,6 +194,7 @@ export function Menu({ open, anchor, items = [], children, selectedId, selectedI
+   selection?: 'check' | 'fill'
+   getAnchorRect?: () => DOMRect | null
+   minWidthFromAnchor?: boolean
++  boundaryRef?: RefObject<HTMLElement | null>
+   className?: string | undefined
+   listClassName?: string | undefined
+ }) {
+@@ -262,12 +267,19 @@ export function Menu({ open, anchor, items = [], children, selectedId, selectedI
+       const GAP = 4
+       const vw = window.innerWidth
+       const vh = window.innerHeight
++      // The owner boundary narrows both clamp edges; without one the viewport
++      // alone decides, exactly as before.
++      const boundary = boundaryRef?.current?.getBoundingClientRect()
++      const minX = Math.max(MARGIN, (boundary?.left ?? 0) + MARGIN)
++      const maxX = Math.min(vw - MARGIN, (boundary?.right ?? vw) - MARGIN)
++      const availableWidth = Math.max(0, maxX - minX)
+       const listEl = listRef.current
+       if (listEl !== null) {
+         const minimum = minWidthFromAnchor ? `${Math.min(r.width, Math.max(0, vw - MARGIN * 2))}px` : ''
+         if (listEl.style.minWidth !== minimum) listEl.style.minWidth = minimum
+       }
+       const lw = listEl?.offsetWidth ?? 0
++      const placedWidth = boundary === undefined ? lw : Math.min(lw, availableWidth)
+       const lh = listEl?.offsetHeight ?? 0
+ 
+       let x: number
+@@ -279,14 +291,22 @@ export function Menu({ open, anchor, items = [], children, selectedId, selectedI
+         x = r.left
+         y = side === 'bottom' ? r.bottom + GAP : r.top - lh - GAP
+       } else {
+-        x = r.right - lw
++        x = r.right - placedWidth
+         y = side === 'bottom' ? r.bottom + GAP : r.top - lh - GAP
+       }
+ 
+-      if (lw > 0) x = Math.min(Math.max(x, MARGIN), vw - lw - MARGIN)
++      if (lw > 0) x = Math.min(Math.max(x, minX), maxX - placedWidth)
+       if (lh > 0) y = Math.min(Math.max(y, overlayTopMargin(MARGIN, r, GAP)), vh - lh - MARGIN)
+ 
+-      setFixedPos(current => current?.left === x && current.top === y ? current : { left: x, top: y })
++      // A bounded card takes the owner's width: the same 12px inset on both
++      // sides, never wider than the room between them.
++      const bounds = boundary === undefined
++        ? {}
++        : { minWidth: Math.min(218, availableWidth), maxWidth: availableWidth }
++      setFixedPos(current => current?.left === x && current.top === y
++        && current.minWidth === bounds.minWidth && current.maxWidth === bounds.maxWidth
++        ? current
++        : { left: x, top: y, ...bounds })
+     }
+     // First run measures the hidden pre-render (same commit as `open`), so
+     // end/top alignment and clamping use real dimensions before anything
+@@ -305,7 +325,7 @@ export function Menu({ open, anchor, items = [], children, selectedId, selectedI
+       window.removeEventListener('scroll', place, true)
+       window.removeEventListener('resize', place)
+     }
+-  }, [open, portal, align, side, getAnchorRect, minWidthFromAnchor])
++  }, [open, portal, align, side, getAnchorRect, minWidthFromAnchor, boundaryRef])
+ 
+   // Opening remembers where the keyboard was, so closing can hand it back to
+   // that control — an anchor wrapping several (a split button) cannot be asked
+diff --git a/packages/client/ui-primitives/tests/atoms.client.spec.tsx b/packages/client/ui-primitives/tests/atoms.client.spec.tsx
+index 8b198e4365..592c56641d 100644
+--- a/packages/client/ui-primitives/tests/atoms.client.spec.tsx
++++ b/packages/client/ui-primitives/tests/atoms.client.spec.tsx
+@@ -596,6 +596,33 @@ describe('Menu', () => {
+     expect(menu.style.top).toBe('132px')
+   })
+ 
++  it('portal mode intersects viewport clamping with an owner boundary', () => {
++    const offsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth')!
++    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: () => 300 })
++    const anchor = { left: 480, right: 500, top: 100, bottom: 128, width: 20, height: 28, x: 480, y: 100, toJSON: () => ({}) } as DOMRect
++    const boundary = { left: 280, right: 520, top: 0, bottom: 700, width: 240, height: 700, x: 280, y: 0, toJSON: () => ({}) } as DOMRect
++    try {
++      render(<Menu
++        portal
++        open
++        align="end"
++        getAnchorRect={() => anchor}
++        boundaryRef={{ current: { getBoundingClientRect: () => boundary } as HTMLElement }}
++        anchor={null}
++        items={items}
++        onSelect={() => {}}
++        onClose={() => {}}
++      />)
++      const menu = screen.getByRole('menu')
++      // The owner is 240px wide, so the 12px insets leave 216px for a 300px card.
++      expect(menu.style.left).toBe('292px')
++      expect(menu.style.minWidth).toBe('216px')
++      expect(menu.style.maxWidth).toBe('216px')
++    } finally {
++      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', offsetWidth)
++    }
++  })
++
+   it('portal mode skips the frame when getAnchorRect returns null (no menu until a rect exists)', () => {
+     render(
+       <Menu