@buoy-gg/network 7.0.41 → 7.0.42

package/lib/commonjs/network/components/NetworkEventItemCompact.js

@@ -1,401 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkEventItemCompact = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _formatting = require("../utils/formatting");
-var _useTickEveryMinute = require("../hooks/useTickEveryMinute");
-var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
-var _jsxRuntime = require("react/jsx-runtime");
-// Get color based on status. Deliberately kept on the macOS semantic palette
-// (not the night tones) — the classic status colors read well on the night
-// rows and stay consistent with the status colors used elsewhere.
-function getStatusColor(status, error) {
-  if (error) return _sharedUi.macOSColors.semantic.error;
-  if (!status) return _sharedUi.macOSColors.semantic.warning;
-  if (status >= 200 && status < 300) return _sharedUi.macOSColors.semantic.success;
-  if (status >= 300 && status < 400) return _sharedUi.macOSColors.semantic.info;
-  if (status >= 400) return _sharedUi.macOSColors.semantic.error;
-  return _sharedUi.macOSColors.text.muted;
-}
-
-// Get content type badge with color
-function getContentTypeBadge(headers) {
-  const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
-  if (contentType.includes("json")) return "JSON";
-  if (contentType.includes("xml")) return "XML";
-  if (contentType.includes("html")) return "HTML";
-  if (contentType.includes("text")) return "TEXT";
-  if (contentType.includes("image")) return "IMG";
-  if (contentType.includes("video")) return "VIDEO";
-  if (contentType.includes("audio")) return "AUDIO";
-  if (contentType.includes("form")) return "FORM";
-  return null;
-}
-
-/**
- * The transport chip (`fetch` / `GQL` / `gRPC` / `XHR`), one brand colour each.
- */
-function getClientChipColors(requestClient) {
-  switch (requestClient) {
-    case "fetch":
-      return {
-        backgroundColor: "rgba(74, 144, 226, 0.15)",
-        color: "#4A90E2"
-      };
-    case "graphql":
-      return {
-        backgroundColor: "rgba(229, 53, 171, 0.15)",
-        color: "#E535AB"
-      };
-    case "grpc-web":
-      return {
-        backgroundColor: "rgba(16, 185, 129, 0.15)",
-        color: "#10B981"
-      };
-    case "xhr":
-      return {
-        backgroundColor: "rgba(245, 158, 11, 0.15)",
-        color: "#F59E0B"
-      };
-    default:
-      return {
-        backgroundColor: "rgba(147, 51, 234, 0.15)",
-        color: "#9333EA"
-      };
-  }
-}
-
-// Decomposed components following rule3 - Component Composition
-
-// Status indicator component - single responsibility
-function StatusIndicator({
-  event,
-  isPending,
-  statusColor
-}) {
-  if (isPending) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.pendingBadge,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-        size: 10,
-        color: _sharedUi.night.color.warning
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.pendingText,
-        children: "..."
-      })]
-    });
-  }
-  if (event.error) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.errorBadge,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
-        size: 10,
-        color: _sharedUi.night.color.danger
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.errorText,
-        children: "ERR"
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.statusBadge,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.statusText, {
-        color: statusColor
-      }],
-      children: String(event.status)
-    })
-  });
-}
-
-// Size indicators component - single responsibility
-function SizeIndicators({
-  requestSize,
-  responseSize
-}) {
-  if (!requestSize && !responseSize) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.sizeRow,
-    children: [requestSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.sizeItem,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Upload, {
-        size: 8,
-        color: _sharedUi.night.color.info
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sizeText,
-        children: (0, _formatting.formatBytes)(requestSize)
-      })]
-    }) : null, responseSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.sizeItem,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Download, {
-        size: 8,
-        color: _sharedUi.night.color.accent
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sizeText,
-        children: (0, _formatting.formatBytes)(responseSize)
-      })]
-    }) : null]
-  });
-}
-
-/**
- * Compact list-row representation of a network event. Optimized for large lists with memoization
- * and periodic refresh via `useTickEveryMinute` to keep relative timestamps accurate.
- */
-/**
- * Sole tick-context consumer in the row (rule2: composition over memo) —
- * the periodic relative-timestamp tick re-renders ONLY this Text, not the
- * whole card. Profiling (tool-bench 2026-07-06): the tick accounted for
- * ~30 of 65 row renders (plus their SVG-icon churn) in a 12s recording.
- */
-function BottomRightTime({
-  timestamp,
-  duration
-}) {
-  const tick = (0, _useTickEveryMinute.useTickEveryMinute)();
-  const relativeTime = (0, _sharedUi.formatRelativeTime)(timestamp, tick);
-  return duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-    style: styles.bottomRightText,
-    children: [(0, _formatting.formatDuration)(duration), "  ", relativeTime]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: styles.bottomRightText,
-    children: relativeTime
-  });
-}
-const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(0, _react.memo)(
-// Named function (not an arrow) so render-capture reports attribute row
-// renders to this component instead of a compiled anonymous name.
-function NetworkEventItemCompact({
-  event,
-  onPress,
-  pinned = false,
-  saved = false,
-  overridden = false,
-  onLongPress
-}) {
-  const statusColor = getStatusColor(event.status, event.error);
-  const isPending = !event.status && !event.error;
-  const contentType = getContentTypeBadge(event.responseHeaders);
-
-  // Format URL for display (max 2 lines)
-  let displayUrl = event.path || event.url.replace(/^https?:\/\/[^/]+/, "");
-
-  // If this is a GraphQL request, show operation name with variables using arrow notation
-  // Matches React Query pattern: ["pokemon", "Sandshrew"] → "pokemon › Sandshrew"
-  if (event.requestClient === "graphql") {
-    if (event.operationName) {
-      // Format: GetPokemon › Sandshrew (matches React Query pattern)
-      displayUrl = (0, _formatGraphQLVariables.formatGraphQLDisplay)(event.operationName, event.graphqlVariables);
-    } else {
-      // If no operation name found, just remove the redundant /graphql path
-      displayUrl = displayUrl.replace(/\/graphql[^?]*/, "/graphql");
-    }
-  } else if (event.operationName) {
-    // For non-GraphQL requests with operation names (e.g., gRPC)
-    displayUrl = `${displayUrl}\n(${event.operationName})`;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.DevToolsCard, {
-    onPress: () => onPress(event),
-    onLongPress: onLongPress ? () => onLongPress(event) : undefined,
-    style: styles.cardWrapper,
-    contentStyle: [styles.container, {
-      borderLeftColor: statusColor
-    }],
-    testID: `buoy-network-row-${event.id}`,
-    accessibilityLabel: `${event.method} ${event.path || event.url}`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.topRightContainer,
-      children: [pinned ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
-        size: 10,
-        active: true,
-        color: _sharedUi.night.color.info
-      }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
-        size: 10,
-        color: _sharedUi.night.color.accent
-      }) : null, overridden || event.override ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
-        size: 10,
-        color: _sharedUi.night.color.warning
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
-        event: event,
-        isPending: isPending,
-        statusColor: statusColor
-      }), event.requestClient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.topRightBadge, {
-          backgroundColor: getClientChipColors(event.requestClient).backgroundColor
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.clientText, {
-            color: getClientChipColors(event.requestClient).color
-          }],
-          children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
-        })
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.leftSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.MethodBadge, {
-        method: event.method,
-        size: "small"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SizeIndicators, {
-        requestSize: event.requestSize,
-        responseSize: event.responseSize
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.middleSection,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.urlText,
-        numberOfLines: 2,
-        children: displayUrl
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.rightSection,
-      children: [contentType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TypeBadge, {
-        type: contentType,
-        size: "small"
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-        size: 14,
-        color: _sharedUi.night.color.textTertiary
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.bottomRightContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomRightTime, {
-        timestamp: event.timestamp,
-        duration: event.duration
-      })
-    })]
-  });
-});
-
-// Without this, render-capture reports attribute row renders to the
-// anonymous memo wrapper ("Memo"/"_c4") instead of the row.
-NetworkEventItemCompact.displayName = "NetworkEventItemCompact";
-const styles = _reactNative.StyleSheet.create({
-  cardWrapper: {
-    // Overrides DevToolsCard's own wrapper margin, so it has to opt into the
-    // edge-to-edge chat layout too or the rows keep their gutter.
-    marginHorizontal: 8
-  },
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    // Translucent instead of DevToolsCard's opaque fill, so the tool background
-    // (see ToolBackground) reads THROUGH the list rather than only around it.
-    // Same luminance contract as the old rgba(10,13,20,0.9) scrim (backing
-    // stays ≤ ~45 under the catalogue's brightest scenes), re-based on the
-    // night surface `#0C0C0C` so rows match the night cards.
-    backgroundColor: "rgba(12, 12, 12, 0.9)",
-    borderLeftWidth: 3,
-    borderLeftColor: "transparent",
-    // One hairline per row — the same value DevToolsCard's border uses.
-    borderBottomWidth: 1
-  },
-  leftSection: {
-    marginRight: 8,
-    alignItems: "flex-start"
-  },
-  topRightContainer: {
-    position: "absolute",
-    top: 1,
-    right: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  topRightBadge: {
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  middleSection: {
-    flex: 1,
-    justifyContent: "center",
-    paddingRight: 8
-  },
-  urlText: {
-    fontSize: 12,
-    color: _sharedUi.night.color.text,
-    lineHeight: 16,
-    fontFamily: _sharedUi.monoFont
-  },
-  rightSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  bottomRightContainer: {
-    position: "absolute",
-    bottom: 4,
-    right: 8
-  },
-  bottomRightText: {
-    fontSize: 9,
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: _sharedUi.monoFont
-  },
-  statusBadge: {
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  statusText: {
-    fontSize: 10,
-    fontWeight: "600"
-  },
-  pendingBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    backgroundColor: _sharedUi.night.color.warningSoft,
-    borderRadius: 3
-  },
-  pendingText: {
-    fontSize: 10,
-    color: _sharedUi.night.color.warning,
-    fontWeight: "600"
-  },
-  errorBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    backgroundColor: _sharedUi.night.color.dangerSoft,
-    borderRadius: 3
-  },
-  errorText: {
-    fontSize: 10,
-    color: _sharedUi.night.color.danger,
-    fontWeight: "600"
-  },
-  durationText: {
-    fontSize: 9,
-    color: _sharedUi.night.color.textSecondary
-  },
-  sizeRow: {
-    flexDirection: "row",
-    gap: 4,
-    marginTop: 4
-  },
-  sizeItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2
-  },
-  sizeText: {
-    fontSize: 8,
-    color: _sharedUi.night.color.textSecondary,
-    fontFamily: _sharedUi.monoFont
-  },
-  clientText: {
-    fontSize: 8,
-    fontWeight: "700",
-    letterSpacing: 0.3,
-    textTransform: "uppercase"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkEventItemCompact=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _formatting=require("../utils/formatting");var _useTickEveryMinute=require("../hooks/useTickEveryMinute");var _formatGraphQLVariables=require("../utils/formatGraphQLVariables");var _jsxRuntime=require("react/jsx-runtime");function getStatusColor(r,e){if(e)return _sharedUi.macOSColors.semantic.error;if(!r)return _sharedUi.macOSColors.semantic.warning;if(r>=200&&r<300)return _sharedUi.macOSColors.semantic.success;if(r>=300&&r<400)return _sharedUi.macOSColors.semantic.info;if(r>=400)return _sharedUi.macOSColors.semantic.error;return _sharedUi.macOSColors.text.muted}function getContentTypeBadge(r){const e=r?.["content-type"]||r?.["Content-Type"]||"";if(e.includes("json"))return"JSON";if(e.includes("xml"))return"XML";if(e.includes("html"))return"HTML";if(e.includes("text"))return"TEXT";if(e.includes("image"))return"IMG";if(e.includes("video"))return"VIDEO";if(e.includes("audio"))return"AUDIO";if(e.includes("form"))return"FORM";return null}function getClientChipColors(r){switch(r){case"fetch":return{backgroundColor:"rgba(74, 144, 226, 0.15)",color:"#4A90E2"};case"graphql":return{backgroundColor:"rgba(229, 53, 171, 0.15)",color:"#E535AB"};case"grpc-web":return{backgroundColor:"rgba(16, 185, 129, 0.15)",color:"#10B981"};case"xhr":return{backgroundColor:"rgba(245, 158, 11, 0.15)",color:"#F59E0B"};default:return{backgroundColor:"rgba(147, 51, 234, 0.15)",color:"#9333EA"}}}function StatusIndicator({event:r,isPending:e,statusColor:o}){if(e){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.pendingBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:10,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.pendingText,children:"..."})]})}if(r.error){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.errorBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.AlertCircle,{size:10,color:_sharedUi.night.color.danger}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorText,children:"ERR"})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statusBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.statusText,{color:o}],children:String(r.status)})})}function SizeIndicators({requestSize:r,responseSize:e}){if(!r&&!e)return null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sizeRow,children:[r?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sizeItem,children:[(0,_jsxRuntime.jsx)(_sharedUi.Upload,{size:8,color:_sharedUi.night.color.info}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sizeText,children:(0,_formatting.formatBytes)(r)})]}):null,e?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sizeItem,children:[(0,_jsxRuntime.jsx)(_sharedUi.Download,{size:8,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sizeText,children:(0,_formatting.formatBytes)(e)})]}):null]})}function BottomRightTime({timestamp:r,duration:e}){const o=(0,_useTickEveryMinute.useTickEveryMinute)();const i=(0,_sharedUi.formatRelativeTime)(r,o);return e?(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.bottomRightText,children:[(0,_formatting.formatDuration)(e),"  ",i]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.bottomRightText,children:i})}const NetworkEventItemCompact=exports.NetworkEventItemCompact=(0,_react.memo)(function r({event:e,onPress:o,pinned:i=false,saved:s=false,overridden:c=false,onLongPress:n}){const l=getStatusColor(e.status,e.error);const d=!e.status&&!e.error;const a=getContentTypeBadge(e.responseHeaders);let t=e.path||e.url.replace(/^https?:\/\/[^/]+/,"");if(e.requestClient==="graphql"){if(e.operationName){t=(0,_formatGraphQLVariables.formatGraphQLDisplay)(e.operationName,e.graphqlVariables)}else{t=t.replace(/\/graphql[^?]*/,"/graphql")}}else if(e.operationName){t=`${t}
+(${e.operationName})`}return(0,_jsxRuntime.jsxs)(_sharedUi.DevToolsCard,{onPress:()=>o(e),onLongPress:n?()=>n(e):void 0,style:styles.cardWrapper,contentStyle:[styles.container,{borderLeftColor:l}],testID:`buoy-network-row-${e.id}`,accessibilityLabel:`${e.method} ${e.path||e.url}`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.topRightContainer,children:[i?(0,_jsxRuntime.jsx)(_sharedUi.Pin,{size:10,active:true,color:_sharedUi.night.color.info}):null,s?(0,_jsxRuntime.jsx)(_sharedUi.Bookmark,{size:10,color:_sharedUi.night.color.accent}):null,c||e.override?(0,_jsxRuntime.jsx)(_sharedUi.FlaskConical,{size:10,color:_sharedUi.night.color.warning}):null,(0,_jsxRuntime.jsx)(StatusIndicator,{event:e,isPending:d,statusColor:l}),e.requestClient?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.topRightBadge,{backgroundColor:getClientChipColors(e.requestClient).backgroundColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.clientText,{color:getClientChipColors(e.requestClient).color}],children:e.requestClient==="graphql"?"GQL":e.requestClient==="grpc-web"?"gRPC":e.requestClient==="xhr"?"XHR":e.requestClient})}):null]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.leftSection,children:[(0,_jsxRuntime.jsx)(_sharedUi.MethodBadge,{method:e.method,size:"small"}),(0,_jsxRuntime.jsx)(SizeIndicators,{requestSize:e.requestSize,responseSize:e.responseSize})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.middleSection,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.urlText,numberOfLines:2,children:t})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.rightSection,children:[a?(0,_jsxRuntime.jsx)(_sharedUi.TypeBadge,{type:a,size:"small"}):null,(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:14,color:_sharedUi.night.color.textTertiary})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.bottomRightContainer,children:(0,_jsxRuntime.jsx)(BottomRightTime,{timestamp:e.timestamp,duration:e.duration})})]})});NetworkEventItemCompact.displayName="NetworkEventItemCompact";const styles=_reactNative.StyleSheet.create({cardWrapper:{marginHorizontal:8},container:{flexDirection:"row",alignItems:"center",backgroundColor:"rgba(12, 12, 12, 0.9)",borderLeftWidth:3,borderLeftColor:"transparent",borderBottomWidth:1},leftSection:{marginRight:8,alignItems:"flex-start"},topRightContainer:{position:"absolute",top:1,right:1,flexDirection:"row",alignItems:"center",gap:4},topRightBadge:{paddingHorizontal:4,paddingVertical:2,borderRadius:4},middleSection:{flex:1,justifyContent:"center",paddingRight:8},urlText:{fontSize:12,color:_sharedUi.night.color.text,lineHeight:16,fontFamily:_sharedUi.monoFont},rightSection:{flexDirection:"row",alignItems:"center",gap:6},bottomRightContainer:{position:"absolute",bottom:4,right:8},bottomRightText:{fontSize:9,color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},statusBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3},statusText:{fontSize:10,fontWeight:"600"},pendingBadge:{flexDirection:"row",alignItems:"center",gap:2,paddingHorizontal:4,paddingVertical:1,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:3},pendingText:{fontSize:10,color:_sharedUi.night.color.warning,fontWeight:"600"},errorBadge:{flexDirection:"row",alignItems:"center",gap:2,paddingHorizontal:4,paddingVertical:1,backgroundColor:_sharedUi.night.color.dangerSoft,borderRadius:3},errorText:{fontSize:10,color:_sharedUi.night.color.danger,fontWeight:"600"},durationText:{fontSize:9,color:_sharedUi.night.color.textSecondary},sizeRow:{flexDirection:"row",gap:4,marginTop:4},sizeItem:{flexDirection:"row",alignItems:"center",gap:2},sizeText:{fontSize:8,color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont},clientText:{fontSize:8,fontWeight:"700",letterSpacing:.3,textTransform:"uppercase"}});