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

package/components/shell/HomeSpringboardSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeSpringboardSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/HomeSpringboardSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAarE,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACzE,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,WAAW,EACX,WAAoB,EACpB,SAAS,GACV,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqMjD"}
+{"version":3,"file":"HomeSpringboardSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/HomeSpringboardSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACzE,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,WAAW,EACX,WAAoB,EACpB,SAAS,GACV,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyIjD"}

package/components/shell/HomeSpringboardSurface.js

@@ -1,11 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useHorizontalPager } from "../../hooks/useHorizontalPager.js";
 import { cn } from "../../lib/utils.js";
 import { goHome, goSpringboard, setShellSurfacePage, setSpringboardPage, useShellSurface, } from "../../state/shell-surface-store.js";
-/** Horizontal travel (px) needed to commit a rail flick (home ↔ springboard). */
-const RAIL_FLICK_THRESHOLD = 72;
-/** Horizontal travel must beat vertical by this ratio so a scroll never flips. */
-const RAIL_FLICK_ANGLE_RATIO = 1.25;
 /**
  * The home ↔ springboard rail. It owns NO local navigation state — `page` is
  * read from (and every transition is dispatched to) the single shell-surface
@@ -23,77 +20,35 @@ export function HomeSpringboardSurface({ home, springboard, initialPage = "home"
     React.useEffect(() => {
         setShellSurfacePage(initialPage);
     }, [initialPage]);
-    const homeFlick = React.useRef({
-        startX: 0,
-        startY: 0,
-        tracking: false,
-    });
-    const springboardFlick = React.useRef({
-        startX: 0,
-        startY: 0,
-        tracking: false,
-    });
     // A committed flick must swallow the click that the browser synthesizes from
     // the same press, so the flick doesn't also tap-launch the tile underneath.
-    const suppressHomeClickRef = React.useRef(false);
-    const suppressSpringboardClickRef = React.useRef(false);
-    // One flick detector, parameterized by the direction that commits: the home
-    // half commits a LEFT flick (open springboard); the springboard half commits a
-    // RIGHT flick (return home) — the back gesture the old surface lacked, and the
-    // one escape that works even while the springboard is in edit mode.
-    const makeFlickHandlers = (flick, suppress, direction, onCommit) => {
-        const committed = (dx, dy) => Math.abs(dx) > Math.abs(dy) * RAIL_FLICK_ANGLE_RATIO &&
-            (direction === "left"
-                ? dx < -RAIL_FLICK_THRESHOLD
-                : dx > RAIL_FLICK_THRESHOLD);
-        return {
-            onPointerDown: (event) => {
-                if (!event.isPrimary)
-                    return;
-                flick.current = {
-                    startX: event.clientX,
-                    startY: event.clientY,
-                    tracking: true,
-                };
-            },
-            onPointerUp: (event) => {
-                const state = flick.current;
-                if (!state.tracking)
-                    return;
-                state.tracking = false;
-                if (!committed(event.clientX - state.startX, event.clientY - state.startY)) {
-                    return;
-                }
-                suppress.current = true;
-                onCommit();
-                window.setTimeout(() => {
-                    suppress.current = false;
-                }, 0);
-            },
-            onPointerCancel: () => {
-                flick.current.tracking = false;
-            },
-            onClickCapture: (event) => {
-                if (!suppress.current)
-                    return;
-                suppress.current = false;
-                event.preventDefault();
-                event.stopPropagation();
-            },
-        };
-    };
-    const homeHandlers = makeFlickHandlers(homeFlick, suppressHomeClickRef, "left", goSpringboard);
-    const springboardHandlers = makeFlickHandlers(springboardFlick, suppressSpringboardClickRef, "right", () => {
-        // A right-flick returns home only from the FIRST springboard page (iOS
-        // back); on deeper pages the inner pager steps back one page instead, so
-        // the two gestures never both fire. While editing it is always the escape
-        // hatch out of jiggle mode (the inner pager is disabled then).
-        if (springboardPage === 0 || springboardEditing)
-            goHome();
+    const suppressClickRef = React.useRef(false);
+    const pager = useHorizontalPager({
+        page: page === "springboard" ? 1 : 0,
+        pageCount: 2,
+        // Let the inner Springboard own app-page swipes after page 1. On the first
+        // app page, or while editing, the parent owns the right-swipe home gesture.
+        enabled: page === "home" || springboardPage === 0 || springboardEditing,
+        onPageChange: (nextPage) => {
+            suppressClickRef.current = true;
+            window.setTimeout(() => {
+                suppressClickRef.current = false;
+            }, 0);
+            if (nextPage === 0) {
+                goHome();
+            }
+            else {
+                goSpringboard();
+            }
+        },
     });
-    const railStyle = React.useMemo(() => ({
-        transform: page === "springboard" ? "translate3d(-50%,0,0)" : "translate3d(0,0,0)",
-    }), [page]);
+    const suppressCommittedSwipeClick = React.useCallback((event) => {
+        if (!suppressClickRef.current)
+            return;
+        suppressClickRef.current = false;
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
     // ONE indicator for the whole launcher: a home dot followed by one dot per
     // springboard page. Active index is derived from the store, so the doubled
     // (stacked) dot strips are gone — there is exactly one. Tapping a dot is a
@@ -108,21 +63,21 @@ export function HomeSpringboardSurface({ home, springboard, initialPage = "home"
         goSpringboard();
         setSpringboardPage(index - 1);
     }, []);
-    return (_jsxs("section", { "data-testid": "home-springboard-surface", "data-page": page, 
+    return (_jsxs("section", { ref: pager.viewportRef, "data-testid": "home-springboard-surface", "data-page": page, 
         // `select-none`: this is a swipeable launcher (home ↔ springboard), so a
         // horizontal drag must pan the rail, never text-select the tile labels /
         // widget text underneath. (Vertical scroll of the home widget list is
         // untouched.)
-        className: cn("absolute inset-0 z-[1] select-none overflow-hidden", className), children: [_jsxs("div", { "data-testid": "home-springboard-rail", className: cn("absolute inset-0 flex w-[200%]", "transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"), style: railStyle, children: [_jsx("div", { "data-testid": "home-springboard-home-page", "aria-hidden": page !== "home", 
+        className: cn("absolute inset-0 z-[1] select-none overflow-hidden", className), children: [_jsxs("div", { ref: pager.railRef, "data-testid": "home-springboard-rail", className: "absolute inset-0 flex w-[200%] motion-reduce:transition-none", children: [_jsx("div", { "data-testid": "home-springboard-home-page", "aria-hidden": page !== "home", 
                         // `touch-pan-y`: reserve vertical panning for the browser (the home
                         // widget list scrolls) but claim every horizontal gesture for the
                         // rail flick. Without it a touch device hands a horizontal drag to the
                         // browser's own scroll/back gesture, which fires `pointercancel`
                         // instead of `pointerup` — the flick silently never commits.
-                        className: "relative h-full w-1/2 shrink-0 touch-pan-y", onPointerDown: homeHandlers.onPointerDown, onPointerUp: homeHandlers.onPointerUp, onPointerCancel: homeHandlers.onPointerCancel, onClickCapture: homeHandlers.onClickCapture, children: home }), _jsx("div", { "data-testid": "home-springboard-springboard-page", "aria-hidden": page !== "springboard", 
+                        className: "relative h-full w-1/2 shrink-0 touch-pan-y", onPointerDown: pager.handlers.onPointerDown, onPointerMove: pager.handlers.onPointerMove, onPointerUp: pager.handlers.onPointerUp, onPointerCancel: pager.handlers.onPointerCancel, onLostPointerCapture: pager.handlers.onLostPointerCapture, onClickCapture: suppressCommittedSwipeClick, children: home }), _jsx("div", { "data-testid": "home-springboard-springboard-page", "aria-hidden": page !== "springboard", 
                         // Same as the home half: vertical scroll (the tile grid) stays with
                         // the browser, horizontal flicks (right → back home) are ours.
-                        className: "relative h-full w-1/2 shrink-0 touch-pan-y", onPointerDown: springboardHandlers.onPointerDown, onPointerUp: springboardHandlers.onPointerUp, onPointerCancel: springboardHandlers.onPointerCancel, onClickCapture: springboardHandlers.onClickCapture, children: React.cloneElement(springboard, {
+                        className: "relative h-full w-1/2 shrink-0 touch-pan-y", onPointerDown: pager.handlers.onPointerDown, onPointerMove: pager.handlers.onPointerMove, onPointerUp: pager.handlers.onPointerUp, onPointerCancel: pager.handlers.onPointerCancel, onLostPointerCapture: pager.handlers.onLostPointerCapture, onClickCapture: suppressCommittedSwipeClick, children: React.cloneElement(springboard, {
                             onNavigateHomeFromEdge: goHome,
                         }) })] }), _jsx("div", { "data-testid": "home-springboard-indicator", 
                 // Sit ABOVE the floating chat composer (its clearance), with a gap, so

package/components/shell/use-pull-gesture.d.ts

@@ -23,6 +23,8 @@ export interface PullGestureOptions {
     onPullDown?: () => void;
     /** Live vertical drag offset while pressed, in px. Positive = dragging up. */
     onDrag?: (offset: number) => void;
+    /** Reset/cancel live vertical drag visuals without marking a new drag active. */
+    onDragReset?: () => void;
     /** Released after a horizontal swipe LEFT past threshold. */
     onSwipeLeft?: () => void;
     /** Released after a horizontal swipe RIGHT past threshold. */
@@ -37,6 +39,10 @@ export interface PullGestureOptions {
      * (the consumer keeps the live offset) instead of snapping back.
      */
     onSettleFree?: (direction: "up" | "down") => void;
+    /** Gesture was interrupted by pointercancel/lost capture. */
+    onCancel?: () => void;
+    /** Enable horizontal swipe recognition. Defaults to true when swipe handlers exist. */
+    swipeEnabled?: boolean;
     /** Minimum vertical travel (px) to count as a pull. Default 56. */
     distanceThreshold?: number;
     /** Minimum vertical speed (px/ms) to count as a flick. Default 0.5. */

package/components/shell/use-pull-gesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pull-gesture.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/use-pull-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kFAAkF;IAClF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAOD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACrD;;sFAEkF;IAClF,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;CAC3D;AAED,2EAA2E;AAC3E,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EACzB,iBAAiB,EAAE,MAAM,GACxB,IAAI,GAAG,MAAM,GAAG,IAAI,CAMtB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,EACf,kBAAkB,EAAE,MAAM,EAC1B,kBAAkB,EAAE,MAAM,GACzB,MAAM,GAAG,OAAO,GAAG,IAAI,CAQzB;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,kBAAkB,GAC1B,kBAAkB,CAiNpB"}
+{"version":3,"file":"use-pull-gesture.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/use-pull-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kFAAkF;IAClF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uFAAuF;IACvF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAOD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACrD;;sFAEkF;IAClF,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;CAC3D;AAID,2EAA2E;AAC3E,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EACzB,iBAAiB,EAAE,MAAM,GACxB,IAAI,GAAG,MAAM,GAAG,IAAI,CAMtB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,EACf,kBAAkB,EAAE,MAAM,EAC1B,kBAAkB,EAAE,MAAM,GACzB,MAAM,GAAG,OAAO,GAAG,IAAI,CAQzB;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,kBAAkB,GAC1B,kBAAkB,CAoQpB"}

package/components/shell/use-pull-gesture.js

@@ -28,8 +28,9 @@ export function resolveSwipe(deltaLeft, velocityLeft, deltaUp, distanceThreshold
     return deltaLeft > 0 ? "left" : "right";
 }
 export function usePullGesture(options) {
-    const { onPullUp, onPullDown, onDrag, onSwipeLeft, onSwipeRight, onDragX, onTap, onSettleFree, distanceThreshold = 56, velocityThreshold = 0.5, distanceThresholdX = 64, velocityThresholdX = 0.4, } = options;
-    const hasSwipe = Boolean(onSwipeLeft || onSwipeRight || onDragX);
+    const { onPullUp, onPullDown, onDrag, onDragReset, onSwipeLeft, onSwipeRight, onDragX, onTap, onSettleFree, onCancel, swipeEnabled = true, distanceThreshold = 56, velocityThreshold = 0.5, distanceThresholdX = 64, velocityThresholdX = 0.4, } = options;
+    const hasSwipe = swipeEnabled && Boolean(onSwipeLeft || onSwipeRight || onDragX);
+    const hasVerticalPull = Boolean(onDrag || onPullUp || onPullDown || onSettleFree);
     const start = React.useRef(null);
     // Which axis the gesture committed to, once it crossed AXIS_COMMIT_SLOP.
     const axis = React.useRef(null);
@@ -70,17 +71,27 @@ export function usePullGesture(options) {
         dragRaf.current = 0;
         pendingDrag.current = null;
     }, []);
+    const flushPendingDrag = React.useCallback(() => {
+        if (dragRaf.current !== 0 && typeof cancelAnimationFrame === "function") {
+            cancelAnimationFrame(dragRaf.current);
+        }
+        flushDrag();
+    }, [flushDrag]);
     const onPointerDown = React.useCallback((event) => {
+        if (start.current && start.current.pointerId !== event.pointerId)
+            return;
         start.current = {
             x: event.clientX,
             y: event.clientY,
             t: performance.now(),
+            pointerId: event.pointerId,
         };
         axis.current = null;
-        // When horizontal swipes are possible we DEFER capture until the gesture
-        // commits to an axis, so a vertical scroll inside the panel still scrolls
-        // natively. Pure-vertical consumers (the drag handle) capture immediately.
-        if (!hasSwipe) {
+        // Pure horizontal swipe surfaces defer capture until axis commit so native
+        // vertical scrolling still works. A vertical pull handle captures
+        // immediately even when it also supports horizontal swipes; otherwise a
+        // mouse/finger can leave the small handle before the first committed move.
+        if (!hasSwipe || hasVerticalPull) {
             try {
                 event.currentTarget.setPointerCapture(event.pointerId);
             }
@@ -88,10 +99,10 @@ export function usePullGesture(options) {
                 // Detached node mid-gesture — capture is best-effort.
             }
         }
-    }, [hasSwipe]);
+    }, [hasSwipe, hasVerticalPull]);
     const onPointerMove = React.useCallback((event) => {
         const s = start.current;
-        if (!s)
+        if (!s || s.pointerId !== event.pointerId)
             return;
         const dy = s.y - event.clientY; // up positive
         const dx = s.x - event.clientX; // left positive
@@ -99,9 +110,9 @@ export function usePullGesture(options) {
             const ax = Math.abs(dx);
             const ay = Math.abs(dy);
             if (Math.max(ax, ay) >= AXIS_COMMIT_SLOP) {
-                axis.current = hasSwipe && ax > ay ? "x" : "y";
+                axis.current = ax > ay ? "x" : "y";
                 // Take over the pointer now that intent is clear (deferred-capture path).
-                if (hasSwipe) {
+                if (hasSwipe && !hasVerticalPull) {
                     try {
                         event.currentTarget.setPointerCapture(event.pointerId);
                     }
@@ -113,24 +124,41 @@ export function usePullGesture(options) {
                 // the visual. Drop any pending pre-commit frame first so it can't
                 // override the reset on the next tick.
                 cancelDrag();
-                if (axis.current === "x")
-                    onDrag?.(0);
-                else
+                if (axis.current === "x") {
+                    onDragReset?.();
+                    if (!hasSwipe) {
+                        try {
+                            event.currentTarget.releasePointerCapture?.(event.pointerId);
+                        }
+                        catch {
+                            // best-effort
+                        }
+                    }
+                }
+                else {
                     onDragX?.(0);
+                }
             }
         }
-        if (axis.current === "x")
-            scheduleDrag("x", dx);
-        else if (axis.current === "y")
+        if (axis.current === "x") {
+            if (hasSwipe)
+                scheduleDrag("x", dx);
+        }
+        else if (axis.current === "y") {
             scheduleDrag("y", dy);
-        else
+        }
+        else {
             scheduleDrag("y", dy); // pre-commit: drive the vertical sheet
-    }, [hasSwipe, onDrag, onDragX, scheduleDrag, cancelDrag]);
+        }
+    }, [hasSwipe, hasVerticalPull, onDragReset, onDragX, scheduleDrag, cancelDrag]);
     const finish = React.useCallback((event) => {
-        // Drop any pending coalesced drag frame so a stale value can't fire after
-        // the settle below and fight the snap.
-        cancelDrag();
         const s = start.current;
+        if (!s || s.pointerId !== event.pointerId)
+            return;
+        // Apply the latest coalesced drag before deciding the release. Consumers
+        // read that live value to choose the nearest detent, and the canceled rAF
+        // cannot replay stale motion after the settle below.
+        flushPendingDrag();
         const committedAxis = axis.current;
         start.current = null;
         axis.current = null;
@@ -147,7 +175,7 @@ export function usePullGesture(options) {
         const isFlickX = Math.abs(velocityLeft) >= velocityThresholdX;
         // A near-stationary release (both axes) is a tap, not a drag/swipe.
         if (movedX < TAP_SLOP && movedY < TAP_SLOP && !isFlickY && !isFlickX) {
-            onDrag?.(0);
+            onDragReset?.();
             onDragX?.(0);
             onTap?.();
             return;
@@ -181,11 +209,11 @@ export function usePullGesture(options) {
                 onPullDown?.();
         }
         else {
-            onDrag?.(0); // sub-threshold, no free-settle consumer → snap back
+            onDragReset?.(); // sub-threshold, no free-settle consumer → snap back
         }
     }, [
-        cancelDrag,
-        onDrag,
+        flushPendingDrag,
+        onDragReset,
         onDragX,
         onPullUp,
         onPullDown,
@@ -198,13 +226,24 @@ export function usePullGesture(options) {
         distanceThresholdX,
         velocityThresholdX,
     ]);
+    const cancel = React.useCallback((event) => {
+        const s = start.current;
+        if (!s || s.pointerId !== event.pointerId)
+            return;
+        cancelDrag();
+        start.current = null;
+        axis.current = null;
+        onDragReset?.();
+        onDragX?.(0);
+        onCancel?.();
+    }, [cancelDrag, onDragReset, onDragX, onCancel]);
     // Cancel any in-flight coalesced frame if the consumer unmounts mid-gesture.
     React.useEffect(() => cancelDrag, [cancelDrag]);
     return {
         onPointerDown,
         onPointerMove,
         onPointerUp: finish,
-        onPointerCancel: finish,
-        onLostPointerCapture: finish,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
     };
 }

package/components/shell/useShellController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useShellController.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/useShellController.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useShellController.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/useShellController.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,eAAe,EAChB,MAAM,6BAA6B,CAAC;AAKrC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AA+BxF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG9D;;;;mBAImB;AACnB,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,CAAC;IAClB;;;yEAGqE;IACrE,UAAU,EAAE,OAAO,CAAC;IACpB;;;;mEAI+D;IAC/D,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,mFAAmF;IACnF,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,YAAY,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;IAClD,iFAAiF;IACjF,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;oEACgE;IAChE,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,CACJ,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC;QAChC,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;QAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACpC,KACE,IAAI,CAAC;IACV,gFAAgF;IAChF,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;oFAEgF;IAChF,cAAc,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,iEAAiE;IACjE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,6EAA6E;IAC7E,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,iFAAiF;IACjF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB;uFACmF;IACnF,SAAS,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;qFAEiF;IACjF,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;+EAE2E;IAC3E,uBAAuB,EAAE,MAAM,IAAI,CAAC;IACpC;oEACgE;IAChE,uBAAuB,EAAE,MAAM,IAAI,CAAC;IACpC;yEACqE;IACrE,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE;;;gEAG4D;IAC5D,wBAAwB,EAAE,CACxB,IAAI,EACA,CAAC,CACC,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,UAAU,GAAG,IAAI,KACxB,IAAI,CAAC,GACV,IAAI,KACL,IAAI,CAAC;IACV;;;yEAGqE;IACrE,mBAAmB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,6DAA6D;IAC7D,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;iFAC6E;IAC7E,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,2EAA2E;IAC3E,eAAe,EAAE,eAAe,CAAC;IACjC;qEACiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,2EAA2E;AAC3E,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,OAAO,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,OAAO,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,SAAS,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,EACrE,oBAAoB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/C,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAC7B,eAAe,CAejB;AA0CD,wBAAgB,kBAAkB,IAAI,eAAe,CAm3BpD"}

package/components/shell/useShellController.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { VOICE_CONTROL_EVENT, } from "../../events/index.js";
-import { useChatTurnStatus, useConversationMessages } from "../../state/index.js";
+import { useChatComposer, useChatTurnStatus, useConversationMessages, } from "../../state/index.js";
 import { useAppSelectorShallow } from "../../state/app-store.js";
 import { loadContinuousChatMode, loadVadAutoStop, saveContinuousChatMode, } from "../../state/persistence.js";
 import { deriveAgentReady } from "../../state/types.js";
@@ -70,7 +70,6 @@ function sameStringList(a, b) {
 // below but not selected here is a compile error, so this stays value-equivalent.
 const selectShellController = (s) => ({
     tab: s.tab,
-    chatSending: s.chatSending,
     chatFirstTokenReceived: s.chatFirstTokenReceived,
     sendChatText: s.sendChatText,
     agentStatus: s.agentStatus,
@@ -84,10 +83,13 @@ const selectShellController = (s) => ({
     handleChatStop: s.handleChatStop,
 });
 export function useShellController() {
-    const { tab, chatSending, chatFirstTokenReceived, sendChatText, agentStatus, uiLanguage, elizaCloudVoiceProxyAvailable, handleNewConversation, handleSelectConversation, activeConversationId, conversations, setTab, handleChatStop, } = useAppSelectorShallow(selectShellController);
+    const { tab, chatFirstTokenReceived, sendChatText, agentStatus, uiLanguage, elizaCloudVoiceProxyAvailable, handleNewConversation, handleSelectConversation, activeConversationId, conversations, setTab, handleChatStop, } = useAppSelectorShallow(selectShellController);
     // Read per-token streaming messages from the isolated context so token updates
     // don't depend on the giant AppContext value identity.
     const { conversationMessages } = useConversationMessages();
+    // chatSending lives in ChatComposerContext; the AppContext copy is intentionally
+    // stale so send/typing churn does not fan out through the whole app.
+    const { chatSending } = useChatComposer();
     // Live server-reported phase of the in-flight turn (from the chat-send SSE),
     // read from its dedicated context so status events re-render only chat surfaces.
     const { serverTurnStatus } = useChatTurnStatus();
@@ -864,6 +866,14 @@ export function useShellController() {
         currentTab: tab,
         stop: stopTurn,
         conversationNav,
+        // Revealability is driven by the EXPLICIT, sequence-guarded loading flag
+        // (set by runWithConversationLoading on clear/select/new and cleared in its
+        // finally) — never by `messages.length === 0`. A bare message-count heuristic
+        // is a STEADY-STATE condition, not a transient one: it latches true forever
+        // for a genuinely-empty active conversation (greeting generation failed
+        // silently, or an existing zero-message conversation was selected), which
+        // pinned a perpetual loading spinner and let the grabber/pill open the sheet
+        // into a never-resolving loader.
         conversationLoading,
     };
 }

package/components/views/ViewTileImage.d.ts

@@ -1,15 +1,15 @@
 import type { ViewEntry } from "../../hooks/view-catalog.js";
 /**
- * The shared visual core for a launcher tile: render the view's hero
- * (`entry.imageUrl`, which the agent serves as a real image or a deterministic
- * branded SVG) and fall back to the Lucide glyph if the image is absent OR fails
- * to load — so a tile is never blank. This is the single hero-resolution path
- * used by both the Springboard tile and the catalog "Get" card; callers supply
- * only the container/glyph styling that genuinely differs between surfaces.
+ * The shared visual core for view launch surfaces.
+ *
+ * Springboard tiles are app icons: deterministic colored glyph tiles that stay
+ * readable at 64px and never look like cropped preview cards. Catalog cards are
+ * previews: render the concrete hero or generated branded fallback, then fall
+ * back to a glyph if every image source fails.
  *
  * A load failure emits a `hero-image-error` interaction event (best-effort,
- * client-only) so broken hero endpoints are observable instead of silently
- * swallowed by the glyph fallback.
+ * client-only) from preview surfaces so broken hero endpoints are observable
+ * instead of silently swallowed by the glyph fallback.
  */
 export declare function ViewTileImage({ entry, source, containerClassName, glyphClassName, imageTestId, }: {
     entry: ViewEntry;

package/components/views/ViewTileImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTileImage.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/ViewTileImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAqB1D;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,kBAAkB,EAClB,cAA0B,EAC1B,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,EAAE,aAAa,GAAG,cAAc,CAAC;IACvC,+EAA+E;IAC/E,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CA2CA"}
+{"version":3,"file":"ViewTileImage.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/ViewTileImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAyD1D;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,kBAAkB,EAClB,cAA0B,EAC1B,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,EAAE,aAAa,GAAG,cAAc,CAAC;IACvC,+EAA+E;IAC/E,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAwEA"}

package/components/views/ViewTileImage.js

@@ -1,8 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { cn } from "../../lib/utils.js";
 import { resolveApiUrl } from "../../utils/asset-url.js";
 import { emitViewInteraction } from "../../view-telemetry.js";
 import { ViewIcon } from "./ViewIcon.js";
+const SPRINGBOARD_ICON_PALETTES = [
+    { from: "#ff7a1a", to: "#f2c14e", foreground: "#fff7ed" },
+    { from: "#0f766e", to: "#5eead4", foreground: "#ecfeff" },
+    { from: "#1d4ed8", to: "#93c5fd", foreground: "#eff6ff" },
+    { from: "#7c2d12", to: "#fb923c", foreground: "#fff7ed" },
+    { from: "#334155", to: "#94a3b8", foreground: "#f8fafc" },
+    { from: "#be123c", to: "#fda4af", foreground: "#fff1f2" },
+    { from: "#166534", to: "#86efac", foreground: "#f0fdf4" },
+    { from: "#6d28d9", to: "#c4b5fd", foreground: "#f5f3ff" },
+];
+function hashText(value) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < value.length; i++) {
+        hash ^= value.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return hash >>> 0;
+}
+function springboardIconStyle(entry) {
+    const palette = SPRINGBOARD_ICON_PALETTES[hashText(`${entry.id}:${entry.label}`) % SPRINGBOARD_ICON_PALETTES.length];
+    return {
+        background: `linear-gradient(145deg, ${palette.from} 0%, ${palette.to} 100%)`,
+        color: palette.foreground,
+    };
+}
 /**
  * Resolve a tile hero URL into one reachable from the renderer. The hero source
  * is a root-relative API path (`/api/views/<id>/hero`) on built-in views, which
@@ -21,19 +47,22 @@ function resolveTileImageUrl(url) {
     return resolveApiUrl(url);
 }
 /**
- * The shared visual core for a launcher tile: render the view's hero
- * (`entry.imageUrl`, which the agent serves as a real image or a deterministic
- * branded SVG) and fall back to the Lucide glyph if the image is absent OR fails
- * to load — so a tile is never blank. This is the single hero-resolution path
- * used by both the Springboard tile and the catalog "Get" card; callers supply
- * only the container/glyph styling that genuinely differs between surfaces.
+ * The shared visual core for view launch surfaces.
+ *
+ * Springboard tiles are app icons: deterministic colored glyph tiles that stay
+ * readable at 64px and never look like cropped preview cards. Catalog cards are
+ * previews: render the concrete hero or generated branded fallback, then fall
+ * back to a glyph if every image source fails.
  *
  * A load failure emits a `hero-image-error` interaction event (best-effort,
- * client-only) so broken hero endpoints are observable instead of silently
- * swallowed by the glyph fallback.
+ * client-only) from preview surfaces so broken hero endpoints are observable
+ * instead of silently swallowed by the glyph fallback.
  */
 export function ViewTileImage({ entry, source, containerClassName, glyphClassName = "h-6 w-6", imageTestId, }) {
     const [failure, setFailure] = useState("none");
+    if (source === "springboard") {
+        return (_jsxs("div", { className: cn(containerClassName, "relative overflow-hidden"), "data-view-visual": entry.id, style: springboardIconStyle(entry), children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -right-4 -top-5 h-14 w-14 rounded-full bg-white/25" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 bg-[linear-gradient(160deg,rgba(255,255,255,0.36)_0%,rgba(255,255,255,0.08)_42%,rgba(0,0,0,0.2)_100%)]" }), _jsx(ViewIcon, { icon: entry.icon, label: entry.label, id: entry.id, className: cn(glyphClassName, "relative z-10 drop-shadow-[0_1px_3px_rgba(0,0,0,0.35)]") })] }));
+    }
     const primaryUrl = failure === "none" ? resolveTileImageUrl(entry.imageUrl) : undefined;
     const fallbackUrl = failure !== "all" ? resolveTileImageUrl(entry.fallbackImageUrl) : undefined;
     const url = primaryUrl ?? fallbackUrl;

package/hooks/useHorizontalPager.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface UseHorizontalPagerOptions {
+    page: number;
+    pageCount: number;
+    enabled?: boolean;
+    /**
+     * Allows a right swipe from page 0 to call `onEdgeSwipeRight`. Keep this off
+     * for nested pagers so the parent rail can own its back gesture.
+     */
+    edgeSwipeRightEnabled?: boolean;
+    onPageChange: (page: number) => void;
+    onEdgeSwipeRight?: () => void;
+}
+export interface HorizontalPagerBinding<TViewport extends HTMLElement = HTMLDivElement> {
+    viewportRef: React.RefObject<TViewport | null>;
+    railRef: React.RefObject<HTMLDivElement | null>;
+    handlers: {
+        onPointerDown: React.PointerEventHandler<HTMLDivElement>;
+        onPointerMove: React.PointerEventHandler<HTMLDivElement>;
+        onPointerUp: React.PointerEventHandler<HTMLDivElement>;
+        onPointerCancel: React.PointerEventHandler<HTMLDivElement>;
+        onLostPointerCapture: React.PointerEventHandler<HTMLDivElement>;
+    };
+}
+/**
+ * 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 declare function useHorizontalPager<TViewport extends HTMLElement = HTMLDivElement>({ page, pageCount, enabled, edgeSwipeRightEnabled, onPageChange, onEdgeSwipeRight, }: UseHorizontalPagerOptions): HorizontalPagerBinding<TViewport>;
+//# sourceMappingURL=useHorizontalPager.d.ts.map

package/hooks/useHorizontalPager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalPager.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useHorizontalPager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAsB,CACrC,SAAS,SAAS,WAAW,GAAG,cAAc;IAE9C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE;QACR,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACzD,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACzD,WAAW,EAAE,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACvD,eAAe,EAAE,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC;QAC3D,oBAAoB,EAAE,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC;KACjE,CAAC;CACH;AAkBD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,SAAS,WAAW,GAAG,cAAc,EAC9C,EACA,IAAI,EACJ,SAAS,EACT,OAAc,EACd,qBAA6B,EAC7B,YAAY,EACZ,gBAAgB,GACjB,EAAE,yBAAyB,GAAG,sBAAsB,CAAC,SAAS,CAAC,CAyP/D"}