@buoy-gg/image-overlay 7.0.41 → 7.0.43

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

@@ -1,875 +1 @@
-"use strict";
-
-import { loadImageClipboard, loadTextClipboard } from "../utils/imageClipboard";
-import { useState, useEffect, useCallback } from "react";
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import { JsModal, ModalHeader, macOSColors, night, Trash2, SquareDashed, Image, PowerToggleButton, windowDragProps, ToggleRow, monoFont } from "@buoy-gg/shared-ui";
-import { ImageOverlayController } from "../utils/ImageOverlayController";
-import { scanForImageTargets } from "../utils/fiberScanner";
-import { TargetList } from "./TargetList";
-import { OverlayControls } from "./OverlayControls";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Module-level so it survives remounts from JsModal
-let persistedImageUrl = "";
-export function ImageOverlayModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  initialModalState,
-  minimizeTargetPosition,
-  inline = false,
-  initialView
-}) {
-  const [view, setView] = useState(() => {
-    if (initialView) return initialView;
-    const s = ImageOverlayController.getState();
-    if (s.mode === "free") return "free";
-    if (s.targetRect) return "controls";
-    return "idle";
-  });
-  // Opening straight onto the target list has to arrive scanned — the list is
-  // otherwise only ever filled by the button that navigates to it.
-  const [targets, setTargets] = useState(() => initialView === "targets" ? scanForImageTargets() : []);
-  const [state, setState] = useState(() => ImageOverlayController.getState());
-  const [imageUrl, setImageUrl] = useState(persistedImageUrl);
-  const [autoTrack, setAutoTrack] = useState(() => ImageOverlayController.isAutoTracking());
-  useEffect(() => {
-    persistedImageUrl = imageUrl;
-  }, [imageUrl]);
-  useEffect(() => {
-    return ImageOverlayController.subscribe(setState);
-  }, []);
-
-  // Sync auto-track toggle with controller
-  useEffect(() => {
-    ImageOverlayController.setAutoTrack(autoTrack);
-    return () => {
-      // Don't stop tracking on unmount — let it persist while modal is minimized
-    };
-  }, [autoTrack]);
-  const handleScan = useCallback(() => {
-    const found = scanForImageTargets();
-    setTargets(found);
-    setView("targets");
-  }, []);
-  const handleSelectTarget = useCallback(async target => {
-    await ImageOverlayController.setTarget(target.instance, target.label, target.fiber);
-    if (persistedImageUrl.trim()) {
-      await ImageOverlayController.setImageUri(persistedImageUrl.trim());
-      ImageOverlayController.setEnabled(true);
-    }
-    setView("controls");
-  }, []);
-  const handleLoadImage = useCallback(async () => {
-    const url = persistedImageUrl.trim();
-    if (!url) return;
-    if (view === "free") {
-      await ImageOverlayController.startFreeMode(url);
-    } else {
-      await ImageOverlayController.setImageUri(url);
-      ImageOverlayController.setEnabled(true);
-    }
-  }, [view]);
-  const handlePasteImage = useCallback(async () => {
-    // Try expo-clipboard (supports images)
-    let expoClipboard = null;
-    try {
-      expoClipboard = loadImageClipboard();
-    } catch {/* not installed */}
-
-    // Only fall back to @react-native-clipboard/clipboard when expo-clipboard
-    // isn't present. Requiring it runs TurboModuleRegistry.getEnforcing('RNCClipboard'),
-    // which crashes in Expo Go where that native module isn't in the binary.
-    let rnClipboard = null;
-    if (!expoClipboard) {
-      try {
-        const mod = loadTextClipboard();
-        rnClipboard = mod.default || mod;
-      } catch {/* not installed */}
-    }
-
-    // No clipboard library at all
-    if (!expoClipboard && !rnClipboard) {
-      Alert.alert("Clipboard not available", "Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");
-      return;
-    }
-    try {
-      // 1. Try image paste (expo-clipboard only)
-      if (expoClipboard && typeof expoClipboard.hasImageAsync === "function") {
-        const hasImage = await expoClipboard.hasImageAsync();
-        if (hasImage) {
-          const image = await expoClipboard.getImageAsync({
-            format: "png"
-          });
-          if (image?.data) {
-            if (view === "free") {
-              await ImageOverlayController.startFreeMode(image.data);
-            } else {
-              await ImageOverlayController.setImageUri(image.data);
-              ImageOverlayController.setEnabled(true);
-            }
-            return;
-          }
-        }
-      }
-
-      // 2. Try text paste as URL (either library)
-      let text = null;
-      if (expoClipboard && typeof expoClipboard.getStringAsync === "function") {
-        text = await expoClipboard.getStringAsync();
-      } else if (rnClipboard && typeof rnClipboard.getString === "function") {
-        text = await rnClipboard.getString();
-      }
-      if (text && (text.startsWith("http") || text.startsWith("data:"))) {
-        setImageUrl(text);
-        persistedImageUrl = text;
-        return;
-      }
-
-      // 3. Nothing useful found
-      if (!expoClipboard) {
-        // RN clipboard can't read images — tell them why
-        Alert.alert("Image paste requires expo-clipboard", "Your project uses @react-native-clipboard/clipboard which only supports text. Install expo-clipboard to paste images directly, or paste an image URL instead.");
-      } else {
-        Alert.alert("No image detected", "Try saving your design image, opening it in Photos or Preview, and copying it from there.");
-      }
-    } catch {
-      Alert.alert("Paste failed", "Something went wrong reading the clipboard. Try copying the image again.");
-    }
-  }, [view]);
-  const handleReset = useCallback(() => {
-    ImageOverlayController.reset();
-    persistedImageUrl = "";
-    setView("idle");
-    setImageUrl("");
-    setTargets([]);
-  }, []);
-  const handleBack = useCallback(() => {
-    if (view === "controls") {
-      const found = scanForImageTargets();
-      setTargets(found);
-      setView("targets");
-    } else if (view === "targets" || view === "free") {
-      ImageOverlayController.reset();
-      setView("idle");
-    } else {
-      setView("idle");
-    }
-  }, [view]);
-  const headerTitle = (() => {
-    switch (view) {
-      case "targets":
-        return `Targets (${targets.length})`;
-      case "controls":
-        return state.targetLabel || "Component Match";
-      case "free":
-        return "Free Placement";
-      default:
-        return "Image Overlay";
-    }
-  })();
-  const headerContent = {
-    showToggleButton: false,
-    customContent: /*#__PURE__*/_jsxs(ModalHeader, {
-      children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-        onBack: view !== "idle" ? handleBack : onBack
-      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-        title: headerTitle
-      }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-        children: [view === "targets" && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.headerTextButton,
-          onPress: handleScan,
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.headerTextButtonLabel,
-            children: "Scan"
-          })
-        }), (view === "controls" || view === "free") && state.imageUri && /*#__PURE__*/_jsx(PowerToggleButton, {
-          isEnabled: state.enabled,
-          onToggle: () => ImageOverlayController.toggle(),
-          accessibilityLabel: "Toggle image overlay"
-        }), view !== "idle" && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.headerActionButton,
-          onPress: handleReset,
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/_jsx(Trash2, {
-            size: 14,
-            color: night.color.textSecondary
-          })
-        })]
-      })]
-    })
-  };
-  const body = /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [view === "idle" && /*#__PURE__*/_jsxs(View, {
-      style: styles.homeContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.homeSubtitle,
-        children: "Choose a mode"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.modeGrid,
-        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: styles.modePanel,
-          onPress: handleScan,
-          activeOpacity: 0.7,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.modeIconCircle, {
-              backgroundColor: night.color.accentSoft
-            }],
-            children: /*#__PURE__*/_jsx(SquareDashed, {
-              size: 24,
-              color: night.color.accent
-            })
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.modePanelTitle,
-            children: ["Component", "\n", "Match"]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.modePanelDesc,
-            children: "Overlay on a tagged component"
-          })]
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: styles.modePanel,
-          onPress: () => setView("free"),
-          activeOpacity: 0.7,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.modeIconCircle, {
-              backgroundColor: night.color.accentSoft
-            }],
-            children: /*#__PURE__*/_jsx(Image, {
-              size: 24,
-              color: night.color.accent
-            })
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.modePanelTitle,
-            children: ["Free", "\n", "Placement"]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.modePanelDesc,
-            children: "Drag and resize anywhere"
-          })]
-        })]
-      })]
-    }), view === "targets" && /*#__PURE__*/_jsx(TargetList, {
-      targets: targets,
-      onSelect: handleSelectTarget
-    }), view === "controls" && /*#__PURE__*/_jsxs(View, {
-      style: styles.controlsContainer,
-      children: [state.targetRect && /*#__PURE__*/_jsxs(View, {
-        style: styles.infoCard,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.infoLabel,
-            children: "Component"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.infoValue,
-            children: state.targetLabel
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.infoLabel,
-            children: "Size"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.infoValueMono,
-            children: [Math.round(state.targetRect.width), " x ", Math.round(state.targetRect.height)]
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.infoLabel,
-            children: "Position"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.infoValueMono,
-            children: [Math.round(state.targetRect.x), ", ", Math.round(state.targetRect.y)]
-          })]
-        }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/_jsxs(View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.infoLabel,
-            children: "Image"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.infoValueMono,
-            children: [state.imageWidth, " x ", state.imageHeight]
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.inputSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.sectionLabel,
-          children: "Image"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.pasteButton,
-          onPress: handlePasteImage,
-          activeOpacity: 0.7,
-          accessibilityLabel: "Paste from clipboard",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.pasteButtonText,
-            children: "Paste from Clipboard"
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.urlRow,
-          children: [/*#__PURE__*/_jsx(TextInput, {
-            style: styles.urlInput,
-            value: imageUrl,
-            onChangeText: setImageUrl,
-            placeholder: "or enter URL...",
-            placeholderTextColor: night.color.placeholder,
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "go",
-            onSubmitEditing: handleLoadImage
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
-            onPress: handleLoadImage,
-            disabled: !imageUrl.trim(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.loadButtonText,
-              children: "Load"
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.toggleSection,
-        children: [/*#__PURE__*/_jsx(ToggleRow, {
-          label: "Show Outline",
-          value: state.showOutline,
-          onValueChange: v => ImageOverlayController.setShowOutline(v)
-        }), /*#__PURE__*/_jsx(ToggleRow, {
-          label: "Auto Track",
-          value: autoTrack,
-          onValueChange: setAutoTrack
-        }), state.imageUri && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.toggleLabel,
-              children: "Opacity"
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.blendButtons,
-              children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
-                onPress: () => ImageOverlayController.setOpacity(pct / 100),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/_jsxs(Text, {
-                  style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
-                  children: [pct, "%"]
-                })
-              }, pct))
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.toggleLabel,
-              children: "Flip"
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.blendButtons,
-              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.blendButton, state.invertX && styles.blendButtonActive],
-                onPress: () => ImageOverlayController.toggleInvertX(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
-                  children: "Horizontal"
-                })
-              }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.blendButton, state.invertY && styles.blendButtonActive],
-                onPress: () => ImageOverlayController.toggleInvertY(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
-                  children: "Vertical"
-                })
-              })]
-            })]
-          })]
-        })]
-      }), state.imageUri && /*#__PURE__*/_jsx(OverlayControls, {
-        opacity: state.opacity,
-        scale: state.scale,
-        offsetX: state.offsetX,
-        offsetY: state.offsetY,
-        onOpacityChange: v => ImageOverlayController.setOpacity(v),
-        onScaleChange: v => ImageOverlayController.setScale(v),
-        onOffsetChange: (x, y) => ImageOverlayController.setOffset(x, y)
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.actions,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => ImageOverlayController.resetSettings(),
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionButtonText,
-            children: "Reset Settings"
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => ImageOverlayController.remeasure(),
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionButtonText,
-            children: "Remeasure"
-          })
-        })]
-      })]
-    }), view === "free" && /*#__PURE__*/_jsxs(View, {
-      style: styles.controlsContainer,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.inputSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.sectionLabel,
-          children: "Image"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.pasteButton,
-          onPress: handlePasteImage,
-          activeOpacity: 0.7,
-          accessibilityLabel: "Paste from clipboard",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.pasteButtonText,
-            children: "Paste from Clipboard"
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.urlRow,
-          children: [/*#__PURE__*/_jsx(TextInput, {
-            style: styles.urlInput,
-            value: imageUrl,
-            onChangeText: setImageUrl,
-            placeholder: "or enter URL...",
-            placeholderTextColor: night.color.placeholder,
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "go",
-            onSubmitEditing: handleLoadImage
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
-            onPress: handleLoadImage,
-            disabled: !imageUrl.trim(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.loadButtonText,
-              children: "Load"
-            })
-          })]
-        })]
-      }), state.imageUri && state.mode === "free" && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.infoCard,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.infoRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.infoLabel,
-              children: "Position"
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.infoValueMono,
-              children: [Math.round(state.freeX), ", ", Math.round(state.freeY)]
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.infoRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.infoLabel,
-              children: "Size"
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.infoValueMono,
-              children: [Math.round(state.freeWidth), " x ", Math.round(state.freeHeight)]
-            })]
-          }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.infoLabel,
-              children: "Original"
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.infoValueMono,
-              children: [state.imageWidth, " x ", state.imageHeight]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.inputSection,
-          children: /*#__PURE__*/_jsx(OverlayControls, {
-            opacity: state.opacity,
-            scale: 1,
-            offsetX: 0,
-            offsetY: 0,
-            onOpacityChange: v => ImageOverlayController.setOpacity(v),
-            onScaleChange: () => {},
-            onOffsetChange: () => {},
-            opacityOnly: true
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.toggleSection,
-          children: [/*#__PURE__*/_jsx(ToggleRow, {
-            label: "Lock Position",
-            tone: "warning",
-            value: state.locked,
-            onValueChange: v => ImageOverlayController.setLocked(v)
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.toggleLabel,
-              children: "Opacity"
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.blendButtons,
-              children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
-                onPress: () => ImageOverlayController.setOpacity(pct / 100),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/_jsxs(Text, {
-                  style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
-                  children: [pct, "%"]
-                })
-              }, pct))
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.toggleLabel,
-              children: "Flip"
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.blendButtons,
-              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.blendButton, state.invertX && styles.blendButtonActive],
-                onPress: () => ImageOverlayController.toggleInvertX(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
-                  children: "Horizontal"
-                })
-              }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.blendButton, state.invertY && styles.blendButtonActive],
-                onPress: () => ImageOverlayController.toggleInvertY(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
-                  children: "Vertical"
-                })
-              })]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.actions,
-          children: /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.actionButton,
-            onPress: () => ImageOverlayController.resetSettings(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.actionButtonText,
-              children: "Reset Position"
-            })
-          })
-        })]
-      })]
-    })]
-  });
-
-  // The ONLY difference between the phone and an embedded host is which shell
-  // the header and body go in. Everything above this is shared.
-  if (inline) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.inlineRoot,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.inlineHeader,
-        ...windowDragProps,
-        children: headerContent.customContent
-      }), body]
-    });
-  }
-  return /*#__PURE__*/_jsx(JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    minimizeTargetPosition: minimizeTargetPosition,
-    initialModalState: initialModalState,
-    header: headerContent,
-    initialMode: "bottomSheet",
-    persistenceKey: "buoy-image-overlay-modal",
-    enablePersistence: true,
-    children: body
-  });
-}
-
-/**
- * The same Image Overlay tool as `ImageOverlayModal`, rendered INLINE for hosts
- * that place tools in a panel rather than a bottom sheet (the docs-site live
- * demo). Exists so there is exactly one implementation of the tool's header,
- * mode chooser, target list and controls.
- *
- * `initialView` seeds which screen it opens on — the view is otherwise internal
- * state reachable only by tapping.
- */
-export function ImageOverlayToolView(props = {}) {
-  return /*#__PURE__*/_jsx(ImageOverlayModal, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    backgroundColor: macOSColors.background.base
-  },
-  inlineHeader: {
-    borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  headerTextButton: {
-    height: 32,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerTextButtonLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.accent
-  },
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // Home — mode selection
-  homeContainer: {
-    flex: 1,
-    paddingHorizontal: 12,
-    paddingTop: 16,
-    paddingBottom: 20,
-    gap: 12
-  },
-  homeSubtitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    textAlign: "center"
-  },
-  modeGrid: {
-    flexDirection: "row",
-    gap: 10
-  },
-  modePanel: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 20,
-    paddingHorizontal: 12,
-    backgroundColor: night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    gap: 8
-  },
-  modeIconCircle: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 4
-  },
-  modePanelTitle: {
-    fontSize: 13,
-    fontWeight: "700",
-    color: night.color.text,
-    textAlign: "center",
-    lineHeight: 17
-  },
-  modePanelDesc: {
-    fontSize: 11,
-    color: night.color.textTertiary,
-    textAlign: "center",
-    lineHeight: 15
-  },
-  // Controls
-  controlsContainer: {
-    flex: 1,
-    paddingTop: 8,
-    paddingBottom: 24,
-    gap: 10
-  },
-  infoCard: {
-    marginHorizontal: 12,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  infoRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  },
-  infoLabel: {
-    fontSize: 11,
-    fontWeight: "500",
-    color: night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.3
-  },
-  infoValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  infoValueMono: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  inputSection: {
-    paddingHorizontal: 12,
-    gap: 6
-  },
-  sectionLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  pasteButton: {
-    paddingVertical: 10,
-    borderRadius: 8,
-    backgroundColor: night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: night.color.accentBorderStrong,
-    alignItems: "center"
-  },
-  pasteButtonText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.accent
-  },
-  urlRow: {
-    flexDirection: "row",
-    gap: 8
-  },
-  urlInput: {
-    flex: 1,
-    height: 36,
-    borderRadius: 10,
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    fontSize: 13,
-    color: night.color.text
-  },
-  loadButton: {
-    height: 36,
-    paddingHorizontal: 14,
-    borderRadius: 8,
-    backgroundColor: night.color.accent,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  loadButtonDisabled: {
-    opacity: 0.4
-  },
-  loadButtonText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.onAccent
-  },
-  toggleSection: {
-    paddingHorizontal: 12,
-    gap: 6
-  },
-  toggleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  toggleLabel: {
-    fontSize: 13,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  blendRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 6
-  },
-  blendButtons: {
-    flexDirection: "row",
-    gap: 4
-  },
-  blendButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 6,
-    backgroundColor: "transparent"
-  },
-  blendButtonActive: {
-    backgroundColor: night.color.accentSoft
-  },
-  blendButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.textTertiary
-  },
-  blendButtonTextActive: {
-    color: night.color.accent
-  },
-  actions: {
-    flexDirection: "row",
-    paddingHorizontal: 12,
-    gap: 8,
-    marginTop: 4
-  },
-  actionButton: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  actionButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  }
-});
+"use strict";import{loadImageClipboard as Q,loadTextClipboard as Z}from"../utils/imageClipboard";import{useState as p,useEffect as I,useCallback as f}from"react";import{View as a,Text as i,TextInput as W,TouchableOpacity as s,StyleSheet as ee,Alert as C}from"react-native";import{JsModal as te,ModalHeader as T,macOSColors as H,night as l,Trash2 as oe,SquareDashed as ne,Image as re,PowerToggleButton as le,windowDragProps as ie,ToggleRow as P,monoFont as ae}from"@buoy-gg/shared-ui";import{ImageOverlayController as c}from"../utils/ImageOverlayController";import{scanForImageTargets as O}from"../utils/fiberScanner";import{TargetList as ce}from"./TargetList";import{OverlayControls as V}from"./OverlayControls";import{jsx as t,jsxs as r,Fragment as D}from"react/jsx-runtime";let b="";export function ImageOverlayModal({visible:B,onClose:j,onBack:U,onMinimize:E,enableSharedModalDimensions:de=false,initialModalState:F,minimizeTargetPosition:Y,inline:X=false,initialView:v}){const[d,h]=p(()=>{if(v)return v;const o=c.getState();if(o.mode==="free")return"free";if(o.targetRect)return"controls";return"idle"});const[z,S]=p(()=>v==="targets"?O():[]);const[n,K]=p(()=>c.getState());const[u,m]=p(b);const[w,_]=p(()=>c.isAutoTracking());I(()=>{b=u},[u]);I(()=>{return c.subscribe(K)},[]);I(()=>{c.setAutoTrack(w);return()=>{}},[w]);const L=f(()=>{const o=O();S(o);h("targets")},[]);const q=f(async o=>{await c.setTarget(o.instance,o.label,o.fiber);if(b.trim()){await c.setImageUri(b.trim());c.setEnabled(true)}h("controls")},[]);const x=f(async()=>{const o=b.trim();if(!o)return;if(d==="free"){await c.startFreeMode(o)}else{await c.setImageUri(o);c.setEnabled(true)}},[d]);const A=f(async()=>{let o=null;try{o=Q()}catch{}let y=null;if(!o){try{const g=Z();y=g.default||g}catch{}}if(!o&&!y){C.alert("Clipboard not available","Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");return}try{if(o&&typeof o.hasImageAsync==="function"){const $=await o.hasImageAsync();if($){const R=await o.getImageAsync({format:"png"});if(R?.data){if(d==="free"){await c.startFreeMode(R.data)}else{await c.setImageUri(R.data);c.setEnabled(true)}return}}}let g=null;if(o&&typeof o.getStringAsync==="function"){g=await o.getStringAsync()}else if(y&&typeof y.getString==="function"){g=await y.getString()}if(g&&(g.startsWith("http")||g.startsWith("data:"))){m(g);b=g;return}if(!o){C.alert("Image paste requires expo-clipboard","Your project uses @react-native-clipboard/clipboard which only supports text. Install expo-clipboard to paste images directly, or paste an image URL instead.")}else{C.alert("No image detected","Try saving your design image, opening it in Photos or Preview, and copying it from there.")}}catch{C.alert("Paste failed","Something went wrong reading the clipboard. Try copying the image again.")}},[d]);const G=f(()=>{c.reset();b="";h("idle");m("");S([])},[]);const N=f(()=>{if(d==="controls"){const o=O();S(o);h("targets")}else if(d==="targets"||d==="free"){c.reset();h("idle")}else{h("idle")}},[d]);const J=(()=>{switch(d){case"targets":return`Targets (${z.length})`;case"controls":return n.targetLabel||"Component Match";case"free":return"Free Placement";default:return"Image Overlay"}})();const M={showToggleButton:false,customContent:r(T,{children:[t(T.Navigation,{onBack:d!=="idle"?N:U}),t(T.Content,{title:J}),r(T.Actions,{children:[d==="targets"&&t(s,{style:e.headerTextButton,onPress:L,activeOpacity:.7,children:t(i,{style:e.headerTextButtonLabel,children:"Scan"})}),(d==="controls"||d==="free")&&n.imageUri&&t(le,{isEnabled:n.enabled,onToggle:()=>c.toggle(),accessibilityLabel:"Toggle image overlay"}),d!=="idle"&&t(s,{style:e.headerActionButton,onPress:G,activeOpacity:.7,children:t(oe,{size:14,color:l.color.textSecondary})})]})]})};const k=r(a,{style:e.container,children:[d==="idle"&&r(a,{style:e.homeContainer,children:[t(i,{style:e.homeSubtitle,children:"Choose a mode"}),r(a,{style:e.modeGrid,children:[r(s,{style:e.modePanel,onPress:L,activeOpacity:.7,children:[t(a,{style:[e.modeIconCircle,{backgroundColor:l.color.accentSoft}],children:t(ne,{size:24,color:l.color.accent})}),r(i,{style:e.modePanelTitle,children:["Component","\n","Match"]}),t(i,{style:e.modePanelDesc,children:"Overlay on a tagged component"})]}),r(s,{style:e.modePanel,onPress:()=>h("free"),activeOpacity:.7,children:[t(a,{style:[e.modeIconCircle,{backgroundColor:l.color.accentSoft}],children:t(re,{size:24,color:l.color.accent})}),r(i,{style:e.modePanelTitle,children:["Free","\n","Placement"]}),t(i,{style:e.modePanelDesc,children:"Drag and resize anywhere"})]})]})]}),d==="targets"&&t(ce,{targets:z,onSelect:q}),d==="controls"&&r(a,{style:e.controlsContainer,children:[n.targetRect&&r(a,{style:e.infoCard,children:[r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Component"}),t(i,{style:e.infoValue,children:n.targetLabel})]}),r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Size"}),r(i,{style:e.infoValueMono,children:[Math.round(n.targetRect.width)," x ",Math.round(n.targetRect.height)]})]}),r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Position"}),r(i,{style:e.infoValueMono,children:[Math.round(n.targetRect.x),", ",Math.round(n.targetRect.y)]})]}),n.imageWidth!=null&&n.imageHeight!=null&&r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Image"}),r(i,{style:e.infoValueMono,children:[n.imageWidth," x ",n.imageHeight]})]})]}),r(a,{style:e.inputSection,children:[t(i,{style:e.sectionLabel,children:"Image"}),t(s,{style:e.pasteButton,onPress:A,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",children:t(i,{style:e.pasteButtonText,children:"Paste from Clipboard"})}),r(a,{style:e.urlRow,children:[t(W,{style:e.urlInput,value:u,onChangeText:m,placeholder:"or enter URL...",placeholderTextColor:l.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:x}),t(s,{style:[e.loadButton,!u.trim()&&e.loadButtonDisabled],onPress:x,disabled:!u.trim(),activeOpacity:.7,children:t(i,{style:e.loadButtonText,children:"Load"})})]})]}),r(a,{style:e.toggleSection,children:[t(P,{label:"Show Outline",value:n.showOutline,onValueChange:o=>c.setShowOutline(o)}),t(P,{label:"Auto Track",value:w,onValueChange:_}),n.imageUri&&r(D,{children:[r(a,{style:e.blendRow,children:[t(i,{style:e.toggleLabel,children:"Opacity"}),t(a,{style:e.blendButtons,children:[0,25,50,75,100].map(o=>t(s,{style:[e.blendButton,Math.round(n.opacity*100)===o&&e.blendButtonActive],onPress:()=>c.setOpacity(o/100),activeOpacity:.7,children:r(i,{style:[e.blendButtonText,Math.round(n.opacity*100)===o&&e.blendButtonTextActive],children:[o,"%"]})},o))})]}),r(a,{style:e.blendRow,children:[t(i,{style:e.toggleLabel,children:"Flip"}),r(a,{style:e.blendButtons,children:[t(s,{style:[e.blendButton,n.invertX&&e.blendButtonActive],onPress:()=>c.toggleInvertX(),activeOpacity:.7,children:t(i,{style:[e.blendButtonText,n.invertX&&e.blendButtonTextActive],children:"Horizontal"})}),t(s,{style:[e.blendButton,n.invertY&&e.blendButtonActive],onPress:()=>c.toggleInvertY(),activeOpacity:.7,children:t(i,{style:[e.blendButtonText,n.invertY&&e.blendButtonTextActive],children:"Vertical"})})]})]})]})]}),n.imageUri&&t(V,{opacity:n.opacity,scale:n.scale,offsetX:n.offsetX,offsetY:n.offsetY,onOpacityChange:o=>c.setOpacity(o),onScaleChange:o=>c.setScale(o),onOffsetChange:(o,y)=>c.setOffset(o,y)}),r(a,{style:e.actions,children:[t(s,{style:e.actionButton,onPress:()=>c.resetSettings(),activeOpacity:.7,children:t(i,{style:e.actionButtonText,children:"Reset Settings"})}),t(s,{style:e.actionButton,onPress:()=>c.remeasure(),activeOpacity:.7,children:t(i,{style:e.actionButtonText,children:"Remeasure"})})]})]}),d==="free"&&r(a,{style:e.controlsContainer,children:[r(a,{style:e.inputSection,children:[t(i,{style:e.sectionLabel,children:"Image"}),t(s,{style:e.pasteButton,onPress:A,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",children:t(i,{style:e.pasteButtonText,children:"Paste from Clipboard"})}),r(a,{style:e.urlRow,children:[t(W,{style:e.urlInput,value:u,onChangeText:m,placeholder:"or enter URL...",placeholderTextColor:l.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:x}),t(s,{style:[e.loadButton,!u.trim()&&e.loadButtonDisabled],onPress:x,disabled:!u.trim(),activeOpacity:.7,children:t(i,{style:e.loadButtonText,children:"Load"})})]})]}),n.imageUri&&n.mode==="free"&&r(D,{children:[r(a,{style:e.infoCard,children:[r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Position"}),r(i,{style:e.infoValueMono,children:[Math.round(n.freeX),", ",Math.round(n.freeY)]})]}),r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Size"}),r(i,{style:e.infoValueMono,children:[Math.round(n.freeWidth)," x ",Math.round(n.freeHeight)]})]}),n.imageWidth!=null&&n.imageHeight!=null&&r(a,{style:e.infoRow,children:[t(i,{style:e.infoLabel,children:"Original"}),r(i,{style:e.infoValueMono,children:[n.imageWidth," x ",n.imageHeight]})]})]}),t(a,{style:e.inputSection,children:t(V,{opacity:n.opacity,scale:1,offsetX:0,offsetY:0,onOpacityChange:o=>c.setOpacity(o),onScaleChange:()=>{},onOffsetChange:()=>{},opacityOnly:true})}),r(a,{style:e.toggleSection,children:[t(P,{label:"Lock Position",tone:"warning",value:n.locked,onValueChange:o=>c.setLocked(o)}),r(a,{style:e.blendRow,children:[t(i,{style:e.toggleLabel,children:"Opacity"}),t(a,{style:e.blendButtons,children:[0,25,50,75,100].map(o=>t(s,{style:[e.blendButton,Math.round(n.opacity*100)===o&&e.blendButtonActive],onPress:()=>c.setOpacity(o/100),activeOpacity:.7,children:r(i,{style:[e.blendButtonText,Math.round(n.opacity*100)===o&&e.blendButtonTextActive],children:[o,"%"]})},o))})]}),r(a,{style:e.blendRow,children:[t(i,{style:e.toggleLabel,children:"Flip"}),r(a,{style:e.blendButtons,children:[t(s,{style:[e.blendButton,n.invertX&&e.blendButtonActive],onPress:()=>c.toggleInvertX(),activeOpacity:.7,children:t(i,{style:[e.blendButtonText,n.invertX&&e.blendButtonTextActive],children:"Horizontal"})}),t(s,{style:[e.blendButton,n.invertY&&e.blendButtonActive],onPress:()=>c.toggleInvertY(),activeOpacity:.7,children:t(i,{style:[e.blendButtonText,n.invertY&&e.blendButtonTextActive],children:"Vertical"})})]})]})]}),t(a,{style:e.actions,children:t(s,{style:e.actionButton,onPress:()=>c.resetSettings(),activeOpacity:.7,children:t(i,{style:e.actionButtonText,children:"Reset Position"})})})]})]})]});if(X){return r(a,{style:e.inlineRoot,children:[t(a,{style:e.inlineHeader,...ie,children:M.customContent}),k]})}return t(te,{visible:B,onClose:j,onMinimize:E,minimizeTargetPosition:Y,initialModalState:F,header:M,initialMode:"bottomSheet",persistenceKey:"buoy-image-overlay-modal",enablePersistence:true,children:k})}export function ImageOverlayToolView(B={}){return t(ImageOverlayModal,{...B,inline:true,visible:true,onClose:()=>{}})}const e=ee.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:H.background.base},inlineHeader:{borderBottomWidth:1,borderBottomColor:H.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerTextButton:{height:32,paddingHorizontal:12,borderRadius:8,backgroundColor:l.color.buttonSurface,borderWidth:1,borderColor:l.color.border,alignItems:"center",justifyContent:"center"},headerTextButtonLabel:{fontSize:12,fontWeight:"600",color:l.color.accent},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:l.color.buttonSurface,borderWidth:1,borderColor:l.color.border,alignItems:"center",justifyContent:"center"},homeContainer:{flex:1,paddingHorizontal:12,paddingTop:16,paddingBottom:20,gap:12},homeSubtitle:{fontSize:12,fontWeight:"600",color:l.color.textTertiary,textTransform:"uppercase",letterSpacing:.5,textAlign:"center"},modeGrid:{flexDirection:"row",gap:10},modePanel:{flex:1,alignItems:"center",paddingVertical:20,paddingHorizontal:12,backgroundColor:l.color.surface,borderRadius:12,borderWidth:1,borderColor:l.color.border,gap:8},modeIconCircle:{width:48,height:48,borderRadius:24,alignItems:"center",justifyContent:"center",marginBottom:4},modePanelTitle:{fontSize:13,fontWeight:"700",color:l.color.text,textAlign:"center",lineHeight:17},modePanelDesc:{fontSize:11,color:l.color.textTertiary,textAlign:"center",lineHeight:15},controlsContainer:{flex:1,paddingTop:8,paddingBottom:24,gap:10},infoCard:{marginHorizontal:12,backgroundColor:l.color.surface,borderRadius:8,borderWidth:1,borderColor:l.color.border,padding:10,gap:4},infoRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},infoLabel:{fontSize:11,fontWeight:"500",color:l.color.textTertiary,textTransform:"uppercase",letterSpacing:.3},infoValue:{fontSize:12,fontWeight:"600",color:l.color.text},infoValueMono:{fontSize:12,fontWeight:"600",color:l.color.text,fontFamily:ae},inputSection:{paddingHorizontal:12,gap:6},sectionLabel:{fontSize:11,fontWeight:"600",color:l.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},pasteButton:{paddingVertical:10,borderRadius:8,backgroundColor:l.color.accentSoft,borderWidth:1,borderColor:l.color.accentBorderStrong,alignItems:"center"},pasteButtonText:{fontSize:13,fontWeight:"600",color:l.color.accent},urlRow:{flexDirection:"row",gap:8},urlInput:{flex:1,height:36,borderRadius:10,backgroundColor:l.color.surfaceElevated,borderWidth:1,borderColor:l.color.border,paddingHorizontal:12,fontSize:13,color:l.color.text},loadButton:{height:36,paddingHorizontal:14,borderRadius:8,backgroundColor:l.color.accent,justifyContent:"center",alignItems:"center"},loadButtonDisabled:{opacity:.4},loadButtonText:{fontSize:13,fontWeight:"600",color:l.color.onAccent},toggleSection:{paddingHorizontal:12,gap:6},toggleRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:l.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:l.color.border,paddingHorizontal:12,paddingVertical:8},toggleLabel:{fontSize:13,fontWeight:"500",color:l.color.textSecondary},blendRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:l.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:l.color.border,paddingHorizontal:12,paddingVertical:6},blendButtons:{flexDirection:"row",gap:4},blendButton:{paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:"transparent"},blendButtonActive:{backgroundColor:l.color.accentSoft},blendButtonText:{fontSize:12,fontWeight:"600",color:l.color.textTertiary},blendButtonTextActive:{color:l.color.accent},actions:{flexDirection:"row",paddingHorizontal:12,gap:8,marginTop:4},actionButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:8,paddingHorizontal:12,borderRadius:8,backgroundColor:l.color.surfaceElevated,borderWidth:1,borderColor:l.color.border},actionButtonText:{fontSize:12,fontWeight:"500",color:l.color.textSecondary}});