@buoy-gg/image-overlay 7.0.41 → 7.0.42

package/lib/module/imageOverlay/components/OverlayControls.js

@@ -1,249 +1 @@
-"use strict";
-
-/**
- * Controls for adjusting the overlay: opacity, scale, offset.
- * Each control has a slider track plus -/+ stepper buttons.
- */
-
-import { useRef, useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, PanResponder } from "react-native";
-import { night, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SliderStepper({
-  label,
-  value,
-  min,
-  max,
-  step,
-  displayValue,
-  onChange
-}) {
-  const trackWidth = useRef(0);
-  const trackX = useRef(0);
-  const clamp = useCallback(v => Math.max(min, Math.min(max, v)), [min, max]);
-  const fraction = max > min ? (value - min) / (max - min) : 0;
-
-  // Keep current values in refs so PanResponder always uses latest props
-  const onChangeRef = useRef(onChange);
-  const clampRef = useRef(clamp);
-  const minRef = useRef(min);
-  const maxRef = useRef(max);
-  onChangeRef.current = onChange;
-  clampRef.current = clamp;
-  minRef.current = min;
-  maxRef.current = max;
-  const handleSliderEvent = useCallback(pageX => {
-    const x = pageX - trackX.current;
-    const frac = Math.max(0, Math.min(1, x / trackWidth.current));
-    const val = minRef.current + frac * (maxRef.current - minRef.current);
-    onChangeRef.current(clampRef.current(val));
-  }, []);
-  const panResponder = useRef(PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onPanResponderTerminationRequest: () => false,
-    onPanResponderGrant: evt => {
-      handleSliderEvent(evt.nativeEvent.pageX);
-    },
-    onPanResponderMove: evt => {
-      handleSliderEvent(evt.nativeEvent.pageX);
-    }
-  })).current;
-  const onTrackLayout = useCallback(e => {
-    trackWidth.current = e.nativeEvent.layout.width;
-    // We need pageX, measure the track view
-  }, []);
-  const trackRef = useRef(null);
-  const measureTrack = useCallback(() => {
-    trackRef.current?.measure?.((_x, _y, _w, _h, pageX) => {
-      trackX.current = pageX;
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.controlRow,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.label,
-      children: label
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.controlRight,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.stepperButton,
-        onPress: () => onChange(clamp(value - step)),
-        activeOpacity: 0.6,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.stepperButtonText,
-          children: "-"
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.sliderHitArea,
-        ...panResponder.panHandlers,
-        children: /*#__PURE__*/_jsxs(View, {
-          ref: trackRef,
-          style: styles.sliderTrack,
-          onLayout: e => {
-            onTrackLayout(e);
-            measureTrack();
-          },
-          pointerEvents: "none",
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.sliderFill, {
-              width: `${fraction * 100}%`
-            }]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.sliderThumb, {
-              left: `${fraction * 100}%`
-            }]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.stepperButton,
-        onPress: () => onChange(clamp(value + step)),
-        activeOpacity: 0.6,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.stepperButtonText,
-          children: "+"
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.valueText,
-        children: displayValue
-      })]
-    })]
-  });
-}
-export function OverlayControls({
-  opacity,
-  scale,
-  offsetX,
-  offsetY,
-  onOpacityChange,
-  onScaleChange,
-  onOffsetChange,
-  opacityOnly
-}) {
-  if (opacityOnly) {
-    return /*#__PURE__*/_jsx(SliderStepper, {
-      label: "Opacity",
-      value: opacity,
-      min: 0,
-      max: 1,
-      step: 0.05,
-      displayValue: `${Math.round(opacity * 100)}%`,
-      onChange: onOpacityChange
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(SliderStepper, {
-      label: "Opacity",
-      value: opacity,
-      min: 0,
-      max: 1,
-      step: 0.05,
-      displayValue: `${Math.round(opacity * 100)}%`,
-      onChange: onOpacityChange
-    }), /*#__PURE__*/_jsx(SliderStepper, {
-      label: "Scale",
-      value: scale,
-      min: 0.05,
-      max: 3,
-      step: 0.05,
-      displayValue: `${Math.round(scale * 100)}%`,
-      onChange: onScaleChange
-    }), /*#__PURE__*/_jsx(SliderStepper, {
-      label: "Offset X",
-      value: offsetX,
-      min: -200,
-      max: 200,
-      step: 2,
-      displayValue: `${Math.round(offsetX)}px`,
-      onChange: v => onOffsetChange(Math.round(v), offsetY)
-    }), /*#__PURE__*/_jsx(SliderStepper, {
-      label: "Offset Y",
-      value: offsetY,
-      min: -200,
-      max: 200,
-      step: 2,
-      displayValue: `${Math.round(offsetY)}px`,
-      onChange: v => onOffsetChange(offsetX, Math.round(v))
-    })]
-  });
-}
-const THUMB_SIZE = 18;
-const styles = StyleSheet.create({
-  container: {
-    gap: 8
-  },
-  controlRow: {
-    paddingHorizontal: 12,
-    gap: 4
-  },
-  label: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  controlRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  stepperButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  stepperButtonText: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: night.color.text,
-    lineHeight: 18
-  },
-  sliderHitArea: {
-    flex: 1,
-    paddingVertical: 20,
-    paddingHorizontal: 40,
-    marginVertical: -20,
-    marginHorizontal: -40
-  },
-  sliderTrack: {
-    height: 28,
-    justifyContent: "center",
-    borderRadius: 6,
-    backgroundColor: night.color.bg,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  sliderFill: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: night.color.accentFill,
-    borderRadius: 5
-  },
-  sliderThumb: {
-    position: "absolute",
-    width: 4,
-    top: 4,
-    bottom: 4,
-    marginLeft: -2,
-    borderRadius: 2,
-    backgroundColor: night.color.accent
-  },
-  valueText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.text,
-    width: 45,
-    textAlign: "right",
-    fontFamily: monoFont
-  }
-});
+"use strict";import{useRef as a,useCallback as m}from"react";import{View as c,Text as y,TouchableOpacity as V,StyleSheet as j,PanResponder as z}from"react-native";import{night as l,monoFont as O}from"@buoy-gg/shared-ui";import{jsx as e,jsxs as f}from"react/jsx-runtime";function h({label:s,value:d,min:o,max:n,step:p,displayValue:x,onChange:i}){const g=a(0);const u=a(0);const b=m(r=>Math.max(o,Math.min(n,r)),[o,n]);const v=n>o?(d-o)/(n-o):0;const T=a(i);const S=a(b);const R=a(o);const M=a(n);T.current=i;S.current=b;R.current=o;M.current=n;const k=m(r=>{const C=r-u.current;const H=Math.max(0,Math.min(1,C/g.current));const P=R.current+H*(M.current-R.current);T.current(S.current(P))},[]);const B=a(z.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:r=>{k(r.nativeEvent.pageX)},onPanResponderMove:r=>{k(r.nativeEvent.pageX)}})).current;const E=m(r=>{g.current=r.nativeEvent.layout.width},[]);const w=a(null);const _=m(()=>{w.current?.measure?.((r,C,H,P,$)=>{u.current=$})},[]);return f(c,{style:t.controlRow,children:[e(y,{style:t.label,children:s}),f(c,{style:t.controlRight,children:[e(V,{style:t.stepperButton,onPress:()=>i(b(d-p)),activeOpacity:.6,children:e(y,{style:t.stepperButtonText,children:"-"})}),e(c,{style:t.sliderHitArea,...B.panHandlers,children:f(c,{ref:w,style:t.sliderTrack,onLayout:r=>{E(r);_()},pointerEvents:"none",children:[e(c,{style:[t.sliderFill,{width:`${v*100}%`}]}),e(c,{style:[t.sliderThumb,{left:`${v*100}%`}]})]})}),e(V,{style:t.stepperButton,onPress:()=>i(b(d+p)),activeOpacity:.6,children:e(y,{style:t.stepperButtonText,children:"+"})}),e(y,{style:t.valueText,children:x})]})]})}export function OverlayControls({opacity:s,scale:d,offsetX:o,offsetY:n,onOpacityChange:p,onScaleChange:x,onOffsetChange:i,opacityOnly:g}){if(g){return e(h,{label:"Opacity",value:s,min:0,max:1,step:.05,displayValue:`${Math.round(s*100)}%`,onChange:p})}return f(c,{style:t.container,children:[e(h,{label:"Opacity",value:s,min:0,max:1,step:.05,displayValue:`${Math.round(s*100)}%`,onChange:p}),e(h,{label:"Scale",value:d,min:.05,max:3,step:.05,displayValue:`${Math.round(d*100)}%`,onChange:x}),e(h,{label:"Offset X",value:o,min:-200,max:200,step:2,displayValue:`${Math.round(o)}px`,onChange:u=>i(Math.round(u),n)}),e(h,{label:"Offset Y",value:n,min:-200,max:200,step:2,displayValue:`${Math.round(n)}px`,onChange:u=>i(o,Math.round(u))})]})}const L=18;const t=j.create({container:{gap:8},controlRow:{paddingHorizontal:12,gap:4},label:{fontSize:11,fontWeight:"600",color:l.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},controlRight:{flexDirection:"row",alignItems:"center",gap:6},stepperButton:{width:28,height:28,borderRadius:6,backgroundColor:l.color.surfaceElevated,borderWidth:1,borderColor:l.color.border,justifyContent:"center",alignItems:"center"},stepperButtonText:{fontSize:16,fontWeight:"700",color:l.color.text,lineHeight:18},sliderHitArea:{flex:1,paddingVertical:20,paddingHorizontal:40,marginVertical:-20,marginHorizontal:-40},sliderTrack:{height:28,justifyContent:"center",borderRadius:6,backgroundColor:l.color.bg,borderWidth:1,borderColor:l.color.border,overflow:"hidden"},sliderFill:{position:"absolute",left:0,top:0,bottom:0,backgroundColor:l.color.accentFill,borderRadius:5},sliderThumb:{position:"absolute",width:4,top:4,bottom:4,marginLeft:-2,borderRadius:2,backgroundColor:l.color.accent},valueText:{fontSize:11,fontWeight:"600",color:l.color.text,width:45,textAlign:"right",fontFamily:O}});

package/lib/module/imageOverlay/components/TargetList.js

@@ -1,177 +1 @@
-"use strict";
-
-/**
- * List of discovered image-overlay target components.
- * Styled to match RenderListItem from highlight-updates.
- */
-
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import { ChevronRight, night, Hash, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function TargetRow({
-  target,
-  onSelect
-}) {
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: styles.card,
-    onPress: onSelect,
-    activeOpacity: 0.7,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.colorIndicator
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.topRow,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.label,
-          numberOfLines: 1,
-          children: target.label
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.bottomRow,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.badgeRow,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.testIdBadge,
-            children: [/*#__PURE__*/_jsx(Hash, {
-              size: 8,
-              color: night.color.accent
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.testIdBadgeText,
-              children: "testID"
-            })]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.testIdValue,
-            numberOfLines: 1,
-            children: target.testID
-          })]
-        }), target.componentName && /*#__PURE__*/_jsx(Text, {
-          style: styles.componentName,
-          numberOfLines: 1,
-          children: target.componentName
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(ChevronRight, {
-      size: 16,
-      color: night.color.textTertiary
-    })]
-  });
-}
-export function TargetList({
-  targets,
-  onSelect
-}) {
-  if (targets.length === 0) {
-    return /*#__PURE__*/_jsx(ToolEmptyState, {
-      testID: "buoy-image-overlay-empty"
-      // scanning = the screen was walked and nothing was tagged.
-      ,
-      otto: "scanning",
-      title: "No targets found",
-      message: 'Tag components with\ntestID="image-target:YourLabel"'
-    });
-  }
-  return /*#__PURE__*/_jsx(ScrollView, {
-    style: styles.list,
-    contentContainerStyle: styles.listContent,
-    children: targets.map(target => /*#__PURE__*/_jsx(TargetRow, {
-      target: target,
-      onSelect: () => onSelect(target)
-    }, target.testID))
-  });
-}
-const styles = StyleSheet.create({
-  list: {
-    flex: 1
-  },
-  listContent: {
-    paddingTop: 8,
-    paddingBottom: 20
-  },
-  card: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginHorizontal: 12,
-    marginBottom: 6,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  colorIndicator: {
-    width: 4,
-    height: 36,
-    borderRadius: 2,
-    marginRight: 10,
-    backgroundColor: night.color.accent
-  },
-  content: {
-    flex: 1,
-    marginRight: 8
-  },
-  topRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 4
-  },
-  label: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.text,
-    flex: 1
-  },
-  bottomRow: {
-    gap: 2
-  },
-  badgeRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  testIdBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 2,
-    paddingHorizontal: 5,
-    borderRadius: 4,
-    backgroundColor: night.color.accentSoft,
-    gap: 3
-  },
-  testIdBadgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: night.color.accent
-  },
-  testIdValue: {
-    fontSize: 11,
-    color: night.color.text,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  componentName: {
-    fontSize: 10,
-    color: "#a855f7",
-    fontFamily: monoFont,
-    marginTop: 1
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40,
-    paddingHorizontal: 32
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginBottom: 6
-  },
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18,
-    fontFamily: monoFont
-  }
-});
+"use strict";import{View as r,Text as l,TouchableOpacity as d,StyleSheet as m,ScrollView as g}from"react-native";import{ChevronRight as f,night as e,Hash as p,ToolEmptyState as h,monoFont as s}from"@buoy-gg/shared-ui";import{jsx as o,jsxs as i}from"react/jsx-runtime";function y({target:n,onSelect:a}){return i(d,{style:t.card,onPress:a,activeOpacity:.7,children:[o(r,{style:t.colorIndicator}),i(r,{style:t.content,children:[o(r,{style:t.topRow,children:o(l,{style:t.label,numberOfLines:1,children:n.label})}),i(r,{style:t.bottomRow,children:[i(r,{style:t.badgeRow,children:[i(r,{style:t.testIdBadge,children:[o(p,{size:8,color:e.color.accent}),o(l,{style:t.testIdBadgeText,children:"testID"})]}),o(l,{style:t.testIdValue,numberOfLines:1,children:n.testID})]}),n.componentName&&o(l,{style:t.componentName,numberOfLines:1,children:n.componentName})]})]}),o(f,{size:16,color:e.color.textTertiary})]})}export function TargetList({targets:n,onSelect:a}){if(n.length===0){return o(h,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:'Tag components with\ntestID="image-target:YourLabel"'})}return o(g,{style:t.list,contentContainerStyle:t.listContent,children:n.map(c=>o(y,{target:c,onSelect:()=>a(c)},c.testID))})}const t=m.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:e.color.surface,borderRadius:8,borderWidth:1,borderColor:e.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:e.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:e.color.text,flex:1},bottomRow:{gap:2},badgeRow:{flexDirection:"row",alignItems:"center",gap:4},testIdBadge:{flexDirection:"row",alignItems:"center",paddingVertical:2,paddingHorizontal:5,borderRadius:4,backgroundColor:e.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:e.color.accent},testIdValue:{fontSize:11,color:e.color.text,fontFamily:s,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:s,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:e.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:e.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:s}});

package/lib/module/imageOverlay/types/index.js

@@ -1 +1 @@
-"use strict";
+"use strict";