@buoy-gg/image-overlay 2.1.11

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

@@ -0,0 +1,843 @@
+"use strict";
+
+import { useState, useEffect, useCallback } from "react";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Switch, Alert } from "react-native";
+import { JsModal, ModalHeader, macOSColors, buoyColors, Trash2, SquareDashed, Image, PowerToggleButton } 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
+}) {
+  console.log("[ImageOverlay] render", {
+    visible,
+    initialModalState: initialModalState ? JSON.stringify(initialModalState).slice(0, 200) : null,
+    minimizeTargetPosition
+  });
+  const [view, setView] = useState(() => {
+    const s = ImageOverlayController.getState();
+    if (s.mode === "free") return "free";
+    if (s.targetRect) return "controls";
+    return "idle";
+  });
+  const [targets, setTargets] = useState([]);
+  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 = require("expo-clipboard");
+    } catch {/* not installed */}
+
+    // Try @react-native-clipboard/clipboard (text only)
+    let rnClipboard = null;
+    try {
+      const mod = require("@react-native-clipboard/clipboard");
+      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: macOSColors.text.secondary
+          })
+        })]
+      })]
+    })
+  };
+  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: /*#__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: macOSColors.semantic.success + "18"
+              }],
+              children: /*#__PURE__*/_jsx(SquareDashed, {
+                size: 24,
+                color: macOSColors.semantic.success
+              })
+            }), /*#__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: buoyColors.primary + "18"
+              }],
+              children: /*#__PURE__*/_jsx(Image, {
+                size: 24,
+                color: buoyColors.primary
+              })
+            }), /*#__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,
+            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: macOSColors.text.muted,
+              autoCapitalize: "none",
+              autoCorrect: false
+            }), /*#__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__*/_jsxs(View, {
+            style: styles.toggleRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.toggleLabel,
+              children: "Show Outline"
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: state.showOutline,
+              onValueChange: v => ImageOverlayController.setShowOutline(v),
+              trackColor: {
+                false: macOSColors.background.hover,
+                true: buoyColors.primary
+              }
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.toggleRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.toggleLabel,
+              children: "Auto Track"
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: autoTrack,
+              onValueChange: setAutoTrack,
+              trackColor: {
+                false: macOSColors.background.hover,
+                true: macOSColors.semantic.success
+              }
+            })]
+          }), 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,
+            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: macOSColors.text.muted,
+              autoCapitalize: "none",
+              autoCorrect: false
+            }), /*#__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__*/_jsxs(View, {
+              style: styles.toggleRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.toggleLabel,
+                children: "Lock Position"
+              }), /*#__PURE__*/_jsx(Switch, {
+                value: state.locked,
+                onValueChange: v => ImageOverlayController.setLocked(v),
+                trackColor: {
+                  false: macOSColors.background.hover,
+                  true: "#f59e0b"
+                }
+              })]
+            }), /*#__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"
+              })
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  headerTextButton: {
+    height: 32,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerTextButtonLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.primary
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Home — mode selection
+  homeContainer: {
+    flex: 1,
+    paddingHorizontal: 12,
+    paddingTop: 16,
+    paddingBottom: 20,
+    gap: 12
+  },
+  homeSubtitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    textAlign: "center"
+  },
+  modeGrid: {
+    flexDirection: "row",
+    gap: 10
+  },
+  modePanel: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 20,
+    paddingHorizontal: 12,
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    gap: 8
+  },
+  modeIconCircle: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  modePanelTitle: {
+    fontSize: 13,
+    fontWeight: "700",
+    color: macOSColors.text.primary,
+    textAlign: "center",
+    lineHeight: 17
+  },
+  modePanelDesc: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    textAlign: "center",
+    lineHeight: 15
+  },
+  // Controls
+  controlsContainer: {
+    flex: 1,
+    paddingTop: 8,
+    paddingBottom: 24,
+    gap: 10
+  },
+  infoCard: {
+    marginHorizontal: 12,
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 10,
+    gap: 4
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  infoLabel: {
+    fontSize: 11,
+    fontWeight: "500",
+    color: macOSColors.text.muted,
+    textTransform: "uppercase",
+    letterSpacing: 0.3
+  },
+  infoValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  infoValueMono: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  inputSection: {
+    paddingHorizontal: 12,
+    gap: 6
+  },
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  pasteButton: {
+    paddingVertical: 10,
+    borderRadius: 8,
+    backgroundColor: buoyColors.primary + "15",
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40",
+    alignItems: "center"
+  },
+  pasteButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.primary
+  },
+  urlRow: {
+    flexDirection: "row",
+    gap: 8
+  },
+  urlInput: {
+    flex: 1,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    paddingHorizontal: 12,
+    fontSize: 13,
+    color: macOSColors.text.primary
+  },
+  loadButton: {
+    height: 36,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    backgroundColor: buoyColors.primary,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  loadButtonDisabled: {
+    opacity: 0.4
+  },
+  loadButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  toggleSection: {
+    paddingHorizontal: 12,
+    gap: 6
+  },
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  toggleLabel: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: macOSColors.text.secondary
+  },
+  blendRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  blendButtons: {
+    flexDirection: "row",
+    gap: 4
+  },
+  blendButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 6,
+    backgroundColor: "transparent"
+  },
+  blendButtonActive: {
+    backgroundColor: buoyColors.primary + "20"
+  },
+  blendButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.muted
+  },
+  blendButtonTextActive: {
+    color: buoyColors.primary
+  },
+  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: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  actionButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: macOSColors.text.secondary
+  }
+});