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

package/lib/module/settings.js

@@ -1 +1,589 @@
-"use strict";import{withAlpha}from"./colors.js";export const SETTINGS_STORAGE_KEY="@react_buoy_dev_tools_settings";export const MAX_SETTINGS_DIAL_SLOTS=6;export const settingsTabs=[{key:"dial",label:"DIAL"},{key:"floating",label:"FLOATING"},{key:"settings",label:"SETTINGS"},{key:"pro",label:"PRO"}];export const 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=>withAlpha(e,"33"),toggleOnBorder:e=>withAlpha(e,"88"),toggleOffBg:"#1b2334",toggleOffBorder:"#2a3550",toggleOffText:"#8CA2C8",tabActiveBg:"rgba(0, 184, 230, 0.13)",tabActiveBorder:"#00B8E6",tabInactiveBg:"transparent",tabInactiveText:"#7A8599"};export const 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"};export const getToolColor=e=>toolColors[e]||settingsColors.info;export const 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"};export const 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," ")};export const 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"};export const getToolDescription=(e,t)=>{if(t){const o=t.find(t=>t.id===e);if(o?.description)return o.description}return toolDescriptions[e]||""};export const 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}};export const 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)."}];export const enforceDialLimit=(e,t=6)=>{let o=t;const n={};for(const[t,r]of Object.entries(e))r&&o>0?(n[t]=!0,o-=1):n[t]=!1;return n};export const sanitizeFloatingSettings=(e,t)=>{const{userStatus:o,environment:n,...r}=e,i=t?Object.entries(r).filter(([e])=>t.includes(e)):Object.entries(r);return{...Object.fromEntries(i),environment:n??!1}};export const mergeSettingsWithDefaults=(e,t,o)=>{if(!t)return e;const n={...e.dialTools,...t.dialTools??{}},r=o?.allowedDialKeys?Object.entries(n).filter(([e])=>o.allowedDialKeys?.includes(e)):Object.entries(n);return{dialTools:enforceDialLimit(Object.fromEntries(r)),floatingTools:sanitizeFloatingSettings({...e.floatingTools,...t.floatingTools??{}},o?.allowedFloatingKeys),globalSettings:{enableSharedModalDimensions:!1,expandableWindowControls:!0,...t.globalSettings??{}}}};export const generateDefaultSettings=(e=[],t,o)=>{const n={},r={},i=new Set(t??[]),s=new Set(o??[]);for(const t of e){const{id:e,slot:o="both"}=t;"dial"!==o&&"both"!==o||(n[e]=s.has(e)),"row"!==o&&"both"!==o||(r[e]=i.has(e))}return{dialTools:enforceDialLimit(n),floatingTools:{...r,environment:i.has("environment")},globalSettings:{enableSharedModalDimensions:!1,expandableWindowControls:!0}}};export const countEnabledTools=e=>Object.values(e).filter(Boolean).length;export const canEnableDialTool=(e,t,o=6)=>{const n=countEnabledTools(e);return!!e[t]||n<o};export 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)});export 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}}export const settingsEventBus=new SettingsEventBus;
+"use strict";
+
+/**
+ * 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
+ */
+
+import { withAlpha } from "./colors.js";
+
+// =============================
+// Constants
+// =============================
+
+/** Storage key for dev tools settings */
+export const SETTINGS_STORAGE_KEY = '@react_buoy_dev_tools_settings';
+
+/** Maximum number of tools in the dial menu */
+export const 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.
+ */
+export const 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.
+ */
+export const 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 => withAlpha(color, '33'),
+  toggleOnBorder: color => 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.
+ */
+export const 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
+ */
+export const getToolColor = toolId => {
+  return toolColors[toolId] || settingsColors.info;
+};
+
+// =============================
+// Tool Labels
+// =============================
+
+/**
+ * Display labels for each tool.
+ * These are shown in the settings card headers.
+ */
+export const 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
+ */
+export 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.
+ */
+export const 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
+ */
+export 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.
+ */
+export const 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.
+ */
+export const 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
+ */
+export 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
+ */
+export 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.
+ */
+
+/**
+ * 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+// =============================
+
+/**
+ * Generic event bus for broadcasting settings changes.
+ * Platform-agnostic implementation for synchronizing settings
+ * across components.
+ */
+export 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.
+ */
+export const settingsEventBus = new SettingsEventBus();

package/lib/module/utils.js

@@ -1 +1,66 @@
-"use strict";export function getUserStatusConfig(t,o){switch(t){case"admin":return{label:"Admin",dotColor:o.success,textColor:o.success};case"internal":return{label:"Internal",dotColor:o.optional,textColor:o.optional};default:return{label:"User",dotColor:o.muted,textColor:o.secondary}}}export 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))}}export function filterValidChildren(t){return t.filter(t=>null!=t&&!1!==t)}
+"use strict";
+
+/**
+ * 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export function filterValidChildren(children) {
+  return children.filter(child => child != null && child !== false);
+}

package/lib/typescript/commonjs/FloatingToolsStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingToolsStore.d.ts","sourceRoot":"","sources":["../../../src/FloatingToolsStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EAEN,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,SAAS,CAAC;AAUjB,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B,qBAAa,kBAAkB;IAE7B,OAAO,CAAC,QAAQ,CAAW;IAC3B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAO;IAGzB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAW;IAC9B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,yBAAyB,CAAU;IAC3C,OAAO,CAAC,OAAO,CAAC,CAAiB;IAGjC,OAAO,CAAC,gBAAgB,CAAC,CAA+B;IACxD,OAAO,CAAC,cAAc,CAAC,CAA4B;IACnD,OAAO,CAAC,gBAAgB,CAAC,CAA8B;IAGvD,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAyB;IAG9C,OAAO,CAAC,WAAW,CAA8C;IACjE,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAqB;gBAE9B,OAAO,EAAE,oBAAoB;IA4BzC,SAAS,GAAI,UAAU,QAAQ,KAAG,CAAC,MAAM,IAAI,CAAC,CAG5C;IAEF,WAAW,QAAO,kBAAkB,CAElC;IAEF,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,MAAM;IASd;;;OAGG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA8CjC;;OAEG;IACH,SAAS,IAAI,MAAM;IASnB;;OAEG;IACH,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,QAAQ;IAQzC;;OAEG;IACH,WAAW,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI;IAMhC;;;OAGG;IACH,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAQ/B;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAWlD;;OAEG;IACH,cAAc,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;YAQxB,YAAY;IAa1B,OAAO,CAAC,qBAAqB;IAS7B;;;OAGG;IACH,cAAc,IAAI;QAAE,cAAc,EAAE,QAAQ,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE;IAkCjE;;OAEG;IACH,SAAS,IAAI;QAAE,cAAc,EAAE,QAAQ,CAAA;KAAE;IAezC;;OAEG;IACH,SAAS,IAAI;QAAE,cAAc,EAAE,QAAQ,CAAA;KAAE;IA2BzC;;OAEG;IACH,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAM3C;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG;QAAE,QAAQ,EAAE,QAAQ,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE;IAgCjF;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa;IA2DlD;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI;IAUnC,OAAO,IAAI,IAAI;CAOhB"}

package/lib/typescript/commonjs/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;GAEG;AACH,eAAO,MAAM,mBAAmB;IAC9B,4BAA4B;;IAG5B,wCAAwC;;IAGxC,yBAAyB;;IAGzB,0CAA0C;;IAG1C,sCAAsC;;IAGtC,2CAA2C;;IAG3C,6BAA6B;;IAG7B,uCAAuC;;IAGvC,8DAA8D;;CAEtD,CAAC;AAEX,MAAM,MAAM,qBAAqB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAErE;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CASvE"}

package/lib/typescript/commonjs/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sEAAsE;AACtE,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,6DAA6D;AAC7D,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,kEAAkE;AAClE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,yCAAyC;AACzC,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,4CAA4C;AAC5C,eAAO,MAAM,YAAY;;;CAGf,CAAC"}

package/lib/typescript/commonjs/devToolsState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devToolsState.d.ts","sourceRoot":"","sources":["../../../src/devToolsState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAMjD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,cAAc,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,iBAAiB,EAAE,cAAc,CAAC;IAClC,qEAAqE;IACrE,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GACtB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,GAAG,EAAE,cAAc,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,CAAC;AAiB3B;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,cAAc,GACrB,aAAa,CA2Bf;AAMD,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,SAAS,CAA4B;gBAEjC,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC;IAQzD;;;OAGG;IACH,QAAQ,QAAO,aAAa,CAE1B;IAEF;;;OAGG;IACH,cAAc,QAAO,aAAa,CAEhC;IAEF;;OAEG;IACH,UAAU,IAAI,OAAO;IAIrB;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACH,aAAa,IAAI,OAAO;IAIxB;;OAEG;IACH,oBAAoB,IAAI,cAAc;IAQtC;;OAEG;IACH,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAUtC;;OAEG;IACH,QAAQ,IAAI,IAAI;IAIhB;;OAEG;IACH,SAAS,IAAI,IAAI;IAIjB;;OAEG;IACH,UAAU,IAAI,IAAI;IAIlB;;;OAGG;IACH,YAAY,IAAI,IAAI;IAIpB;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAIzC;;;OAGG;IACH,UAAU,IAAI,IAAI;IAQlB;;;;;OAKG;IACH,SAAS,GAAI,UAAU,QAAQ,KAAG,CAAC,MAAM,IAAI,CAAC,CAK5C;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe;IAUvB;;;OAGG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;;OAGG;IACH,KAAK,IAAI,IAAI;CAId;AAMD;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,sBAA6B,CAAC"}