@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,721 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import { useEffect, useState } from "react";
+import { Filter, Plus, Copy, Eye, Info } from "../../icons/index.js";
+import { SectionHeader } from "./SectionHeader.js";
+import { FilterList, AddFilterInput, AddFilterButton } from "./FilterComponents.js";
+import { useFilterManager } from "../../hooks/useFilterManager.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function DynamicFilterView({
+  sections = [],
+  filterSummarySection,
+  addFilterSection,
+  includeOnlySection,
+  availableItemsSection,
+  howItWorksSection,
+  previewSection,
+  onFilterChange,
+  onPatternToggle,
+  onPatternAdd,
+  activePatterns = new Set(),
+  tabs,
+  activeTab,
+  onTabChange
+}) {
+  const filterManager = useFilterManager(activePatterns);
+  const includeFilterManager = useFilterManager(includeOnlySection?.patterns || new Set());
+  const [internalActiveTab, setInternalActiveTab] = useState(tabs?.[0]?.id || "");
+  const currentActiveTab = activeTab || internalActiveTab;
+  useEffect(() => {
+    if (activePatterns.size !== filterManager.filters.size || !Array.from(activePatterns).every(p => filterManager.filters.has(p))) {
+      // Sync external changes
+    }
+  }, [activePatterns, filterManager.filters]);
+  const handleAddPattern = () => {
+    if (filterManager.newFilter.trim() && onPatternAdd) {
+      onPatternAdd(filterManager.newFilter.trim());
+      filterManager.addFilter(filterManager.newFilter);
+    }
+  };
+  const handleAddIncludePattern = () => {
+    if (includeFilterManager.newFilter.trim() && includeOnlySection?.onPatternAdd) {
+      includeOnlySection.onPatternAdd(includeFilterManager.newFilter.trim());
+      includeFilterManager.addFilter(includeFilterManager.newFilter);
+    }
+  };
+  const suggestedItems = availableItemsSection?.items?.filter(item => {
+    return !Array.from(activePatterns).some(pattern => item.includes(pattern));
+  }) || [];
+  const renderTabs = () => {
+    if (!tabs || tabs.length === 0) return null;
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.tabContainer,
+      children: tabs.map(tab => /*#__PURE__*/_jsxs(TouchableOpacity, {
+        onPress: () => {
+          if (onTabChange) onTabChange(tab.id);else setInternalActiveTab(tab.id);
+        },
+        style: [styles.tabButton, currentActiveTab === tab.id ? styles.tabButtonActive : styles.tabButtonInactive],
+        children: [tab.icon && /*#__PURE__*/_jsx(tab.icon, {
+          size: 14,
+          color: currentActiveTab === tab.id ? buoyColors.primary : buoyColors.textMuted
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.tabButtonText, currentActiveTab === tab.id ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
+          children: tab.label
+        }), tab.count !== undefined && tab.count > 0 && /*#__PURE__*/_jsx(View, {
+          style: styles.tabBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.tabBadgeText,
+            children: tab.count
+          })
+        })]
+      }, tab.id))
+    });
+  };
+  const renderFilterSection = section => {
+    if (section.type === "custom" && section.renderCustom) {
+      return section.renderCustom();
+    }
+    if (section.type === "patterns") {
+      return null; // Handled separately
+    }
+    if (!section.data || section.data.length === 0) return null;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [section.icon && /*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: section.icon,
+          color: section.color || buoyColors.primary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: section.title
+        })]
+      }), section.description && /*#__PURE__*/_jsx(Text, {
+        style: styles.sectionDescription,
+        children: section.description
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.filterGrid,
+        children: section.data.map(option => {
+          const hasCount = option.count !== undefined;
+          const countIsZero = hasCount && option.count === 0;
+          const showLabel = section.type !== "method" || option.icon;
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.filterCard, option.isActive && styles.activeFilterCard],
+            onPress: () => onFilterChange?.(option.id, option.value),
+            children: [option.icon ? /*#__PURE__*/_jsx(option.icon, {
+              size: 24,
+              color: option.color,
+              style: styles.filterIcon
+            }) : section.type === "method" ? /*#__PURE__*/_jsx(View, {
+              style: [styles.methodBadgeCompact, {
+                backgroundColor: `${option.color}20`
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.methodTextCompact, {
+                  color: option.color
+                }],
+                numberOfLines: 1,
+                adjustsFontSizeToFit: true,
+                minimumFontScale: 0.8,
+                children: option.label
+              })
+            }) : null, hasCount && /*#__PURE__*/_jsx(Text, {
+              style: [countIsZero ? styles.filterCountZero : styles.filterCountActive],
+              children: option.count
+            }), showLabel && /*#__PURE__*/_jsx(Text, {
+              style: styles.filterLabelCompact,
+              children: option.label
+            }), option.description && /*#__PURE__*/_jsx(Text, {
+              style: styles.filterDescriptionBottom,
+              children: option.description
+            })]
+          }, option.id);
+        })
+      })]
+    }, section.id);
+  };
+  const renderContent = () => {
+    if (tabs && currentActiveTab) {
+      const activeTabData = tabs.find(tab => tab.id === currentActiveTab);
+      if (activeTabData?.content) {
+        return activeTabData.content();
+      }
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [filterSummarySection?.enabled && (filterSummarySection.includePatterns?.size || filterSummarySection.excludePatterns?.size) ? /*#__PURE__*/_jsxs(View, {
+        style: styles.filterSummarySection,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.filterSummaryHeader,
+          children: [/*#__PURE__*/_jsx(Info, {
+            size: 14,
+            color: buoyColors.warning
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.filterSummaryTitle,
+            children: "Filters Active"
+          })]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.filterSummaryText,
+          children: ["Showing ", filterSummarySection.filteredCount, " of ", filterSummarySection.totalCount, " queries", filterSummarySection.includePatterns?.size ? /*#__PURE__*/_jsxs(Text, {
+            style: styles.filterSummaryInclude,
+            children: [" ", "\u2022 Including: ", Array.from(filterSummarySection.includePatterns).join(", ")]
+          }) : null, filterSummarySection.excludePatterns?.size ? /*#__PURE__*/_jsxs(Text, {
+            style: styles.filterSummaryExclude,
+            children: [" ", "\u2022 Excluding: ", Array.from(filterSummarySection.excludePatterns).join(", ")]
+          }) : null]
+        })]
+      }) : null, sections.map(renderFilterSection), includeOnlySection?.enabled && /*#__PURE__*/_jsxs(View, {
+        style: styles.includeOnlySection,
+        children: [/*#__PURE__*/_jsxs(SectionHeader, {
+          children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+            icon: includeOnlySection.icon || Eye,
+            color: buoyColors.success,
+            size: 12
+          }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+            children: includeOnlySection.title || "INCLUDE ONLY FILTERS"
+          }), includeOnlySection.patterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+            count: includeOnlySection.patterns.size,
+            color: buoyColors.success
+          })]
+        }), includeOnlySection.description && /*#__PURE__*/_jsx(Text, {
+          style: styles.includeOnlyDescription,
+          children: includeOnlySection.description
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.includeOnlyInputWrapper,
+          children: !includeFilterManager.showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
+            onPress: () => includeFilterManager.setShowAddInput(true),
+            color: buoyColors.success,
+            label: "Add include pattern"
+          }) : /*#__PURE__*/_jsx(AddFilterInput, {
+            value: includeFilterManager.newFilter,
+            onChange: includeFilterManager.setNewFilter,
+            onSubmit: handleAddIncludePattern,
+            onCancel: () => {
+              includeFilterManager.setShowAddInput(false);
+              includeFilterManager.setNewFilter("");
+            },
+            placeholder: includeOnlySection.placeholder || "Enter pattern to include...",
+            color: buoyColors.success
+          })
+        }), includeOnlySection.patterns.size > 0 && /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.includeOnlyFiltersContent,
+          showsVerticalScrollIndicator: true,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/_jsx(FilterList, {
+            filters: includeOnlySection.patterns,
+            onRemoveFilter: includeOnlySection.onPatternToggle,
+            color: buoyColors.success
+          })
+        })]
+      }), addFilterSection?.enabled && /*#__PURE__*/_jsxs(View, {
+        style: styles.excludeFiltersSection,
+        children: [/*#__PURE__*/_jsxs(SectionHeader, {
+          children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+            icon: Filter,
+            color: buoyColors.primary,
+            size: 12
+          }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+            children: addFilterSection.title || "EXCLUDE FILTERS"
+          }), activePatterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+            count: activePatterns.size,
+            color: buoyColors.primary
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.excludeFiltersDescription,
+          children: "Hide queries matching these patterns from the list."
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.excludeFiltersInputWrapper,
+          children: !filterManager.showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
+            onPress: () => filterManager.setShowAddInput(true),
+            color: buoyColors.primary,
+            label: "Add exclude pattern"
+          }) : /*#__PURE__*/_jsx(AddFilterInput, {
+            value: filterManager.newFilter,
+            onChange: filterManager.setNewFilter,
+            onSubmit: handleAddPattern,
+            onCancel: () => {
+              filterManager.setShowAddInput(false);
+              filterManager.setNewFilter("");
+            },
+            placeholder: addFilterSection.placeholder || "Enter pattern to exclude...",
+            color: buoyColors.primary
+          })
+        }), activePatterns.size > 0 && /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.excludeFiltersContent,
+          showsVerticalScrollIndicator: true,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/_jsx(FilterList, {
+            filters: activePatterns,
+            onRemoveFilter: onPatternToggle,
+            color: buoyColors.primary
+          })
+        })]
+      }), availableItemsSection?.enabled && /*#__PURE__*/_jsxs(View, {
+        style: styles.availableKeysSection,
+        children: [/*#__PURE__*/_jsxs(SectionHeader, {
+          children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+            icon: availableItemsSection.icon || Plus,
+            color: buoyColors.primary,
+            size: 12
+          }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+            children: availableItemsSection.title || "AVAILABLE ITEMS"
+          }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+            count: suggestedItems.length,
+            color: buoyColors.primary
+          })]
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.availableKeysScroll,
+          horizontal: false,
+          showsVerticalScrollIndicator: true,
+          nestedScrollEnabled: true,
+          scrollEnabled: true,
+          children: suggestedItems.length > 0 ? suggestedItems.map(item => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            onPress: () => {
+              if (onPatternAdd) {
+                onPatternAdd(item);
+                filterManager.addFilter(item);
+              }
+            },
+            style: styles.availableKeyItem,
+            "sentry-label": "ignore-touchable-opacity",
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.availableKeyText,
+              numberOfLines: 1,
+              children: item
+            }), /*#__PURE__*/_jsx(Plus, {
+              size: 12,
+              color: buoyColors.primary
+            })]
+          }, item)) : /*#__PURE__*/_jsx(Text, {
+            style: styles.emptyStateText,
+            children: availableItemsSection.emptyMessage || "No items available"
+          })
+        })]
+      }), howItWorksSection?.enabled && /*#__PURE__*/_jsxs(View, {
+        style: styles.howItWorksSection,
+        children: [/*#__PURE__*/_jsxs(SectionHeader, {
+          children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+            icon: howItWorksSection.icon || Filter,
+            color: buoyColors.textSecondary,
+            size: 12
+          }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+            children: howItWorksSection.title || "HOW FILTERS WORK"
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.howItWorksText,
+          children: howItWorksSection.description || "Filters help you focus on relevant data by hiding unwanted items."
+        }), howItWorksSection.examples && howItWorksSection.examples.length > 0 && /*#__PURE__*/_jsxs(View, {
+          style: styles.examplesContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.examplesTitle,
+            children: "EXAMPLES:"
+          }), howItWorksSection.examples.map((example, index) => /*#__PURE__*/_jsx(Text, {
+            style: styles.exampleItem,
+            children: example
+          }, index))]
+        })]
+      }), previewSection?.enabled && /*#__PURE__*/_jsxs(View, {
+        style: styles.previewSection,
+        children: [/*#__PURE__*/_jsxs(SectionHeader, {
+          children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+            icon: previewSection.icon || Copy,
+            color: buoyColors.primary,
+            size: 12
+          }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+            children: previewSection.title || "PREVIEW"
+          }), previewSection.headerActions && /*#__PURE__*/_jsx(SectionHeader.Actions, {
+            children: previewSection.headerActions()
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.previewContent,
+          children: previewSection.content()
+        })]
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [renderTabs(), /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.content,
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      "sentry-label": "ignore-scrollview",
+      children: renderContent()
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  content: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 24
+  },
+  tabContainer: {
+    flexDirection: "row",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 8,
+    backgroundColor: buoyColors.card,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border
+  },
+  tabButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1
+  },
+  tabButtonActive: {
+    backgroundColor: buoyColors.primary + "20",
+    borderColor: buoyColors.primary,
+    borderWidth: 2
+  },
+  tabButtonInactive: {
+    backgroundColor: buoyColors.hover,
+    borderColor: buoyColors.border
+  },
+  tabButtonText: {
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.5
+  },
+  tabButtonTextActive: {
+    color: buoyColors.primary
+  },
+  tabButtonTextInactive: {
+    color: buoyColors.textMuted
+  },
+  tabBadge: {
+    backgroundColor: buoyColors.primary + "40",
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 8,
+    minWidth: 18,
+    alignItems: "center"
+  },
+  tabBadgeText: {
+    fontSize: 9,
+    color: buoyColors.primary,
+    fontWeight: "700"
+  },
+  section: {
+    marginBottom: 8
+  },
+  filterInputWrapper: {
+    marginBottom: 4
+  },
+  filterGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 8
+  },
+  filterCard: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 12,
+    // rounded-xl
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    width: 72,
+    minHeight: 68
+  },
+  activeFilterCard: {
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary,
+    borderWidth: 2,
+    // Subtle glow effect like web
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  filterIcon: {
+    marginBottom: 0
+  },
+  filterCountActive: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    marginTop: 3,
+    marginBottom: 1,
+    textShadowColor: "rgba(0, 0, 0, 0.2)",
+    textShadowOffset: {
+      width: 0,
+      height: 0.5
+    },
+    textShadowRadius: 1
+  },
+  filterCountZero: {
+    fontSize: 11,
+    fontWeight: "500",
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    marginTop: 3,
+    marginBottom: 1
+  },
+  filterLabelCompact: {
+    fontSize: 10,
+    color: buoyColors.text,
+    fontWeight: "600",
+    textAlign: "center",
+    textTransform: "capitalize",
+    textShadowColor: "rgba(0, 0, 0, 0.3)",
+    textShadowOffset: {
+      width: 0,
+      height: 0.5
+    },
+    textShadowRadius: 1
+  },
+  filterDescriptionBottom: {
+    fontSize: 8,
+    color: buoyColors.textMuted,
+    textAlign: "center",
+    marginTop: 2,
+    lineHeight: 11
+  },
+  sectionDescription: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    marginTop: 4,
+    marginBottom: 4,
+    lineHeight: 14
+  },
+  methodBadgeCompact: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 5,
+    minWidth: 48,
+    maxWidth: 60,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  methodTextCompact: {
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 0.3,
+    fontFamily: "monospace"
+  },
+  activeFiltersSection: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    // rounded-2xl like web
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  activeFiltersContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    maxHeight: 200
+  },
+  includeOnlySection: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    // rounded-2xl like web
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  includeOnlyDescription: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    lineHeight: 14
+  },
+  includeOnlyInputWrapper: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  includeOnlyFiltersContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    maxHeight: 150
+  },
+  excludeFiltersSection: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    // rounded-2xl like web
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  excludeFiltersDescription: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    lineHeight: 14
+  },
+  excludeFiltersInputWrapper: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  excludeFiltersContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    maxHeight: 150
+  },
+  filterSummarySection: {
+    backgroundColor: buoyColors.warning + "15",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.warning + "40",
+    padding: 12,
+    marginBottom: 12
+  },
+  filterSummaryHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: 6
+  },
+  filterSummaryTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.warning
+  },
+  filterSummaryText: {
+    fontSize: 11,
+    color: buoyColors.text,
+    lineHeight: 16
+  },
+  filterSummaryInclude: {
+    color: buoyColors.success,
+    fontWeight: "500"
+  },
+  filterSummaryExclude: {
+    color: buoyColors.primary,
+    fontWeight: "500"
+  },
+  emptyStateText: {
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    fontStyle: "italic",
+    textAlign: "center",
+    paddingVertical: 12
+  },
+  availableKeysSection: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    // rounded-2xl like web
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  availableKeysScroll: {
+    maxHeight: 150,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16
+  },
+  availableKeyItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginBottom: 8
+  },
+  availableKeyText: {
+    flex: 1,
+    fontSize: 11,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    marginRight: 8
+  },
+  howItWorksSection: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    // rounded-2xl like web
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    lineHeight: 16,
+    marginBottom: 12,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: "monospace"
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    lineHeight: 16
+  },
+  previewSection: {
+    backgroundColor: buoyColors.hover,
+    // Slightly lighter to distinguish from other sections
+    borderRadius: 16,
+    // rounded-2xl like web
+    borderWidth: 1,
+    borderColor: buoyColors.borderStrong,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  previewContent: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 16,
+    backgroundColor: buoyColors.base,
+    // Darker content area for contrast
+    marginHorizontal: 12,
+    marginBottom: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  }
+});