@buoy-gg/shared-ui 7.0.41 → 7.0.42

package/lib/module/ui/components/EventHistoryViewer/CompareBar.js

@@ -1,206 +1 @@
-"use strict";
-
-/**
- * CompareBar
- *
- * Displays PREV/CUR comparison metadata for diff view.
- * Shows event labels, timestamps, badges, and optional navigation controls.
- * This is a dumb component - all state is controlled externally.
- */
-
-import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
-import { ChevronLeft, ChevronRight } from "../../../icons/lucide-icons.js";
-import { monoFont } from "../../fonts.js";
-/**
- * CompareBar displays a side-by-side comparison of two events
- * with optional navigation controls for any-to-any compare mode.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CompareBar = /*#__PURE__*/memo(function CompareBar({
-  leftEvent,
-  rightEvent,
-  showNavigation = false,
-  onLeftPrevious,
-  onLeftNext,
-  onRightPrevious,
-  onRightNext,
-  canLeftPrevious = false,
-  canLeftNext = false,
-  canRightPrevious = false,
-  canRightNext = false,
-  onLeftPress,
-  onRightPress
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.side,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.labelRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.label, styles.labelPrev],
-          children: "PREV"
-        }), leftEvent.badge]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.controls,
-        children: [showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: onLeftPrevious,
-          disabled: !canLeftPrevious,
-          style: [styles.navBtn, !canLeftPrevious && styles.navBtnDisabled],
-          children: /*#__PURE__*/_jsx(ChevronLeft, {
-            size: 14,
-            color: canLeftPrevious ? macOSColors.text.secondary : macOSColors.text.muted
-          })
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: styles.meta,
-          onPress: onLeftPress,
-          disabled: !onLeftPress,
-          activeOpacity: onLeftPress ? 0.8 : 1,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.index,
-            children: leftEvent.label
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.time,
-            children: leftEvent.timestamp
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.relative,
-            children: ["(", leftEvent.relativeTime, ")"]
-          })]
-        }), showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: onLeftNext,
-          disabled: !canLeftNext,
-          style: [styles.navBtn, !canLeftNext && styles.navBtnDisabled],
-          children: /*#__PURE__*/_jsx(ChevronRight, {
-            size: 14,
-            color: canLeftNext ? macOSColors.text.secondary : macOSColors.text.muted
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.divider
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.side,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.labelRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.label, styles.labelCur],
-          children: "CUR"
-        }), rightEvent.badge]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.controls,
-        children: [showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: onRightPrevious,
-          disabled: !canRightPrevious,
-          style: [styles.navBtn, !canRightPrevious && styles.navBtnDisabled],
-          children: /*#__PURE__*/_jsx(ChevronLeft, {
-            size: 14,
-            color: canRightPrevious ? macOSColors.text.secondary : macOSColors.text.muted
-          })
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: styles.meta,
-          onPress: onRightPress,
-          disabled: !onRightPress,
-          activeOpacity: onRightPress ? 0.8 : 1,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.index,
-            children: rightEvent.label
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.time,
-            children: rightEvent.timestamp
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.relative,
-            children: ["(", rightEvent.relativeTime, ")"]
-          })]
-        }), showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: onRightNext,
-          disabled: !canRightNext,
-          style: [styles.navBtn, !canRightNext && styles.navBtnDisabled],
-          children: /*#__PURE__*/_jsx(ChevronRight, {
-            size: 14,
-            color: canRightNext ? macOSColors.text.secondary : macOSColors.text.muted
-          })
-        })]
-      })]
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginBottom: 8,
-    gap: 8
-  },
-  side: {
-    flex: 1
-  },
-  labelRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    marginBottom: 2
-  },
-  label: {
-    fontSize: 10,
-    fontFamily: monoFont,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  labelPrev: {
-    color: macOSColors.semantic.debug
-  },
-  labelCur: {
-    color: macOSColors.semantic.success
-  },
-  controls: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  navBtn: {
-    width: 26,
-    height: 26,
-    borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  navBtnDisabled: {
-    opacity: 0.4
-  },
-  meta: {
-    flex: 1
-  },
-  index: {
-    fontSize: 10,
-    color: macOSColors.text.secondary,
-    fontFamily: monoFont
-  },
-  time: {
-    fontSize: 11,
-    color: macOSColors.text.primary,
-    fontFamily: monoFont
-  },
-  relative: {
-    fontSize: 10,
-    color: macOSColors.text.secondary,
-    fontFamily: monoFont
-  },
-  divider: {
-    width: 1,
-    height: 34,
-    backgroundColor: macOSColors.background.input
-  }
-});
+"use strict";import j,{memo as z}from"react";import{View as o,Text as i,TouchableOpacity as a,StyleSheet as D}from"react-native";import{macOSColors as t}from"../../gameUI/constants/macOSDesignSystemColors.js";import{ChevronLeft as u,ChevronRight as x}from"../../../icons/lucide-icons.js";import{monoFont as c}from"../../fonts.js";import{jsx as l,jsxs as r}from"react/jsx-runtime";export const CompareBar=z(function S({leftEvent:n,rightEvent:d,showNavigation:s=false,onLeftPrevious:C,onLeftNext:B,onRightPrevious:g,onRightNext:v,canLeftPrevious:m=false,canLeftNext:b=false,canRightPrevious:y=false,canRightNext:p=false,onLeftPress:f,onRightPress:h}){return r(o,{style:e.container,children:[r(o,{style:e.side,children:[r(o,{style:e.labelRow,children:[l(i,{style:[e.label,e.labelPrev],children:"PREV"}),n.badge]}),r(o,{style:e.controls,children:[s&&l(a,{onPress:C,disabled:!m,style:[e.navBtn,!m&&e.navBtnDisabled],children:l(u,{size:14,color:m?t.text.secondary:t.text.muted})}),r(a,{style:e.meta,onPress:f,disabled:!f,activeOpacity:f?.8:1,children:[l(i,{style:e.index,children:n.label}),l(i,{style:e.time,children:n.timestamp}),r(i,{style:e.relative,children:["(",n.relativeTime,")"]})]}),s&&l(a,{onPress:B,disabled:!b,style:[e.navBtn,!b&&e.navBtnDisabled],children:l(x,{size:14,color:b?t.text.secondary:t.text.muted})})]})]}),l(o,{style:e.divider}),r(o,{style:e.side,children:[r(o,{style:e.labelRow,children:[l(i,{style:[e.label,e.labelCur],children:"CUR"}),d.badge]}),r(o,{style:e.controls,children:[s&&l(a,{onPress:g,disabled:!y,style:[e.navBtn,!y&&e.navBtnDisabled],children:l(u,{size:14,color:y?t.text.secondary:t.text.muted})}),r(a,{style:e.meta,onPress:h,disabled:!h,activeOpacity:h?.8:1,children:[l(i,{style:e.index,children:d.label}),l(i,{style:e.time,children:d.timestamp}),r(i,{style:e.relative,children:["(",d.relativeTime,")"]})]}),s&&l(a,{onPress:v,disabled:!p,style:[e.navBtn,!p&&e.navBtnDisabled],children:l(x,{size:14,color:p?t.text.secondary:t.text.muted})})]})]})]})});const e=D.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.background.card,borderWidth:1,borderColor:t.border.default,borderRadius:6,paddingHorizontal:8,paddingVertical:6,marginBottom:8,gap:8},side:{flex:1},labelRow:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:2},label:{fontSize:10,fontFamily:c,fontWeight:"700",letterSpacing:.5,textTransform:"uppercase"},labelPrev:{color:t.semantic.debug},labelCur:{color:t.semantic.success},controls:{flexDirection:"row",alignItems:"center",gap:6},navBtn:{width:26,height:26,borderRadius:6,backgroundColor:t.background.card,borderWidth:1,borderColor:t.border.default,alignItems:"center",justifyContent:"center"},navBtnDisabled:{opacity:.4},meta:{flex:1},index:{fontSize:10,color:t.text.secondary,fontFamily:c},time:{fontSize:11,color:t.text.primary,fontFamily:c},relative:{fontSize:10,color:t.text.secondary,fontFamily:c},divider:{width:1,height:34,backgroundColor:t.background.input}});

package/lib/module/ui/components/EventHistoryViewer/DiffModeTabs.js

@@ -1,94 +1 @@
-"use strict";
-
-/**
- * DiffModeTabs
- *
- * Tab bar for switching between diff visualization modes.
- * Examples: "SPLIT VIEW" / "TREE VIEW" or "CAUSE" / "PROPS" / "STATE"
- * This is a dumb component - all state is controlled externally.
- */
-
-import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
-import { monoFont } from "../../fonts.js";
-/**
- * DiffModeTabs displays a horizontal tab bar for switching
- * between different diff visualization modes.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
-  tabs,
-  activeTab,
-  onTabChange,
-  testIDPrefix
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: tabs.map(tab => {
-      const isActive = activeTab === tab.key;
-      const isDisabled = tab.disabled === true;
-      return /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.tab, isActive && styles.tabActive, isDisabled && styles.tabDisabled],
-        onPress: () => !isDisabled && onTabChange(tab.key),
-        activeOpacity: isDisabled ? 1 : 0.7,
-        disabled: isDisabled,
-        testID: testIDPrefix ? `${testIDPrefix}-${tab.key}` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: tab.label,
-        accessibilityState: {
-          selected: isActive,
-          disabled: isDisabled
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.tabText, isActive && styles.tabTextActive, isDisabled && styles.tabTextDisabled],
-          children: tab.label
-        })
-      }, tab.key);
-    })
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-    backgroundColor: macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    borderRadius: 6,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-    marginBottom: 8,
-    gap: 4
-  },
-  tab: {
-    flex: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 4,
-    alignItems: "center",
-    backgroundColor: "transparent"
-  },
-  tabActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderWidth: 1,
-    borderColor: macOSColors.semantic.info + "40"
-  },
-  tabDisabled: {
-    opacity: 0.4
-  },
-  tabText: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    fontWeight: "600",
-    color: macOSColors.text.secondary,
-    letterSpacing: 0.5
-  },
-  tabTextActive: {
-    color: macOSColors.text.primary
-  },
-  tabTextDisabled: {
-    color: macOSColors.text.muted
-  }
-});
+"use strict";import x,{memo as s}from"react";import{View as b,Text as m,TouchableOpacity as f,StyleSheet as p}from"react-native";import{macOSColors as t}from"../../gameUI/constants/macOSDesignSystemColors.js";import{monoFont as u}from"../../fonts.js";import{jsx as a}from"react/jsx-runtime";export const DiffModeTabs=s(function y({tabs:c,activeTab:d,onTabChange:l,testIDPrefix:n}){return a(b,{style:o.container,children:c.map(e=>{const r=d===e.key;const i=e.disabled===true;return a(f,{style:[o.tab,r&&o.tabActive,i&&o.tabDisabled],onPress:()=>!i&&l(e.key),activeOpacity:i?1:.7,disabled:i,testID:n?`${n}-${e.key}`:void 0,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{selected:r,disabled:i},children:a(m,{style:[o.tabText,r&&o.tabTextActive,i&&o.tabTextDisabled],children:e.label})},e.key)})})});const o=p.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:t.background.card,borderWidth:1,borderColor:t.border.default,borderRadius:6,paddingHorizontal:4,paddingVertical:4,marginBottom:8,gap:4},tab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:4,alignItems:"center",backgroundColor:"transparent"},tabActive:{backgroundColor:t.semantic.infoBackground,borderWidth:1,borderColor:t.semantic.info+"40"},tabDisabled:{opacity:.4},tabText:{fontSize:11,fontFamily:u,fontWeight:"600",color:t.text.secondary,letterSpacing:.5},tabTextActive:{color:t.text.primary},tabTextDisabled:{color:t.text.muted}});

package/lib/module/ui/components/EventHistoryViewer/EventHistoryViewer.js

@@ -1,179 +1 @@
-"use strict";
-
-/**
- * EventHistoryViewer
- *
- * Main container component for viewing event history with current/diff views.
- * Composes ViewToggleCards, DiffModeTabs, CompareBar, and EventStepperFooter.
- * This is a dumb component - all state is controlled externally.
- */
-
-import React, { memo } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
-import { EventStepperFooter } from "../EventStepperFooter.js";
-import { ViewToggleCards } from "./ViewToggleCards.js";
-import { DiffModeTabs } from "./DiffModeTabs.js";
-import { CompareBar } from "./CompareBar.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Section wrapper for the diff view: a plain flex box normally, or a ScrollView
- * when the whole section should scroll as one page. Split out so the children
- * are written once instead of duplicated across both branches.
- */
-function DiffSectionContainer({
-  scrolls,
-  style,
-  children
-}) {
-  if (!scrolls) return /*#__PURE__*/_jsx(View, {
-    style: style,
-    children: children
-  });
-  // `contentSection` carries `flex: 1`, which is meaningless (and harmful) on a
-  // content container — the scrolling variant uses flexGrow padding instead.
-  return /*#__PURE__*/_jsx(ScrollView, {
-    style: styles.contentScroll,
-    contentContainerStyle: styles.contentScrollInner,
-    showsVerticalScrollIndicator: true,
-    children: children
-  });
-}
-
-/**
- * EventHistoryViewer is the main container for viewing event history.
- * It composes sub-components to display current value or diff views.
- */
-export const EventHistoryViewer = /*#__PURE__*/memo(function EventHistoryViewer({
-  // View Toggle
-  activeView,
-  onViewChange,
-  currentViewLabel,
-  currentViewDescription,
-  currentViewIcon,
-  diffViewLabel,
-  diffViewDescription,
-  diffViewIcon,
-  // Current View Content
-  renderCurrentView,
-  // Diff View
-  diffModeTabs,
-  activeDiffMode,
-  onDiffModeChange,
-  renderDiffContent,
-  // Compare Bar
-  leftEvent,
-  rightEvent,
-  showCompareNavigation,
-  onLeftPrevious,
-  onLeftNext,
-  onRightPrevious,
-  onRightNext,
-  canLeftPrevious,
-  canLeftNext,
-  canRightPrevious,
-  canRightNext,
-  onLeftPickerOpen,
-  onRightPickerOpen,
-  scrollDiffSection,
-  // Footer
-  disableInternalFooter,
-  footerCurrentIndex,
-  footerTotalItems,
-  footerItemLabel,
-  footerSubtitle,
-  onFooterPrevious,
-  onFooterNext
-}) {
-  const hasCurrentView = renderCurrentView != null;
-  const diffDisabled = footerTotalItems <= 1;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [styles.container, {
-        // Reserve space ONLY for the internal footer, which is absolutely
-        // positioned and would otherwise cover the content. An external
-        // footer is laid out by the host modal, which already pads the
-        // content area by its own footerHeight — adding this on top of that
-        // left a dead band above the footer (96px of padding for a footer
-        // that isn't in this subtree).
-        paddingBottom: !disableInternalFooter && footerTotalItems > 1 ? 96 : 0
-      }],
-      children: [hasCurrentView && /*#__PURE__*/_jsx(ViewToggleCards, {
-        activeView: activeView,
-        onViewChange: onViewChange ?? (() => {}),
-        currentLabel: currentViewLabel ?? "",
-        currentDescription: currentViewDescription ?? "",
-        currentIcon: currentViewIcon,
-        diffLabel: diffViewLabel,
-        diffDescription: diffViewDescription,
-        diffIcon: diffViewIcon,
-        diffDisabled: diffDisabled
-      }), hasCurrentView && activeView === "current" && /*#__PURE__*/_jsx(ScrollView, {
-        style: styles.contentScroll,
-        contentContainerStyle: styles.contentScrollInner,
-        showsVerticalScrollIndicator: true,
-        children: renderCurrentView?.()
-      }), (!hasCurrentView || activeView === "diff") && /*#__PURE__*/_jsxs(DiffSectionContainer, {
-        scrolls: scrollDiffSection,
-        style: styles.contentSection,
-        children: [diffModeTabs && diffModeTabs.length > 0 && onDiffModeChange && /*#__PURE__*/_jsx(DiffModeTabs, {
-          tabs: diffModeTabs,
-          activeTab: activeDiffMode ?? diffModeTabs[0]?.key ?? "",
-          onTabChange: onDiffModeChange
-        }), /*#__PURE__*/_jsx(CompareBar, {
-          leftEvent: leftEvent,
-          rightEvent: rightEvent,
-          showNavigation: showCompareNavigation,
-          onLeftPrevious: onLeftPrevious,
-          onLeftNext: onLeftNext,
-          onRightPrevious: onRightPrevious,
-          onRightNext: onRightNext,
-          canLeftPrevious: canLeftPrevious,
-          canLeftNext: canLeftNext,
-          canRightPrevious: canRightPrevious,
-          canRightNext: canRightNext,
-          onLeftPress: onLeftPickerOpen,
-          onRightPress: onRightPickerOpen
-        }), scrollDiffSection ? renderDiffContent() : /*#__PURE__*/_jsx(View, {
-          style: styles.diffContent,
-          children: renderDiffContent()
-        })]
-      })]
-    }), !disableInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
-      currentIndex: footerCurrentIndex,
-      totalItems: footerTotalItems,
-      onPrevious: onFooterPrevious,
-      onNext: onFooterNext,
-      itemLabel: footerItemLabel,
-      subtitle: footerSubtitle,
-      absolute: true
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: macOSColors.background.base
-  },
-  contentSection: {
-    flex: 1,
-    minHeight: 0,
-    paddingHorizontal: 14,
-    paddingVertical: 10
-  },
-  contentScroll: {
-    // No `minHeight: 0` here. On the scroll frame it stops the ScrollView from
-    // constraining itself, so a tall value lays out at full content height and
-    // spills past the panel and the footer instead of scrolling inside it.
-    flex: 1
-  },
-  contentScrollInner: {
-    flexGrow: 1,
-    paddingHorizontal: 14,
-    paddingVertical: 10
-  },
-  diffContent: {
-    flex: 1,
-    minHeight: 0
-  }
-});
+"use strict";import T,{memo as A}from"react";import{View as l,ScrollView as h,StyleSheet as J}from"react-native";import{macOSColors as K}from"../../gameUI/constants/macOSDesignSystemColors.js";import{EventStepperFooter as Q}from"../EventStepperFooter.js";import{ViewToggleCards as U}from"./ViewToggleCards.js";import{DiffModeTabs as W}from"./DiffModeTabs.js";import{CompareBar as X}from"./CompareBar.js";import{jsx as t,jsxs as s,Fragment as Y}from"react/jsx-runtime";function Z({scrolls:a,style:n,children:r}){if(!a)return t(l,{style:n,children:r});return t(h,{style:e.contentScroll,contentContainerStyle:e.contentScrollInner,showsVerticalScrollIndicator:true,children:r})}export const EventHistoryViewer=A(function a({activeView:n,onViewChange:r,currentViewLabel:p,currentViewDescription:S,currentViewIcon:x,diffViewLabel:y,diffViewDescription:v,diffViewIcon:b,renderCurrentView:f,diffModeTabs:o,activeDiffMode:w,onDiffModeChange:m,renderDiffContent:u,leftEvent:C,rightEvent:V,showCompareNavigation:L,onLeftPrevious:P,onLeftNext:H,onRightPrevious:I,onRightNext:N,canLeftPrevious:R,canLeftNext:E,canRightPrevious:j,canRightNext:k,onLeftPickerOpen:D,onRightPickerOpen:_,scrollDiffSection:d,disableInternalFooter:g,footerCurrentIndex:z,footerTotalItems:i,footerItemLabel:B,footerSubtitle:F,onFooterPrevious:G,onFooterNext:O}){const c=f!=null;const q=i<=1;return s(Y,{children:[s(l,{style:[e.container,{paddingBottom:!g&&i>1?96:0}],children:[c&&t(U,{activeView:n,onViewChange:r??(()=>{}),currentLabel:p??"",currentDescription:S??"",currentIcon:x,diffLabel:y,diffDescription:v,diffIcon:b,diffDisabled:q}),c&&n==="current"&&t(h,{style:e.contentScroll,contentContainerStyle:e.contentScrollInner,showsVerticalScrollIndicator:true,children:f?.()}),(!c||n==="diff")&&s(Z,{scrolls:d,style:e.contentSection,children:[o&&o.length>0&&m&&t(W,{tabs:o,activeTab:w??o[0]?.key??"",onTabChange:m}),t(X,{leftEvent:C,rightEvent:V,showNavigation:L,onLeftPrevious:P,onLeftNext:H,onRightPrevious:I,onRightNext:N,canLeftPrevious:R,canLeftNext:E,canRightPrevious:j,canRightNext:k,onLeftPress:D,onRightPress:_}),d?u():t(l,{style:e.diffContent,children:u()})]})]}),!g&&t(Q,{currentIndex:z,totalItems:i,onPrevious:G,onNext:O,itemLabel:B,subtitle:F,absolute:true})]})});const e=J.create({container:{flex:1,backgroundColor:K.background.base},contentSection:{flex:1,minHeight:0,paddingHorizontal:14,paddingVertical:10},contentScroll:{flex:1},contentScrollInner:{flexGrow:1,paddingHorizontal:14,paddingVertical:10},diffContent:{flex:1,minHeight:0}});