@allbluecn/web-app 0.3.0

package/src/components/story/ai/story-ai-toolbar.tsx

@@ -0,0 +1,290 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useMemo, useEffect, useRef, useState } from "react"
+import {
+  Check, X, Loader2, Square,
+  Cpu, ChevronDown,
+} from "lucide-react"
+import { useTranslation } from "react-i18next"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { type StoryAiModelGroup } from "./use-story-ai-model"
+import {
+  ACTION_REGISTRY,
+  getVisibleActions,
+  type StoryAIAction,
+  type ShowActionProps,
+} from "./action-registry"
+import { useStreamTextAction, type TiptapEditorRef } from "./handlers/stream-text"
+import { useToolbarOverflow } from "./use-toolbar-overflow"
+import { MorePopover } from "./handlers/more-popover"
+import { StorySplitDialog } from "./split-dialog"
+import { StoryPrototypeDialog } from "./prototype-dialog"
+
+export type StoryDescriptionAIMode = "text" | "editor"
+
+// 向后兼容：保留旧类型名导出
+export type StoryDescriptionAIAction = "generate" | "expand" | "polish" | "acceptance"
+
+export interface StoryAiToolbarProps extends ShowActionProps {
+  storyId?: string
+  description: string
+  title?: string
+  mode?: StoryDescriptionAIMode
+  editorRef?: React.RefObject<TiptapEditorRef | null>
+  onApply?: (description: string) => void
+  onGenerating?: (generating: boolean) => void
+  model?: string
+  groups?: StoryAiModelGroup[]
+  onModelChange?: (model: string) => void
+  showModelSelect?: boolean
+  /** 模型选择器位置与显隐：leading=左侧常显（默认），trailing=右侧常显，trailing-hover=右侧 hover 淡入 */
+  modelSelectVariant?: "leading" | "trailing" | "trailing-hover"
+  /** 是否撑满父容器（flex-grow）。弹窗中 false=内容宽度靠 mr-auto 右靠；详情页 true=撑满 wrapper */
+  fill?: boolean
+}
+
+const GAP = 4
+// 「更多」按钮宽度估值（图标 + 文案 + 计数徽章 + padding）
+const MORE_WIDTH = 72
+
+export function StoryAiToolbar(props: StoryAiToolbarProps) {
+  const {
+    storyId, description, title, mode = "text", editorRef, onApply, onGenerating,
+    model, groups = [], onModelChange, showModelSelect = true,
+    modelSelectVariant = "leading",
+    fill = false,
+    showGenerate = true, showExpand = true, showPolish = true, showAcceptance = true,
+    showSplit = false, showTestCase = false, showPrototype = false, showUi = false,
+    showCode = false,
+  } = props
+  const { t } = useTranslation("story")
+
+  const showProps: ShowActionProps = {
+    showGenerate, showExpand, showPolish, showAcceptance,
+    showSplit, showTestCase, showPrototype, showUi, showCode,
+  }
+  // 固定顺序：始终用 ACTION_REGISTRY 默认顺序（已移除用户自定义排序）
+  const order = useMemo(() => ACTION_REGISTRY.map((a) => a.type), [])
+  const visibleActions = getVisibleActions(showProps, order)
+
+  const stream = useStreamTextAction({
+    storyId, description, title, mode, editorRef, onApply, onGenerating, model, t,
+  })
+  const { action, draft, isGenerating, handle, stop, apply, discard } = stream
+  const [popoverOpen, setPopoverOpen] = useState(false)
+  const [splitOpen, setSplitOpen] = useState(false)
+  const [prototypeOpen, setPrototypeOpen] = useState(false)
+
+  useEffect(() => {
+    if (isGenerating && popoverOpen) setPopoverOpen(false)
+  }, [isGenerating, popoverOpen])
+
+  const isEditorMode = mode === "editor" && editorRef?.current
+
+  // 溢出检测：容器宽度由父级 flex 分配决定，收起按钮不影响容器宽度，从而可靠回展
+  const containerRef = useRef<HTMLDivElement>(null)
+  const measureRef = useRef<HTMLDivElement>(null)
+  const modelSelectRef = useRef<HTMLButtonElement>(null)
+  const isTrailing = modelSelectVariant === "trailing" || modelSelectVariant === "trailing-hover"
+  const { visibleCount, hasOverflow } = useToolbarOverflow({
+    containerRef, measureRef,
+    leadingRef: showModelSelect && !isTrailing ? modelSelectRef : undefined,
+    trailingRef: showModelSelect && isTrailing ? modelSelectRef : undefined,
+    gap: GAP, moreButtonWidth: MORE_WIDTH,
+  })
+
+  const visibleShown = hasOverflow ? visibleActions.slice(0, visibleCount) : visibleActions
+  const collapsedActions = hasOverflow ? visibleActions.slice(visibleCount) : []
+
+  const HAS_DRAFT_UI = new Set<StoryAIAction>(["expand", "polish", "acceptance"])
+
+  const onActionClick = (type: StoryAIAction) => {
+    const def = ACTION_REGISTRY.find((a) => a.type === type)
+    if (!def) return
+    if (def.mode === "stream-text") {
+      handle(type as "generate" | "expand" | "polish" | "acceptance")
+      return
+    }
+    if (def.mode === "reserved") {
+      import("sonner").then(({ toast }) =>
+        toast.info(t("storyAi.toolbar.underDevelopment")),
+      )
+      return
+    }
+    if (type === "split") {
+      setSplitOpen(true)
+      return
+    }
+    if (type === "prototype") {
+      setPrototypeOpen(true)
+      return
+    }
+  }
+
+  const renderModelSelect = (variant: "leading" | "trailing" | "trailing-hover") => {
+    const isTrailingPos = variant !== "leading"
+    const isHover = variant === "trailing-hover"
+    // 收起后 trailing 模型按钮改用 hidden（display:none 彻底让位，空间留给可见按钮 + 更多），
+    // 模型选择移入「更多」按钮的右侧子菜单；overflow hook 用缓存宽度判断恢复（hysteresis）
+    const collapsed = isTrailingPos && hasOverflow
+    return (
+      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={modelSelectRef}
+            variant="ghost"
+            size="sm"
+            disabled={isGenerating}
+            className={
+              (isHover
+                ? `ml-auto h-7 shrink-0 px-2 text-xs text-muted-foreground gap-0.5 transition-opacity duration-150 ${popoverOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`
+                : isTrailingPos
+                  ? "ml-auto h-7 shrink-0 px-2 text-xs text-muted-foreground gap-0.5"
+                  : "h-7 shrink-0 px-2 text-xs text-muted-foreground gap-0.5"
+              ) + (collapsed ? " hidden" : "")
+            }
+          >
+            <Cpu className="mr-1 size-3" />
+            {model ? model.split("/").pop() : t("storyAi.toolbar.model")}
+            <ChevronDown className="ml-0.5 size-3" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-60 p-2" align={isTrailingPos ? "end" : "start"}>
+          {groups.length > 0 ? (
+            <div className="space-y-2 max-h-80 overflow-y-auto">
+              {groups.map((group) => (
+                <div key={group.label}>
+                  <p className="mb-1 px-2 text-[10px] font-medium text-muted-foreground uppercase">{group.label}</p>
+                  <div className="space-y-0.5">
+                    {group.items.map((m) => (
+                      <button
+                        key={m.value}
+                        type="button"
+                        onClick={() => onModelChange?.(m.value)}
+                        className={`flex w-full items-center justify-between rounded px-2 py-1.5 text-sm ${
+                          model === m.value ? "bg-accent font-medium" : "hover:bg-muted"
+                        }`}
+                      >
+                        <span>{m.label}</span>
+                        {model === m.value && <Check className="size-3.5 shrink-0 text-primary" />}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="px-2 text-xs text-muted-foreground">{t("storyAi.toolbar.noModels")}</p>
+          )}
+        </PopoverContent>
+      </Popover>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className={`group relative flex items-center gap-1 min-w-0 flex-nowrap${fill ? " flex-[1_1_auto]" : ""}`}>
+      {showModelSelect && !isTrailing && renderModelSelect("leading")}
+
+      {/* 隐藏测量层：渲染全部按钮的天然宽度，供溢出计算使用 */}
+      <div ref={measureRef} aria-hidden className="absolute -z-10 invisible flex items-center gap-1 pointer-events-none">
+        {visibleActions.map((a) => (
+          <Button key={a.type} variant="ghost" size="sm" className="h-7 px-2 text-xs text-muted-foreground">
+            <a.icon className="mr-1 size-3" />{t(a.labelKey)}
+          </Button>
+        ))}
+      </div>
+
+      {visibleShown.map((a, idx) => {
+        const isActive = action === a.type
+        const disabled =
+          isGenerating ||
+          (a.requiresTitle && !title?.trim()) ||
+          (a.requiresText && !description.trim())
+        return (
+          <Tooltip key={a.type}>
+            <TooltipTrigger asChild>
+              <span>
+                <Button
+                  variant="ghost" size="sm"
+                  className="h-7 shrink-0 px-2 text-xs text-muted-foreground"
+                  disabled={disabled}
+                  onClick={() => onActionClick(a.type)}
+                >
+                  {isActive ? <Loader2 className="mr-1 size-3 animate-spin" /> : <a.icon className="mr-1 size-3" />}
+                  {t(a.labelKey)}
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{t(a.hintKey)}</TooltipContent>
+          </Tooltip>
+        )
+      })}
+
+      {hasOverflow && (
+        <MorePopover
+          collapsedActions={collapsedActions}
+          onActionClick={onActionClick}
+          disabled={isGenerating}
+          modelSelect={showModelSelect && isTrailing && onModelChange ? { model, groups, onModelChange } : undefined}
+        />
+      )}
+
+      {isGenerating && (
+        <Button variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" onClick={stop}>
+          <Square className="mr-1 size-3" />
+          {t("storyAi.toolbar.stop")}
+        </Button>
+      )}
+
+      {action && !isGenerating && draft.trim() && !isEditorMode && HAS_DRAFT_UI.has(action as StoryAIAction) && (
+        <span className="ml-1 flex shrink-0 items-center gap-1">
+          <Button variant="default" size="sm" className="h-7 px-2 text-xs" onClick={apply}>
+            <Check className="mr-1 size-3" /> {t("storyAi.toolbar.replace")}
+          </Button>
+          <Button variant="outline" size="sm" className="h-7 px-2 text-xs" onClick={discard}>
+            <X className="mr-1 size-3" /> {t("storyAi.toolbar.discard")}
+          </Button>
+        </span>
+      )}
+
+      {showModelSelect && isTrailing && renderModelSelect(modelSelectVariant)}
+
+      <StorySplitDialog
+        storyId={storyId ?? ""}
+        storyName={title ?? t("storyAi.toolbar.currentStory")}
+        storyDescription={description}
+        open={splitOpen}
+        onOpenChange={setSplitOpen}
+        onComplete={() => { /* 拆解完成：split-dialog 内部已完成创建副作用，无需修改描述 */ }}
+      />
+
+      <StoryPrototypeDialog
+        storyId={storyId ?? ""}
+        storyDescription={description}
+        open={prototypeOpen}
+        onOpenChange={setPrototypeOpen}
+      />
+    </div>
+  )
+}

package/src/components/story/ai/use-story-ai-model.ts

@@ -0,0 +1,137 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/web/src/components/story/ai/use-story-ai-model.ts
+import { useSession } from "@/lib/auth/auth-client"
+import { listEnabledModelsFn } from "@/server/serverFns/ai/providers"
+import { useCallback, useEffect, useMemo, useState } from "react"
+
+const STORAGE_KEY = "story:descriptionAiModel"
+
+export interface StoryAiModelGroup {
+  label: string
+  items: { value: string; label: string }[]
+}
+
+/**
+ * 把会话模型（如 `openai/gpt-4o-mini`，可能带 provider 前缀）规范化，
+ * 与列表中的模型 id（如 `gpt-4o-mini`，不带前缀）做匹配。
+ * 精确匹配优先，否则回退到去掉前缀后的尾部匹配。
+ */
+function resolveModelValue(preferred: string | undefined, values: string[]): string | undefined {
+  if (!preferred) return undefined
+  const preferredTail = preferred.split("/").pop()
+  return (
+    values.find((v) => v === preferred) ??
+    values.find((v) => v === preferredTail) ??
+    values.find((v) => v.split("/").pop() === preferredTail)
+  )
+}
+
+/**
+ * 模型选择 state，从已启用模型列表中选择。
+ * 默认使用用户对话模型（session.aiModel），
+ * 之后使用上次使用的模型（持久化到 localStorage）。
+ */
+export function useStoryAiModel(): {
+  model: string
+  setModel: (model: string) => void
+  groups: StoryAiModelGroup[]
+  isLoading: boolean
+} {
+  const { data: session } = useSession()
+  const defaultModel = session?.user?.aiModel ?? "openai/gpt-4o-mini"
+  const [model, setModel] = useState<string>(
+    () =>
+      (typeof window !== "undefined" && localStorage.getItem(STORAGE_KEY)) ||
+      "",
+  )
+
+  // Fetch enabled models from server
+  const [rawModels, setRawModels] = useState<
+    Array<{
+      providerId: string
+      model: string
+      providerDisplayName: string
+      modelDisplayName: string
+    }>
+  >([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setIsLoading(true)
+    listEnabledModelsFn().then(
+      (result) => {
+        if (cancelled) return
+        setRawModels(result as any)
+        setIsLoading(false)
+      },
+      () => {
+        if (cancelled) return
+        setIsLoading(false)
+      },
+    )
+    return () => { cancelled = true }
+  }, [])
+
+  // Group by provider
+  const groups: StoryAiModelGroup[] = useMemo(() => {
+    if (rawModels.length === 0) return []
+    const map = new Map<string, StoryAiModelGroup>()
+    for (const m of rawModels) {
+      let group = map.get(m.providerDisplayName)
+      if (!group) {
+        group = { label: m.providerDisplayName, items: [] }
+        map.set(m.providerDisplayName, group)
+      }
+      group.items.push({ value: m.model, label: m.modelDisplayName || m.model })
+    }
+    return Array.from(map.values())
+  }, [rawModels])
+
+  // Sync localStorage
+  useEffect(() => {
+    if (typeof window !== "undefined" && model) {
+      localStorage.setItem(STORAGE_KEY, model)
+    }
+  }, [model])
+
+  // 模型列表就绪后校正当前选中值，保证选中项在下拉列表内可匹配（正确高亮/勾选）：
+  // 1. 优先恢复上次使用（localStorage，且仍存在于启用列表）
+  // 2. 否则从 session.aiModel 规范化匹配
+  // 3. 再否则取列表第一个
+  const modelValues = useMemo(() => rawModels.map((m) => m.model), [rawModels])
+  useEffect(() => {
+    if (!session || modelValues.length === 0) return
+    const stored = typeof window !== "undefined" ? localStorage.getItem(STORAGE_KEY) : null
+    if (stored && modelValues.includes(stored)) {
+      if (model !== stored) setModel(stored)
+      return
+    }
+    const chosen =
+      resolveModelValue(defaultModel, modelValues) ?? modelValues[0]
+    if (chosen && model !== chosen) setModel(chosen)
+  }, [session, model, modelValues, defaultModel])
+
+  return {
+    model,
+    setModel: useCallback((m: string) => setModel(m), []),
+    groups,
+    isLoading,
+  }
+}

package/src/components/story/ai/use-toolbar-overflow.ts

@@ -0,0 +1,187 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
+
+export interface OverflowResult {
+  visibleCount: number
+  hasOverflow: boolean
+}
+
+/**
+ * 贪心拟合：返回在 `available` 宽度内能放下的最大按钮数。
+ * 第一个按钮不前置 gap，后续按钮前置 gap。
+ */
+function fitCount(widths: number[], gap: number, available: number): number {
+  if (available <= 0) return 0
+  let acc = 0
+  for (let i = 0; i < widths.length; i++) {
+    const next = acc === 0 ? widths[i] : acc + gap + widths[i]
+    if (next > available) return i
+    acc = next
+  }
+  return widths.length
+}
+
+/**
+ * 无迟滞的纯函数溢出计算（向后兼容导出，供单元测试使用）。
+ *
+ * 注意：当前 hook 实现已改用带 hysteresis 的内联逻辑（见 useToolbarOverflow），
+ * 此函数仅保留为工具函数，不再被 hook 调用。
+ */
+export function computeOverflow(
+  widths: number[],
+  gap: number,
+  available: number,
+  moreButtonWidth: number,
+): OverflowResult {
+  const total = widths.length
+  if (total === 0) return { visibleCount: 0, hasOverflow: false }
+
+  // 第一轮：不计「更多」按钮，看是否全部放得下
+  if (fitCount(widths, gap, available) >= total) {
+    return { visibleCount: total, hasOverflow: false }
+  }
+  // 第二轮：为「更多」按钮预留空间后再拟合
+  return { visibleCount: fitCount(widths, gap, available - moreButtonWidth), hasOverflow: true }
+}
+
+export interface UseToolbarOverflowArgs {
+  /** 工具栏容器 ref —— 其 clientWidth 即按钮可用宽度（容器需 flex-grow 撑满，宽度由外部决定） */
+  containerRef: React.RefObject<HTMLElement | null>
+  /** 隐藏测量层 ref —— 内含全部按钮的「天然宽度」副本 */
+  measureRef: React.RefObject<HTMLElement | null>
+  /** 容器内位于按钮前方、始终占位的元素（如左侧模型选择器），其宽度需从可用宽度中扣除 */
+  leadingRef?: React.RefObject<HTMLElement | null>
+  /**
+   * 容器内位于按钮后方、可被收起隐藏的元素（如右侧模型选择器）。
+   * 未收起时占位并参与可用宽度扣减；收起后该元素应 display:none 让出空间，
+   * hook 用缓存的宽度判断何时恢复，形成 hysteresis 避免震荡。
+   */
+  trailingRef?: React.RefObject<HTMLElement | null>
+  gap: number
+  moreButtonWidth: number
+}
+
+/**
+ * 工具栏溢出检测 hook（带 hysteresis 迟滞）。
+ *
+ * 设计要点：
+ * 1. 测量 + 计算放在 useLayoutEffect 中同步完成 —— 首帧即正确按钮数，无闪烁。
+ * 2. 只观察容器自身尺寸变化（ResizeObserver），rAF 合并防抖动。
+ * 3. 容器宽度必须由外部布局决定（flex-grow 撑满），收起按钮不影响容器宽度。
+ *
+ * **Hysteresis（解决 trailing 收起/展开震荡）**：
+ * - trailing 元素（如右侧模型选择器）在收起后由调用方隐藏（display:none），
+ *   hook 通过缓存的 trailing 宽度判断何时恢复。
+ * - 未收起态：trailing 可见占位，available = container - trailing。
+ * - 收起态：trailing hidden 让位，available = container - more（可见按钮获得更多空间）。
+ * - 恢复条件：fitCount(全部按钮, container - trailing缓存) >= total，
+ *   即空间足够重新容纳 trailing 时才展开。
+ */
+export function useToolbarOverflow(args: UseToolbarOverflowArgs): OverflowResult {
+  const { containerRef, measureRef, leadingRef, trailingRef, gap, moreButtonWidth } = args
+  const [result, setResult] = useState<OverflowResult>({
+    visibleCount: Number.MAX_SAFE_INTEGER,
+    hasOverflow: false,
+  })
+  const resultRef = useRef(result)
+  const trailingWidthCacheRef = useRef(0)
+
+  const apply = useCallback((next: OverflowResult) => {
+    resultRef.current = next
+    setResult((prev) =>
+      prev.visibleCount === next.visibleCount && prev.hasOverflow === next.hasOverflow
+        ? prev
+        : next,
+    )
+  }, [])
+
+  const measure = useCallback((): OverflowResult | null => {
+    const measureEl = measureRef.current
+    const container = containerRef.current
+    if (!measureEl || !container) return null
+    const widths = Array.from(measureEl.children).map((c) => (c as HTMLElement).offsetWidth)
+    const leading = leadingRef?.current
+    const leadingWidth = leading ? leading.offsetWidth + gap : 0
+
+    // trailing 宽度：可见时测量并缓存，隐藏时（display:none, offsetWidth=0）用缓存
+    const trailingEl = trailingRef?.current
+    let trailingWidth = 0
+    if (trailingEl) {
+      const w = trailingEl.offsetWidth
+      if (w > 0) {
+        trailingWidth = w + gap
+        trailingWidthCacheRef.current = trailingWidth
+      } else {
+        trailingWidth = trailingWidthCacheRef.current
+      }
+    }
+
+    const total = widths.length
+    if (total === 0) return { visibleCount: 0, hasOverflow: false }
+
+    const baseWidth = container.clientWidth - leadingWidth
+    const prev = resultRef.current
+
+    if (!prev.hasOverflow) {
+      // 未收起态：trailing 可见占位
+      const avail = baseWidth - trailingWidth
+      if (fitCount(widths, gap, avail) >= total) {
+        return { visibleCount: total, hasOverflow: false }
+      }
+      // 触发收起：trailing 将隐藏让位，可用宽度不扣 trailing
+      const collapseAvail = baseWidth - moreButtonWidth
+      return { visibleCount: fitCount(widths, gap, collapseAvail), hasOverflow: true }
+    }
+
+    // 收起态：判断是否恢复（需容纳全部按钮 + trailing）
+    const restoreAvail = baseWidth - trailingWidth
+    if (fitCount(widths, gap, restoreAvail) >= total) {
+      return { visibleCount: total, hasOverflow: false }
+    }
+    // 保持收起：trailing 不占位，空间全给可见按钮 + 更多
+    const collapseAvail = baseWidth - moreButtonWidth
+    return { visibleCount: fitCount(widths, gap, collapseAvail), hasOverflow: true }
+  }, [measureRef, containerRef, leadingRef, trailingRef, gap, moreButtonWidth])
+
+  useLayoutEffect(() => {
+    const next = measure()
+    if (next) apply(next)
+  })
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    let frame = 0
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const next = measure()
+        if (next) apply(next)
+      })
+    })
+    ro.observe(container)
+    return () => {
+      cancelAnimationFrame(frame)
+      ro.disconnect()
+    }
+  }, [containerRef, measure, apply])
+
+  return result
+}
+