@elizaos/ui 2.0.3-beta.4 → 2.0.3-beta.5

package/hooks/useHorizontalPager.js

@@ -0,0 +1,226 @@
+import * as React from "react";
+const AXIS_COMMIT_SLOP = 6;
+const AXIS_DOMINANCE_RATIO = 1.15;
+const MIN_DISTANCE_THRESHOLD = 64;
+const DISTANCE_THRESHOLD_RATIO = 0.24;
+const MIN_FLICK_DISTANCE = 48;
+const FLICK_VELOCITY = 0.45;
+const SETTLE_MS = 360;
+const SNAP_BACK_MS = 280;
+const SETTLE_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+function now() {
+    return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
+function roundedPx(value) {
+    return `${Math.round(value * 1000) / 1000}px`;
+}
+function pageOffset(page, width) {
+    return -page * width;
+}
+function clampPage(page, pageCount) {
+    return Math.max(0, Math.min(Math.max(0, pageCount - 1), page));
+}
+/**
+ * Native-feeling horizontal pager for launcher surfaces.
+ *
+ * Pointer movement writes directly to the rail transform, paced by rAF, so a
+ * drag never waits on React render scheduling. React state is used only for the
+ * settled page index after release.
+ */
+export function useHorizontalPager({ page, pageCount, enabled = true, edgeSwipeRightEnabled = false, onPageChange, onEdgeSwipeRight, }) {
+    const viewportRef = React.useRef(null);
+    const railRef = React.useRef(null);
+    const dragRef = React.useRef(null);
+    const rafRef = React.useRef(0);
+    const pendingOffsetRef = React.useRef(null);
+    const mountedRef = React.useRef(false);
+    const pageRef = React.useRef(page);
+    const pageCountRef = React.useRef(pageCount);
+    const enabledRef = React.useRef(enabled);
+    const edgeSwipeRightEnabledRef = React.useRef(edgeSwipeRightEnabled);
+    const onPageChangeRef = React.useRef(onPageChange);
+    const onEdgeSwipeRightRef = React.useRef(onEdgeSwipeRight);
+    pageRef.current = page;
+    pageCountRef.current = pageCount;
+    enabledRef.current = enabled;
+    edgeSwipeRightEnabledRef.current = edgeSwipeRightEnabled;
+    onPageChangeRef.current = onPageChange;
+    onEdgeSwipeRightRef.current = onEdgeSwipeRight;
+    const measureWidth = React.useCallback(() => {
+        const width = viewportRef.current?.clientWidth ||
+            (typeof window !== "undefined" ? window.innerWidth : 1);
+        return Math.max(1, width);
+    }, []);
+    const writeOffset = React.useCallback((offset, transitionMs) => {
+        const rail = railRef.current;
+        if (!rail)
+            return;
+        rail.style.transition =
+            transitionMs == null
+                ? "none"
+                : `transform ${transitionMs}ms ${SETTLE_EASING}`;
+        rail.style.transform = `translate3d(${roundedPx(offset)},0,0)`;
+    }, []);
+    const flushOffset = React.useCallback(() => {
+        rafRef.current = 0;
+        const offset = pendingOffsetRef.current;
+        pendingOffsetRef.current = null;
+        if (offset == null)
+            return;
+        writeOffset(offset, null);
+    }, [writeOffset]);
+    const scheduleOffset = React.useCallback((offset) => {
+        pendingOffsetRef.current = offset;
+        if (rafRef.current !== 0)
+            return;
+        if (typeof requestAnimationFrame === "function") {
+            rafRef.current = requestAnimationFrame(flushOffset);
+            return;
+        }
+        flushOffset();
+    }, [flushOffset]);
+    const cancelScheduledOffset = React.useCallback(() => {
+        if (rafRef.current !== 0 && typeof cancelAnimationFrame === "function") {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = 0;
+        pendingOffsetRef.current = null;
+    }, []);
+    const canMove = React.useCallback((state, dx) => {
+        if (dx < 0)
+            return state.page < pageCountRef.current - 1;
+        if (dx > 0) {
+            return state.page > 0 || edgeSwipeRightEnabledRef.current;
+        }
+        return false;
+    }, []);
+    const releaseCapture = React.useCallback((event, state) => {
+        if (!state.captured)
+            return;
+        try {
+            event.currentTarget.releasePointerCapture?.(state.pointerId);
+        }
+        catch {
+            // The browser may already have revoked capture.
+        }
+    }, []);
+    React.useLayoutEffect(() => {
+        const width = measureWidth();
+        const nextPage = clampPage(page, pageCount);
+        writeOffset(pageOffset(nextPage, width), mountedRef.current && !dragRef.current ? SETTLE_MS : null);
+        mountedRef.current = true;
+    }, [measureWidth, page, pageCount, writeOffset]);
+    React.useEffect(() => {
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const observer = new ResizeObserver(() => {
+            if (dragRef.current)
+                return;
+            writeOffset(pageOffset(clampPage(pageRef.current, pageCountRef.current), measureWidth()), null);
+        });
+        observer.observe(viewport);
+        return () => observer.disconnect();
+    }, [measureWidth, writeOffset]);
+    React.useEffect(() => cancelScheduledOffset, [cancelScheduledOffset]);
+    const finish = React.useCallback((event, cancelled = false) => {
+        const state = dragRef.current;
+        if (!state || state.pointerId !== event.pointerId)
+            return;
+        cancelScheduledOffset();
+        dragRef.current = null;
+        releaseCapture(event, state);
+        const base = pageOffset(state.page, state.width);
+        const dx = event.clientX - state.startX;
+        const dy = event.clientY - state.startY;
+        if (cancelled || state.axis !== "horizontal" || !canMove(state, dx)) {
+            writeOffset(base, SNAP_BACK_MS);
+            return;
+        }
+        const elapsed = Math.max(1, now() - state.startTime);
+        const velocity = dx / elapsed;
+        const distanceThreshold = Math.max(MIN_DISTANCE_THRESHOLD, state.width * DISTANCE_THRESHOLD_RATIO);
+        const shouldAdvance = Math.abs(dx) >= distanceThreshold ||
+            (Math.abs(dx) >= MIN_FLICK_DISTANCE &&
+                Math.abs(velocity) >= FLICK_VELOCITY &&
+                Math.abs(dx) > Math.abs(dy) * AXIS_DOMINANCE_RATIO);
+        if (!shouldAdvance) {
+            writeOffset(base, SNAP_BACK_MS);
+            return;
+        }
+        if (dx > 0 && state.page === 0 && edgeSwipeRightEnabledRef.current) {
+            writeOffset(base, SNAP_BACK_MS);
+            onEdgeSwipeRightRef.current?.();
+            return;
+        }
+        const targetPage = clampPage(state.page + (dx < 0 ? 1 : -1), pageCountRef.current);
+        writeOffset(pageOffset(targetPage, state.width), SETTLE_MS);
+        if (targetPage !== pageRef.current) {
+            onPageChangeRef.current(targetPage);
+        }
+    }, [canMove, cancelScheduledOffset, releaseCapture, writeOffset]);
+    const onPointerDown = React.useCallback((event) => {
+        if (!enabledRef.current ||
+            pageCountRef.current <= 0 ||
+            event.isPrimary === false) {
+            return;
+        }
+        cancelScheduledOffset();
+        const currentPage = clampPage(pageRef.current, pageCountRef.current);
+        const width = measureWidth();
+        dragRef.current = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            startTime: now(),
+            page: currentPage,
+            width,
+            captured: false,
+            axis: "pending",
+        };
+        writeOffset(pageOffset(currentPage, width), null);
+    }, [cancelScheduledOffset, measureWidth, writeOffset]);
+    const onPointerMove = React.useCallback((event) => {
+        const state = dragRef.current;
+        if (!state || state.pointerId !== event.pointerId)
+            return;
+        const dx = event.clientX - state.startX;
+        const dy = event.clientY - state.startY;
+        if (state.axis === "pending") {
+            const ax = Math.abs(dx);
+            const ay = Math.abs(dy);
+            if (Math.max(ax, ay) < AXIS_COMMIT_SLOP)
+                return;
+            state.axis = ax > ay * AXIS_DOMINANCE_RATIO ? "horizontal" : "vertical";
+        }
+        if (state.axis !== "horizontal")
+            return;
+        if (!canMove(state, dx))
+            return;
+        if (!state.captured) {
+            try {
+                event.currentTarget.setPointerCapture(event.pointerId);
+                state.captured = true;
+            }
+            catch {
+                // Capture is best-effort; the transform can still follow pointermove.
+            }
+        }
+        scheduleOffset(pageOffset(state.page, state.width) + dx);
+    }, [canMove, scheduleOffset]);
+    const onPointerUp = React.useCallback((event) => finish(event), [finish]);
+    const onPointerCancel = React.useCallback((event) => finish(event, true), [finish]);
+    return {
+        viewportRef,
+        railRef,
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel,
+            onLostPointerCapture: onPointerCancel,
+        },
+    };
+}

package/hooks/useLayoutShiftMonitor.d.ts

@@ -1,5 +1,7 @@
 /** Web Vitals "good" CLS budget: above this, a window of shifts is flagged. */
 export declare const DEFAULT_CLS_BUDGET = 0.1;
+export declare const LAYOUT_SHIFT_INTENT_ATTR = "data-eliza-layout-shift-intent";
+export declare const LAYOUT_SHIFT_INTENT_TRANSIENT = "transient";
 /** Telemetry payload emitted on the shared RENDER_TELEMETRY_EVENT channel. */
 export interface LayoutShiftTelemetryEvent {
     source: "layoutShift";

package/hooks/useLayoutShiftMonitor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutShiftMonitor.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useLayoutShiftMonitor.ts"],"names":[],"mappings":"AAkCA,+EAA+E;AAC/E,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,8EAA8E;AAC9E,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,UAAU,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA6BD;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,GAAE,yBAA8B,GACtC,MAAM,IAAI,CA2EZ;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAGN"}
+{"version":3,"file":"useLayoutShiftMonitor.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useLayoutShiftMonitor.ts"],"names":[],"mappings":"AAkCA,+EAA+E;AAC/E,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,mCAAmC,CAAC;AACzE,eAAO,MAAM,6BAA6B,cAAc,CAAC;AAGzD,8EAA8E;AAC9E,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,UAAU,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkDD;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,GAAE,yBAA8B,GACtC,MAAM,IAAI,CA4EZ;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAGN"}

package/hooks/useLayoutShiftMonitor.js

@@ -24,6 +24,9 @@ import { cumulativeLayoutShift, } from "../testing/layout-stability.js";
 import { currentRoute, isRenderTelemetryEnabled, nextRenderTelemetrySequence, RENDER_TELEMETRY_EVENT, } from "./useRenderGuard.js";
 /** Web Vitals "good" CLS budget: above this, a window of shifts is flagged. */
 export const DEFAULT_CLS_BUDGET = 0.1;
+export const LAYOUT_SHIFT_INTENT_ATTR = "data-eliza-layout-shift-intent";
+export const LAYOUT_SHIFT_INTENT_TRANSIENT = "transient";
+const LAYOUT_SHIFT_INTENT_SELECTOR = `[${LAYOUT_SHIFT_INTENT_ATTR}="${LAYOUT_SHIFT_INTENT_TRANSIENT}"]`;
 function emitLayoutShift(event) {
     const globalObject = globalThis;
     if (Array.isArray(globalObject.__ELIZA_RENDER_TELEMETRY__)) {
@@ -40,6 +43,25 @@ function emitLayoutShift(event) {
         console.info(message, event);
     }
 }
+function hasTransientLayoutShiftIntent(entry) {
+    const sources = Array.isArray(entry.sources) ? entry.sources : [];
+    let sawIntentionalSource = false;
+    for (const source of sources) {
+        const node = source.node;
+        const element = node instanceof Element ? node : (node?.parentElement ?? null);
+        // Browser pseudo-element sources can omit a DOM parent. Do not let an
+        // unattributed pseudo-source disqualify a shift whose concrete sources are
+        // all inside an intentional-motion surface.
+        if (!element)
+            continue;
+        if (element.closest(LAYOUT_SHIFT_INTENT_SELECTOR)) {
+            sawIntentionalSource = true;
+            continue;
+        }
+        return false;
+    }
+    return sawIntentionalSource;
+}
 /**
  * Start observing layout shifts. Returns a stop function. No-op (returns a no-op
  * stop) when render telemetry is disabled or the engine lacks the layout-shift
@@ -91,6 +113,7 @@ export function startLayoutShiftMonitor(options = {}) {
                 pending.push({
                     value: entry.value,
                     hadRecentInput: entry.hadRecentInput === true,
+                    intentional: hasTransientLayoutShiftIntent(entry),
                 });
                 if (!entry.hadRecentInput && entry.value > largest) {
                     largest = entry.value;

package/hooks/view-catalog.d.ts

@@ -33,10 +33,9 @@ export interface ViewEntry {
     /** Real preview image URL, or undefined when only a generated fallback exists. */
     heroUrl?: string;
     /**
-     * Always-available preview image URL. Real plugin art wins when present;
-     * otherwise this is a deterministic branded SVG data URI. Use this (not
-     * {@link heroUrl}) when every entry must show an image, e.g. Springboard
-     * tiles.
+     * Always-available preview image URL. Real plugin art wins only when the
+     * registry says that asset exists; otherwise this is a deterministic branded
+     * SVG data URI, not a backend hero endpoint probe.
      */
     imageUrl?: string;
     /** Deterministic branded image used when a real preview image fails to load. */

package/hooks/view-catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-catalog.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/view-catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,QAAQ,EACd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAoB7D,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,CAAC;AAC7E,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,KAAK,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,0EAA0E;IAC1E,GAAG,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,QAAQ,EAAE,YAAY,CAAC;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,GAAG,CAAC,EAAE,eAAe,CAAC;CACvB;AAED,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAiC9D;AAoCD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACvC,cAAc,EAAE,YAAY,CAAC;IAC7B,+EAA+E;IAC/E,YAAY,EAAE,gBAAgB,CAAC;CAChC,GAAG,SAAS,EAAE,CAgCd;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAwBrE"}
+{"version":3,"file":"view-catalog.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/view-catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,QAAQ,EACd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAoB7D,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,CAAC;AAC7E,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,KAAK,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,0EAA0E;IAC1E,GAAG,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,QAAQ,EAAE,YAAY,CAAC;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,GAAG,CAAC,EAAE,eAAe,CAAC;CACvB;AAED,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,CA+B9D;AAoCD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACvC,cAAc,EAAE,YAAY,CAAC;IAC7B,+EAA+E;IAC/E,YAAY,EAAE,gBAAgB,CAAC;CAChC,GAAG,SAAS,EAAE,CAgCd;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAwBrE"}

package/hooks/view-catalog.js

@@ -41,12 +41,10 @@ export function viewToEntry(view) {
         description: view.description,
         icon: view.icon,
         heroUrl: hasHero ? view.heroImageUrl : undefined,
-        // `imageUrl` ALWAYS resolves to a real/branded image so a Springboard tile
-        // is never a bare glyph. A real plugin hero (`heroImageUrl`) wins; otherwise
-        // we generate the branded hero CLIENT-SIDE (an inline data URI) rather than
-        // pointing at the `/api/views/:id/hero` endpoint, which 404s offline / on
-        // cloud builds — so the tiles show images everywhere, no agent required.
-        imageUrl: view.heroImageUrl ?? generatedHero,
+        // Use a registry hero only when it is declared as real. Otherwise generate
+        // the branded fallback client-side so static/mobile shells avoid backend
+        // `/api/views/:id/hero` probes for icon-only views.
+        imageUrl: hasHero ? view.heroImageUrl : generatedHero,
         fallbackImageUrl: generatedHero,
         hasHero,
         modality: view.viewType ?? "gui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/ui",
-  "version": "2.0.3-beta.4",
+  "version": "2.0.3-beta.5",
   "description": "Shared UI primitives, composites, and layout utilities for elizaOS apps.",
   "type": "module",
   "license": "MIT",
@@ -279,17 +279,17 @@
     "react-dom": "19.2.5"
   },
   "optionalDependencies": {
-    "@elizaos/capacitor-bun-runtime": "2.0.3-beta.4",
-    "@elizaos/capacitor-camera": "2.0.3-beta.4"
+    "@elizaos/capacitor-bun-runtime": "2.0.3-beta.5",
+    "@elizaos/capacitor-camera": "2.0.3-beta.5"
   },
   "dependencies": {
     "@capacitor/core": "8.4.0",
-    "@elizaos/cloud-sdk": "2.0.3-beta.4",
-    "@elizaos/cloud-shared": "2.0.3-beta.4",
-    "@elizaos/core": "2.0.3-beta.4",
-    "@elizaos/logger": "2.0.3-beta.4",
-    "@elizaos/shared": "2.0.3-beta.4",
-    "@elizaos/tui": "2.0.3-beta.4",
+    "@elizaos/cloud-sdk": "2.0.3-beta.5",
+    "@elizaos/cloud-shared": "2.0.3-beta.5",
+    "@elizaos/core": "2.0.3-beta.5",
+    "@elizaos/logger": "2.0.3-beta.5",
+    "@elizaos/shared": "2.0.3-beta.5",
+    "@elizaos/tui": "2.0.3-beta.5",
     "@fontsource/poppins": "^5.2.7",
     "@json-render/core": "0.19.0",
     "@json-render/react": "0.19.0",
@@ -361,5 +361,5 @@
     "directory": "dist"
   },
   "types": "./index.d.ts",
-  "gitHead": "f76f55793a0fb8d6b869dd8ddce03970de061e34"
+  "gitHead": "ff6157011c9459670021cc28a6797592a78b8817"
 }

package/state/startup-telemetry.d.ts

@@ -37,11 +37,17 @@ export declare const STARTUP_TRACE_WINDOW_KEY = "__ELIZA_STARTUP_TRACE__";
 /** Window key a native host (Electrobun/Capacitor) may inject to share its id. */
 export declare const STARTUP_TRACE_ID_WINDOW_KEY = "__ELIZA_STARTUP_TRACE_ID__";
 declare global {
+    interface ElizaNativeStartupBridge {
+        /** Android-native synchronous startup trace id fast path. */
+        getStartupTraceId?: () => unknown;
+    }
     interface Window {
         /** Renderer startup trace mirrored for out-of-band harness capture. */
         [STARTUP_TRACE_WINDOW_KEY]?: StartupTrace;
         /** Native-host-injected trace id, shared across host ↔ renderer. */
         [STARTUP_TRACE_ID_WINDOW_KEY]?: string;
+        /** Android synchronous native bridge, when running in the Capacitor APK. */
+        ElizaNative?: ElizaNativeStartupBridge;
     }
 }
 /**

package/state/startup-telemetry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"startup-telemetry.d.ts","sourceRoot":"","sources":["../../../../../src/state/startup-telemetry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AACpD,oCAAoC;AACpC,eAAO,MAAM,wBAAwB,4BAA4B,CAAC;AAClE,kFAAkF;AAClF,eAAO,MAAM,2BAA2B,+BAA+B,CAAC;AAExE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,uEAAuE;QACvE,CAAC,wBAAwB,CAAC,CAAC,EAAE,YAAY,CAAC;QAC1C,oEAAoE;QACpE,CAAC,2BAA2B,CAAC,CAAC,EAAE,MAAM,CAAC;KACxC;CACF;AAoCD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAQ7D;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,IAAI,CAwBN;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,MAAM,GACd,IAAI,CAgBN;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,uCAAuC;AACvC,wBAAgB,2BAA2B,IAAI,IAAI,CAQlD"}
+{"version":3,"file":"startup-telemetry.d.ts","sourceRoot":"","sources":["../../../../../src/state/startup-telemetry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AACpD,oCAAoC;AACpC,eAAO,MAAM,wBAAwB,4BAA4B,CAAC;AAClE,kFAAkF;AAClF,eAAO,MAAM,2BAA2B,+BAA+B,CAAC;AAExE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,wBAAwB;QAChC,6DAA6D;QAC7D,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;KACnC;IAED,UAAU,MAAM;QACd,uEAAuE;QACvE,CAAC,wBAAwB,CAAC,CAAC,EAAE,YAAY,CAAC;QAC1C,oEAAoE;QACpE,CAAC,2BAA2B,CAAC,CAAC,EAAE,MAAM,CAAC;QACvC,4EAA4E;QAC5E,WAAW,CAAC,EAAE,wBAAwB,CAAC;KACxC;CACF;AAyDD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAQ7D;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,IAAI,CAwBN;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,MAAM,GACd,IAAI,CAgBN;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,uCAAuC;AACvC,wBAAgB,2BAA2B,IAAI,IAAI,CASlD"}

package/state/startup-telemetry.js

@@ -36,11 +36,31 @@ function originMs() {
         ? performance.timeOrigin
         : 0;
 }
+function normalizeTraceId(value) {
+    if (typeof value !== "string")
+        return undefined;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+}
+function readAndroidBridgeTraceId() {
+    if (typeof window === "undefined")
+        return undefined;
+    const bridge = window.ElizaNative;
+    if (!bridge || typeof bridge.getStartupTraceId !== "function") {
+        return undefined;
+    }
+    try {
+        return normalizeTraceId(bridge.getStartupTraceId());
+    }
+    catch {
+        return undefined;
+    }
+}
 function readInjectedTraceId() {
     if (typeof window === "undefined")
         return undefined;
-    const value = window[STARTUP_TRACE_ID_WINDOW_KEY];
-    return typeof value === "string" && value.length > 0 ? value : undefined;
+    return (normalizeTraceId(window[STARTUP_TRACE_ID_WINDOW_KEY]) ??
+        readAndroidBridgeTraceId());
 }
 function mirrorToWindow() {
     if (typeof window === "undefined")
@@ -135,5 +155,6 @@ export function __resetStartupTraceForTests() {
     if (typeof window !== "undefined") {
         delete window[STARTUP_TRACE_WINDOW_KEY];
         delete window[STARTUP_TRACE_ID_WINDOW_KEY];
+        delete window.ElizaNative;
     }
 }

package/styles/base.css

@@ -84,9 +84,9 @@
   --scrollbar-thumb-start: rgba(0, 0, 0, 0.22);
   --scrollbar-thumb-mid: rgba(0, 0, 0, 0.3);
   --scrollbar-thumb-end: rgba(0, 0, 0, 0.36);
-  --scrollbar-thumb-hover-start: rgba(255, 88, 0, 0.56);
-  --scrollbar-thumb-hover-mid: rgba(255, 88, 0, 0.7);
-  --scrollbar-thumb-hover-end: rgba(255, 88, 0, 0.78);
+  --scrollbar-thumb-hover-start: rgba(0, 0, 0, 0.34);
+  --scrollbar-thumb-hover-mid: rgba(0, 0, 0, 0.44);
+  --scrollbar-thumb-hover-end: rgba(0, 0, 0, 0.52);
   --scrollbar-thumb-edge: rgba(0, 0, 0, 0.1);
 
   /* Header */
@@ -223,9 +223,9 @@
   --scrollbar-thumb-start: rgba(255, 255, 255, 0.32);
   --scrollbar-thumb-mid: rgba(255, 255, 255, 0.24);
   --scrollbar-thumb-end: rgba(255, 255, 255, 0.28);
-  --scrollbar-thumb-hover-start: rgba(255, 88, 0, 0.94);
-  --scrollbar-thumb-hover-mid: rgba(255, 88, 0, 0.82);
-  --scrollbar-thumb-hover-end: rgba(255, 88, 0, 0.88);
+  --scrollbar-thumb-hover-start: rgba(255, 255, 255, 0.46);
+  --scrollbar-thumb-hover-mid: rgba(255, 255, 255, 0.38);
+  --scrollbar-thumb-hover-end: rgba(255, 255, 255, 0.42);
   --scrollbar-thumb-edge: rgba(255, 255, 255, 0.12);
 
   --header-bar-bg: var(--brand-black);

package/styles/brand-gold.css

@@ -406,11 +406,12 @@
  * literals at the component layer.
  */
 :root {
-  /* On-brand memory-type cues: gold (focal) + blue (info) + neutral grays.
-     No decorative indigo/purple/green/amber; the per-type icon carries the rest
-     of the distinction. */
-  --memory-type-messages-bg: rgba(29, 145, 232, 0.14);
-  --memory-type-messages-fg: rgb(29, 145, 232);
+  /* On-brand memory-type cues: gold (focal) + neutral slate/stone grays.
+     No decorative blue/indigo/purple/green/amber; the per-type icon carries the
+     rest of the distinction. Messages use a darker slate so they read distinct
+     from facts (slate-500) without grabbing the gold primary accent. */
+  --memory-type-messages-bg: rgba(71, 85, 105, 0.14);
+  --memory-type-messages-fg: rgb(71, 85, 105);
   --memory-type-memories-bg: rgba(240, 185, 11, 0.16);
   --memory-type-memories-fg: rgb(240, 185, 11);
   --memory-type-facts-bg: rgba(100, 116, 139, 0.14);

package/testing/layout-stability.d.ts

@@ -5,7 +5,8 @@
  *  1. Layout shift — content jumps/reflows after paint (the ranked widget list
  *     reordering, a card popping in and pushing others down). Quantified the
  *     same way Chrome computes CLS: the sum of `layout-shift` PerformanceEntry
- *     values that were NOT caused by recent user input.
+ *     values that were NOT caused by recent user input or an explicitly marked
+ *     transient motion surface.
  *  2. Opacity flash — an element fades out and back (or in then out), e.g. an
  *     animation that re-triggers on re-render. Detected from a time series of
  *     sampled opacity.
@@ -21,10 +22,17 @@ export interface LayoutShiftSample {
     value: number;
     /** True if a user interaction happened just before — excluded from CLS. */
     hadRecentInput: boolean;
+    /**
+     * True when every attributed source belongs to an explicitly marked transient
+     * motion surface. These are controlled overlay/sheet animations rather than
+     * page reflow.
+     */
+    intentional?: boolean;
 }
 /**
  * Cumulative Layout Shift: the sum of shift values not attributable to recent
- * user input (matching the Web Vitals CLS definition). 0 = perfectly stable.
+ * user input or an explicitly marked transient motion surface. 0 = perfectly
+ * stable.
  */
 export declare function cumulativeLayoutShift(samples: readonly LayoutShiftSample[]): number;
 /** A timestamped opacity reading of one element. */
@@ -63,5 +71,5 @@ export declare function summarizeStability(shifts: readonly LayoutShiftSample[],
  * array and feeds {@link summarizeStability}. Kept here so the contract lives
  * next to the math it feeds.
  */
-export declare const LAYOUT_SHIFT_OBSERVER_INIT = "\n(() => {\n  const w = window;\n  if (w.__ELIZA_LAYOUT_SHIFTS__) return;\n  w.__ELIZA_LAYOUT_SHIFTS__ = [];\n  try {\n    const obs = new PerformanceObserver((list) => {\n      for (const entry of list.getEntries()) {\n        w.__ELIZA_LAYOUT_SHIFTS__.push({\n          value: entry.value,\n          hadRecentInput: entry.hadRecentInput === true,\n        });\n      }\n    });\n    obs.observe({ type: 'layout-shift', buffered: true });\n  } catch {\n    /* layout-shift unsupported \u2014 caller treats absence as 0 CLS */\n  }\n})();\n";
+export declare const LAYOUT_SHIFT_OBSERVER_INIT = "\n(() => {\n  const w = window;\n  if (w.__ELIZA_LAYOUT_SHIFTS__) return;\n  w.__ELIZA_LAYOUT_SHIFTS__ = [];\n  try {\n    const obs = new PerformanceObserver((list) => {\n      for (const entry of list.getEntries()) {\n        w.__ELIZA_LAYOUT_SHIFTS__.push({\n          value: entry.value,\n          hadRecentInput: entry.hadRecentInput === true,\n          intentional: (() => {\n            const sources = Array.isArray(entry.sources) ? entry.sources : [];\n            let sawIntentional = false;\n            for (const source of sources) {\n              const node = source?.node;\n              const element =\n                node instanceof Element ? node : (node?.parentElement ?? null);\n              if (!element) continue;\n              if (\n                element.closest(\n                  '[data-eliza-layout-shift-intent=\"transient\"]',\n                )\n              ) {\n                sawIntentional = true;\n                continue;\n              }\n              return false;\n            }\n            return sawIntentional;\n          })(),\n        });\n      }\n    });\n    obs.observe({ type: 'layout-shift', buffered: true });\n  } catch {\n    /* layout-shift unsupported \u2014 caller treats absence as 0 CLS */\n  }\n})();\n";
 //# sourceMappingURL=layout-stability.d.ts.map

package/testing/layout-stability.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-stability.d.ts","sourceRoot":"","sources":["../../../../../src/testing/layout-stability.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,SAAS,iBAAiB,EAAE,GACpC,MAAM,CAQR;AAED,oDAAoD;AACpD,MAAM,WAAW,aAAa;IAC5B,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,SAAS,aAAa,EAAE,EACjC,QAAQ,SAAM,GACb,OAAO,CA2BT;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,SAAS,iBAAiB,EAAE,EACpC,OAAO,EAAE,SAAS,aAAa,EAAE,EACjC,MAAM,EAAE,eAAe,GACtB,gBAAgB,CAYlB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,kiBAmBtC,CAAC"}
+{"version":3,"file":"layout-stability.d.ts","sourceRoot":"","sources":["../../../../../src/testing/layout-stability.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,cAAc,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,SAAS,iBAAiB,EAAE,GACpC,MAAM,CAaR;AAED,oDAAoD;AACpD,MAAM,WAAW,aAAa;IAC5B,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,SAAS,aAAa,EAAE,EACjC,QAAQ,SAAM,GACb,OAAO,CA2BT;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,SAAS,iBAAiB,EAAE,EACpC,OAAO,EAAE,SAAS,aAAa,EAAE,EACjC,MAAM,EAAE,eAAe,GACtB,gBAAgB,CAYlB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,gwCAuCtC,CAAC"}

package/testing/layout-stability.js

@@ -5,7 +5,8 @@
  *  1. Layout shift — content jumps/reflows after paint (the ranked widget list
  *     reordering, a card popping in and pushing others down). Quantified the
  *     same way Chrome computes CLS: the sum of `layout-shift` PerformanceEntry
- *     values that were NOT caused by recent user input.
+ *     values that were NOT caused by recent user input or an explicitly marked
+ *     transient motion surface.
  *  2. Opacity flash — an element fades out and back (or in then out), e.g. an
  *     animation that re-triggers on re-render. Detected from a time series of
  *     sampled opacity.
@@ -17,12 +18,16 @@
  */
 /**
  * Cumulative Layout Shift: the sum of shift values not attributable to recent
- * user input (matching the Web Vitals CLS definition). 0 = perfectly stable.
+ * user input or an explicitly marked transient motion surface. 0 = perfectly
+ * stable.
  */
 export function cumulativeLayoutShift(samples) {
     let cls = 0;
     for (const s of samples) {
-        if (!s.hadRecentInput && Number.isFinite(s.value) && s.value > 0) {
+        if (!s.hadRecentInput &&
+            !s.intentional &&
+            Number.isFinite(s.value) &&
+            s.value > 0) {
             cls += s.value;
         }
     }
@@ -68,7 +73,7 @@ export function detectOpacityFlash(samples, minDelta = 0.2) {
 /** Combine shift + opacity samples into a single pass/flag verdict. */
 export function summarizeStability(shifts, opacity, budget) {
     const cls = cumulativeLayoutShift(shifts);
-    const shiftCount = shifts.filter((s) => !s.hadRecentInput && s.value > 0).length;
+    const shiftCount = shifts.filter((s) => !s.hadRecentInput && !s.intentional && s.value > 0).length;
     const flashed = detectOpacityFlash(opacity, budget.flashMinDelta ?? 0.2);
     return {
         cls,
@@ -95,6 +100,26 @@ export const LAYOUT_SHIFT_OBSERVER_INIT = `
         w.__ELIZA_LAYOUT_SHIFTS__.push({
           value: entry.value,
           hadRecentInput: entry.hadRecentInput === true,
+          intentional: (() => {
+            const sources = Array.isArray(entry.sources) ? entry.sources : [];
+            let sawIntentional = false;
+            for (const source of sources) {
+              const node = source?.node;
+              const element =
+                node instanceof Element ? node : (node?.parentElement ?? null);
+              if (!element) continue;
+              if (
+                element.closest(
+                  '[data-eliza-layout-shift-intent="transient"]',
+                )
+              ) {
+                sawIntentional = true;
+                continue;
+              }
+              return false;
+            }
+            return sawIntentional;
+          })(),
         });
       }
     });

package/testing/run-animation-frames-immediately.d.ts

@@ -0,0 +1,2 @@
+export declare function runAnimationFramesImmediately(): void;
+//# sourceMappingURL=run-animation-frames-immediately.d.ts.map

package/testing/run-animation-frames-immediately.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run-animation-frames-immediately.d.ts","sourceRoot":"","sources":["../../../../../src/testing/run-animation-frames-immediately.ts"],"names":[],"mappings":"AAEA,wBAAgB,6BAA6B,IAAI,IAAI,CAMpD"}

package/testing/run-animation-frames-immediately.js

@@ -0,0 +1,8 @@
+import { vi } from "vitest";
+export function runAnimationFramesImmediately() {
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
+        callback(performance.now());
+        return 1;
+    });
+    vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => { });
+}