@orbit-work/ui 0.1.0

package/src/components/domain/chat/Composer/parts/ComposerMenuPopover.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { type CSSProperties, type ReactNode, useLayoutEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom" // ui-imports-guard-disable-line
+import { ComposerMenu, type ComposerMenuGroup, type ComposerMenuItem } from "./ComposerMenu"
+
+export type ComposerMenuPopoverProps<TItem extends ComposerMenuItem = ComposerMenuItem> = {
+  open?: boolean
+  groups: ComposerMenuGroup<TItem>[]
+  activeId?: string
+  anchorRect: DOMRect | null
+  emptyMessage?: string
+  onSelect?: (item: TItem) => void
+  onClose: () => void
+  onGroupAction?: (groupId: string, actionId: string) => void
+  renderLeading?: (item: TItem) => ReactNode
+}
+
+/**
+ * ComposerMenuPopover —— 把 `ComposerMenu` 抬到 body 上、锚在触发区上方（Composer 簇内部件）。
+ *
+ * 滚动容器会裁掉 absolute 弹层，而裁剪不是抬 z-index 能解决的，所以走 portal。
+ * 立面（popover 面 ＋ pop 影 ＋ 1px 边 ＋ 菜单档圆角）与 z 档在 components.css 的
+ * `.ow-composer-menu-popover` 段，按 §5 统一。
+ */
+export function ComposerMenuPopover<TItem extends ComposerMenuItem>({
+  open = true,
+  groups,
+  activeId,
+  anchorRect,
+  emptyMessage,
+  onSelect,
+  onClose,
+  onGroupAction,
+  renderLeading,
+}: ComposerMenuPopoverProps<TItem>) {
+  const [position, setPosition] = useState<CSSProperties | null>(null)
+  const listRef = useRef<HTMLDivElement | null>(null)
+
+  useLayoutEffect(() => {
+    if (!open || !anchorRect || typeof window === "undefined") {
+      setPosition(null)
+      return
+    }
+    const width = Math.round(Math.min(anchorRect.width, 640))
+    const left = Math.max(8, Math.min(anchorRect.left, window.innerWidth - width - 8))
+    setPosition({
+      position: "fixed",
+      top: anchorRect.top - 8,
+      left,
+      width,
+      bottom: "auto",
+      right: "auto",
+      transform: "translateY(-100%)",
+      // z 梯度按 §5：弹层一律 popover 档，不再手写数值。
+      zIndex: "var(--ow-z-popover)",
+    })
+  }, [anchorRect, open])
+
+  useLayoutEffect(() => {
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" })
+  }, [activeId])
+
+  const hasItems = groups.some((group) => group.items.length > 0)
+  if (!open || (!hasItems && !emptyMessage) || typeof document === "undefined") return null
+
+  return createPortal(
+    <>
+      <div className="ow-composer-menu-backdrop" onMouseDown={onClose} />
+      {position && (
+        <div className="ow-composer-menu-popover" style={position} onMouseDown={(event) => event.preventDefault()}>
+          <ComposerMenu
+            className="ow-composer-menu--portal"
+            groups={groups}
+            activeId={activeId}
+            emptyMessage={emptyMessage}
+            listRef={listRef}
+            onSelect={onSelect}
+            onGroupAction={onGroupAction}
+            renderLeading={renderLeading}
+          />
+        </div>
+      )}
+    </>,
+    document.body,
+  )
+}

package/src/components/domain/chat/Composer/parts/ComposerMenuPopoverSource.test.mjs

@@ -0,0 +1,56 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./ComposerMenuPopover.tsx", import.meta.url), "utf8")
+const menuSource = await readFile(new URL("./ComposerMenu.tsx", import.meta.url), "utf8")
+
+test("portal composer menus do not add an empty flex item to the composer surface", () => {
+  assert.ok(source.includes("createPortal("))
+  assert.ok(source.includes("document.body"))
+  assert.doesNotMatch(source, /className="ow-composer__overlay"/)
+})
+
+test("disabled composer items explain why they cannot be selected", () => {
+  assert.ok(menuSource.includes("title={item.disabledReason}"))
+  assert.ok(menuSource.includes('data-ow-part="disabled-reason"'))
+  assert.ok(menuSource.includes("if (!item.disabled) onSelect?.(item)"))
+  assert.match(
+    menuSource,
+    /item\.disabled\s*&&\s*["']cursor-not-allowed[^"']*text-\[color:var\(--ow-disabled-text\)\]["']/,
+  )
+  assert.match(menuSource, /data-ow-part="disabled-reason"\s+className="text-ow-error/)
+})
+
+/* ── R2 复审批（ComposerMenu 本体，portal 壳与内联壳共用同一份列） ── */
+
+// 既定态：游标高亮必须比 hover 更显眼。原来 active 行写 --ow-selected-bg（地面/面板档），
+// 暗档 #262932 比 --ow-hover-pop #2E323C 还暗，划过任一普通行都会把游标行盖过去。
+test("R2 §5：菜单游标行走 --ow-press-pop（比 hover-pop 深一档），hover 不得反超", () => {
+  assert.match(menuSource, /active && "bg-\[var\(--ow-press-pop\)\] hover:bg-\[var\(--ow-press-pop\)\]"/)
+  assert.doesNotMatch(menuSource, /bg-\[var\(--ow-selected-bg\)\]/)
+  assert.match(menuSource, /hover:bg-\[var\(--ow-hover-pop\)\] active:bg-\[var\(--ow-press-pop\)\]/)
+})
+
+// §8 眉标：中文档 12px / +0.08em。原来走拉丁 11px 档 ＋ 裸 tracking-[0.3px]（≈0.027em，
+// 不在任何档上）＋ 对中文无效的 uppercase。
+test("R2 §8：分组眉标走中文眉标档 --ow-fs-eyebrow-cjk / --ow-ls-eyebrow-cjk，无 uppercase", () => {
+  assert.match(menuSource, /text-\[length:var\(--ow-fs-eyebrow-cjk,12px\)\]/)
+  assert.match(menuSource, /tracking-\[var\(--ow-ls-eyebrow-cjk,0\.08em\)\]/)
+  assert.doesNotMatch(menuSource, /tracking-\[0\.3px\]/)
+  const header = /data-ow-part="group-header"[\s\S]*?className="([^"]*)"/.exec(menuSource)
+  assert.ok(header, "找不到 group-header 的 className")
+  assert.doesNotMatch(header[1], /uppercase/)
+  // 首字徽标（拉丁首字母）保留 uppercase：那是字母徽标，不是眉标。
+})
+
+// 选中（item.selected，行尾勾）与游标高亮（activeId，底色）是两条态，注释里必须分开写。
+test("R2 doc：头注释把 item.selected 的勾与 activeId 的底色分开交代", () => {
+  assert.match(menuSource, /`item\.selected`/)
+  assert.match(menuSource, /`activeId`/)
+})
+
+// §7 行高档 40/密 32：单行菜单行落 40 档（两行行高另有待裁，见 R2 报告）。
+test("R2 §7：菜单行下限 40（单行落行高档）", () => {
+  assert.match(menuSource, /min-h-10 hover:bg-\[var\(--ow-hover-pop\)\]/)
+})

package/src/components/domain/chat/Composer/parts/ComposerPopover.stories.tsx

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { CSSProperties, ReactNode } from "react"
+import { useState } from "react"
+import { Button } from "../../../../primitives"
+import { ComposerPopover } from "./ComposerPopover"
+
+/**
+ * 弹层演示内容的统一配方（R2 复审修）。
+ *
+ * 原来十条 story 的弹层内容一律是浏览器默认字号的裸标题/裸段落配裸 `padding:16/8`——
+ * 字号差就是 UA 样式表的默认值，不是 DS2 字阶；LongContent 的正文还是英文占位文。这里收成一处：
+ * 内距走 `--ow-space-*`、标题走 `--ow-fs-ui` 500、正文走 `--ow-fs-body-sm` + `--ow-text-2`，
+ * 文案一律中文（§8：像同事说话）。
+ */
+const demoBodyStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--ow-space-15, 6px)",
+  padding: "var(--ow-space-3, 12px)",
+}
+const demoTitleStyle: CSSProperties = {
+  fontSize: "var(--ow-fs-ui)",
+  fontWeight: 500,
+  lineHeight: 1.4,
+  color: "var(--ow-text)",
+}
+const demoTextStyle: CSSProperties = {
+  fontSize: "var(--ow-fs-body-sm)",
+  lineHeight: 1.6,
+  color: "var(--ow-text-2)",
+}
+
+function DemoBody({ title, lines, style }: { title: ReactNode; lines: ReactNode[]; style?: CSSProperties }) {
+  return (
+    <div style={{ ...demoBodyStyle, ...style }}>
+      <div style={demoTitleStyle}>{title}</div>
+      {lines.map((line, i) => (
+        <div key={i} style={demoTextStyle}>
+          {line}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const meta = {
+  title: "Chat/ComposerPopover",
+  component: ComposerPopover,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof ComposerPopover>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+        <div style={{ marginTop: 300 }}>
+          <Button onClick={() => setOpen(!open)}>{open ? "关闭" : "打开"} Popover</Button>
+          {open && (
+            <ComposerPopover onClose={() => setOpen(false)}>
+              <DemoBody title="弹层内容" lines={["点弹层外任意处即关闭。"]} />
+            </ComposerPopover>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const AlignStart: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover align="start" onClose={() => console.log("Close")}>
+          <DemoBody title="左对齐" lines={["弹层左边缘与触发器左边缘对齐。"]} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const AlignEnd: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover align="end" onClose={() => console.log("Close")}>
+          <DemoBody title="右对齐" lines={["弹层右边缘与触发器右边缘对齐。"]} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const FixedWidth: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover width={400} onClose={() => console.log("Close")}>
+          <DemoBody title="固定宽度 400" lines={["宽度由调用方给定，内容再长也不撑开。"]} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const ContentWidth: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover width="content" onClose={() => console.log("Close")}>
+          <DemoBody title="内容宽度" lines={["宽度跟着内容走，一行不折。"]} style={{ whiteSpace: "nowrap" }} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const LongContent: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover width={300} onClose={() => console.log("Close")}>
+          <DemoBody
+            title="长内容"
+            lines={[
+              "这条用来看弹层怎么处理成段的文字：换行、断字、以及超出视口时的夹取。",
+              "Q3 渠道复盘一共引用了 14 份来源，其中 9 份的口径需要重新核对。",
+              "行业均值换成中位数之后，第 3 张图的时间轴要补到 Q3 末。",
+              "结论段控制在 200 字以内，先说结论再说依据。",
+            ]}
+          />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const WithList: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>选择选项</Button>
+        <ComposerPopover width={250} onClose={() => console.log("Close")}>
+          {/* R2 复审修：原来是 8 个手搓裸 <button>（无 hover / :active / focus-visible、
+              无 32/40 行高）。弹层里的菜单行本仓已有现成基座 `.cpop .mi`
+              （desktop-surfaces.css：高 32 · --ow-radius-control · hover/press 走 -pop 档 ·
+              focus-visible 走焦点环三件套），直接用它，别在 story 里另起一套。 */}
+          <div className="cpop__scroll">
+            {Array.from({ length: 8 }, (_, i) => (
+              <button key={i} type="button" className="mi" onClick={() => {}}>
+                选项 {i + 1}
+              </button>
+            ))}
+          </div>
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const NearEdge: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300, marginLeft: "auto", marginRight: 20, width: "fit-content" }}>
+        <Button>靠近右边缘</Button>
+        <ComposerPopover width={300} onClose={() => console.log("Close")}>
+          <DemoBody title="边缘处理" lines={["靠边时自动夹回视口内，不越界。"]} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomPadding: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover viewportPadding={32} onClose={() => console.log("Close")}>
+          <DemoBody title="自定义边距" lines={["视口边距设为 32，夹取时留出更多余量。"]} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * 自定义立面的边界：底/边/影只许在 DS2 档位里挑（面 `--ow-surface-2` 井、1px `--ow-border`、
+ * 弹层影 `--ow-shadow-pop`、圆角走菜单档），不许手写 rgba 阴影或 V1 token。
+ *
+ * W5 终扫修：原 story 写的是 `var(--bg-secondary)` / `var(--border-primary)`（V1 token，
+ * 仓内无定义，实际回落透明）＋ `boxShadow: "0 4px 12px rgba(0,0,0,0.15)"` 裸影 ＋ 裸 8 圆角。
+ */
+export const WithCustomStyle: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>
+        <Button>触发按钮</Button>
+        <ComposerPopover
+          style={{
+            background: "var(--ow-surface-2)",
+            border: "1px solid var(--ow-border)",
+            borderRadius: "var(--ow-radius-menu)",
+            boxShadow: "var(--ow-shadow-pop)",
+          }}
+          onClose={() => console.log("Close")}
+        >
+          <DemoBody title="自定义样式" lines={["底、边、影都从 DS2 档位里挑。"]} />
+        </ComposerPopover>
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: StoryObj<typeof ComposerPopover> = {
+  render: () => {
+    const [open, setOpen] = useState(false)
+    const [count, setCount] = useState(0)
+
+    return (
+      <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+        <div style={{ marginTop: 300 }}>
+          <Button onClick={() => setOpen(!open)}>{open ? "关闭" : "打开"} Popover</Button>
+          {open && (
+            <ComposerPopover onClose={() => setOpen(false)}>
+              <div style={demoBodyStyle}>
+                <div style={demoTitleStyle}>交互式弹层</div>
+                <div style={demoTextStyle}>
+                  点击次数：
+                  <span style={{ fontFamily: "var(--ow-font-mono)", fontVariantNumeric: "tabular-nums" }}>{count}</span>
+                </div>
+                <div style={{ display: "flex", gap: "var(--ow-space-2, 8px)" }}>
+                  <Button size="sm" onClick={() => setCount(count + 1)}>
+                    增加
+                  </Button>
+                  <Button size="sm" variant="ghost" onClick={() => setCount(0)}>
+                    重置
+                  </Button>
+                </div>
+              </div>
+            </ComposerPopover>
+          )}
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/domain/chat/Composer/parts/ComposerPopover.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import { type CSSProperties, type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom" // ui-imports-guard-disable-line
+
+export type ComposerPopoverProps = {
+  children: ReactNode
+  className?: string
+  onClose: () => void
+  /** Horizontal alignment relative to the trigger. */
+  align?: "start" | "end"
+  /** Fixed panel width, or `content` for intrinsic sizing. */
+  width?: number | "content"
+  /** Minimum distance between the complete visible popover tree and the viewport. */
+  viewportPadding?: number
+  style?: CSSProperties
+}
+
+type PopoverPosition = {
+  top: number
+  left: number
+}
+
+const NESTED_POPOVER_GAP = 8
+
+/**
+ * Portal-backed popover for Desktop Composer controls. The complete visible
+ * subtree is kept inside the viewport, including absolutely positioned nested
+ * menus such as the model picker's thinking-effort menu.
+ *
+ * W5 终扫修：本件原来只写定位（fixed/translateY/zIndex），立面全靠调用方自己补 `.cpop`
+ * 类——不补的场景（story、新接入方）就渲成一片裸文字，无面无边无影无圆角。现在基类
+ * `cpop` 由组件自带：§5 弹层档＝`--ow-popover-bg` 面 ＋ 1px `--ow-border` ＋
+ * `--ow-shadow-pop` ＋ 菜单档圆角（见 desktop-surfaces.css 的 `.cpop` 段）。
+ * 调用方仍可继续传 `cpop cpop--model` 这类修饰类，重复的基类会被去重。
+ */
+export function ComposerPopover({
+  children,
+  className = "",
+  onClose,
+  align = "start",
+  width = 230,
+  viewportPadding = 8,
+  style,
+}: ComposerPopoverProps) {
+  const anchorRef = useRef<HTMLSpanElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  const [position, setPosition] = useState<PopoverPosition | null>(null)
+  const [horizontalOverflow, setHorizontalOverflow] = useState<"left" | null>(null)
+
+  const measure = useCallback(() => {
+    const anchor = anchorRef.current
+    const content = contentRef.current
+    if (!anchor || !content || typeof window === "undefined") return
+
+    const anchorRect = anchor.parentElement?.getBoundingClientRect() ?? anchor.getBoundingClientRect()
+    const contentRect = content.getBoundingClientRect()
+    const desiredLeft = align === "end" ? anchorRect.right - contentRect.width : anchorRect.left
+    const nested = nestedHorizontalBounds(content, contentRect)
+    const nextHorizontalOverflow = nested && desiredLeft + nested.leftOffset < viewportPadding ? "left" : null
+    const bounds = visibleHorizontalBounds(content, contentRect, nested?.element)
+
+    // Reserve room for the hidden nested menu during the first layout pass. CSS
+    // hover can reveal it without a React render, so measuring only after it is
+    // visible would paint one frame in the clipped, left-opening position.
+    if (nested) {
+      if (nextHorizontalOverflow === "left") {
+        bounds.rightOffset = Math.max(bounds.rightOffset, nested.rightOffset)
+      } else {
+        bounds.leftOffset = Math.min(bounds.leftOffset, nested.leftOffset)
+      }
+    }
+    setHorizontalOverflow((current) => (current === nextHorizontalOverflow ? current : nextHorizontalOverflow))
+    const minLeft = viewportPadding - bounds.leftOffset
+    const maxLeft = window.innerWidth - viewportPadding - bounds.rightOffset
+
+    // Prefer keeping the complete popover tree visible. If it is wider than the
+    // viewport, keep the primary panel visible and let its own responsive styles
+    // constrain nested content.
+    const left =
+      minLeft <= maxLeft
+        ? clamp(desiredLeft, minLeft, maxLeft)
+        : clamp(
+            desiredLeft,
+            viewportPadding,
+            Math.max(viewportPadding, window.innerWidth - viewportPadding - contentRect.width),
+          )
+    const next = { top: anchorRect.top - 8, left }
+    setPosition((current) => (current?.top === next.top && current.left === next.left ? current : next))
+  }, [align, viewportPadding])
+
+  useLayoutEffect(() => {
+    measure()
+  }, [children, measure, style, width])
+
+  useEffect(() => {
+    const content = contentRef.current
+    if (!content) return undefined
+
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure)
+    resizeObserver?.observe(content)
+    const mutationObserver =
+      typeof MutationObserver === "undefined"
+        ? null
+        : new MutationObserver((mutations) => {
+            // Ignore React updating the portal root's inline position; nested class and
+            // content changes can reveal or resize an overflowing submenu.
+            if (mutations.some((mutation) => mutation.target !== content)) measure()
+          })
+    mutationObserver?.observe(content, { attributes: true, childList: true, characterData: true, subtree: true })
+    window.addEventListener("resize", measure)
+    window.addEventListener("scroll", measure, true)
+    return () => {
+      resizeObserver?.disconnect()
+      mutationObserver?.disconnect()
+      window.removeEventListener("resize", measure)
+      window.removeEventListener("scroll", measure, true)
+    }
+  }, [measure])
+
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null
+      if (target && contentRef.current?.contains(target)) return
+      // The trigger owns its toggle behavior.
+      if (target && anchorRef.current?.parentElement?.contains(target)) return
+      onClose()
+    }
+    document.addEventListener("pointerdown", onPointerDown, true)
+    return () => document.removeEventListener("pointerdown", onPointerDown, true)
+  }, [onClose])
+
+  // 基类 cpop（立面）恒在，调用方传来的修饰类接在后面；cpop/cpop--portal 去重避免重复类名。
+  const classes = [
+    "cpop",
+    ...className.split(/\s+/).filter((token) => token && token !== "cpop" && token !== "cpop--portal"),
+    "cpop--portal",
+  ].join(" ")
+
+  const popover = (
+    <div
+      ref={contentRef}
+      className={classes}
+      data-horizontal-overflow={horizontalOverflow ?? undefined}
+      style={{
+        ...style,
+        position: "fixed",
+        top: position?.top ?? -9999,
+        left: position?.left ?? -9999,
+        right: "auto",
+        bottom: "auto",
+        width: width === "content" ? "max-content" : width,
+        maxWidth: style?.maxWidth ?? "calc(100vw - 16px)",
+        transform: "translateY(-100%)",
+        visibility: position ? "visible" : "hidden",
+        // z 梯度按 §5：弹层一律 popover 档，不再手写数值。
+        zIndex: "var(--ow-z-popover)",
+      }}
+      onMouseDown={(event) => event.stopPropagation()}
+    >
+      {children}
+    </div>
+  )
+
+  return (
+    <>
+      <span ref={anchorRef} />
+      {typeof document !== "undefined" &&
+        createPortal(
+          <>
+            <div className="cpop-backdrop" onClick={onClose} />
+            {popover}
+          </>,
+          document.body,
+        )}
+    </>
+  )
+}
+
+function visibleHorizontalBounds(
+  content: HTMLElement,
+  contentRect: DOMRect,
+  excludedSubtree?: HTMLElement,
+): { leftOffset: number; rightOffset: number } {
+  let left = contentRect.left
+  let right = contentRect.right
+  for (const element of content.querySelectorAll<HTMLElement>("*")) {
+    if (excludedSubtree?.contains(element)) continue
+    const rect = element.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) continue
+    left = Math.min(left, rect.left)
+    right = Math.max(right, rect.right)
+  }
+  return { leftOffset: left - contentRect.left, rightOffset: right - contentRect.left }
+}
+
+function nestedHorizontalBounds(
+  content: HTMLElement,
+  contentRect: DOMRect,
+): {
+  element: HTMLElement
+  leftOffset: number
+  rightOffset: number
+} | null {
+  const element = content.querySelector<HTMLElement>(".cpop-sub")
+  const nestedAnchor = element?.parentElement
+  if (!element || !nestedAnchor) return null
+
+  const width = Number.parseFloat(getComputedStyle(element).width)
+  if (!Number.isFinite(width) || width <= 0) return null
+  const anchorRect = nestedAnchor.getBoundingClientRect()
+  return {
+    element,
+    leftOffset: anchorRect.left - contentRect.left - NESTED_POPOVER_GAP - width,
+    rightOffset: anchorRect.right - contentRect.left + NESTED_POPOVER_GAP + width,
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value))
+}