@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,87 +0,0 @@
-"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

@@ -1,56 +0,0 @@
-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

@@ -1,257 +0,0 @@
-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

@@ -1,221 +0,0 @@
-"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))
-}