@buoy-gg/redux 7.0.38 → 7.0.39

package/lib/module/redux/components/ReduxActionDetailContent.js

@@ -1 +1,433 @@
-"use strict";import{View,Text,StyleSheet,ScrollView}from"react-native";import{useState,useCallback,useMemo}from"react";import{macOSColors,night,EventStepperFooter,formatRelativeTime,parseValue,monoFont}from"@buoy-gg/shared-ui";import{DataViewer,SplitDiffViewer,TreeDiffViewer,diffThemes}from"@buoy-gg/shared-ui/dataViewer";import{ReduxDetailViewToggle}from"./ReduxDetailViewToggle";import{ReduxActionInfoView}from"./ReduxActionInfoView";import{DiffModeTabs,CompareBar}from"@buoy-gg/shared-ui";import{REDUX_TEST_ID}from"../utils/testIDs";import{isEvictedState,STATE_RETENTION_LIMIT}from"../utils/reduxActionStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function getActionColor(e){return e.includes("/pending")?macOSColors.semantic.warning:e.includes("/fulfilled")?macOSColors.semantic.success:e.includes("/rejected")?macOSColors.semantic.error:e.startsWith("@@")?macOSColors.text.muted:macOSColors.semantic.info}function getActionLabel(e){if(e.includes("/pending"))return"PENDING";if(e.includes("/fulfilled"))return"FULFILLED";if(e.includes("/rejected"))return"REJECTED";if(e.startsWith("@@"))return"INTERNAL";const t=e.split("/");return t[t.length-1]?.toUpperCase()||"ACTION"}function getValueType(e){return null===e?"null":void 0===e?"undefined":Array.isArray(e)?"array":typeof e}function formatTimestamp(e){return new Date(e).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}const DIFF_MODE_TABS=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}];export function ReduxActionDetailContent({action:e,actions:t,selectedIndex:i,onIndexChange:o,disableInternalFooter:a=!1,initialView:n="action"}){const[r,l]=useState(n),[s,d]=useState("tree"),c=t.length,m=isEvictedState(e.nextState),u=getActionColor(e.type),f=getActionLabel(e.type),x=getValueType(parseValue(e.nextState)),g=c-i,p=g-1,T=i<c-1?i+1:null,y=null!==T?t[T]:null,h=useMemo(()=>({index:T??0,label:p>0?`#${p}`:"Initial",timestamp:y?formatTimestamp(y.timestamp):"",relativeTime:y?formatRelativeTime(new Date(y.timestamp)):"state",badge:y?_jsx(View,{style:[styles.actionBadgeSmall,{backgroundColor:`${getActionColor(y.type)}20`}],children:_jsx(Text,{style:[styles.actionTextSmall,{color:getActionColor(y.type)}],children:getActionLabel(y.type)})}):void 0}),[T,y,p]),S=useMemo(()=>({index:i,label:`#${g}`,timestamp:formatTimestamp(e.timestamp),relativeTime:formatRelativeTime(new Date(e.timestamp)),badge:_jsx(View,{style:[styles.actionBadgeSmall,{backgroundColor:`${u}20`}],children:_jsx(Text,{style:[styles.actionTextSmall,{color:u}],children:f})})}),[i,e.timestamp,u,f,g]),b=useCallback(()=>{if(m)return _jsxs(View,{style:styles.contentCard,testID:`${REDUX_TEST_ID}-state-evicted`,children:[_jsx(View,{style:styles.valueHeader,children:_jsx(Text,{style:styles.valueLabel,children:"STATE AFTER ACTION"})}),_jsx(Text,{style:styles.evictedText,children:`Not retained. Raw state is kept for the ${STATE_RETENTION_LIMIT} most recent actions, so this action's before/after trees have been released.`})]});const t=parseValue(e.nextState);return _jsxs(View,{style:styles.contentCard,testID:`${REDUX_TEST_ID}-state-card`,children:[_jsxs(View,{style:styles.valueHeader,children:[_jsx(Text,{style:styles.valueLabel,children:"STATE AFTER ACTION"}),_jsxs(View,{style:styles.valueHeaderBadges,children:[_jsx(View,{style:[styles.actionBadge,{backgroundColor:`${u}20`}],children:_jsx(Text,{style:[styles.actionText,{color:u}],children:f})}),_jsx(View,{style:styles.typeBadge,children:_jsx(Text,{style:styles.typeText,testID:`${REDUX_TEST_ID}-state-type`,children:x.toUpperCase()})})]})]}),_jsx(View,{style:styles.dataViewerContainer,children:_jsx(DataViewer,{title:"",data:t,showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]})},[e.nextState,u,f,x,m]),_=useCallback(()=>{const t=parseValue(e.prevState),i=parseValue(e.nextState);return"split"===s?_jsx(ScrollView,{style:{flex:1},showsVerticalScrollIndicator:!0,children:_jsx(SplitDiffViewer,{oldValue:t,newValue:i,theme:diffThemes.devToolsDefault,options:{hideLineNumbers:!1,disableWordDiff:!1,showDiffOnly:!1,compareMethod:"words",contextLines:3},showThemeName:!1})}):_jsx(TreeDiffViewer,{oldValue:t,newValue:i})},[e.prevState,e.nextState,s]),w=useCallback(()=>{o(Math.min(c-1,i+1))},[i,c,o]),V=useCallback(()=>{o(Math.max(0,i-1))},[i,o]),D=m||isEvictedState(e.prevState)||void 0===e.prevState,C=!a&&c>1;return _jsxs(View,{style:styles.container,children:[_jsx(ReduxDetailViewToggle,{activeView:r,onViewChange:l,diffDisabled:D}),_jsxs(View,{style:[styles.contentArea,C&&styles.contentAreaFooterPad],children:["action"===r&&_jsx(ReduxActionInfoView,{action:e}),"state"===r&&_jsx(View,{style:styles.stateContainer,children:b()}),"diff"===r&&_jsxs(View,{style:styles.diffContainer,testID:`${REDUX_TEST_ID}-diff`,children:[_jsx(DiffModeTabs,{tabs:DIFF_MODE_TABS,activeTab:s,onTabChange:d,testIDPrefix:`${REDUX_TEST_ID}-diff-tab`}),_jsx(CompareBar,{leftEvent:h,rightEvent:S}),_jsx(View,{style:styles.diffContent,testID:`${REDUX_TEST_ID}-diff-content`,children:_()})]})]}),C&&_jsx(EventStepperFooter,{currentIndex:g-1,totalItems:c,onPrevious:w,onNext:V,itemLabel:"Action",subtitle:formatRelativeTime(new Date(e.timestamp)),absolute:!0})]})}export function ReduxActionDetailFooter({action:e,actions:t,selectedIndex:i,onIndexChange:o}){const a=t.length;return a<=1?null:_jsx(EventStepperFooter,{currentIndex:a-i-1,totalItems:a,onPrevious:()=>o(Math.min(a-1,i+1)),onNext:()=>o(Math.max(0,i-1)),itemLabel:"Action",subtitle:formatRelativeTime(new Date(e.timestamp))})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},contentArea:{flex:1},contentAreaFooterPad:{paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:night.color.surface,borderRadius:14,padding:14,borderWidth:1,borderColor:night.color.border},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:night.color.textSecondary,fontFamily:monoFont,letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},actionBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},actionText:{fontSize:9,fontWeight:"700",fontFamily:monoFont,letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:night.color.surfaceElevated},typeText:{fontSize:9,fontWeight:"600",color:night.color.textTertiary,fontFamily:monoFont},valueBox:{backgroundColor:night.color.bg,borderRadius:6,borderWidth:1,borderColor:night.color.border,padding:8},evictedText:{fontSize:12,color:night.color.textSecondary,lineHeight:18},valueText:{fontSize:12,color:night.color.text,fontFamily:monoFont,lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},actionBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},actionTextSmall:{fontSize:8,fontWeight:"700",fontFamily:monoFont},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});
+"use strict";
+
+/**
+ * ReduxActionDetailContent
+ *
+ * Enhanced detail view for a Redux action with 3 view modes:
+ * - ACTION: View action details, payload, meta, error
+ * - STATE: View current state after action
+ * - DIFF: Compare prev vs next state
+ */
+
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { useState, useCallback, useMemo } from "react";
+import { macOSColors, night, EventStepperFooter, formatRelativeTime, parseValue, monoFont } from "@buoy-gg/shared-ui";
+import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
+import { ReduxDetailViewToggle } from "./ReduxDetailViewToggle";
+import { ReduxActionInfoView } from "./ReduxActionInfoView";
+import { DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
+import { REDUX_TEST_ID } from "../utils/testIDs";
+import { isEvictedState, STATE_RETENTION_LIMIT } from "../utils/reduxActionStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Get color for action type
+ */
+function getActionColor(type) {
+  if (type.includes("/pending")) return macOSColors.semantic.warning;
+  if (type.includes("/fulfilled")) return macOSColors.semantic.success;
+  if (type.includes("/rejected")) return macOSColors.semantic.error;
+  if (type.startsWith("@@")) return macOSColors.text.muted;
+  return macOSColors.semantic.info;
+}
+
+/**
+ * Get short action label
+ */
+function getActionLabel(type) {
+  if (type.includes("/pending")) return "PENDING";
+  if (type.includes("/fulfilled")) return "FULFILLED";
+  if (type.includes("/rejected")) return "REJECTED";
+  if (type.startsWith("@@")) return "INTERNAL";
+  const parts = type.split("/");
+  return parts[parts.length - 1]?.toUpperCase() || "ACTION";
+}
+
+/**
+ * Get the type (object, array, string, etc.)
+ */
+function getValueType(value) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+
+/**
+ * Diff mode tabs configuration
+ */
+const DIFF_MODE_TABS = [{
+  key: "tree",
+  label: "TREE VIEW"
+}, {
+  key: "split",
+  label: "SPLIT VIEW"
+}];
+export function ReduxActionDetailContent({
+  action,
+  actions,
+  selectedIndex,
+  onIndexChange,
+  disableInternalFooter = false,
+  initialView = "action"
+}) {
+  // View state (initialView seeds it once; taps own it afterwards)
+  const [activeView, setActiveView] = useState(initialView);
+  const [diffMode, setDiffMode] = useState("tree");
+  const totalActions = actions.length;
+  /**
+   * The state trees this action was recorded with are gone.
+   *
+   * Not a failure: the store keeps raw prev/next state for the most recent
+   * actions only, because with structural sharing broken (a store switch, a
+   * rehydration) each retained action pins a distinct multi-MB subtree and a
+   * few dozen of them are enough to OOM-kill a large app. But it has to be
+   * SAID. The sentinel left behind is an ordinary object, so a state view that
+   * just rendered it showed `{ __buoyStateEvicted: true, … }` under the
+   * heading "STATE AFTER ACTION" — which reads as the app's actual state — and
+   * a diff of two identical sentinels reported "no changes", which is a lie
+   * about the app rather than about the recording.
+   */
+  const stateEvicted = isEvictedState(action.nextState);
+  const actionColor = getActionColor(action.type);
+  const actionLabel = getActionLabel(action.type);
+  const stateType = getValueType(parseValue(action.nextState));
+
+  // Actions are in reverse chronological order (newest first, oldest last)
+  const chronologicalNumber = totalActions - selectedIndex;
+  const prevChronologicalNumber = chronologicalNumber - 1;
+
+  // Get the previous action in chronological order (which is the NEXT index in the array)
+  const prevActionIndex = selectedIndex < totalActions - 1 ? selectedIndex + 1 : null;
+  const prevAction = prevActionIndex !== null ? actions[prevActionIndex] : null;
+
+  // Compare bar info for diff view
+  const leftEvent = useMemo(() => ({
+    index: prevActionIndex ?? 0,
+    label: prevChronologicalNumber > 0 ? `#${prevChronologicalNumber}` : "Initial",
+    timestamp: prevAction ? formatTimestamp(prevAction.timestamp) : "",
+    relativeTime: prevAction ? formatRelativeTime(new Date(prevAction.timestamp)) : "state",
+    badge: prevAction ? /*#__PURE__*/_jsx(View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${getActionColor(prevAction.type)}20`
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionTextSmall, {
+          color: getActionColor(prevAction.type)
+        }],
+        children: getActionLabel(prevAction.type)
+      })
+    }) : undefined
+  }), [prevActionIndex, prevAction, prevChronologicalNumber]);
+  const rightEvent = useMemo(() => ({
+    index: selectedIndex,
+    label: `#${chronologicalNumber}`,
+    timestamp: formatTimestamp(action.timestamp),
+    relativeTime: formatRelativeTime(new Date(action.timestamp)),
+    badge: /*#__PURE__*/_jsx(View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${actionColor}20`
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionTextSmall, {
+          color: actionColor
+        }],
+        children: actionLabel
+      })
+    })
+  }), [selectedIndex, action.timestamp, actionColor, actionLabel, chronologicalNumber]);
+
+  // Render state view
+  const renderStateView = useCallback(() => {
+    if (stateEvicted) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.contentCard,
+        testID: `${REDUX_TEST_ID}-state-evicted`,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.valueHeader,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.valueLabel,
+            children: "STATE AFTER ACTION"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.evictedText,
+          children: `Not retained. Raw state is kept for the ${STATE_RETENTION_LIMIT} most recent actions, so this action's before/after trees have been released.`
+        })]
+      });
+    }
+    const parsed = parseValue(action.nextState);
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.contentCard,
+      testID: `${REDUX_TEST_ID}-state-card`,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.valueHeader,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.valueLabel,
+          children: "STATE AFTER ACTION"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.valueHeaderBadges,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.actionBadge, {
+              backgroundColor: `${actionColor}20`
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionText, {
+                color: actionColor
+              }],
+              children: actionLabel
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.typeBadge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.typeText,
+              testID: `${REDUX_TEST_ID}-state-type`,
+              children: stateType.toUpperCase()
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/_jsx(DataViewer, {
+          title: "",
+          data: parsed,
+          showTypeFilter: true,
+          rawMode: true,
+          initialExpanded: true
+        })
+      })]
+    });
+  }, [action.nextState, actionColor, actionLabel, stateType, stateEvicted]);
+
+  // Render diff content
+  const renderDiffContent = useCallback(() => {
+    const prevState = parseValue(action.prevState);
+    const nextState = parseValue(action.nextState);
+    if (diffMode === "split") {
+      return /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          flex: 1
+        },
+        showsVerticalScrollIndicator: true,
+        children: /*#__PURE__*/_jsx(SplitDiffViewer, {
+          oldValue: prevState,
+          newValue: nextState,
+          theme: diffThemes.devToolsDefault,
+          options: {
+            hideLineNumbers: false,
+            disableWordDiff: false,
+            showDiffOnly: false,
+            compareMethod: "words",
+            contextLines: 3
+          },
+          showThemeName: false
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx(TreeDiffViewer, {
+      oldValue: prevState,
+      newValue: nextState
+    });
+  }, [action.prevState, action.nextState, diffMode]);
+
+  // Navigation handlers
+  const handleFooterPrevious = useCallback(() => {
+    onIndexChange(Math.min(totalActions - 1, selectedIndex + 1));
+  }, [selectedIndex, totalActions, onIndexChange]);
+  const handleFooterNext = useCallback(() => {
+    onIndexChange(Math.max(0, selectedIndex - 1));
+  }, [selectedIndex, onIndexChange]);
+
+  // A diff needs two real trees, and both live on THIS action
+  // (prevState/nextState) — no siblings needed, so the action count says
+  // nothing (gating on it greyed DIFF out for every redux event opened from
+  // the Events timeline, which passes a one-element array). Eviction of
+  // EITHER side does disable it: two identical sentinels diff cleanly to
+  // "no changes", which reads as a lie.
+  const diffDisabled = stateEvicted || isEvictedState(action.prevState) || action.prevState === undefined;
+  const showInternalFooter = !disableInternalFooter && totalActions > 1;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(ReduxDetailViewToggle, {
+      activeView: activeView,
+      onViewChange: setActiveView,
+      diffDisabled: diffDisabled
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
+      children: [activeView === "action" && /*#__PURE__*/_jsx(ReduxActionInfoView, {
+        action: action
+      }), activeView === "state" && /*#__PURE__*/_jsx(View, {
+        style: styles.stateContainer,
+        children: renderStateView()
+      }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
+        style: styles.diffContainer,
+        testID: `${REDUX_TEST_ID}-diff`,
+        children: [/*#__PURE__*/_jsx(DiffModeTabs, {
+          tabs: DIFF_MODE_TABS,
+          activeTab: diffMode,
+          onTabChange: setDiffMode,
+          testIDPrefix: `${REDUX_TEST_ID}-diff-tab`
+        }), /*#__PURE__*/_jsx(CompareBar, {
+          leftEvent: leftEvent,
+          rightEvent: rightEvent
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.diffContent,
+          testID: `${REDUX_TEST_ID}-diff-content`,
+          children: renderDiffContent()
+        })]
+      })]
+    }), showInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
+      currentIndex: chronologicalNumber - 1,
+      totalItems: totalActions,
+      onPrevious: handleFooterPrevious,
+      onNext: handleFooterNext,
+      itemLabel: "Action",
+      subtitle: formatRelativeTime(new Date(action.timestamp)),
+      absolute: true
+    })]
+  });
+}
+
+/**
+ * External footer component for modal use
+ */
+export function ReduxActionDetailFooter({
+  action,
+  actions,
+  selectedIndex,
+  onIndexChange
+}) {
+  const totalActions = actions.length;
+  if (totalActions <= 1) return null;
+  const chronologicalNumber = totalActions - selectedIndex;
+  return /*#__PURE__*/_jsx(EventStepperFooter, {
+    currentIndex: chronologicalNumber - 1,
+    totalItems: totalActions,
+    onPrevious: () => onIndexChange(Math.min(totalActions - 1, selectedIndex + 1)),
+    onNext: () => onIndexChange(Math.max(0, selectedIndex - 1)),
+    itemLabel: "Action",
+    subtitle: formatRelativeTime(new Date(action.timestamp))
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
+  },
+  contentArea: {
+    flex: 1
+  },
+  // Clearance for the absolute EventStepperFooter — only when it renders,
+  // otherwise hosts like the Events tool get a dead band at the sheet bottom.
+  contentAreaFooterPad: {
+    paddingBottom: 96
+  },
+  // State view styles
+  stateContainer: {
+    flex: 1,
+    padding: 14
+  },
+  contentCard: {
+    backgroundColor: night.color.surface,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  valueHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 8
+  },
+  valueLabel: {
+    fontSize: 10,
+    color: night.color.textSecondary,
+    fontFamily: monoFont,
+    letterSpacing: 0.5,
+    fontWeight: "600"
+  },
+  valueHeaderBadges: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  actionBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  actionText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: monoFont,
+    letterSpacing: 0.3
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: night.color.surfaceElevated
+  },
+  typeText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: night.color.textTertiary,
+    fontFamily: monoFont
+  },
+  valueBox: {
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: night.color.bg,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    padding: 8
+  },
+  evictedText: {
+    fontSize: 12,
+    color: night.color.textSecondary,
+    lineHeight: 18
+  },
+  valueText: {
+    fontSize: 12,
+    color: night.color.text,
+    fontFamily: monoFont,
+    lineHeight: 18
+  },
+  // Diff view styles
+  diffContainer: {
+    flex: 1
+  },
+  diffContent: {
+    flex: 1,
+    paddingHorizontal: 14
+  },
+  // Action badges for compare bar
+  actionBadgeSmall: {
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  actionTextSmall: {
+    fontSize: 8,
+    fontWeight: "700",
+    fontFamily: monoFont
+  },
+  dataViewerContainer: {
+    marginTop: -12,
+    marginHorizontal: -12,
+    marginBottom: -12
+  }
+});