@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/gameUI/components/GameUIIssuesList.js

@@ -1,280 +1 @@
-"use strict";
-
-import { useState, useCallback } from "react";
-import { StyleSheet, Text, View, TouchableOpacity, Animated } from "react-native";
-import { AlertOctagon, AlertTriangle, ChevronDown, ChevronUp } from "../../../icons/index.js";
-import { gameUIColors } from "../constants/gameUIColors.js";
-import { monoFont } from "../../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Reusable issues list component with expandable details
- * Shows validation errors in a compact, game-styled format
- * Used in ENV and Storage pages for displaying problems
- */
-export function GameUIIssuesList({
-  issues,
-  onIssueClick,
-  hintText = "Tap any issue to view details",
-  style,
-  expandable = true,
-  statusLabels = {
-    missing: "Not found",
-    wrong_type: "Type error",
-    wrong_value: "Invalid value"
-  }
-}) {
-  const [expandedIssues, setExpandedIssues] = useState(new Set());
-  const toggleIssue = useCallback(key => {
-    if (!expandable) return;
-    setExpandedIssues(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(key)) {
-        newSet.delete(key);
-      } else {
-        newSet.add(key);
-      }
-      return newSet;
-    });
-  }, [expandable]);
-  const getStatusColor = status => {
-    return status === "missing" ? gameUIColors.warning : gameUIColors.info;
-  };
-  const getStatusIcon = status => {
-    return status === "missing" ? AlertOctagon : AlertTriangle;
-  };
-  const getStatusLabel = issue => {
-    switch (issue.status) {
-      case "missing":
-        return `• ${statusLabels.missing}`;
-      case "wrong_type":
-        return `• ${statusLabels.wrong_type}${issue.expectedType ? `: Expected ${issue.expectedType}` : ""}`;
-      case "wrong_value":
-        return `• ${statusLabels.wrong_value}${issue.value ? `: ${String(issue.value).substring(0, 20)}` : ""}`;
-      default:
-        return "";
-    }
-  };
-  if (issues.length === 0) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    children: [issues.map((issue, index) => {
-      const statusColor = getStatusColor(issue.status);
-      const StatusIcon = getStatusIcon(issue.status);
-      const isExpanded = expandedIssues.has(issue.key);
-      const ChevronIcon = isExpanded ? ChevronUp : ChevronDown;
-      return /*#__PURE__*/_jsxs(View, {
-        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-          onPress: () => {
-            if (expandable) {
-              toggleIssue(issue.key);
-            }
-            onIssueClick?.(issue);
-          },
-          style: styles.issueRow,
-          activeOpacity: 0.7,
-          children: [/*#__PURE__*/_jsx(StatusIcon, {
-            size: 14,
-            color: statusColor
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.issueContent,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.issueKey, {
-                color: gameUIColors.primary
-              }],
-              children: issue.key
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.issueDesc,
-              children: getStatusLabel(issue)
-            })]
-          }), expandable && /*#__PURE__*/_jsx(ChevronIcon, {
-            size: 12,
-            color: gameUIColors.muted
-          })]
-        }), expandable && isExpanded && /*#__PURE__*/_jsxs(Animated.View, {
-          style: styles.issueDetails,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.detailLabel,
-              children: "Status:"
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: [styles.detailValue, {
-                color: gameUIColors.primary,
-                fontWeight: "600"
-              }],
-              children: [issue.status === "missing" && "MISSING", issue.status === "wrong_type" && "TYPE ERROR", issue.status === "wrong_value" && "INVALID VALUE"]
-            })]
-          }), issue.value !== undefined && issue.status !== "missing" && /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.detailLabel,
-              children: "Current:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: gameUIColors.warning
-              }],
-              children: `"${String(issue.value)}"`
-            })]
-          }), issue.expectedType && issue.status === "wrong_type" && /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.detailLabel,
-              children: "Expected:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: gameUIColors.success
-              }],
-              children: issue.expectedType
-            })]
-          }), issue.expectedValue && issue.status === "wrong_value" && /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.detailLabel,
-              children: "Expected:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: gameUIColors.success
-              }],
-              children: `"${issue.expectedValue}"`
-            })]
-          }), issue.description && /*#__PURE__*/_jsx(View, {
-            style: styles.descSection,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.descText,
-              children: issue.description
-            })
-          }), issue.fixSuggestion && /*#__PURE__*/_jsxs(View, {
-            style: styles.fixSection,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.fixLabel,
-              children: "HOW TO FIX"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.fixText,
-              children: issue.fixSuggestion
-            })]
-          })]
-        })]
-      }, `${issue.key}-${index}`);
-    }), hintText && /*#__PURE__*/_jsx(Text, {
-      style: styles.hint,
-      children: hintText
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: gameUIColors.panel,
-    borderRadius: 8,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: gameUIColors.warning + "33"
-  },
-  issueRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-    paddingHorizontal: 8,
-    borderRadius: 6,
-    marginBottom: 4
-  },
-  issueContent: {
-    flex: 1,
-    marginLeft: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  issueKey: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  issueDesc: {
-    fontSize: 10,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  hint: {
-    fontSize: 9,
-    color: gameUIColors.muted,
-    fontFamily: monoFont,
-    textAlign: "center",
-    marginTop: 8,
-    paddingTop: 8,
-    borderTopWidth: 1,
-    borderTopColor: gameUIColors.primary + "0D"
-  },
-  // Expanded details
-  issueDetails: {
-    marginTop: 8,
-    marginLeft: 22,
-    marginRight: 8,
-    paddingLeft: 12,
-    paddingRight: 8,
-    paddingTop: 8,
-    paddingBottom: 8,
-    backgroundColor: gameUIColors.background + "4D",
-    borderLeftWidth: 2,
-    borderLeftColor: gameUIColors.primary + "1A",
-    borderRadius: 4
-  },
-  detailRow: {
-    flexDirection: "row",
-    marginTop: 8,
-    alignItems: "flex-start"
-  },
-  detailLabel: {
-    fontSize: 10,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    fontWeight: "600",
-    width: 70
-  },
-  detailValue: {
-    fontSize: 11,
-    color: gameUIColors.primary,
-    fontFamily: monoFont,
-    flex: 1,
-    lineHeight: 16
-  },
-  fixSection: {
-    marginTop: 12,
-    padding: 10,
-    backgroundColor: gameUIColors.info + "14",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: gameUIColors.info + "33"
-  },
-  fixLabel: {
-    fontSize: 10,
-    color: gameUIColors.info,
-    fontFamily: monoFont,
-    fontWeight: "700",
-    marginBottom: 6,
-    letterSpacing: 0.5
-  },
-  fixText: {
-    fontSize: 11,
-    color: gameUIColors.primary,
-    fontFamily: monoFont,
-    lineHeight: 18,
-    backgroundColor: gameUIColors.background + "66",
-    padding: 8,
-    borderRadius: 4,
-    overflow: "hidden"
-  },
-  descSection: {
-    marginTop: 10,
-    paddingTop: 10,
-    borderTopWidth: 1,
-    borderTopColor: gameUIColors.primary + "0D"
-  },
-  descText: {
-    fontSize: 10,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    marginTop: 4,
-    lineHeight: 14
-  }
-});
+"use strict";import{useState as v,useCallback as R}from"react";import{StyleSheet as L,Text as n,View as l,TouchableOpacity as D,Animated as V}from"react-native";import{AlertOctagon as _,AlertTriangle as z,ChevronDown as $,ChevronUp as F}from"../../../icons/index.js";import{gameUIColors as t}from"../constants/gameUIColors.js";import{monoFont as a}from"../../fonts.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";export function GameUIIssuesList({issues:p,onIssueClick:m,hintText:y="Tap any issue to view details",style:u,expandable:c=true,statusLabels:s={missing:"Not found",wrong_type:"Type error",wrong_value:"Invalid value"}}){const[h,w]=v(new Set);const x=R(e=>{if(!c)return;w(g=>{const d=new Set(g);if(d.has(e)){d.delete(e)}else{d.add(e)}return d})},[c]);const S=e=>{return e==="missing"?t.warning:t.info};const T=e=>{return e==="missing"?_:z};const b=e=>{switch(e.status){case"missing":return`\u2022 ${s.missing}`;case"wrong_type":return`\u2022 ${s.wrong_type}${e.expectedType?`: Expected ${e.expectedType}`:""}`;case"wrong_value":return`\u2022 ${s.wrong_value}${e.value?`: ${String(e.value).substring(0,20)}`:""}`;default:return""}};if(p.length===0)return null;return i(l,{style:[o.container,u],children:[p.map((e,g)=>{const d=S(e.status);const C=T(e.status);const f=h.has(e.key);const I=f?F:$;return i(l,{children:[i(D,{onPress:()=>{if(c){x(e.key)}m?.(e)},style:o.issueRow,activeOpacity:.7,children:[r(C,{size:14,color:d}),i(l,{style:o.issueContent,children:[r(n,{style:[o.issueKey,{color:t.primary}],children:e.key}),r(n,{style:o.issueDesc,children:b(e)})]}),c&&r(I,{size:12,color:t.muted})]}),c&&f&&i(V.View,{style:o.issueDetails,children:[i(l,{style:o.detailRow,children:[r(n,{style:o.detailLabel,children:"Status:"}),i(n,{style:[o.detailValue,{color:t.primary,fontWeight:"600"}],children:[e.status==="missing"&&"MISSING",e.status==="wrong_type"&&"TYPE ERROR",e.status==="wrong_value"&&"INVALID VALUE"]})]}),e.value!==void 0&&e.status!=="missing"&&i(l,{style:o.detailRow,children:[r(n,{style:o.detailLabel,children:"Current:"}),r(n,{style:[o.detailValue,{color:t.warning}],children:`"${String(e.value)}"`})]}),e.expectedType&&e.status==="wrong_type"&&i(l,{style:o.detailRow,children:[r(n,{style:o.detailLabel,children:"Expected:"}),r(n,{style:[o.detailValue,{color:t.success}],children:e.expectedType})]}),e.expectedValue&&e.status==="wrong_value"&&i(l,{style:o.detailRow,children:[r(n,{style:o.detailLabel,children:"Expected:"}),r(n,{style:[o.detailValue,{color:t.success}],children:`"${e.expectedValue}"`})]}),e.description&&r(l,{style:o.descSection,children:r(n,{style:o.descText,children:e.description})}),e.fixSuggestion&&i(l,{style:o.fixSection,children:[r(n,{style:o.fixLabel,children:"HOW TO FIX"}),r(n,{style:o.fixText,children:e.fixSuggestion})]})]})]},`${e.key}-${g}`)}),y&&r(n,{style:o.hint,children:y})]})}const o=L.create({container:{backgroundColor:t.panel,borderRadius:8,padding:8,borderWidth:1,borderColor:t.warning+"33"},issueRow:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingHorizontal:8,borderRadius:6,marginBottom:4},issueContent:{flex:1,marginLeft:8,flexDirection:"row",alignItems:"center",gap:8},issueKey:{fontSize:11,fontWeight:"600",fontFamily:a},issueDesc:{fontSize:10,color:t.secondary,fontFamily:a,flex:1},hint:{fontSize:9,color:t.muted,fontFamily:a,textAlign:"center",marginTop:8,paddingTop:8,borderTopWidth:1,borderTopColor:t.primary+"0D"},issueDetails:{marginTop:8,marginLeft:22,marginRight:8,paddingLeft:12,paddingRight:8,paddingTop:8,paddingBottom:8,backgroundColor:t.background+"4D",borderLeftWidth:2,borderLeftColor:t.primary+"1A",borderRadius:4},detailRow:{flexDirection:"row",marginTop:8,alignItems:"flex-start"},detailLabel:{fontSize:10,color:t.secondary,fontFamily:a,fontWeight:"600",width:70},detailValue:{fontSize:11,color:t.primary,fontFamily:a,flex:1,lineHeight:16},fixSection:{marginTop:12,padding:10,backgroundColor:t.info+"14",borderRadius:6,borderWidth:1,borderColor:t.info+"33"},fixLabel:{fontSize:10,color:t.info,fontFamily:a,fontWeight:"700",marginBottom:6,letterSpacing:.5},fixText:{fontSize:11,color:t.primary,fontFamily:a,lineHeight:18,backgroundColor:t.background+"66",padding:8,borderRadius:4,overflow:"hidden"},descSection:{marginTop:10,paddingTop:10,borderTopWidth:1,borderTopColor:t.primary+"0D"},descText:{fontSize:10,color:t.secondary,fontFamily:a,marginTop:4,lineHeight:14}});

package/lib/module/ui/gameUI/components/GameUIStatusHeader.js

@@ -1,141 +1 @@
-"use strict";
-
-import { StyleSheet, Text, View, Animated } from "react-native";
-import { absoluteFill } from "../../../utils/absoluteFill.js";
-import { gameUIColors } from "../constants/gameUIColors.js";
-import { monoFont } from "../../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Reusable status header component showing system health
- * Displays icon, status label, subtitle, and badge
- * Used at the top of ENV, Storage, and other diagnostic screens
- */
-export function GameUIStatusHeader({
-  alertConfig,
-  badgeText,
-  animatedStyle,
-  style,
-  indicatorCount = 3
-}) {
-  const IconComponent = alertConfig.icon;
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.container, {
-      borderColor: alertConfig.color + "40"
-    }, style, animatedStyle],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.glow, {
-        backgroundColor: alertConfig.color + "10"
-      }]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.iconWrapper, {
-          backgroundColor: alertConfig.color + "15"
-        }],
-        children: /*#__PURE__*/_jsx(IconComponent, {
-          size: 20,
-          color: alertConfig.color
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.label, {
-            color: alertConfig.color
-          }],
-          children: alertConfig.label
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.subtitle,
-          children: alertConfig.subtitle
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          backgroundColor: alertConfig.color + "20"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.badgeText, {
-            color: alertConfig.color
-          }],
-          children: badgeText
-        })
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.indicators,
-      children: [...Array(indicatorCount)].map((_, i) => /*#__PURE__*/_jsx(View, {
-        style: [styles.indicatorDot, {
-          backgroundColor: alertConfig.color,
-          opacity: alertConfig.pulse ? i === 0 ? 1 : 0.5 - i * 0.2 : 0.3 - i * 0.1
-        }]
-      }, i))
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: gameUIColors.panel,
-    borderRadius: 12,
-    borderWidth: 1,
-    padding: 16,
-    marginBottom: 16,
-    position: "relative",
-    overflow: "hidden"
-  },
-  glow: {
-    ...absoluteFill,
-    opacity: 0.5
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  },
-  iconWrapper: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  textContainer: {
-    flex: 1,
-    gap: 2
-  },
-  label: {
-    fontSize: 13,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 1.5,
-    textShadowOffset: {
-      width: 0,
-      height: 0
-    },
-    textShadowRadius: 8
-  },
-  subtitle: {
-    fontSize: 10,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont
-  },
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4
-  },
-  badgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 1
-  },
-  indicators: {
-    position: "absolute",
-    top: 8,
-    right: 8,
-    flexDirection: "row",
-    gap: 3
-  },
-  indicatorDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2
-  }
-});
+"use strict";import{StyleSheet as m,Text as n,View as r,Animated as u}from"react-native";import{absoluteFill as y}from"../../../utils/absoluteFill.js";import{gameUIColors as a}from"../constants/gameUIColors.js";import{monoFont as l}from"../../fonts.js";import{jsx as e,jsxs as c}from"react/jsx-runtime";export function GameUIStatusHeader({alertConfig:o,badgeText:d,animatedStyle:s,style:p,indicatorCount:h=3}){const b=o.icon;return c(u.View,{style:[t.container,{borderColor:o.color+"40"},p,s],children:[e(r,{style:[t.glow,{backgroundColor:o.color+"10"}]}),c(r,{style:t.content,children:[e(r,{style:[t.iconWrapper,{backgroundColor:o.color+"15"}],children:e(b,{size:20,color:o.color})}),c(r,{style:t.textContainer,children:[e(n,{style:[t.label,{color:o.color}],children:o.label}),e(n,{style:t.subtitle,children:o.subtitle})]}),e(r,{style:[t.badge,{backgroundColor:o.color+"20"}],children:e(n,{style:[t.badgeText,{color:o.color}],children:d})})]}),e(r,{style:t.indicators,children:[...Array(h)].map((g,i)=>e(r,{style:[t.indicatorDot,{backgroundColor:o.color,opacity:o.pulse?i===0?1:.5-i*.2:.3-i*.1}]},i))})]})}const t=m.create({container:{backgroundColor:a.panel,borderRadius:12,borderWidth:1,padding:16,marginBottom:16,position:"relative",overflow:"hidden"},glow:{...y,opacity:.5},content:{flexDirection:"row",alignItems:"center",gap:12},iconWrapper:{width:36,height:36,borderRadius:8,justifyContent:"center",alignItems:"center"},textContainer:{flex:1,gap:2},label:{fontSize:13,fontWeight:"700",fontFamily:l,letterSpacing:1.5,textShadowOffset:{width:0,height:0},textShadowRadius:8},subtitle:{fontSize:10,color:a.secondary,fontFamily:l},badge:{paddingHorizontal:8,paddingVertical:4,borderRadius:4},badgeText:{fontSize:9,fontWeight:"700",fontFamily:l,letterSpacing:1},indicators:{position:"absolute",top:8,right:8,flexDirection:"row",gap:3},indicatorDot:{width:4,height:4,borderRadius:2}});

package/lib/module/ui/gameUI/constants/gameUIColors.js

@@ -1,220 +1 @@
-"use strict";
-
-/**
- * Game UI Color Palette - Simple Theme Swapping
- *
- * TO CHANGE THEME:
- * 1. Comment out the current theme line
- * 2. Uncomment the theme you want
- * 3. Save and refresh
- */
-
-import { macOSGameUIColors, refreshMacOSGameUIColors } from "./macOSDesignSystemColors.js";
-
-// ============================================
-// THEME DEFINITIONS
-// ============================================
-
-// Kept (and exported) as the reference palette for theme swapping — see the
-// header comment. Unused by the active theme selection.
-export const _defaultTheme = {
-  // Base colors
-  border: "#00B8E666",
-  blackTint1: "rgba(8, 12, 21, 0.95)",
-  blackTint2: "rgba(16, 22, 35, 0.9)",
-  blackTint3: "rgba(24, 32, 48, 0.85)",
-  // Status Colors - Mixed colors for different semantic meanings
-  success: "#4AFF9F",
-  // Green for success
-  warning: "#FFEB3B",
-  // Yellow for warning
-  error: "#FF5252",
-  // Red for error
-  info: "#00B8E6",
-  // Cyan for info
-  critical: "#FF00FF",
-  // Magenta for critical
-  optional: "#9D4EDD",
-  // Purple for optional
-
-  // Tool Colors - Different colors for different tools
-  env: "#4AFF9F",
-  // Green for environment
-  storage: "#BA68C8",
-  // Purple/Magenta for storage (was yellow)
-  query: "#00B8E6",
-  // Cyan for query
-  debug: "#FF5252",
-  // Red for debug
-  network: "#4AFF9F",
-  // Green for network to match connectivity theme
-
-  // Data Types - Varied colors for syntax highlighting
-  dataTypes: {
-    object: "#00B8E6",
-    // Cyan
-    array: "#FFEB3B",
-    // Yellow
-    string: "#4AFF9F",
-    // Green
-    number: "#FF9F1C",
-    // Orange
-    boolean: "#FF00FF",
-    // Magenta
-    function: "#9D4EDD",
-    // Purple
-    undefined: "#7A8599",
-    // Gray
-    null: "#FF5252" // Red
-  },
-  // Text
-  text: "#FFFFFF",
-  secondary: "#B8BFC9",
-  tertiary: "#9CA3AF",
-  muted: "#7A8599",
-  // Neon - Multi-color glow effects
-  neonGlow: {
-    primary: "#00D4FF",
-    secondary: "#FF00FF",
-    tertiary: "#4AFF9F"
-  },
-  // Diff Viewer Colors - Exact from devToolsDefaultTheme
-  diff: {
-    // Line backgrounds
-    addedBackground: "rgba(74, 255, 159, 0.1)",
-    // Green-cyan for additions
-    removedBackground: "rgba(255, 82, 82, 0.1)",
-    // Red for removals
-    modifiedBackground: "rgba(0, 184, 230, 0.1)",
-    // Cyan for modifications
-    unchangedBackground: "transparent",
-    contextBackground: "rgba(255, 255, 255, 0.02)",
-    // Text colors
-    addedText: "#4AFF9F",
-    // Bright green-cyan
-    removedText: "#FF5252",
-    // Bright red
-    modifiedText: "#00B8E6",
-    // Bright cyan
-    unchangedText: "#B8BFC9",
-    // Muted text
-
-    // Word-level highlights (darker than line backgrounds)
-    addedWordHighlight: "rgba(74, 255, 159, 0.3)",
-    removedWordHighlight: "rgba(255, 82, 82, 0.3)",
-    // Line numbers
-    lineNumberBackground: "#0A0E1A",
-    lineNumberText: "#7A8599",
-    lineNumberBorder: "#1F2937",
-    // Markers (+/-)
-    markerAddedBackground: "rgba(74, 255, 159, 0.2)",
-    markerRemovedBackground: "rgba(255, 82, 82, 0.2)",
-    markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
-    markerText: "#7A8599"
-  }
-};
-
-// macOS theme - Apple HIG based design system
-const macOSTheme = macOSGameUIColors;
-
-// ============================================
-// THEME SELECTION - Just change this one line!
-// ============================================
-
-// const activeTheme = _defaultTheme; // DEFAULT - Mixed colors (original)
-const activeTheme = macOSTheme; // macOS - Apple HIG design system
-
-// ============================================
-// GAME UI COLORS (uses selected theme)
-// ============================================
-
-/* NOTE ON KEY ORDER — the spread comes LAST on purpose.
- *
- * These seven keys are fallbacks for `defaultTheme`, which doesn't define them.
- * They used to sit AFTER the spread, which meant they silently overrode the
- * active theme: `background`/`panel`/`buttonBackground` stayed hardcoded dark
- * and `primary`/`primaryLight` stayed hardcoded white, no matter what palette
- * was selected, so a theme could not override them at all. With the spread
- * last, an active theme that defines them wins and only `defaultTheme` falls
- * back. */
-/** Fallbacks (dark-ish) for themes that don't define these keys — only
- * `defaultTheme` needs them; `macOSTheme` supplies all seven. */
-const fallbacks = {
-  background: "rgba(8, 12, 21, 0.98)",
-  panel: "rgba(16, 22, 35, 0.98)",
-  backdrop: "rgba(0, 0, 0, 0.85)",
-  buttonBackground: "rgba(12, 16, 26, 0.9)",
-  pureBlack: "#000000",
-  // Default text colors for dark background
-  primary: "#FFFFFF",
-  primaryLight: "#F1F5F9"
-};
-export const gameUIColors = {
-  ...fallbacks,
-  ...activeTheme
-};
-/** Re-derive the theme-driven values in place after `macOSColors` has been
- * re-tinted at runtime (desktop dashboard theme switch only — see
- * in place). Keeps object identity so every
- * `gameUIColors.x` read at render time picks the new value up. Module-level
- * captures (`const BG = gameUIColors.panel`) still need a reload. */
-export const refreshGameUIColors = () => {
-  refreshMacOSGameUIColors();
-  Object.assign(gameUIColors, activeTheme);
-};
-
-// ============================================
-// BUOY BRAND COLORS
-// ============================================
-/**
- * Buoy brand colors - EXACT values from web docs site dark theme.
- * Use these for consistent branding across all Buoy dev tools.
- */
-export const buoyColors = {
-  // Backgrounds (dark to light)
-  base: "#121212",
-  card: "#1A1A1A",
-  /**
-   * Card fill for surfaces that sit over a ToolBackground: translucent so the
-   * field reads through, but calibrated against the BRIGHTEST scene in the
-   * catalogue (Live Sky's noon clouds/sun bloom, ~215 luminance) so a card's
-   * backing stays ≤ ~45 luminance and text never washes out. Over the "off"
-   * preset it is visually indistinguishable from `card`.
-   */
-  cardScrim: "rgba(10,13,20,0.9)",
-  hover: "#242424",
-  input: "#2A2A2A",
-  // Borders
-  border: "#333333",
-  borderStrong: "#444444",
-  // Text (light to dark)
-  text: "#E0E0E0",
-  textSecondary: "#A0A0A0",
-  textMuted: "#888888",
-  // Accent colors
-  primary: "#20C997",
-  // Buoy teal
-  success: "#20C997",
-  // Same as primary
-  warning: "#FFA94D",
-  // Orange
-  error: "#EF4444",
-  // Red
-  info: "#00B8E6" // Cyan for info/devices
-};
-/**
- * LEGACY copy of the dial palette — the source of truth is `dialColors` in
- * @buoy-gg/floating-tools-core (`src/dial.ts`); keep the two in sync.
- * Values mirror the night theme (see `ui/night/nightTheme.ts`).
- */
-export const dialColors = {
-  dialBackground: "#050505",
-  dialGradient1: "rgba(255, 255, 255, 0.05)",
-  dialGradient2: "rgba(255, 255, 255, 0.03)",
-  dialGradient3: "rgba(255, 255, 255, 0.06)",
-  dialBorder: "rgba(255, 255, 255, 0.12)",
-  dialShadow: "#000000",
-  dialGridLine: "rgba(255, 255, 255, 0.08)",
-  hubFill: "rgba(5, 5, 5, 0.34)",
-  hubHalo: "rgba(5, 5, 5, 0.12)"
-};
+"use strict";import{macOSGameUIColors as a,refreshMacOSGameUIColors as e}from"./macOSDesignSystemColors.js";export const _defaultTheme={border:"#00B8E666",blackTint1:"rgba(8, 12, 21, 0.95)",blackTint2:"rgba(16, 22, 35, 0.9)",blackTint3:"rgba(24, 32, 48, 0.85)",success:"#4AFF9F",warning:"#FFEB3B",error:"#FF5252",info:"#00B8E6",critical:"#FF00FF",optional:"#9D4EDD",env:"#4AFF9F",storage:"#BA68C8",query:"#00B8E6",debug:"#FF5252",network:"#4AFF9F",dataTypes:{object:"#00B8E6",array:"#FFEB3B",string:"#4AFF9F",number:"#FF9F1C",boolean:"#FF00FF",function:"#9D4EDD",undefined:"#7A8599",null:"#FF5252"},text:"#FFFFFF",secondary:"#B8BFC9",tertiary:"#9CA3AF",muted:"#7A8599",neonGlow:{primary:"#00D4FF",secondary:"#FF00FF",tertiary:"#4AFF9F"},diff:{addedBackground:"rgba(74, 255, 159, 0.1)",removedBackground:"rgba(255, 82, 82, 0.1)",modifiedBackground:"rgba(0, 184, 230, 0.1)",unchangedBackground:"transparent",contextBackground:"rgba(255, 255, 255, 0.02)",addedText:"#4AFF9F",removedText:"#FF5252",modifiedText:"#00B8E6",unchangedText:"#B8BFC9",addedWordHighlight:"rgba(74, 255, 159, 0.3)",removedWordHighlight:"rgba(255, 82, 82, 0.3)",lineNumberBackground:"#0A0E1A",lineNumberText:"#7A8599",lineNumberBorder:"#1F2937",markerAddedBackground:"rgba(74, 255, 159, 0.2)",markerRemovedBackground:"rgba(255, 82, 82, 0.2)",markerModifiedBackground:"rgba(0, 184, 230, 0.2)",markerText:"#7A8599"}};const o=a;const r=o;const d={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",backdrop:"rgba(0, 0, 0, 0.85)",buttonBackground:"rgba(12, 16, 26, 0.9)",pureBlack:"#000000",primary:"#FFFFFF",primaryLight:"#F1F5F9"};export const gameUIColors={...d,...r};export const refreshGameUIColors=()=>{e();Object.assign(gameUIColors,r)};export const buoyColors={base:"#121212",card:"#1A1A1A",cardScrim:"rgba(10,13,20,0.9)",hover:"#242424",input:"#2A2A2A",border:"#333333",borderStrong:"#444444",text:"#E0E0E0",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997",success:"#20C997",warning:"#FFA94D",error:"#EF4444",info:"#00B8E6"};export const dialColors={dialBackground:"#050505",dialGradient1:"rgba(255, 255, 255, 0.05)",dialGradient2:"rgba(255, 255, 255, 0.03)",dialGradient3:"rgba(255, 255, 255, 0.06)",dialBorder:"rgba(255, 255, 255, 0.12)",dialShadow:"#000000",dialGridLine:"rgba(255, 255, 255, 0.08)",hubFill:"rgba(5, 5, 5, 0.34)",hubHalo:"rgba(5, 5, 5, 0.12)"};