@buoy-gg/floating-tools-core 2.2.0 → 3.0.0

package/lib/commonjs/settings.js

@@ -1 +1,601 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toolLabels=exports.toolDescriptions=exports.toolColors=exports.settingsTabs=exports.settingsStyles=exports.settingsEventBus=exports.settingsColors=exports.sanitizeFloatingSettings=exports.mergeSettingsWithDefaults=exports.globalSettingsConfig=exports.getToolLabel=exports.getToolDescription=exports.getToolColor=exports.getEnabledToolIds=exports.generateDefaultSettings=exports.enforceDialLimit=exports.countEnabledTools=exports.canEnableDialTool=exports.SettingsEventBus=exports.SETTINGS_STORAGE_KEY=exports.MAX_SETTINGS_DIAL_SLOTS=void 0;var _colors=require("./colors.js");const SETTINGS_STORAGE_KEY=exports.SETTINGS_STORAGE_KEY="@react_buoy_dev_tools_settings",MAX_SETTINGS_DIAL_SLOTS=exports.MAX_SETTINGS_DIAL_SLOTS=6,settingsTabs=exports.settingsTabs=[{key:"floating",label:"FLOATING"},{key:"settings",label:"SETTINGS"},{key:"pro",label:"PRO"}],settingsColors=exports.settingsColors={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",backdrop:"rgba(0, 0, 0, 0.85)",cardBackground:"#0F172A",cardBorder:"#25324A",cardBorderHover:"#3b4c6b",text:"#E6EEFF",textSecondary:"#B8BFC9",textMuted:"#7F91B2",textDim:"#7A8599",success:"#4AFF9F",warning:"#FFEB3B",error:"#FF5252",info:"#00B8E6",toggleOnBg:e=>(0,_colors.withAlpha)(e,"33"),toggleOnBorder:e=>(0,_colors.withAlpha)(e,"88"),toggleOffBg:"#1b2334",toggleOffBorder:"#2a3550",toggleOffText:"#8CA2C8",tabActiveBg:"rgba(0, 184, 230, 0.13)",tabActiveBorder:"#00B8E6",tabInactiveBg:"transparent",tabInactiveText:"#7A8599"},toolColors=exports.toolColors={query:"#FF4154",env:"#4AFF9F",sentry:"#FF5252",storage:"#BA68C8",network:"#4AFF9F",wifi:"#4AFF9F",environment:"#4AFF9F","debug-borders":"#10b981","highlight-updates":"#10b981","highlight-updates-modal":"#10b981",benchmark:"#F59E0B","route-events":"#FF9F1C",routes:"#FF9F1C",renders:"#10b981"},getToolColor=e=>toolColors[e]||settingsColors.info;exports.getToolColor=getToolColor;const toolLabels=exports.toolLabels={query:"QUERY",env:"ENV",sentry:"SENTRY",storage:"STORAGE",network:"NET",wifi:"WIFI",environment:"ENV BADGE","debug-borders":"DEBUG BORDERS","highlight-updates":"HIGHLIGHT","highlight-updates-modal":"HIGHLIGHT MODAL",benchmark:"BENCHMARK","route-events":"ROUTES",routes:"ROUTES",renders:"HIGHLIGHT"},getToolLabel=(e,t)=>{if(t){const o=t.find(t=>t.id===e);if(o?.name)return o.name}return toolLabels[e]||e.toUpperCase().replace(/_/g," ").replace(/-/g," ")};exports.getToolLabel=getToolLabel;const toolDescriptions=exports.toolDescriptions={query:"React Query inspector",env:"Environment variables debugger",sentry:"Error tracking & monitoring",storage:"AsyncStorage browser",network:"Network request logger",wifi:"Network status toggle",environment:"Environment badge indicator","debug-borders":"Component layout borders","highlight-updates":"View component render tracking","highlight-updates-modal":"Render count inspector",benchmark:"Performance benchmarks","route-events":"Route tracking & navigation inspector",routes:"Route tracking & navigation inspector",renders:"View component render tracking modal"},getToolDescription=(e,t)=>{if(t){const o=t.find(t=>t.id===e);if(o?.description)return o.description}return toolDescriptions[e]||""};exports.getToolDescription=getToolDescription;const settingsStyles=exports.settingsStyles={card:{borderRadius:999,paddingVertical:10,paddingHorizontal:14,marginBottom:10,borderWidth:1},cardInner:{gap:10},iconContainer:{width:28,height:28},toolName:{fontSize:13,fontWeight:"800"},toolDescription:{fontSize:11},toggle:{paddingHorizontal:12,paddingVertical:6,borderRadius:999,borderWidth:1,fontSize:11,fontWeight:"700"},tab:{paddingHorizontal:8,paddingVertical:5,borderRadius:4,fontSize:12,fontWeight:"600",letterSpacing:.5},sectionHeader:{marginBottom:12,paddingHorizontal:4},sectionTitle:{fontSize:10,fontWeight:"700",letterSpacing:1,textTransform:"uppercase"},scrollContent:{paddingTop:16,paddingBottom:24},section:{marginHorizontal:16,marginBottom:24}},globalSettingsConfig=exports.globalSettingsConfig=[{key:"enableSharedModalDimensions",label:"SHARED MODAL SIZE",category:"MODAL",shortDescription:"Sync dimensions across all tools",fullDescription:"When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.",recommendation:"Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."},{key:"expandableWindowControls",label:"EXPAND CONTROLS",category:"MODAL",shortDescription:"iPad-style expandable window buttons",fullDescription:"When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.",recommendation:"Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."}],enforceDialLimit=(e,t=MAX_SETTINGS_DIAL_SLOTS)=>{let o=t;const n={};for(const[t,s]of Object.entries(e))s&&o>0?(n[t]=!0,o-=1):n[t]=!1;return n};exports.enforceDialLimit=enforceDialLimit;const sanitizeFloatingSettings=(e,t)=>{const{userStatus:o,environment:n,...s}=e,r=t?Object.entries(s).filter(([e])=>t.includes(e)):Object.entries(s);return{...Object.fromEntries(r),environment:n??!1}};exports.sanitizeFloatingSettings=sanitizeFloatingSettings;const mergeSettingsWithDefaults=(e,t,o)=>{if(!t)return e;const n={...e.dialTools,...t.dialTools??{}},s=o?.allowedDialKeys?Object.entries(n).filter(([e])=>o.allowedDialKeys?.includes(e)):Object.entries(n);return{dialTools:enforceDialLimit(Object.fromEntries(s)),floatingTools:sanitizeFloatingSettings({...e.floatingTools,...t.floatingTools??{}},o?.allowedFloatingKeys),globalSettings:{enableSharedModalDimensions:!1,expandableWindowControls:!0,...t.globalSettings??{}}}};exports.mergeSettingsWithDefaults=mergeSettingsWithDefaults;const generateDefaultSettings=(e=[],t,o)=>{const n={},s={},r=new Set(t??[]),i=new Set(o??[]);for(const t of e){const{id:e,slot:o="both"}=t;"dial"!==o&&"both"!==o||(n[e]=i.has(e)),"row"!==o&&"both"!==o||(s[e]=r.has(e))}return{dialTools:enforceDialLimit(n),floatingTools:{...s,environment:r.has("environment")},globalSettings:{enableSharedModalDimensions:!1,expandableWindowControls:!0}}};exports.generateDefaultSettings=generateDefaultSettings;const countEnabledTools=e=>Object.values(e).filter(Boolean).length;exports.countEnabledTools=countEnabledTools;const canEnableDialTool=(e,t,o=MAX_SETTINGS_DIAL_SLOTS)=>{const n=countEnabledTools(e);return!!e[t]||n<o};exports.canEnableDialTool=canEnableDialTool;const getEnabledToolIds=e=>({floating:Object.entries(e.floatingTools).filter(([e,t])=>t).map(([e])=>e),dial:Object.entries(e.dialTools).filter(([e,t])=>t).map(([e])=>e)});exports.getEnabledToolIds=getEnabledToolIds;class SettingsEventBus{listeners=new Set;emit(e){this.listeners.forEach(t=>{try{t(e)}catch(e){console.error("Error emitting settings event:",e)}})}addListener(e){return this.listeners.add(e),()=>this.listeners.delete(e)}clear(){this.listeners.clear()}get listenerCount(){return this.listeners.size}}exports.SettingsEventBus=SettingsEventBus;const settingsEventBus=exports.settingsEventBus=new SettingsEventBus;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolLabels = exports.toolDescriptions = exports.toolColors = exports.settingsTabs = exports.settingsStyles = exports.settingsEventBus = exports.settingsColors = exports.sanitizeFloatingSettings = exports.mergeSettingsWithDefaults = exports.globalSettingsConfig = exports.getToolLabel = exports.getToolDescription = exports.getToolColor = exports.getEnabledToolIds = exports.generateDefaultSettings = exports.enforceDialLimit = exports.countEnabledTools = exports.canEnableDialTool = exports.SettingsEventBus = exports.SETTINGS_STORAGE_KEY = exports.MAX_SETTINGS_DIAL_SLOTS = void 0;
+var _colors = require("./colors.js");
+/**
+ * Settings - Shared settings types, constants, and utilities.
+ *
+ * Pure configuration and logic functions for dev tools settings.
+ * No React or platform-specific code.
+ *
+ * This module provides:
+ * - Storage keys and constants
+ * - Tab configuration
+ * - Tool colors, labels, descriptions
+ * - Styling constants for cards and toggles
+ * - Settings logic (enforce limits, merge, etc.)
+ * - Event bus for cross-component sync
+ */
+
+// =============================
+// Constants
+// =============================
+
+/** Storage key for dev tools settings */
+const SETTINGS_STORAGE_KEY = exports.SETTINGS_STORAGE_KEY = '@react_buoy_dev_tools_settings';
+
+/** Maximum number of tools in the dial menu */
+const MAX_SETTINGS_DIAL_SLOTS = exports.MAX_SETTINGS_DIAL_SLOTS = 6;
+
+// =============================
+// Tab Configuration
+// =============================
+
+/**
+ * Tab configuration - shared across mobile and web.
+ *
+ * Note: the dial no longer has a show/hide tab — dial tools are shown
+ * automatically, paginated and ranked by usage.
+ */
+const settingsTabs = exports.settingsTabs = [{
+  key: 'floating',
+  label: 'FLOATING'
+}, {
+  key: 'settings',
+  label: 'SETTINGS'
+}, {
+  key: 'pro',
+  label: 'PRO'
+}];
+
+// =============================
+// Settings Colors
+// =============================
+
+/**
+ * Color palette for the settings modal.
+ * Matches the mobile implementation for consistency.
+ */
+const settingsColors = exports.settingsColors = {
+  // Base colors
+  background: 'rgba(8, 12, 21, 0.98)',
+  panel: 'rgba(16, 22, 35, 0.98)',
+  backdrop: 'rgba(0, 0, 0, 0.85)',
+  // Card colors
+  cardBackground: '#0F172A',
+  cardBorder: '#25324A',
+  cardBorderHover: '#3b4c6b',
+  // Text colors
+  text: '#E6EEFF',
+  textSecondary: '#B8BFC9',
+  textMuted: '#7F91B2',
+  textDim: '#7A8599',
+  // Status colors
+  success: '#4AFF9F',
+  warning: '#FFEB3B',
+  error: '#FF5252',
+  info: '#00B8E6',
+  // Toggle states
+  toggleOnBg: color => (0, _colors.withAlpha)(color, '33'),
+  toggleOnBorder: color => (0, _colors.withAlpha)(color, '88'),
+  toggleOffBg: '#1b2334',
+  toggleOffBorder: '#2a3550',
+  toggleOffText: '#8CA2C8',
+  // Tab colors
+  tabActiveBg: 'rgba(0, 184, 230, 0.13)',
+  tabActiveBorder: '#00B8E6',
+  tabInactiveBg: 'transparent',
+  tabInactiveText: '#7A8599'
+};
+// =============================
+// Tool Colors
+// =============================
+
+/**
+ * Color mapping for each tool type.
+ * Used for card accents, toggle states, and icons.
+ */
+const toolColors = exports.toolColors = {
+  // Core tools
+  query: '#FF4154',
+  // React Query red
+  env: '#4AFF9F',
+  // Green
+  sentry: '#FF5252',
+  // Red
+  storage: '#BA68C8',
+  // Purple
+  network: '#4AFF9F',
+  // Green (matches NETWORK_ICON_COLOR in shared-ui)
+  wifi: '#4AFF9F',
+  // Green
+
+  // Display tools
+  environment: '#4AFF9F',
+  // Green
+  'debug-borders': '#10b981',
+  // Emerald
+  'highlight-updates': '#10b981',
+  // Emerald
+  'highlight-updates-modal': '#10b981',
+  // Emerald
+
+  // Performance
+  benchmark: '#F59E0B',
+  // Amber
+
+  // Navigation
+  'route-events': '#FF9F1C',
+  // Orange
+  routes: '#FF9F1C',
+  // Orange
+
+  // Render tracking
+  renders: '#10b981' // Emerald
+};
+
+/**
+ * Get the color for a specific tool.
+ *
+ * @param toolId - Tool identifier
+ * @returns Color string for the tool
+ */
+const getToolColor = toolId => {
+  return toolColors[toolId] || settingsColors.info;
+};
+
+// =============================
+// Tool Labels
+// =============================
+
+/**
+ * Display labels for each tool.
+ * These are shown in the settings card headers.
+ */
+exports.getToolColor = getToolColor;
+const toolLabels = exports.toolLabels = {
+  query: 'QUERY',
+  env: 'ENV',
+  sentry: 'SENTRY',
+  storage: 'STORAGE',
+  network: 'NET',
+  wifi: 'WIFI',
+  environment: 'ENV BADGE',
+  'debug-borders': 'DEBUG BORDERS',
+  'highlight-updates': 'HIGHLIGHT',
+  'highlight-updates-modal': 'HIGHLIGHT MODAL',
+  benchmark: 'BENCHMARK',
+  'route-events': 'ROUTES',
+  routes: 'ROUTES',
+  renders: 'HIGHLIGHT'
+};
+
+/**
+ * Get the display label for a tool.
+ *
+ * @param toolId - Tool identifier
+ * @param availableApps - Optional list of available apps to check for custom names
+ * @returns Display label for the tool
+ */
+const getToolLabel = (toolId, availableApps) => {
+  // Check available apps first for custom names
+  if (availableApps) {
+    const app = availableApps.find(a => a.id === toolId);
+    if (app?.name) return app.name;
+  }
+
+  // Use predefined label or format from ID
+  return toolLabels[toolId] || toolId.toUpperCase().replace(/_/g, ' ').replace(/-/g, ' ');
+};
+
+// =============================
+// Tool Descriptions
+// =============================
+
+/**
+ * Descriptions for each tool.
+ * These are shown in the settings card subtitles.
+ */
+exports.getToolLabel = getToolLabel;
+const toolDescriptions = exports.toolDescriptions = {
+  query: 'React Query inspector',
+  env: 'Environment variables debugger',
+  sentry: 'Error tracking & monitoring',
+  storage: 'AsyncStorage browser',
+  network: 'Network request logger',
+  wifi: 'Network status toggle',
+  environment: 'Environment badge indicator',
+  'debug-borders': 'Component layout borders',
+  'highlight-updates': 'View component render tracking',
+  'highlight-updates-modal': 'Render count inspector',
+  benchmark: 'Performance benchmarks',
+  'route-events': 'Route tracking & navigation inspector',
+  routes: 'Route tracking & navigation inspector',
+  renders: 'View component render tracking modal'
+};
+
+/**
+ * Get the description for a tool.
+ *
+ * @param toolId - Tool identifier
+ * @param availableApps - Optional list of available apps to check for custom descriptions
+ * @returns Description for the tool
+ */
+const getToolDescription = (toolId, availableApps) => {
+  // Check available apps first for custom descriptions
+  if (availableApps) {
+    const app = availableApps.find(a => a.id === toolId);
+    if (app?.description) return app.description;
+  }
+
+  // Use predefined description
+  return toolDescriptions[toolId] || '';
+};
+
+// =============================
+// Settings Styling
+// =============================
+
+/**
+ * Styling configuration for settings UI elements.
+ * All numeric values that affect appearance.
+ */
+exports.getToolDescription = getToolDescription;
+const settingsStyles = exports.settingsStyles = {
+  // Card styling
+  card: {
+    borderRadius: 999,
+    // Pill shape
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginBottom: 10,
+    borderWidth: 1
+  },
+  // Card inner layout
+  cardInner: {
+    gap: 10
+  },
+  // Icon container
+  iconContainer: {
+    width: 28,
+    height: 28
+  },
+  // Tool name text
+  toolName: {
+    fontSize: 13,
+    fontWeight: '800'
+  },
+  // Tool description text
+  toolDescription: {
+    fontSize: 11
+  },
+  // Toggle pill button
+  toggle: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999,
+    borderWidth: 1,
+    fontSize: 11,
+    fontWeight: '700'
+  },
+  // Tab styling
+  tab: {
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 4,
+    fontSize: 12,
+    fontWeight: '600',
+    letterSpacing: 0.5
+  },
+  // Section header
+  sectionHeader: {
+    marginBottom: 12,
+    paddingHorizontal: 4
+  },
+  // Section title
+  sectionTitle: {
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 1,
+    textTransform: 'uppercase'
+  },
+  // Scroll content
+  scrollContent: {
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  // Section margins
+  section: {
+    marginHorizontal: 16,
+    marginBottom: 24
+  }
+};
+
+// =============================
+// Global Settings Configuration
+// =============================
+
+/**
+ * Configuration for global settings cards.
+ */
+const globalSettingsConfig = exports.globalSettingsConfig = [{
+  key: 'enableSharedModalDimensions',
+  label: 'SHARED MODAL SIZE',
+  category: 'MODAL',
+  shortDescription: 'Sync dimensions across all tools',
+  fullDescription: 'When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.',
+  recommendation: 'Keep OFF for the best experience. This allows you to customize each tool\'s modal size separately. Enable only if you prefer uniform modal sizes across all dev tools.'
+}, {
+  key: 'expandableWindowControls',
+  label: 'EXPAND CONTROLS',
+  category: 'MODAL',
+  shortDescription: 'iPad-style expandable window buttons',
+  fullDescription: 'When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.',
+  recommendation: 'Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator).'
+}];
+
+// =============================
+// Types
+// =============================
+
+/**
+ * Global settings that apply to all dev tools.
+ * These settings override individual tool configurations.
+ */
+
+/**
+ * Serialized preferences that power the floating dev tools UI.
+ * Values persist across sessions via storage so teams can tailor
+ * which tools appear in the dial or floating row.
+ */
+
+/**
+ * Configuration for an available tool/app.
+ * Note: name and description are optional - if not provided,
+ * getToolLabel() and getToolDescription() will use shared defaults.
+ */
+
+/**
+ * Tool metadata for display in settings.
+ */
+
+// =============================
+// Utility Functions
+// =============================
+
+/**
+ * Enforces the dial slot limit by enabling only the first N tools.
+ * Tools are processed in order, so tools appearing first in the Record
+ * have priority when the limit is reached.
+ *
+ * @param dialTools - Map of tool ids to enabled state
+ * @param maxSlots - Maximum number of enabled tools (default: MAX_SETTINGS_DIAL_SLOTS)
+ * @returns New record with limit enforced
+ */
+const enforceDialLimit = (dialTools, maxSlots = MAX_SETTINGS_DIAL_SLOTS) => {
+  let remaining = maxSlots;
+  const limited = {};
+  for (const [id, enabled] of Object.entries(dialTools)) {
+    if (enabled && remaining > 0) {
+      limited[id] = true;
+      remaining -= 1;
+    } else {
+      limited[id] = false;
+    }
+  }
+  return limited;
+};
+
+/**
+ * Sanitizes floating tools settings by removing unknown keys and ensuring
+ * the environment field is always present.
+ *
+ * @param floating - Floating tools settings object
+ * @param allowedKeys - Optional list of allowed tool keys (environment is always allowed)
+ * @returns Sanitized floating tools settings
+ */
+exports.enforceDialLimit = enforceDialLimit;
+const sanitizeFloatingSettings = (floating, allowedKeys) => {
+  const {
+    userStatus,
+    environment,
+    ...rest
+  } = floating;
+  const filteredEntries = allowedKeys ? Object.entries(rest).filter(([key]) => allowedKeys.includes(key)) : Object.entries(rest);
+  return {
+    ...Object.fromEntries(filteredEntries),
+    environment: environment ?? false
+  };
+};
+
+/**
+ * Options for merging settings with defaults.
+ */
+exports.sanitizeFloatingSettings = sanitizeFloatingSettings;
+/**
+ * Merges stored settings with defaults, ensuring all required fields exist
+ * and limits are enforced.
+ *
+ * @param defaults - Default settings to use as base
+ * @param stored - Stored settings to merge (optional)
+ * @param options - Optional filtering options
+ * @returns Merged settings with all fields and limits enforced
+ */
+const mergeSettingsWithDefaults = (defaults, stored, options) => {
+  if (!stored) return defaults;
+  const combinedDial = {
+    ...defaults.dialTools,
+    ...(stored.dialTools ?? {})
+  };
+  const dialEntries = options?.allowedDialKeys ? Object.entries(combinedDial).filter(([key]) => options.allowedDialKeys?.includes(key)) : Object.entries(combinedDial);
+  const mergedDial = enforceDialLimit(Object.fromEntries(dialEntries));
+  return {
+    dialTools: mergedDial,
+    floatingTools: sanitizeFloatingSettings({
+      ...defaults.floatingTools,
+      ...(stored.floatingTools ?? {})
+    }, options?.allowedFloatingKeys),
+    globalSettings: {
+      enableSharedModalDimensions: false,
+      // Default to false
+      expandableWindowControls: true,
+      // Default to true - expandable on touch devices
+      ...(stored.globalSettings ?? {})
+    }
+  };
+};
+
+/**
+ * Generates default settings based on available tools and optional team defaults.
+ *
+ * @param availableTools - List of available tools from auto-discovery
+ * @param defaultFloatingTools - Optional array of tool IDs to enable by default in floating bubble
+ * @param defaultDialTools - Optional array of tool IDs to enable by default in dial menu
+ * @returns Default settings with specified tools enabled
+ */
+exports.mergeSettingsWithDefaults = mergeSettingsWithDefaults;
+const generateDefaultSettings = (availableTools = [], defaultFloatingTools, defaultDialTools) => {
+  const dialDefaults = {};
+  const floatingDefaults = {};
+
+  // Create sets for quick lookup of default-enabled tools
+  const enabledFloatingSet = new Set(defaultFloatingTools ?? []);
+  const enabledDialSet = new Set(defaultDialTools ?? []);
+  for (const tool of availableTools) {
+    const {
+      id,
+      slot = 'both'
+    } = tool;
+    if (slot === 'dial' || slot === 'both') {
+      // Enable if in defaultDialTools, otherwise false
+      dialDefaults[id] = enabledDialSet.has(id);
+    }
+    if (slot === 'row' || slot === 'both') {
+      // Enable if in defaultFloatingTools, otherwise false
+      floatingDefaults[id] = enabledFloatingSet.has(id);
+    }
+  }
+  return {
+    dialTools: enforceDialLimit(dialDefaults),
+    floatingTools: {
+      ...floatingDefaults,
+      // Special: environment badge - check if 'environment' is in the floating defaults
+      environment: enabledFloatingSet.has('environment')
+    },
+    globalSettings: {
+      enableSharedModalDimensions: false,
+      // Default to false - each modal has its own persistence
+      expandableWindowControls: true // Default to true - expandable on touch devices
+    }
+  };
+};
+
+/**
+ * Counts the number of enabled tools in a settings record.
+ *
+ * @param tools - Record of tool ids to enabled state
+ * @returns Count of enabled tools
+ */
+exports.generateDefaultSettings = generateDefaultSettings;
+const countEnabledTools = tools => {
+  return Object.values(tools).filter(Boolean).length;
+};
+
+/**
+ * Checks if a dial tool can be enabled (respects slot limit).
+ *
+ * @param dialTools - Current dial tools settings
+ * @param toolId - ID of the tool to check
+ * @param maxSlots - Maximum number of slots (default: MAX_SETTINGS_DIAL_SLOTS)
+ * @returns true if the tool can be enabled
+ */
+exports.countEnabledTools = countEnabledTools;
+const canEnableDialTool = (dialTools, toolId, maxSlots = MAX_SETTINGS_DIAL_SLOTS) => {
+  const currentEnabled = countEnabledTools(dialTools);
+  const isCurrentlyEnabled = dialTools[toolId];
+
+  // If already enabled, it can stay enabled
+  if (isCurrentlyEnabled) return true;
+
+  // If not enabled and at limit, cannot enable
+  return currentEnabled < maxSlots;
+};
+
+/**
+ * Extracts enabled tool IDs from a settings record.
+ *
+ * @param settings - DevTools settings
+ * @returns Object with arrays of enabled floating and dial tool IDs
+ */
+exports.canEnableDialTool = canEnableDialTool;
+const getEnabledToolIds = settings => {
+  const enabledFloating = Object.entries(settings.floatingTools).filter(([_, enabled]) => enabled).map(([id]) => id);
+  const enabledDial = Object.entries(settings.dialTools).filter(([_, enabled]) => enabled).map(([id]) => id);
+  return {
+    floating: enabledFloating,
+    dial: enabledDial
+  };
+};
+
+// =============================
+// Settings Event Bus
+// =============================
+exports.getEnabledToolIds = getEnabledToolIds;
+/**
+ * Generic event bus for broadcasting settings changes.
+ * Platform-agnostic implementation for synchronizing settings
+ * across components.
+ */
+class SettingsEventBus {
+  listeners = new Set();
+
+  /**
+   * Emit a settings change to all listeners.
+   *
+   * @param payload - The new settings value
+   */
+  emit(payload) {
+    this.listeners.forEach(listener => {
+      try {
+        listener(payload);
+      } catch (e) {
+        console.error('Error emitting settings event:', e);
+      }
+    });
+  }
+
+  /**
+   * Add a listener for settings changes.
+   *
+   * @param listener - Callback function to invoke on changes
+   * @returns Unsubscribe function
+   */
+  addListener(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  /**
+   * Remove all listeners.
+   */
+  clear() {
+    this.listeners.clear();
+  }
+
+  /**
+   * Get the number of active listeners.
+   */
+  get listenerCount() {
+    return this.listeners.size;
+  }
+}
+
+/**
+ * Default settings event bus instance.
+ * Use this for broadcasting settings changes across the app.
+ */
+exports.SettingsEventBus = SettingsEventBus;
+const settingsEventBus = exports.settingsEventBus = new SettingsEventBus();

package/lib/commonjs/utils.js

@@ -1 +1,72 @@
-"use strict";function getUserStatusConfig(t,e){switch(t){case"admin":return{label:"Admin",dotColor:e.success,textColor:e.success};case"internal":return{label:"Internal",dotColor:e.optional,textColor:e.optional};default:return{label:"User",dotColor:e.muted,textColor:e.secondary}}}function getGripIconLayout(t){return{dotSize:Math.max(2,Math.round(t/6)),columnGap:Math.max(2,Math.round(t/12)),rowGap:Math.max(2,Math.round(t/12))}}function filterValidChildren(t){return t.filter(t=>null!=t&&!1!==t)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.filterValidChildren=filterValidChildren,exports.getGripIconLayout=getGripIconLayout,exports.getUserStatusConfig=getUserStatusConfig;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterValidChildren = filterValidChildren;
+exports.getGripIconLayout = getGripIconLayout;
+exports.getUserStatusConfig = getUserStatusConfig;
+/**
+ * Shared utility functions for floating tools.
+ * Platform-agnostic - no React or DOM dependencies.
+ */
+
+// =============================
+// User Status Configuration
+// =============================
+
+/**
+ * Get display configuration for a user role.
+ * Used by both web and mobile renderers.
+ */
+function getUserStatusConfig(userRole, colors) {
+  switch (userRole) {
+    case 'admin':
+      return {
+        label: 'Admin',
+        dotColor: colors.success,
+        textColor: colors.success
+      };
+    case 'internal':
+      return {
+        label: 'Internal',
+        dotColor: colors.optional,
+        textColor: colors.optional
+      };
+    case 'user':
+    default:
+      return {
+        label: 'User',
+        dotColor: colors.muted,
+        textColor: colors.secondary
+      };
+  }
+}
+
+// =============================
+// Grip Icon Layout
+// =============================
+
+/**
+ * Calculate grip icon layout dimensions based on size.
+ * Creates a 2x3 dot grid pattern.
+ */
+function getGripIconLayout(size) {
+  return {
+    dotSize: Math.max(2, Math.round(size / 6)),
+    columnGap: Math.max(2, Math.round(size / 12)),
+    rowGap: Math.max(2, Math.round(size / 12))
+  };
+}
+
+// =============================
+// Children Utilities
+// =============================
+
+/**
+ * Filter valid React children (removes null, undefined, false).
+ * Works with both web and React Native.
+ */
+function filterValidChildren(children) {
+  return children.filter(child => child != null && child !== false);
+}