@buoy-gg/shared-ui 7.0.39 → 7.0.41

package/lib/web/chunks/chunk-AZBMFPMX.mjs

@@ -0,0 +1,1421 @@
+"use client";
+import {
+  ActivityGlyph,
+  AlertCircleGlyph,
+  AlertOctagon,
+  AlertTriangleGlyph,
+  CheckCircleGlyph,
+  ChevronDownGlyph,
+  ChevronUpGlyph,
+  HelpCircle,
+  monoFont
+} from "./chunk-56TTTMX4.mjs";
+import {
+  gameUIColors
+} from "./chunk-QPY45R5F.mjs";
+
+// src/utils/safeStringify.ts
+var CIRCULAR_REPLACE_NODE = "[Circular]";
+var LIMIT_REPLACE_NODE = "[...]";
+function safeStringify(obj, space, options = {}) {
+  const {
+    depthLimit = Number.MAX_SAFE_INTEGER,
+    edgesLimit = Number.MAX_SAFE_INTEGER
+  } = options;
+  const arr = [];
+  function decirc(val, k, edgeIndex, stack, parent, depth) {
+    depth += 1;
+    if (typeof val === "object" && val !== null) {
+      for (let i = 0; i < stack.length; i++) {
+        if (stack[i] === val) {
+          setReplace(CIRCULAR_REPLACE_NODE, val, k, parent);
+          return;
+        }
+      }
+      if (depth > depthLimit) {
+        setReplace(LIMIT_REPLACE_NODE, val, k, parent);
+        return;
+      }
+      if (edgeIndex + 1 > edgesLimit) {
+        setReplace(LIMIT_REPLACE_NODE, val, k, parent);
+        return;
+      }
+      stack.push(val);
+      if (Array.isArray(val)) {
+        const arrayParent = val;
+        for (let i = 0; i < val.length; i++) {
+          decirc(val[i], i, i, stack, arrayParent, depth);
+        }
+      } else if (val instanceof Map || val instanceof Set || val instanceof RegExp || val instanceof Date || val instanceof Error) {
+        stack.pop();
+        return;
+      } else {
+        const objParent = val;
+        const keys = Object.keys(objParent);
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i];
+          decirc(objParent[key], key, i, stack, objParent, depth);
+        }
+      }
+      stack.pop();
+    }
+  }
+  function setReplace(replace, val, k, parent) {
+    if (!parent) return;
+    const propertyDescriptor = Object.getOwnPropertyDescriptor(parent, k);
+    if (propertyDescriptor?.get !== void 0) {
+      if (propertyDescriptor.configurable) {
+        Object.defineProperty(parent, k, { value: replace });
+        arr.push([parent, k, val, propertyDescriptor]);
+      } else {
+        return;
+      }
+    } else {
+      parent[k] = replace;
+      arr.push([parent, k, val]);
+    }
+  }
+  const replacer = (key, value) => {
+    if (typeof value === "bigint") return `${value.toString()}n`;
+    if (typeof value === "symbol") return value.toString();
+    if (typeof value === "undefined") return "undefined";
+    if (typeof value === "function") {
+      return `[Function: ${value.name || "anonymous"}]`;
+    }
+    if (typeof value === "number") {
+      if (value === Infinity) return "Infinity";
+      if (value === -Infinity) return "-Infinity";
+      if (Number.isNaN(value)) return "NaN";
+    }
+    if (value instanceof Error) {
+      const errorObj = {
+        name: value.name,
+        message: value.message,
+        stack: value.stack
+      };
+      Object.getOwnPropertyNames(value).forEach((prop) => {
+        if (!["name", "message", "stack"].includes(prop)) {
+          try {
+            const propValue = value[prop];
+            if (propValue !== void 0) {
+              errorObj[prop] = propValue;
+            }
+          } catch {
+          }
+        }
+      });
+      return errorObj;
+    }
+    if (value instanceof Date) return value.toISOString();
+    if (value instanceof RegExp) return value.toString();
+    if (value instanceof Map) {
+      try {
+        const entries = Array.from(value.entries()).map(([mapKey, val]) => [
+          String(mapKey),
+          val
+        ]);
+        return {
+          __type: "Map",
+          entries
+        };
+      } catch {
+        return {
+          __type: "Map",
+          entries: "[Map iteration failed]"
+        };
+      }
+    }
+    if (value instanceof Set) {
+      try {
+        return {
+          __type: "Set",
+          values: Array.from(value)
+        };
+      } catch {
+        return {
+          __type: "Set",
+          values: "[Set iteration failed]"
+        };
+      }
+    }
+    return value;
+  };
+  try {
+    decirc(obj, "", 0, [], null, 0);
+    const result = JSON.stringify(obj, replacer, space);
+    return result;
+  } catch {
+    return JSON.stringify(
+      "[unable to serialize, circular reference is too complex to analyze]"
+    );
+  } finally {
+    while (arr.length !== 0) {
+      const part = arr.pop();
+      if (part && part.length === 4) {
+        const [targetObj, key, , descriptor] = part;
+        if (targetObj && typeof targetObj === "object" && descriptor) {
+          Object.defineProperty(targetObj, key, descriptor);
+        }
+      } else if (part) {
+        const [targetObj, key, value] = part;
+        if (targetObj && typeof targetObj === "object" && (typeof key === "string" || typeof key === "number")) {
+          targetObj[key] = value;
+        }
+      }
+    }
+  }
+}
+
+// src/utils/minimalSuperJSON.ts
+var isUndefined = (payload) => typeof payload === "undefined";
+var isPlainObject = (payload) => {
+  if (typeof payload !== "object" || payload === null) return false;
+  if (payload === Object.prototype) return false;
+  if (Object.getPrototypeOf(payload) === null) return true;
+  return Object.getPrototypeOf(payload) === Object.prototype;
+};
+var isArray = (payload) => Array.isArray(payload);
+var isPrimitive = (payload) => typeof payload === "boolean" || payload === null || typeof payload === "undefined" || typeof payload === "number" || typeof payload === "string" || typeof payload === "symbol";
+var isDate = (payload) => payload instanceof Date && !isNaN(payload.valueOf());
+var isError = (payload) => payload instanceof Error;
+var isRegExp = (payload) => payload instanceof RegExp;
+var isSet = (payload) => payload instanceof Set;
+var isMap = (payload) => payload instanceof Map;
+var isBigint = (payload) => typeof payload === "bigint";
+var isNaNValue = (payload) => typeof payload === "number" && isNaN(payload);
+var isInfinite = (payload) => payload === Infinity || payload === -Infinity;
+var isMinusZero = (payload) => payload === 0 && 1 / payload === -Infinity;
+var isURL = (payload) => payload instanceof URL;
+var isTypedArray = (payload) => ArrayBuffer.isView(payload) && !(payload instanceof DataView);
+var TYPED_ARRAY_CONSTRUCTORS = {
+  Int8Array,
+  Uint8Array,
+  Int16Array,
+  Uint16Array,
+  Int32Array,
+  Uint32Array,
+  Float32Array,
+  Float64Array,
+  Uint8ClampedArray
+};
+var transformRules = [
+  {
+    isApplicable: isUndefined,
+    annotation: "undefined",
+    transform: () => null,
+    untransform: () => void 0
+  },
+  {
+    isApplicable: isBigint,
+    annotation: "bigint",
+    transform: (v) => v.toString(),
+    untransform: (v) => {
+      if (typeof BigInt !== "undefined") {
+        return BigInt(v);
+      }
+      console.error("BigInt is not supported in this environment");
+      return v;
+    }
+  },
+  {
+    isApplicable: isDate,
+    annotation: "Date",
+    transform: (v) => v.toISOString(),
+    untransform: (v) => new Date(v)
+  },
+  {
+    isApplicable: isError,
+    annotation: "Error",
+    transform: (v) => ({
+      name: v.name,
+      message: v.message,
+      stack: v.stack,
+      cause: "cause" in v ? v.cause : void 0
+    }),
+    untransform: (v) => {
+      const e = new Error(v.message);
+      e.name = v.name;
+      e.stack = v.stack;
+      if (v.cause !== void 0) {
+        e.cause = v.cause;
+      }
+      return e;
+    }
+  },
+  {
+    isApplicable: isRegExp,
+    annotation: "regexp",
+    transform: (v) => "" + v,
+    untransform: (v) => {
+      const body = v.slice(1, v.lastIndexOf("/"));
+      const flags = v.slice(v.lastIndexOf("/") + 1);
+      return new RegExp(body, flags);
+    }
+  },
+  {
+    isApplicable: isSet,
+    annotation: "set",
+    transform: (v) => [...v.values()],
+    untransform: (v) => new Set(v)
+  },
+  {
+    isApplicable: isMap,
+    annotation: "map",
+    transform: (v) => [...v.entries()],
+    untransform: (v) => new Map(v)
+  },
+  {
+    isApplicable: (v) => isNaNValue(v) || isInfinite(v),
+    annotation: "number",
+    transform: (v) => {
+      if (isNaNValue(v)) return "NaN";
+      return v > 0 ? "Infinity" : "-Infinity";
+    },
+    untransform: (v) => Number(v)
+  },
+  {
+    isApplicable: isMinusZero,
+    annotation: "number",
+    transform: () => "-0",
+    untransform: () => -0
+  },
+  {
+    isApplicable: isURL,
+    annotation: "URL",
+    transform: (v) => v.toString(),
+    untransform: (v) => new URL(v)
+  },
+  {
+    isApplicable: isTypedArray,
+    annotation: (v) => ["typed-array", v.constructor.name],
+    transform: (v) => [...v],
+    untransform: (v, annotation) => {
+      const typeName = Array.isArray(annotation) ? annotation[1] : "Uint8Array";
+      const ctor = TYPED_ARRAY_CONSTRUCTORS[typeName];
+      if (!ctor) {
+        throw new Error(`Unknown typed array: ${typeName}`);
+      }
+      return new ctor(v);
+    }
+  }
+];
+function transformValue(value) {
+  for (const rule of transformRules) {
+    if (rule.isApplicable(value)) {
+      const annotation = typeof rule.annotation === "function" ? rule.annotation(value) : rule.annotation;
+      return {
+        value: rule.transform(value),
+        type: annotation
+      };
+    }
+  }
+  return void 0;
+}
+function untransformValue(json, type) {
+  for (const rule of transformRules) {
+    const ruleAnnotation = typeof rule.annotation === "function" ? Array.isArray(type) ? type[0] : type : rule.annotation;
+    const matches = Array.isArray(type) && Array.isArray(ruleAnnotation) ? type[0] === ruleAnnotation[0] : ruleAnnotation === type;
+    if (matches) {
+      return rule.untransform(json, type);
+    }
+  }
+  throw new Error(`Unknown transformation: ${type}`);
+}
+var isDeep = (object) => isPlainObject(object) || isArray(object) || isMap(object) || isSet(object) || isError(object);
+function escapeKey(key) {
+  return key.replace(/\\/g, "\\\\").replace(/\./g, "\\.");
+}
+function walker(object, path = [], objectsInThisPath = []) {
+  const primitive = isPrimitive(object);
+  if (!primitive && !isDeep(object)) {
+    const transformed2 = transformValue(object);
+    return transformed2 ? {
+      transformedValue: transformed2.value,
+      annotations: { [path.map(String).map(escapeKey).join(".")]: transformed2.type }
+    } : { transformedValue: object };
+  }
+  if (!primitive && objectsInThisPath.indexOf(object) !== -1) {
+    return { transformedValue: null };
+  }
+  if (!isDeep(object)) {
+    const transformed2 = transformValue(object);
+    return transformed2 ? {
+      transformedValue: transformed2.value,
+      annotations: path.length > 0 ? { [path.map(String).map(escapeKey).join(".")]: transformed2.type } : { "": transformed2.type }
+    } : { transformedValue: object };
+  }
+  const transformationResult = transformValue(object);
+  const transformed = transformationResult?.value ?? object;
+  const transformedValue = isArray(transformed) ? [] : {};
+  const allAnnotations = {};
+  if (transformationResult) {
+    const key = path.length > 0 ? path.map(String).map(escapeKey).join(".") : "";
+    allAnnotations[key] = transformationResult.type;
+  }
+  const entries = isArray(transformed) ? transformed.map((v, i) => [i, v]) : Object.entries(transformed);
+  for (const [index, value] of entries) {
+    const indexStr = String(index);
+    if (indexStr === "__proto__" || indexStr === "constructor" || indexStr === "prototype") {
+      throw new Error(
+        `Detected property ${indexStr}. This is a prototype pollution risk, please remove it from your object.`
+      );
+    }
+    const recursiveResult = walker(
+      value,
+      [...path, index],
+      [...objectsInThisPath, object]
+    );
+    transformedValue[index] = recursiveResult.transformedValue;
+    if (recursiveResult.annotations) {
+      Object.assign(allAnnotations, recursiveResult.annotations);
+    }
+  }
+  return {
+    transformedValue,
+    annotations: Object.keys(allAnnotations).length > 0 ? allAnnotations : void 0
+  };
+}
+function parsePath(pathString) {
+  if (pathString === "") return [];
+  const result = [];
+  let segment = "";
+  for (let i = 0; i < pathString.length; i++) {
+    const char = pathString.charAt(i);
+    if (char === "\\") {
+      const nextChar = pathString.charAt(i + 1);
+      if (nextChar === "\\") {
+        segment += "\\";
+        i++;
+        continue;
+      } else if (nextChar === ".") {
+        segment += ".";
+        i++;
+        continue;
+      }
+    }
+    if (char === ".") {
+      result.push(segment);
+      segment = "";
+      continue;
+    }
+    segment += char;
+  }
+  if (segment) {
+    result.push(segment);
+  }
+  return result;
+}
+function setDeep(object, path, value) {
+  if (path.length === 0) {
+    return;
+  }
+  let current = object;
+  for (let i = 0; i < path.length - 1; i++) {
+    current = current[path[i]];
+  }
+  current[path[path.length - 1]] = value;
+}
+function getDeep(object, path) {
+  let current = object;
+  for (const key of path) {
+    current = current[key];
+  }
+  return current;
+}
+function serialize(object) {
+  const result = walker(object);
+  const res = {
+    json: result.transformedValue
+  };
+  if (result.annotations) {
+    res.meta = { values: result.annotations };
+  }
+  return res;
+}
+function deserialize(payload) {
+  const { json, meta } = payload;
+  if (!meta?.values) {
+    return json;
+  }
+  let result = isArray(json) ? [...json] : { ...json };
+  const annotations = Object.entries(meta.values).map(([pathString, type]) => ({ pathString, type, path: parsePath(pathString) })).sort((a, b) => b.path.length - a.path.length);
+  for (const { type, path } of annotations) {
+    if (path.length === 0) {
+      result = untransformValue(result, type);
+    } else {
+      const value = getDeep(result, path);
+      const transformed = untransformValue(value, type);
+      setDeep(result, path, transformed);
+    }
+  }
+  return result;
+}
+
+// src/utils/displayValue.ts
+var displayValue = (value, beautify = false) => {
+  const { json } = serialize(value);
+  return JSON.stringify(json, null, beautify ? 2 : void 0);
+};
+var parseDisplayValue = (value) => {
+  try {
+    const parsed = JSON.parse(value);
+    return deserialize({ json: parsed, meta: void 0 });
+  } catch {
+    return JSON.parse(value);
+  }
+};
+
+// src/ui/gameUI/components/GameUICollapsibleSection.tsx
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Animated
+} from "react-native-web";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GameUICollapsibleSection({
+  icon: Icon,
+  iconColor,
+  title,
+  count,
+  subtitle,
+  expanded,
+  onToggle,
+  children,
+  style,
+  titleStyle
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, style], children: [
+    /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        onPress: onToggle,
+        activeOpacity: 0.7,
+        style: styles.headerTouchable,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.headerLeft, children: [
+              /* @__PURE__ */ jsx(Icon, { size: 14, color: iconColor }),
+              /* @__PURE__ */ jsx(Text, { style: [styles.title, titleStyle], children: title }),
+              /* @__PURE__ */ jsx(View, { style: [styles.badge, { backgroundColor: iconColor + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: iconColor }], children: count }) })
+            ] }),
+            expanded ? /* @__PURE__ */ jsx(ChevronUpGlyph, { size: 14, color: gameUIColors.muted }) : /* @__PURE__ */ jsx(ChevronDownGlyph, { size: 14, color: gameUIColors.muted })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: subtitle })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(Animated.View, { style: { opacity: 1 }, children })
+  ] });
+}
+var styles = StyleSheet.create({
+  container: {
+    marginBottom: 20
+  },
+  headerTouchable: {
+    marginBottom: 12
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4,
+    paddingHorizontal: 4
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  title: {
+    fontSize: 11,
+    color: gameUIColors.primary,
+    fontFamily: monoFont,
+    fontWeight: "700",
+    letterSpacing: 2,
+    opacity: 0.9
+  },
+  subtitle: {
+    fontSize: 9,
+    color: gameUIColors.secondary,
+    fontFamily: monoFont,
+    paddingHorizontal: 4,
+    marginTop: 2,
+    opacity: 0.7
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  badgeText: {
+    fontSize: 10,
+    fontFamily: monoFont,
+    fontWeight: "700"
+  }
+});
+
+// src/utils/absoluteFill.ts
+var absoluteFill = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+
+// src/ui/gameUI/components/GameUIStatusHeader.tsx
+import { StyleSheet as StyleSheet2, Text as Text2, View as View2, Animated as Animated2 } from "react-native-web";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function GameUIStatusHeader({
+  alertConfig,
+  badgeText,
+  animatedStyle,
+  style,
+  indicatorCount = 3
+}) {
+  const IconComponent = alertConfig.icon;
+  return /* @__PURE__ */ jsxs2(
+    Animated2.View,
+    {
+      style: [
+        styles2.container,
+        { borderColor: alertConfig.color + "40" },
+        style,
+        animatedStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsx2(
+          View2,
+          {
+            style: [styles2.glow, { backgroundColor: alertConfig.color + "10" }]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(View2, { style: styles2.content, children: [
+          /* @__PURE__ */ jsx2(
+            View2,
+            {
+              style: [
+                styles2.iconWrapper,
+                { backgroundColor: alertConfig.color + "15" }
+              ],
+              children: /* @__PURE__ */ jsx2(IconComponent, { size: 20, color: alertConfig.color })
+            }
+          ),
+          /* @__PURE__ */ jsxs2(View2, { style: styles2.textContainer, children: [
+            /* @__PURE__ */ jsx2(Text2, { style: [styles2.label, { color: alertConfig.color }], children: alertConfig.label }),
+            /* @__PURE__ */ jsx2(Text2, { style: styles2.subtitle, children: alertConfig.subtitle })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            View2,
+            {
+              style: [styles2.badge, { backgroundColor: alertConfig.color + "20" }],
+              children: /* @__PURE__ */ jsx2(Text2, { style: [styles2.badgeText, { color: alertConfig.color }], children: badgeText })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(View2, { style: styles2.indicators, children: [...Array(indicatorCount)].map((_, i) => /* @__PURE__ */ jsx2(
+          View2,
+          {
+            style: [
+              styles2.indicatorDot,
+              {
+                backgroundColor: alertConfig.color,
+                opacity: alertConfig.pulse ? i === 0 ? 1 : 0.5 - i * 0.2 : 0.3 - i * 0.1
+              }
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+var styles2 = StyleSheet2.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
+  }
+});
+
+// src/ui/gameUI/components/GameUICompactStats.tsx
+import { Fragment } from "react";
+import { StyleSheet as StyleSheet3, Text as Text3, View as View3, Animated as Animated3 } from "react-native-web";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function GameUICompactStats({
+  statsConfig,
+  totalCount,
+  header,
+  bottomStats,
+  style,
+  hideInactive = true
+}) {
+  return /* @__PURE__ */ jsxs3(View3, { style: [styles3.container, style], children: [
+    header && /* @__PURE__ */ jsxs3(View3, { style: styles3.header, children: [
+      /* @__PURE__ */ jsxs3(View3, { style: styles3.headerLeft, children: [
+        /* @__PURE__ */ jsx3(Text3, { style: styles3.headerTitle, children: header.title }),
+        /* @__PURE__ */ jsx3(Text3, { style: styles3.headerSubtitle, children: header.subtitle })
+      ] }),
+      header.healthPercentage !== void 0 && /* @__PURE__ */ jsx3(View3, { style: styles3.headerRight, children: /* @__PURE__ */ jsxs3(View3, { style: styles3.statusIndicator, children: [
+        /* @__PURE__ */ jsx3(
+          View3,
+          {
+            style: [
+              styles3.statusDot,
+              {
+                backgroundColor: header.healthColor || gameUIColors.success
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Text3,
+          {
+            style: [
+              styles3.statusText,
+              { color: header.healthColor || gameUIColors.success }
+            ],
+            children: header.healthStatus || "OPTIMAL"
+          }
+        )
+      ] }) })
+    ] }),
+    header?.healthPercentage !== void 0 && /* @__PURE__ */ jsxs3(View3, { style: styles3.healthSection, children: [
+      /* @__PURE__ */ jsx3(Text3, { style: styles3.healthLabel, children: "SYSTEM HEALTH" }),
+      /* @__PURE__ */ jsx3(View3, { style: styles3.healthBarWrapper, children: /* @__PURE__ */ jsx3(View3, { style: styles3.healthBarBg, children: /* @__PURE__ */ jsx3(
+        Animated3.View,
+        {
+          style: [
+            styles3.healthBarFill,
+            {
+              width: `${header.healthPercentage}%`,
+              backgroundColor: header.healthColor || gameUIColors.success
+            }
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs3(
+        Text3,
+        {
+          style: [
+            styles3.healthPercentage,
+            { color: header.healthColor || gameUIColors.success }
+          ],
+          children: [
+            header.healthPercentage,
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(View3, { style: styles3.statsGrid, children: statsConfig.map((stat) => {
+      const isActive = stat.value > 0;
+      if (hideInactive && !isActive) return null;
+      const IconComponent = stat.icon;
+      const percentage = totalCount ? stat.value / totalCount * 100 : 0;
+      return /* @__PURE__ */ jsxs3(
+        Animated3.View,
+        {
+          style: [styles3.statCard, { borderColor: stat.color + "30" }],
+          children: [
+            /* @__PURE__ */ jsxs3(View3, { style: styles3.cardContent, children: [
+              /* @__PURE__ */ jsx3(
+                View3,
+                {
+                  style: [
+                    styles3.iconBadge,
+                    {
+                      backgroundColor: stat.color + "1A",
+                      borderColor: stat.color + "33"
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsx3(IconComponent, { size: 12, color: stat.color })
+                }
+              ),
+              /* @__PURE__ */ jsxs3(View3, { style: styles3.cardInfo, children: [
+                /* @__PURE__ */ jsx3(Text3, { style: styles3.cardLabel, children: stat.label }),
+                /* @__PURE__ */ jsx3(Text3, { style: styles3.cardSubtitle, children: stat.subtitle })
+              ] }),
+              /* @__PURE__ */ jsxs3(View3, { style: styles3.valueBlock, children: [
+                /* @__PURE__ */ jsx3(Text3, { style: [styles3.statNumber, { color: stat.color }], children: stat.value.toString().padStart(2, "0") }),
+                totalCount ? /* @__PURE__ */ jsxs3(Text3, { style: styles3.percentText, children: [
+                  Math.round(percentage),
+                  "%"
+                ] }) : null
+              ] })
+            ] }),
+            stat.showBar !== false && totalCount && /* @__PURE__ */ jsx3(
+              View3,
+              {
+                style: [
+                  styles3.statBar,
+                  { backgroundColor: stat.color + "10" }
+                ],
+                children: /* @__PURE__ */ jsx3(
+                  View3,
+                  {
+                    style: [
+                      styles3.statBarFill,
+                      {
+                        width: `${percentage}%`,
+                        backgroundColor: stat.color
+                      }
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        },
+        stat.key
+      );
+    }) }),
+    bottomStats && bottomStats.length > 0 && /* @__PURE__ */ jsx3(View3, { style: styles3.bottomBar, children: bottomStats.map((stat, index) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3(View3, { style: styles3.bottomStat, children: [
+        /* @__PURE__ */ jsx3(Text3, { style: styles3.bottomStatLabel, children: stat.label }),
+        /* @__PURE__ */ jsx3(
+          Text3,
+          {
+            style: [
+              styles3.bottomStatValue,
+              stat.color && { color: stat.color }
+            ],
+            children: stat.value
+          }
+        )
+      ] }),
+      index < bottomStats.length - 1 && /* @__PURE__ */ jsx3(View3, { style: styles3.bottomDivider })
+    ] }, stat.label)) })
+  ] });
+}
+var styles3 = StyleSheet3.create({
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: gameUIColors.border + "40",
+    overflow: "hidden",
+    position: "relative"
+  },
+  // Header
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(128, 128, 128, 0.1)"
+  },
+  headerLeft: {
+    gap: 1
+  },
+  headerRight: {
+    alignItems: "flex-end"
+  },
+  headerTitle: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: gameUIColors.primary,
+    fontFamily: monoFont,
+    letterSpacing: 1.5
+  },
+  headerSubtitle: {
+    fontSize: 8,
+    color: gameUIColors.secondary,
+    fontFamily: monoFont,
+    opacity: 0.7
+  },
+  statusIndicator: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  statusDot: {
+    width: 5,
+    height: 5,
+    borderRadius: 2.5
+  },
+  statusText: {
+    fontSize: 9,
+    fontWeight: "600",
+    fontFamily: monoFont,
+    letterSpacing: 0.5
+  },
+  // Health section
+  healthSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+    gap: 8
+  },
+  healthLabel: {
+    fontSize: 8,
+    color: gameUIColors.secondary,
+    fontFamily: monoFont,
+    letterSpacing: 0.5
+  },
+  healthBarWrapper: {
+    flex: 1
+  },
+  healthBarBg: {
+    height: 4,
+    backgroundColor: "rgba(128, 128, 128, 0.1)",
+    borderRadius: 2,
+    overflow: "hidden"
+  },
+  healthBarFill: {
+    height: "100%",
+    borderRadius: 2
+  },
+  healthPercentage: {
+    fontSize: 11,
+    fontWeight: "700",
+    fontFamily: monoFont
+  },
+  // Stats grid
+  statsGrid: {
+    gap: 6,
+    marginBottom: 8
+  },
+  statCard: {
+    backgroundColor: gameUIColors.blackTint2,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: gameUIColors.border,
+    padding: 10,
+    marginBottom: 4
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 4
+  },
+  cardInfo: {
+    flex: 1
+  },
+  cardLabel: {
+    fontSize: 11,
+    fontWeight: "700",
+    fontFamily: monoFont,
+    letterSpacing: 0.5,
+    color: gameUIColors.primary
+  },
+  cardSubtitle: {
+    fontSize: 8,
+    color: gameUIColors.secondary,
+    fontFamily: monoFont,
+    opacity: 0.7
+  },
+  statNumber: {
+    fontSize: 16,
+    fontWeight: "700",
+    fontFamily: monoFont,
+    minWidth: 28
+  },
+  valueBlock: {
+    alignItems: "flex-end"
+  },
+  percentText: {
+    fontSize: 9,
+    color: gameUIColors.secondary,
+    fontFamily: monoFont
+  },
+  statBar: {
+    height: 3,
+    borderRadius: 1.5,
+    overflow: "hidden"
+  },
+  statBarFill: {
+    height: "100%",
+    borderRadius: 1.5
+  },
+  // Bottom bar
+  bottomBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: gameUIColors.border + "40"
+  },
+  bottomStat: {
+    flex: 1,
+    alignItems: "center"
+  },
+  bottomStatLabel: {
+    fontSize: 7,
+    color: gameUIColors.muted,
+    fontFamily: monoFont,
+    letterSpacing: 0.5,
+    marginBottom: 1
+  },
+  bottomStatValue: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: gameUIColors.primary,
+    fontFamily: monoFont
+  },
+  bottomDivider: {
+    width: 1,
+    height: 16,
+    backgroundColor: gameUIColors.border + "40"
+  },
+  iconBadge: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/ui/gameUI/components/GameUIIssuesList.tsx
+import { useState, useCallback } from "react";
+import {
+  StyleSheet as StyleSheet4,
+  Text as Text4,
+  View as View4,
+  TouchableOpacity as TouchableOpacity2,
+  Animated as Animated4
+} from "react-native-web";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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(/* @__PURE__ */ 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 : AlertTriangleGlyph;
+  };
+  const getStatusLabel = (issue) => {
+    switch (issue.status) {
+      case "missing":
+        return `\u2022 ${statusLabels.missing}`;
+      case "wrong_type":
+        return `\u2022 ${statusLabels.wrong_type}${issue.expectedType ? `: Expected ${issue.expectedType}` : ""}`;
+      case "wrong_value":
+        return `\u2022 ${statusLabels.wrong_value}${issue.value ? `: ${String(issue.value).substring(0, 20)}` : ""}`;
+      default:
+        return "";
+    }
+  };
+  if (issues.length === 0) return null;
+  return /* @__PURE__ */ jsxs4(View4, { style: [styles4.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 ? ChevronUpGlyph : ChevronDownGlyph;
+      return /* @__PURE__ */ jsxs4(View4, { children: [
+        /* @__PURE__ */ jsxs4(
+          TouchableOpacity2,
+          {
+            onPress: () => {
+              if (expandable) {
+                toggleIssue(issue.key);
+              }
+              onIssueClick?.(issue);
+            },
+            style: styles4.issueRow,
+            activeOpacity: 0.7,
+            children: [
+              /* @__PURE__ */ jsx4(StatusIcon, { size: 14, color: statusColor }),
+              /* @__PURE__ */ jsxs4(View4, { style: styles4.issueContent, children: [
+                /* @__PURE__ */ jsx4(
+                  Text4,
+                  {
+                    style: [styles4.issueKey, { color: gameUIColors.primary }],
+                    children: issue.key
+                  }
+                ),
+                /* @__PURE__ */ jsx4(Text4, { style: styles4.issueDesc, children: getStatusLabel(issue) })
+              ] }),
+              expandable && /* @__PURE__ */ jsx4(ChevronIcon, { size: 12, color: gameUIColors.muted })
+            ]
+          }
+        ),
+        expandable && isExpanded && /* @__PURE__ */ jsxs4(Animated4.View, { style: styles4.issueDetails, children: [
+          /* @__PURE__ */ jsxs4(View4, { style: styles4.detailRow, children: [
+            /* @__PURE__ */ jsx4(Text4, { style: styles4.detailLabel, children: "Status:" }),
+            /* @__PURE__ */ jsxs4(
+              Text4,
+              {
+                style: [
+                  styles4.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 !== void 0 && issue.status !== "missing" && /* @__PURE__ */ jsxs4(View4, { style: styles4.detailRow, children: [
+            /* @__PURE__ */ jsx4(Text4, { style: styles4.detailLabel, children: "Current:" }),
+            /* @__PURE__ */ jsx4(
+              Text4,
+              {
+                style: [
+                  styles4.detailValue,
+                  { color: gameUIColors.warning }
+                ],
+                children: `"${String(issue.value)}"`
+              }
+            )
+          ] }),
+          issue.expectedType && issue.status === "wrong_type" && /* @__PURE__ */ jsxs4(View4, { style: styles4.detailRow, children: [
+            /* @__PURE__ */ jsx4(Text4, { style: styles4.detailLabel, children: "Expected:" }),
+            /* @__PURE__ */ jsx4(
+              Text4,
+              {
+                style: [
+                  styles4.detailValue,
+                  { color: gameUIColors.success }
+                ],
+                children: issue.expectedType
+              }
+            )
+          ] }),
+          issue.expectedValue && issue.status === "wrong_value" && /* @__PURE__ */ jsxs4(View4, { style: styles4.detailRow, children: [
+            /* @__PURE__ */ jsx4(Text4, { style: styles4.detailLabel, children: "Expected:" }),
+            /* @__PURE__ */ jsx4(
+              Text4,
+              {
+                style: [
+                  styles4.detailValue,
+                  { color: gameUIColors.success }
+                ],
+                children: `"${issue.expectedValue}"`
+              }
+            )
+          ] }),
+          issue.description && /* @__PURE__ */ jsx4(View4, { style: styles4.descSection, children: /* @__PURE__ */ jsx4(Text4, { style: styles4.descText, children: issue.description }) }),
+          issue.fixSuggestion && /* @__PURE__ */ jsxs4(View4, { style: styles4.fixSection, children: [
+            /* @__PURE__ */ jsx4(Text4, { style: styles4.fixLabel, children: "HOW TO FIX" }),
+            /* @__PURE__ */ jsx4(Text4, { style: styles4.fixText, children: issue.fixSuggestion })
+          ] })
+        ] })
+      ] }, `${issue.key}-${index}`);
+    }),
+    hintText && /* @__PURE__ */ jsx4(Text4, { style: styles4.hint, children: hintText })
+  ] });
+}
+var styles4 = StyleSheet4.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
+  }
+});
+
+// src/ui/gameUI/hooks/useGameUIAlertState.ts
+import { useMemo, useEffect, useRef } from "react";
+import { Animated as Animated5, Easing } from "react-native-web";
+var GAME_UI_ALERT_STATES = {
+  OPTIMAL: {
+    icon: CheckCircleGlyph,
+    color: gameUIColors.success,
+    label: "CONFIG OK",
+    subtitle: "All requirements met",
+    pulse: false
+  },
+  WARNING: {
+    icon: AlertTriangleGlyph,
+    color: gameUIColors.warning,
+    label: "CONFIG WARNING",
+    subtitle: "Check values and types",
+    pulse: false
+  },
+  ERROR: {
+    icon: AlertCircleGlyph,
+    color: gameUIColors.error,
+    label: "CONFIG ERROR",
+    subtitle: "Missing required data",
+    pulse: false
+  },
+  CRITICAL: {
+    icon: AlertOctagon,
+    color: gameUIColors.critical,
+    label: "CONFIG FAILURE",
+    subtitle: "Multiple critical issues",
+    pulse: false
+  },
+  LOADING: {
+    icon: ActivityGlyph,
+    color: gameUIColors.info,
+    label: "LOADING",
+    subtitle: "Reading configuration...",
+    pulse: true
+  },
+  EMPTY: {
+    icon: HelpCircle,
+    color: gameUIColors.muted,
+    label: "NO DATA",
+    subtitle: "No configuration found",
+    pulse: false
+  }
+};
+function useGameUIAlertState(stats, customStates) {
+  const alertStates = useMemo(
+    () => ({ ...GAME_UI_ALERT_STATES, ...customStates }),
+    [customStates]
+  );
+  const alertState = useMemo(() => {
+    if (stats.totalCount === 0) return "EMPTY";
+    if (stats.missingCount > 2 || stats.wrongTypeCount > 2) return "CRITICAL";
+    if (stats.missingCount > 0) return "ERROR";
+    if (stats.wrongValueCount > 0 || stats.wrongTypeCount > 0) return "WARNING";
+    return "OPTIMAL";
+  }, [stats]);
+  const alertConfig = alertStates[alertState];
+  const alertOpacity = useRef(new Animated5.Value(1)).current;
+  const alertScale = useRef(new Animated5.Value(1)).current;
+  useEffect(() => {
+    alertOpacity.setValue(0);
+    alertScale.setValue(0.95);
+    Animated5.parallel([
+      Animated5.timing(alertOpacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true
+      }),
+      Animated5.timing(alertScale, {
+        toValue: 1,
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [alertState, alertOpacity, alertScale]);
+  const alertAnimatedStyle = {
+    transform: [{ scale: alertScale }],
+    opacity: alertOpacity
+  };
+  return {
+    alertState,
+    alertConfig,
+    alertAnimatedStyle,
+    alertOpacity,
+    alertScale
+  };
+}
+
+export {
+  safeStringify,
+  serialize,
+  deserialize,
+  displayValue,
+  parseDisplayValue,
+  GameUICollapsibleSection,
+  absoluteFill,
+  GameUIStatusHeader,
+  GameUICompactStats,
+  GameUIIssuesList,
+  GAME_UI_ALERT_STATES,
+  useGameUIAlertState
+};