@parhelia/core 0.2.12783 → 0.2.12786

package/dist/editor/page-editor-chrome/InlineFieldHistoryButton.js

@@ -0,0 +1,731 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { History, Loader2, Redo2, Undo2 } from "lucide-react";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { INLINE_FIELD_HISTORY_STEP_EVENT } from "../page-viewer/bridgeKeyboardShortcuts";
+import { formatDateOnly, normalizeMarkerId } from "../utils";
+import { collapseFieldHistoryEntries, FieldHistory, shortenUserName, } from "../FieldHistory";
+import { getFieldHistory } from "../services/editService";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
+import { measureBridgeFieldRect, rectEquals, } from "./overlay/geometry";
+import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
+export const INLINE_FIELD_HISTORY_BUTTON_GAP = 6;
+export const INLINE_FIELD_HISTORY_BUTTON_SIZE = 24;
+const QUICK_HISTORY_SESSION_TTL_MS = 15_000;
+// Stepping patches the canvas immediately and coalesces the save, mirroring the
+// trailing debounce typing already uses. Without it every step blocks the arrows
+// on a server round-trip.
+const QUICK_HISTORY_APPLY_DEBOUNCE_MS = 350;
+// Long enough for the trailing typing save (its own debounce plus the server
+// round-trip) to have appended the new history entry before we refetch.
+const QUICK_HISTORY_REFRESH_DELAY_MS = 2_500;
+/** Hovering the pill refetches at most this often; fresher data is kept. */
+const QUICK_HISTORY_HOVER_STALE_MS = 10_000;
+const QUICK_HISTORY_LABEL_MAX_WIDTH = 170;
+const INLINE_FIELD_HISTORY_LABEL_GAP = 6;
+/** The pill stays out of the way until the caret has been still this long. */
+export const INLINE_FIELD_HISTORY_IDLE_DELAY_MS = 1_000;
+/**
+ * Applying a step patches the canvas, which echoes back as a value change. That
+ * is our own doing, not the user typing, so it must not restart the idle wait
+ * and hide the pill mid-step. A refresh-driven re-render can trail the patch, so
+ * the window covers more than the echo itself.
+ */
+const INLINE_FIELD_HISTORY_SELF_CHANGE_WINDOW_MS = 2_500;
+const quickHistorySessions = new Map();
+/**
+ * The step position survives the pill unmounting (clicking away and back) for
+ * {@link QUICK_HISTORY_SESSION_TTL_MS}. Tests reset it so one case cannot leave
+ * the next one mid-history.
+ */
+export function clearInlineFieldHistoryQuickSessions() {
+    quickHistorySessions.clear();
+}
+function getQuickHistorySession(key) {
+    const session = quickHistorySessions.get(key);
+    if (!session)
+        return undefined;
+    if (session.expiresAt <= Date.now()) {
+        quickHistorySessions.delete(key);
+        return undefined;
+    }
+    return session;
+}
+/**
+ * Places the pill for a text field above the start of the field's block,
+ * left-aligned with it. The block's top-left corner does not move as values
+ * change, so stepping through history never relocates the buttons under the
+ * pointer (a caret- or line-relative anchor did exactly that). When the block
+ * is at the very top of the visible canvas the pill flips under the block —
+ * still outside the text. Media fields anchor to the same top-left corner but
+ * sit just inside their bounds: the picture chrome owns the space above the
+ * image, and the corner keeps the trigger in the same fixed spot as on text
+ * fields.
+ *
+ * The overlay is clipped by the panel hosting the canvas, so a pill that would
+ * reach past the visible width drops its label rather than disappearing.
+ */
+export function calculateInlineFieldHistoryButtonPosition(anchorRect, options) {
+    const { anchor = "block", controlsWidth = 0, labelWidth = 0, viewportLeft = 0, viewportTop = 0, viewportWidth = 0, viewportHeight = 0, margin = 4, } = options ?? {};
+    const gap = INLINE_FIELD_HISTORY_BUTTON_GAP;
+    const labelledWidth = controlsWidth +
+        (labelWidth > 0 ? labelWidth + INLINE_FIELD_HISTORY_LABEL_GAP : 0);
+    const rightEdge = viewportLeft + viewportWidth - margin;
+    let left = anchor === "corner" ? anchorRect.x + gap : anchorRect.x;
+    let showLabel = true;
+    if (viewportWidth > 0 && controlsWidth > 0) {
+        showLabel = left + labelledWidth <= rightEdge;
+        const usedWidth = showLabel ? labelledWidth : controlsWidth;
+        left = Math.max(viewportLeft + margin, Math.min(left, rightEdge - usedWidth));
+    }
+    if (anchor === "corner") {
+        return {
+            left,
+            top: anchorRect.y + gap,
+            showLabel,
+            placement: "corner",
+        };
+    }
+    const aboveTop = anchorRect.y - INLINE_FIELD_HISTORY_BUTTON_SIZE - gap;
+    const fitsAbove = viewportHeight <= 0 || aboveTop >= viewportTop + margin;
+    return {
+        left,
+        top: fitsAbove ? aboveTop : anchorRect.y + anchorRect.height + gap,
+        showLabel,
+        placement: fitsAbove ? "above" : "below",
+    };
+}
+export function formatInlineHistoryEntryLabel(entry, index, total, now = Date.now()) {
+    if (!entry)
+        return "";
+    const who = entry.isBaseline
+        ? "previous value"
+        : (entry.agentId ?? shortenUserName(entry.user));
+    const when = formatRelativeHistoryTime(entry.date, now);
+    const position = total > 1 ? `${index + 1}/${total}` : "";
+    return [when, who, position].filter(Boolean).join(" · ");
+}
+function formatRelativeHistoryTime(date, now) {
+    if (!date)
+        return "";
+    const timestamp = new Date(date).getTime();
+    if (!Number.isFinite(timestamp))
+        return "";
+    const elapsedMs = now - timestamp;
+    if (elapsedMs < 45_000)
+        return "just now";
+    if (elapsedMs >= 6 * 86_400_000)
+        return formatDateOnly(new Date(timestamp));
+    const units = [
+        ["day", 86_400_000],
+        ["hour", 3_600_000],
+        ["minute", 60_000],
+    ];
+    try {
+        const formatter = new Intl.RelativeTimeFormat(undefined, {
+            numeric: "auto",
+            style: "narrow",
+        });
+        for (const [unit, unitMs] of units) {
+            if (elapsedMs >= unitMs) {
+                return formatter.format(-Math.round(elapsedMs / unitMs), unit);
+            }
+        }
+    }
+    catch {
+        // Fall through to the absolute date below.
+    }
+    return formatDateOnly(new Date(timestamp));
+}
+function idsMatch(left, right) {
+    if (!left || !right)
+        return false;
+    return normalizeMarkerId(left) === normalizeMarkerId(right);
+}
+function toItemDescriptor(item, fallback) {
+    const id = item?.id ?? fallback?.id;
+    const language = item?.language ?? fallback?.language;
+    const version = item?.version ?? fallback?.version;
+    if (!id || !language || version == null)
+        return undefined;
+    return {
+        id,
+        language,
+        version,
+        ...(item?.database || fallback?.database
+            ? { database: item?.database ?? fallback?.database }
+            : {}),
+    };
+}
+export function resolveInlineFieldDescriptor(pageViewContext, focusedField) {
+    const activeField = pageViewContext.bridgeSelection?.activeField;
+    if (!activeField?.inlineEditing || !activeField.fieldId)
+        return undefined;
+    const structureFields = pageViewContext.bridgeStructure?.fields ?? [];
+    const structureField = structureFields.find((field) => !!activeField.elementKey && field.elementKey === activeField.elementKey) ??
+        structureFields.find((field) => idsMatch(field.fieldId, activeField.fieldId) &&
+            (!activeField.item?.id ||
+                idsMatch(field.item?.id, activeField.item.id)));
+    const focusedFieldMatches = focusedField &&
+        idsMatch(focusedField.fieldId, activeField.fieldId) &&
+        (!activeField.item?.id ||
+            idsMatch(focusedField.item.id, activeField.item.id))
+        ? focusedField
+        : undefined;
+    const pageItem = pageViewContext.page?.item ?? pageViewContext.pageItemDescriptor;
+    const item = toItemDescriptor(structureField?.item ?? activeField.item, focusedFieldMatches?.item ?? pageItem);
+    if (!item)
+        return undefined;
+    return {
+        fieldId: structureField?.fieldId ?? activeField.fieldId,
+        item,
+    };
+}
+function fieldDescriptorKey(field) {
+    if (!field)
+        return "";
+    return [
+        normalizeMarkerId(field.fieldId),
+        normalizeMarkerId(field.item.id),
+        field.item.language,
+        field.item.version,
+        field.item.database ?? "",
+    ].join(":");
+}
+function anchorMeasurementsEqual(previous, next) {
+    return (rectEquals(previous.field, next.field) &&
+        previous.viewportLeft === next.viewportLeft &&
+        previous.viewportTop === next.viewportTop &&
+        previous.viewportWidth === next.viewportWidth &&
+        previous.viewportHeight === next.viewportHeight);
+}
+export function InlineFieldHistoryButton({ pageViewContext, field, fieldRect: suppliedFieldRect, testId = "inline-field-history-button", onOpenChange, onPointerPresenceChange, }) {
+    const editContext = useEditContext();
+    const fieldsContext = useFieldsEditContext();
+    const [open, setOpen] = useState(false);
+    // The pill idles as a single subtle trigger; the step controls and label
+    // only unfold once the user asks for them. The choice is remembered per
+    // field while it stays active.
+    const [expanded, setExpanded] = useState(false);
+    // pageViewContext keeps a stable identity and is mutated in place, so a
+    // memoized ancestor can skip re-rendering this overlay when only the
+    // selection changed — the pill then never learns a field was focused and
+    // appears unreliably (or not at all). Watch the bridge's own messages and
+    // re-render directly; the freshly mutated context is read on that render.
+    const [, bumpBridgeRevision] = useReducer((n) => n + 1, 0);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleBridgeMessage = (event) => {
+            const name = event.data?.name;
+            if (name === "selectionChanged" ||
+                name === "structureUpdated" ||
+                name === "inlineEditEnded") {
+                bumpBridgeRevision();
+            }
+        };
+        window.addEventListener("message", handleBridgeMessage);
+        return () => window.removeEventListener("message", handleBridgeMessage);
+    }, []);
+    const [resolvedField, setResolvedField] = useState();
+    const [historyField, setHistoryField] = useState();
+    const [historyDescriptor, setHistoryDescriptor] = useState();
+    const [selectedHistoryEntry, setSelectedHistoryEntry] = useState();
+    const [quickHistory, setQuickHistory] = useState();
+    const [quickHistoryLoading, setQuickHistoryLoading] = useState(false);
+    const [quickHistoryIndex, setQuickHistoryIndex] = useState(0);
+    const [quickHistoryReloadToken, setQuickHistoryReloadToken] = useState(0);
+    const [controlsWidth, setControlsWidth] = useState(0);
+    const [labelWidth, setLabelWidth] = useState(0);
+    const pillRef = useRef(null);
+    const controlsRef = useRef(null);
+    const labelRef = useRef(null);
+    const inlineDescriptor = useMemo(() => resolveInlineFieldDescriptor(pageViewContext, fieldsContext?.focusedField), [
+        fieldsContext?.focusedField,
+        pageViewContext.bridgeSelection,
+        pageViewContext.bridgeStructure,
+        pageViewContext.page,
+        pageViewContext.pageItemDescriptor,
+    ]);
+    const activeDescriptor = field?.descriptor ?? inlineDescriptor;
+    const activeDescriptorKey = fieldDescriptorKey(activeDescriptor);
+    const activeFieldId = activeDescriptor?.fieldId;
+    const activeItemId = activeDescriptor?.item.id;
+    const activeItemLanguage = activeDescriptor?.item.language;
+    const activeItemVersion = activeDescriptor?.item.version;
+    const activeItemDatabase = activeDescriptor?.item.database;
+    const targetDescriptor = open ? historyDescriptor : activeDescriptor;
+    const targetDescriptorKey = fieldDescriptorKey(targetDescriptor);
+    // The edit context and the resolved descriptors are rebuilt on virtually every
+    // editor state change (each save bumps the items-repository revision, each
+    // caret move produces a fresh bridge selection). Depending on their identity
+    // re-ran the fetches below on every keystroke. Read them through refs and key
+    // the effects on the stable descriptor key instead.
+    const editContextRef = useRef(editContext);
+    editContextRef.current = editContext;
+    const targetDescriptorRef = useRef(targetDescriptor);
+    targetDescriptorRef.current = targetDescriptor;
+    const hasEditContext = !!editContext;
+    useEffect(() => {
+        if (!hasEditContext ||
+            !activeDescriptorKey ||
+            !activeFieldId ||
+            !activeItemId ||
+            !activeItemLanguage ||
+            activeItemVersion == null) {
+            setQuickHistory(undefined);
+            setQuickHistoryLoading(false);
+            setQuickHistoryIndex(0);
+            return;
+        }
+        let cancelled = false;
+        const existingSession = getQuickHistorySession(activeDescriptorKey);
+        if (existingSession) {
+            setQuickHistory({
+                key: activeDescriptorKey,
+                entries: existingSession.entries,
+                fetchedAt: Date.now(),
+            });
+            setQuickHistoryIndex(existingSession.index);
+            setQuickHistoryLoading(false);
+            return;
+        }
+        setQuickHistory((current) => current?.key === activeDescriptorKey ? current : undefined);
+        setQuickHistoryLoading(true);
+        void getFieldHistory({
+            id: activeItemId,
+            language: activeItemLanguage,
+            version: activeItemVersion,
+            ...(activeItemDatabase ? { database: activeItemDatabase } : {}),
+        }, activeFieldId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            setQuickHistory({
+                key: activeDescriptorKey,
+                entries: collapseFieldHistoryEntries(result.data ?? []),
+                fetchedAt: Date.now(),
+            });
+            setQuickHistoryLoading(false);
+            setQuickHistoryIndex(0);
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            setQuickHistory({
+                key: activeDescriptorKey,
+                entries: [],
+                fetchedAt: Date.now(),
+            });
+            setQuickHistoryLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        activeDescriptorKey,
+        activeFieldId,
+        activeItemDatabase,
+        activeItemId,
+        activeItemLanguage,
+        activeItemVersion,
+        hasEditContext,
+        quickHistoryReloadToken,
+    ]);
+    useEffect(() => {
+        const currentEditContext = editContextRef.current;
+        const descriptor = targetDescriptorRef.current;
+        if (!currentEditContext || !descriptor) {
+            if (!descriptor)
+                setResolvedField(undefined);
+            return;
+        }
+        if (field && fieldDescriptorKey(field.descriptor) === targetDescriptorKey) {
+            setResolvedField({ key: targetDescriptorKey, field });
+            return;
+        }
+        let cancelled = false;
+        setResolvedField((current) => current?.key === targetDescriptorKey ? current : undefined);
+        void currentEditContext.itemsRepository
+            .getField(descriptor)
+            .then((resolved) => {
+            if (!cancelled && resolved) {
+                setResolvedField({ key: targetDescriptorKey, field: resolved });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [hasEditContext, field, targetDescriptorKey]);
+    const activeField = resolvedField?.key === activeDescriptorKey
+        ? resolvedField.field
+        : undefined;
+    const displayedField = open && resolvedField?.key === targetDescriptorKey
+        ? resolvedField.field
+        : open
+            ? historyField
+            : activeField;
+    const measuredDescriptor = targetDescriptor;
+    const bridgeActiveField = pageViewContext.bridgeSelection?.activeField;
+    const bridgeElementKey = activeDescriptor &&
+        idsMatch(bridgeActiveField?.fieldId, activeDescriptor.fieldId) &&
+        (!bridgeActiveField?.item?.id ||
+            idsMatch(bridgeActiveField.item.id, activeDescriptor.item.id))
+        ? bridgeActiveField?.elementKey
+        : undefined;
+    const liveFieldValue = bridgeElementKey
+        ? bridgeActiveField?.value
+        : undefined;
+    // Typing keeps the pill away and schedules one history refresh for when the
+    // value settles (a changed value means a save will append a history entry).
+    // Only genuine value changes count as activity: caret moves and bridge
+    // re-publishes with the same value used to hide the pill for 2s around every
+    // click, and transient re-publishes without a matching field (canvas
+    // refreshes) made it flap. The timers live in refs so a dependency change
+    // that ends up a no-op cannot cancel a pending appearance.
+    const [idle, setIdle] = useState(false);
+    const idleRef = useRef(idle);
+    idleRef.current = idle;
+    const selfChangeUntilRef = useRef(0);
+    const idleTimerRef = useRef(undefined);
+    const reloadTimerRef = useRef(undefined);
+    const lastLiveValueRef = useRef(undefined);
+    useEffect(() => {
+        const restartIdleWait = () => {
+            if (idleTimerRef.current)
+                clearTimeout(idleTimerRef.current);
+            setIdle(false);
+            idleTimerRef.current = setTimeout(() => setIdle(true), INLINE_FIELD_HISTORY_IDLE_DELAY_MS);
+        };
+        if (!activeDescriptorKey) {
+            lastLiveValueRef.current = undefined;
+            if (idleTimerRef.current)
+                clearTimeout(idleTimerRef.current);
+            if (reloadTimerRef.current)
+                clearTimeout(reloadTimerRef.current);
+            setIdle(false);
+            return;
+        }
+        const last = lastLiveValueRef.current;
+        if (last?.key !== activeDescriptorKey) {
+            lastLiveValueRef.current = {
+                key: activeDescriptorKey,
+                ...(typeof liveFieldValue === "string"
+                    ? { value: liveFieldValue }
+                    : {}),
+            };
+            if (reloadTimerRef.current)
+                clearTimeout(reloadTimerRef.current);
+            restartIdleWait();
+            return;
+        }
+        // A vanished value (the bridge re-publishing without the field, e.g.
+        // during a canvas refresh) is not activity; keep the last known value so
+        // its return with the same text stays a no-op.
+        if (typeof liveFieldValue !== "string")
+            return;
+        const valueChanged = last.value !== liveFieldValue;
+        last.value = liveFieldValue;
+        if (!valueChanged)
+            return;
+        // An in-progress stepping session short-circuits the refetch, so this
+        // cannot move the index under the user.
+        if (reloadTimerRef.current)
+            clearTimeout(reloadTimerRef.current);
+        reloadTimerRef.current = setTimeout(() => {
+            reloadTimerRef.current = undefined;
+            setQuickHistoryReloadToken((token) => token + 1);
+        }, QUICK_HISTORY_REFRESH_DELAY_MS);
+        // Our own step echoing back from the canvas is not the user typing; it
+        // must not hide the pill mid-step.
+        if (Date.now() < selfChangeUntilRef.current && idleRef.current)
+            return;
+        restartIdleWait();
+    }, [activeDescriptorKey, liveFieldValue]);
+    useEffect(() => () => {
+        if (idleTimerRef.current)
+            clearTimeout(idleTimerRef.current);
+        if (reloadTimerRef.current)
+            clearTimeout(reloadTimerRef.current);
+    }, []);
+    useEffect(() => {
+        setExpanded(false);
+    }, [activeDescriptorKey]);
+    // Text fields anchor to the field block's own bounds — its top-left corner
+    // stays put while values change, so stepping never moves the buttons under
+    // the pointer. Media fields keep the supplied bounds.
+    const anchorsToText = !suppliedFieldRect && !!measuredDescriptor;
+    const measurement = useOverlayMeasurement((metrics) => {
+        const fieldRect = suppliedFieldRect ??
+            (measuredDescriptor
+                ? measureBridgeFieldRect(pageViewContext.bridgeGeometry, pageViewContext.bridgeStructure, measuredDescriptor, metrics)
+                : null);
+        return {
+            field: fieldRect,
+            viewportLeft: metrics.scrollLeft,
+            viewportTop: metrics.scrollTop,
+            viewportWidth: metrics.viewportWidth,
+            viewportHeight: metrics.viewportHeight,
+        };
+    }, [
+        measuredDescriptor,
+        pageViewContext.bridgeGeometry,
+        pageViewContext.bridgeStructure,
+        suppliedFieldRect,
+    ], {
+        initialValue: {
+            field: null,
+            viewportLeft: 0,
+            viewportTop: 0,
+            viewportWidth: 0,
+            viewportHeight: 0,
+        },
+        equals: anchorMeasurementsEqual,
+        interests: ["viewport", "layout", "text", "adornment-data"],
+    });
+    const quickHistoryEntries = quickHistory?.key === activeDescriptorKey ? quickHistory.entries : [];
+    const boundedIndex = Math.max(0, Math.min(quickHistoryIndex, quickHistoryEntries.length - 1));
+    const pendingApplyRef = useRef(undefined);
+    const applyTimerRef = useRef(undefined);
+    const flushPendingApply = async () => {
+        const pending = pendingApplyRef.current;
+        if (applyTimerRef.current) {
+            clearTimeout(applyTimerRef.current);
+            applyTimerRef.current = undefined;
+        }
+        if (!pending)
+            return;
+        pendingApplyRef.current = undefined;
+        const currentEditContext = editContextRef.current;
+        if (!currentEditContext)
+            return;
+        await currentEditContext.operations.editField({
+            field: pending.descriptor,
+            rawValue: pending.entry.rawValue ?? null,
+            // A canvas that was already patched shows the stepped value; forcing a
+            // refresh here tears down the inline-edit session (dropping selection
+            // and the pill with it). Only media fields, which take no patch, need
+            // the re-render to show the restored value.
+            refresh: pending.refresh,
+        });
+    };
+    const flushPendingApplyRef = useRef(flushPendingApply);
+    flushPendingApplyRef.current = flushPendingApply;
+    // A step that is still coalescing when the field is left (or the editor
+    // unmounts) must not be dropped — flush it instead.
+    useEffect(() => () => {
+        void flushPendingApplyRef.current();
+    }, [activeDescriptorKey]);
+    const applyQuickHistoryIndex = (index) => {
+        const nextIndex = Math.max(0, Math.min(index, quickHistoryEntries.length - 1));
+        const nextEntry = quickHistoryEntries[nextIndex];
+        if (!nextEntry || !activeDescriptor || !editContext)
+            return;
+        setQuickHistoryIndex(nextIndex);
+        setSelectedHistoryEntry(nextEntry);
+        selfChangeUntilRef.current =
+            Date.now() + INLINE_FIELD_HISTORY_SELF_CHANGE_WINDOW_MS;
+        quickHistorySessions.set(activeDescriptorKey, {
+            entries: quickHistoryEntries,
+            index: nextIndex,
+            expiresAt: Date.now() + QUICK_HISTORY_SESSION_TTL_MS,
+        });
+        const displayField = activeField ?? field;
+        const structureField = pageViewContext.bridgeStructure?.fields.find((candidate) => idsMatch(candidate.fieldId, activeDescriptor.fieldId) &&
+            (!candidate.item?.id ||
+                idsMatch(candidate.item.id, activeDescriptor.item.id)));
+        const elementKey = bridgeElementKey ?? structureField?.elementKey;
+        const fieldType = displayField?.type.toLowerCase();
+        // Show the value straight away; the save below is coalesced so holding the
+        // arrow down does not queue one round-trip per step.
+        const canPatchCanvas = !!elementKey && fieldType !== "image" && fieldType !== "picture";
+        if (canPatchCanvas) {
+            pageViewContext.requestBridgeFieldPatch?.({
+                elementKey,
+                fieldId: activeDescriptor.fieldId,
+                value: nextEntry.rawValue ?? "",
+                isRichText: structureField?.isRichText === true || fieldType === "rich text",
+                source: "reset",
+            });
+        }
+        pendingApplyRef.current = {
+            descriptor: activeDescriptor,
+            entry: nextEntry,
+            refresh: canPatchCanvas ? "none" : "immediate",
+        };
+        if (applyTimerRef.current)
+            clearTimeout(applyTimerRef.current);
+        applyTimerRef.current = setTimeout(() => {
+            applyTimerRef.current = undefined;
+            flushPendingApplyRef.current();
+        }, QUICK_HISTORY_APPLY_DEBOUNCE_MS);
+    };
+    const applyQuickHistoryIndexRef = useRef(applyQuickHistoryIndex);
+    applyQuickHistoryIndexRef.current = applyQuickHistoryIndex;
+    const canStepOlder = boundedIndex < quickHistoryEntries.length - 1;
+    const canStepNewer = boundedIndex > 0;
+    const stepEnabled = !open && quickHistoryEntries.length > 1;
+    const canStepOlderRef = useRef(canStepOlder);
+    canStepOlderRef.current = canStepOlder && stepEnabled;
+    const canStepNewerRef = useRef(canStepNewer);
+    canStepNewerRef.current = canStepNewer && stepEnabled;
+    const boundedIndexRef = useRef(boundedIndex);
+    boundedIndexRef.current = boundedIndex;
+    // Alt+Up / Alt+Down while the caret is in the field. Canvas keystrokes reach
+    // the parent as a bridge interaction that PageViewerFrame republishes as this
+    // event, so one listener covers both the canvas and the side panel.
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const handleStep = (event) => {
+            const direction = event.detail
+                ?.direction;
+            if (direction === "older" && canStepOlderRef.current) {
+                applyQuickHistoryIndexRef.current(boundedIndexRef.current + 1);
+            }
+            else if (direction === "newer" && canStepNewerRef.current) {
+                applyQuickHistoryIndexRef.current(boundedIndexRef.current - 1);
+            }
+            else {
+                return;
+            }
+            // Stepping from the keyboard unfolds the controls so the position label
+            // gives feedback on where in the history the field is.
+            setExpanded(true);
+        };
+        document.addEventListener(INLINE_FIELD_HISTORY_STEP_EVENT, handleStep);
+        return () => document.removeEventListener(INLINE_FIELD_HISTORY_STEP_EVENT, handleStep);
+    }, []);
+    const anchorRect = measurement.field;
+    // Both widths are remembered rather than read live: the label is measured
+    // while it is shown and its remembered width decides whether it may come back,
+    // so hiding it cannot make it immediately fit and flap. Measuring after every
+    // render is deliberate — the label's text (and width) changes as you step —
+    // and the thresholds below stop the state updates from chaining.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(() => {
+        const controls = controlsRef.current?.offsetWidth ?? 0;
+        if (controls > 0 && Math.abs(controls - controlsWidth) > 1) {
+            setControlsWidth(controls);
+        }
+        const label = labelRef.current?.offsetWidth ?? 0;
+        if (label > 0 && Math.abs(label - labelWidth) > 1) {
+            setLabelWidth(label);
+        }
+    });
+    if (!editContext ||
+        editContext.readonly ||
+        editContext.mode !== "edit" ||
+        !measuredDescriptor ||
+        !anchorRect ||
+        // Text fields hold the pill back until typing settles; an open popover
+        // outlives the idle window it was opened from. Media fields are not typed
+        // into and their pill is already gated by the hover overlay that owns it.
+        (anchorsToText && !idle && !open)) {
+        return null;
+    }
+    // Media pills collapse too: same subtle trigger, same unfold-on-click.
+    const collapsedTrigger = !expanded && !open;
+    const position = calculateInlineFieldHistoryButtonPosition(anchorRect, {
+        anchor: anchorsToText ? "block" : "corner",
+        controlsWidth,
+        labelWidth: collapsedTrigger ? 0 : labelWidth,
+        viewportLeft: measurement.viewportLeft,
+        viewportTop: measurement.viewportTop,
+        viewportWidth: measurement.viewportWidth,
+        viewportHeight: measurement.viewportHeight,
+    });
+    const entryLabel = formatInlineHistoryEntryLabel(quickHistoryEntries[boundedIndex], boundedIndex, quickHistoryEntries.length);
+    const showStepControls = !open && !collapsedTrigger && quickHistoryEntries.length > 0;
+    const showLabel = showStepControls &&
+        position.showLabel &&
+        (!!entryLabel || quickHistoryLoading);
+    const closeHistory = () => {
+        setOpen(false);
+        setSelectedHistoryEntry(undefined);
+        setHistoryField(undefined);
+        setHistoryDescriptor(undefined);
+        onOpenChange?.(false);
+    };
+    return (_jsxs("div", { ref: pillRef, className: "animate-in fade-in pointer-events-auto absolute flex items-center gap-1.5 duration-200", style: {
+            left: position.left,
+            top: position.top,
+            minHeight: INLINE_FIELD_HISTORY_BUTTON_SIZE,
+            zIndex: 900,
+        }, "data-field-history-trigger": "true", "data-testid": `${testId}-container`, onMouseDown: (event) => {
+            // The pill floats over the live canvas; a click that slips past a
+            // button must neither blur the iframe's edit session nor fall
+            // through as a canvas interaction.
+            event.preventDefault();
+            event.stopPropagation();
+        }, onPointerEnter: () => {
+            onPointerPresenceChange?.(true);
+            // Refresh stale data on approach, but never while a fetch is running
+            // and never for fresh data: an unconditional refetch here looped — the
+            // loading pill shrank out from under the cursor and re-entered when
+            // the response grew it back.
+            if (!getQuickHistorySession(activeDescriptorKey) &&
+                !quickHistoryLoading &&
+                quickHistory?.key === activeDescriptorKey &&
+                Date.now() - quickHistory.fetchedAt > QUICK_HISTORY_HOVER_STALE_MS) {
+                setQuickHistoryReloadToken((token) => token + 1);
+            }
+        }, onPointerLeave: () => onPointerPresenceChange?.(false), onMouseEnter: () => onPointerPresenceChange?.(true), onMouseLeave: () => onPointerPresenceChange?.(false), children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-2" }), collapsedTrigger ? (_jsx("div", { ref: controlsRef, className: "relative flex h-6 items-center", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "border-border-default/60 text-neutral-grey-100 hover:border-border-default flex h-6 w-6 cursor-pointer items-center justify-center rounded-[4px] border bg-white/70 opacity-70 hover:bg-white hover:opacity-100 hover:shadow-sm", "aria-label": "Field History", "aria-expanded": false, "data-field-history-trigger": "true", "data-testid": testId, onMouseDown: (event) => {
+                                    // Keep the iframe's active field alive while unfolding.
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                }, onClick: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    setExpanded(true);
+                                    // The pill can mount while an edit is still being saved. Its
+                                    // eager request then contains no previous value, and the
+                                    // value-change effect cannot detect that save if the edited
+                                    // value was already present on mount. Opening the controls is
+                                    // an explicit request for current history, so refresh unless
+                                    // the user already has a quick-navigation session whose
+                                    // position must be preserved.
+                                    if (!getQuickHistorySession(activeDescriptorKey)) {
+                                        setQuickHistoryReloadToken((token) => token + 1);
+                                    }
+                                }, children: _jsx(History, { "aria-hidden": "true", strokeWidth: 1, className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "top", children: "Field History" })] }) })) : (_jsxs("div", { ref: controlsRef, className: "border-border-default relative flex h-6 items-center overflow-hidden rounded-[4px] border bg-white shadow-sm", children: [showStepControls && (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "hover:bg-neutral-grey-5 text-neutral-grey-100 flex h-full w-[22px] cursor-pointer items-center justify-center disabled:cursor-not-allowed disabled:opacity-35", "aria-label": "Older history value", "data-testid": "field-history-step-older", disabled: !canStepOlder, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                applyQuickHistoryIndex(boundedIndex + 1);
+                                            }, children: _jsx(Undo2, { "aria-hidden": "true", className: "h-3.5 w-3.5", strokeWidth: 1 }) }) }), _jsx(TooltipContent, { side: "top", children: "Older value (Alt+Down)" })] }), _jsx("span", { className: "bg-border-default h-6 w-px" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "hover:bg-neutral-grey-5 text-neutral-grey-100 flex h-full w-[22px] cursor-pointer items-center justify-center disabled:cursor-not-allowed disabled:opacity-35", "aria-label": "Newer history value", "data-testid": "field-history-step-newer", disabled: !canStepNewer, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                applyQuickHistoryIndex(boundedIndex - 1);
+                                            }, children: _jsx(Redo2, { "aria-hidden": "true", className: "h-3.5 w-3.5", strokeWidth: 1 }) }) }), _jsx(TooltipContent, { side: "top", children: "Newer value (Alt+Up)" })] }), _jsx("span", { className: "bg-border-default h-6 w-px" })] })), _jsxs(Tooltip, { children: [_jsxs(Popover, { open: open, onOpenChange: (nextOpen) => {
+                                    if (nextOpen) {
+                                        if (!activeDescriptor)
+                                            return;
+                                        const descriptor = activeDescriptor;
+                                        const requestedField = field ?? activeField;
+                                        void (async () => {
+                                            // Full history must be a persistence boundary. A quick
+                                            // step patches the canvas immediately and saves on a
+                                            // trailing debounce; fetching while that save is pending
+                                            // can preview the value from the preceding step. Flush
+                                            // both this component's coalescing timer and the editor's
+                                            // field-save queue before mounting FieldHistory (whose
+                                            // first effect performs the GET).
+                                            await flushPendingApply();
+                                            await editContext.operations.onFieldBlur();
+                                            setHistoryDescriptor(descriptor);
+                                            setHistoryField(requestedField);
+                                            setOpen(true);
+                                            onOpenChange?.(true);
+                                        })();
+                                    }
+                                    else {
+                                        closeHistory();
+                                    }
+                                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "hover:bg-neutral-grey-5 text-neutral-grey-100 flex h-full w-6 shrink-0 cursor-pointer items-center justify-center", "aria-label": "Field History", "data-field-history-trigger": "true", "data-testid": testId, onMouseDown: (event) => {
+                                                    // Keep the iframe's active field alive while the trigger opens.
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                }, onClick: (event) => event.stopPropagation(), children: _jsx(History, { "aria-hidden": "true", strokeWidth: 1, className: "h-3.5 w-3.5" }) }) }) }), _jsx(PopoverContent, { className: "w-[700px] overflow-hidden p-0", align: "end", side: "left", sideOffset: 8, children: displayedField ? (_jsx(FieldHistory, { field: displayedField, selectedEntry: selectedHistoryEntry, onSelectedEntryChange: setSelectedHistoryEntry, configuration: editContext.configuration, showRawValue: false, onRevert: closeHistory, onClose: closeHistory })) : (_jsx("div", { className: "text-neutral-grey-50 flex h-[500px] items-center justify-center text-sm", "data-testid": "field-history-loading", children: "Loading field history\u2026" })) })] }), _jsx(TooltipContent, { side: "top", children: "Field History" })] })] })), showLabel && (_jsx("div", { ref: labelRef, className: "border-border-default text-neutral-grey-50 relative flex h-6 items-center gap-1 overflow-hidden rounded-[4px] border bg-white px-2 text-[10px] whitespace-nowrap shadow-sm", style: { maxWidth: QUICK_HISTORY_LABEL_MAX_WIDTH }, "data-testid": "field-history-entry-label", title: entryLabel, children: quickHistoryLoading && !entryLabel ? (_jsx(Loader2, { "aria-label": "Loading field history", className: "h-3 w-3 animate-spin", strokeWidth: 1 })) : (_jsx("span", { className: "truncate", children: entryLabel })) }))] }));
+}
+//# sourceMappingURL=InlineFieldHistoryButton.js.map