diff --git a/apps/web/src/components/AnimatedHeight.tsx b/apps/web/src/components/AnimatedHeight.tsx index a098851233a72..6881b3b58b0f6 100644 --- a/apps/web/src/components/AnimatedHeight.tsx +++ b/apps/web/src/components/AnimatedHeight.tsx @@ -1,7 +1,7 @@ import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react"; import { observeResize } from "../lib/observeResize"; -const HEIGHT_TRANSITION_FALLBACK_MS = 250; +const HEIGHT_TRANSITION_FALLBACK_MS = 380; export function AnimatedHeight({ children, @@ -73,7 +73,14 @@ export function AnimatedHeight({ }; updateHeightAfterPaint(); - const stopObserving = observeResize(element, updateHeightAfterPaint); + // Width-only resizes, like a neighboring panel sliding, must not force layout reads every frame. + let observedHeight: number | undefined; + const stopObserving = observeResize(element, (entries) => { + const height = entries.at(-1)?.contentRect.height; + if (height === observedHeight) return; + observedHeight = height; + updateHeightAfterPaint(); + }); return () => { stopObserving(); cancelPendingFrames(); @@ -83,7 +90,7 @@ export function AnimatedHeight({ return (
{children} diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index 192505ea45408..a6f9a1eb8e569 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -3303,7 +3303,7 @@ export default function ChatView(props: ChatViewProps) { ref={threadPanelPopoverAnchorRef} data-chat-header className={cn( - "relative bg-background [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-out", + "relative bg-background [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-(--ease-spring)", isElectron ? cn( "drag-region flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 sm:px-5", @@ -3486,13 +3486,12 @@ export default function ChatView(props: ChatViewProps) { /> - {showScrollToBottom && !isThreadFindActive && ( - scrollToEnd(true)} - /> - )} + scrollToEnd(true)} + />
diff --git a/apps/web/src/components/Presence.tsx b/apps/web/src/components/Presence.tsx new file mode 100644 index 0000000000000..b570e27121c8f --- /dev/null +++ b/apps/web/src/components/Presence.tsx @@ -0,0 +1,46 @@ +import type { CSSProperties, ReactNode } from "react"; + +import { useMediaQuery } from "~/hooks/useMediaQuery"; +import { usePresence } from "~/hooks/usePresence"; +import { cn } from "~/lib/utils"; + +const EXIT_DURATION_MS = { pop: 140, collapse: 210 } as const; + +/** + * Keeps conditional content mounted long enough to animate out. The last children shown stay + * rendered while closing, so callers can pass `null` children once `show` turns false. + */ +export function Presence({ + show, + children, + className, + style, + variant = "pop", +}: { + readonly show: boolean; + readonly children: ReactNode; + readonly className?: string; + readonly style?: CSSProperties; + readonly variant?: "pop" | "collapse"; +}) { + const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)"); + const presence = usePresence( + show, + children, + !prefersReducedMotion, + null, + EXIT_DURATION_MS[variant], + ); + if (!presence.present) return null; + return ( +
+ {presence.value} +
+ ); +} diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx index 596bdee96ad1f..e4260c47b1242 100644 --- a/apps/web/src/components/RightPanelTabs.tsx +++ b/apps/web/src/components/RightPanelTabs.tsx @@ -83,6 +83,7 @@ import { } from "~/components/ui/menu"; import { useBrowserDefaults } from "~/browser/browserDefaults"; import { ScrollArea } from "~/components/ui/scroll-area"; +import { SlidingIndicator } from "~/components/SlidingIndicator"; import { PanelTabCloseButton } from "~/components/ui/panel-tab-close-button"; import { faviconUrlForOrigin } from "@t3tools/shared/favicon"; import { useTheme } from "~/hooks/useTheme"; @@ -1009,10 +1010,10 @@ function RightPanelTab( ref={setNodeRef} style={{ transform: CSS.Translate.toString(transform), transition }} className={cn( - "cursor-pointer group/tab flex h-6 max-w-36 shrink-0 items-center gap-0.5 rounded-md pr-2 pl-1.5 text-xs", + "relative cursor-pointer group/tab flex h-6 max-w-36 shrink-0 items-center gap-0.5 rounded-md pr-2 pl-1.5 text-xs", props.ownsDesktopTitleBar && "[-webkit-app-region:no-drag]", props.active - ? "bg-accent text-foreground" + ? "text-foreground" : "text-muted-foreground hover:bg-accent/60 hover:text-foreground", isDragging && "relative z-10", )} @@ -1349,7 +1350,11 @@ export function RightPanelTabs(props: RightPanelTabsProps) { className="min-w-0 flex-1" data-right-panel-tab-list > -
+
+ {props.surfaces.map((surface) => { const previewTabId = previewTabIdOf(surface, props.previewSessions); diff --git a/apps/web/src/components/Sidebar.motion.ts b/apps/web/src/components/Sidebar.motion.ts index fbc0d8434a82b..defd8278cd55d 100644 --- a/apps/web/src/components/Sidebar.motion.ts +++ b/apps/web/src/components/Sidebar.motion.ts @@ -1,4 +1,5 @@ -const motionTiming = { duration: 150, easing: "ease-out" }; +const motionTiming = { duration: 260, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }; +const ABOVE_NEIGHBORS = { zIndex: 2, backgroundColor: "var(--sidebar)" }; const rowTravel = (height: number) => Math.min(height, 40); // Fades clone removed rows and animate clones and entries; intervening layout reads force reflows. const MAX_FADED_ROWS_PER_UPDATE = 40; @@ -103,8 +104,13 @@ export function createSidebarListMotion(parent: HTMLUListElement) { const entry = entering.get(node); if (entry) entry.travel = 0; if (offset === 0 && !entry) return; + // A row jumping past its neighbors rides above them on a solid fill, so labels never overlap. + const lifted = Math.abs(offset) > node.offsetHeight ? ABOVE_NEIGHBORS : null; const animation = node.animate( - [{ transform: `translateY(${offset}px)` }, { transform: "translateY(0px)" }], + [ + { transform: `translateY(${offset}px)`, ...lifted }, + { transform: "translateY(0px)", ...lifted }, + ], motionTiming, ); running.set(node, { animation, offset }); diff --git a/apps/web/src/components/SlidingIndicator.tsx b/apps/web/src/components/SlidingIndicator.tsx new file mode 100644 index 0000000000000..dc19904ba66c9 --- /dev/null +++ b/apps/web/src/components/SlidingIndicator.tsx @@ -0,0 +1,74 @@ +import { useLayoutEffect, useRef } from "react"; + +import { observeResize } from "~/lib/observeResize"; +import { cn } from "~/lib/utils"; + +/** + * A highlight that glides to whichever descendant of its parent matches `selector`, so changing + * selection reads as one thing moving instead of two things blinking. The parent must be + * positioned. Nothing moves on first paint, and it hides when nothing matches. + */ +export function SlidingIndicator({ + selector, + className, +}: { + readonly selector: string; + readonly className?: string; +}) { + const ref = useRef(null); + + // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- follows DOM selection attributes that React state in sibling subtrees owns, writing styles before paint + useLayoutEffect(() => { + const indicator = ref.current; + const parent = indicator?.parentElement; + if (!indicator || !parent) return; + let settleFrame = 0; + + const update = () => { + const target = parent.querySelector(selector); + if (!target) { + indicator.style.opacity = "0"; + delete indicator.dataset.ready; + return; + } + const parentRect = parent.getBoundingClientRect(); + const rect = target.getBoundingClientRect(); + const x = rect.left - parentRect.left - parent.clientLeft + parent.scrollLeft; + const y = rect.top - parentRect.top - parent.clientTop + parent.scrollTop; + indicator.style.width = `${rect.width}px`; + indicator.style.height = `${rect.height}px`; + indicator.style.translate = `${x}px ${y}px`; + indicator.style.opacity = "1"; + if (indicator.dataset.ready === undefined) { + cancelAnimationFrame(settleFrame); + settleFrame = requestAnimationFrame(() => { + indicator.dataset.ready = ""; + }); + } + }; + + update(); + const mutations = new MutationObserver(update); + mutations.observe(parent, { + subtree: true, + childList: true, + attributes: true, + attributeFilter: ["data-pressed", "aria-current", "aria-selected", "data-active-tab"], + }); + const stopObserving = observeResize(parent, update); + return () => { + cancelAnimationFrame(settleFrame); + mutations.disconnect(); + stopObserving(); + }; + }, [selector]); + + return ( + + ); +} diff --git a/apps/web/src/components/WorkspacePageHeader.tsx b/apps/web/src/components/WorkspacePageHeader.tsx index 9c4f455ffe129..fac71ea47ca65 100644 --- a/apps/web/src/components/WorkspacePageHeader.tsx +++ b/apps/web/src/components/WorkspacePageHeader.tsx @@ -15,7 +15,7 @@ export function WorkspacePageHeader({ return (
- setDismissedProviderStatusBannerKey(providerStatusBannerKey)} - onOpenProviderSetup={onOpenProviderSetup} - /> - { - setThreadError(threadId, null); - dismissThreadErrorBannerForSession(threadErrorBannerKey); - setThreadErrorBannerDismissTick((tick) => tick + 1); - }} - /> + + setDismissedProviderStatusBannerKey(providerStatusBannerKey)} + onOpenProviderSetup={onOpenProviderSetup} + /> + + + { + setThreadError(threadId, null); + dismissThreadErrorBannerForSession(threadErrorBannerKey); + setThreadErrorBannerDismissTick((tick) => tick + 1); + }} + /> +
); } diff --git a/apps/web/src/components/chat/ChatCanvas.tsx b/apps/web/src/components/chat/ChatCanvas.tsx index e05d3befcc138..5363f9243468b 100644 --- a/apps/web/src/components/chat/ChatCanvas.tsx +++ b/apps/web/src/components/chat/ChatCanvas.tsx @@ -5,6 +5,9 @@ import type { ChatCanvasPreview } from "./chatCanvasLayout"; import { resolveChatCanvasModel, type ChatCanvasStore } from "./canvasStore"; import { selectThreadPanelOpen, useRightPanelStore } from "../../rightPanelStore"; import { observeResize } from "../../lib/observeResize"; +import { usePanelAnimationSettings } from "../../panelAnimations"; +import { useStableCallback } from "../../hooks/useStableCallback"; +import { useChatLaneFreeze } from "./useChatLaneFreeze"; import type { ScopedThreadRef } from "@t3tools/contracts"; export function ChatCanvas({ @@ -27,6 +30,11 @@ export function ChatCanvas({ const elementRef = useRef(null); const widthProbeRef = useRef(null); const [timelineElement, registerTimeline] = useState(null); + const measureRef = useRef<((heldWidth?: number) => void) | null>(null); + useChatLaneFreeze( + elementRef, + useStableCallback((heldWidth?: number) => measureRef.current?.(heldWidth)), + ); const measurements = useStore(store, (state) => state.measurements); const detailsCardMeasurement = useStore(store, (state) => state.detailsCardMeasurement); // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- observes canvas, find bar and timeline resizes and writes the measurements to the canvas store @@ -36,7 +44,9 @@ export function ChatCanvas({ if (!element || !probe) return; const findBar = detailsCardTopInset > 0 ? element.querySelector("[data-thread-find-bar]") : null; - const measure = () => { + const measure = (heldWidth?: number) => { + // While the lane is held, lay out once for the width it will land on, then stop following. + if (heldWidth === undefined && element.dataset.laneHeld !== undefined) return; const canvasBounds = element.getBoundingClientRect(); const findBarBounds = findBar?.getBoundingClientRect(); const styles = getComputedStyle(probe); @@ -49,7 +59,7 @@ export function ChatCanvas({ bottom: findBarBounds ? findBarBounds.bottom - canvasBounds.top : 0, } : null, - width: element.clientWidth, + width: heldWidth ?? element.clientWidth, height: element.clientHeight, padding: Number.parseFloat(styles.paddingLeft), maxChatWidth: Number.parseFloat(styles.width), @@ -61,17 +71,19 @@ export function ChatCanvas({ }); }; measure(); + measureRef.current = measure; const observed: Element[] = [element, probe]; if (findBar) observed.push(findBar); if (composerOverlayElement) observed.push(composerOverlayElement); if (timelineElement) observed.push(timelineElement); - return observeResize(observed, measure); + return observeResize(observed, () => measure()); }, [store, composerOverlayElement, timelineElement, detailsCardTopInset]); const detailsCardInlineOpen = useRightPanelStore((state) => threadRef === null ? false : selectThreadPanelOpen(state.threadPanelVisibilityByThreadKey, threadRef, "inline"), ); + const { active: panelAnimationsActive, durationMs } = usePanelAnimationSettings(); const model = resolveChatCanvasModel({ measurements, detailsCardMeasurement, @@ -91,6 +103,26 @@ export function ChatCanvas({ detailsCardPlacement: model.detailsCardPlacement, }; const { layout } = context; + const laneCenterOffset = (layout.chat.insetStart - layout.chat.insetEnd) / 2; + const laneMotion = useRef({ open: detailsCardInlineOpen, offset: laneCenterOffset }); + // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- plays a compositor-only glide from the old lane position; the layout itself changes once, so long threads pay no per-frame reflow + useLayoutEffect(() => { + const previous = laneMotion.current; + laneMotion.current = { open: detailsCardInlineOpen, offset: laneCenterOffset }; + if (previous.open === detailsCardInlineOpen || !panelAnimationsActive) return; + const canvas = elementRef.current; + const distance = previous.offset - laneCenterOffset; + if (!canvas?.animate || distance === 0) return; + const direction = getComputedStyle(canvas).direction === "rtl" ? -1 : 1; + for (const target of canvas.querySelectorAll( + "[data-assistant-citation-viewport], [data-chat-composer-overlay]", + )) { + target.animate([{ translate: `${distance * direction}px 0` }, { translate: "0 0" }], { + duration: durationMs, + easing: "cubic-bezier(0.22, 1, 0.36, 1)", + }); + } + }, [detailsCardInlineOpen, durationMs, laneCenterOffset, panelAnimationsActive]); return (
{showComposerTopDrawer ? ( - + {pendingUserInputs.length > 0 ? ( ) : null} - + + + {showMobilePendingAnswerActions ? (
) { + const [previous, setPrevious] = useState(items); + const [leaving, setLeaving] = useState>([]); + if (previous !== items) { + setPrevious(items); + const ids = new Set(items.map((item) => item.id)); + const removed = previous.flatMap((item, index) => (ids.has(item.id) ? [] : [{ item, index }])); + const removedIds = new Set(removed.map((notice) => notice.item.id)); + const stillLeaving = leaving.filter( + (notice) => !ids.has(notice.item.id) && !removedIds.has(notice.item.id), + ); + if (removed.length > 0 || stillLeaving.length !== leaving.length) { + setLeaving([...stillLeaving, ...removed]); + } + } + // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- removes a notice from the DOM once its CSS exit has played; the timer is cleared if more notices leave + useEffect(() => { + if (leaving.length === 0) return; + const timeout = window.setTimeout(() => setLeaving([]), NOTICE_EXIT_MS); + return () => window.clearTimeout(timeout); + }, [leaving]); + return leaving; +} /** * Notices about sending from this composer, each its own attached card. Consecutive cards join @@ -42,18 +73,36 @@ export function ComposerBannerStack({ readonly items: ReadonlyArray; readonly detached?: boolean; }) { + const leaving = useLeavingNotices(items); + const leavingIds = new Set(leaving.map((notice) => notice.item.id)); + const merged = [...items]; + for (const notice of [...leaving].sort((a, b) => a.index - b.index)) { + merged.splice(Math.min(notice.index, merged.length), 0, notice.item); + } const ordered = GROUPS.flatMap((group) => - items.filter((item) => (item.group ?? "attention") === group), + merged.filter((item) => (item.group ?? "attention") === group), ); if (detached) { return ordered.map((item) => ( -
+
)); } return ordered.map((item) => ( - + )); diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx index a4a8993a7036e..cdf3c00b6e4c2 100644 --- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx +++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx @@ -131,7 +131,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx index cea2daa111207..e9e44a2bf5f9d 100644 --- a/apps/web/src/components/chat/MessagesTimeline.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.tsx @@ -42,6 +42,7 @@ import { useEffectEvent, useRef, useState, + type CSSProperties, type ReactNode, type SyntheticEvent, } from "react"; @@ -93,6 +94,7 @@ import { TooltipScrollDismissArea } from "../ui/tooltip"; import { WorktreeSetupCard } from "./WorktreeSetupCard"; import { useOpenPrLink } from "~/lib/openPullRequestLink"; import { useMediaQuery } from "~/hooks/useMediaQuery"; +import { useEnterMotion } from "~/hooks/useEnterMotion"; import { cn } from "~/lib/utils"; import { type TimestampFormat } from "@t3tools/contracts/settings"; import { type HandoffTimelineRun } from "./V2LifecycleRow"; @@ -134,7 +136,12 @@ import { } from "./timelineViewport"; import { useThreadFindPositionReader } from "./useThreadFindPositionReader"; import { ThreadActivityAnnouncer } from "./ThreadActivityAnnouncer"; -import { useStableHandoffRuns, useIncrementalTimelineRows, useStableRows } from "./useTimelineRows"; +import { + useStableHandoffRuns, + useIncrementalTimelineRows, + useStableRows, + useTimelineRowArrivals, +} from "./useTimelineRows"; function timelineListStateFor(identity: string): { readonly identity: string; @@ -681,6 +688,7 @@ const ConversationTimeline = memo(function ConversationTimeline({ worktreeSetup, }); const rows = useStableRows(rawRows, listIdentityKey); + const rowArrivals = useTimelineRowArrivals(rows, listIdentityKey); const matchedApprovalRequestIds = new Set(); for (const row of pendingApprovalRequestIds.size > 0 ? rows : []) { const entries = @@ -754,6 +762,7 @@ const ConversationTimeline = memo(function ConversationTimeline({ const [timelineViewportElement, setTimelineViewportElement] = useState( null, ); + useEnterMotion(timelineViewportElement, listIdentityKey, { distance: 4, durationMs: 220 }); const { target: readyCitationRequest, positioning: citationPositioning, @@ -1220,7 +1229,8 @@ const ConversationTimeline = memo(function ConversationTimeline({ const renderItem = ({ item }: { item: MessagesTimelineRow }) => (
onAudioPlaybackChange(item.id, event)} onPauseCapture={(event) => onAudioPlaybackChange(item.id, event)} onEndedCapture={(event) => onAudioPlaybackChange(item.id, event)} @@ -1278,7 +1288,7 @@ const ConversationTimeline = memo(function ConversationTimeline({ <> {activityAnnouncer}

Send a message to start the conversation.

@@ -1405,6 +1415,18 @@ function TimelineHistoryControl(props: MessagesTimelineHistoryControls) { ); } +function rowEnterStyle( + row: MessagesTimelineRow, + arrivalIndex: number | undefined, +): CSSProperties | undefined { + if (arrivalIndex === undefined) return undefined; + const isUserMessage = row.kind === "message" && row.message.role === "user"; + return { + "--enter-distance": isUserMessage ? "18px" : "6px", + "--enter-delay": `${Math.min(arrivalIndex, 8) * 22}ms`, + } as CSSProperties; +} + function isMessageRow(row: MessagesTimelineRow) { return row.kind === "message" && row.message.role !== "system"; } diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx index 69da770f1f84b..687a711df3b13 100644 --- a/apps/web/src/components/chat/ModelListRow.tsx +++ b/apps/web/src/components/chat/ModelListRow.tsx @@ -122,7 +122,7 @@ export const ModelListRow = memo(function ModelListRow(props: { "size-3.5 sm:size-3", props.isFavorite && "fill-current text-warning", (!props.isFavorite || props.favoriteStarOnHover) && - "opacity-0 group-hover:opacity-100 group-data-highlighted:opacity-100 in-focus-visible:opacity-100 pointer-coarse:opacity-100", + "opacity-0 transition-opacity group-hover:opacity-100 group-data-highlighted:opacity-100 in-focus-visible:opacity-100 pointer-coarse:opacity-100", )} /> diff --git a/apps/web/src/components/chat/PanelLayoutControls.tsx b/apps/web/src/components/chat/PanelLayoutControls.tsx index 56d93123d7d67..a555b6a2abd62 100644 --- a/apps/web/src/components/chat/PanelLayoutControls.tsx +++ b/apps/web/src/components/chat/PanelLayoutControls.tsx @@ -195,7 +195,7 @@ export function WorkspaceTitlebarControls(props: { "flex shrink-0", props.rightPanelOpen && props.animationsActive && - "motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out", + "motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-(--ease-spring)", props.rightPanelOpen ? "pointer-events-auto opacity-100" : "pointer-events-none absolute right-full mr-1 opacity-0", diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx index 4e8a47a39791a..95929596ccc77 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx @@ -18,6 +18,7 @@ import { } from "./threadDetailsCardLayout"; import { observeResize } from "../../lib/observeResize"; import { requestWorkspaceFocus } from "../../lib/workspaceFocus"; +import { usePanelAnimationSettings, usePanelPresence } from "../../panelAnimations"; export function ThreadDetailsCard({ threadRef, @@ -54,6 +55,15 @@ export function ThreadDetailsCard({ }); const contentHeights = measurements.key === measurementKey ? measurements.heights : { full: 0, compact: 0 }; + const { active: inlineAnimated, durationMs } = usePanelAnimationSettings(); + const inlinePresence = usePanelPresence( + placement !== null && inlineOpen, + placement, + inlineAnimated, + `${threadRef.environmentId}:${threadRef.threadId}`, + durationMs, + ); + const inlinePlacement = inlinePresence.value; const height = placement?.height ?? Math.max(0, (canvas?.container.height ?? 0) - 52); const density = resolveThreadDetailsCardDensity(height, contentHeights); const measureDetailsCard = canvas?.measureDetailsCard; @@ -119,7 +129,11 @@ export function ThreadDetailsCard({ mode === "popover" && "max-h-[min(calc(100dvh-6.5rem),calc(var(--available-height,100dvh)-1rem))]", )} - style={placement ? { maxHeight: height } : undefined} + style={ + placement || inlinePlacement + ? { maxHeight: placement ? height : inlinePlacement?.height } + : undefined + } onContextMenu={onContextMenu} data-thread-details-card > @@ -146,20 +160,26 @@ export function ThreadDetailsCard({ useRightPanelStore.getState().setThreadPanelOpen(threadRef, "popover", open); }} > - {placement && inlineOpen ? ( + {inlinePresence.present && inlinePlacement ? (