@buoy-gg/jotai 7.0.32 → 7.0.34

package/lib/commonjs/jotai/components/JotaiAtomBrowser.js

@@ -53,20 +53,14 @@ function getWriteKindLabel(atom) {
   return atom.setValue ? "writable" : "derived";
 }
 function EmptyBrowserState() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.emptyState,
-    testID: `${_testIDs.JOTAI_TEST_ID}-atoms-empty`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
-      size: 32,
-      color: _sharedUi.night.color.textTertiary
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyTitle,
-      testID: `${_testIDs.JOTAI_TEST_ID}-atoms-empty-title`,
-      children: "No atoms registered"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyText,
-      children: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    testID: `${_testIDs.JOTAI_TEST_ID}-atoms-empty`
+    // scanning = "scanning for targets… and finding none". The registry is
+    // discovered, not configured, so an empty one is a scan result.
+    ,
+    otto: "scanning",
+    title: "No atoms registered",
+    message: "Use watchAtoms(store, { atomName }) to register your Jotai atoms.\nThey will appear here with their current value."
   });
 }
 function JotaiAtomBrowser({
@@ -83,17 +77,19 @@ function JotaiAtomBrowser({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
   }
   if (filteredAtoms.length === 0 && searchQuery) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.emptyState,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
       testID: `${_testIDs.JOTAI_TEST_ID}-atoms-no-match`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyTitle,
-        testID: `${_testIDs.JOTAI_TEST_ID}-atoms-no-match-title`,
-        children: "No matching atoms"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: styles.emptyText,
-        children: ["No atoms match \"", searchQuery, "\""]
-      })]
+      ...(0, _sharedUi.resolveListEmptyState)({
+        subject: "atoms",
+        verb: "registered",
+        search: searchQuery,
+        total: atoms.length,
+        waiting: {
+          otto: "scanning",
+          title: "No atoms registered",
+          message: "Use watchAtoms() to register your Jotai atoms."
+        }
+      })
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
@@ -199,22 +195,5 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "700",
     color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
   }
 });

package/lib/commonjs/jotai/components/JotaiAtomChangeItem.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JotaiAtomChangeItem = void 0;
 var _react = require("react");
-var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jotaiStateStore = require("../utils/jotaiStateStore");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -72,59 +71,15 @@ const JotaiAtomChangeItem = exports.JotaiAtomChangeItem = /*#__PURE__*/(0, _reac
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-
-  // Always a custom badge, even when there is no icon to hang off it. The
-  // alternative — letting CompactRow draw `badgeText` itself — leaves the one
-  // row whose badge matters most (a write that moved the atom's identity but
-  // none of its contents) as the only row in the list with no handle on its
-  // badge. Same call, and the same reason, as ZustandStateChangeItem.
-  const customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.badgeContainer,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.badgeText, {
-        color: statusColor
-      }],
-      testID: testID ? `${testID}-badge` : undefined,
-      children: badgeText
-    }), change.hasValueChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.changeBadge,
-      testID: testID ? `${testID}-change` : undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-        size: 12,
-        color: _sharedUi.buoyColors.warning
-      })
-    }) : null]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
-    statusDotColor: statusColor,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+    statusColor: statusColor,
     statusLabel: statusLabel,
-    statusSublabel: sublabel,
+    sublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
-      timestamp: change.timestamp
-    }),
-    customBadge: customBadge,
-    badgeColor: statusColor,
-    showChevron: true,
+    timestamp: change.timestamp,
+    badgeText: badgeText,
+    changed: change.hasValueChange,
     onPress: () => onPress(change),
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    primaryTestID: testID ? `${testID}-keys` : undefined
+    testID: testID
   });
-});
-const styles = _reactNative.StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  }
 });

package/lib/commonjs/jotai/components/JotaiAtomDetailContent.js

@@ -29,61 +29,17 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const VIEW_CONFIGS = [{
   key: "change",
   label: "CHANGE",
-  icon: _sharedUi.FileText,
-  activeColor: _sharedUi.night.color.accent
+  icon: _sharedUi.FileText
 }, {
   key: "value",
   label: "VALUE",
-  icon: _sharedUi.Database,
-  activeColor: _sharedUi.night.color.accent
+  icon: _sharedUi.Database
 }, {
   key: "diff",
   label: "DIFF",
-  icon: _sharedUi.GitBranch,
-  activeColor: _sharedUi.night.color.accent
+  icon: _sharedUi.GitBranch
 }];
-function DetailViewToggle({
-  activeView,
-  onViewChange,
-  diffDisabled
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: toggleStyles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [toggleStyles.card, isActive && [toggleStyles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && toggleStyles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(config.key),
-        activeOpacity: 0.7,
-        testID: `${_testIDs.JOTAI_TEST_ID}-view-${config.key}`,
-        accessibilityRole: "button",
-        accessibilityLabel: config.label,
-        accessibilityState: {
-          disabled: isDisabled,
-          selected: isActive
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: toggleStyles.cardContent,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [toggleStyles.cardLabel, isActive && {
-              color: config.activeColor
-            }, isDisabled && {
-              color: _sharedUi.night.color.textTertiary
-            }],
-            children: config.label
-          })]
-        })
-      }, config.key);
-    })
-  });
-}
+const DIFF_DISABLED = ["diff"];
 
 // ---- Helpers ----
 
@@ -432,10 +388,12 @@ function JotaiAtomDetailContent({
   const showInternalFooter = !disableInternalFooter && totalChanges > 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DetailViewToggle, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DetailViewToggle, {
+      views: VIEW_CONFIGS,
       activeView: activeView,
       onViewChange: setActiveView,
-      diffDisabled: diffDisabled
+      disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
+      testIDPrefix: _testIDs.JOTAI_TEST_ID
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
       children: [activeView === "change" && /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiAtomInfoView, {
@@ -587,43 +545,6 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   }
 });
-const toggleStyles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  card: {
-    flex: 1,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingVertical: 10,
-    paddingHorizontal: 10,
-    justifyContent: "center"
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: _sharedUi.night.color.textSecondary
-  }
-});
 const infoStyles = _reactNative.StyleSheet.create({
   container: {
     flex: 1

package/lib/commonjs/jotai/components/JotaiEventFilterView.js

@@ -5,317 +5,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JotaiEventFilterView = JotaiEventFilterView;
 var _react = require("react");
-var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _jotaiStateStore = require("../utils/jotaiStateStore");
 var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * JotaiEventFilterView
  *
- * Filter configuration UI for hiding atoms from the Atoms and Events tabs.
- * Mirrors ZustandEventFilterView.tsx from @buoy-gg/zustand.
+ * The shared `EntityFilterView` with jotai's nouns: watched atoms you can
+ * tap to hide, active atom-name patterns, and how it works.
  */
 
-function getAtomColorForPattern(pattern, atoms) {
-  const match = atoms.find(a => a.label.toLowerCase().includes(pattern.toLowerCase()));
-  return match ? match.color : null;
-}
+const EXAMPLES = ["• count -> hides countAtom from atoms & events", "• auth -> hides authAtom, authStatusAtom", "• user -> hides userAtom from both tabs"];
 function JotaiEventFilterView({
   ignoredPatterns,
   onTogglePattern,
   onAddPattern,
   atoms
 }) {
-  const [newPattern, setNewPattern] = (0, _react.useState)("");
-  const handleAddPattern = () => {
-    const trimmed = newPattern.trim();
-    if (trimmed && !ignoredPatterns.has(trimmed)) {
-      onAddPattern(trimmed);
-      setNewPattern("");
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.scrollContent,
-    showsVerticalScrollIndicator: false,
-    nestedScrollEnabled: true,
-    testID: `${_testIDs.JOTAI_TEST_ID}-filters-scroll`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
-          icon: _sharedUi.Filter,
-          color: _sharedUi.night.color.textSecondary,
-          size: 12
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
-          children: "REGISTERED ATOMS"
-        })]
-      }), atoms.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyText,
-        testID: `${_testIDs.JOTAI_TEST_ID}-filters-atoms-empty`,
-        children: "No atoms registered yet."
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        style: styles.atomList,
-        contentContainerStyle: styles.atomListContent,
-        nestedScrollEnabled: true,
-        testID: `${_testIDs.JOTAI_TEST_ID}-filters-atom-list`,
-        children: atoms.map(atom => {
-          const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(atom.label);
-          const isFiltered = Array.from(ignoredPatterns).some(p => atom.label.toLowerCase().includes(p.toLowerCase()));
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: [styles.atomRow, isFiltered && styles.atomRowFiltered],
-            onPress: () => onTogglePattern(atom.label),
-            activeOpacity: 0.7,
-            testID: `${_testIDs.JOTAI_TEST_ID}-filters-atom-${(0, _testIDs.slugForTestID)(atom.label)}`,
-            accessibilityRole: "button",
-            accessibilityLabel: isFiltered ? `Show ${atom.label}` : `Hide ${atom.label}`,
-            accessibilityState: {
-              selected: isFiltered
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.atomDot, {
-                backgroundColor: atomColor
-              }]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.atomRowText, {
-                color: atomColor
-              }, isFiltered && styles.atomRowTextFiltered],
-              numberOfLines: 1,
-              children: atom.label
-            }), isFiltered ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.filteredLabel,
-              children: "filtered"
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.addLabel, {
-                color: atomColor
-              }],
-              children: "+ add"
-            })]
-          }, atom.label);
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.addInputWrapper,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          testID: `${_testIDs.JOTAI_TEST_ID}-filters-add-input`,
-          accessibilityLabel: "Add an ignore pattern",
-          value: newPattern,
-          onChangeText: setNewPattern,
-          onSubmitEditing: handleAddPattern,
-          placeholder: "Type a pattern and press Enter...",
-          placeholderTextColor: _sharedUi.night.color.placeholder,
-          returnKeyType: "done",
-          autoCapitalize: "none",
-          autoCorrect: false,
-          style: styles.patternInput
-        })
-      })]
-    }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
-          icon: _sharedUi.Filter,
-          color: _sharedUi.night.color.textSecondary,
-          size: 12
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
-          children: "ACTIVE FILTERS"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.patternList,
-        children: Array.from(ignoredPatterns).map(pattern => {
-          const atomColor = getAtomColorForPattern(pattern, atoms);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: styles.patternRow,
-            onPress: () => onTogglePattern(pattern),
-            activeOpacity: 0.8,
-            testID: `${_testIDs.JOTAI_TEST_ID}-filters-chip-${(0, _testIDs.slugForTestID)(pattern)}`,
-            accessibilityRole: "button",
-            accessibilityLabel: `Remove filter ${pattern}`,
-            children: [atomColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.atomDot, {
-                backgroundColor: atomColor
-              }]
-            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.patternText, atomColor ? {
-                color: atomColor
-              } : null],
-              numberOfLines: 1,
-              children: pattern
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-              size: 12,
-              color: _sharedUi.night.color.accent + "80"
-            })]
-          }, pattern);
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
-          icon: _sharedUi.Filter,
-          color: _sharedUi.night.color.textSecondary,
-          size: 12
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
-          children: "HOW ATOM FILTERS WORK"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.howItWorksText,
-        children: "Patterns hide matching atoms from both the Atoms tab and the Events tab. Tap an atom above to quickly add it as a filter."
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.examplesContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.examplesTitle,
-          children: "EXAMPLES:"
-        }), ["• count -> hides countAtom from atoms & events", "• auth -> hides authAtom, authStatusAtom", "• user -> hides userAtom from both tabs"].map(ex => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.exampleItem,
-          children: ex
-        }, ex))]
-      })]
-    })]
+  const entities = (0, _react.useMemo)(() => atoms.map(atom => ({
+    name: atom.label,
+    color: atom.color
+  })), [atoms]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EntityFilterView, {
+    entities: entities,
+    ignoredPatterns: ignoredPatterns,
+    onTogglePattern: onTogglePattern,
+    onAddPattern: onAddPattern,
+    entityNoun: "ATOMS",
+    entitySingular: "atom",
+    entityKey: "atom",
+    testIDPrefix: _testIDs.JOTAI_TEST_ID,
+    slug: _testIDs.slugForTestID,
+    howItWorks: "Patterns hide matching atoms from both the Atoms tab and the Events tab. Tap an atom above to quickly add it as a filter.",
+    examples: EXAMPLES,
+    emptyMessage: "No atoms are being watched yet."
   });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  scrollContent: {
-    paddingTop: 16,
-    paddingHorizontal: 16,
-    paddingBottom: 24,
-    gap: 16
-  },
-  section: {
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    overflow: "hidden"
-  },
-  atomList: {
-    maxHeight: 180
-  },
-  atomListContent: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 16,
-    gap: 10
-  },
-  atomRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border
-  },
-  atomRowFiltered: {
-    opacity: 0.45
-  },
-  atomDot: {
-    width: 7,
-    height: 7,
-    borderRadius: 3.5
-  },
-  atomRowText: {
-    flex: 1,
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  atomRowTextFiltered: {
-    color: _sharedUi.night.color.textTertiary,
-    textDecorationLine: "line-through"
-  },
-  filteredLabel: {
-    fontSize: 10,
-    fontWeight: "500",
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
-  },
-  addLabel: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  addInputWrapper: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 8
-  },
-  patternList: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    gap: 8
-  },
-  patternRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    gap: 8
-  },
-  patternText: {
-    flex: 1,
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: _sharedUi.night.color.text
-  },
-  howItWorksText: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textSecondary,
-    lineHeight: 16,
-    marginTop: 8,
-    paddingHorizontal: 16,
-    fontFamily: "monospace"
-  },
-  examplesContainer: {
-    paddingTop: 8,
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.night.color.border,
-    marginTop: 12
-  },
-  examplesTitle: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace",
-    letterSpacing: 0.5,
-    marginBottom: 6
-  },
-  exampleItem: {
-    fontSize: 10,
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace",
-    lineHeight: 16
-  },
-  emptyText: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    fontFamily: "monospace"
-  },
-  patternInput: {
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorder,
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    fontSize: 12,
-    color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  }
-});
+}