@buoy-gg/core 7.0.40 → 7.0.42

package/lib/module/floatingMenu/DevToolsSettingsModal.shared.js

@@ -0,0 +1 @@
+"use strict";import{useState as m,useEffect as L,useCallback as K,useMemo as W}from"react";import{View as y,Text as u,StyleSheet as Xe,ScrollView as me,TouchableOpacity as j,Dimensions as Se,Platform as Ze}from"react-native";import{settingsBus as A}from"./settingsBus.js";import{useDesktopSyncStatus as et}from"./useDesktopSyncStatus";import{SentryIcon as tt,WifiCircuitIcon as ot,ImageOverlayIcon as nt,RenderCountIcon as rt,Info as Q,Layers as st,ChevronRightIcon as be,ChevronDown as we,getStorageBackendType as at,getUseLicense as it,persistentStorage as D,Trash2 as lt,CheckCircle2 as Te,LicenseEntryModal as ct,BackgroundSwitcher as dt,night as o,NightCard as R,NightRows as X,NightSectionLabel as gt,NightFootnote as ve,NightSwitch as xe,NightButton as ze,NightSegmented as ut,NightBadge as v,NightSeparator as ht,monoFont as Ie}from"@buoy-gg/shared-ui";import{EnvIcon as Ce,StorageIcon as yt,RoutesIcon as ft,NetworkIcon as pt,QueryIcon as mt,HighlighterIcon as St,ReduxIcon as bt,EventsIcon as wt}from"@buoy-gg/floating-tools-core";import{useDefaultConfig as Le}from"./DefaultConfigContext.js";import{renderAppIcon as Tt}from"./AppIcon";import{JsModal as vt,devToolsStorageKeys as Z}from"@buoy-gg/shared-ui";import{useSafeAreaInsets as xt}from"@buoy-gg/shared-ui";import{jsx as e,jsxs as a,Fragment as k}from"react/jsx-runtime";const N="@react_buoy_dev_tools_settings";const zt=6;const V=d=>{let g=zt;const i={};for(const[f,l]of Object.entries(d)){if(l&&g>0){i[f]=true;g-=1}else{i[f]=false}}return i};const It=(d,g)=>{const{userStatus:i,environment:f,...l}=d;const h=g?Object.entries(l).filter(([p])=>g.includes(p)):Object.entries(l);return{...Object.fromEntries(h),environment:f??false}};const De=(d,g,i)=>{if(!g)return d;const f={...d.dialTools,...g.dialTools??{}};const l=i?.allowedDialKeys?Object.entries(f).filter(([p])=>i.allowedDialKeys?.includes(p)):Object.entries(f);const h=V(Object.fromEntries(l));return{dialTools:h,floatingTools:It({...d.floatingTools,...g.floatingTools??{}},i?.allowedFloatingKeys),globalSettings:{enableSharedModalDimensions:false,expandableWindowControls:true,...g.globalSettings??{}}}};const Ct=(d=[],g,i)=>{const f={};const l={};const h=new Set(g??[]);const p=new Set(i??[]);const S=!i||i.length===0;for(const x of d){const{id:c,slot:I="both"}=x;if(I==="dial"||I==="both"){f[c]=S?true:p.has(c)}if(I==="row"||I==="both"){l[c]=h.has(c)}}return{dialTools:V(f),floatingTools:{...l,environment:h.has("environment")},globalSettings:{enableSharedModalDimensions:false,expandableWindowControls:true}}};export const DevToolsSettingsModal=({visible:d,onClose:g,onSettingsChange:i,initialSettings:f,availableApps:l=[],storage:h=D,zIndex:p})=>{const{defaultFloatingTools:S,defaultDialTools:x}=Le();const c=W(()=>Ct(l,S,x),[l,S,x]);const I=W(()=>Object.keys(c.dialTools),[c]);const te=W(()=>Object.keys(c.floatingTools).filter(t=>t!=="environment"),[c]);const[z,E]=m(f||P||c);const[B,oe]=m(ee??"floating");const[ne,Ee]=m(ee!==null);const[_,Fe]=m(new Set);const[Oe,J]=m(false);const[ke,Pe]=m(false);L(()=>{const t=requestAnimationFrame(()=>Pe(true));return()=>cancelAnimationFrame(t)},[]);const b=et();L(()=>{const t=async()=>{try{const r=await D.getItem(Z.settings.activeTab());if(r&&["floating","settings","pro"].includes(r)){const s=r;ee=s;oe(T=>T===s?T:s)}}catch(r){}finally{Ee(true)}};t()},[]);L(()=>{if(!ne)return;D.setItem(Z.settings.activeTab(),B).catch(t=>{console.warn("Failed to save settings active tab:",t)})},[B,ne]);const He=it();const H=He?.();const F=H?.isPro??false;const U=!F&&H?.licenseKey?H.error:null;const Me=H?.errorKind==="transport";const[w,Ke]=m(Re);const[G,re]=m(false);const[q,Y]=m(false);const[O,We]=m(false);const[$,se]=m([]);const[ae,ie]=m(false);const le=xt();const ce=Se.get("window").height;const de=Se.get("window").width;const je=Math.floor(ce*.33);const Ae=Math.min(de-32,400);const ge=K(async()=>{try{const t=await h.getItem(N);if(t){const r=JSON.parse(t);const s=De(c,r,{allowedDialKeys:I,allowedFloatingKeys:te});P=s;E(T=>Be(T,s)?T:s);return}P=c;E(r=>Be(r,c)?r:c)}catch(t){console.error("Failed to load dev tools settings:",t);E(c)}},[c,I,te,h]);L(()=>{ge()},[ge]);L(()=>{at().then(t=>{Re=t;Ke(r=>r===t?r:t)})},[]);L(()=>{if(O){ie(true);D.getAllKeys().then(t=>{se(t.sort())}).catch(()=>{se([])}).finally(()=>{ie(false)})}},[O]);const ue=async t=>{try{const r={...t,dialTools:V(t.dialTools)};await h.setItem(N,JSON.stringify(r));P=r;E(r);i?.(r);A.emit(r)}catch(r){console.error("Failed to save dev tools settings:",r)}};const Ne=t=>{const r={...z,floatingTools:{...z.floatingTools,[t]:!z.floatingTools[t]}};ue(r)};const Ve=t=>{const r={...z,globalSettings:{...z.globalSettings,[t]:!z.globalSettings?.[t]}};ue(r)};const _e=async()=>{re(true);Y(false);try{await D.clear();Y(true);E(c);if(h!==D)await h.setItem(N,JSON.stringify(c));i?.(c);A.emit(c);setTimeout(()=>Y(false),2e3)}catch(t){console.error("Failed to clear storage:",t)}finally{re(false)}};const Je=K(t=>{},[]);const Ue=t=>{const r=l.find(s=>s.id===t);if(r?.description){return r.description}if(t==="environment"){return"Environment badge."}return""};const he=t=>{if(t==="environment"){return"Env Badge"}const r=l.find(s=>s.id===t);return r?.name??t.toUpperCase().replace(/_/g," ")};const Ge=t=>{if(!ke)return null;switch(t){case"query":return e(mt,{size:18});case"env":return e(Ce,{size:18});case"sentry":return e(tt,{size:18,color:"#9945FF"});case"storage":return e(yt,{size:18,bgColor:o.color.surface});case"wifi":case"query-wifi-toggle":return e(ot,{size:18,colorPreset:"green",strength:4,noBackground:true});case"route-events":return e(ft,{size:18,bgColor:o.color.surface});case"network":return e(pt,{size:18});case"environment":return e(Ce,{size:18});case"debug-borders":return e(st,{size:18,color:o.color.accent});case"highlight-updates":return e(rt,{size:18,color:o.color.accent});case"highlight-updates-modal":return e(St,{size:18});case"redux":return e(bt,{size:18});case"image-overlay":return e(nt,{size:18});case"events":return e(wt,{size:18});case"zustand":try{const{ZustandIcon:r}=require("@buoy-gg/zustand");return e(r,{size:18})}catch{return e(Q,{size:18,color:o.color.textSecondary})}case"jotai":try{const{JotaiIcon:r}=require("@buoy-gg/jotai");return e(r,{size:18})}catch{return e(Q,{size:18,color:o.color.textSecondary})}default:{const r=l.find(s=>s.id===t);if(r?.icon!=null){return Tt(r.icon,{slot:"row",size:18,color:r.color})}return e(Q,{size:18,color:o.color.textSecondary})}}};const qe=(t,r,s,T)=>{const M=Ue(t);return a(j,{activeOpacity:s?1:.7,onPress:()=>!s&&T(),accessibilityLabel:he(t),accessibilityRole:"button",style:[n.toolRow,s&&n.rowDisabled],children:[e(y,{style:n.toolIconSlot,children:Ge(t)}),a(y,{style:n.rowInfo,children:[a(u,{style:n.rowLabel,children:[he(t),s?"  \xB7  max 6":""]}),M?e(u,{style:n.rowCaption,numberOfLines:1,children:M}):null]}),e(xe,{value:r,disabled:s,onValueChange:()=>T()})]},t)};const ye=t=>{Fe(r=>{const s=new Set(r);if(s.has(t)){s.delete(t)}else{s.add(t)}return s})};const fe=(t,r,s,T,M)=>{const Qe=z.globalSettings?.[t]??false;const pe=_.has(t);return a(y,{children:[a(j,{activeOpacity:.7,onPress:()=>ye(t),accessibilityLabel:r,style:n.settingRow,children:[a(y,{style:n.rowInfo,children:[e(u,{style:n.rowLabel,children:r}),e(u,{style:n.rowCaption,numberOfLines:pe?0:1,children:s})]}),e(xe,{value:Qe,onValueChange:()=>Ve(t)})]}),pe&&a(y,{style:n.settingRowBody,children:[e(u,{style:n.settingRowBodyText,children:T}),e(u,{style:n.settingRowBodyHint,children:M})]})]},t)};const C=(t,r,s)=>a(y,{children:[e(gt,{children:t}),r,s]});const Ye=w==="filesystem"?e(v,{label:"File System",tone:"accent"}):w==="asyncstorage"?e(v,{label:"Async Storage",tone:"warning"}):w==="localstorage"?e(v,{label:"Local Storage",tone:"accent"}):w==="memory"?e(v,{label:"Memory",tone:"danger"}):e(v,{label:"Loading\u2026",tone:"neutral"});const $e=()=>a(y,{style:n.container,children:[a(me,{style:n.scrollContent,showsVerticalScrollIndicator:false,contentContainerStyle:n.scrollContainer,children:[B==="floating"&&e(k,{children:C("Floating Tools",e(R,{glass:true,children:e(X,{children:Object.entries(z.floatingTools).map(([t,r])=>qe(t,r,false,()=>Ne(t)))})}),e(ve,{children:"Tools switched on here appear in the floating bubble row."}))}),B==="settings"&&a(k,{children:[C("Background",e(R,{glass:true,padded:true,children:e(dt,{embedded:true})})),C("Storage",a(R,{glass:true,children:[a(j,{activeOpacity:.7,onPress:()=>We(!O),accessibilityLabel:"Storage Type",style:n.settingRow,children:[e(y,{style:n.rowInfo,children:e(u,{style:n.rowLabel,children:"Storage Type"})}),Ye,O?e(we,{size:16,color:o.color.textTertiary}):e(be,{size:16,color:o.color.textTertiary})]}),O&&a(k,{children:[a(y,{style:n.settingRowBody,children:[e(u,{style:n.settingRowBodyText,children:w==="filesystem"?"Settings persist independently and survive AsyncStorage.clear() calls during logout.":w==="asyncstorage"?"Settings may be lost if AsyncStorage is cleared during logout.":w==="localstorage"?"Settings are saved in this browser. Clearing site data removes them.":w==="memory"?"Settings are stored in memory only and will be lost on app restart.":"Checking storage backend\u2026"}),w==="asyncstorage"&&e(u,{style:[n.settingRowBodyText,n.bodyWarning],children:"Install expo-file-system to persist settings through logout flows."}),w==="memory"&&e(u,{style:[n.settingRowBodyText,n.bodyDanger],children:"No persistent storage available \u2014 install expo-file-system (best) or @react-native-async-storage/async-storage."})]}),e(ht,{}),a(y,{style:n.storageExpanded,children:[a(y,{style:n.storageExpandedHeader,children:[e(u,{style:n.storageExpandedTitle,children:"SAVED SETTINGS"}),e(u,{style:n.storageExpandedCount,children:ae?"\u2026":`${$.length} keys`})]}),ae?e(u,{style:n.storageKeyEmpty,children:"Loading\u2026"}):$.length===0?e(u,{style:n.storageKeyEmpty,children:"No settings saved yet"}):e(me,{style:n.storageKeysList,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:$.map(t=>e(y,{style:n.storageKeyItem,children:e(u,{style:n.storageKeyText,numberOfLines:1,children:t.replace("@react_buoy_","")})},t))})]}),e(y,{style:n.cardButtonWrap,children:e(ze,{label:q?"Cleared":G?"Clearing\u2026":"Clear All Settings",variant:q?"secondary":"destructive",size:"md",disabled:G,onPress:_e,icon:q?e(Te,{size:15,color:o.color.accent}):e(lt,{size:15,color:G?o.color.textTertiary:o.color.danger})})})]})]})),b&&b.state!=="idle"&&C("Desktop Sync",a(R,{glass:true,children:[a(j,{activeOpacity:.7,onPress:()=>ye("desktopSync"),accessibilityLabel:"Buoy Desktop",style:n.settingRow,children:[e(y,{style:n.rowInfo,children:e(u,{style:n.rowLabel,children:"Buoy Desktop"})}),b.state==="connected"?e(v,{label:"Connected",tone:"accent"}):b.state==="connecting"?e(v,{label:"Connecting\u2026",tone:"neutral"}):e(v,{label:"Retrying",tone:"warning"}),_.has("desktopSync")?e(we,{size:16,color:o.color.textTertiary}):e(be,{size:16,color:o.color.textTertiary})]}),_.has("desktopSync")&&a(y,{style:n.settingRowBody,children:[a(u,{style:n.settingRowBodyText,children:[b.state==="connected"?"Streaming tool data to Buoy Desktop at ":"Trying to reach Buoy Desktop at ",e(u,{style:n.footnoteMono,children:b.targetURL??"(unknown URL)"}),b.state!=="connected"&&" \u2014 is the desktop app running? Override with the externalSync socketURL option if it runs elsewhere."]}),b.state==="retrying"&&b.lastError&&a(u,{style:[n.settingRowBodyText,n.bodyWarning],children:["Last error: ",b.lastError]})]})]})),C("Modal Behavior",e(R,{glass:true,children:a(X,{children:[fe("enableSharedModalDimensions","Shared Modal Size","Sync dimensions across all tools","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.","Keep OFF for the best experience. This allows you to customize each tool's modal size separately."),Ze.OS!=="web"?fe("expandableWindowControls","Expand Controls","iPad-style expandable window buttons","When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed. When disabled, buttons are directly tappable at their small size.","Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access."):null]})}))]}),B==="pro"&&a(k,{children:[C("License",e(R,{glass:true,children:a(y,{style:n.settingRow,children:[e(y,{style:n.rowInfo,children:e(u,{style:n.rowLabel,children:"License Status"})}),e(y,{testID:"buoy-settings-license-status",accessibilityLabel:F?"License: Active":"License: Free",children:F?e(v,{label:"Active",tone:"accent"}):e(v,{label:"Free",tone:"neutral"})})]})}),e(ve,{children:F?"You have full access to all Buoy DevTools features.":U?Me?`Couldn't reach the license server (${U}). A VPN or corporate proxy can block buoy.gg \u2014 turn it off and reload. Your key hasn't been rejected.`:`License check failed: ${U}.`:"Upgrade to Pro to unlock all features and support development."})),!F&&a(k,{children:[C("Pro Features",e(R,{glass:true,children:e(X,{children:["Advanced Settings","Priority Support"].map(t=>a(y,{style:n.featureRow,children:[e(Te,{size:16,color:o.color.accent}),e(u,{style:n.rowLabel,children:t})]},t))})})),e(ze,{label:"Upgrade to Pro",variant:"primary",size:"lg",onPress:()=>J(true)})]})]})]}),e(ct,{visible:Oe,onClose:()=>J(false),onSuccess:()=>J(false)})]});return e(vt,{visible:d,onClose:g,zIndex:p,variant:"night",header:{showToggleButton:false,customContent:e(y,{style:n.headerRow,children:e(ut,{glass:true,tabs:[{key:"floating",label:"Floating"},{key:"settings",label:"Settings"},{key:"pro",label:"Pro"}],activeKey:B,onChange:t=>oe(t)})})},initialMode:"bottomSheet",onModeChange:Je,persistenceKey:Z.settings.root(),enablePersistence:true,maxHeight:ce-le.top,initialHeight:je,initialFloatingPosition:{x:(de-Ae)/2,y:le.top+20},enableGlitchEffects:true,children:$e()})};const Lt={dialTools:{},floatingTools:{environment:false},globalSettings:{enableSharedModalDimensions:false}};const Dt=(d,g)=>{const i=new Set(d??[]);const f=new Set(g??[]);const l={};for(const p of f){l[p]=true}const h={environment:i.has("environment")};for(const p of i){if(p!=="environment"){h[p]=true}}return{dialTools:V(l),floatingTools:h,globalSettings:{enableSharedModalDimensions:false}}};let P=null;let ee=null;let Re=null;const Be=(d,g)=>JSON.stringify(d)===JSON.stringify(g);A.addListener(d=>{if(d)P=d});export const useDevToolsSettings=()=>{const{defaultFloatingTools:d,defaultDialTools:g}=Le();const i=W(()=>{if(!d&&!g){return Lt}return Dt(d,g)},[d,g]);const[f,l]=m(i);const h=K(async()=>{try{const S=await D.getItem(N);if(S){const x=JSON.parse(S);const c=De(i,x);l(c);return}l(i)}catch(S){console.error("Failed to load dev tools settings:",S);l(i)}},[i]);L(()=>{h();const S=A.addListener(x=>{try{if(x){l(x)}}catch(c){}});return()=>{S()}},[h]);const p=K(()=>{h()},[h]);return{settings:f,refreshSettings:p}};const n=Xe.create({container:{flex:1,backgroundColor:"transparent"},headerRow:{flexDirection:"row",alignItems:"center",paddingLeft:o.gutter,paddingRight:o.gutter,paddingBottom:8},scrollContent:{flex:1},scrollContainer:{paddingHorizontal:o.gutter,paddingTop:8,paddingBottom:24,gap:o.groupGap},toolRow:{flexDirection:"row",alignItems:"center",gap:12,paddingHorizontal:o.rowPadH,paddingVertical:12},settingRow:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:o.rowPadH,paddingVertical:o.rowPadV,minHeight:52},featureRow:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:o.rowPadH,paddingVertical:12},rowDisabled:{opacity:.4},toolIconSlot:{width:24,alignItems:"center"},rowInfo:{flex:1,gap:2},rowLabel:{color:o.color.text,fontSize:o.font.row,fontWeight:"500"},rowCaption:{color:o.color.textTertiary,fontSize:o.font.label},settingRowBody:{paddingHorizontal:o.rowPadH,paddingBottom:o.rowPadV,gap:6},settingRowBodyText:{color:o.color.textSecondary,fontSize:o.font.caption,lineHeight:o.font.caption*1.45},settingRowBodyHint:{color:o.color.textTertiary,fontSize:o.font.caption,lineHeight:o.font.caption*1.45},bodyWarning:{color:o.color.warning},bodyDanger:{color:o.color.danger},cardButtonWrap:{paddingHorizontal:o.cardPad,paddingTop:10,paddingBottom:o.cardPad},storageExpanded:{paddingHorizontal:o.rowPadH,paddingVertical:12,gap:8},storageExpandedHeader:{flexDirection:"row",alignItems:"center"},storageExpandedTitle:{flex:1,color:o.color.textSecondary,fontSize:o.font.micro,fontWeight:"600",letterSpacing:.5},storageExpandedCount:{color:o.color.textTertiary,fontSize:o.font.micro},storageKeysList:{maxHeight:150},storageKeyItem:{backgroundColor:o.color.glassElevated,borderRadius:o.radius.segment,paddingHorizontal:10,paddingVertical:7,marginBottom:4},storageKeyText:{color:o.color.textSecondary,fontSize:o.font.micro,fontFamily:Ie},storageKeyEmpty:{color:o.color.textTertiary,fontSize:o.font.caption,fontStyle:"italic"},footnoteMono:{fontFamily:Ie,fontSize:o.font.label,color:o.color.textSecondary}});