@oxy.so/bloom 7.0.1 → 7.1.0

package/src/project-board/ProjectBoardBase.tsx

@@ -12,16 +12,18 @@ import {
   ScrollView,
   useWindowDimensions,
   type View,
+  type ViewStyle,
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
-  FadeIn,
-  FadeOut,
-  LinearTransition,
+  cancelAnimation,
+  Easing,
   runOnJS,
   useAnimatedStyle,
   useReducedMotion,
   useSharedValue,
+  withTiming,
+  type AnimatedStyle,
 } from 'react-native-reanimated';
 import { Avatar } from '../avatar';
 import { Breadcrumb, BreadcrumbItem } from '../breadcrumb';
@@ -48,6 +50,7 @@ import {
   SourceView,
 } from './SourcePrimitives';
 import { TicketDetailDialog } from './TicketDetailDialog';
+import { TicketPresenceList } from './TicketPresence';
 import { cx, PRIORITY_STYLES } from './constants';
 import { useProjectBoardPlatform } from './context';
 import { PROJECT_BOARD_MESSAGES } from './messages';
@@ -260,18 +263,34 @@ export function ProjectBoardBase({
   const boardRect = useRef<BoardRect | null>(null);
   const boardNode = useRef<View>(null);
   const [activeTicket, setActiveTicket] = useState<ProjectTicket | null>(null);
+  const [droppingId, setDroppingId] = useState<string | null>(null);
   const activeId = useRef<string | null>(null);
   const [over, setOver] = useState<{ columnId: string; index: number } | null>(
     null,
   );
   const targetRef = useRef<typeof over>(null);
   const beforeKeyboard = useRef<ProjectColumn[] | null>(null);
+  const beforePointer = useRef<ProjectColumn[] | null>(null);
   const keyboardActive = useRef(false);
   const lastDragEnd = useRef(0);
   const draggedWidth = useSharedValue(261);
   const dragX = useSharedValue(0);
   const dragY = useSharedValue(0);
   const fingerOffset = useRef({ x: 0, y: 0 });
+  const dropFrame = useRef(0);
+  const dropGeneration = useRef(0);
+  useEffect(() => () => {
+    dropGeneration.current++;
+    if (dropFrame.current) cancelAnimationFrame(dropFrame.current);
+    cancelAnimation(dragX);
+    cancelAnimation(dragY);
+    cancelAnimation(draggedWidth);
+  }, [dragX, dragY, draggedWidth]);
+  const finishDrop = useCallback((generation?: number) => {
+    if (generation !== undefined && generation !== dropGeneration.current) return;
+    setActiveTicket(null);
+    setDroppingId(null);
+  }, []);
   const overlayStyle = useAnimatedStyle(
     () => ({
       position: 'absolute',
@@ -341,6 +360,13 @@ export function ProjectBoardBase({
       measure();
       const rect = ticketRects.current[id];
       activeId.current = id;
+      beforePointer.current = cloneColumns(columnsRef.current);
+      dropGeneration.current++;
+      cancelAnimation(dragX);
+      cancelAnimation(dragY);
+      cancelAnimation(draggedWidth);
+      if (dropFrame.current) cancelAnimationFrame(dropFrame.current);
+      setDroppingId(null);
       fingerOffset.current = {
         x: rect ? x - rect.x : 0,
         y: rect ? y - rect.y : 0,
@@ -373,6 +399,15 @@ export function ProjectBoardBase({
         targetRef.current = next;
         setOver(next);
       }
+      if (next) {
+        const current = columnsRef.current;
+        const source = current.find((column) => column.tickets.some((ticket) => ticket.id === activeId.current));
+        if (source && source.id !== next.columnId) {
+          const preview = moveTicket(current, activeId.current, next.columnId, next.index);
+          columnsRef.current = preview;
+          setColumns(preview);
+        }
+      }
       const board = boardRect.current;
       if (board && (x < board.x + 32 || x > board.x + board.width - 32)) {
         scrollX.current = Math.max(
@@ -419,14 +454,45 @@ export function ProjectBoardBase({
         AccessibilityInfo.announceForAccessibility?.(
           `${activeTicket?.code ?? ''}, ${columnsRef.current.find((column) => column.id === target.columnId)?.title ?? target.columnId}`,
         );
+      } else if (beforePointer.current) {
+        columnsRef.current = beforePointer.current;
+        setColumns(beforePointer.current);
       }
+      beforePointer.current = null;
       activeId.current = null;
       targetRef.current = null;
       lastDragEnd.current = Date.now();
-      setActiveTicket(null);
       setOver(null);
+      if (reducedMotion) {
+        finishDrop();
+        return;
+      }
+      setDroppingId(id);
+      const generation = ++dropGeneration.current;
+      // React first mounts the destination ticket; its window rect is the
+      // landing position even after a column reorder or a scaled preview.
+      dropFrame.current = requestAnimationFrame(() => {
+        const node = ticketNodes.current[id];
+        if (!node) {
+          finishDrop(generation);
+          return;
+        }
+        node.measureInWindow((x, y, width) => {
+          if (generation !== dropGeneration.current) return;
+          if (![x, y, width].every(Number.isFinite) || width <= 0) {
+            finishDrop(generation);
+            return;
+          }
+          const config = { duration: 320, easing: Easing.bezier(0.22, 1, 0.36, 1) };
+          dragX.value = withTiming(x, config);
+          draggedWidth.value = withTiming(width, config);
+          dragY.value = withTiming(y, config, (finished) => {
+            if (finished) runOnJS(finishDrop)(generation);
+          });
+        });
+      });
     },
-    [visibleColumns, activeTicket, commit],
+    [visibleColumns, activeTicket, commit, reducedMotion, finishDrop, dragX, dragY, draggedWidth],
   );
   function keyboardMove(id: string, key: string) {
     const current = columnsRef.current;
@@ -792,8 +858,6 @@ export function ProjectBoardBase({
                   contentContainerStyle={{
                     paddingHorizontal: 6,
                     paddingTop: 8,
-                    paddingBottom: 6,
-                    gap: 6,
                   }}
                   accessibilityLabel={column.title}
                   onScroll={(event) => {
@@ -803,18 +867,23 @@ export function ProjectBoardBase({
                   }}
                   scrollEventThrottle={16}
                 >
-                  {column.tickets.map((ticket, index) => (
+                  <TicketPresenceList tickets={column.tickets} retainId={beforePointer.current ? activeTicket?.id : undefined}>
+                    {({ ticket, present }, paintStyle, onHeight) => present || (activeTicket?.id === ticket.id && beforePointer.current !== null) ? (
                     <DraggableTicket
                       key={ticket.id}
                       nativeID={`${boardId}-${ticket.id}`}
                       ticket={ticket}
+                      interactive={present}
                       members={members}
                       dragging={activeTicket?.id === ticket.id}
+                      landing={droppingId === ticket.id}
+                      paintStyle={paintStyle}
+                      onHeight={onHeight}
                       target={
-                        over?.columnId === column.id && over.index === index
+                        over?.columnId === column.id && over.index === column.tickets.findIndex((item) => item.id === ticket.id)
                       }
                       register={(node) => {
-                        ticketNodes.current[ticket.id] = node;
+                        if (present) ticketNodes.current[ticket.id] = node;
                       }}
                       onLayout={measure}
                       onOpen={() => openDetail(ticket.id)}
@@ -851,7 +920,16 @@ export function ProjectBoardBase({
                         }
                       }}
                     />
-                  ))}
+                    ) : (
+                      <SourceView onLayout={(event) => onHeight(event.nativeEvent.layout.height)}>
+                        <AnimatedView style={paintStyle}>
+                          <SourceView className="pointer-events-none opacity-20">
+                            <TicketCard overlay ticket={ticket} members={members} />
+                          </SourceView>
+                        </AnimatedView>
+                      </SourceView>
+                    )}
+                  </TicketPresenceList>
                   {over?.columnId === column.id &&
                     over.index >= column.tickets.length && (
                       <StyledView
@@ -868,7 +946,14 @@ export function ProjectBoardBase({
       {activeTicket && (
         <Portal>
           <OverlayRoot>
-            <AnimatedView pointerEvents="none" style={overlayStyle}>
+            <AnimatedView
+              testID="project-board-drag-overlay"
+              pointerEvents="none"
+              aria-hidden
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              style={overlayStyle}
+            >
               <TicketCard overlay ticket={activeTicket} members={members} />
             </AnimatedView>
           </OverlayRoot>
@@ -915,8 +1000,12 @@ export function ProjectBoardBase({
 function DraggableTicket({
   nativeID,
   ticket,
+  interactive,
   members,
   dragging,
+  landing,
+  paintStyle,
+  onHeight,
   target,
   register,
   onLayout,
@@ -928,8 +1017,12 @@ function DraggableTicket({
 }: {
   nativeID: string;
   ticket: ProjectTicket;
+  interactive: boolean;
   members: Readonly<Record<string, ProjectMember>>;
   dragging: boolean;
+  landing: boolean;
+  paintStyle: AnimatedStyle<ViewStyle>;
+  onHeight: (height: number) => void;
   target: boolean;
   register: (node: View | null) => void;
   onLayout: () => void;
@@ -940,7 +1033,6 @@ function DraggableTicket({
   onAccessibleMove: (direction: 'up' | 'down' | 'next' | 'previous') => void;
 }) {
   const { colors } = useTheme();
-  const reducedMotion = useReducedMotion();
   const { messages: m } = useMessages(PROJECT_BOARD_MESSAGES);
   const callbacks = useRef({ onStart, onUpdate, onEnd });
   callbacks.current = { onStart, onUpdate, onEnd };
@@ -976,21 +1068,21 @@ function DraggableTicket({
   return (
     <GestureDetector gesture={gesture}>
       <AnimatedView
-        entering={reducedMotion ? undefined : FadeIn.duration(320)}
-        exiting={reducedMotion ? undefined : FadeOut.duration(320)}
-        layout={reducedMotion ? undefined : LinearTransition.duration(260)}
         className="shrink-0 touch-manipulation rounded-xl outline-none focus-visible:ring-[2.5px] focus-visible:ring-border-button-hover"
         style={{
-          opacity: dragging ? 0.2 : 1,
+          opacity: landing ? 0 : dragging ? 0.2 : 1,
           borderTopWidth: target ? 3 : 0,
           borderTopColor: colors.primary,
         }}
       >
         <StyledPressable
-          nativeID={nativeID}
+          nativeID={interactive ? nativeID : undefined}
           ref={register}
-          onLayout={onLayout}
-          onPress={onOpen}
+          onLayout={(event) => {
+            onHeight(event.nativeEvent.layout.height);
+            onLayout();
+          }}
+          onPress={interactive ? onOpen : undefined}
           accessibilityRole="button"
           accessibilityLabel={m.openTicket(ticket.code, ticket.title)}
           aria-haspopup="dialog"
@@ -1014,7 +1106,9 @@ function DraggableTicket({
             );
           }}
         >
-          <TicketCard ticket={ticket} members={members} />
+          <AnimatedView style={paintStyle}>
+            <TicketCard ticket={ticket} members={members} />
+          </AnimatedView>
         </StyledPressable>
       </AnimatedView>
     </GestureDetector>

package/src/project-board/TicketCornerGenieSurface.web.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useRef, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { useReducedMotion } from 'react-native-reanimated';
 import { useDialogContext } from '../dialog/context';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { TicketGenieEnteredContext } from './context';
 const styles = {
-  'animate-chart-reveal': 'bloom-ticket-detail-animate-chart-reveal',
   band: 'bloom-ticket-detail-band',
   bands: 'bloom-ticket-detail-bands',
   genie: 'bloom-ticket-detail-genie',
@@ -12,7 +12,7 @@ const styles = {
   surface: 'bloom-ticket-detail-surface',
 };
 const CSS =
-  '/* React Aria keeps the panel mounted for the shared Genie timeline.\n * Its pixels bend into the bottom-right dock; the shell never slides. */\n.bloom-ticket-detail-panel[data-entering], .bloom-ticket-detail-panel[data-exiting] { animation: bloom-ticket-detail-detail-presence 560ms linear both; }\n.bloom-ticket-detail-panel[data-exiting] { pointer-events: none; }\n@keyframes bloom-ticket-detail-detail-presence {\n  from { opacity: 0.9999; }\n  to { opacity: 1; }\n}\n.bloom-ticket-detail-genie, .bloom-ticket-detail-surface { position: relative; height: 100%; min-height: 0; }\n.bloom-ticket-detail-genie { isolation: isolate; }\n/* Start the chart\'s own drawing animation only after the visual bands hand\n * back to the live panel, so it never flashes a completed copy first. */\n.bloom-ticket-detail-genie:not([data-entered="true"]) :global(.bloom-ticket-detail-animate-chart-reveal) {\n  animation: none;\n  clip-path: inset(0 100% 0 0);\n}\n/* Skip the barely visible lead-in while retaining the clean Genie handoff. */\n.bloom-ticket-detail-surface :global(.bloom-ticket-detail-animate-chart-reveal) { animation-delay: -150ms; }\n.bloom-ticket-detail-shadow {\n  position: absolute;\n  inset: 0;\n  border-radius: 24px;\n  pointer-events: none;\n  transform-origin: right bottom;\n  box-shadow: -10px 0 34px rgb(0 0 0 / 0.05), -10px 0 250px rgb(0 0 0 / 0.25);\n}\n.bloom-ticket-detail-bands { position: absolute; inset: 0; pointer-events: none; opacity: 0; }\n.bloom-ticket-detail-band {\n  position: absolute;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  contain: strict;\n  transform-origin: 0 0;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n@media (prefers-reduced-motion: reduce) {\n  .bloom-ticket-detail-panel[data-entering], .bloom-ticket-detail-panel[data-exiting] { animation: none; }\n}\n';
+  '/* React Aria keeps the panel mounted for the shared Genie timeline.\n * Its pixels bend into the bottom-right dock; the shell never slides. */\n.bloom-ticket-detail-panel[data-entering], .bloom-ticket-detail-panel[data-exiting] { animation: bloom-ticket-detail-detail-presence 560ms linear both; }\n.bloom-ticket-detail-panel[data-exiting] { pointer-events: none; }\n@keyframes bloom-ticket-detail-detail-presence {\n  from { opacity: 0.9999; }\n  to { opacity: 1; }\n}\n.bloom-ticket-detail-genie, .bloom-ticket-detail-surface { position: relative; height: 100%; min-height: 0; }\n.bloom-ticket-detail-genie { isolation: isolate; }\n/* Start the chart\'s own drawing animation only after the visual bands hand\n * back to the live panel, so it never flashes a completed copy first. */\n.bloom-ticket-detail-genie:not([data-entered="true"]) .bloom-ticket-detail-chart svg {\n  visibility: hidden;\n}\n.bloom-ticket-detail-shadow {\n  position: absolute;\n  inset: 0;\n  border-radius: 24px;\n  pointer-events: none;\n  transform-origin: right bottom;\n  box-shadow: -10px 0 34px rgb(0 0 0 / 0.05), -10px 0 250px rgb(0 0 0 / 0.25);\n}\n.bloom-ticket-detail-bands { position: absolute; inset: 0; pointer-events: none; opacity: 0; }\n.bloom-ticket-detail-band {\n  position: absolute;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  contain: strict;\n  transform-origin: 0 0;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n@media (prefers-reduced-motion: reduce) {\n  .bloom-ticket-detail-panel[data-entering], .bloom-ticket-detail-panel[data-exiting] { animation: none; }\n}\n';
 
 const DURATION = 480;
 const FRAMES = 32;
@@ -93,8 +93,8 @@ function rebaseIds(copy: HTMLElement, prefix: string) {
  * gradient fills differently in each perspective-transformed clipping band.
  * A shared bitmap keeps every band on the same paint, at device resolution. */
 async function snapshotCharts(source: HTMLDivElement, copy: HTMLDivElement) {
-  const charts = source.querySelectorAll<SVGSVGElement>('svg.recharts-surface');
-  const copies = copy.querySelectorAll<SVGSVGElement>('svg.recharts-surface');
+  const charts = source.querySelectorAll<SVGSVGElement>('.bloom-ticket-detail-chart svg');
+  const copies = copy.querySelectorAll<SVGSVGElement>('.bloom-ticket-detail-chart svg');
   await Promise.allSettled(
     Array.from(charts, async (chart, index) => {
       const { width, height } = chart.getBoundingClientRect();
@@ -206,6 +206,7 @@ export function TicketCornerGenieSurface({
   const shadowRef = useRef<HTMLDivElement>(null);
   const progressRef = useRef(1);
   const reducedMotion = useReducedMotion();
+  const [entered, setEntered] = useState(reducedMotion);
 
   useEffect(() => {
     const root = rootRef.current;
@@ -215,6 +216,7 @@ export function TicketCornerGenieSurface({
     if (!root || !surface || !bands || !shadow) return;
     if (reducedMotion) {
       root.dataset.entered = 'true';
+      setEntered(true);
       surface.style.opacity = '1';
       shadow.style.opacity = '1';
       bands.replaceChildren();
@@ -247,7 +249,7 @@ export function TicketCornerGenieSurface({
         // invisible plot adds SVG serialization, PNG encoding, and two decodes
         // to the cold opening path without contributing any visible pixels.
         template
-          .querySelectorAll('svg.recharts-surface')
+          .querySelectorAll('.bloom-ticket-detail-chart svg')
           .forEach((chart) => chart.remove());
       }
       if (cancelled) return;
@@ -346,6 +348,7 @@ export function TicketCornerGenieSurface({
           progressRef.current = to;
           if (!exiting) {
             root.dataset.entered = 'true';
+            setEntered(true);
             surface.style.opacity = '1';
             shadow.style.opacity = '1';
             shadow.style.transform = 'none';
@@ -381,6 +384,7 @@ export function TicketCornerGenieSurface({
   }, [exiting, reducedMotion]);
 
   return (
+    <TicketGenieEnteredContext.Provider value={entered}>
     <div ref={rootRef} className={styles.genie}>
       <div
         ref={shadowRef}
@@ -397,5 +401,6 @@ export function TicketCornerGenieSurface({
       </div>
       <div ref={bandsRef} aria-hidden inert className={styles.bands} />
     </div>
+    </TicketGenieEnteredContext.Provider>
   );
 }

package/src/project-board/TicketDetailDialog.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { Linking, Platform, ScrollView } from 'react-native';
-import { TokensChartCard } from '../chart-cards/TokensChartCard';
+import { Linking, Platform, ScrollView, useWindowDimensions } from 'react-native';
+import { TicketTokenChart } from './TicketTokenChart';
 import { useDialogControl } from '../dialog/context';
 import { useIsRtl } from '../hooks/use-is-rtl';
 import { useMessages } from '../locale/messages';
@@ -93,6 +93,7 @@ export function TicketDetailDialog({
   } = useProjectBoardPlatform();
   const control = useDialogControl();
   const rtl = useIsRtl();
+  const { width: viewportWidth } = useWindowDimensions();
   const [comment, setComment] = useState('');
   const [editingDescription, setEditingDescription] = useState(false);
   const [draft, setDraft] = useState(ticket.description ?? '');
@@ -175,7 +176,7 @@ export function TicketDetailDialog({
       containerStyle={{
         alignItems: 'flex-end',
         justifyContent: 'flex-start',
-        padding: 12,
+        padding: viewportWidth < 640 ? 8 : 12,
       }}
       panelStyle={{
         width: '100%',
@@ -605,7 +606,7 @@ export function TicketDetailDialog({
                       </View>
                     )}
                     {ticket.tokenUsage && (
-                      <TokensChartCard
+                      <TicketTokenChart
                         title={m.tokens}
                         {...ticket.tokenUsage}
                         plotHeight={190}

package/src/project-board/TicketGenieSurface.tsx

@@ -9,6 +9,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useDialogContext } from '../dialog/context';
 import { StyledView } from '../styles/styled-primitives';
+import { TicketGenieEnteredContext } from './context';
 const AnimatedView = Animated.createAnimatedComponent(StyledView);
 function phase(start: number, end: number, value: number) {
   'worklet';
@@ -26,6 +27,7 @@ export function TicketGenieSurface({
   const reduced = useReducedMotion();
   const progress = useSharedValue(reduced ? 0 : 1);
   const [height, setHeight] = useState(280);
+  const [entered, setEntered] = useState(reduced || !corner);
   const { height: viewportHeight } = useWindowDimensions();
   useEffect(() => {
     progress.value = withTiming(isClosing ? 1 : 0, {
@@ -33,6 +35,11 @@ export function TicketGenieSurface({
       easing: Easing.bezier(0.42, 0, 0.58, 1),
     });
   }, [isClosing, progress, reduced]);
+  useEffect(() => {
+    if (isClosing || !corner) return;
+    const timer = setTimeout(() => setEntered(true), reduced ? 0 : 480);
+    return () => clearTimeout(timer);
+  }, [isClosing, corner, reduced]);
   const style = useAnimatedStyle(() => {
     const p = reduced ? 0 : progress.value;
     const extension = 64 * phase(0, 0.42, p);
@@ -56,12 +63,14 @@ export function TicketGenieSurface({
     };
   }, [progress, reduced, corner, height, viewportHeight]);
   return (
+    <TicketGenieEnteredContext.Provider value={entered}>
     <AnimatedView
       onLayout={(event) => setHeight(event.nativeEvent.layout.height || 280)}
       style={[corner ? { flex: 1, minHeight: 0 } : {}, style]}
     >
       {children}
     </AnimatedView>
+    </TicketGenieEnteredContext.Provider>
   );
 }
 export function TicketCornerGenieSurface({

package/src/project-board/TicketGenieSurface.web.tsx

@@ -11,7 +11,7 @@ const styles = {
   surface: 'bloom-ticket-create-surface',
 };
 const CSS =
-  '.bloom-ticket-create-panel {\n  transform-origin: center bottom;\n}\n\n.bloom-ticket-create-genie {\n  position: relative;\n  isolation: isolate;\n}\n\n.bloom-ticket-create-surface {\n  position: relative;\n  transform-origin: center bottom;\n}\n\n/* Paint once on a sibling layer, then animate only transform/opacity. The\n * broad shadows no longer sample and re-blur the changing dialog pixels. */\n.bloom-ticket-create-shadow {\n  position: absolute;\n  inset: 0;\n  border-radius: 24px;\n  pointer-events: none;\n  transform-origin: center bottom;\n  box-shadow:\n    0 1px 1px rgb(0 0 0 / 0.04),\n    0 4px 4px rgb(0 0 0 / 0.02),\n    0 0 120px rgb(0 0 0 / 0.1),\n    0 0 48px rgb(0 0 0 / 0.2);\n}\n\n:global(.bloom-ticket-create-dark) .bloom-ticket-create-shadow {\n  box-shadow:\n    0 1px 1px rgb(0 0 0 / 0.14),\n    0 4px 4px rgb(0 0 0 / 0.1),\n    0 0 120px rgb(0 0 0 / 0.1),\n    0 0 48px rgb(0 0 0 / 0.2);\n}\n\n/* React Aria waits for this animation before unmounting. Geometry is driven\n * by one Motion timeline on the surface, so the panel itself never slides. */\n.bloom-ticket-create-panel[data-entering],\n.bloom-ticket-create-panel[data-exiting] {\n  animation: bloom-ticket-create-ticket-presence 480ms linear both;\n}\n\n.bloom-ticket-create-panel[data-exiting] {\n  pointer-events: none;\n}\n\n.bloom-ticket-create-panel[data-entering] .bloom-ticket-create-surface,\n.bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-surface,\n.bloom-ticket-create-panel[data-entering] .bloom-ticket-create-shadow,\n.bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-shadow {\n  will-change: transform, opacity;\n}\n\n@keyframes bloom-ticket-create-ticket-presence {\n  from { opacity: 0.9999; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bloom-ticket-create-panel[data-entering],\n  .bloom-ticket-create-panel[data-exiting] {\n    animation: none;\n  }\n\n  .bloom-ticket-create-panel[data-entering] .bloom-ticket-create-surface,\n  .bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-surface,\n  .bloom-ticket-create-panel[data-entering] .bloom-ticket-create-shadow,\n  .bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-shadow {\n    will-change: auto;\n  }\n}\n';
+  '.bloom-ticket-create-panel {\n  transform-origin: center bottom;\n}\n\n.bloom-ticket-create-genie {\n  position: relative;\n  isolation: isolate;\n}\n\n.bloom-ticket-create-surface {\n  position: relative;\n  transform-origin: center bottom;\n}\n\n/* Paint once on a sibling layer, then animate only transform/opacity. The\n * broad shadows no longer sample and re-blur the changing dialog pixels. */\n.bloom-ticket-create-shadow {\n  position: absolute;\n  inset: 0;\n  border-radius: 24px;\n  pointer-events: none;\n  transform-origin: center bottom;\n  box-shadow:\n    0 1px 1px rgb(0 0 0 / 0.04),\n    0 4px 4px rgb(0 0 0 / 0.02),\n    0 0 120px rgb(0 0 0 / 0.1),\n    0 0 48px rgb(0 0 0 / 0.2);\n}\n\n.dark .bloom-ticket-create-shadow {\n  box-shadow:\n    0 1px 1px rgb(0 0 0 / 0.14),\n    0 4px 4px rgb(0 0 0 / 0.1),\n    0 0 120px rgb(0 0 0 / 0.1),\n    0 0 48px rgb(0 0 0 / 0.2);\n}\n\n/* React Aria waits for this animation before unmounting. Geometry is driven\n * by one Motion timeline on the surface, so the panel itself never slides. */\n.bloom-ticket-create-panel[data-entering],\n.bloom-ticket-create-panel[data-exiting] {\n  animation: bloom-ticket-create-ticket-presence 480ms linear both;\n}\n\n.bloom-ticket-create-panel[data-exiting] {\n  pointer-events: none;\n}\n\n.bloom-ticket-create-panel[data-entering] .bloom-ticket-create-surface,\n.bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-surface,\n.bloom-ticket-create-panel[data-entering] .bloom-ticket-create-shadow,\n.bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-shadow {\n  will-change: transform, opacity;\n}\n\n@keyframes bloom-ticket-create-ticket-presence {\n  from { opacity: 0.9999; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bloom-ticket-create-panel[data-entering],\n  .bloom-ticket-create-panel[data-exiting] {\n    animation: none;\n  }\n\n  .bloom-ticket-create-panel[data-entering] .bloom-ticket-create-surface,\n  .bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-surface,\n  .bloom-ticket-create-panel[data-entering] .bloom-ticket-create-shadow,\n  .bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-shadow {\n    will-change: auto;\n  }\n}\n';
 
 // A smooth, steep center gradient creates a narrow neck with a displacement
 // no larger than the dialog width. Its cubic mask leaves the top broad while

package/src/project-board/TicketPresence.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Platform, type ViewStyle } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  LinearTransition,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+  type AnimatedStyle,
+} from 'react-native-reanimated';
+import { StyledView } from '../styles/styled-primitives';
+import type { ProjectTicket } from './types';
+
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+const DURATION = 320;
+const WEB = Platform.OS === 'web';
+
+export interface PresentTicket {
+  ticket: ProjectTicket;
+  present: boolean;
+  initial: boolean;
+}
+
+/** Removed tickets retain only their pixels; interactive nodes leave immediately. */
+export function reconcileTicketPresence(
+  previous: PresentTicket[],
+  tickets: ProjectTicket[],
+): PresentTicket[] {
+  const ids = new Set(tickets.map((ticket) => ticket.id));
+  const next = tickets.map((ticket) => ({
+    ticket,
+    present: true,
+    initial: previous.find((entry) => entry.ticket.id === ticket.id)?.initial ?? false,
+  }));
+  previous.forEach((entry, index) => {
+    if (!ids.has(entry.ticket.id))
+      next.splice(Math.min(index, next.length), 0, { ...entry, present: false });
+  });
+  return next;
+}
+
+export function TicketPresenceList({
+  tickets,
+  retainId,
+  children,
+}: {
+  tickets: ProjectTicket[];
+  retainId?: string | null;
+  children: (entry: PresentTicket, paintStyle: AnimatedStyle<ViewStyle>, onHeight: (height: number) => void) => ReactNode;
+}) {
+  const [state, setState] = useState(() => ({
+    tickets,
+    entries: tickets.map((ticket) => ({ ticket, present: true, initial: true })),
+  }));
+  if (state.tickets !== tickets) {
+    setState({ tickets, entries: reconcileTicketPresence(state.entries, tickets) });
+  }
+  return state.entries.map((entry) => (
+    <TicketPresence
+      key={entry.ticket.id}
+      present={entry.present}
+      initial={entry.initial}
+      retain={entry.ticket.id === retainId}
+      onExit={() => setState((current) => ({
+        ...current,
+        entries: current.entries.filter((item) => item.present || item.ticket.id !== entry.ticket.id),
+      }))}
+    >
+      {(paintStyle, onHeight) => children(entry, paintStyle, onHeight)}
+    </TicketPresence>
+  ));
+}
+
+/** A shared-value timeline avoids web layout-animation clones and frozen positions. */
+function TicketPresence({
+  present,
+  initial,
+  retain,
+  onExit,
+  children,
+}: {
+  present: boolean;
+  initial: boolean;
+  retain: boolean;
+  onExit: () => void;
+  children: (paintStyle: AnimatedStyle<ViewStyle>, onHeight: (height: number) => void) => ReactNode;
+}) {
+  const reduced = useReducedMotion();
+  const progress = useSharedValue(initial || reduced ? 1 : 0);
+  const height = useSharedValue(0);
+  const exit = useRef(onExit);
+  exit.current = onExit;
+  useEffect(() => {
+    progress.value = reduced ? Number(present) : withTiming(Number(present), {
+      duration: DURATION,
+      easing: Easing.bezier(0.22, 1, 0.36, 1),
+    });
+    return () => cancelAnimation(progress);
+  }, [present, reduced, progress]);
+  useEffect(() => {
+    if (present || retain) return;
+    const timer = setTimeout(() => exit.current(), reduced ? 0 : DURATION);
+    return () => clearTimeout(timer);
+  }, [present, reduced, retain]);
+  const slotStyle = useAnimatedStyle(() => {
+    const p = Math.min(1, Math.max(0, progress.value));
+    return {
+      height: height.value > 0 ? (height.value + 6) * p : undefined,
+      paddingBottom: 6 * p,
+    };
+  }, [height, progress]);
+  const paintStyle = useAnimatedStyle<ViewStyle>(() => {
+    const p = Math.min(1, Math.max(0, progress.value));
+    const blur = 6 * (1 - p);
+    return {
+      opacity: p,
+      transform: [{ scale: 0.7 + 0.3 * p }],
+      filter: WEB ? `blur(${blur}px)` : [{ blur }],
+    } satisfies ViewStyle;
+  }, [progress]);
+  return (
+    <AnimatedView
+      className="relative shrink-0 pb-1.5"
+      layout={reduced ? undefined : LinearTransition.duration(260)}
+      style={slotStyle}
+      pointerEvents={present ? 'auto' : 'none'}
+      aria-hidden={!present}
+      accessibilityElementsHidden={!present}
+      importantForAccessibility={present ? 'auto' : 'no-hide-descendants'}
+      {...(WEB && !present ? { inert: true } : {})}
+    >
+      {children(paintStyle, (value) => { height.value = value; })}
+    </AnimatedView>
+  );
+}

package/src/project-board/TicketTokenChart.tsx

@@ -0,0 +1,14 @@
+import { useContext, type ComponentProps } from 'react';
+import { TokensChartCard } from '../chart-cards/TokensChartCard';
+import { StyledView } from '../styles/styled-primitives';
+import { TicketGenieEnteredContext } from './context';
+
+/** Keep the card's geometry in the entrance copy, then restart its live plot clock. */
+export function TicketTokenChart(props: ComponentProps<typeof TokensChartCard>) {
+  const entered = useContext(TicketGenieEnteredContext);
+  return (
+    <StyledView className="bloom-ticket-detail-chart">
+      <TokensChartCard {...props} animate={entered} />
+    </StyledView>
+  );
+}

package/src/project-board/context.ts

@@ -36,6 +36,8 @@ export interface ProjectBoardPlatform {
 }
 export const ProjectBoardPlatformContext =
   createContext<ProjectBoardPlatform | null>(null);
+/** The plot starts its own reveal after the panel has reached its live pixels. */
+export const TicketGenieEnteredContext = createContext(true);
 export function useProjectBoardPlatform() {
   const platform = useContext(ProjectBoardPlatformContext);
   if (!platform)

package/src/search/Search.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Platform, type TextInput, View } from 'react-native';
 
 import { mergeRefs } from '../hooks/merge-refs';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useCommonMessages } from '../locale/common-messages';
 import { useMessages } from '../locale/messages';
 import { SEARCH_MESSAGES } from './messages';
@@ -25,6 +26,8 @@ type SearchProps = Omit<TextFieldInputProps, 'label'> & {
 export const Search = forwardRef<TextInput, SearchProps>(
   function Search({ value, label: labelProp, onClearText, onFocus, onPressIn, ...rest }, ref) {
     const theme = useTheme();
+    const direction = useDirectionProps();
+    const rtl = useIsRtl();
     const common = useCommonMessages();
     const { messages } = useMessages(SEARCH_MESSAGES);
     const label = labelProp ?? common.search;
@@ -66,7 +69,7 @@ export const Search = forwardRef<TextInput, SearchProps>(
     );
 
     return (
-      <View style={[a.w_full, a.relative]}>
+      <View {...direction} style={[a.w_full, a.relative]}>
         <TextField radius={borderRadius.full}>
           <TextFieldIcon icon={MagnifyingGlassIcon} />
           <TextFieldInput
@@ -81,7 +84,7 @@ export const Search = forwardRef<TextInput, SearchProps>(
             autoCorrect={false}
             autoComplete="off"
             autoCapitalize="none"
-            style={showClear ? { paddingRight: 24 } : undefined}
+            style={showClear ? (rtl ? { paddingLeft: 24 } : { paddingRight: 24 }) : undefined}
             {...rest}
             onPressIn={handlePressIn}
             onFocus={handleFocus}
@@ -94,10 +97,8 @@ export const Search = forwardRef<TextInput, SearchProps>(
               a.absolute,
               a.z_20,
               a.my_auto,
-              a.inset_0,
               a.justify_center,
-              a.pr_sm,
-              { left: 'auto' },
+              { top: 0, bottom: 0, insetInlineEnd: 0, paddingInlineEnd: 8 },
             ]}>
             {/* Neutral and transparent. `variant="ghost"` painted an accent
                 wash inside the field, which read as a state the field was not