@buoy-gg/env 7.0.41 → 7.0.43

package/lib/module/env/components/EnvVarRow.js

@@ -1,185 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, TypeBadge, buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
-import { getEnvVarType } from "../utils/envTypeDetector";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const getStatusConfig = (status, expectedType) => {
-  switch (status) {
-    case "required_present":
-      return {
-        label: "Valid",
-        color: buoyColors.success,
-        sublabel: "Required"
-      };
-    case "required_missing":
-      return {
-        label: "Missing",
-        color: buoyColors.error,
-        sublabel: "Required"
-      };
-    case "required_wrong_value":
-      return {
-        label: "Wrong",
-        color: buoyColors.warning,
-        sublabel: "Invalid value"
-      };
-    case "required_wrong_type":
-      return {
-        label: "Type Error",
-        color: buoyColors.info,
-        sublabel: "Wrong type"
-      };
-    case "optional_present":
-      return {
-        label: "Set",
-        color: buoyColors.textSecondary,
-        sublabel: "Optional"
-      };
-  }
-};
-const formatEnvKey = key => {
-  // Format key similar to React Query: "section > subsection"
-  return key.split("_").join(" › ");
-};
-const formatValue = value => {
-  if (value === undefined || value === null) {
-    return "undefined";
-  }
-  const str = typeof value === "string" ? value : String(value);
-  return str;
-};
-export function EnvVarRow({
-  envVar,
-  isExpanded,
-  onPress
-}) {
-  const config = getStatusConfig(envVar.status, envVar.expectedType);
-  const hasValue = envVar.value !== undefined && envVar.value !== null;
-
-  // Format primary text like React Query does: "section › subsection"
-  // For env vars, we'll show the key formatted nicely
-  const keyParts = envVar.key.split("_");
-  const primaryText = keyParts.map(part => part.toLowerCase()).join(" › ");
-
-  // The key is the row's identity everywhere a handle is needed. The visible
-  // primary text is the prettified "expo › public › api › url" form, which is
-  // no use to a test (or to VoiceOver) trying to find one specific variable.
-  const rowID = `buoy-env-row-${envVar.key}`;
-
-  // Create expanded content for value and expected value
-  const expandedContent = /*#__PURE__*/_jsxs(View, {
-    style: styles.expandedContainer,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Value:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedValue,
-        numberOfLines: 3,
-        testID: `${rowID}-value`,
-        children: formatValue(envVar.value) || "undefined"
-      })]
-    }), envVar.status === "required_wrong_type" && envVar.expectedType && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.expandedRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.expandedLabel,
-          children: "Type:"
-        }), /*#__PURE__*/_jsx(TypeBadge, {
-          type: getEnvVarType(envVar.value),
-          testID: `${rowID}-actual-type`
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.expandedRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.expandedLabel,
-          children: "Expected:"
-        }), /*#__PURE__*/_jsx(TypeBadge, {
-          type: envVar.expectedType,
-          testID: `${rowID}-expected-type`
-        })]
-      })]
-    }), envVar.status === "required_wrong_value" && envVar.expectedValue && /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Expected:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedExpected,
-        testID: `${rowID}-expected-value`,
-        children: String(envVar.expectedValue)
-      })]
-    }), envVar.description && /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Info:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedDescription,
-        testID: `${rowID}-description`,
-        children: envVar.description
-      })]
-    })]
-  });
-  return /*#__PURE__*/_jsx(CompactRow, {
-    statusDotColor: config.color,
-    statusLabel: config.label,
-    statusSublabel: config.sublabel,
-    primaryText: primaryText,
-    secondaryText: undefined // Don't show value inline anymore
-    ,
-    expandedContent: expandedContent,
-    isExpanded: isExpanded,
-    expandedGlowColor: config.color,
-    customBadge: envVar.expectedType ? /*#__PURE__*/_jsx(TypeBadge, {
-      type: envVar.expectedType,
-      testID: `${rowID}-type-badge`
-    }) : undefined,
-    showChevron: true,
-    onPress: onPress ? () => onPress(envVar) : undefined,
-    testID: rowID,
-    statusTestID: `${rowID}-status`,
-    statusSublabelTestID: `${rowID}-category`
-    // The status is carried by a coloured dot and a two-word label that the
-    // row's container merges away on Fabric — spelled out here so the verdict
-    // reaches assistive tech (and Maestro) with the key it belongs to.
-    ,
-    accessibilityLabel: `${envVar.key}, ${config.label}, ${config.sublabel}`
-  });
-}
-const styles = StyleSheet.create({
-  expandedContainer: {
-    gap: 6
-  },
-  expandedRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  expandedLabel: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    fontWeight: "600",
-    minWidth: 60,
-    fontFamily: monoFont
-  },
-  expandedValue: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  expandedExpected: {
-    fontSize: 11,
-    color: buoyColors.warning,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  expandedDescription: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    flex: 1
-  }
-});
+"use strict";import{View as s,Text as l,StyleSheet as m}from"react-native";import{CompactRow as h,TypeBadge as c,buoyColors as a,night as p,monoFont as u}from"@buoy-gg/shared-ui";import{getEnvVarType as w}from"../utils/envTypeDetector";import{jsx as n,jsxs as d,Fragment as T}from"react/jsx-runtime";const _=(e,i)=>{switch(e){case"required_present":return{label:"Valid",color:a.success,sublabel:"Required"};case"required_missing":return{label:"Missing",color:a.error,sublabel:"Required"};case"required_wrong_value":return{label:"Wrong",color:a.warning,sublabel:"Invalid value"};case"required_wrong_type":return{label:"Type Error",color:a.info,sublabel:"Wrong type"};case"optional_present":return{label:"Set",color:a.textSecondary,sublabel:"Optional"}}};const R=e=>{return e.split("_").join(" \u203A ")};const S=e=>{if(e===void 0||e===null){return"undefined"}const i=typeof e==="string"?e:String(e);return i};export function EnvVarRow({envVar:e,isExpanded:i,onPress:x}){const r=_(e.status,e.expectedType);const D=e.value!==void 0&&e.value!==null;const y=e.key.split("_");const b=y.map(g=>g.toLowerCase()).join(" \u203A ");const o=`buoy-env-row-${e.key}`;const f=d(s,{style:t.expandedContainer,children:[d(s,{style:t.expandedRow,children:[n(l,{style:t.expandedLabel,children:"Value:"}),n(l,{style:t.expandedValue,numberOfLines:3,testID:`${o}-value`,children:S(e.value)||"undefined"})]}),e.status==="required_wrong_type"&&e.expectedType&&d(T,{children:[d(s,{style:t.expandedRow,children:[n(l,{style:t.expandedLabel,children:"Type:"}),n(c,{type:w(e.value),testID:`${o}-actual-type`})]}),d(s,{style:t.expandedRow,children:[n(l,{style:t.expandedLabel,children:"Expected:"}),n(c,{type:e.expectedType,testID:`${o}-expected-type`})]})]}),e.status==="required_wrong_value"&&e.expectedValue&&d(s,{style:t.expandedRow,children:[n(l,{style:t.expandedLabel,children:"Expected:"}),n(l,{style:t.expandedExpected,testID:`${o}-expected-value`,children:String(e.expectedValue)})]}),e.description&&d(s,{style:t.expandedRow,children:[n(l,{style:t.expandedLabel,children:"Info:"}),n(l,{style:t.expandedDescription,testID:`${o}-description`,children:e.description})]})]});return n(h,{statusDotColor:r.color,statusLabel:r.label,statusSublabel:r.sublabel,primaryText:b,secondaryText:void 0,expandedContent:f,isExpanded:i,expandedGlowColor:r.color,customBadge:e.expectedType?n(c,{type:e.expectedType,testID:`${o}-type-badge`}):void 0,showChevron:true,onPress:x?()=>x(e):void 0,testID:o,statusTestID:`${o}-status`,statusSublabelTestID:`${o}-category`,accessibilityLabel:`${e.key}, ${r.label}, ${r.sublabel}`})}const t=m.create({expandedContainer:{gap:6},expandedRow:{flexDirection:"row",alignItems:"center",gap:8},expandedLabel:{fontSize:10,color:p.color.textTertiary,fontWeight:"600",minWidth:60,fontFamily:u},expandedValue:{fontSize:11,color:p.color.textSecondary,fontFamily:u,flex:1},expandedExpected:{fontSize:11,color:a.warning,fontFamily:u,flex:1},expandedDescription:{fontSize:11,color:p.color.textSecondary,flex:1}});

package/lib/module/env/components/EnvVarSection.js

@@ -1,80 +1 @@
-"use strict";
-
-import { useCallback, useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { EnvVarRow } from "./EnvVarRow";
-import { SectionHeader, night, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function EnvVarSection({
-  title,
-  count,
-  vars,
-  emptyMessage
-}) {
-  const [expandedVar, setExpandedVar] = useState(null);
-  const handleVarPress = useCallback(envVar => {
-    setExpandedVar(prev => prev === envVar.key ? null : envVar.key);
-  }, []);
-  if (vars.length === 0 && title === "Required Variables") {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.sectionContainer,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: title
-        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
-          count: 0,
-          color: night.color.accent
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.emptySection,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptySectionText,
-          children: emptyMessage
-        })
-      })]
-    });
-  }
-  if (vars.length === 0) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.sectionContainer,
-    children: [title !== "" && /*#__PURE__*/_jsxs(SectionHeader, {
-      children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
-        children: title
-      }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
-        count: count,
-        color: night.color.accent
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.sectionContent,
-      children: vars.map(envVar => /*#__PURE__*/_jsx(EnvVarRow, {
-        envVar: envVar,
-        isExpanded: expandedVar === envVar.key,
-        onPress: handleVarPress
-      }, envVar.key))
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  sectionContainer: {
-    gap: 8
-  },
-  sectionContent: {
-    // No gap needed, EnvVarRow has its own margins
-  },
-  emptySection: {
-    padding: 20,
-    backgroundColor: night.color.accent + "08",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.accent + "20",
-    alignItems: "center"
-  },
-  emptySectionText: {
-    color: night.color.accent,
-    fontSize: 11,
-    textAlign: "center",
-    fontFamily: monoFont,
-    opacity: 0.8,
-    letterSpacing: 0.5
-  }
-});
+"use strict";import{useCallback as u,useState as x}from"react";import{View as i,Text as g,StyleSheet as S}from"react-native";import{EnvVarRow as f}from"./EnvVarRow";import{SectionHeader as n,night as o,monoFont as C}from"@buoy-gg/shared-ui";import{jsx as e,jsxs as l}from"react/jsx-runtime";export function EnvVarSection({title:c,count:a,vars:s,emptyMessage:d}){const[m,p]=x(null);const y=u(t=>{p(h=>h===t.key?null:t.key)},[]);if(s.length===0&&c==="Required Variables"){return l(i,{style:r.sectionContainer,children:[l(n,{children:[e(n.Title,{children:c}),e(n.Badge,{count:0,color:o.color.accent})]}),e(i,{style:r.emptySection,children:e(g,{style:r.emptySectionText,children:d})})]})}if(s.length===0)return null;return l(i,{style:r.sectionContainer,children:[c!==""&&l(n,{children:[e(n.Title,{children:c}),e(n.Badge,{count:a,color:o.color.accent})]}),e(i,{style:r.sectionContent,children:s.map(t=>e(f,{envVar:t,isExpanded:m===t.key,onPress:y},t.key))})]})}const r=S.create({sectionContainer:{gap:8},sectionContent:{},emptySection:{padding:20,backgroundColor:o.color.accent+"08",borderRadius:8,borderWidth:1,borderColor:o.color.accent+"20",alignItems:"center"},emptySectionText:{color:o.color.accent,fontSize:11,textAlign:"center",fontFamily:C,opacity:.8,letterSpacing:.5}});

package/lib/module/env/components/EnvVarsModal.js

@@ -1,317 +1 @@
-"use strict";
-
-import { JsModal, devToolsStorageKeys, ModalHeader, HeaderSearchButton, displayValue, buoyColors, night, windowDragProps, ToolEmptyState, resolveListEmptyState, monoFont } from "@buoy-gg/shared-ui";
-import { useCallback, useState, useRef, useEffect, useMemo } from "react";
-import { View, StyleSheet, ScrollView, Text } from "react-native";
-import { EnvStatsOverview } from "./EnvStatsOverview";
-import { useDynamicEnv } from "../hooks/useDynamicEnv";
-import { processEnvVars, calculateStats } from "../utils";
-import { EnvVarSection } from "./EnvVarSection";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Full-screen modal for inspecting required environment variables. Handles automatic
- * discovery, validation, filtering, and rich search so teams can quickly spot missing
- * or misconfigured values during development sessions.
- */
-export function EnvVarsModal({
-  visible,
-  onClose,
-  requiredEnvVars,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  inline = false
-}) {
-  const [activeFilter, setActiveFilter] = useState("all");
-  const [isSearchActive, setIsSearchActive] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const searchInputRef = useRef(null);
-  const handleModeChange = useCallback(_mode => {
-    // Mode changes handled by JsModal
-  }, []);
-
-  // Focus search input when search becomes active
-  useEffect(() => {
-    if (isSearchActive && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isSearchActive]);
-
-  // Clear search when changing filters
-  useEffect(() => {
-    setSearchQuery("");
-    setIsSearchActive(false);
-  }, [activeFilter]);
-
-  // Auto-collect environment variables
-  const envResults = useDynamicEnv();
-  const autoCollectedEnvVars = useMemo(() => {
-    const envVars = {};
-    envResults.forEach(({
-      key,
-      data
-    }) => {
-      if (data !== undefined && data !== null) {
-        envVars[key] = typeof data === "string" ? data : displayValue(data);
-      }
-    });
-    return envVars;
-  }, [envResults]);
-
-  // Process and categorize environment variables
-  const {
-    requiredVars,
-    optionalVars
-  } = useMemo(() => {
-    return processEnvVars(autoCollectedEnvVars, requiredEnvVars);
-  }, [autoCollectedEnvVars, requiredEnvVars]);
-
-  // Calculate statistics
-  const stats = useMemo(() => {
-    if (requiredEnvVars === undefined) {
-      return {
-        totalCount: 0,
-        requiredCount: 0,
-        optionalCount: 0,
-        presentRequiredCount: 0,
-        missingCount: 0,
-        wrongValueCount: 0,
-        wrongTypeCount: 0
-      };
-    }
-    return calculateStats(requiredVars, optionalVars, autoCollectedEnvVars);
-  }, [requiredEnvVars, requiredVars, optionalVars, autoCollectedEnvVars]);
-
-  // Combine all vars and sort by priority (issues first)
-  const allVars = useMemo(() => {
-    const combined = [...requiredVars, ...optionalVars];
-
-    // Sort by status priority: errors first, then warnings, then valid
-    return combined.sort((a, b) => {
-      const priorityMap = {
-        "required_missing": 1,
-        "required_wrong_type": 2,
-        "required_wrong_value": 3,
-        "required_present": 4,
-        "optional_present": 5
-      };
-      return (priorityMap[a.status] || 999) - (priorityMap[b.status] || 999);
-    });
-  }, [requiredVars, optionalVars]);
-
-  // Filter variables based on active filter and search
-  const filteredVars = useMemo(() => {
-    let vars = [];
-    switch (activeFilter) {
-      case "all":
-        vars = allVars;
-        break;
-      case "missing":
-        vars = allVars.filter(v => v.status === "required_missing");
-        break;
-      case "issues":
-        vars = allVars.filter(v => v.status === "required_wrong_type" || v.status === "required_wrong_value");
-        break;
-    }
-
-    // Apply search filter
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      vars = vars.filter(v => v.key.toLowerCase().includes(query) || v.description?.toLowerCase().includes(query) || typeof v.value === 'string' && v.value.toLowerCase().includes(query));
-    }
-    return vars;
-  }, [allVars, optionalVars, activeFilter, searchQuery]);
-
-  // Calculate health percentage
-  const healthPercentage = stats.requiredCount > 0 ? Math.round(stats.presentRequiredCount / stats.requiredCount * 100) : 100;
-  const healthStatus = healthPercentage === 100 ? "HEALTHY" : healthPercentage >= 75 ? "WARNING" : healthPercentage >= 50 ? "ERROR" : "CRITICAL";
-  const healthColor = healthPercentage === 100 ? buoyColors.success : healthPercentage >= 75 ? buoyColors.warning : healthPercentage >= 50 ? buoyColors.error : buoyColors.error;
-  if (!visible) return null;
-  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.env.modal();
-  const header = /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: isSearchActive ? "" : "Environment Variables",
-      noMargin: isSearchActive,
-      children: isSearchActive && /*#__PURE__*/_jsx(ModalHeader.Search, {
-        value: searchQuery,
-        onChangeText: setSearchQuery,
-        onCancel: () => {
-          setIsSearchActive(false);
-          setSearchQuery("");
-        },
-        placeholder: "Search env keys...",
-        accessibilityLabel: "Search env keys",
-        testID: "buoy-env-search"
-        // The field itself is a handle Detox can use but XCUITest
-        // cannot: on this RN version a TextInput's testID never
-        // reaches the XCUITest element tree — iOS folds the input
-        // into the header's accessibility container. This wrapper
-        // handle is the one the a11y lane can actually see.
-        ,
-        containerTestID: "buoy-env-search-field",
-        clearTestID: "buoy-env-search-clear"
-      })
-    }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
-      children: !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
-        onPress: () => setIsSearchActive(true),
-        testID: "buoy-env-search-open",
-        accessibilityLabel: "Search env keys"
-      })
-    })]
-  });
-  const body = /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.scrollContainer,
-    contentContainerStyle: styles.contentContainer,
-    showsVerticalScrollIndicator: false,
-    testID: "buoy-env-scroll",
-    children: [/*#__PURE__*/_jsx(EnvStatsOverview, {
-      stats: stats,
-      healthPercentage: healthPercentage,
-      healthStatus: healthStatus,
-      healthColor: healthColor,
-      activeFilter: activeFilter,
-      onFilterChange: setActiveFilter
-    }), filteredVars.length > 0 ? /*#__PURE__*/_jsxs(View, {
-      style: styles.varsSection,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.sectionHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.sectionTitle,
-          testID: "buoy-env-section-title",
-          children: activeFilter === "all" ? "ALL VARIABLES" : activeFilter === "missing" ? "MISSING VARIABLES" : "ISSUES TO FIX"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.countBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.countText,
-            testID: "buoy-env-section-count",
-            children: filteredVars.length
-          })
-        })]
-      }), /*#__PURE__*/_jsx(EnvVarSection, {
-        title: "",
-        count: 0,
-        vars: filteredVars,
-        emptyMessage: ""
-      })]
-    }) : /*#__PURE__*/_jsx(ToolEmptyState, {
-      testID: "buoy-env-empty",
-      ...resolveListEmptyState({
-        subject: "variables",
-        verb: "declared",
-        search: searchQuery,
-        total: allVars.length,
-        waiting: {
-          // A missing .env is a config problem, not a stream that has
-          // not started — `keys` is the env-and-secrets state.
-          otto: "keys",
-          title: "No variables",
-          message: `No ${activeFilter === "all" ? "" : activeFilter} variables found`
-        }
-      })
-    })]
-  });
-
-  // The ONLY difference between the phone and the desktop dashboard is which
-  // shell the header and body go in. Everything above this line is shared.
-  if (inline) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.inlineRoot,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.inlineHeader,
-        ...windowDragProps,
-        children: header
-      }), body]
-    });
-  }
-  return /*#__PURE__*/_jsx(JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    persistenceKey: storagePrefix,
-    header: {
-      customContent: header,
-      showToggleButton: true
-    },
-    onModeChange: handleModeChange,
-    enablePersistence: true,
-    initialMode: "bottomSheet",
-    enableGlitchEffects: true,
-    styles: {},
-    children: body
-  });
-}
-
-/**
- * The same env tool as `EnvVarsModal`, rendered INLINE for hosts that place
- * tools in a panel. Exists so there is exactly one implementation — the desktop
- * dashboard used to ship its own copy of this component's internals.
- */
-export function EnvToolView({
-  requiredEnvVars
-}) {
-  return /*#__PURE__*/_jsx(EnvVarsModal, {
-    inline: true,
-    visible: true,
-    requiredEnvVars: requiredEnvVars,
-    onClose: () => {}
-  });
-}
-const styles = StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    // Transparent so the desktop workbench's hoisted sky (one field spanning
-    // sidebar + panel) shows through — the shell paints its base beneath it.
-    backgroundColor: "transparent"
-  },
-  inlineHeader: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  scrollContainer: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  contentContainer: {
-    padding: 8,
-    paddingBottom: 24
-  },
-  varsSection: {
-    marginTop: 16
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 8,
-    paddingHorizontal: 8
-  },
-  sectionTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: night.color.textTertiary,
-    letterSpacing: 1.2,
-    fontFamily: monoFont
-  },
-  countBadge: {
-    backgroundColor: night.color.accent + "15",
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 9999,
-    borderWidth: 1,
-    borderColor: night.color.accent + "40"
-  },
-  countText: {
-    fontSize: 10,
-    fontWeight: "500",
-    color: night.color.accent,
-    fontFamily: monoFont
-  }
-});
+"use strict";import{JsModal as O,devToolsStorageKeys as M,ModalHeader as d,HeaderSearchButton as K,displayValue as Q,buoyColors as h,night as S,windowDragProps as J,ToolEmptyState as U,resolveListEmptyState as X,monoFont as q}from"@buoy-gg/shared-ui";import{useCallback as Y,useState as V,useRef as $,useEffect as A,useMemo as g}from"react";import{View as f,StyleSheet as Z,ScrollView as ee,Text as H}from"react-native";import{EnvStatsOverview as te}from"./EnvStatsOverview";import{useDynamicEnv as oe}from"../hooks/useDynamicEnv";import{processEnvVars as re,calculateStats as ne}from"../utils";import{EnvVarSection as se}from"./EnvVarSection";import{jsx as e,jsxs as y}from"react/jsx-runtime";export function EnvVarsModal({visible:p,onClose:D,requiredEnvVars:m,onBack:E,onMinimize:B,enableSharedModalDimensions:F=false,inline:j=false}){const[s,z]=V("all");const[a,w]=V(false);const[l,I]=V("");const x=$(null);const N=Y(t=>{},[]);A(()=>{if(a&&x.current){x.current.focus()}},[a]);A(()=>{I("");w(false)},[s]);const R=oe();const C=g(()=>{const t={};R.forEach(({key:o,data:r})=>{if(r!==void 0&&r!==null){t[o]=typeof r==="string"?r:Q(r)}});return t},[R]);const{requiredVars:b,optionalVars:c}=g(()=>{return re(C,m)},[C,m]);const v=g(()=>{if(m===void 0){return{totalCount:0,requiredCount:0,optionalCount:0,presentRequiredCount:0,missingCount:0,wrongValueCount:0,wrongTypeCount:0}}return ne(b,c,C)},[m,b,c,C]);const u=g(()=>{const t=[...b,...c];return t.sort((o,r)=>{const L={"required_missing":1,"required_wrong_type":2,"required_wrong_value":3,"required_present":4,"optional_present":5};return(L[o.status]||999)-(L[r.status]||999)})},[b,c]);const T=g(()=>{let t=[];switch(s){case"all":t=u;break;case"missing":t=u.filter(o=>o.status==="required_missing");break;case"issues":t=u.filter(o=>o.status==="required_wrong_type"||o.status==="required_wrong_value");break}if(l){const o=l.toLowerCase();t=t.filter(r=>r.key.toLowerCase().includes(o)||r.description?.toLowerCase().includes(o)||typeof r.value==="string"&&r.value.toLowerCase().includes(o))}return t},[u,c,s,l]);const i=v.requiredCount>0?Math.round(v.presentRequiredCount/v.requiredCount*100):100;const P=i===100?"HEALTHY":i>=75?"WARNING":i>=50?"ERROR":"CRITICAL";const W=i===100?h.success:i>=75?h.warning:i>=50?h.error:h.error;if(!p)return null;const G=F?M.modal.root():M.env.modal();const _=y(d,{children:[E&&e(d.Navigation,{onBack:E}),e(d.Content,{title:a?"":"Environment Variables",noMargin:a,children:a&&e(d.Search,{value:l,onChangeText:I,onCancel:()=>{w(false);I("")},placeholder:"Search env keys...",accessibilityLabel:"Search env keys",testID:"buoy-env-search",containerTestID:"buoy-env-search-field",clearTestID:"buoy-env-search-clear"})}),e(d.Actions,{children:!a&&e(K,{onPress:()=>w(true),testID:"buoy-env-search-open",accessibilityLabel:"Search env keys"})})]});const k=y(ee,{style:n.scrollContainer,contentContainerStyle:n.contentContainer,showsVerticalScrollIndicator:false,testID:"buoy-env-scroll",children:[e(te,{stats:v,healthPercentage:i,healthStatus:P,healthColor:W,activeFilter:s,onFilterChange:z}),T.length>0?y(f,{style:n.varsSection,children:[y(f,{style:n.sectionHeader,children:[e(H,{style:n.sectionTitle,testID:"buoy-env-section-title",children:s==="all"?"ALL VARIABLES":s==="missing"?"MISSING VARIABLES":"ISSUES TO FIX"}),e(f,{style:n.countBadge,children:e(H,{style:n.countText,testID:"buoy-env-section-count",children:T.length})})]}),e(se,{title:"",count:0,vars:T,emptyMessage:""})]}):e(U,{testID:"buoy-env-empty",...X({subject:"variables",verb:"declared",search:l,total:u.length,waiting:{otto:"keys",title:"No variables",message:`No ${s==="all"?"":s} variables found`}})})]});if(j){return y(f,{style:n.inlineRoot,children:[e(f,{style:n.inlineHeader,...J,children:_}),k]})}return e(O,{visible:p,onClose:D,onMinimize:B,persistenceKey:G,header:{customContent:_,showToggleButton:true},onModeChange:N,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,styles:{},children:k})}export function EnvToolView({requiredEnvVars:p}){return e(EnvVarsModal,{inline:true,visible:true,requiredEnvVars:p,onClose:()=>{}})}const n=Z.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:h.border,backgroundColor:"transparent"},scrollContainer:{flex:1,backgroundColor:"transparent"},contentContainer:{padding:8,paddingBottom:24},varsSection:{marginTop:16},sectionHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8,paddingHorizontal:8},sectionTitle:{fontSize:10,fontWeight:"700",color:S.color.textTertiary,letterSpacing:1.2,fontFamily:q},countBadge:{backgroundColor:S.color.accent+"15",paddingHorizontal:8,paddingVertical:2,borderRadius:9999,borderWidth:1,borderColor:S.color.accent+"40"},countText:{fontSize:10,fontWeight:"500",color:S.color.accent,fontFamily:q}});

package/lib/module/env/hooks/useDynamicEnv.js

@@ -1,88 +1 @@
-"use strict";
-
-import { useMemo } from "react";
-import { getRemoteEnv } from "../utils/remoteEnv";
-/**
- * Hook that returns all available environment variables with parsed values
- * Includes all available environment variables by default (only EXPO_PUBLIC_ prefixed vars are loaded by Expo)
- *
- * @example
- * // Get all available environment variables (only EXPO_PUBLIC_ prefixed)
- * const envVars = useDynamicEnv();
- * // Returns: [
- * //   { key: 'EXPO_PUBLIC_API_URL', data: 'https://api.example.com' },
- * //   { key: 'EXPO_PUBLIC_APP_NAME', data: 'MyApp' },
- * //   ...
- * // ]
- *
- * @example
- * // Filter to specific variables
- * const envVars = useDynamicEnv({
- *   envFilter: (key) => key.includes('API') || key.includes('URL')
- * });
- *
- * @example
- * // Filter by value content
- * const envVars = useDynamicEnv({
- *   envFilter: (key, value) => value !== undefined && value.length > 0
- * });
- */
-export function useDynamicEnv({
-  envFilter = () => true // Default: include all available environment variables (EXPO_PUBLIC_ only)
-} = {}) {
-  // In remote mirror mode (desktop dashboard) env values come from the
-  // synced device instead of the local process.env
-  const envSource =
-  // @ts-ignore process.env does exist
-  getRemoteEnv() ?? (typeof process === "undefined" ? {} : process.env);
-
-  // Helper function to get a single environment variable value
-  const getEnvValue = useMemo(() => {
-    return key => {
-      const value = envSource[key];
-      if (value === undefined) {
-        return null;
-      }
-
-      // Try to parse as JSON for complex values, fall back to string
-      try {
-        // Only attempt JSON parsing if it looks like JSON (starts with { or [)
-        if (value.startsWith("{") || value.startsWith("[")) {
-          return JSON.parse(value);
-        }
-
-        // Parse boolean-like strings
-        if (value.toLowerCase() === "true") return true;
-        if (value.toLowerCase() === "false") return false;
-
-        // Parse number-like strings
-        if (/^\d+$/.test(value)) {
-          const num = parseInt(value, 10);
-          return !isNaN(num) ? num : value;
-        }
-        if (/^\d*\.\d+$/.test(value)) {
-          const num = parseFloat(value);
-          return !isNaN(num) ? num : value;
-        }
-        return value;
-      } catch {
-        return value;
-      }
-    };
-  }, [envSource]);
-
-  // Get all environment variables and process them
-  const envResults = useMemo(() => {
-    const allEnvKeys = Object.keys(envSource);
-    const filteredKeys = allEnvKeys.filter(key => {
-      const value = envSource[key];
-      return envFilter(key, value);
-    });
-    return filteredKeys.map(key => ({
-      key,
-      data: getEnvValue(key)
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [envFilter, getEnvValue, envSource]);
-  return envResults;
-}
+"use strict";import{useMemo as o}from"react";import{getRemoteEnv as i}from"../utils/remoteEnv";export function useDynamicEnv({envFilter:s=()=>true}={}){const r=i()??(typeof process==="undefined"?{}:process.env);const u=o(()=>{return n=>{const t=r[n];if(t===void 0){return null}try{if(t.startsWith("{")||t.startsWith("[")){return JSON.parse(t)}if(t.toLowerCase()==="true")return true;if(t.toLowerCase()==="false")return false;if(/^\d+$/.test(t)){const e=parseInt(t,10);return!isNaN(e)?e:t}if(/^\d*\.\d+$/.test(t)){const e=parseFloat(t);return!isNaN(e)?e:t}return t}catch{return t}}},[r]);const a=o(()=>{const n=Object.keys(r);const t=n.filter(e=>{const c=r[e];return s(e,c)});return t.map(e=>({key:e,data:u(e)}))},[s,u,r]);return a}