@buoy-gg/shared-ui 7.0.15 → 7.0.16

package/lib/commonjs/env/EnvironmentIndicator.web.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnvironmentIndicator = EnvironmentIndicator;
+exports.getEnvironmentConfig = getEnvironmentConfig;
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _types = require("../types/types.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * EnvironmentIndicator — Web (React DOM) twin of EnvironmentIndicator.tsx.
+ * Same env→color/label map and layout; lucide glyph icons are omitted from
+ * the badge on native too (dot + label only), so parity holds.
+ */
+
+function getEnvironmentConfig(environment) {
+  switch ((0, _types.normalizeEnvironment)(String(environment))) {
+    case 'dev':
+      return {
+        label: 'DEV',
+        backgroundColor: _gameUIColors.gameUIColors.warning
+      };
+    case 'qa':
+      return {
+        label: 'QA',
+        backgroundColor: _gameUIColors.gameUIColors.optional
+      };
+    case 'staging':
+      return {
+        label: 'STAGING',
+        backgroundColor: _gameUIColors.gameUIColors.success
+      };
+    case 'prod':
+      return {
+        label: 'PROD',
+        backgroundColor: _gameUIColors.gameUIColors.error
+      };
+    case 'local':
+    default:
+      return {
+        label: 'LOCAL',
+        backgroundColor: _gameUIColors.gameUIColors.info
+      };
+  }
+}
+function ChevronDownGlyph({
+  color
+}) {
+  // native: ChevronDown size 12 from shared lucide icons
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M6 9l6 6 6-6",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+function EnvironmentIndicator({
+  environment,
+  interactive = false,
+  onPress
+}) {
+  const envConfig = getEnvironmentConfig(environment);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    onClick: interactive ? onPress : undefined,
+    "aria-label": `Environment: ${envConfig.label}`,
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // native: paddingVertical 6, paddingLeft 8, paddingRight interactive?4:8
+      padding: `6px ${interactive ? 4 : 8}px 6px 8px`,
+      flexShrink: 0,
+      background: 'none',
+      border: 'none',
+      cursor: interactive ? 'pointer' : 'default'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: envConfig.backgroundColor,
+        marginRight: 6,
+        // native: shadowOpacity 0.6, shadowRadius 4 glow
+        boxShadow: `0 0 4px ${envConfig.backgroundColor}99`
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        fontSize: 11,
+        fontWeight: 600,
+        color: _gameUIColors.gameUIColors.primaryLight,
+        letterSpacing: 0.5
+      },
+      children: envConfig.label
+    }), interactive && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        marginLeft: 2,
+        display: 'flex'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronDownGlyph, {
+        color: "#7A8599"
+      })
+    })]
+  });
+}

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

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnvironmentSelectorInline = EnvironmentSelectorInline;
+var _react = require("react");
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _EnvironmentIndicatorWeb = require("./EnvironmentIndicator.web.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+const OPTION_HEIGHT = 36; // native EnvironmentSelectorInline OPTION_HEIGHT
+
+function ChevronUpGlyph({
+  color,
+  flipped
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M20 6L9 17l-5-5",
+      fill: "none",
+      stroke: "#4AFF9F",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+function EnvironmentSelectorInline({
+  currentEnvironment,
+  availableEnvironments,
+  onSelect
+}) {
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [hoveredEnv, setHoveredEnv] = (0, _react.useState)(null);
+  const current = (0, _EnvironmentIndicatorWeb.getEnvironmentConfig)(currentEnvironment);
+  const panelHeight = availableEnvironments.length * OPTION_HEIGHT;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      position: 'relative',
+      zIndex: 1000,
+      flexShrink: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.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 = (0, _EnvironmentIndicatorWeb.getEnvironmentConfig)(env);
+        const isSelected = String(env).toLowerCase() === String(currentEnvironment).toLowerCase();
+        return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("span", {
+            style: {
+              display: 'flex',
+              alignItems: 'center'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: config.backgroundColor,
+                marginRight: 8
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                fontSize: 10,
+                fontWeight: 600,
+                color: _gameUIColors.gameUIColors.primaryLight,
+                letterSpacing: 0.5
+              },
+              children: config.label
+            })]
+          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckGlyph, {})]
+        }, String(env));
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: current.backgroundColor,
+          boxShadow: `0 0 4px ${current.backgroundColor}99`
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          fontSize: 11,
+          fontWeight: 600,
+          color: _gameUIColors.gameUIColors.primaryLight,
+          letterSpacing: 0.5
+        },
+        children: current.label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronUpGlyph, {
+        color: "#7A8599",
+        flipped: expanded
+      })]
+    })]
+  });
+}

package/lib/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-05T21:40:54.216Z
+ * Generated at: 2026-08-06T20:33:57.771Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/icons/index.js

@@ -12,6 +12,8 @@ var _exportNames = {
   CONSOLE_ICON_COLOR: true,
   ImagesIcon: true,
   IMAGES_ICON_COLOR: true,
+  AssetsIcon: true,
+  ASSETS_ICON_COLOR: true,
   ImpersonateIcon: true,
   IMPERSONATE_ICON_COLOR: true,
   ImageOverlayIcon: true,
@@ -36,6 +38,18 @@ var _exportNames = {
   BenchmarkIcon: true,
   IconBackground: true
 };
+Object.defineProperty(exports, "ASSETS_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.ASSETS_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "AssetsIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.AssetsIcon;
+  }
+});
 Object.defineProperty(exports, "BenchmarkIcon", {
   enumerable: true,
   get: function () {

package/lib/commonjs/index.js

@@ -599,12 +599,12 @@ Object.keys(_index0).forEach(function (key) {
   });
 });
 var _index1 = require("./hooks/index.js");
-var _JsModal = require("./JsModal.js");
+var _JsModal = require("./JsModal");
 var _gameUIColors = require("./ui/gameUI/constants/gameUIColors.js");
 var _macOSDesignSystemColors = require("./ui/gameUI/constants/macOSDesignSystemColors.js");
-var _EnvironmentIndicator = require("./env/EnvironmentIndicator.js");
+var _EnvironmentIndicator = require("./env/EnvironmentIndicator");
 var _EnvironmentSelector = require("./env/EnvironmentSelector.js");
-var _EnvironmentSelectorInline = require("./env/EnvironmentSelectorInline.js");
+var _EnvironmentSelectorInline = require("./env/EnvironmentSelectorInline");
 var _types = require("./types/types.js");
 var _index10 = require("./context/index.js");
 var _index11 = require("./history/index.js");

package/lib/commonjs/stores/ignoredPatternsCore.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_IGNORED_PATTERNS = void 0;
+exports.isUrlIgnored = isUrlIgnored;
+exports.urlMatchesIgnoredPattern = urlMatchesIgnoredPattern;
+/**
+ * Pure, dependency-free part of the ignored-patterns feature — split from
+ * ignoredPatternsStore.ts so web consumers (which shim `@buoy-gg/shared-ui`
+ * and must not pull the store's relative `../utils/persistentStorage` import
+ * with its expo/async-storage requires into the bundle graph) can share the
+ * exact matching semantics. The store imports and re-exports everything here;
+ * the native barrel is unchanged.
+ */
+
+/**
+ * How a pattern matches a URL:
+ *
+ * - `contains`: case-insensitive substring match on the full URL (legacy behavior).
+ * - `exact`: smart equality — if pattern starts with `/`, matches URL.pathname;
+ *   if it starts with `http://`/`https://`, matches origin+pathname; otherwise
+ *   matches URL.host.
+ */
+
+/** A single exclude pattern with its match mode. */
+
+/** Patterns hidden by default — Buoy's own license API traffic. */
+const DEFAULT_IGNORED_PATTERNS = exports.DEFAULT_IGNORED_PATTERNS = [{
+  value: "api.keygen.sh",
+  mode: "contains"
+}];
+
+/**
+ * Returns true when `url` matches the ignored `pattern` according to its mode.
+ *
+ * `contains` → case-insensitive substring on the full URL (legacy behavior).
+ * `exact`    → smart equality: pattern starting with `/` compares URL.pathname,
+ *              full URLs compare origin+pathname (ignoring query/hash), bare
+ *              values compare URL.host. Falls back to literal equality if URL
+ *              parsing fails (e.g. relative URLs).
+ */
+function urlMatchesIgnoredPattern(url, pattern) {
+  const lowerUrl = url.toLowerCase();
+  const lowerValue = pattern.value.toLowerCase();
+  if (pattern.mode === "contains") {
+    return lowerUrl.includes(lowerValue);
+  }
+  try {
+    const parsed = new URL(url);
+    if (lowerValue.startsWith("/")) {
+      return parsed.pathname.toLowerCase() === lowerValue;
+    }
+    if (lowerValue.startsWith("http://") || lowerValue.startsWith("https://")) {
+      return `${parsed.origin}${parsed.pathname}`.toLowerCase() === lowerValue;
+    }
+    return parsed.host.toLowerCase() === lowerValue;
+  } catch {
+    return lowerUrl === lowerValue;
+  }
+}
+
+/** Convenience: does `url` match ANY of the ignored `patterns`? */
+function isUrlIgnored(url, patterns) {
+  if (!url || patterns.length === 0) return false;
+  return patterns.some(pattern => urlMatchesIgnoredPattern(url, pattern));
+}

package/lib/commonjs/stores/ignoredPatternsStore.js

@@ -4,12 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ignoredPatternsStore = void 0;
-exports.isUrlIgnored = isUrlIgnored;
-exports.urlMatchesIgnoredPattern = urlMatchesIgnoredPattern;
+Object.defineProperty(exports, "isUrlIgnored", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsCore.isUrlIgnored;
+  }
+});
+Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsCore.urlMatchesIgnoredPattern;
+  }
+});
 exports.useIgnoredPatterns = useIgnoredPatterns;
 var _react = require("react");
 var _persistentStorage = require("../utils/persistentStorage.js");
 var _devToolsStorageKeys = require("../storage/devToolsStorageKeys.js");
+var _ignoredPatternsCore = require("./ignoredPatternsCore.js");
 /**
  * Shared "ignored patterns" store for network-style URL filtering.
  *
@@ -23,57 +34,10 @@ var _devToolsStorageKeys = require("../storage/devToolsStorageKeys.js");
  * having to take a hard dependency on @buoy-gg/network (which is optional).
  */
 
-/**
- * How an ignored-pattern entry should be compared against captured URLs.
- *
- * - `contains`: case-insensitive substring match on the full URL (legacy behavior).
- * - `exact`: smart equality — if pattern starts with `/`, matches URL.pathname;
- *   if it starts with `http://`/`https://`, matches origin+pathname; otherwise
- *   matches URL.host.
- */
-
-/** A single exclude pattern with its match mode. */
+// Pure matching types/helpers live in ignoredPatternsCore.ts (web-shim-safe);
+// re-exported here so the shared-ui barrel surface is unchanged.
 
-/** Patterns hidden by default — Buoy's own license API traffic. */
-const DEFAULT_PATTERNS = [{
-  value: "api.keygen.sh",
-  mode: "contains"
-}];
-
-/**
- * Returns true when `url` matches the ignored `pattern` according to its mode.
- *
- * `contains` → case-insensitive substring on the full URL (legacy behavior).
- * `exact`    → smart equality: pattern starting with `/` compares URL.pathname,
- *              full URLs compare origin+pathname (ignoring query/hash), bare
- *              values compare URL.host. Falls back to literal equality if URL
- *              parsing fails (e.g. relative URLs).
- */
-function urlMatchesIgnoredPattern(url, pattern) {
-  const lowerUrl = url.toLowerCase();
-  const lowerValue = pattern.value.toLowerCase();
-  if (pattern.mode === "contains") {
-    return lowerUrl.includes(lowerValue);
-  }
-  try {
-    const parsed = new URL(url);
-    if (lowerValue.startsWith("/")) {
-      return parsed.pathname.toLowerCase() === lowerValue;
-    }
-    if (lowerValue.startsWith("http://") || lowerValue.startsWith("https://")) {
-      return `${parsed.origin}${parsed.pathname}`.toLowerCase() === lowerValue;
-    }
-    return parsed.host.toLowerCase() === lowerValue;
-  } catch {
-    return lowerUrl === lowerValue;
-  }
-}
-
-/** Convenience: does `url` match ANY of the ignored `patterns`? */
-function isUrlIgnored(url, patterns) {
-  if (!url || patterns.length === 0) return false;
-  return patterns.some(pattern => urlMatchesIgnoredPattern(url, pattern));
-}
+const DEFAULT_PATTERNS = _ignoredPatternsCore.DEFAULT_IGNORED_PATTERNS;
 
 /** Tolerate the legacy `string[]` persisted format and stray junk. */
 function migratePatterns(raw) {