@buoy-gg/shared-ui 7.0.41 → 7.0.42

package/lib/module/env/EnvironmentSelector.js

@@ -1,201 +1 @@
-"use strict";
-
-import React from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { Check } from "../icons/index.js";
-import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { ExpandablePopover } from "../ui/components/ExpandablePopover.js";
-import { normalizeEnvironment } from "../types/types.js";
-
-// ============================================================================
-// Constants
-// ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ENV_SELECTOR_WIDTH = 140; // Wider than minimized tools stack
-const PEEK_HEIGHT = 28;
-const OPTION_HEIGHT = 44;
-const PADDING_VERTICAL = 8;
-const COLLAPSE_BUTTON_HEIGHT = 24;
-
-// ============================================================================
-// Types
-// ============================================================================
-
-// ============================================================================
-// Environment Config Helper
-// ============================================================================
-
-function getEnvironmentConfig(environment) {
-  const normalized = normalizeEnvironment(environment);
-  switch (normalized) {
-    case "local":
-      return {
-        label: "LOCAL",
-        backgroundColor: gameUIColors.info
-      };
-    case "dev":
-      return {
-        label: "DEV",
-        backgroundColor: gameUIColors.warning
-      };
-    case "qa":
-      return {
-        label: "QA",
-        backgroundColor: gameUIColors.optional
-      };
-    case "staging":
-      return {
-        label: "STAGING",
-        backgroundColor: gameUIColors.success
-      };
-    case "prod":
-      return {
-        label: "PROD",
-        backgroundColor: gameUIColors.error
-      };
-    default:
-      return {
-        label: "LOCAL",
-        backgroundColor: gameUIColors.info
-      };
-  }
-}
-
-// ============================================================================
-// Environment Option Component
-// ============================================================================
-
-function EnvironmentOption({
-  environment,
-  isSelected,
-  onPress
-}) {
-  const config = getEnvironmentConfig(environment);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    onPress: onPress,
-    style: ({
-      pressed
-    }) => [styles.optionContainer, isSelected && styles.optionContainerSelected, pressed && styles.optionContainerPressed],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.optionLeft,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.optionDot, {
-          backgroundColor: config.backgroundColor
-        }, {
-          shadowColor: config.backgroundColor,
-          shadowOffset: {
-            width: 0,
-            height: 0
-          },
-          shadowOpacity: 0.6,
-          shadowRadius: 4,
-          elevation: 2
-        }]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.optionLabel,
-        children: config.label
-      })]
-    }), isSelected && /*#__PURE__*/_jsx(Check, {
-      size: 14,
-      color: gameUIColors.success,
-      strokeWidth: 3
-    })]
-  });
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function EnvironmentSelector({
-  hasItems,
-  currentEnvironment,
-  availableEnvironments,
-  onSelect,
-  width = ENV_SELECTOR_WIDTH,
-  collapsedContent
-}) {
-  // Calculate expanded height based on number of environments
-  const expandedHeight = PADDING_VERTICAL + availableEnvironments.length * OPTION_HEIGHT + COLLAPSE_BUTTON_HEIGHT + 4;
-
-  // Default collapsed content shows current environment
-  const defaultCollapsedContent = /*#__PURE__*/_jsxs(View, {
-    style: styles.collapsedEnvBadge,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.collapsedDot, {
-        backgroundColor: getEnvironmentConfig(currentEnvironment).backgroundColor
-      }]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.collapsedLabel,
-      children: getEnvironmentConfig(currentEnvironment).label
-    })]
-  });
-  return /*#__PURE__*/_jsx(ExpandablePopover, {
-    hasItems: hasItems,
-    width: width,
-    expandedHeight: expandedHeight,
-    peekHeight: PEEK_HEIGHT,
-    showCount: false,
-    collapsedContent: collapsedContent || defaultCollapsedContent,
-    collapsedLabel: `Switch environment from ${currentEnvironment}`,
-    children: availableEnvironments.map(env => /*#__PURE__*/_jsx(EnvironmentOption, {
-      environment: env,
-      isSelected: env === currentEnvironment,
-      onPress: () => onSelect(env)
-    }, env))
-  });
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  collapsedEnvBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  collapsedDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4
-  },
-  collapsedLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: gameUIColors.primaryLight,
-    letterSpacing: 0.5
-  },
-  optionContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    height: OPTION_HEIGHT,
-    width: "100%"
-  },
-  optionContainerSelected: {
-    backgroundColor: "rgba(128, 128, 128, 0.1)"
-  },
-  optionContainerPressed: {
-    backgroundColor: "rgba(128, 128, 128, 0.2)"
-  },
-  optionLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1
-  },
-  optionDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginRight: 10
-  },
-  optionLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: gameUIColors.primaryLight,
-    letterSpacing: 0.5
-  }
-});
+"use strict";import H from"react";import{Pressable as u,StyleSheet as m,Text as g,View as s}from"react-native";import{Check as w}from"../icons/index.js";import{gameUIColors as e}from"../ui/gameUI/constants/gameUIColors.js";import{ExpandablePopover as L}from"../ui/components/ExpandablePopover.js";import{normalizeEnvironment as k}from"../types/types.js";import{jsx as n,jsxs as d}from"react/jsx-runtime";const E=140;const x=28;const h=44;const y=8;const I=24;function p(r){const o=k(r);switch(o){case"local":return{label:"LOCAL",backgroundColor:e.info};case"dev":return{label:"DEV",backgroundColor:e.warning};case"qa":return{label:"QA",backgroundColor:e.optional};case"staging":return{label:"STAGING",backgroundColor:e.success};case"prod":return{label:"PROD",backgroundColor:e.error};default:return{label:"LOCAL",backgroundColor:e.info}}}function S({environment:r,isSelected:o,onPress:i}){const l=p(r);return d(u,{onPress:i,style:({pressed:c})=>[t.optionContainer,o&&t.optionContainerSelected,c&&t.optionContainerPressed],children:[d(s,{style:t.optionLeft,children:[n(s,{style:[t.optionDot,{backgroundColor:l.backgroundColor},{shadowColor:l.backgroundColor,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:4,elevation:2}]}),n(g,{style:t.optionLabel,children:l.label})]}),o&&n(w,{size:14,color:e.success,strokeWidth:3})]})}export function EnvironmentSelector({hasItems:r,currentEnvironment:o,availableEnvironments:i,onSelect:l,width:c=E,collapsedContent:C}){const b=y+i.length*h+I+4;const f=d(s,{style:t.collapsedEnvBadge,children:[n(s,{style:[t.collapsedDot,{backgroundColor:p(o).backgroundColor}]}),n(g,{style:t.collapsedLabel,children:p(o).label})]});return n(L,{hasItems:r,width:c,expandedHeight:b,peekHeight:x,showCount:false,collapsedContent:C||f,collapsedLabel:`Switch environment from ${o}`,children:i.map(a=>n(S,{environment:a,isSelected:a===o,onPress:()=>l(a)},a))})}const t=m.create({collapsedEnvBadge:{flexDirection:"row",alignItems:"center",gap:6},collapsedDot:{width:8,height:8,borderRadius:4},collapsedLabel:{fontSize:11,fontWeight:"600",color:e.primaryLight,letterSpacing:.5},optionContainer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,height:h,width:"100%"},optionContainerSelected:{backgroundColor:"rgba(128, 128, 128, 0.1)"},optionContainerPressed:{backgroundColor:"rgba(128, 128, 128, 0.2)"},optionLeft:{flexDirection:"row",alignItems:"center",flex:1},optionDot:{width:8,height:8,borderRadius:4,marginRight:10},optionLabel:{fontSize:12,fontWeight:"600",color:e.primaryLight,letterSpacing:.5}});

package/lib/module/env/EnvironmentSelectorInline.js

@@ -1,295 +1 @@
-"use strict";
-
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import { Check, ChevronUp } from "../icons/index.js";
-import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { normalizeEnvironment } from "../types/types.js";
-
-// ============================================================================
-// Constants
-// ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const OPTION_HEIGHT = 36;
-
-// ============================================================================
-// Types
-// ============================================================================
-
-// ============================================================================
-// Environment Config Helper
-// ============================================================================
-
-function getEnvironmentConfig(environment) {
-  const normalized = normalizeEnvironment(environment);
-  switch (normalized) {
-    case "local":
-      return {
-        label: "LOCAL",
-        backgroundColor: gameUIColors.info
-      };
-    case "dev":
-      return {
-        label: "DEV",
-        backgroundColor: gameUIColors.warning
-      };
-    case "qa":
-      return {
-        label: "QA",
-        backgroundColor: gameUIColors.optional
-      };
-    case "staging":
-      return {
-        label: "STAGING",
-        backgroundColor: gameUIColors.success
-      };
-    case "prod":
-      return {
-        label: "PROD",
-        backgroundColor: gameUIColors.error
-      };
-    default:
-      return {
-        label: "LOCAL",
-        backgroundColor: gameUIColors.info
-      };
-  }
-}
-
-// ============================================================================
-// Environment Option Component
-// ============================================================================
-
-function EnvironmentOption({
-  environment,
-  isSelected,
-  onPress
-}) {
-  const config = getEnvironmentConfig(environment);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    onPress: onPress,
-    style: ({
-      pressed
-    }) => [styles.optionContainer, isSelected && styles.optionContainerSelected, pressed && styles.optionContainerPressed],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.optionLeft,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.optionDot, {
-          backgroundColor: config.backgroundColor
-        }, {
-          shadowColor: config.backgroundColor,
-          shadowOffset: {
-            width: 0,
-            height: 0
-          },
-          shadowOpacity: 0.6,
-          shadowRadius: 3,
-          elevation: 2
-        }]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.optionLabel,
-        numberOfLines: 1,
-        children: config.label
-      })]
-    }), isSelected && /*#__PURE__*/_jsx(Check, {
-      size: 12,
-      color: gameUIColors.success,
-      strokeWidth: 3
-    })]
-  });
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function EnvironmentSelectorInline({
-  currentEnvironment,
-  availableEnvironments,
-  onSelect
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const heightAnim = useRef(new Animated.Value(0)).current;
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-  const config = getEnvironmentConfig(currentEnvironment);
-
-  // Calculate expanded height based on number of environments
-  const expandedHeight = availableEnvironments.length * OPTION_HEIGHT;
-
-  // Animate height and chevron rotation
-  useEffect(() => {
-    Animated.parallel([Animated.timing(heightAnim, {
-      toValue: isExpanded ? expandedHeight : 0,
-      duration: 200,
-      useNativeDriver: false
-    }), Animated.timing(rotateAnim, {
-      toValue: isExpanded ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true
-    })]).start();
-  }, [isExpanded, expandedHeight, heightAnim, rotateAnim]);
-  const handleToggle = useCallback(() => {
-    setIsExpanded(prev => !prev);
-  }, []);
-  const handleSelect = useCallback(env => {
-    setIsExpanded(false);
-    onSelect(env);
-  }, [onSelect]);
-  const chevronRotation = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "180deg"]
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.wrapper,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.optionsDropup, {
-        height: heightAnim,
-        opacity: heightAnim.interpolate({
-          inputRange: [0, expandedHeight * 0.5, expandedHeight],
-          outputRange: [0, 0.8, 1]
-        })
-      }],
-      pointerEvents: isExpanded ? "auto" : "none",
-      children: /*#__PURE__*/_jsx(View, {
-        style: {
-          height: expandedHeight
-        },
-        children: availableEnvironments.map(env => /*#__PURE__*/_jsx(EnvironmentOption, {
-          environment: env,
-          isSelected: env === currentEnvironment,
-          onPress: () => handleSelect(env)
-        }, env))
-      })
-    }), /*#__PURE__*/_jsxs(Pressable, {
-      onPress: handleToggle,
-      style: ({
-        pressed
-      }) => [styles.badge, isExpanded && styles.badgeExpanded, pressed && styles.badgePressed],
-      accessibilityRole: "button",
-      accessibilityLabel: `Current environment: ${config.label}. Tap to switch.`,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.dot, {
-          backgroundColor: config.backgroundColor
-        }, {
-          shadowColor: config.backgroundColor,
-          shadowOffset: {
-            width: 0,
-            height: 0
-          },
-          shadowOpacity: 0.6,
-          shadowRadius: 4,
-          elevation: 2
-        }]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.label,
-        numberOfLines: 1,
-        children: config.label
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          transform: [{
-            rotate: chevronRotation
-          }]
-        },
-        children: /*#__PURE__*/_jsx(ChevronUp, {
-          size: 10,
-          color: gameUIColors.muted
-        })
-      })]
-    })]
-  });
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: "relative",
-    zIndex: 1000
-  },
-  badge: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 6,
-    paddingLeft: 8,
-    paddingRight: 6,
-    gap: 6,
-    backgroundColor: "transparent",
-    borderRadius: 6
-  },
-  badgeExpanded: {
-    backgroundColor: gameUIColors.blackTint1,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0
-  },
-  badgePressed: {
-    opacity: 0.7
-  },
-  dot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4
-  },
-  label: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: gameUIColors.primaryLight,
-    letterSpacing: 0.5
-  },
-  optionsDropup: {
-    position: "absolute",
-    bottom: "100%",
-    left: 0,
-    right: 0,
-    backgroundColor: gameUIColors.blackTint1,
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderTopWidth: 1,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderBottomWidth: 0,
-    borderColor: gameUIColors.border,
-    overflow: "hidden",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: -4
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 10
-  },
-  optionContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 10,
-    height: OPTION_HEIGHT
-  },
-  optionContainerSelected: {
-    backgroundColor: "rgba(128, 128, 128, 0.1)"
-  },
-  optionContainerPressed: {
-    backgroundColor: "rgba(128, 128, 128, 0.2)"
-  },
-  optionLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1
-  },
-  optionDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    marginRight: 8
-  },
-  optionLabel: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: gameUIColors.primaryLight,
-    letterSpacing: 0.5
-  }
-});
+"use strict";import V,{useCallback as f,useEffect as O,useRef as m,useState as v}from"react";import{Animated as a,Pressable as C,StyleSheet as T,Text as w,View as d}from"react-native";import{Check as D,ChevronUp as S}from"../icons/index.js";import{gameUIColors as e}from"../ui/gameUI/constants/gameUIColors.js";import{normalizeEnvironment as E}from"../types/types.js";import{jsx as r,jsxs as p}from"react/jsx-runtime";const R=36;function y(s){const i=E(s);switch(i){case"local":return{label:"LOCAL",backgroundColor:e.info};case"dev":return{label:"DEV",backgroundColor:e.warning};case"qa":return{label:"QA",backgroundColor:e.optional};case"staging":return{label:"STAGING",backgroundColor:e.success};case"prod":return{label:"PROD",backgroundColor:e.error};default:return{label:"LOCAL",backgroundColor:e.info}}}function I({environment:s,isSelected:i,onPress:c}){const n=y(s);return p(C,{onPress:c,style:({pressed:g})=>[o.optionContainer,i&&o.optionContainerSelected,g&&o.optionContainerPressed],children:[p(d,{style:o.optionLeft,children:[r(d,{style:[o.optionDot,{backgroundColor:n.backgroundColor},{shadowColor:n.backgroundColor,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:3,elevation:2}]}),r(w,{style:o.optionLabel,numberOfLines:1,children:n.label})]}),i&&r(D,{size:12,color:e.success,strokeWidth:3})]})}export function EnvironmentSelectorInline({currentEnvironment:s,availableEnvironments:i,onSelect:c}){const[n,g]=v(false);const u=m(new a.Value(0)).current;const b=m(new a.Value(0)).current;const h=y(s);const l=i.length*R;O(()=>{a.parallel([a.timing(u,{toValue:n?l:0,duration:200,useNativeDriver:false}),a.timing(b,{toValue:n?1:0,duration:200,useNativeDriver:true})]).start()},[n,l,u,b]);const k=f(()=>{g(t=>!t)},[]);const L=f(t=>{g(false);c(t)},[c]);const x=b.interpolate({inputRange:[0,1],outputRange:["0deg","180deg"]});return p(d,{style:o.wrapper,children:[r(a.View,{style:[o.optionsDropup,{height:u,opacity:u.interpolate({inputRange:[0,l*.5,l],outputRange:[0,.8,1]})}],pointerEvents:n?"auto":"none",children:r(d,{style:{height:l},children:i.map(t=>r(I,{environment:t,isSelected:t===s,onPress:()=>L(t)},t))})}),p(C,{onPress:k,style:({pressed:t})=>[o.badge,n&&o.badgeExpanded,t&&o.badgePressed],accessibilityRole:"button",accessibilityLabel:`Current environment: ${h.label}. Tap to switch.`,children:[r(d,{style:[o.dot,{backgroundColor:h.backgroundColor},{shadowColor:h.backgroundColor,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:4,elevation:2}]}),r(w,{style:o.label,numberOfLines:1,children:h.label}),r(a.View,{style:{transform:[{rotate:x}]},children:r(S,{size:10,color:e.muted})})]})]})}const o=T.create({wrapper:{position:"relative",zIndex:1e3},badge:{flexDirection:"row",alignItems:"center",paddingVertical:6,paddingLeft:8,paddingRight:6,gap:6,backgroundColor:"transparent",borderRadius:6},badgeExpanded:{backgroundColor:e.blackTint1,borderTopLeftRadius:0,borderTopRightRadius:0},badgePressed:{opacity:.7},dot:{width:8,height:8,borderRadius:4},label:{fontSize:11,fontWeight:"600",color:e.primaryLight,letterSpacing:.5},optionsDropup:{position:"absolute",bottom:"100%",left:0,right:0,backgroundColor:e.blackTint1,borderTopLeftRadius:6,borderTopRightRadius:6,borderBottomLeftRadius:0,borderBottomRightRadius:0,borderTopWidth:1,borderLeftWidth:1,borderRightWidth:1,borderBottomWidth:0,borderColor:e.border,overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:8,elevation:10},optionContainer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:10,height:R},optionContainerSelected:{backgroundColor:"rgba(128, 128, 128, 0.1)"},optionContainerPressed:{backgroundColor:"rgba(128, 128, 128, 0.2)"},optionLeft:{flexDirection:"row",alignItems:"center",flex:1},optionDot:{width:6,height:6,borderRadius:3,marginRight:8},optionLabel:{fontSize:10,fontWeight:"600",color:e.primaryLight,letterSpacing:.5}});

package/lib/module/env/EnvironmentSelectorInline.web.js

@@ -1,173 +1 @@
-"use strict";
-
-/**
- * EnvironmentSelectorInline — Web (React DOM) twin of
- * EnvironmentSelectorInline.tsx: the interactive environment badge that
- * expands a drop-UP panel (absolute bottom:100%, opens upward so the bubble
- * layout doesn't shift). Same geometry: OPTION_HEIGHT 36, 200ms animation,
- * selected row gets a green check.
- */
-import { useState } from 'react';
-import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { getEnvironmentConfig } from "./EnvironmentIndicator.web.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const OPTION_HEIGHT = 36; // native EnvironmentSelectorInline OPTION_HEIGHT
-
-function ChevronUpGlyph({
-  color,
-  flipped
-}) {
-  return /*#__PURE__*/_jsx("svg", {
-    width: 10,
-    height: 10,
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    style: {
-      transform: flipped ? 'rotate(180deg)' : 'rotate(0deg)',
-      transition: 'transform 200ms ease' // native: 200ms rotation
-    },
-    children: /*#__PURE__*/_jsx("path", {
-      d: "M18 15l-6-6-6 6",
-      fill: "none",
-      stroke: color,
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-function CheckGlyph() {
-  // native: Check size 12 color #4AFF9F strokeWidth 3
-  return /*#__PURE__*/_jsx("svg", {
-    width: 12,
-    height: 12,
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    children: /*#__PURE__*/_jsx("path", {
-      d: "M20 6L9 17l-5-5",
-      fill: "none",
-      stroke: "#4AFF9F",
-      strokeWidth: "3",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function EnvironmentSelectorInline({
-  currentEnvironment,
-  availableEnvironments,
-  onSelect
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [hoveredEnv, setHoveredEnv] = useState(null);
-  const current = getEnvironmentConfig(currentEnvironment);
-  const panelHeight = availableEnvironments.length * OPTION_HEIGHT;
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      position: 'relative',
-      zIndex: 1000,
-      flexShrink: 0
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'absolute',
-        bottom: '100%',
-        left: 0,
-        right: 0,
-        height: expanded ? panelHeight : 0,
-        opacity: expanded ? 1 : 0,
-        overflow: 'hidden',
-        transition: 'height 200ms ease, opacity 200ms ease',
-        backgroundColor: 'rgba(8,12,21,0.95)',
-        border: '1px solid #00B8E666',
-        borderBottomWidth: 0,
-        borderTopLeftRadius: 6,
-        borderTopRightRadius: 6,
-        boxShadow: '0 -4px 8px rgba(0,0,0,0.3)'
-      },
-      children: availableEnvironments.map(env => {
-        const config = getEnvironmentConfig(env);
-        const isSelected = String(env).toLowerCase() === String(currentEnvironment).toLowerCase();
-        return /*#__PURE__*/_jsxs("button", {
-          onClick: () => {
-            setExpanded(false);
-            onSelect(env);
-          },
-          onMouseEnter: () => setHoveredEnv(String(env)),
-          onMouseLeave: () => setHoveredEnv(null),
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
-            height: OPTION_HEIGHT,
-            padding: '0 10px',
-            background: isSelected ? 'rgba(128,128,128,0.1)' : hoveredEnv === String(env) ? 'rgba(128,128,128,0.2)' : 'none',
-            border: 'none',
-            cursor: 'pointer'
-          },
-          children: [/*#__PURE__*/_jsxs("span", {
-            style: {
-              display: 'flex',
-              alignItems: 'center'
-            },
-            children: [/*#__PURE__*/_jsx("span", {
-              style: {
-                width: 6,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor: config.backgroundColor,
-                marginRight: 8
-              }
-            }), /*#__PURE__*/_jsx("span", {
-              style: {
-                fontSize: 10,
-                fontWeight: 600,
-                color: gameUIColors.primaryLight,
-                letterSpacing: 0.5
-              },
-              children: config.label
-            })]
-          }), isSelected && /*#__PURE__*/_jsx(CheckGlyph, {})]
-        }, String(env));
-      })
-    }), /*#__PURE__*/_jsxs("button", {
-      onClick: () => setExpanded(e => !e),
-      "aria-expanded": expanded,
-      "aria-label": `Environment: ${current.label}. Click to switch.`,
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 6,
-        padding: '6px 6px 6px 8px',
-        borderRadius: 6,
-        // native: expanded trigger fuses with panel (squared top corners)
-        borderTopLeftRadius: expanded ? 0 : 6,
-        borderTopRightRadius: expanded ? 0 : 6,
-        backgroundColor: expanded ? 'rgba(8,12,21,0.95)' : 'transparent',
-        border: 'none',
-        cursor: 'pointer'
-      },
-      children: [/*#__PURE__*/_jsx("span", {
-        style: {
-          width: 8,
-          height: 8,
-          borderRadius: 4,
-          backgroundColor: current.backgroundColor,
-          boxShadow: `0 0 4px ${current.backgroundColor}99`
-        }
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          fontSize: 11,
-          fontWeight: 600,
-          color: gameUIColors.primaryLight,
-          letterSpacing: 0.5
-        },
-        children: current.label
-      }), /*#__PURE__*/_jsx(ChevronUpGlyph, {
-        color: "#7A8599",
-        flipped: expanded
-      })]
-    })]
-  });
-}
+"use strict";import{useState as p}from"react";import{gameUIColors as g}from"../ui/gameUI/constants/gameUIColors.js";import{getEnvironmentConfig as c}from"./EnvironmentIndicator.web.js";import{jsx as e,jsxs as s}from"react/jsx-runtime";const u=36;function m({color:r,flipped:n}){return e("svg",{width:10,height:10,viewBox:"0 0 24 24","aria-hidden":"true",style:{transform:n?"rotate(180deg)":"rotate(0deg)",transition:"transform 200ms ease"},children:e("path",{d:"M18 15l-6-6-6 6",fill:"none",stroke:r,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function k(){return e("svg",{width:12,height:12,viewBox:"0 0 24 24","aria-hidden":"true",children:e("path",{d:"M20 6L9 17l-5-5",fill:"none",stroke:"#4AFF9F",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})})}export function EnvironmentSelectorInline({currentEnvironment:r,availableEnvironments:n,onSelect:b}){const[t,a]=p(false);const[f,d]=p(null);const i=c(r);const x=n.length*u;return s("div",{style:{position:"relative",zIndex:1e3,flexShrink:0},children:[e("div",{style:{position:"absolute",bottom:"100%",left:0,right:0,height:t?x:0,opacity:t?1:0,overflow:"hidden",transition:"height 200ms ease, opacity 200ms ease",backgroundColor:"rgba(8,12,21,0.95)",border:"1px solid #00B8E666",borderBottomWidth:0,borderTopLeftRadius:6,borderTopRightRadius:6,boxShadow:"0 -4px 8px rgba(0,0,0,0.3)"},children:n.map(o=>{const l=c(o);const h=String(o).toLowerCase()===String(r).toLowerCase();return s("button",{onClick:()=>{a(false);b(o)},onMouseEnter:()=>d(String(o)),onMouseLeave:()=>d(null),style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",height:u,padding:"0 10px",background:h?"rgba(128,128,128,0.1)":f===String(o)?"rgba(128,128,128,0.2)":"none",border:"none",cursor:"pointer"},children:[s("span",{style:{display:"flex",alignItems:"center"},children:[e("span",{style:{width:6,height:6,borderRadius:3,backgroundColor:l.backgroundColor,marginRight:8}}),e("span",{style:{fontSize:10,fontWeight:600,color:g.primaryLight,letterSpacing:.5},children:l.label})]}),h&&e(k,{})]},String(o))})}),s("button",{onClick:()=>a(o=>!o),"aria-expanded":t,"aria-label":`Environment: ${i.label}. Click to switch.`,style:{display:"flex",alignItems:"center",gap:6,padding:"6px 6px 6px 8px",borderRadius:6,borderTopLeftRadius:t?0:6,borderTopRightRadius:t?0:6,backgroundColor:t?"rgba(8,12,21,0.95)":"transparent",border:"none",cursor:"pointer"},children:[e("span",{style:{width:8,height:8,borderRadius:4,backgroundColor:i.backgroundColor,boxShadow:`0 0 4px ${i.backgroundColor}99`}}),e("span",{style:{fontSize:11,fontWeight:600,color:g.primaryLight,letterSpacing:.5},children:i.label}),e(m,{color:"#7A8599",flipped:t})]})]})}