@buoy-gg/debug-borders 7.0.40 → 7.0.42

package/lib/module/preset.js

@@ -1,166 +1 @@
-"use strict";
-
-/**
- * Pre-configured debug borders tool for FloatingDevTools
- *
- * This preset provides a zero-config way to add visual layout debugging to your dev tools.
- * Just import and add it to your apps array! Tap the icon to cycle through modes:
- * - Off (gray icon)
- * - Borders only (green icon)
- * - Borders + Labels (cyan icon)
- *
- * @example
- * ```tsx
- * import { debugBordersToolPreset } from '@buoy-gg/debug-borders';
- *
- * const installedApps = [
- *   debugBordersToolPreset, // That's it!
- *   // ...other tools
- * ];
- * ```
- */
-
-import React, { useState, useEffect } from "react";
-import { Layers } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DebugBordersManager = require("./debug-borders/utils/DebugBordersManager");
-/**
- * Mode colors for the icon
- * - off: gray (disabled)
- * - borders: green (enabled, borders only)
- * - labels: cyan (enabled, with labels)
- */
-const MODE_COLORS = {
-  off: "#6b7280",
-  // Gray
-  borders: "#10b981",
-  // Green
-  labels: "#06b6d4" // Cyan
-};
-
-/**
- * Icon component that changes color based on display mode.
- *
- * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
- * This component MUST use useState and useEffect hooks to subscribe to the manager.
- * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
- * which allows hooks to work properly.
- *
- * If you remove the hooks or change this to read getMode() directly,
- * the icon color will NOT update when the toggle is pressed.
- */
-function BordersIcon({
-  size
-}) {
-  const [mode, setMode] = useState(() => DebugBordersManager.getMode());
-  useEffect(() => {
-    const unsubscribe = DebugBordersManager.subscribe(newMode => {
-      setMode(newMode);
-    });
-    return unsubscribe;
-  }, []);
-  return /*#__PURE__*/_jsx(Layers, {
-    size: size,
-    color: MODE_COLORS[mode]
-  });
-}
-
-/**
- * Empty component for toggle-only tools (no modal needed)
- */
-function EmptyComponent() {
-  return null;
-}
-
-/**
- * Pre-configured debug borders tool for FloatingDevTools.
- * Tap the icon to cycle through modes: Off → Borders → Labels → Off
- *
- * Features:
- * - Visual layout debugging with colored borders
- * - Optional component labels showing testID, nativeID, component name, etc.
- * - Automatic component tracking
- * - Real-time updates every 2 seconds
- * - Icon changes color: gray (off), green (borders), cyan (labels)
- */
-export const debugBordersToolPreset = {
-  id: "debug-borders",
-  name: "BORDERS",
-  description: "Visual layout debugger - tap to cycle modes",
-  slot: "row",
-  icon: BordersIcon,
-  component: EmptyComponent,
-  props: {},
-  launchMode: "toggle-only",
-  onPress: () => {
-    DebugBordersManager.cycle();
-    // Icon updates automatically via subscription in BordersIcon component
-  }
-};
-
-/**
- * Create a custom debug borders tool configuration.
- * Use this if you want to override default settings.
- *
- * @example
- * ```tsx
- * import { createDebugBordersTool } from '@buoy-gg/debug-borders';
- *
- * const myBordersTool = createDebugBordersTool({
- *   name: "LAYOUT",
- *   offColor: "#9ca3af",
- *   bordersColor: "#ec4899",
- *   labelsColor: "#8b5cf6",
- * });
- * ```
- */
-export function createDebugBordersTool(options) {
-  const colors = {
-    off: options?.offColor || "#6b7280",
-    borders: options?.bordersColor || "#10b981",
-    labels: options?.labelsColor || "#06b6d4"
-  };
-
-  /**
-   * Custom icon component with hooks - rendered as JSX component.
-   *
-   * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
-   * This component MUST use useState and useEffect hooks to subscribe to the manager.
-   * See the comment on BordersIcon above for full explanation.
-   */
-  const CustomBordersIcon = ({
-    size
-  }) => {
-    const [mode, setMode] = useState(() => DebugBordersManager.getMode());
-    useEffect(() => {
-      const unsubscribe = DebugBordersManager.subscribe(newMode => {
-        setMode(newMode);
-      });
-      return unsubscribe;
-    }, []);
-    return /*#__PURE__*/_jsx(Layers, {
-      size: size,
-      color: colors[mode]
-    });
-  };
-  return {
-    id: options?.id || "debug-borders",
-    name: options?.name || "BORDERS",
-    description: options?.description || "Visual layout debugger - tap to cycle modes",
-    slot: "row",
-    icon: CustomBordersIcon,
-    component: EmptyComponent,
-    props: {},
-    launchMode: "toggle-only",
-    onPress: () => {
-      DebugBordersManager.cycle();
-      // Icon updates automatically via subscription
-    }
-  };
-}
-
-/**
- * Export the standalone overlay for manual integration
- * Use this if you want to control debug borders outside of FloatingDevTools
- */
-export { DebugBordersStandaloneOverlay } from "./debug-borders/components/DebugBordersStandaloneOverlay";
+"use strict";import y,{useState as c,useEffect as d}from"react";import{Layers as u}from"@buoy-gg/shared-ui";import{jsx as l}from"react/jsx-runtime";const o=require("./debug-borders/utils/DebugBordersManager");const m={off:"#6b7280",borders:"#10b981",labels:"#06b6d4"};function f({size:e}){const[r,s]=c(()=>o.getMode());d(()=>{const t=o.subscribe(n=>{s(n)});return t},[]);return l(u,{size:e,color:m[r]})}function b(){return null}export const debugBordersToolPreset={id:"debug-borders",name:"BORDERS",description:"Visual layout debugger - tap to cycle modes",slot:"row",icon:f,component:b,props:{},launchMode:"toggle-only",onPress:()=>{o.cycle()}};export function createDebugBordersTool(e){const r={off:e?.offColor||"#6b7280",borders:e?.bordersColor||"#10b981",labels:e?.labelsColor||"#06b6d4"};const s=({size:t})=>{const[n,a]=c(()=>o.getMode());d(()=>{const i=o.subscribe(g=>{a(g)});return i},[]);return l(u,{size:t,color:r[n]})};return{id:e?.id||"debug-borders",name:e?.name||"BORDERS",description:e?.description||"Visual layout debugger - tap to cycle modes",slot:"row",icon:s,component:b,props:{},launchMode:"toggle-only",onPress:()=>{o.cycle()}}}export{DebugBordersStandaloneOverlay}from"./debug-borders/components/DebugBordersStandaloneOverlay";

package/lib/module/sync/debugBordersSyncAdapter.js

@@ -1,30 +1 @@
-"use strict";
-
-// CJS module (matches how preset.tsx loads it)
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const DebugBordersManager = require("../debug-borders/utils/DebugBordersManager");
-/**
- * Sync adapter for the debug-borders tool, consumed by @buoy-gg/external-sync's
- * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
- * this package doesn't need a dependency on it).
- *
- * Debug borders draw on the DEVICE's UI — there is nothing to mirror on a
- * dashboard. This adapter is a remote control: the dashboard reads the
- * current mode from snapshots and drives it via actions.
- */
-export const debugBordersSyncAdapter = {
-  version: 1,
-  getSnapshot: () => ({
-    mode: DebugBordersManager.getMode()
-  }),
-  subscribe: onChange => DebugBordersManager.subscribe(onChange),
-  actions: {
-    /** off → borders → labels → off (labels is Pro-gated on device) */
-    cycleMode: () => {
-      DebugBordersManager.cycle();
-    },
-    setMode: params => {
-      DebugBordersManager.setMode(params.mode);
-    }
-  }
-};
+"use strict";const e=require("../debug-borders/utils/DebugBordersManager");export const debugBordersSyncAdapter={version:1,getSnapshot:()=>({mode:e.getMode()}),subscribe:r=>e.subscribe(r),actions:{cycleMode:()=>{e.cycle()},setMode:r=>{e.setMode(r.mode)}}};

package/lib/web/index.mjs

@@ -0,0 +1 @@
+"use client";var re=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var He=Object.prototype.hasOwnProperty;var Oe=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(n,r)=>(typeof require<"u"?require:n)[r]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var ae=(e,n)=>()=>(e&&(n=e(e=0)),n);var z=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),le=(e,n)=>{for(var r in n)re(e,r,{get:n[r],enumerable:true})},ne=(e,n,r,g)=>{if(n&&typeof n=="object"||typeof n=="function")for(let p of Pe(n))!He.call(e,p)&&p!==r&&re(e,p,{get:()=>n[p],enumerable:!(g=Fe(n,p))||g.enumerable});return e},ke=(e,n,r)=>(ne(e,n,"default"),r&&ne(r,n,"default"));var Ge=e=>ne(re({},"__esModule",{value:true}),e);var B=ae(()=>{"use strict";typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis)});import{loadToolModule as _e}from"@buoy-gg/shared-ui/web/utils";var K=z((e,n)=>{"use strict";B();var r="off",g=new Set,p=["off","borders","labels"],S=["off","borders"],C=null,u=false;function s(){if(!u){u=true;try{let i=_e("@buoy-gg/license");i&&typeof i.isPro=="function"&&(C=i.isPro)}catch{C=null}}}function o(){if(s(),C)try{return C()}catch{return false}return false}function a(){return o()?p:S}var l=p;function b(i){return g.add(i),i(r),()=>{g.delete(i)}}function d(){g.forEach(i=>{try{i(r)}catch(m){console.error("[DebugBorders] Error in listener:",m)}})}function c(i){return r===i?true:i==="labels"&&!o()?(console.warn("[DebugBorders] Labels mode requires React Buoy Pro. Upgrade at https://buoy.gg/pro"),false):(r=i,d(),true)}function y(){return r}function v(){let i=a(),m=i.indexOf(r);if(m===-1){c("off");return}let k=(m+1)%i.length;c(i[k])}function w(){c("borders")}function x(){c("off")}function T(){v()}function E(){return r!=="off"}function L(){return r==="labels"&&o()}function G(){return o()}function t(){return a()}function f(i){i?w():x()}n.exports={subscribe:b,enable:w,disable:x,toggle:T,cycle:v,isEnabled:E,showLabels:L,setEnabled:f,getMode:y,setMode:c,isProEnabled:G,getAvailableModes:t,MODE_CYCLE:l}});import{getDOMNodeHandle as ze,isDOMElement as se}from"@buoy-gg/shared-ui/web/utils";var J=z((e,n)=>{"use strict";B();function r(){if(typeof globalThis>"u")return null;let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return t||null}function g(){let t=r();if(!t)return[];if(!t.getFiberRoots)return[];let f=new Set,i=t.renderers?.keys?Array.from(t.renderers.keys()):[1];for(let m of i)try{t.getFiberRoots(m)?.forEach(k=>f.add(k))}catch{}return[...f]}var p={FunctionComponent:0,ClassComponent:1,IndeterminateComponent:2,HostRoot:3,HostPortal:4,HostComponent:5,HostText:6,Fragment:7,Mode:8,ContextConsumer:9,ContextProvider:10,ForwardRef:11,Profiler:12,SuspenseComponent:13,MemoComponent:14,SimpleMemoComponent:15,LazyComponent:16,IncompleteClassComponent:17,DehydratedFragment:18,SuspenseListComponent:19,ScopeComponent:21,OffscreenComponent:22,LegacyHiddenComponent:23,CacheComponent:24,TracingMarkerComponent:25},S=new Set(["FloatingTools","FloatingDevTools","FloatingMenu","DialDevTools","DevToolsVisibilityProvider","AppHostProvider","MinimizedToolsProvider","MinimizedToolsStack","GlitchToolButton","DefaultConfigProvider","JsModalComponent","JsModal","ModalHeader","DraggableHeader","DragIndicator","CornerHandle","WindowControls","HighlightUpdatesModal","HighlightUpdatesOverlay","HighlightFilterView","RenderDetailView","RenderListItem","RenderListItemInner","RenderHistoryViewer","RenderCauseBadge","DebugBordersStandaloneOverlay","DebugBordersModal","ImageOverlayModal","ImageOverlayStandalone","StorageBrowser","StorageModal","GameUIStorageBrowser","StorageEventListener","StorageEventFilterView","NetworkMonitor","NetworkModal","NetworkRequestList","NetworkRequestDetail","RouteEventsModal","RouteEventsList","EnvSwitcher","EnvSwitcherModal","TabSelector","SectionHeader","TypePicker","PatternInput","PatternChip","DetectedItemsSection","DetectedCategoryBadge","IdentifierBadge","CategoryBadge","AppRenderer","AppOverlay","ExpandablePopover","Divider","UserStatus","GripVerticalIcon","LogBox","LogBoxLog","LogBoxLogNotification","LogBoxNotificationContainer","_LogBoxNotificationContainer","LogBoxInspector","LogBoxInspectorContainer","LogBoxInspectorHeader","LogBoxInspectorBody","LogBoxInspectorFooter","LogBoxInspectorMessageHeader","LogBoxInspectorStackFrame","LogBoxInspectorSection","LogBoxButton","LogBoxMessage"]),C=["JsModal","HighlightUpdates","RenderList","RenderDetail","DebugBorders","ImageOverlay","Storage","Network","RouteEvents","EnvSwitcher","Floating","Minimized","Expandable","DevTools","GameUI"],u=new Set(["debug-borders-overlay","floating-devtools-root","dial-devtools-root","jsmodal-root","highlight-updates-overlay","image-overlay-standalone","__rn_buoy__highlight-modal","logbox_inspector","logbox"]),s=new Map,o=500;function a(t){let f=ze(t);return f!==null?f:t?typeof t._nativeTag=="number"?t._nativeTag:typeof t.canonical?._nativeTag=="number"?t.canonical._nativeTag:typeof t.__nativeTag=="number"?t.__nativeTag:null:null}function l(t){if(!t)return false;if(u.has(t))return true;let f=t.charCodeAt(0);return!!(f===95&&(t.startsWith("__highlight_")||t.startsWith("__rn_buoy__"))||f===108&&t.startsWith("logbox"))}function b(t){if(!t)return null;let f=t.type;if(f){if(typeof f=="function")return f.displayName||f.name||null;if(typeof f=="string")return f;if(f.displayName)return f.displayName;if(f.name)return f.name}let i=t.elementType;if(i){if(typeof i=="function")return i.displayName||i.name||null;if(i.displayName)return i.displayName;if(i.name)return i.name}return null}function d(t,f){if(se(f)&&f.closest("[data-buoy-root]"))return true;let i=a(f);if(i!=null){let M=s.get(i);if(M!==void 0)return M}let m=false,k=t.pendingProps?.nativeID||t.memoizedProps?.nativeID;if(l(k))m=true;else{let M=t,H=0;for(;M&&H<30;){let oe=b(M);if(oe){if(S.has(oe)){m=true;break}for(let Ae of C)if(oe.startsWith(Ae)){m=true;break}if(m)break}let Me=M.pendingProps?.nativeID||M.memoizedProps?.nativeID;if(l(Me)){m=true;break}M=M.return,H++}}if(m&&i!=null){if(s.size>=o){let M=Array.from(s.keys());for(let H=0;H<o/2;H++)s.delete(M[H])}s.set(i,m)}return m}function c(){s.clear()}function y(t){return t.tag!==p.OffscreenComponent?false:t.memoizedState!==null}function v(t){let f=t.memoizedProps;return f?f.activityState===0:false}function w(t){return se(t)?t.tagName.toLowerCase():t?t.canonical?.viewConfig?.uiViewClassName?t.canonical.viewConfig.uiViewClassName:t.viewConfig?.uiViewClassName?t.viewConfig.uiViewClassName:null:null}function x(t){let f=w(t);return f?f.startsWith("RNSVG"):false}function T(t,f,i=0,m=new Set){if(t&&!m.has(t)&&(m.add(t),!(i>500))){if(y(t)){t.sibling&&T(t.sibling,f,i,m);return}if(v(t)){t.sibling&&T(t.sibling,f,i,m);return}f(t,i),t.child&&T(t.child,f,i+1,m),t.sibling&&T(t.sibling,f,i,m)}}function E(){let t=g();if(t.length===0)return[];let f=[];return t.forEach((i,m)=>{T(i.current,(k,M)=>{if(k.tag===p.HostComponent){let H=k.stateNode;if(d(k,H)||x(H))return;H&&f.push({instance:H,fiber:k,depth:M})}})}),f}function L(){let t=r();return!(!t||!t.getFiberRoots)}function G(){let t=r();return t?{available:true,hasAgent:!!t.reactDevtoolsAgent,hasFiberRoots:typeof t.getFiberRoots=="function",rendererCount:t.renderers?.size??0,rootCount:g().length,hookKeys:Object.keys(t)}:{available:false,reason:"Hook not found on global object"}}n.exports={getReactDevToolsHook:r,getFiberRoots:g,traverseFiberTree:T,getAllHostComponentInstances:E,isReactDevToolsAvailable:L,getReactDevToolsDiagnostics:G,isHiddenOffscreen:y,isInactiveScreen:v,isSVGComponent:x,getNativeViewClassName:w,isDevToolsComponent:d,isDevToolsNativeID:l,getComponentName:b,clearDevToolsCache:c,FiberTags:p,DEV_TOOLS_COMPONENT_NAMES:S,DEV_TOOLS_NATIVE_IDS:u}});var ce={};le(ce,{VIEW_TYPE_MAP:()=>_,default:()=>ge,getAllComponentNames:()=>be,getAllNativeViewTypes:()=>pe,getComponentDisplayName:()=>ue,getNativeViewType:()=>de,isKnownViewType:()=>fe});function ue(e){return _[e]||e}function de(e){for(let[n,r]of Object.entries(_))if(r===e)return n;return null}function fe(e){return e in _}function pe(){return Object.keys(_)}function be(){return[...new Set(Object.values(_))]}var _,ge,We=ae(()=>{"use strict";B();_={RCTView:"View",RCTSafeAreaView:"SafeAreaView",RCTModalHostView:"Modal",RCTText:"Text",RCTRawText:"RawText",RCTVirtualText:"VirtualText",RCTTextInlineImage:"TextInlineImage",RCTImageView:"Image",RCTImage:"Image",RCTScrollView:"ScrollView",RCTScrollContentView:"ScrollContentView",AndroidHorizontalScrollView:"HorizontalScrollView",AndroidHorizontalScrollContentView:"HorizontalScrollContentView",RCTSinglelineTextInputView:"TextInput",RCTMultilineTextInputView:"TextInput (Multiline)",AndroidTextInput:"TextInput",RCTInputAccessoryView:"InputAccessoryView",RCTRefreshControl:"RefreshControl",AndroidSwipeRefreshLayout:"RefreshControl",PullToRefreshView:"RefreshControl",RCTSwitch:"Switch",AndroidSwitch:"Switch",RCTSlider:"Slider",RCTActivityIndicatorView:"ActivityIndicator",AndroidProgressBar:"ActivityIndicator",AndroidDrawerLayout:"DrawerLayout",VirtualView:"VirtualView",VirtualViewExperimental:"VirtualView",DebuggingOverlay:"DebuggingOverlay",LayoutConformance:"LayoutConformance",UnimplementedNativeView:"UnimplementedView",RKShimmeringView:"ShimmeringView",RCTTemplateView:"TemplateView",RCTAxialGradientView:"AxialGradientView",RCTMap:"Map",RCTWebView:"WebView",RCTKeyframes:"Keyframes",RCTImpressionTrackingView:"ImpressionTrackingView",RNSVGSvgView:"Svg",RNSVGGroup:"G",RNSVGPath:"Path",RNSVGText:"SvgText",RNSVGTSpan:"TSpan",RNSVGTextPath:"TextPath",RNSVGImage:"SvgImage",RNSVGCircle:"Circle",RNSVGEllipse:"Ellipse",RNSVGLine:"Line",RNSVGRect:"Rect",RNSVGClipPath:"ClipPath",RNSVGDefs:"Defs",RNSVGUse:"Use",RNSVGSymbol:"Symbol",RNSVGPattern:"Pattern",RNSVGMask:"Mask",RNSVGForeignObject:"ForeignObject",RNSVGMarker:"Marker",RNSVGLinearGradient:"LinearGradient",RNSVGRadialGradient:"RadialGradient",RNSVGFilter:"Filter",RNSVGFeBlend:"FeBlend",RNSVGFeColorMatrix:"FeColorMatrix",RNSVGFeComposite:"FeComposite",RNSVGFeFlood:"FeFlood",RNSVGFeGaussianBlur:"FeGaussianBlur",RNSVGFeMerge:"FeMerge",RNSVGFeOffset:"FeOffset",RNSVGPolygon:"Polygon",RNSVGPolyline:"Polyline",RNSVGStop:"Stop",RNGestureHandlerRootView:"GestureHandlerRootView",RNGestureHandlerButton:"GestureHandlerButton",RNCSafeAreaProvider:"SafeAreaProvider",RNCSafeAreaView:"SafeAreaView",RNSScreen:"Screen",RNSScreenContainer:"ScreenContainer",RNSScreenStack:"ScreenStack",RNSScreenStackHeaderConfig:"ScreenStackHeaderConfig",RNSScreenStackHeaderSubview:"ScreenStackHeaderSubview",RNSSearchBar:"SearchBar",RNSFullWindowOverlay:"FullWindowOverlay",RNSModalScreen:"ModalScreen",ReanimatedView:"Animated.View",ExpoView:"ExpoView",ExpoBlurView:"BlurView",ExpoLinearGradient:"LinearGradient",ExpoImage:"ExpoImage",ExpoVideoView:"VideoView",ExpoCamera:"Camera",ExpoBarCodeScannerView:"BarCodeScanner",RNCWebView:"WebView",AIRMap:"MapView",AIRMapMarker:"Marker",AIRMapPolyline:"Polyline",AIRMapPolygon:"Polygon",AIRMapCircle:"Circle",AIRMapCallout:"Callout",RCTVideo:"Video",LottieAnimationView:"LottieView",FastImageView:"FastImage"};ge={VIEW_TYPE_MAP:_,getComponentDisplayName:ue,getNativeViewType:de,isKnownViewType:fe,getAllNativeViewTypes:pe,getAllComponentNames:be}});var me=z((e,n)=>{"use strict";B();var{getComponentDisplayName:r}=(We(),Ge(ce)),{getNativeViewClassName:g,getComponentName:p}=J(),S={testID:{label:"test",color:"#10b981"},nativeID:{label:"native",color:"#f59e0b"},component:{label:"comp",color:"#a855f7"},accessibilityLabel:{label:"a11y",color:"#ec4899"},viewType:{label:"view",color:"#6b7280"}};function C(o,a){let l=o.memoizedProps||o.pendingProps||{},b=g(a)||"Unknown",d=r(b),c=p(o),y=l.testID||null,v=l.nativeID||null,w=l.accessibilityLabel||l.accessible?.label||null,x=l.accessibilityRole||l.role||null,T=l.accessibilityHint||null,E=l.accessibilityState||null,L=null;if(l.style)try{L=Array.isArray(l.style)?Object.assign({},...l.style.filter(Boolean)):l.style}catch{L=null}let G=o.tag,t=o.key,f=null,i=o.return;for(;i&&!(i.type&&typeof i.type=="function"&&(f=i.type.displayName||i.type.name||null,f));)i=i.return;let m={viewType:b,displayName:d,componentName:c,parentComponentName:f,testID:y,nativeID:v,accessibilityLabel:w,accessibilityRole:x,accessibilityHint:T,accessibilityState:E,fiberTag:G,fiberKey:t,styleInfo:L,primaryLabel:null,primaryType:null,primaryColor:null};return y?(m.primaryLabel=y,m.primaryType="testID",m.primaryColor=S.testID.color):w?(m.primaryLabel=w,m.primaryType="accessibilityLabel",m.primaryColor=S.accessibilityLabel.color):c?(m.primaryLabel=c,m.primaryType="component",m.primaryColor=S.component.color):v?(m.primaryLabel=v,m.primaryType="nativeID",m.primaryColor=S.nativeID.color):(m.primaryLabel=d,m.primaryType="viewType",m.primaryColor=S.viewType.color),m}function u(o,a=20){return o?o.length<=a?o:o.substring(0,a-1)+"\u2026":""}function s(o){let a=S[o];return a?a.label+":":""}n.exports={extractComponentInfo:C,getShortLabel:u,getLabelPrefix:s,IDENTIFIER_CONFIG:S}});var ye=z((e,n)=>{"use strict";B();var r=null;try{r=Oe("./DebugInfo").addLog}catch{}function g(s){return new Promise(o=>{try{let a=s;if(s.canonical&&(s.canonical.publicInstance?a=s.canonical.publicInstance:a=s.canonical),typeof a.getBoundingClientRect=="function"){let l=a.getBoundingClientRect();if(l&&typeof l.x=="number"&&typeof l.y=="number"&&typeof l.width=="number"&&typeof l.height=="number"&&l.width>=0&&l.height>=0){o({x:l.x,y:l.y,width:l.width,height:l.height});return}}if(typeof a.measure=="function"){let l=setTimeout(()=>{o(null)},100);a.measure((b,d,c,y,v,w)=>{clearTimeout(l),v!=null&&w!=null&&c!=null&&y!=null&&c>=0&&y>=0?o({x:v,y:w,width:c,height:y}):o(null)});return}o(null)}catch{o(null)}})}var{extractComponentInfo:p}=me();async function S(s){return(await Promise.all(s.map(async({instance:o,fiber:a,depth:l})=>{let b=await g(o);if(b){let d=p(a,o);return{...b,depth:l,componentInfo:d}}return null}))).filter(o=>o!=null)}function C(s){return{hasFabricBoundingRect:typeof s.getBoundingClientRect=="function",hasPaperMeasure:typeof s.measure=="function",hasNode:s.node!=null}}function u(s){let o={fabric:0,paper:0,none:0};return s.forEach(({instance:a})=>{let l=C(a);l.hasFabricBoundingRect?o.fabric++:l.hasPaperMeasure?o.paper++:o.none++}),o}n.exports={measureInstance:g,measureInstances:S,getMeasurementCapabilities:C,getMeasurementStats:u}});var he=z((e,n)=>{"use strict";B();function r(a,l,b){let d=a/360,c=l/100,y=b/100,v,w,x;if(c===0)v=w=x=y;else{let E=(t,f,i)=>(i<0&&(i+=1),i>1&&(i-=1),i<.16666666666666666?t+(f-t)*6*i:i<.5?f:i<.6666666666666666?t+(f-t)*(.6666666666666666-i)*6:t),L=y<.5?y*(1+c):y+c-y*c,G=2*y-L;v=E(G,L,d+1/3),w=E(G,L,d),x=E(G,L,d-1/3)}let T=E=>{let L=Math.round(E*255).toString(16);return L.length===1?"0"+L:L};return`#${T(v)}${T(w)}${T(x)}`}function g(a){let l=(0+a*137.508)%360;return r(l,70,50)}function p(){let a=Math.random()*360;return r(a,70,50)}function S(a){let l=[];for(let b=0;b<a;b++)l.push(g(b));return l}var C=["#FF5733","#33FF57","#3357FF","#FF33F5","#F5FF33","#33FFF5","#FF8333","#8333FF","#33FF83","#FF3383"];function u(a){return C[a%C.length]}function s(a,l=1){let b=parseInt(a.slice(1,3),16),d=parseInt(a.slice(3,5),16),c=parseInt(a.slice(5,7),16);return`rgba(${b}, ${d}, ${c}, ${l})`}function o(a){let l=parseInt(a.slice(1,3),16),b=parseInt(a.slice(3,5),16),d=parseInt(a.slice(5,7),16);return 255<<24|l<<16|b<<8|d}n.exports={getColorForDepth:g,getRandomColor:p,generateColorPalette:S,getColorFromPalette:u,hslToHex:r,hexToRgba:s,hexToProcessColor:o,PREDEFINED_PALETTE:C}});var je=z((e,n)=>{"use strict";B();var r={LABEL_SPACING:0,MAX_VERTICAL_OFFSET:100,LABEL_HEIGHT:10,PADDING:0};function g(u,s){let o=r.PADDING,a=u.x-o,l=u.x+u.width+o,b=u.y-o,d=u.y+u.height+o,c=s.x-o,y=s.x+s.width+o,v=s.y-o,w=s.y+s.height+o;return!(l<c||a>y||d<v||b>w)}function p(u){return u?u.length*5+8:0}function S(u){if(!u||u.length===0)return u;let s=u.filter(b=>{let d=b.componentInfo;return d&&(d.testID||d.accessibilityLabel)}),o=u.map((b,d)=>{let c=b.componentInfo,y=c&&(c.testID||c.accessibilityLabel),v=y?c.primaryLabel:"",w=p(v);return{index:d,hasValidLabel:y,x:b.x,y:b.y-r.LABEL_HEIGHT,width:w,height:r.LABEL_HEIGHT,offsetY:0}}),a=o.map((b,d)=>d).filter(b=>o[b].hasValidLabel).sort((b,d)=>{let c=u[b],y=u[d];return Math.abs(c.y-y.y)>10?c.y-y.y:c.x-y.x}),l=[];for(let b of a){let d=o[b];if(d.width===0)continue;let c=0,y=true,v=0,w=Math.ceil(r.MAX_VERTICAL_OFFSET/r.LABEL_HEIGHT);for(;y&&v<w;){let x={x:d.x,y:d.y-c,width:d.width,height:d.height};y=l.some(T=>g(x,T)),y&&(c+=r.LABEL_HEIGHT,v++)}d.offsetY=c,l.push({x:d.x,y:d.y-c,width:d.width,height:d.height})}return u.map((b,d)=>({...b,labelOffsetY:o[d].offsetY}))}function C(u){if(!u||u.length<2)return false;for(let s=0;s<Math.min(u.length,20);s++)for(let o=s+1;o<Math.min(u.length,20);o++){let a=u[s],l=u[o];if(Math.abs(a.y-l.y)<r.LABEL_HEIGHT*2&&!(a.x+100<l.x||l.x+100<a.x))return true}return false}n.exports={resolveOverlappingLabels:S,rectsOverlap:g,estimateLabelWidth:p,mightHaveOverlaps:C,CONFIG:r}});B();B();import{useState as ve,useEffect as Se}from"react";import{Layers as Ce}from"@buoy-gg/shared-ui/web";B();import we,{useEffect as xe,useState as X,useCallback as Te}from"react";var Re={};le(Re,{AccessibilityInfo:()=>Ye,ActivityIndicator:()=>jt,Alert:()=>$t,Animated:()=>qe,AppRegistry:()=>Xe,AppState:()=>Qe,Appearance:()=>Je,BackHandler:()=>Ze,Button:()=>Kt,CheckBox:()=>gt,Clipboard:()=>et,DeviceEventEmitter:()=>Dt,Dimensions:()=>tt,Easing:()=>ot,FlatList:()=>mt,I18nManager:()=>rt,Image:()=>yt,ImageBackground:()=>ht,InteractionManager:()=>it,Keyboard:()=>nt,KeyboardAvoidingView:()=>vt,LayoutAnimation:()=>at,Linking:()=>lt,LogBox:()=>Bt,Modal:()=>zt,NativeEventEmitter:()=>st,NativeModules:()=>$e,PanResponder:()=>ct,Picker:()=>St,PixelRatio:()=>ut,Platform:()=>dt,Pressable:()=>Gt,ProgressBar:()=>Ct,RefreshControl:()=>wt,SafeAreaView:()=>xt,ScrollView:()=>_t,SectionList:()=>Tt,Share:()=>ft,StatusBar:()=>Rt,StyleSheet:()=>U,Switch:()=>Wt,Text:()=>R,TextInput:()=>Ht,Touchable:()=>It,TouchableHighlight:()=>Ot,TouchableNativeFeedback:()=>Vt,TouchableOpacity:()=>Q,TouchableWithoutFeedback:()=>kt,UIManager:()=>pt,Vibration:()=>bt,View:()=>F,VirtualizedList:()=>Nt,YellowBox:()=>Lt,findNodeHandle:()=>Ut,unstable_createElement:()=>Ue,useColorScheme:()=>Et,useLocaleContext:()=>Mt,useWindowDimensions:()=>At});B();ke(Re,Ke);import*as Ke from"react-native-web";import{unstable_createElement as Ue,NativeModules as $e,AccessibilityInfo as Ye,Animated as qe,Appearance as Je,AppRegistry as Xe,AppState as Qe,BackHandler as Ze,Clipboard as et,Dimensions as tt,Easing as ot,I18nManager as rt,Keyboard as nt,InteractionManager as it,LayoutAnimation as at,Linking as lt,NativeEventEmitter as st,PanResponder as ct,PixelRatio as ut,Platform as dt,Share as ft,StyleSheet as U,UIManager as pt,Vibration as bt,CheckBox as gt,FlatList as mt,Image as yt,ImageBackground as ht,KeyboardAvoidingView as vt,Picker as St,ProgressBar as Ct,RefreshControl as wt,SafeAreaView as xt,SectionList as Tt,StatusBar as Rt,Touchable as It,TouchableNativeFeedback as Vt,VirtualizedList as Nt,YellowBox as Lt,LogBox as Bt,DeviceEventEmitter as Dt,useColorScheme as Et,useLocaleContext as Mt,useWindowDimensions as At}from"react-native-web";import*as A from"react-native-web";import{createElement as Ft,forwardRef as Pt}from"react";function P(e){let n=Pt((g,p)=>{let{accessibilityState:S,accessibilityValue:C,...u}=g;for(let s of["busy","checked","disabled","expanded","selected"])S?.[s]!==void 0&&u[`aria-${s}`]===void 0&&(u[`aria-${s}`]=S[s]);for(let[s,o]of Object.entries({min:"valuemin",max:"valuemax",now:"valuenow",text:"valuetext"}))C?.[s]!==void 0&&u[`aria-${o}`]===void 0&&(u[`aria-${o}`]=C[s]);return Ft(e,{...u,ref:p})}),r=e.State;return r&&Object.assign(n,{State:r}),n.displayName=e.displayName??e.name??"NativeWebView",n}var F=P(A.View),R=P(A.Text),Ht=P(A.TextInput),Q=P(A.TouchableOpacity),Ot=P(A.TouchableHighlight),kt=P(A.TouchableWithoutFeedback),Gt=P(A.Pressable),_t=P(A.ScrollView),zt=P(A.Modal),Wt=P(A.Switch),jt=P(A.ActivityIndicator),Kt=P(A.Button),Ut=A.findNodeHandle,$t={alert(e,n,r,g){if(typeof document>"u")return;let p=document.createElement("dialog");p.dataset.buoyRoot="",p.setAttribute("aria-label",e),p.style.cssText="position:fixed;inset:0;margin:auto;width:min(440px,90vw);padding:24px;border:1px solid #475569;border-radius:14px;background:#17212e;color:#f1f5f9;font:14px system-ui;box-shadow:0 20px 80px #0008;z-index:2147483647";let S=document.createElement("h2");if(S.textContent=e,S.style.cssText="font-size:18px;margin:0 0 12px",p.appendChild(S),n){let o=document.createElement("p");o.textContent=n,o.style.cssText="line-height:1.5;white-space:pre-wrap;margin:0 0 20px",p.appendChild(o)}let C=document.createElement("div");C.style.cssText="display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px";let u=r?.length?r:[{text:"OK"}],s=()=>{p.close?.(),p.remove()};for(let o of u){let a=document.createElement("button");a.type="button",a.textContent=o.text??"OK",a.style.cssText=`padding:9px 14px;border:1px solid #64748b;border-radius:7px;color:white;background:${o.style==="destructive"?"#a52b38":"#283a4d"};cursor:pointer;font:inherit`,a.onclick=()=>{s(),o.onPress?.()},C.appendChild(a)}p.addEventListener("cancel",o=>{o.preventDefault(),g?.cancelable!==false&&(s(),g?.onDismiss?.())}),p.appendChild(C),document.body.appendChild(p),p.showModal?p.showModal():p.setAttribute("open","")}};import{monoFont as $}from"@buoy-gg/shared-ui/web";import{JsModal as Ie,devToolsStorageKeys as Yt}from"@buoy-gg/shared-ui/web";import{DataViewer as Z}from"@buoy-gg/shared-ui/web/dataViewer";import{loadToolModule as qt}from"@buoy-gg/shared-ui/web/utils";import{Fragment as Ve,jsx as h,jsxs as W}from"react/jsx-runtime";var Jt=Yt.debugBorders.infoModal(),Xt=K(),{getAllHostComponentInstances:Qt}=J(),{measureInstances:Zt}=ye(),{getColorForDepth:eo}=he(),{getShortLabel:Eo}=me(),{resolveOverlappingLabels:to}=je(),Y;function oo(){if(Y!==void 0)return Y;try{Y=qt("@buoy-gg/core").useDevToolsVisibility??null}catch{Y=null}return Y??null}function N({label:e,value:n,color:r}){if(n==null)return null;let g;if(typeof n=="object")try{g=JSON.stringify(n,null,2)}catch{g=String(n)}else g=String(n);return W(F,{style:O.row,children:[h(R,{style:O.label,children:e}),h(R,{style:[O.value,r?{color:r}:null],children:g})]})}function ro({title:e}){return h(F,{style:Ne.container,children:h(R,{style:Ne.title,numberOfLines:1,children:e})})}function no({info:e,rect:n}){return W(F,{style:O.content,children:[h(R,{style:O.sectionTitle,children:"Identifiers"}),h(N,{label:"testID",value:e.testID,color:"#10b981"}),h(N,{label:"accessibilityLabel",value:e.accessibilityLabel,color:"#ec4899"}),h(N,{label:"nativeID",value:e.nativeID,color:"#f59e0b"}),h(N,{label:"key",value:e.fiberKey}),h(R,{style:O.sectionTitle,children:"Component"}),h(N,{label:"Component Name",value:e.componentName,color:"#a855f7"}),h(N,{label:"Parent Component",value:e.parentComponentName}),h(N,{label:"Display Name",value:e.displayName}),h(N,{label:"Native View Type",value:e.viewType}),h(N,{label:"Fiber Tag",value:e.fiberTag}),h(R,{style:O.sectionTitle,children:"Position & Size"}),h(N,{label:"X",value:Math.round(n.x)}),h(N,{label:"Y",value:Math.round(n.y)}),h(N,{label:"Width",value:Math.round(n.width)}),h(N,{label:"Height",value:Math.round(n.height)}),h(N,{label:"Depth",value:n.depth}),(e.accessibilityRole||e.accessibilityHint||e.accessibilityState)&&W(Ve,{children:[h(R,{style:O.sectionTitle,children:"Accessibility"}),h(N,{label:"Role",value:e.accessibilityRole}),h(N,{label:"Hint",value:e.accessibilityHint}),e.accessibilityState&&Z?h(Z,{title:"",data:e.accessibilityState,showTypeFilter:true,rawMode:true,initialExpanded:true}):h(N,{label:"State",value:e.accessibilityState})]}),e.styleInfo&&W(Ve,{children:[h(R,{style:O.sectionTitle,children:"Styles"}),Z?h(Z,{title:"",data:e.styleInfo,showTypeFilter:true,rawMode:true,initialExpanded:true}):h(F,{style:O.codeBlock,children:h(R,{style:O.codeText,children:JSON.stringify(e.styleInfo,null,2)})})]})]})}function io(){let[e,n]=X("off"),[r,g]=X([]),[p,S]=X(null),[C,u]=X(false),s=we.useRef(false),o=oo()?.()?.isDevToolsActive??false,a=Te(c=>{S(c),u(true)},[]),l=Te(()=>{u(false),S(null)},[]),b=e!=="off"&&!o,d=e==="labels"&&!o;return xe(()=>Xt.subscribe(c=>{n(c)}),[]),xe(()=>{if(!b){g([]);return}let c=true,y,v=async()=>{if(!(!c||s.current)){s.current=true;try{let x=Qt();if(x.length===0){s.current=false;return}let T=await Zt(x);if(c){let E=d?to(T):T;g(E)}}catch(x){console.error("[DebugBorders] Error updating measurements:",x)}finally{s.current=false}}},w=setTimeout(()=>{v()},500);return y=setInterval(v,2e3),()=>{c=false,clearTimeout(w),clearInterval(y),s.current=false}},[b,d,r.length]),b?W(F,{style:ee.overlay,pointerEvents:"box-none",dataSet:{debugOverlay:"true"},nativeID:"debug-borders-overlay",children:[r.map((c,y)=>{let v=c.componentInfo,w=v&&(v.testID||v.accessibilityLabel);if(d&&!w)return null;let x=d&&v?v.primaryColor:eo(c.depth);return W(we.Fragment,{children:[h(F,{pointerEvents:"none",style:[ee.border,{left:c.x,top:c.y,width:c.width,height:c.height,borderColor:x}]}),d&&w&&h(Q,{activeOpacity:.7,onPress:()=>a(c),style:[ee.labelContainer,{left:c.x,top:c.y-10-(c.labelOffsetY||0),backgroundColor:v.primaryColor}],children:h(R,{style:ee.labelText,numberOfLines:1,children:v.primaryLabel})})]},`border-${y}`)}),Ie&&p?.componentInfo&&h(Ie,{visible:C,onClose:l,initialMode:"bottomSheet",header:{customContent:h(ro,{title:p.componentInfo.primaryLabel})},persistenceKey:Jt,enablePersistence:false,children:h(no,{info:p.componentInfo,rect:p})})]}):null}var ee=U.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:9e3,elevation:9e3},border:{position:"absolute",borderWidth:1,borderStyle:"solid"},labelContainer:{position:"absolute",paddingHorizontal:4,paddingVertical:1,borderRadius:2},labelText:{fontSize:8,fontWeight:"700",fontFamily:$,color:"#ffffff"}}),Ne=U.create({container:{paddingHorizontal:16,paddingVertical:8,alignItems:"center"},title:{fontSize:16,fontWeight:"600",color:"#ffffff",fontFamily:$}}),O=U.create({content:{padding:16},sectionTitle:{fontSize:12,fontWeight:"700",color:"#6b7280",marginTop:16,marginBottom:8,textTransform:"uppercase",letterSpacing:1},row:{flexDirection:"row",paddingVertical:8,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},label:{fontSize:13,color:"#9ca3af",width:140,fontFamily:$},value:{fontSize:13,color:"#ffffff",flex:1,fontFamily:$},codeBlock:{backgroundColor:"rgba(0, 0, 0, 0.3)",padding:12,borderRadius:8,marginTop:4},codeText:{fontSize:11,color:"#e5e7eb",fontFamily:$}});import{jsx as Le}from"react/jsx-runtime";var j=K(),ao={off:"#6b7280",borders:"#10b981",labels:"#06b6d4"};function lo({size:e}){let[n,r]=ve(()=>j.getMode());return Se(()=>j.subscribe(g=>{r(g)}),[]),Le(Ce,{size:e,color:ao[n]})}function Be(){return null}var so={id:"debug-borders",name:"BORDERS",description:"Visual layout debugger - tap to cycle modes",slot:"row",icon:lo,component:Be,props:{},launchMode:"toggle-only",onPress:()=>{j.cycle()}};function co(e){let n={off:e?.offColor||"#6b7280",borders:e?.bordersColor||"#10b981",labels:e?.labelsColor||"#06b6d4"},r=({size:g})=>{let[p,S]=ve(()=>j.getMode());return Se(()=>j.subscribe(C=>{S(C)}),[]),Le(Ce,{size:g,color:n[p]})};return{id:e?.id||"debug-borders",name:e?.name||"BORDERS",description:e?.description||"Visual layout debugger - tap to cycle modes",slot:"row",icon:r,component:Be,props:{},launchMode:"toggle-only",onPress:()=>{j.cycle()}}}B();var te=K(),uo={version:1,getSnapshot:()=>({mode:te.getMode()}),subscribe:e=>te.subscribe(e),actions:{cycleMode:()=>{te.cycle()},setMode:e=>{te.setMode(e.mode)}}};B();B();import{useEffect as De,useState as Ee}from"react";import{night as I,Layers as fo,StatusBadge as po,StatusIndicator as bo}from"@buoy-gg/shared-ui/web";import{jsx as D,jsxs as q}from"react/jsx-runtime";var ie=K();function go({visible:e,onClose:n}){let[r,g]=Ee(false),[p,S]=Ee(0);De(()=>{let u=ie.subscribe(g);return g(ie.isEnabled()),u},[]),De(()=>{if(!r){S(0);return}let u=()=>{try{let{getAllHostComponentInstances:o}=J(),a=o();S(a.length)}catch(o){console.error("[DebugBorders] Error getting component count:",o)}};setTimeout(u,600);let s=setInterval(u,2e3);return()=>clearInterval(s)},[r]);let C=()=>{ie.toggle()};return e?D(F,{style:V.container,children:q(F,{style:V.content,children:[D(R,{style:V.title,children:"Debug Borders"}),D(R,{style:V.description,children:"Visualize component layout structure with colored borders"}),q(F,{style:V.statusRow,children:[D(R,{style:V.statusLabel,children:"Status:"}),D(po,{status:r?"active":"inactive"})]}),r&&p>0&&q(F,{style:V.statsRow,children:[D(R,{style:V.statsLabel,children:"Components Tracked:"}),D(R,{style:V.statsValue,children:p})]}),D(F,{style:V.toggleContainer,children:q(Q,{style:[V.button,r&&V.buttonActive],onPress:C,accessibilityRole:"button",accessibilityLabel:`Debug borders ${r?"enabled":"disabled"}`,accessibilityHint:"Tap to toggle debug borders",children:[D(fo,{size:40,color:r?I.color.accent:I.color.textSecondary}),D(R,{style:[V.buttonText,r&&V.buttonTextActive],children:r?"Disable Borders":"Enable Borders"})]})}),q(F,{style:V.infoBox,children:[D(bo,{status:r?"success":"info",size:"small"}),D(R,{style:V.infoText,children:r?"Borders update every 2 seconds. Tap button to disable.":"Tap button to show colored borders around all components."})]}),D(Q,{style:V.closeButton,onPress:n,children:D(R,{style:V.closeButtonText,children:"Close"})})]})}):null}var V=U.create({container:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0, 0, 0, 0.5)"},content:{backgroundColor:I.color.surface,borderWidth:1,borderColor:I.color.border,borderRadius:16,padding:32,width:"85%",maxWidth:420,alignItems:"center"},title:{fontSize:24,fontWeight:"700",color:I.color.text,marginBottom:8},description:{fontSize:14,color:I.color.textSecondary,textAlign:"center",marginBottom:24},statusRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statusLabel:{fontSize:14,color:I.color.textSecondary,fontWeight:"600"},statsRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statsLabel:{fontSize:14,color:I.color.textSecondary,fontWeight:"600"},statsValue:{fontSize:16,color:I.color.text,fontWeight:"700"},toggleContainer:{alignItems:"center",justifyContent:"center",marginBottom:24},button:{alignItems:"center",justifyContent:"center",padding:24,borderRadius:16,backgroundColor:I.color.surfaceElevated,borderWidth:2,borderColor:I.color.border,minWidth:200},buttonActive:{borderColor:I.color.accentBorderStrong,backgroundColor:I.color.accentSoft},buttonText:{marginTop:12,fontSize:16,fontWeight:"600",color:I.color.textSecondary},buttonTextActive:{color:I.color.accent},infoBox:{flexDirection:"row",alignItems:"flex-start",backgroundColor:I.color.surfaceElevated,padding:12,borderRadius:8,marginBottom:24,gap:8},infoText:{flex:1,fontSize:12,color:I.color.textSecondary,lineHeight:16},closeButton:{paddingVertical:12,paddingHorizontal:32,backgroundColor:I.color.accent,borderRadius:8},closeButtonText:{color:I.color.onAccent,fontSize:16,fontWeight:"600"}});var mo=K(),yo=J(),ho=ye(),vo=he();export{mo as DebugBordersManager,go as DebugBordersModal,io as DebugBordersStandaloneOverlay,vo as colorGeneration,ho as componentMeasurement,co as createDebugBordersTool,uo as debugBordersSyncAdapter,so as debugBordersToolPreset,yo as fiberTreeTraversal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/debug-borders",
-  "version": "7.0.40",
+  "version": "7.0.42",
   "description": "Layout debugging borders for React Native — depth-colored, touch-through, tap any label to inspect testIDs & styles. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -10,35 +10,45 @@
   "exports": {
     ".": {
       "react-native": "./lib/module/index.js",
+      "browser": {
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/web/index.mjs"
+      },
       "import": {
-        "default": "./lib/module/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
       },
       "require": {
-        "default": "./lib/commonjs/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/commonjs/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./web": {
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/web/index.mjs"
+    }
   },
   "files": [
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.40",
-    "@buoy-gg/core": "^7.0.40"
+    "@buoy-gg/shared-ui": "^7.0.42",
+    "@buoy-gg/core": "^7.0.42"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/license": "7.0.40"
+    "@buoy-gg/license": "7.0.42",
+    "react-native-web": "^0.21.0",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "^7.0.40"
+    "@buoy-gg/license": "^7.0.42"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -88,10 +98,22 @@
     "borders",
     "ui-debugging"
   ],
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "scripts": {
-    "build": "bob build",
+    "build": "bob build && pnpm run build:web",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf lib",
-    "test": "pnpm run typecheck"
+    "test": "pnpm run typecheck",
+    "build:web": "node ../../scripts/build-web.mjs debug-borders"
   }
 }

package/lib/typescript/debug-borders/components/DebugBordersModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DebugBordersModal.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/components/DebugBordersModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,sBAAsB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4BAiGzH"}

package/lib/typescript/debug-borders/components/DebugBordersStandaloneOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DebugBordersStandaloneOverlay.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/components/DebugBordersStandaloneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAiOhE,wBAAgB,6BAA6B,6BAsL5C"}

package/lib/typescript/debug-borders/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/debug-borders/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAI3F,eAAO,MAAM,mBAAmB,KAAyC,CAAC;AAC1E,eAAO,MAAM,kBAAkB,KAAwC,CAAC;AACxE,eAAO,MAAM,oBAAoB,KAA0C,CAAC;AAC5E,eAAO,MAAM,eAAe,KAAqC,CAAC"}

package/lib/typescript/debug-borders/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/debug-borders/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,yCAAyC;IACzC,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,wBAAwB;IACxB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,GAAG,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf"}

package/lib/typescript/debug-borders/utils/ViewTypeMapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewTypeMapper.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/utils/ViewTypeMapper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6LhD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAOtE;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,EAAE,CAEhD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAE/C;;;;;;;;;AAED,wBAOE"}

package/lib/typescript/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,cAAc,iBAAiB,CAAC"}

package/lib/typescript/preset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmBnD;;;;;;;;;;GAUG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,qBAW9C;AAED;;GAEG;AACH,iBAAS,cAAc,SAEtB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;CAalC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE;IAC/C,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;;;;;qBAcsC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;EA4BtD;AAED;;;GAGG;AACH,OAAO,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC"}

package/lib/typescript/sync/debugBordersSyncAdapter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"debugBordersSyncAdapter.d.ts","sourceRoot":"","sources":["../../../src/sync/debugBordersSyncAdapter.ts"],"names":[],"mappings":"AAQA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB;;;;;0BAGZ,MAAM,IAAI,KACa,MAAM,IAAI;;QAErD,mEAAmE;;2BAIhD,OAAO;;CAI7B,CAAC"}