@ohhwells/bridge 0.1.66-next.192 → 0.1.67-next.194

package/dist/index.cjs

@@ -7551,13 +7551,17 @@ function MediaOverlay({
   hover,
   isUploading,
   fadingOut = false,
+  selected = false,
+  hovered = false,
   onFadeOutComplete,
   onReplace,
+  onSelect,
   onVideoSettingsChange
 }) {
   const { rect } = hover;
   const skeletonRef = React7.useRef(null);
   const isVideo = hover.elementType === "video";
+  const showChrome = !selected || hovered;
   const autoplay = hover.videoAutoplay ?? true;
   const muted = hover.videoMuted ?? true;
   const box = {
@@ -7592,7 +7596,7 @@ function MediaOverlay({
       }
     );
   }
-  const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const settingsBar = isVideo && !hover.isDragOver && showChrome ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -7662,11 +7666,13 @@ function MediaOverlay({
           // in-document, pointer-events does it natively. The button below opts back in, so
           // Replace still works.
           pointerEvents: hover.hasTextOverlap ? "none" : "auto",
-          boxShadow: "inset 0 0 0 1.5px var(--color-primary)",
-          background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+          // Selected: a firm component ring with no wash, so the image reads as chosen rather
+          // than hovered. Hover keeps the existing tinted preview.
+          boxShadow: selected ? "inset 0 0 0 2px var(--color-primary)" : "inset 0 0 0 1.5px var(--color-primary)",
+          background: selected ? "transparent" : "color-mix(in srgb, var(--color-primary) 20%, transparent)"
         },
-        onClick: () => onReplace(hover.key),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        onClick: () => onSelect && !selected ? onSelect(hover.key) : onReplace(hover.key),
+        children: showChrome && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Button,
           {
             "data-ohw-media-overlay": "",
@@ -12601,127 +12607,16 @@ function FloatingPanel({
   );
 }
 
-// src/ui/logo-size-panel.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function SizeSlider({
-  value,
-  onChange
-}) {
-  const pct = (value - LOGO_SIZE_MIN) / (LOGO_SIZE_MAX - LOGO_SIZE_MIN) * 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center gap-2 text-sm font-medium leading-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 flex-1 text-foreground", children: "Size" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "shrink-0 whitespace-nowrap text-muted-foreground", children: [
-        value,
-        " px"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative h-2 w-full rounded-full bg-primary-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        "div",
-        {
-          className: "absolute inset-y-0 left-0 rounded-full bg-primary",
-          style: { width: `${pct}%` }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        "input",
-        {
-          type: "range",
-          min: LOGO_SIZE_MIN,
-          max: LOGO_SIZE_MAX,
-          step: 1,
-          value,
-          "aria-label": "Logo size",
-          className: cn(
-            "absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent",
-            "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-5",
-            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2",
-            "[&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background",
-            "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full",
-            "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary",
-            "[&::-moz-range-thumb]:bg-background"
-          ),
-          onChange: (e) => onChange(Number(e.target.value))
-        }
-      )
-    ] })
-  ] });
-}
-function LogoSizePanel({
-  viewport,
-  sizePx,
-  mobileFollowing = true,
-  onSizeChange,
-  onCustomizeMobile,
-  onResetMobile,
-  onUpdateEverywhere,
-  className
-}) {
-  const showFollowing = viewport === "mobile" && mobileFollowing;
-  const showMobileSlider = viewport === "mobile" && !mobileFollowing;
-  const showDesktopSlider = viewport === "desktop";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
-    showFollowing ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Link, { size: 16, className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm font-semibold leading-5 text-foreground", children: "Following desktop size" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm leading-5 text-muted-foreground", children: "Mobile uses the desktop size until you customize it. Change the desktop size and it follows automatically." }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          className: "h-9 w-full min-w-0 cursor-pointer",
-          onClick: onCustomizeMobile,
-          children: "Customize for mobile"
-        }
-      )
-    ] }) : null,
-    showDesktopSlider || showMobileSlider ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SizeSlider, { value: sizePx, onChange: onSizeChange }) : null,
-    showMobileSlider ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        className: "h-9 w-full min-w-0 cursor-pointer",
-        onClick: onResetMobile,
-        children: "Reset to desktop size"
-      }
-    ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-px w-full bg-border", role: "separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        className: "h-9 w-full min-w-0 cursor-pointer gap-1",
-        onClick: onUpdateEverywhere,
-        children: [
-          "Update logo everywhere",
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.ArrowUpRight, { size: 16, "aria-hidden": true })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm leading-5 text-muted-foreground", children: "Matches the right version to your background." })
-  ] });
-}
-
 // src/ui/socials-display-panel.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DisplaySwitch({
   label,
   checked,
   disabled,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "span",
       {
         className: cn(
@@ -12731,7 +12626,7 @@ function DisplaySwitch({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         type: "button",
@@ -12745,7 +12640,7 @@ function DisplaySwitch({
           checked ? "bg-primary" : "bg-primary-50",
           disabled ? "cursor-default opacity-50" : "cursor-pointer"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "span",
           {
             className: cn(
@@ -12759,8 +12654,8 @@ function DisplaySwitch({
   ] });
 }
 function SocialsDisplayPanel({ display, onChange, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       DisplaySwitch,
       {
         label: "Text",
@@ -12769,7 +12664,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
         onChange: (text) => onChange({ ...display, text })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       DisplaySwitch,
       {
         label: "Icon",
@@ -13656,8 +13551,8 @@ function useSectionDrag({
 }
 
 // src/ui/footer-container-chrome.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FooterContainerChrome({
   rect,
   onAdd,
@@ -13665,7 +13560,7 @@ function FooterContainerChrome({
 }) {
   const chromeGap = 6;
   const buttonMargin = 7;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       "data-ohw-footer-container-chrome": "",
@@ -13677,8 +13572,8 @@ function FooterContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
             type: "button",
@@ -13697,10 +13592,10 @@ function FooterContainerChrome({
               if (addDisabled) return;
               onAdd();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
       ] })
     }
   ) });
@@ -14162,14 +14057,14 @@ function deleteSelectedNavFooterItem(deps) {
 }
 
 // src/ui/navbar-container-chrome.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function NavbarContainerChrome({
   rect,
   onAdd
 }) {
   const chromeGap = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-ohw-navbar-container-chrome": "",
@@ -14181,7 +14076,7 @@ function NavbarContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           type: "button",
@@ -14198,7 +14093,7 @@ function NavbarContainerChrome({
             e.stopPropagation();
             onAdd();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
         }
       )
     }
@@ -14207,7 +14102,7 @@ function NavbarContainerChrome({
 
 // src/ui/drop-indicator.tsx
 var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var dropIndicatorVariants = cva(
   "ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
   {
@@ -14231,7 +14126,7 @@ var dropIndicatorVariants = cva(
 );
 var DropIndicator = React10.forwardRef(
   ({ className, direction, state, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         ref,
@@ -14248,7 +14143,7 @@ var DropIndicator = React10.forwardRef(
 DropIndicator.displayName = "DropIndicator";
 
 // src/ui/badge.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -14266,12 +14161,12 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/OhhwellsBridge.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PRIMARY3 = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -14440,7 +14335,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
     const root = (0, import_client2.createRoot)(container);
     (0, import_react_dom3.flushSync)(() => {
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           SchedulingWidget,
           {
             notifyOnConnect,
@@ -15121,7 +15016,7 @@ function EditGlowChrome({
   hideHandle = false
 }) {
   const GAP = SELECTION_CHROME_GAP2;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       ref: elRef,
@@ -15136,7 +15031,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             style: {
@@ -15149,7 +15044,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -15161,7 +15056,7 @@ function EditGlowChrome({
               transform: "translate(calc(-100% - 7px), -50%)",
               pointerEvents: dragDisabled ? "none" : "auto"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DragHandle,
               {
                 "aria-label": `Reorder ${reorderHrefKey}`,
@@ -15371,7 +15266,7 @@ function FloatingToolbar({
     return () => ro.disconnect();
   }, [showEditLink, activeCommands]);
   const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       ref: setRefs,
@@ -15383,12 +15278,12 @@ function FloatingToolbar({
         zIndex: 2147483647,
         pointerEvents: "auto"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react17.default.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomToolbarDivider, {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(CustomToolbar, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react17.default.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               CustomToolbarButton,
               {
                 title: btn.title,
@@ -15397,7 +15292,7 @@ function FloatingToolbar({
                   e.preventDefault();
                   onCommand(btn.cmd);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "svg",
                   {
                     width: "16",
@@ -15418,7 +15313,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           CustomToolbarButton,
           {
             type: "button",
@@ -15432,7 +15327,7 @@ function FloatingToolbar({
               e.preventDefault();
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Link, { className: "size-4 shrink-0", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Link, { className: "size-4 shrink-0", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -15449,7 +15344,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -15463,7 +15358,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -15479,9 +15374,9 @@ var OHW_LOADER_STYLE = {
   justifyContent: "center"
 };
 function OhwLoaderSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "circle",
       {
         cx: "14",
@@ -15491,7 +15386,7 @@ function OhwLoaderSpinner() {
         strokeWidth: "3",
         strokeDasharray: "17 52",
         strokeLinecap: "round",
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "animateTransform",
           {
             attributeName: "transform",
@@ -15587,6 +15482,70 @@ function OhhwellsBridge() {
   const hoveredImageHasTextOverlapRef = (0, import_react17.useRef)(false);
   const dragOverElRef = (0, import_react17.useRef)(null);
   const [mediaHover, setMediaHover] = (0, import_react17.useState)(null);
+  const [selectedMedia, setSelectedMedia] = (0, import_react17.useState)(null);
+  const selectedMediaElRef = (0, import_react17.useRef)(null);
+  const clearMediaSelection = (0, import_react17.useCallback)(() => {
+    const prev = selectedMediaElRef.current;
+    selectedMediaElRef.current = null;
+    setSelectedMedia(null);
+    const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
+    if (sectionEl) {
+      postToParentRef.current({
+        type: "ow:section-selected",
+        sectionId: sectionEl.dataset.ohwSection ?? null,
+        sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
+        key: null
+      });
+    }
+  }, []);
+  const clearMediaSelectionRef = (0, import_react17.useRef)(clearMediaSelection);
+  clearMediaSelectionRef.current = clearMediaSelection;
+  const selectMediaElement = (0, import_react17.useCallback)((el) => {
+    const r2 = el.getBoundingClientRect();
+    const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
+    selectedMediaElRef.current = el;
+    setSelectedMedia({
+      key: el.dataset.ohwKey ?? "",
+      rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+      elementType: el.dataset.ohwEditable ?? "image",
+      hasTextOverlap: false,
+      isDragOver: false,
+      ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {}
+    });
+    const sectionEl = el.closest("[data-ohw-section]");
+    aiSectionApiRef.current?.selectFromElement(el, { report: false });
+    postToParentRef.current({
+      type: "ow:section-selected",
+      sectionId: sectionEl?.dataset.ohwSection ?? null,
+      sectionLabel: sectionEl ? sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? "") : null,
+      key: el.dataset.ohwKey ?? null,
+      // Display name for the pill — the raw key prettifies into fragments ("Img"); the
+      // bridge knows what the node IS, so it names it.
+      keyLabel: el.dataset.ohwEditable === "video" ? "Video" : "Image"
+    });
+  }, []);
+  const selectMediaElementRef = (0, import_react17.useRef)(selectMediaElement);
+  selectMediaElementRef.current = selectMediaElement;
+  (0, import_react17.useEffect)(() => {
+    if (!selectedMedia) return;
+    const update = () => {
+      const el = selectedMediaElRef.current;
+      if (!el || !el.isConnected) {
+        clearMediaSelection();
+        return;
+      }
+      const r2 = el.getBoundingClientRect();
+      setSelectedMedia(
+        (prev) => prev ? { ...prev, rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } } : prev
+      );
+    };
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [selectedMedia !== null]);
   const [carouselHover, setCarouselHover] = (0, import_react17.useState)(null);
   const [uploadingRects, setUploadingRects] = (0, import_react17.useState)({});
   const hoveredGapRef = (0, import_react17.useRef)(null);
@@ -16983,6 +16942,25 @@ function OhhwellsBridge() {
     setLogoSizeDraft(null);
     deselectRef.current();
   }, []);
+  (0, import_react17.useEffect)(() => {
+    const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
+    if (!session || !logoSizeDraft) {
+      postToParentRef.current({ type: "ow:logo-size-panel", open: false });
+      return;
+    }
+    postToParentRef.current({
+      type: "ow:logo-size-panel",
+      open: true,
+      title: session.title,
+      context: session.context ?? "",
+      placement: session.placement,
+      viewport: editorViewport,
+      mobileFollowing: logoSizeDraft.mobileFollowing,
+      sizePx: editorViewport === "mobile" && !logoSizeDraft.mobileFollowing ? logoSizeDraft.mobilePx : logoSizeDraft.desktopPx,
+      min: LOGO_SIZE_MIN,
+      max: LOGO_SIZE_MAX
+    });
+  }, [floatingPanel, logoSizeDraft, editorViewport]);
   const persistLogoSizeDraft = (0, import_react17.useCallback)(
     (placement, draft) => {
       const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
@@ -17719,6 +17697,9 @@ function OhhwellsBridge() {
       )) {
         return;
       }
+      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
+        clearMediaSelectionRef.current();
+      }
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
@@ -17866,8 +17847,11 @@ function OhhwellsBridge() {
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
-          aiSectionApiRef.current?.selectFromElement(editable);
-          postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
+          if (selectedMediaElRef.current === editable) {
+            postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
+          } else {
+            selectMediaElementRef.current(editable);
+          }
           return;
         }
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
@@ -19363,6 +19347,10 @@ function OhhwellsBridge() {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
       if (e.key === "Escape" && document.querySelector("[data-ohw-more-menu]")) return;
+      if (e.key === "Escape" && selectedMediaElRef.current) {
+        clearMediaSelectionRef.current();
+        return;
+      }
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
         e.preventDefault();
         selectAllTextInEditable(activeElRef.current);
@@ -20147,7 +20135,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.66",
+        bridgeVersion: "0.1.67",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -20201,6 +20189,44 @@ function OhhwellsBridge() {
     if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
+  (0, import_react17.useEffect)(() => {
+    const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
+    if (!session || !logoSizeDraft) return;
+    const onPanelAction = (e) => {
+      const type = e.data?.type;
+      if (type === "ow:logo-size-close") {
+        closeFloatingPanelAndDeselect();
+        return;
+      }
+      if (type === "ow:logo-size-update-everywhere") {
+        postToParentRef.current({ type: "ow:open-logo-settings", ...readLogoIdentityFromDom() });
+        return;
+      }
+      if (type === "ow:logo-size-customize-mobile" || type === "ow:logo-size-reset-mobile") {
+        const following = type === "ow:logo-size-reset-mobile";
+        const next2 = {
+          ...logoSizeDraft,
+          mobileFollowing: following,
+          mobilePx: logoSizeDraft.desktopPx
+        };
+        setLogoSizeDraft(next2);
+        persistLogoSizeDraft(session.placement, next2);
+        return;
+      }
+      if (type !== "ow:logo-size-set") return;
+      const px = Number(e.data.px);
+      if (!Number.isFinite(px)) return;
+      const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
+        ...logoSizeDraft,
+        desktopPx: px,
+        mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
+      };
+      setLogoSizeDraft(next);
+      persistLogoSizeDraft(session.placement, next);
+    };
+    window.addEventListener("message", onPanelAction);
+    return () => window.removeEventListener("message", onPanelAction);
+  }, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
   const handleStateChange = (0, import_react17.useCallback)((state) => {
     if (!activeStateElRef.current) return;
     const el = activeStateElRef.current;
@@ -20499,11 +20525,22 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
+  const handleMediaSelect = (0, import_react17.useCallback)((key) => {
+    const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
+      (m) => (m.dataset.ohwKey ?? "") === key
+    ) ?? null;
+    if (!el) return;
+    selectMediaElementRef.current(el);
+  }, []);
   const handleMediaReplace = (0, import_react17.useCallback)(
     (key) => {
-      postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
+      postToParent2({
+        type: "ow:image-pick",
+        key,
+        elementType: mediaHover?.elementType ?? selectedMedia?.elementType ?? "image"
+      });
     },
-    [postToParent2, mediaHover?.elementType]
+    [postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
   );
   const handleEditCarousel = (0, import_react17.useCallback)(
     (key) => {
@@ -20541,19 +20578,19 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OhwLoaderSpinner, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OhwLoaderSpinner, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
     bridgeRoot ? (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
-        isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+        isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-2147483646",
             style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DropIndicator,
               {
                 direction: "horizontal",
@@ -20564,7 +20601,7 @@ function OhhwellsBridge() {
           },
           `section-drop-${slot.insertIndex}-${i}`
         )),
-        Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           MediaOverlay,
           {
             hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
@@ -20575,20 +20612,33 @@ function OhhwellsBridge() {
           },
           `uploading-${key}`
         )),
-        mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           MediaOverlay,
           {
             hover: mediaHover,
             isUploading: false,
             onReplace: handleMediaReplace,
+            onSelect: handleMediaSelect,
+            onVideoSettingsChange: handleVideoSettingsChange
+          }
+        ),
+        selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          MediaOverlay,
+          {
+            hover: selectedMedia,
+            selected: true,
+            hovered: mediaHover?.key === selectedMedia.key,
+            isUploading: false,
+            onReplace: handleMediaReplace,
+            onSelect: handleMediaSelect,
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),
-        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
-        siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-        siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
-        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
-        isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+        siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+        siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
+        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
+        isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-2147483646",
@@ -20598,7 +20648,7 @@ function OhhwellsBridge() {
               width: slot.width,
               height: slot.height
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DropIndicator,
               {
                 direction: slot.direction,
@@ -20609,7 +20659,7 @@ function OhhwellsBridge() {
           },
           `footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
         )),
-        isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-2147483646",
@@ -20619,7 +20669,7 @@ function OhhwellsBridge() {
               width: slot.width,
               height: slot.height
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DropIndicator,
               {
                 direction: slot.direction,
@@ -20630,10 +20680,10 @@ function OhhwellsBridge() {
           },
           `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
         )),
-        hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
-        hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-        hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
-        formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+        hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+        hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
+        formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ItemInteractionLayer,
           {
             rect: formPickRect,
@@ -20641,13 +20691,13 @@ function OhhwellsBridge() {
             itemDragSurface: false,
             toolbarAlign: "left",
             chromeGap: 24,
-            toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               "div",
               {
                 "data-ohw-form-toolbar": "",
                 className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "button",
                     {
                       type: "button",
@@ -20655,11 +20705,11 @@ function OhhwellsBridge() {
                       className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
                       onClick: () => setFieldTypePickerOpen((open) => !open),
                       "data-ohw-add-field": "",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Plus, { size: 15, "aria-hidden": true })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Plus, { size: 15, "aria-hidden": true })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -20674,11 +20724,11 @@ function OhhwellsBridge() {
                         });
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Settings, { size: 14, "aria-hidden": true }),
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Settings, { size: 14, "aria-hidden": true }),
                         "Form settings",
                         formPickCount ? (
                           // Counter pill, per the design — not a text suffix.
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             "span",
                             {
                               "data-ohw-form-count": "",
@@ -20690,8 +20740,8 @@ function OhhwellsBridge() {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "button",
                     {
                       type: "button",
@@ -20721,7 +20771,7 @@ function OhhwellsBridge() {
             )
           }
         ),
-        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ItemInteractionLayer,
           {
             rect: formHoverRect,
@@ -20729,7 +20779,7 @@ function OhhwellsBridge() {
             chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
           }
         ),
-        fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ItemInteractionLayer,
           {
             rect: fieldPickRect,
@@ -20741,7 +20791,7 @@ function OhhwellsBridge() {
             dragHandleLabel: "Reorder field",
             onDragHandleDragStart: handleFieldDragStart,
             onDragHandleDragEnd: handleFieldDragEnd,
-            toolbar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            toolbar: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               FormFieldToolbar,
               {
                 type: fieldPickState.type,
@@ -20754,12 +20804,12 @@ function OhhwellsBridge() {
             )
           }
         ),
-        fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-[2147483644]",
             style: { top: slot.top, left: slot.left, width: slot.width },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DropIndicator,
               {
                 direction: "horizontal",
@@ -20770,16 +20820,16 @@ function OhhwellsBridge() {
           },
           `field-drop-${i}`
         )) : null,
-        fieldTypePickerOpen && formPickRect && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        fieldTypePickerOpen && formPickRect && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-[2147483645]",
             style: { top: formPickRect.top + 16, left: formPickRect.left + 24 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldTypePicker, { onPick: handleAddField })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldTypePicker, { onPick: handleAddField })
           }
         ),
-        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
+        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           FooterContainerChrome,
           {
             rect: toolbarRect,
@@ -20787,7 +20837,7 @@ function OhhwellsBridge() {
             addDisabled: !canAddFooterColumn()
           }
         ),
-        toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ItemInteractionLayer,
           {
             rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
@@ -20802,7 +20852,7 @@ function OhhwellsBridge() {
             onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
             onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
             itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
-            toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               ItemActionToolbar,
               {
                 onEditLink: openLinkPopoverForSelected,
@@ -20838,8 +20888,8 @@ function OhhwellsBridge() {
             ) : void 0
           }
         ),
-        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             EditGlowChrome,
             {
               rect: toolbarRect,
@@ -20849,7 +20899,7 @@ function OhhwellsBridge() {
               hideHandle: isItemDragging
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             FloatingToolbar,
             {
               rect: toolbarRect,
@@ -20862,7 +20912,7 @@ function OhhwellsBridge() {
             }
           )
         ] }),
-        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
             "data-ohw-max-badge": "",
@@ -20888,7 +20938,7 @@ function OhhwellsBridge() {
             ]
           }
         ),
-        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           StateToggle,
           {
             rect: toggleState.rect,
@@ -20897,15 +20947,15 @@ function OhhwellsBridge() {
             onStateChange: handleStateChange
           }
         ),
-        sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
             "data-ohw-section-insert-line": "",
             className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
             style: { top: sectionGap.y, transform: "translateY(-50%)" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 Badge,
                 {
                   className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
@@ -20922,11 +20972,11 @@ function OhhwellsBridge() {
                   children: "Add Section"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
             ]
           }
         ),
-        linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           LinkPopover,
           {
             panelRef: linkPopoverPanelRef,
@@ -20943,7 +20993,7 @@ function OhhwellsBridge() {
           },
           linkPopover.key
         ) : null,
-        floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           FloatingPanel,
           {
             open: true,
@@ -20953,7 +21003,7 @@ function OhhwellsBridge() {
             onPositionChange: setFloatingPanelPos,
             parentScroll: parentScrollSnap ?? parentScrollRef.current,
             onClose: closeFloatingPanelOnly,
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               SocialsDisplayPanel,
               {
                 display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
@@ -20964,57 +21014,6 @@ function OhhwellsBridge() {
               }
             )
           }
-        ) : null,
-        floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          FloatingPanel,
-          {
-            open: true,
-            title: floatingPanel.title,
-            context: floatingPanel.context,
-            position: floatingPanelPos,
-            onPositionChange: setFloatingPanelPos,
-            parentScroll: parentScrollSnap ?? parentScrollRef.current,
-            onClose: closeFloatingPanelAndDeselect,
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              LogoSizePanel,
-              {
-                viewport: editorViewport,
-                sizePx: editorViewport === "mobile" && !logoSizeDraft.mobileFollowing ? logoSizeDraft.mobilePx : logoSizeDraft.desktopPx,
-                mobileFollowing: logoSizeDraft.mobileFollowing,
-                onSizeChange: (px) => {
-                  const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
-                    ...logoSizeDraft,
-                    desktopPx: px,
-                    mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
-                  };
-                  setLogoSizeDraft(next);
-                  persistLogoSizeDraft(floatingPanel.placement, next);
-                },
-                onCustomizeMobile: () => {
-                  const next = {
-                    ...logoSizeDraft,
-                    mobileFollowing: false,
-                    mobilePx: logoSizeDraft.desktopPx
-                  };
-                  setLogoSizeDraft(next);
-                  persistLogoSizeDraft(floatingPanel.placement, next);
-                },
-                onResetMobile: () => {
-                  const next = {
-                    ...logoSizeDraft,
-                    mobileFollowing: true,
-                    mobilePx: logoSizeDraft.desktopPx
-                  };
-                  setLogoSizeDraft(next);
-                  persistLogoSizeDraft(floatingPanel.placement, next);
-                },
-                onUpdateEverywhere: () => {
-                  const identity = readLogoIdentityFromDom();
-                  postToParent2({ type: "ow:open-logo-settings", ...identity });
-                }
-              }
-            )
-          }
         ) : null
       ] }),
       bridgeRoot
@@ -21024,10 +21023,10 @@ function OhhwellsBridge() {
 
 // src/ui/EmptySection.tsx
 var import_link = __toESM(require("next/link"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "p",
       {
         style: {
@@ -21039,10 +21038,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
           color: "var(--brand-accent)",
           marginBottom: "1.5rem"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "h1",
       {
         style: {
@@ -21057,7 +21056,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "p",
       {
         style: {