@buoy-gg/shared-ui 7.0.41 → 7.0.43

package/lib/commonjs/ui/components/ExpandedInfoRow.js

@@ -1,108 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ExpandedInfoRow = ExpandedInfoRow;
-exports.PillBadge = PillBadge;
-var _reactNative = require("react-native");
-var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
-var _fonts = require("../fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * ExpandedInfoRow
- *
- * Shared primitive for the `label: [badge]` rows inside expanded DevTools cards.
- * Used by both @buoy-gg/storage and @buoy-gg/zustand to keep expanded content
- * visually consistent across tools.
- *
- * @example
- * ```tsx
- * <ExpandedInfoRow label="Storage">
- *   <PillBadge color={color}>MMKV</PillBadge>
- * </ExpandedInfoRow>
- * ```
- */
-
-function ExpandedInfoRow({
-  label,
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.row,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: styles.label,
-      children: [label, ":"]
-    }), children]
-  });
-}
-
-/**
- * PillBadge — the pill-shaped badge used in expanded card rows.
- * Matches the storage card badge style (rounded-full, with border).
- */
-
-function PillBadge({
-  color,
-  children,
-  icon,
-  size = "md",
-  testID
-}) {
-  const isSm = size === "sm";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.pill, isSm && styles.pillSm, {
-      backgroundColor: color + "20",
-      borderColor: color + "40"
-    }],
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.pillIcon,
-      children: icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.pillText, isSm && styles.pillTextSm, {
-        color
-      }],
-      testID: testID,
-      children: children
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  label: {
-    fontSize: 10,
-    color: _macOSDesignSystemColors.macOSColors.text.muted,
-    fontWeight: "600",
-    minWidth: 70,
-    fontFamily: _fonts.monoFont
-  },
-  pill: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 999,
-    borderWidth: 1
-  },
-  pillSm: {
-    paddingHorizontal: 5,
-    paddingVertical: 1
-  },
-  pillIcon: {
-    marginRight: 4
-  },
-  pillText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: _fonts.monoFont,
-    letterSpacing: 0.5
-  },
-  pillTextSm: {
-    fontSize: 9,
-    letterSpacing: 0.3
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ExpandedInfoRow=ExpandedInfoRow;exports.PillBadge=PillBadge;var _reactNative=require("react-native");var _macOSDesignSystemColors=require("../gameUI/constants/macOSDesignSystemColors.js");var _fonts=require("../fonts.js");var _jsxRuntime=require("react/jsx-runtime");function ExpandedInfoRow({label:e,children:t}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.row,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.label,children:[e,":"]}),t]})}function PillBadge({color:e,children:t,icon:i,size:l="md",testID:n}){const r=l==="sm";return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.pill,r&&styles.pillSm,{backgroundColor:e+"20",borderColor:e+"40"}],children:[i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.pillIcon,children:i}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.pillText,r&&styles.pillTextSm,{color:e}],testID:n,children:t})]})}const styles=_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center",gap:10},label:{fontSize:10,color:_macOSDesignSystemColors.macOSColors.text.muted,fontWeight:"600",minWidth:70,fontFamily:_fonts.monoFont},pill:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:3,borderRadius:999,borderWidth:1},pillSm:{paddingHorizontal:5,paddingVertical:1},pillIcon:{marginRight:4},pillText:{fontSize:10,fontWeight:"700",fontFamily:_fonts.monoFont,letterSpacing:.5},pillTextSm:{fontSize:9,letterSpacing:.3}});

package/lib/commonjs/ui/components/ExportPreview.js

@@ -1,174 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ExportPreview = ExportPreview;
-exports.sizeWarningLevel = sizeWarningLevel;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _nightTheme = require("../night/nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * ExportPreview — the collapsible "what will be copied" panel at the bottom
- * of a copy-settings screen.
- *
- * Collapsed, it is a card: an eye icon, "Show Preview", a one-line summary
- * ("14 events · ~12.3 KB (mock data)"), a chevron — and, when the estimated
- * payload is big, an amber or red size warning under it. Expanded, it is a
- * "Hide Preview" bar over whatever the tool renders (a DataViewer for JSON,
- * a mono text block otherwise).
- *
- * network, events and highlight-updates each drew this (~120 lines apiece).
- * Tools keep their own summary string, warning copy and body; the chrome
- * and the size-threshold ladder live here.
- */
-
-/** The two-step ladder every copy view used (thresholds differ per tool). */
-function sizeWarningLevel(bytes, thresholds) {
-  if (bytes >= thresholds.danger) return "danger";
-  if (bytes >= thresholds.warning) return "warning";
-  return "none";
-}
-const DEFAULT_WARNING = {
-  warning: "Large payload — preview may be slow",
-  danger: "Very large payload — may cause performance issues"
-};
-function ExportPreview({
-  expanded,
-  onExpandedChange,
-  summary,
-  warningLevel = "none",
-  warningText = DEFAULT_WARNING,
-  testIDs,
-  renderBody
-}) {
-  if (!expanded) {
-    const warningColor = warningLevel === "danger" ? _nightTheme.night.color.danger : warningLevel === "warning" ? _nightTheme.night.color.warning : _nightTheme.night.color.textSecondary;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.collapsed,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.expandButton,
-        onPress: () => onExpandedChange(true),
-        testID: testIDs?.expand,
-        accessibilityRole: "button",
-        accessibilityLabel: "Show export preview",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.expandButtonContent,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Eye, {
-            size: 16,
-            color: _nightTheme.night.color.info
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.expandButtonTextContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.expandButtonTitle,
-              children: "Show Preview"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.expandButtonSubtitle,
-              testID: testIDs?.summary,
-              children: summary
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-            size: 16,
-            color: _nightTheme.night.color.textTertiary
-          })]
-        })
-      }), warningLevel !== "none" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.sizeWarning, warningLevel === "danger" && styles.sizeWarningDanger],
-        testID: testIDs?.warning,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AlertTriangle, {
-          size: 12,
-          color: warningColor
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.sizeWarningText, {
-            color: warningColor
-          }],
-          children: warningLevel === "danger" ? warningText.danger : warningText.warning
-        })]
-      }) : null]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: styles.collapseButton,
-      onPress: () => onExpandedChange(false),
-      testID: testIDs?.collapse,
-      accessibilityRole: "button",
-      accessibilityLabel: "Hide export preview",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.collapseButtonText,
-        children: "Hide Preview"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
-        size: 14,
-        color: _nightTheme.night.color.textSecondary
-      })]
-    }), renderBody()]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  collapsed: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: _nightTheme.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: _nightTheme.night.color.text
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: _nightTheme.night.color.textSecondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: _nightTheme.night.color.surfaceElevated,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: _nightTheme.night.color.textSecondary
-  },
-  sizeWarning: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: _nightTheme.night.color.warningSoft,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.warning + "30"
-  },
-  sizeWarningDanger: {
-    backgroundColor: _nightTheme.night.color.dangerSoft,
-    borderColor: _nightTheme.night.color.danger + "30"
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ExportPreview=ExportPreview;exports.sizeWarningLevel=sizeWarningLevel;var _reactNative=require("react-native");var _index=require("../../icons/index.js");var _nightTheme=require("../night/nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");function sizeWarningLevel(t,e){if(t>=e.danger)return"danger";if(t>=e.warning)return"warning";return"none"}const DEFAULT_WARNING={warning:"Large payload \u2014 preview may be slow",danger:"Very large payload \u2014 may cause performance issues"};function ExportPreview({expanded:t,onExpandedChange:e,summary:a,warningLevel:r="none",warningText:o=DEFAULT_WARNING,testIDs:n,renderBody:l}){if(!t){const i=r==="danger"?_nightTheme.night.color.danger:r==="warning"?_nightTheme.night.color.warning:_nightTheme.night.color.textSecondary;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.collapsed,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.expandButton,onPress:()=>e(true),testID:n?.expand,accessibilityRole:"button",accessibilityLabel:"Show export preview",children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.expandButtonContent,children:[(0,_jsxRuntime.jsx)(_index.Eye,{size:16,color:_nightTheme.night.color.info}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.expandButtonTextContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.expandButtonTitle,children:"Show Preview"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.expandButtonSubtitle,testID:n?.summary,children:a})]}),(0,_jsxRuntime.jsx)(_index.ChevronDown,{size:16,color:_nightTheme.night.color.textTertiary})]})}),r!=="none"?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.sizeWarning,r==="danger"&&styles.sizeWarningDanger],testID:n?.warning,children:[(0,_jsxRuntime.jsx)(_index.AlertTriangle,{size:12,color:i}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.sizeWarningText,{color:i}],children:r==="danger"?o.danger:o.warning})]}):null]})}return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.collapseButton,onPress:()=>e(false),testID:n?.collapse,accessibilityRole:"button",accessibilityLabel:"Hide export preview",children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.collapseButtonText,children:"Hide Preview"}),(0,_jsxRuntime.jsx)(_index.ChevronUp,{size:14,color:_nightTheme.night.color.textSecondary})]}),l()]})}const styles=_reactNative.StyleSheet.create({collapsed:{gap:8},expandButton:{backgroundColor:_nightTheme.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_nightTheme.night.color.border,padding:12},expandButtonContent:{flexDirection:"row",alignItems:"center",gap:10},expandButtonTextContainer:{flex:1},expandButtonTitle:{fontSize:13,fontWeight:"600",color:_nightTheme.night.color.text},expandButtonSubtitle:{fontSize:11,color:_nightTheme.night.color.textSecondary,marginTop:2},collapseButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:8,marginBottom:8,backgroundColor:_nightTheme.night.color.surfaceElevated,borderRadius:6,borderWidth:1,borderColor:_nightTheme.night.color.border},collapseButtonText:{fontSize:12,fontWeight:"500",color:_nightTheme.night.color.textSecondary},sizeWarning:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,backgroundColor:_nightTheme.night.color.warningSoft,borderRadius:6,borderWidth:1,borderColor:_nightTheme.night.color.warning+"30"},sizeWarningDanger:{backgroundColor:_nightTheme.night.color.dangerSoft,borderColor:_nightTheme.night.color.danger+"30"},sizeWarningText:{fontSize:11,fontWeight:"500",flex:1}});

package/lib/commonjs/ui/components/FilterComponents.js

@@ -1,291 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AddFilterButton = AddFilterButton;
-exports.AddFilterInput = AddFilterInput;
-exports.FilterBadge = FilterBadge;
-exports.FilterList = FilterList;
-exports.FilterSection = FilterSection;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _nightTheme = require("../night/nightTheme.js");
-var _fonts = require("../fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-// Container for filter section
-
-function FilterSection({
-  children,
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.filterSection, style],
-    children: children
-  });
-}
-
-// Individual filter badge
-
-function FilterBadge({
-  filter,
-  onRemove,
-  active = true,
-  color = "#E5E7EB"
-}) {
-  const backgroundColor = active ? `${color}15` : "transparent";
-  const borderColor = active ? `${color}40` : `${color}20`;
-  const textColor = active ? color : `${color}80`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    style: [styles.badge, {
-      backgroundColor,
-      borderColor
-    }],
-    onPress: onRemove,
-    disabled: !onRemove,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.badgeText, {
-        color: textColor
-      }],
-      numberOfLines: 1,
-      children: filter
-    }), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: onRemove,
-      style: styles.removeButton,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-        size: 12,
-        color: textColor
-      })
-    })]
-  });
-}
-
-// Add filter input component
-
-function AddFilterInput({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-  placeholder = "Add filter...",
-  color = "#E5E7EB",
-  testID = "buoy-filter-input"
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.inputContainer, {
-      borderColor: `${color}40`
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-      testID: testID,
-      accessibilityLabel: placeholder,
-      value: value,
-      onChangeText: onChange,
-      onSubmitEditing: onSubmit,
-      placeholder: placeholder,
-      placeholderTextColor: `${color}40`,
-      style: [styles.input, {
-        color
-      }],
-      autoFocus: true,
-      returnKeyType: "done",
-      autoCorrect: false,
-      autoCapitalize: "none",
-      autoComplete: "off",
-      spellCheck: false
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputButtons,
-      children: [value.trim() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: onSubmit,
-        testID: `${testID}-add`,
-        accessibilityLabel: "Add filter",
-        accessibilityRole: "button",
-        style: [styles.inlineAddButton, {
-          backgroundColor: `${color}15`,
-          borderColor: `${color}40`
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.inlineAddButtonText, {
-            color
-          }],
-          children: "Add"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: onCancel,
-        testID: `${testID}-cancel`,
-        accessibilityLabel: "Cancel adding filter",
-        accessibilityRole: "button",
-        style: styles.cancelButton,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-          size: 16,
-          color: `${color}60`
-        })
-      })]
-    })]
-  });
-}
-
-// Add filter button
-
-function AddFilterButton({
-  onPress,
-  color = "#E5E7EB",
-  label = "Add Filter",
-  testID = "buoy-filter-add-open"
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    style: [styles.addButton, {
-      borderColor: `${color}40`
-    }],
-    onPress: onPress,
-    testID: testID,
-    accessibilityLabel: label,
-    accessibilityRole: "button",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
-      size: 14,
-      color: color
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.addButtonText, {
-        color
-      }],
-      children: label
-    })]
-  });
-}
-
-// Filter list component
-
-function FilterList({
-  filters,
-  onRemoveFilter,
-  activeFilters,
-  color = "#E5E7EB",
-  renderItemMeta
-}) {
-  const filterArray = Array.from(filters);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.filterListColumn,
-    children: filterArray.map(filter => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: styles.filterItemRow,
-      onPress: () => onRemoveFilter?.(filter),
-      activeOpacity: 0.8,
-      testID: `buoy-filter-active-${filter}`,
-      accessibilityLabel: `Remove filter ${filter}`,
-      accessibilityRole: "button",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.filterItemText, {
-          color
-        }],
-        numberOfLines: 1,
-        children: filter
-      }), renderItemMeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.filterItemMeta,
-        children: renderItemMeta(filter)
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-        size: 12,
-        color: `${color}80`
-      })]
-    }, filter))
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  filterSection: {
-    padding: 16,
-    backgroundColor: "transparent"
-  },
-  badge: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 16,
-    borderWidth: 1,
-    marginRight: 8
-  },
-  badgeText: {
-    fontSize: 13,
-    fontWeight: "500",
-    marginRight: 4
-  },
-  removeButton: {
-    marginLeft: 4,
-    padding: 2
-  },
-  inputContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _nightTheme.night.color.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    marginBottom: 8
-  },
-  input: {
-    flex: 1,
-    fontSize: 13,
-    paddingVertical: 0,
-    color: _nightTheme.night.color.text
-  },
-  inputButtons: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  cancelButton: {
-    padding: 4,
-    borderRadius: 6,
-    backgroundColor: _nightTheme.night.color.surfaceElevated
-  },
-  inlineAddButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 6,
-    borderWidth: 1
-  },
-  inlineAddButtonText: {
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  addButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderStyle: "dashed",
-    borderColor: _nightTheme.night.color.border,
-    backgroundColor: _nightTheme.night.color.surfaceElevated
-  },
-  addButtonText: {
-    fontSize: 13,
-    fontWeight: "500",
-    marginLeft: 6
-  },
-  filterListColumn: {
-    gap: 8
-  },
-  filterItemRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    backgroundColor: _nightTheme.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border
-  },
-  filterItemText: {
-    flex: 1,
-    fontSize: 12,
-    fontFamily: _fonts.monoFont,
-    marginRight: 8,
-    color: _nightTheme.night.color.text
-  },
-  filterItemMeta: {
-    marginRight: 8
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.AddFilterButton=AddFilterButton;exports.AddFilterInput=AddFilterInput;exports.FilterBadge=FilterBadge;exports.FilterList=FilterList;exports.FilterSection=FilterSection;var _reactNative=require("react-native");var _index=require("../../icons/index.js");var _nightTheme=require("../night/nightTheme.js");var _fonts=require("../fonts.js");var _jsxRuntime=require("react/jsx-runtime");function FilterSection({children:n,style:e}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.filterSection,e],children:n})}function FilterBadge({filter:n,onRemove:e,active:o=true,color:i="#E5E7EB"}){const l=o?`${i}15`:"transparent";const r=o?`${i}40`:`${i}20`;const t=o?i:`${i}80`;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.badge,{backgroundColor:l,borderColor:r}],onPress:e,disabled:!e,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:t}],numberOfLines:1,children:n}),e&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:e,style:styles.removeButton,children:(0,_jsxRuntime.jsx)(_index.X,{size:12,color:t})})]})}function AddFilterInput({value:n,onChange:e,onSubmit:o,onCancel:i,placeholder:l="Add filter...",color:r="#E5E7EB",testID:t="buoy-filter-input"}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.inputContainer,{borderColor:`${r}40`}],children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{testID:t,accessibilityLabel:l,value:n,onChangeText:e,onSubmitEditing:o,placeholder:l,placeholderTextColor:`${r}40`,style:[styles.input,{color:r}],autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none",autoComplete:"off",spellCheck:false}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inputButtons,children:[n.trim()&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:o,testID:`${t}-add`,accessibilityLabel:"Add filter",accessibilityRole:"button",style:[styles.inlineAddButton,{backgroundColor:`${r}15`,borderColor:`${r}40`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.inlineAddButtonText,{color:r}],children:"Add"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:i,testID:`${t}-cancel`,accessibilityLabel:"Cancel adding filter",accessibilityRole:"button",style:styles.cancelButton,children:(0,_jsxRuntime.jsx)(_index.X,{size:16,color:`${r}60`})})]})]})}function AddFilterButton({onPress:n,color:e="#E5E7EB",label:o="Add Filter",testID:i="buoy-filter-add-open"}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.addButton,{borderColor:`${e}40`}],onPress:n,testID:i,accessibilityLabel:o,accessibilityRole:"button",children:[(0,_jsxRuntime.jsx)(_index.Plus,{size:14,color:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:e}],children:o})]})}function FilterList({filters:n,onRemoveFilter:e,activeFilters:o,color:i="#E5E7EB",renderItemMeta:l}){const r=Array.from(n);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.filterListColumn,children:r.map(t=>(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.filterItemRow,onPress:()=>e?.(t),activeOpacity:.8,testID:`buoy-filter-active-${t}`,accessibilityLabel:`Remove filter ${t}`,accessibilityRole:"button",children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterItemText,{color:i}],numberOfLines:1,children:t}),l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.filterItemMeta,children:l(t)}):null,(0,_jsxRuntime.jsx)(_index.X,{size:12,color:`${i}80`})]},t))})}const styles=_reactNative.StyleSheet.create({filterSection:{padding:16,backgroundColor:"transparent"},badge:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:16,borderWidth:1,marginRight:8},badgeText:{fontSize:13,fontWeight:"500",marginRight:4},removeButton:{marginLeft:4,padding:2},inputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_nightTheme.night.color.surfaceElevated,borderRadius:10,borderWidth:1,borderColor:_nightTheme.night.color.border,paddingHorizontal:14,paddingVertical:10,marginBottom:8},input:{flex:1,fontSize:13,paddingVertical:0,color:_nightTheme.night.color.text},inputButtons:{flexDirection:"row",alignItems:"center",gap:8},cancelButton:{padding:4,borderRadius:6,backgroundColor:_nightTheme.night.color.surfaceElevated},inlineAddButton:{paddingHorizontal:12,paddingVertical:6,borderRadius:6,borderWidth:1},inlineAddButtonText:{fontSize:12,fontWeight:"600"},addButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingHorizontal:14,paddingVertical:10,borderRadius:10,borderWidth:1,borderStyle:"dashed",borderColor:_nightTheme.night.color.border,backgroundColor:_nightTheme.night.color.surfaceElevated},addButtonText:{fontSize:13,fontWeight:"500",marginLeft:6},filterListColumn:{gap:8},filterItemRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:10,paddingHorizontal:12,backgroundColor:_nightTheme.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_nightTheme.night.color.border},filterItemText:{flex:1,fontSize:12,fontFamily:_fonts.monoFont,marginRight:8,color:_nightTheme.night.color.text},filterItemMeta:{marginRight:8}});

package/lib/commonjs/ui/components/GripVerticalIcon.js

@@ -1,65 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GripVerticalIcon = GripVerticalIcon;
-var _reactNative = require("react-native");
-var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Two columns of three dots — the standard "grabber" affordance used by
- * floating bubbles in this suite (FloatingDevTools, perf-monitor HUD).
- *
- * Sizing comes from `getGripIconLayout` in `@buoy-gg/floating-tools-core`
- * so all bubbles share identical proportions.
- */
-function GripVerticalIcon({
-  size = 24,
-  color = _gameUIColors.buoyColors.textSecondary + "CC"
-}) {
-  const layout = (0, _floatingToolsCore.getGripIconLayout)(size);
-  const containerStyle = {
-    width: size,
-    height: size,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  };
-  const columnStyle = {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    marginHorizontal: layout.columnGap / 2
-  };
-  const dotStyle = {
-    width: layout.dotSize,
-    height: layout.dotSize,
-    borderRadius: layout.dotSize / 2,
-    backgroundColor: color,
-    marginVertical: layout.rowGap / 2
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: containerStyle,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: columnStyle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: columnStyle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dotStyle
-      })]
-    })]
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.GripVerticalIcon=GripVerticalIcon;var _reactNative=require("react-native");var _floatingToolsCore=require("@buoy-gg/floating-tools-core");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _jsxRuntime=require("react/jsx-runtime");function GripVerticalIcon({size:r=24,color:i=_gameUIColors.buoyColors.textSecondary+"CC"}){const t=(0,_floatingToolsCore.getGripIconLayout)(r);const n={width:r,height:r,flexDirection:"row",alignItems:"center",justifyContent:"center"};const o={flexDirection:"column",alignItems:"center",justifyContent:"center",marginHorizontal:t.columnGap/2};const e={width:t.dotSize,height:t.dotSize,borderRadius:t.dotSize/2,backgroundColor:i,marginVertical:t.rowGap/2};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:o,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:e}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:e}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:e})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:o,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:e}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:e}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:e})]})]})}