@flamingo-stack/openframe-frontend-core 0.0.172 → 0.0.173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.172",
+  "version": "0.0.173",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -137,8 +137,8 @@
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=8192' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'tsup && yalc push --changed'",
-    "yalc:push": "NODE_OPTIONS='--max-old-space-size=8192' npm run build && yalc push",
+    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'tsup && yalc push --changed'",
+    "yalc:push": "yalc push",
     "yalc:publish": "yalc publish",
     "generate:icons": "node scripts/generate-icons.mjs",
     "storybook": "storybook dev -p 6006",

package/src/components/chat/approval-batch-message.tsx

@@ -0,0 +1,237 @@
+"use client"
+
+import { forwardRef, useState } from "react"
+import { CheckCircle, XCircle } from "lucide-react"
+import { cn } from "../../utils/cn"
+import { Button } from "../ui/button"
+import { Tag } from "../ui/tag"
+import { ToolType } from "../platform"
+import { ToolIcon } from "../tool-icon"
+import { CheckCircleIcon, XmarkCircleIcon } from "../icons-v2-generated"
+import { PulseDots } from "../ui/pulse-dots"
+import { ExpandChevron } from "./expand-chevron"
+import { useCollapsible } from "./hooks/use-collapsible"
+import { ArgRow, ResultBlock } from "./tool-call-blocks"
+import type {
+  ApprovalBatchExecutionState,
+  ApprovalBatchSegment,
+  PendingToolCallData,
+} from "./types"
+import {
+  COMMAND_BODY_ARG_KEYS,
+  getCommandText,
+} from "./utils/tool-call-helpers"
+
+export interface ApprovalBatchMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: ApprovalBatchSegment["data"]
+  status?: ApprovalBatchSegment["status"]
+  onApprove?: (requestId?: string) => void | Promise<void>
+  onReject?: (requestId?: string) => void | Promise<void>
+}
+
+const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
+
+function getArgEntries(call: PendingToolCallData): Array<[string, unknown]> {
+  const args = call.toolCallArguments
+  if (!args || typeof args !== "object") return []
+  return Object.entries(args).filter(([k, v]) => !COMMAND_BODY_KEYS.has(k) && v !== null && v !== undefined && v !== "")
+}
+
+/**
+ * Status icon for one tool call inside an approved/done batch.
+ *  - pending batch     → null (chevron-only row, no status icon)
+ *  - approved, no exec → PulseDots (queued / waiting for backend)
+ *  - executing         → PulseDots
+ *  - done + success    → green check
+ *  - done + failure    → red cross
+ */
+function ExecutionStatusIcon({
+  batchStatus,
+  execution,
+}: {
+  batchStatus: ApprovalBatchSegment["status"]
+  execution: ApprovalBatchExecutionState | undefined
+}) {
+  if (batchStatus !== "approved") return null
+  if (!execution || execution.status === "executing") return <PulseDots size="sm" />
+  if (execution.success === false) return <XmarkCircleIcon className="w-4 h-4 text-ods-error" />
+  return <CheckCircleIcon className="w-4 h-4 text-ods-success" />
+}
+
+interface ToolCallRowProps {
+  call: PendingToolCallData
+  expanded: boolean
+  onToggle: () => void
+  batchStatus: ApprovalBatchSegment["status"]
+  execution: ApprovalBatchExecutionState | undefined
+}
+
+function ToolCallRow({ call, expanded, onToggle, batchStatus, execution }: ToolCallRowProps) {
+  const command = getCommandText(call)
+  const args = getArgEntries(call)
+  const toolType = (call.toolType as ToolType) || ("OPENFRAME" as ToolType)
+  const { innerRef, containerStyle } = useCollapsible({ expanded })
+  const result = execution?.status === "done" ? execution.result : undefined
+  const hasExpandableBody = args.length > 0 || (typeof result === "string" && result.length > 0)
+
+  return (
+    <div className="bg-ods-card border-b border-ods-border last:border-b-0 flex flex-col items-start w-full">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex gap-2 items-start w-full p-3 cursor-pointer text-left"
+      >
+        <div className="flex items-center justify-center shrink-0 w-5 h-5">
+          <ToolIcon toolType={toolType} size={16} />
+        </div>
+        <div
+          className={cn(
+            "flex-1 min-w-0 font-medium text-sm leading-5",
+            expanded
+              ? "text-ods-text-primary whitespace-pre-wrap break-all"
+              : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
+          )}
+        >
+          {command}
+        </div>
+        <div className="flex items-center justify-center shrink-0 w-5 h-5">
+          <ExecutionStatusIcon batchStatus={batchStatus} execution={execution} />
+        </div>
+        <div className="flex items-center justify-center shrink-0 w-5 h-5">
+          <ExpandChevron expanded={expanded} />
+        </div>
+      </button>
+
+      <div className="w-full" style={containerStyle}>
+        <div ref={innerRef}>
+          {hasExpandableBody && (
+            <div className="flex flex-col gap-2 items-start w-full text-sm font-medium leading-5 p-3 bg-ods-card">
+              {args.map(([key, value]) => (
+                <ArgRow key={key} argKey={key} value={value} />
+              ))}
+              {result && <ResultBlock result={result} />}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProps>(
+  ({ className, data, onApprove, onReject, status = "pending", ...props }, ref) => {
+    const [expandedId, setExpandedId] = useState<string | null>(null)
+    const [isProcessing, setIsProcessing] = useState(false)
+
+    const explanations = data.toolCalls
+      .map((c) => c.toolExplanation?.trim())
+      .filter((s): s is string => !!s)
+
+    const handleApprove = async () => {
+      setIsProcessing(true)
+      try {
+        await onApprove?.(data.approvalRequestId)
+      } finally {
+        setIsProcessing(false)
+      }
+    }
+
+    const handleReject = async () => {
+      setIsProcessing(true)
+      try {
+        await onReject?.(data.approvalRequestId)
+      } finally {
+        setIsProcessing(false)
+      }
+    }
+
+    const showFooterBlock = explanations.length > 0 || status !== undefined
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-ods-card border border-ods-border rounded-md overflow-hidden flex flex-col mb-2",
+          className,
+        )}
+        {...props}
+      >
+        {data.toolCalls.map((call) => (
+          <ToolCallRow
+            key={call.toolExecutionRequestId}
+            call={call}
+            expanded={expandedId === call.toolExecutionRequestId}
+            onToggle={() =>
+              setExpandedId((prev) =>
+                prev === call.toolExecutionRequestId ? null : call.toolExecutionRequestId,
+              )
+            }
+            batchStatus={status}
+            execution={data.executions?.[call.toolExecutionRequestId]}
+          />
+        ))}
+
+        {showFooterBlock && (
+          <div className="bg-ods-card flex flex-col gap-2 items-start justify-center p-3">
+            {explanations.length > 0 && (
+              <ul className="list-disc pl-5 text-sm font-medium text-ods-text-primary leading-5 w-full">
+                {explanations.map((expl, i) => (
+                  <li key={i}>{expl}</li>
+                ))}
+              </ul>
+            )}
+
+            {status === "pending" ? (
+              <div className="flex gap-2 items-center">
+                <Button
+                  size="small-legacy"
+                  variant="accent"
+                  onClick={handleApprove}
+                  disabled={isProcessing}
+                  className={cn(
+                    "bg-ods-accent hover:bg-ods-accent/90",
+                    "font-mono font-medium md:!text-sm text-ods-bg uppercase tracking-[-0.28px]",
+                    "px-2 py-1 h-auto",
+                  )}
+                >
+                  Approve
+                </Button>
+                <Button
+                  size="small-legacy"
+                  variant="outline"
+                  onClick={handleReject}
+                  disabled={isProcessing}
+                  className={cn(
+                    "bg-ods-card border-ods-border",
+                    "font-mono font-medium md:!text-sm text-ods-text-primary uppercase tracking-[-0.28px]",
+                    "hover:bg-ods-bg px-2 py-1 h-auto",
+                  )}
+                >
+                  Reject
+                </Button>
+              </div>
+            ) : (
+              <div className="flex">
+                <Tag
+                  label={status === "approved" ? "Approved" : "Rejected"}
+                  variant={status === "approved" ? "success" : "error"}
+                  icon={
+                    status === "approved" ? (
+                      <CheckCircle className="w-4 h-4" />
+                    ) : (
+                      <XCircle className="w-4 h-4" />
+                    )
+                  }
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+ApprovalBatchMessage.displayName = "ApprovalBatchMessage"
+
+export { ApprovalBatchMessage }

package/src/components/chat/chat-input.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useImperativeHandle, forwardRef, useCallback, useEffect, useMemo, type KeyboardEvent, type ChangeEvent } from "react"
 import { cn } from "../../utils/cn"
-import { Send01Icon, StopIcon } from "../icons-v2-generated"
+import { Send01Icon, StopCircleIcon } from "../icons-v2-generated"
 import { Textarea } from "../ui/textarea"
 import { ChatTypingIndicator } from "./chat-typing-indicator"
 import { SlashCommandSuggestions } from "./slash-command-suggestions"
@@ -71,27 +71,18 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       (): ChatInputRef => ({
         focus: () => focusTextarea(),
         blur: () => textareaRef.current?.blur(),
-        clear: () => {
-          setValue('')
-          if (textareaRef.current) {
-            textareaRef.current.style.height = 'auto'
-          }
-        },
+        clear: () => setValue(''),
         setValue: (next: string) => {
           setValue(next)
-          // Defer until React commits the new value so scrollHeight reflects
-          // the updated DOM. requestAnimationFrame is the standard escape
-          // hatch. After focus, set selection to the END of the new value —
+          // After focus, set selection to the END of the new value —
           // programmatic `.focus()` on a textarea defaults to caret-at-0
           // (browser-standard), which would land the cursor at the start of
           // the prefilled `/cmd ` and force users to arrow-right past every
-          // character before typing.
+          // character before typing. Auto-grow is handled by the Textarea's
+          // native `field-sizing: content` — no manual height mgmt needed.
           requestAnimationFrame(() => {
             const el = textareaRef.current
-            if (!el) return
-            el.style.height = 'auto'
-            el.style.height = `${el.scrollHeight}px`
-            if (disabled || el.disabled) return
+            if (!el || disabled || el.disabled) return
             el.focus()
             el.setSelectionRange(next.length, next.length)
           })
@@ -105,12 +96,9 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
           const clamped = Math.max(0, Math.min(cursorOffset, next.length))
           requestAnimationFrame(() => {
             const el = textareaRef.current
-            if (el) {
-              el.style.height = 'auto'
-              el.style.height = `${el.scrollHeight}px`
-              el.focus()
-              el.setSelectionRange(clamped, clamped)
-            }
+            if (!el) return
+            el.focus()
+            el.setSelectionRange(clamped, clamped)
           })
         },
         submit: (next: string) => {
@@ -123,9 +111,6 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
           if (!trimmed) return
           onSend(trimmed)
           setValue('')
-          if (textareaRef.current) {
-            textareaRef.current.style.height = 'auto'
-          }
           shouldRefocusRef.current = true
           focusTextarea()
         },
@@ -143,11 +128,6 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       if (message && !sending && !disabled && onSend) {
         onSend(message)
         setValue('')
-
-        if (textareaRef.current) {
-          textareaRef.current.style.height = 'auto'
-        }
-
         shouldRefocusRef.current = true
         focusTextarea()
       }
@@ -263,11 +243,6 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
 
     const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value)
-
-      if (textareaRef.current) {
-        textareaRef.current.style.height = 'auto'
-        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
-      }
     }, [])
 
     const [isStopping, setIsStopping] = useState(false)
@@ -307,7 +282,6 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       }
     }, [onStop, isStopping])
 
-    // Show awaiting response state
     if (awaitingResponse) {
       return (
         <div
@@ -315,34 +289,28 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
             "mx-auto w-full max-w-3xl items-end gap-6",
             reserveAvatarOffset ? "grid grid-cols-[32px_1fr]" : "grid grid-cols-[1fr]",
             "flex-shrink-0",
-            className
+            className,
           )}
         >
           {reserveAvatarOffset && <div className="invisible h-8 w-8" aria-hidden />}
-          <div
-            className={cn(
-              "relative flex items-center justify-center gap-2",
-              "rounded-md bg-ods-card border border-ods-border",
-              "px-3 py-3",
-              "transition-colors",
-            )}
-          >
+          <div className="relative flex items-center justify-center gap-2 rounded-md bg-ods-card border border-ods-border px-3 py-3 transition-colors">
             <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-primary" />
-            <p className="text-h4 text-ods-text-secondary">
-              Waiting for Technician Response
-            </p>
+            <p className="text-h4 text-ods-text-secondary">Waiting for Technician Response</p>
           </div>
         </div>
       )
     }
 
+    const isStopMode = sending && !!onStop
+    const sendDisabled = sending || disabled || !value.trim()
+
     return (
       <div
         className={cn(
           "mx-auto w-full max-w-3xl items-end gap-6",
           reserveAvatarOffset ? "grid grid-cols-[32px_1fr]" : "grid grid-cols-[1fr]",
           "flex-shrink-0",
-          className
+          className,
         )}
       >
         {reserveAvatarOffset && <div className="invisible h-8 w-8" aria-hidden />}
@@ -355,67 +323,27 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
             resolveSourceIcon={slashCommands?.resolveSourceIcon}
             onAction={slashCommands?.onAction}
           />
-          <div
-            className={cn(
-              "flex items-center gap-2",
-              "rounded-md bg-ods-card border border-ods-border",
-              "transition-colors",
-              "text-left text-ods-text-primary",
-            )}
-          >
-            <Textarea
-              ref={textareaRef}
-              value={value}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              placeholder={disabled ? "Connection lost. Waiting to reconnect..." : placeholder}
-              disabled={sending || disabled}
-              rows={1}
-              className={cn(
-                "flex-1 resize-none bg-transparent px-3 border-none focus-visible:ring-0",
-                "font-dm-sans text-[18px] font-medium leading-[24px]",
-                "placeholder:text-ods-text-secondary",
-                "overflow-hidden text-ellipsis",
-                "min-h-[20px] max-h-[160px] focus:outline-none",
-                "disabled:opacity-50 disabled:cursor-not-allowed"
-              )}
-              {...inputProps}
-            />
-
-            {sending && onStop ? (
-              <button
-                type="button"
-                onClick={handleStop}
-                disabled={isStopping}
-                className={cn(
-                  "rounded-md px-3 text-ods-text-secondary transition-all",
-                  isStopping ? "cursor-not-allowed opacity-40" : "hover:text-ods-accent active:scale-95",
-                  "focus:outline-none"
-                )}
-                aria-label="Stop generation"
-              >
-                <StopIcon size={24} />
-              </button>
-            ) : (
-              <button
-                type="button"
-                onClick={handleSubmit}
-                disabled={sending || disabled || !value.trim()}
-                className={cn(
-                  "rounded-md px-3 text-ods-text-secondary transition-all",
-                  sending || disabled || !value.trim() ? "cursor-not-allowed opacity-40" : "hover:text-ods-text-primary active:scale-95",
-                  "focus:outline-none"
-                )}
-                aria-label="Send message"
-              >
-                <Send01Icon size={24} />
-              </button>
-            )}
-          </div>
+          <Textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            placeholder={disabled ? "Connection lost. Waiting to reconnect..." : placeholder}
+            disabled={sending || disabled}
+            rows={1}
+            endIcon={isStopMode ? <StopCircleIcon size={20} /> : <Send01Icon size={20} />}
+            endIconAsButton
+            endIconButtonProps={{
+              onClick: isStopMode ? handleStop : handleSubmit,
+              disabled: isStopMode ? isStopping : sendDisabled,
+              'aria-label': isStopMode ? 'Stop generation' : 'Send message',
+            }}
+            {...inputProps}
+          />
         </div>
       </div>
     )
-  }
+  },
 )
 
 ChatInput.displayName = "ChatInput"

package/src/components/chat/chat-message-enhanced.tsx

@@ -6,6 +6,7 @@ import { SquareAvatar } from "../ui/square-avatar"
 import { ChatTypingIndicator } from "./chat-typing-indicator"
 import { ToolExecutionDisplay } from "./tool-execution-display"
 import { ApprovalRequestMessage } from "./approval-request-message"
+import { ApprovalBatchMessage } from "./approval-batch-message"
 import { ErrorMessageDisplay } from "./error-message-display"
 import { ContextCompactionDisplay } from "./context-compaction-display"
 import { ThinkingDisplay } from "./thinking-display"
@@ -203,6 +204,16 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                       onReject={segment.onReject}
                     />
                   )
+                } else if (segment.type === 'approval_batch') {
+                  return (
+                    <ApprovalBatchMessage
+                      key={index}
+                      data={segment.data}
+                      status={segment.status}
+                      onApprove={segment.onApprove}
+                      onReject={segment.onReject}
+                    />
+                  )
                 } else if (segment.type === 'error') {
                   return (
                     <ErrorMessageDisplay

package/src/components/chat/chat-message-list.tsx

@@ -4,7 +4,9 @@ import { useRef, useEffect, useLayoutEffect, useImperativeHandle, forwardRef } f
 import { useStickToBottom } from "use-stick-to-bottom"
 import { cn } from "../../utils/cn"
 import { ChatMessageEnhanced } from "./chat-message-enhanced"
-import { ChatMessageListSkeleton } from "./chat-message-skeleton"
+import { ChatMessageListLoader } from "./chat-message-loader"
+import { useDelayedFlag } from "./hooks/use-delayed-flag"
+import { PulseDots } from "../ui/pulse-dots"
 import type { ChatMessageListProps } from "./types"
 
 /*
@@ -209,14 +211,17 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     // MutableRefObject<HTMLElement> so we cast to the public type.
     useImperativeHandle(ref, () => scrollRef.current as HTMLDivElement, [scrollRef])
 
-    if (isLoading) {
+    // Gate the loader: only show after 200ms (fast loads never flicker),
+    // and once shown, hold for at least 400ms (no sub-frame flash if data
+    // arrives a moment later).
+    const showLoader = useDelayedFlag(isLoading, { delay: 200, minDuration: 400 })
+
+    if (showLoader) {
       return (
-        <ChatMessageListSkeleton
+        <ChatMessageListLoader
           className={className}
-          showAvatars={showAvatars}
+          assistantIcon={assistantIcon}
           assistantType={assistantType}
-          contentClassName={contentClassName}
-          messageCount={6}
         />
       )
     }
@@ -262,9 +267,20 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
             )}
             style={{ minHeight: '100%' }}
           >
+            {/* Infinite scroll sentinel + loader for older pages */}
             {hasNextPage && (
               <div ref={sentinelRef} className="h-px" />
             )}
+            {isFetchingNextPage && (
+              <div
+                className="flex justify-center py-3 animate-in fade-in duration-200"
+                role="status"
+                aria-live="polite"
+                aria-busy="true"
+              >
+                <PulseDots size="sm" />
+              </div>
+            )}
             <div className="flex-1" />
             {messages.map((message, index) => (
               <ChatMessageEnhanced

package/src/components/chat/chat-message-loader.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils/cn"
+import { MingoIcon } from "../icons/mingo-icon"
+
+interface ChatMessageListLoaderProps {
+  className?: string
+  /**
+   * Brand mark rendered at the centre of the loader. When omitted, a neutral
+   * MingoIcon is used (color derived from `assistantType`). Pass a custom
+   * element to match a different brand.
+   */
+  assistantIcon?: ReactNode
+  assistantType?: 'mingo' | 'fae'
+  /** Defaults to `"Loading conversation..."`. */
+  label?: string
+}
+
+/**
+ * Centered loading indicator for the chat message list. Replaces the
+ * multi-row skeleton with a single, brand-neutral pulsating mark — the same
+ * pattern Claude/ChatGPT use when fetching a conversation: don't fake the
+ * shape of the content, just signal "we're working on it" and let the real
+ * messages fade in once they arrive.
+ */
+export function ChatMessageListLoader({
+  className,
+  assistantIcon,
+  assistantType = 'fae',
+  label = 'Loading conversation...',
+}: ChatMessageListLoaderProps) {
+  const accentColor =
+    assistantType === 'mingo'
+      ? 'var(--ods-flamingo-cyan-base)'
+      : 'var(--ods-flamingo-pink-base)'
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      className={cn(
+        "relative flex-1 min-h-0 flex flex-col items-center justify-center gap-3 px-8",
+        "animate-in fade-in duration-300",
+        className,
+      )}
+    >
+      <div className="relative flex items-center justify-center w-10 h-10">
+        <span
+          className="absolute inset-0 rounded-full opacity-30 blur-md animate-pulse"
+          style={{ backgroundColor: accentColor }}
+          aria-hidden="true"
+        />
+        <div className="relative motion-safe:animate-pulse">
+          {assistantIcon ?? (
+            <MingoIcon className="w-8 h-8" eyesColor={accentColor} cornerColor={accentColor} />
+          )}
+        </div>
+      </div>
+      <span className="text-sm font-medium text-ods-text-secondary tracking-tight motion-safe:animate-pulse">
+        {label}
+      </span>
+    </div>
+  )
+}

package/src/components/chat/hooks/index.ts

@@ -2,5 +2,6 @@
 
 export * from './use-chunk-catchup'
 export * from './use-collapsible'
+export * from './use-delayed-flag'
 export * from './use-nats-dialog-subscription'
 export * from './use-realtime-chunk-processor'

package/src/components/chat/hooks/use-collapsible.ts

@@ -35,9 +35,18 @@ export function useCollapsible({
     return () => observer.disconnect()
   }, [element, collapsedHeight])
 
+  // When the caller asks for `"1lh"`, fall back to a measured pixel value
+  // (inner element's line-height) as soon as it's available. Setting
+  // `max-height: 1lh` via CSS resolves against the OUTER element's
+  // line-height, which can differ from the inner content's line-height and
+  // leak the top of the next block element past the clip line. The measured
+  // pixel value matches the inner content exactly.
+  const collapsedValue: number | string =
+    collapsedHeight === "1lh" ? collapsedPx || collapsedHeight : collapsedHeight
+
   const containerStyle: CSSProperties = {
     overflow: "hidden",
-    maxHeight: expanded ? contentHeight : collapsedHeight,
+    maxHeight: expanded ? contentHeight : collapsedValue,
     transition: disableTransition ? "none" : `max-height ${durationMs}ms ease-in-out`,
   }