From 8af0b3b3a79c1c6568d53ee3b4bc22c557f920bd Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:53 +0000
Subject: [PATCH 1/8] Update src/app/anatomy/page.tsx

---
 src/app/anatomy/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/anatomy/page.tsx b/src/app/anatomy/page.tsx
index fff5857..fbbc48e 100644
--- a/src/app/anatomy/page.tsx
+++ b/src/app/anatomy/page.tsx
@@ -43,7 +43,7 @@ export default function AnatomyPage() {
           title="Hand & Wrist Anatomy"
           description="Comprehensive anatomical reference with well-labeled diagrams showing skeletal structures, nerve supply, blood vessels, and joint mechanics essential for radiographic interpretation and procedural understanding."
           tag="Anatomy Reference"
-          imageSrc="http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg"
+          imageSrc="http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg?_wi=5"
           imageAlt="Hand and wrist anatomical structure diagram"
           useInvertedBackground={true}
           buttons={[
@@ -89,7 +89,7 @@ export default function AnatomyPage() {
               content: "The anatomy section includes discussion of normal anatomical variations including accessory bones (lunatum, os centrale, os triangulare), anatomical wrist types, and individual differences in carpal bone morphology. Understanding these variations is essential for radiographers to avoid misinterpreting normal variants as pathology and to recognize when findings require clinical correlation versus reassurance of normalcy."
             }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg?_wi=2"
           imageAlt="Hand anatomy reference diagram"
           title="Anatomy Reference Guide"
           description="Detailed anatomical knowledge for radiographic interpretation and procedural excellence."
-- 
2.49.1


From 21554dcc410a4cfe2a8eb1b10462d315bdb345e9 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:54 +0000
Subject: [PATCH 2/8] Update src/app/evaluation/page.tsx

---
 src/app/evaluation/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/evaluation/page.tsx b/src/app/evaluation/page.tsx
index ad2259a..b93dd49 100644
--- a/src/app/evaluation/page.tsx
+++ b/src/app/evaluation/page.tsx
@@ -50,7 +50,7 @@ export default function EvaluationPage() {
               title: "Positioning Assessment",
               subtitle: "Evaluate proper anatomical positioning and alignment",
               description: "Assess patient body part alignment relative to image receptor and X-ray beam. Verify correct positioning for the requested projection, ensure proper angulation of body part, confirm appropriate distance from image receptor, and evaluate overall anatomical presentation for diagnostic accuracy.",
-              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=10",
               imageAlt: "Radiographic positioning evaluation",
             },
             {
@@ -59,7 +59,7 @@ export default function EvaluationPage() {
               title: "Anatomical Visualization",
               subtitle: "Verify correct structures are visualized and demonstrated",
               description: "Confirm all required anatomical structures are visible on the radiograph. Verify structures of interest are properly demonstrated without superimposition. Assess bone alignment and joint spaces, ensure soft tissue outlines are visible, and confirm anatomical landmarks are appropriately displayed.",
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=5",
               imageAlt: "Anatomical structure visualization",
             },
             {
@@ -68,7 +68,7 @@ export default function EvaluationPage() {
               title: "Collimation & Field of View",
               subtitle: "Evaluate appropriateness of radiation field coverage",
               description: "Assess if collimation is appropriate for the body part and projection. Verify field of view includes all structures of interest without excessive unnecessary anatomy. Confirm collimation reduces unnecessary radiation exposure to patient, check for proper cone-cutting prevention, and evaluate overall field optimization.",
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=6",
               imageAlt: "Collimation field of view assessment",
             },
             {
@@ -77,7 +77,7 @@ export default function EvaluationPage() {
               title: "Exposure Assessment",
               subtitle: "Evaluate image density and contrast appropriateness",
               description: "Assess radiographic density for optimal visualization of anatomical structures. Evaluate contrast to distinguish between different tissue types and pathology. Verify exposure is neither too dark (underexposed) nor too light (overexposed), ensure penetration of bone is adequate, and confirm diagnostic quality is maintained.",
-              imageSrc: "http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg?_wi=3",
               imageAlt: "Exposure and image density evaluation",
             },
             {
@@ -86,7 +86,7 @@ export default function EvaluationPage() {
               title: "Identification Markers & Labels",
               subtitle: "Verify required identification markers are properly placed",
               description: "Confirm patient identification markers are present (name, medical record number, date, institution). Verify anatomical markers indicate correct body part and side (R/L indicators). Check markers are placed appropriately within collimated field, ensure markers do not obscure diagnostic anatomy, and confirm all required documentation labels are legible.",
-              imageSrc: "http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg?_wi=4",
               imageAlt: "Radiographic identification markers and labeling",
             },
             {
@@ -95,7 +95,7 @@ export default function EvaluationPage() {
               title: "Artifacts, Noise & Image Clarity",
               subtitle: "Identify and minimize image degradation factors",
               description: "Assess image for absence of motion blur, technique artifacts, or patient motion. Evaluate noise levels and image sharpness for diagnostic interpretation. Identify external artifacts such as jewelry or clothing, check for exposure artifacts from protective equipment, and ensure overall image clarity meets diagnostic standards.",
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=7",
               imageAlt: "Image quality and artifact assessment",
             },
           ]}
@@ -151,7 +151,7 @@ export default function EvaluationPage() {
               content: "Common artifacts include: motion blur from patient movement, technique artifacts from collimation errors, shadows from jewelry or clothing not removed before imaging, grid artifacts from improper grid usage, and exposure artifacts from protective lead markers. Minimizing artifacts requires proper patient preparation, correct technique execution, and appropriate use of shielding and protective devices.",
             },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg?_wi=5"
           imageAlt="Radiographic image evaluation and quality assessment"
           textboxLayout="default"
           useInvertedBackground={true}
@@ -172,7 +172,7 @@ export default function EvaluationPage() {
             variant: "sparkles-gradient",
           }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=15"
           imageAlt="Medical education and evaluation resources"
           mediaAnimation="slide-up"
           mediaPosition="right"
-- 
2.49.1


From ac2ffb43f092f5bf9a5a38ba7f31da3b2aa6f18b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:55 +0000
Subject: [PATCH 3/8] Update src/app/layout.tsx

---
 src/app/layout.tsx | 1367 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1367 insertions(+)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 27ea23e..8120901 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1421,6 +1421,1373 @@ export default function RootLayout({
   
   window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
 })();
+`
+          }}
+        />
+      
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+(function() {
+  if (window.self === window.top) return;
+
+  if (window.__webildEditorInitialized) return;
+  window.__webildEditorInitialized = true;
+
+  let isActive = false;
+  let hoveredElement = null;
+  let selectedElement = null;
+  let originalContent = null;
+  let isEditing = false;
+  let elementTypeLabel = null;
+  let hoverOverlay = null;
+  let scrollTimeout = null;
+  let isScrolling = false;
+
+  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
+  const hoverClass = 'webild-hover';
+  const selectedClass = 'webild-selected';
+
+  const style = document.createElement('style');
+  style.id = 'webild-inspector-styles';
+  style.textContent = '' +
+    '.webild-hover {' +
+    '  outline: 2px dashed #4d96ff80 !important;' +
+    '  border-radius: 0 !important;' +
+    '  outline-offset: 2px !important;' +
+    '  cursor: pointer !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    '.webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  outline-offset: 2px !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '  border-radius: 0 !important;' +
+    '}' +
+    '[contenteditable="true"].webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    'img.webild-hover,' +
+    'img.webild-selected,' +
+    'video.webild-hover,' +
+    'video.webild-selected {' +
+    '  outline-offset: 2px !important;' +
+    '}' +
+    '.webild-element-type-label {' +
+    '  position: fixed !important;' +
+    '  z-index: 999999 !important;' +
+    '  background: #4d96ff !important;' +
+    '  color: white !important;' +
+    '  padding: 4px 8px !important;' +
+    '  font-size: 11px !important;' +
+    '  font-weight: 600 !important;' +
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
+    '  pointer-events: none !important;' +
+    '  white-space: nowrap !important;' +
+    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
+    '  letter-spacing: 0.3px !important;' +
+    '  border: 1px solid #4d96ff20 !important;' +
+    '}' +
+    '.webild-element-type-label.label-top {' +
+    '  border-radius: 6px 6px 0 0 !important;' +
+    '}' +
+    '.webild-element-type-label.label-bottom {' +
+    '  border-radius: 0 0 6px 6px !important;' +
+    '}' +
+    '.webild-hover-overlay {' +
+    '  position: fixed !important;' +
+    '  background-color: #4d96ff15 !important;' +
+    '  pointer-events: none !important;' +
+    '  z-index: 999998 !important;' +
+    '  transition: all 0.15s ease !important;' +
+    '}';
+  document.head.appendChild(style);
+  
+  const getUniqueSelector = (element, assignId = false) => {
+    if (element.dataset && element.dataset.webildSelector) {
+      return element.dataset.webildSelector;
+    }
+    
+    const existingId = element.getAttribute('data-webild-id');
+    if (existingId) {
+      return '[data-webild-id="' + existingId + '"]';
+    }
+    
+    if (assignId) {
+      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+      element.setAttribute('data-webild-id', uniqueId);
+      return '[data-webild-id="' + uniqueId + '"]';
+    }
+    
+    return null;
+  };
+  
+  const getSectionId = (element) => {
+    let current = element;
+    while (current && current !== document.body) {
+      const sectionId = current.getAttribute('data-section');
+      if (sectionId) {
+        return sectionId;
+      }
+      current = current.parentElement;
+    }
+    return 'hero';
+  };
+  
+  const getElementType = (element) => {
+  const tagName = element.tagName.toLowerCase();
+  const computedStyle = window.getComputedStyle(element);
+
+  if (tagName === 'img') {
+    return 'Image';
+  }
+
+  if (tagName === 'video') {
+    return 'Video';
+  }
+
+  const backgroundImage = computedStyle.backgroundImage;
+  if (backgroundImage && backgroundImage !== 'none') {
+    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
+      const area = element.offsetWidth * element.offsetHeight;
+      const hasReasonableSize = area > 1000;
+      const hasFewChildren = element.children.length <= 2;
+      
+      if (hasReasonableSize && hasFewChildren) {
+        return 'Image';
+      }
+    }
+  }
+
+    if (tagName === 'button') return 'Button';
+    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
+    if (element.getAttribute('role') === 'button') return 'Button';
+
+    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
+    const hasButtonClass = buttonClasses.some(cls =>
+      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
+    );
+
+    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
+      return 'Button';
+    }
+
+    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
+    if (textTags.includes(tagName)) {
+      return 'Text';
+    }
+
+    if (tagName === 'div') {
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+      
+      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
+        return 'Text';
+      }
+      
+      return 'Div';
+    }
+
+    if (tagName === 'article') {
+      return 'Article';
+    }
+
+    if (tagName === 'a' && !element.getAttribute('href')) {
+      return 'Text';
+    }
+
+    return 'Section';
+  };
+
+  const extractOriginalUrl = (url) => {
+    if (!url) return url;
+
+    if (url.includes('/_next/')) {
+      try {
+        const urlObj = new URL(url);
+        const originalPath = urlObj.searchParams.get('url');
+        if (originalPath) {
+          return originalPath;
+        }
+      } catch (e) {
+        return url;
+      }
+    }
+    
+    if (url.includes('.webild.io/')) {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.pathname;
+      } catch (e) {
+        return url;
+      }
+    }
+
+    return url;
+  };
+
+  const getMediaTypeFromUrl = (url) => {
+    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
+    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
+    try {
+      const pathname = new URL(url).pathname.toLowerCase();
+      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
+      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
+    } catch(e) {}
+    return 'unknown';
+  };
+
+  const swapMediaElement = (oldEl, newTag, newSrc) => {
+    const newEl = document.createElement(newTag);
+    Array.from(oldEl.attributes).forEach(function(attr) {
+      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
+        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
+      }
+    });
+    newEl.style.cssText = oldEl.style.cssText;
+    if (newTag === 'video') {
+      newEl.setAttribute('autoplay', '');
+      newEl.setAttribute('loop', '');
+      newEl.setAttribute('muted', '');
+      newEl.setAttribute('playsinline', '');
+    }
+    newEl.src = newSrc;
+    if (oldEl.parentNode) {
+      oldEl.parentNode.replaceChild(newEl, oldEl);
+    }
+    return newEl;
+  };
+
+  const getElementInfo = (element, assignId = false) => {
+    const rect = element.getBoundingClientRect();
+    const tagName = element.tagName.toLowerCase();
+    const selector = getUniqueSelector(element, assignId);
+    const sectionId = getSectionId(element);
+    
+    let className = undefined;
+    try {
+      if (element.className) {
+        if (typeof element.className === 'string') {
+          className = element.className;
+        } else if (element.className.baseVal !== undefined) {
+          className = element.className.baseVal;
+        }
+      }
+    } catch (e) {}
+    
+    const info = {
+      tagName: tagName,
+      id: element.id || undefined,
+      className: className,
+      selector: selector,
+      elementType: null,
+      sectionId: sectionId,
+      boundingBox: {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      }
+    };
+    
+    if (tagName === 'img') {
+      const originalSrc = extractOriginalUrl(element.src);
+      info.imageData = {
+        src: originalSrc,
+        alt: element.alt || undefined,
+        naturalWidth: element.naturalWidth,
+        naturalHeight: element.naturalHeight,
+        isBackground: false
+      };
+    }
+
+    if (tagName === 'video') {
+      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
+        src: resolvedSrc,
+        alt: element.getAttribute('aria-label') || undefined,
+        isBackground: false,
+        isVideo: true
+      };
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    const backgroundImage = computedStyle.backgroundImage;
+    if (backgroundImage && backgroundImage !== 'none') {
+      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+      if (urlMatch) {
+        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
+        if (tagName !== 'img') {
+          info.imageData = {
+            src: originalBgSrc,
+            isBackground: true
+          };
+        } else {
+          if (!info.imageData) info.imageData = {};
+          info.imageData.backgroundImageSrc = originalBgSrc;
+        }
+      }
+    }
+    
+    const elementType = getElementType(element);
+    info.elementType = elementType;
+    
+    if (elementType === 'Button') {
+      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
+      const buttonHref = element.getAttribute('href') ||
+                        element.getAttribute('data-href') ||
+                        element.getAttribute('onclick') ||
+                        element.dataset?.link ||
+                        undefined;
+
+      info.buttonData = {
+        text: buttonText,
+        href: buttonHref
+      };
+    }
+
+    if (elementType === 'Text') {
+      info.textContent = element.textContent || '';
+    }
+    
+    return info;
+  };
+  
+  const isValidElement = (element) => {
+    if (!isActive) return false;
+    const tagName = element.tagName?.toLowerCase();
+    if (invalidElements.includes(tagName)) return false;
+    const isImage = tagName === 'img';
+    const isVideo = tagName === 'video';
+    if (isImage || isVideo) return true;
+    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
+    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
+    const hasChildren = element.children && element.children.length > 0;
+    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
+      return false;
+    }
+    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
+      return false;
+    }
+    
+    return true;
+  };
+
+  const getMostSpecificElement = (x, y) => {
+    const elements = document.elementsFromPoint(x, y);
+    const validElements = elements.filter(el =>
+      isValidElement(el) &&
+      !el.classList.contains('webild-hover-overlay') &&
+      !el.classList.contains('webild-element-type-label')
+    );
+
+    if (validElements.length === 0) return null;
+    const scoredElements = validElements.map(element => {
+      let score = 0;
+      const rect = element.getBoundingClientRect();
+      const tagName = element.tagName.toLowerCase();
+      const computedStyle = window.getComputedStyle(element);
+      let depth = 0;
+      let current = element;
+      while (current && current !== document.body) {
+        depth++;
+        current = current.parentElement;
+      }
+      score += depth * 2;
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+
+      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
+      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
+      const hasFewChildren = element.children.length <= 3;
+      const area = rect.width * rect.height;
+      const viewportArea = window.innerWidth * window.innerHeight;
+      const isSmallElement = area < viewportArea * 0.1;
+      if (hasDirectText) score += 20;
+      if (hasImages) score += 15;
+      if (isInteractive) score += 25;
+      if (hasFewChildren) score += 10;
+      if (isSmallElement) score += 5;
+      if (area > viewportArea * 0.3) score -= 30;
+      if (element.hasAttribute('data-section')) score -= 15;
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
+      if (['p', 'span', 'label'].includes(tagName)) score += 15;
+      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
+
+      return { element, score };
+    });
+    scoredElements.sort((a, b) => b.score - a.score);
+    return scoredElements[0]?.element || validElements[0];
+  };
+
+  const isTextElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Text';
+  };
+
+  const isButtonElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Button';
+  };
+
+  const updateButtonText = (element, newText) => {
+    const textNodes = [];
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+
+    let node;
+    while (node = walker.nextNode()) {
+      if (node.textContent && node.textContent.trim()) {
+        textNodes.push(node);
+      }
+    }
+
+    if (textNodes.length > 0) {
+      textNodes[0].textContent = newText;
+      for (let i = 1; i < textNodes.length; i++) {
+        textNodes[i].textContent = '';
+      }
+    } else {
+      element.textContent = newText;
+    }
+  };
+
+  const makeEditable = (element, clickEvent) => {
+    if (!isTextElement(element)) return;
+    
+    originalContent = element.textContent;
+    element.contentEditable = 'true';
+    
+    if (!element.dataset.webildOriginalWhiteSpace) {
+      const computedStyle = window.getComputedStyle(element);
+      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
+      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
+      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
+      element.dataset.webildOriginalOverflow = computedStyle.overflow;
+    }
+    
+    element.style.whiteSpace = 'pre-wrap';
+    element.style.wordWrap = 'break-word';
+    element.style.overflowWrap = 'break-word';
+    element.style.overflow = 'visible';
+    
+    element.focus();
+    isEditing = true;
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-started',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    const handleBeforeInput = (e) => {
+      // Prevent deletion if it would leave the element empty
+      const currentText = element.textContent || '';
+      const inputType = e.inputType;
+      
+      // Check if this is a delete operation that would leave the element empty
+      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
+        e.preventDefault();
+        element.textContent = ' ';
+        // Move cursor to the beginning
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild || element, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    };
+    
+    const handleInput = () => {
+      const elementInfo = getElementInfo(element);
+      let currentText = element.textContent;
+      
+      // Ensure there's always at least a space to keep the element editable
+      if (currentText === '' || currentText === null || currentText.length === 0) {
+        element.textContent = ' ';
+        currentText = ' ';
+        // Move cursor to the beginning
+        try {
+          const range = document.createRange();
+          const sel = window.getSelection();
+          range.setStart(element.firstChild || element, 0);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } catch (e) {
+          // Ignore cursor positioning errors
+        }
+      }
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: {
+          type: 'updateText',
+          selector: elementInfo.selector,
+          oldValue: originalContent,
+          newValue: currentText,
+          elementType: elementInfo.elementType,
+          sectionId: elementInfo.sectionId,
+          timestamp: Date.now()
+        }
+      }, '*');
+      
+      if (currentText !== originalContent) {
+        window.parent.postMessage({
+          type: 'webild-text-changed',
+          data: { 
+            selector: elementInfo.selector,
+            hasChanges: true
+          }
+        }, '*');
+      }
+    };
+    
+    element.addEventListener('beforeinput', handleBeforeInput);
+    element.addEventListener('input', handleInput);
+    element.dataset.inputHandler = 'true';
+    element.dataset.beforeInputHandler = 'true';
+    
+    if (clickEvent && element.childNodes.length > 0) {
+      try {
+        let range = null;
+        
+        if (document.caretRangeFromPoint) {
+          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
+        } else if (document.caretPositionFromPoint) {
+          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
+          if (position) {
+            range = document.createRange();
+            range.setStart(position.offsetNode, position.offset);
+            range.collapse(true);
+          }
+        }
+        
+        if (range) {
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      } catch (e) {
+        console.warn('[Webild] Could not set caret position:', e);
+      }
+    }
+  };
+  
+  const makeUneditable = (element, save = false) => {
+    if (!element || element.contentEditable !== 'true') return;
+    
+    element.contentEditable = 'false';
+    isEditing = false;
+    
+    if (element.dataset.webildOriginalWhiteSpace) {
+      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
+      delete element.dataset.webildOriginalWhiteSpace;
+    }
+    if (element.dataset.webildOriginalWordWrap) {
+      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
+      delete element.dataset.webildOriginalWordWrap;
+    }
+    if (element.dataset.webildOriginalOverflowWrap) {
+      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
+      delete element.dataset.webildOriginalOverflowWrap;
+    }
+    if (element.dataset.webildOriginalOverflow) {
+      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
+      delete element.dataset.webildOriginalOverflow;
+    }
+    
+    if (element.dataset.beforeInputHandler === 'true') {
+      element.removeEventListener('beforeinput', () => {});
+      delete element.dataset.beforeInputHandler;
+    }
+    
+    if (element.dataset.inputHandler === 'true') {
+      element.removeEventListener('input', () => {});
+      delete element.dataset.inputHandler;
+    }
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-ended',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    if (save && originalContent !== element.textContent) {
+      const elementInfo = getElementInfo(element);
+      let finalText = element.textContent;
+      
+      // Trim the final text and convert space-only to empty string for saving
+      if (finalText === ' ' || finalText.trim() === '') {
+        finalText = '';
+        // Update the actual element text to empty for display
+        element.textContent = '';
+      }
+      
+      const change = {
+        type: 'updateText',
+        selector: elementInfo.selector,
+        oldValue: originalContent,
+        newValue: finalText,
+        elementType: elementInfo.elementType,
+        sectionId: elementInfo.sectionId,
+        timestamp: Date.now()
+      };
+
+      saveChangeToStorage(change);
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: change
+      }, '*');
+    } else if (!save && originalContent !== null) {
+      element.textContent = originalContent;
+    }
+    
+    originalContent = null;
+  };
+  
+  const createHoverOverlay = (element) => {
+    const rect = element.getBoundingClientRect();
+    const overlay = document.createElement('div');
+    overlay.className = 'webild-hover-overlay';
+    overlay.style.cssText = \`
+      position: fixed !important;
+      top: \${rect.top - 2}px !important;
+      left: \${rect.left - 2}px !important;
+      width: \${rect.width + 4}px !important;
+      height: \${rect.height + 4}px !important;
+      background-color: rgba(90, 113, 230, 0.15) !important;
+      pointer-events: none !important;
+      z-index: 999998 !important;
+      transition: all 0.15s ease !important;
+    \`;
+    document.body.appendChild(overlay);
+    return overlay;
+  };
+  
+  const removeHoverOverlay = () => {
+    if (hoverOverlay) {
+      hoverOverlay.remove();
+      hoverOverlay = null;
+    }
+  };
+  
+  const showElementTypeLabel = (element, elementType) => {
+    if (!elementType) return;
+
+    removeElementTypeLabel();
+
+    const rect = element.getBoundingClientRect();
+    elementTypeLabel = document.createElement('div');
+    elementTypeLabel.className = 'webild-element-type-label';
+    const ariaLabel = element.getAttribute('aria-label');
+    let labelText;
+    
+    if (elementType === 'Div') {
+      labelText = 'Div';
+    } else if (elementType === 'Article') {
+      labelText = 'Article';
+    } else if (elementType === 'Section') {
+      labelText = ariaLabel || 'Section';
+    } else {
+      labelText = elementType;
+    }
+    
+    elementTypeLabel.textContent = labelText;
+    document.body.appendChild(elementTypeLabel);
+    const labelRect = elementTypeLabel.getBoundingClientRect();
+    let labelTop = rect.top - labelRect.height - 2;
+    let labelLeft = rect.left - 3;
+    let isLabelOnTop = true;
+    if (labelTop < 0) {
+      labelTop = rect.bottom + 1;
+      isLabelOnTop = false;
+    }
+    if (labelTop + labelRect.height > window.innerHeight) {
+      labelTop = rect.bottom - labelRect.height;
+      isLabelOnTop = false;
+      if (labelTop < 0) {
+        labelTop = rect.top;
+        isLabelOnTop = true;
+      }
+    }
+    if (labelLeft + labelRect.width > window.innerWidth) {
+      labelLeft = window.innerWidth - labelRect.width;
+    }
+    if (labelLeft < 0) {
+      labelLeft = 0;
+    }
+    if (isLabelOnTop) {
+      elementTypeLabel.classList.add('label-top');
+    } else {
+      elementTypeLabel.classList.add('label-bottom');
+    }
+
+    elementTypeLabel.style.cssText = \`
+      left: \${labelLeft}px !important;
+      top: \${labelTop}px !important;
+      transform: none !important;
+    \`;
+  };
+  
+  const removeElementTypeLabel = () => {
+    if (elementTypeLabel) {
+      elementTypeLabel.remove();
+      elementTypeLabel = null;
+    }
+  };
+  
+  const handleMouseOver = (e) => {
+    if (!isActive) return;
+
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+
+    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+
+    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
+      return;
+    }
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    hoveredElement = target;
+    
+    const computedStyle = window.getComputedStyle(target);
+    const currentPosition = computedStyle.position;
+    
+    if (currentPosition === 'static' || currentPosition === '') {
+      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+      hoveredElement.style.position = 'relative';
+    }
+    
+    hoveredElement.classList.add(hoverClass);
+    
+    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
+      hoverOverlay = createHoverOverlay(target);
+    }
+    
+    const elementType = getElementType(target);
+    showElementTypeLabel(target, elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-hover',
+      data: getElementInfo(target, false)
+    }, '*');
+  };
+  
+  const handleMouseOut = (e) => {
+    if (!isActive) return;
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      hoveredElement = null;
+      
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+  };
+  
+  const handleClick = (e) => {
+  if (!isActive) return;
+
+  if (isEditing) {
+    e.stopPropagation();
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  if (!isValidElement(target)) return;
+    
+    if (selectedElement && selectedElement !== target) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      selectedElement.classList.remove(hoverClass);
+      
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    if (selectedElement === target) {
+      if (target.dataset.webildOriginalPosition) {
+        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
+        delete target.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      selectedElement = null;
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+      return;
+    }
+    
+    selectedElement = target;
+    selectedElement.classList.add(selectedClass);
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (hoveredElement === target) {
+      hoveredElement.classList.remove(hoverClass);
+      hoveredElement = null;
+    }
+    
+    const elementInfo = getElementInfo(target, true);
+    selectedElement.dataset.webildSelector = elementInfo.selector;
+    showElementTypeLabel(target, elementInfo.elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-selected',
+      data: elementInfo
+    }, '*');
+    
+    if (isTextElement(target)) {
+      setTimeout(() => makeEditable(target, e), 50);
+    }
+  };
+  
+  const handleKeyDown = (e) => {
+    if (!isActive) return;
+    if (!isEditing || !selectedElement) return;
+    
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      makeUneditable(selectedElement, true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      makeUneditable(selectedElement, false);
+    }
+  };
+  
+  const handleBlur = (e) => {
+    if (!isActive) return;
+    if (isEditing && selectedElement && e.target === selectedElement) {
+      makeUneditable(selectedElement, true);
+    }
+  };
+  
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  const handleScroll = () => {
+    if (!isActive) return;
+    
+    if (isEditing) return;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      selectedElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+    }
+
+    if (hoveredElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      hoveredElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+
+    removeHoverOverlay();
+    removeElementTypeLabel();
+
+    isScrolling = true;
+
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+
+    scrollTimeout = setTimeout(() => {
+      isScrolling = false;
+
+      if (lastMouseX > 0 && lastMouseY > 0) {
+        const target = getMostSpecificElement(lastMouseX, lastMouseY);
+        if (target && isValidElement(target) && target !== selectedElement) {
+          hoveredElement = target;
+
+          const computedStyle = window.getComputedStyle(target);
+          const currentPosition = computedStyle.position;
+
+          if (currentPosition === 'static' || currentPosition === '') {
+            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+            hoveredElement.style.position = 'relative';
+          }
+
+          hoveredElement.classList.add(hoverClass);
+          hoverOverlay = createHoverOverlay(target);
+
+          const elementType = getElementType(target);
+          showElementTypeLabel(target, elementType);
+
+          window.parent.postMessage({
+            type: 'webild-element-hover',
+            data: getElementInfo(target, false)
+          }, '*');
+        }
+      }
+    }, 150);
+
+    window.parent.postMessage({
+      type: 'webild-iframe-scroll'
+    }, '*');
+  };
+  
+  const getStorageKey = () => {
+    const url = new URL(window.location.href);
+    const pathParts = url.pathname.split('/').filter(Boolean);
+    return \`webild-changes-\${pathParts.join('-')}\`;
+  };
+
+  const saveChangeToStorage = (change) => {
+    try {
+      const storageKey = getStorageKey();
+      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+
+      const filteredChanges = existingChanges.filter(c => {
+        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
+      });
+      filteredChanges.push(change);
+
+      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
+
+      window.parent.postMessage({
+        type: 'webild-change-saved-locally',
+        data: { change, allChanges: filteredChanges }
+      }, '*');
+    } catch (error) {
+      console.error('Failed to save change to localStorage:', error);
+    }
+  };
+
+  const clearLocalChanges = () => {
+    try {
+      const storageKey = getStorageKey();
+      localStorage.removeItem(storageKey);
+      window.parent.postMessage({
+        type: 'webild-local-changes-cleared',
+        data: {}
+      }, '*');
+    } catch (error) {
+      console.error('Failed to clear local changes:', error);
+    }
+  };
+
+  const handleMessage = (e) => {
+    if (!e.data || !e.data.type) return;
+
+    if (e.data.type === 'webild-activate-editor') {
+      if (!isActive) {
+        isActive = true;
+        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-deactivate-editor') {
+      if (isActive) {
+        isActive = false;
+
+        if (selectedElement) {
+          makeUneditable(selectedElement, false);
+          selectedElement.classList.remove(selectedClass);
+          selectedElement = null;
+        }
+        if (hoveredElement) {
+          hoveredElement.classList.remove(hoverClass);
+          hoveredElement = null;
+        }
+
+        removeHoverOverlay();
+        removeElementTypeLabel();
+        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-clear-local-changes') {
+      clearLocalChanges();
+      return;
+    }
+
+    if (e.data.type === 'webild-cancel-changes') {
+      try {
+        const storageKey = getStorageKey();
+        const savedChanges = localStorage.getItem(storageKey);
+        if (savedChanges) {
+          const changes = JSON.parse(savedChanges);
+          changes.forEach(change => {
+            try {
+              const element = document.querySelector(change.selector);
+              if (!element) return;
+
+              if (change.type === 'updateText') {
+                if (isTextElement(element)) {
+                  element.textContent = change.oldValue;
+                }
+              } else if (change.type === 'updateButton') {
+                if (isButtonElement(element)) {
+                  updateButtonText(element, change.oldValue);
+                }
+              } else if (change.type === 'replaceImage') {
+                const revertTag = element.tagName.toLowerCase();
+                const isBackground = revertTag !== 'img' && revertTag !== 'video';
+                if (isBackground) {
+                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
+                } else {
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
+                    swapMediaElement(element, 'img', change.oldValue);
+                  } else if (revertTag === 'img' && oldMediaType === 'video') {
+                    swapMediaElement(element, 'video', change.oldValue);
+                  } else if (revertTag === 'video') {
+                    element.src = change.oldValue;
+                    element.load();
+                  } else {
+                    element.src = change.oldValue;
+                  }
+                }
+              }
+            } catch (err) {
+              console.warn('[Webild] Failed to revert change:', err);
+            }
+          });
+        }
+        clearLocalChanges();
+      } catch (error) {
+        console.error('[Webild] Failed to cancel changes:', error);
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-text') {
+      const { selector, newValue, oldValue, sectionId } = e.data.data;
+      try {
+        let element = null;
+        
+        if (selectedElement && isTextElement(selectedElement)) {
+          element = selectedElement;
+        }
+        else if (selector) {
+          try {
+            element = document.querySelector(selector);
+          } catch (err) {
+            console.warn('[Webild] Invalid selector:', selector);
+          }
+        }
+        
+        if (!element && sectionId) {
+          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
+          if (sectionElement) {
+            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
+            for (let i = 0; i < textElements.length; i++) {
+              const el = textElements[i];
+              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
+                element = el;
+                const newSelector = getUniqueSelector(element, true);
+                if (newSelector) {
+                  element.dataset.webildSelector = newSelector;
+                }
+                break;
+              }
+            }
+          }
+        }
+        
+        if (element && isTextElement(element)) {
+          element.textContent = newValue;
+          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
+          
+          window.parent.postMessage({
+            type: 'webild-text-update-success',
+            data: {
+              selector: finalSelector,
+              newValue: newValue
+            }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-text-update-failed',
+            data: { selector, newValue }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-text-update-failed',
+          data: { selector, newValue, error: error.message }
+        }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-button') {
+      const { selector, text, href } = e.data.data;
+      try {
+        const element = document.querySelector(selector);
+        if (element && isButtonElement(element)) {
+          if (text !== undefined) {
+            updateButtonText(element, text);
+          }
+          if (href !== undefined) {
+            if (element.tagName.toLowerCase() === 'a') {
+              element.href = href;
+            } else {
+              element.setAttribute('data-href', href);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('[Webild] Invalid selector for button update:', selector, error);
+      }
+      return;
+    }
+
+    if (!isActive) return;
+
+    if (e.data.type === 'webild-replace-image') {
+      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
+      let element = null;
+
+      try {
+        element = document.querySelector(selector);
+      } catch {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
+        }, '*');
+        return;
+      }
+
+      if (!element) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Element not found', success: false }
+        }, '*');
+        return;
+      }
+
+      try {
+        let replaced = false;
+        let oldValue = '';
+
+        if (isBackground) {
+          oldValue = window.getComputedStyle(element).backgroundImage;
+          element.style.backgroundImage = \`url('\${newSrc}')\`;
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'img') {
+          oldValue = element.src;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            element.src = newSrc;
+          }
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'video') {
+          oldValue = element.src || element.currentSrc || '';
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
+          if (newMediaType === 'image' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            if (sources.length > 0) {
+              sources.forEach(function(source) { source.src = newSrc; });
+              element.load();
+            } else {
+              element.src = newSrc;
+              element.load();
+            }
+          }
+          replaced = true;
+        } else {
+          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+          if (hasBackgroundImage) {
+            oldValue = window.getComputedStyle(element).backgroundImage;
+            element.style.backgroundImage = \`url('\${newSrc}')\`;
+            replaced = true;
+          }
+        }
+
+        if (replaced) {
+          const elementInfo = getElementInfo(element);
+
+          let cleanOldValue = oldValue;
+          if (oldValue.includes('url(')) {
+            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
+            if (urlMatch) {
+              cleanOldValue = urlMatch[1];
+            }
+          }
+
+          cleanOldValue = extractOriginalUrl(cleanOldValue);
+
+          const change = {
+            type: 'replaceImage',
+            selector: selector,
+            oldValue: cleanOldValue,
+            newValue: newSrc,
+            elementType: elementInfo.elementType,
+            sectionId: elementInfo.sectionId,
+            timestamp: Date.now()
+          };
+
+          saveChangeToStorage(change);
+
+          window.parent.postMessage({
+            type: 'webild-element-changed',
+            data: change
+          }, '*');
+
+          window.parent.postMessage({
+            type: 'webild-image-replaced',
+            data: { selector, newSrc, success: true }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-image-replacement-error',
+            data: { selector, message: 'Could not determine how to replace image', success: false }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: error.message || 'Failed to replace image', success: false }
+        }, '*');
+      }
+    }
+  };
+  
+  document.addEventListener('mouseover', handleMouseOver, true);
+  document.addEventListener('mouseout', handleMouseOut, true);
+  document.addEventListener('click', handleClick, true);
+  document.addEventListener('keydown', handleKeyDown, true);
+  document.addEventListener('blur', handleBlur, true);
+  window.addEventListener('scroll', handleScroll, true);
+  window.addEventListener('message', handleMessage, true);
+  
+  let lastPathname = window.location.pathname;
+  
+  const notifyPageChange = () => {
+    window.parent.postMessage({
+      type: 'webild-page-changed',
+      data: { pathname: window.location.pathname }
+    }, '*');
+  };
+  
+  window.addEventListener('popstate', () => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, true);
+  
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
+  
+  notifyPageChange();
+  
+  window.webildCleanup = () => {
+    isActive = false;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+    }
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (urlCheckInterval) {
+      clearInterval(urlCheckInterval);
+    }
+    
+    document.removeEventListener('mouseover', handleMouseOver, true);
+    document.removeEventListener('mouseout', handleMouseOut, true);
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('keydown', handleKeyDown, true);
+    document.removeEventListener('blur', handleBlur, true);
+    window.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('message', handleMessage, true);
+    
+    document.querySelectorAll('.' + hoverClass).forEach(el => {
+      el.classList.remove(hoverClass);
+    });
+    document.querySelectorAll('.' + selectedClass).forEach(el => {
+      el.classList.remove(selectedClass);
+    });
+    
+    const styleEl = document.getElementById('webild-inspector-styles');
+    if (styleEl) styleEl.remove();
+    
+    hoveredElement = null;
+    selectedElement = null;
+  };
+  
+  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
+})();
 `
           }}
         />
-- 
2.49.1


From 382419fb278b3edcb0d3189b9ada903c8a4d377c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:56 +0000
Subject: [PATCH 4/8] Update src/app/modules/page.tsx

---
 src/app/modules/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/page.tsx b/src/app/modules/page.tsx
index 18198e4..3e55c97 100644
--- a/src/app/modules/page.tsx
+++ b/src/app/modules/page.tsx
@@ -48,7 +48,7 @@ export default function ModulesPage() {
               description:
                 "Learn the clinical applications and learning objectives for hand and wrist radiographic procedures in orthopedic and general radiography practice. This foundational module establishes the context for all subsequent learning.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/indian-physician-consulting-male-patient-medical-facility-chroma-key_482257-118501.jpg",
+                "http://img.b2bpic.net/free-photo/indian-physician-consulting-male-patient-medical-facility-chroma-key_482257-118501.jpg?_wi=2",
             },
             {
               id: 2,
@@ -58,7 +58,7 @@ export default function ModulesPage() {
               description:
                 "Study well-labeled anatomical diagrams showing all hand and wrist structures including skeletal anatomy, neural supply, and vascular anatomy for accurate radiographic interpretation. Essential foundation for proper projection selection and image analysis.",
               imageSrc:
-                "http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg",
+                "http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg?_wi=4",
             },
             {
               id: 3,
@@ -68,7 +68,7 @@ export default function ModulesPage() {
               description:
                 "Comprehensive tabulated projections with instructional videos for fingers, hand, and wrist positioning to ensure optimal radiographic images. Each projection includes technical factors, patient positioning, and quality criteria.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg",
+                "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=3",
             },
           ]}
           title="Learning Modules - Comprehensive Curriculum"
@@ -123,7 +123,7 @@ export default function ModulesPage() {
           title="Module Questions & Support"
           description="Find detailed answers about accessing, completing, and getting the most from our radiography education modules."
           tag="Module Support"
-          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg?_wi=1"
           imageAlt="Radiography imaging reference"
           textboxLayout="default"
           useInvertedBackground={true}
@@ -140,7 +140,7 @@ export default function ModulesPage() {
           description="Have questions about modules or need technical assistance? Subscribe to our support newsletter for resources, tips, and updates."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=2"
           imageAlt="Medical professional support"
           mediaAnimation="slide-up"
           mediaPosition="right"
-- 
2.49.1


From e3c370d45a3b81c26fbe9be723ebabf8802ad17f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:56 +0000
Subject: [PATCH 5/8] Update src/app/page.tsx

---
 src/app/page.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 95b1011..f91e3fa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -65,7 +65,7 @@ export default function HomePage() {
               description:
                 "Learn the clinical applications and learning objectives for hand and wrist radiographic procedures in orthopedic and general radiography practice.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/indian-physician-consulting-male-patient-medical-facility-chroma-key_482257-118501.jpg",
+                "http://img.b2bpic.net/free-photo/indian-physician-consulting-male-patient-medical-facility-chroma-key_482257-118501.jpg?_wi=1",
             },
             {
               id: 2,
@@ -75,7 +75,7 @@ export default function HomePage() {
               description:
                 "Study well-labeled anatomical diagrams showing all hand and wrist structures including skeletal anatomy, neural supply, and vascular anatomy for accurate radiographic interpretation.",
               imageSrc:
-                "http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg",
+                "http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg?_wi=1",
             },
             {
               id: 3,
@@ -85,7 +85,7 @@ export default function HomePage() {
               description:
                 "Comprehensive tabulated projections with instructional videos for fingers, hand, and wrist positioning to ensure optimal radiographic images.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg",
+                "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=1",
             },
             {
               id: 4,
@@ -95,7 +95,7 @@ export default function HomePage() {
               description:
                 "Learn proper positive patient identification procedures, room preparation, safety checks, and quality assurance protocols before beginning radiographic procedures.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/physician-his-medical-team-meet-office-analyze-radiography-data_482257-123097.jpg",
+                "http://img.b2bpic.net/free-photo/physician-his-medical-team-meet-office-analyze-radiography-data_482257-123097.jpg?_wi=1",
             },
             {
               id: 5,
@@ -105,7 +105,7 @@ export default function HomePage() {
               description:
                 "Detailed procedural scripts for hand and wrist radiography with standardized protocols, positioning guidelines, and technical parameters for each projection.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg",
+                "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=2",
             },
             {
               id: 6,
@@ -115,7 +115,7 @@ export default function HomePage() {
               description:
                 "Learn to evaluate radiographic image quality using the PACEMAN criteria (Positioning, Anatomy, Collimation, Exposure, Markers, Artifacts, Noise) for professional assessment.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg",
+                "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=1",
             },
           ]}
           title="Structured Learning Path"
@@ -132,7 +132,7 @@ export default function HomePage() {
           title="Hand & Wrist Anatomy"
           description="Comprehensive anatomical reference with well-labeled diagrams showing skeletal structures, nerve supply, blood vessels, and joint mechanics essential for radiographic interpretation and procedural understanding."
           tag="Anatomy Reference"
-          imageSrc="http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg"
+          imageSrc="http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg?_wi=2"
           imageAlt="Hand and wrist anatomical structure diagram"
           useInvertedBackground={true}
           buttons={[{ text: "Explore Full Anatomy", href: "anatomy" }]}
@@ -149,7 +149,7 @@ export default function HomePage() {
               testimonial:
                 "The structured modules and video guides made learning radiographic procedures so much clearer. I passed my certification exam on the first try!",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=1",
               imageAlt: "Sarah Johnson",
             },
             {
@@ -159,7 +159,7 @@ export default function HomePage() {
               testimonial:
                 "Excellent resource for teaching students proper technique. The anatomy diagrams and PACEMAN evaluation framework are invaluable in our curriculum.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=2",
               imageAlt: "Dr. Michael Chen",
             },
             {
@@ -169,7 +169,7 @@ export default function HomePage() {
               testimonial:
                 "Perfect for keeping my skills sharp and staying updated with best practices. The radiation safety module is comprehensive and practical.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=3",
               imageAlt: "Emily Rodriguez",
             },
             {
@@ -179,7 +179,7 @@ export default function HomePage() {
               testimonial:
                 "The procedural scripts are so detailed and easy to follow. I finally understand the reasoning behind each positioning technique.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=4",
               imageAlt: "James Wilson",
             },
             {
@@ -189,7 +189,7 @@ export default function HomePage() {
               testimonial:
                 "Our program adopted RadiologyLearn for clinical training. Student competency has improved significantly with these standardized modules.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=5",
               imageAlt: "Dr. Patricia Okafor",
             },
             {
@@ -199,7 +199,7 @@ export default function HomePage() {
               testimonial:
                 "The image evaluation section using PACEMAN criteria helped me understand what makes a quality radiograph. Highly recommend for any program.",
               imageSrc:
-                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+                "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=6",
               imageAlt: "Marcus Thompson",
             },
           ]}
@@ -255,7 +255,7 @@ export default function HomePage() {
           title="Frequently Asked Questions"
           description="Find answers to common questions about our radiography education platform, modules, and learning resources."
           tag="Support"
-          imageSrc="http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg"
+          imageSrc="http://img.b2bpic.net/free-vector/palmistry-mystical-concept_23-2148565160.jpg?_wi=3"
           imageAlt="Hand anatomy reference diagram"
           textboxLayout="default"
           useInvertedBackground={true}
@@ -272,7 +272,7 @@ export default function HomePage() {
           description="Get notified about new modules, video tutorials, clinical updates, and educational resources for radiographic hand and wrist procedures."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=7"
           imageAlt="Medical education and learning"
           mediaAnimation="slide-up"
           mediaPosition="right"
-- 
2.49.1


From 2168cd10f570a22c1c5d14ed2eb7039344b751c2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:57 +0000
Subject: [PATCH 6/8] Update src/app/procedures/page.tsx

---
 src/app/procedures/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/procedures/page.tsx b/src/app/procedures/page.tsx
index 0320503..8ef8be9 100644
--- a/src/app/procedures/page.tsx
+++ b/src/app/procedures/page.tsx
@@ -43,7 +43,7 @@ export default function ProceduresPage() {
           title="Procedure Guidelines & Scripts"
           description="Comprehensive step-by-step procedural scripts for hand and wrist radiography with standardized protocols, positioning guidelines, and technical parameters for each projection. Master proper patient preparation, room setup, and quality assurance protocols."
           tag="Procedure Scripts"
-          imageSrc="http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=7"
           imageAlt="Radiography positioning technique and patient preparation"
           useInvertedBackground={true}
           buttons={[
@@ -67,7 +67,7 @@ export default function ProceduresPage() {
               title: "Patient Identification & Preparation",
               subtitle: "Verify patient identity and explain the procedure",
               description: "Confirm positive patient identification using two identifiers, explain the radiographic procedure and potential risks, obtain informed consent, address patient concerns, and prepare the patient for optimal positioning and cooperation.",
-              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=8",
               imageAlt: "Patient preparation for radiography",
             },
             {
@@ -76,7 +76,7 @@ export default function ProceduresPage() {
               title: "Room Preparation & Safety Checks",
               subtitle: "Configure equipment and verify safety protocols",
               description: "Ensure equipment is functioning properly, verify radiation protection devices, check gonadal shielding availability, confirm collimation device function, test image acquisition systems, and verify all safety interlocks and warning systems are operational.",
-              imageSrc: "http://img.b2bpic.net/free-photo/physician-his-medical-team-meet-office-analyze-radiography-data_482257-123097.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/physician-his-medical-team-meet-office-analyze-radiography-data_482257-123097.jpg?_wi=2",
               imageAlt: "Medical equipment safety verification",
             },
             {
@@ -85,7 +85,7 @@ export default function ProceduresPage() {
               title: "Finger & Hand Radiographic Positioning",
               subtitle: "Master proper positioning for digits and hand projections",
               description: "Position fingers individually or as a group on image receptor, maintain proper alignment with X-ray beam, ensure adequate spacing between digits, verify collimation to area of interest, confirm positioning markers placement, and execute exposure with optimized technical factors.",
-              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=9",
               imageAlt: "Hand and finger positioning technique",
             },
             {
@@ -94,7 +94,7 @@ export default function ProceduresPage() {
               title: "Wrist Radiographic Procedures",
               subtitle: "Execute wrist projections with precision alignment",
               description: "Position wrist joint on image receptor with correct alignment, apply proper collimation to wrist region, utilize gonadal shielding, select appropriate technical parameters for wrist anatomy, verify artifact-free positioning, confirm marker placement, and maintain consistent technique.",
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=3",
               imageAlt: "Wrist positioning and radiographic technique",
             },
             {
@@ -103,7 +103,7 @@ export default function ProceduresPage() {
               title: "Image Quality & Initial Assessment",
               subtitle: "Verify radiographic quality before patient release",
               description: "Review image for proper anatomy visualization, verify positioning accuracy and alignment, confirm absence of motion artifacts, check collimation appropriateness, assess exposure adequacy, verify all required markers are present, and confirm image meets institutional quality standards.",
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctors-looking-radiography_23-2149355033.jpg?_wi=4",
               imageAlt: "Radiographic image quality assessment",
             },
             {
@@ -112,7 +112,7 @@ export default function ProceduresPage() {
               title: "Procedure Documentation & Records",
               subtitle: "Complete all required documentation and patient records",
               description: "Document procedure date, time, and technical parameters, record any patient reactions or complications, note any deviations from standard protocol, ensure all images are properly identified with required markers, file images securely, and maintain compliance with medical record retention policies.",
-              imageSrc: "http://img.b2bpic.net/free-photo/indian-physician-consulting-male-patient-medical-facility-chroma-key_482257-118501.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/indian-physician-consulting-male-patient-medical-facility-chroma-key_482257-118501.jpg?_wi=3",
               imageAlt: "Medical documentation and records management",
             },
           ]}
@@ -142,7 +142,7 @@ export default function ProceduresPage() {
             variant: "sparkles-gradient",
           }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=14"
           imageAlt="Medical education and learning resources"
           mediaAnimation="slide-up"
           mediaPosition="right"
-- 
2.49.1


From f4dbc55cb78bb8fbf9e79629827fa941b2245f00 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:57 +0000
Subject: [PATCH 7/8] Update src/app/projections/page.tsx

---
 src/app/projections/page.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/projections/page.tsx b/src/app/projections/page.tsx
index 3238195..7d2162a 100644
--- a/src/app/projections/page.tsx
+++ b/src/app/projections/page.tsx
@@ -50,7 +50,7 @@ export default function ProjectionsPage() {
               title: "Finger Projections",
               subtitle: "PA, lateral, and oblique views",
               description: "Learn proper positioning for individual finger radiography. Includes PA projection for optimal bone visualization, true lateral view for accurate depth assessment, and oblique projections for improved visualization of joint spaces and bone cortices. Video guides demonstrate patient positioning, hand placement, collimation techniques, and exposure parameters for each projection.",
-              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg"
+              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=4"
             },
             {
               id: 2,
@@ -58,7 +58,7 @@ export default function ProjectionsPage() {
               title: "Hand Radiography",
               subtitle: "PA, lateral, and multiple oblique views",
               description: "Complete hand radiography techniques including PA projection (standard diagnostic view showing all hand structures), true lateral view (demonstrating anterior-posterior relationships), and multiple oblique projections for complete visualization. Videos detail proper hand placement on detector, finger spreading techniques, collimation, and technical parameters for optimal image quality.",
-              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg"
+              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=5"
             },
             {
               id: 3,
@@ -66,7 +66,7 @@ export default function ProjectionsPage() {
               title: "Wrist Projections",
               subtitle: "PA, lateral, oblique, and specialized views",
               description: "Comprehensive wrist imaging includes PA projection (standard carpal bone demonstration), lateral view (showing anterior carpal alignment), scaphoid views, and specialized projections like radial and ulnar oblique views for specific anatomical assessment. Each projection video demonstrates proper arm positioning, hand placement, finger positioning, and exposure techniques for consistent quality.",
-              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg"
+              imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309944.jpg?_wi=6"
             }
           ]}
           textboxLayout="default"
@@ -91,7 +91,7 @@ export default function ProjectionsPage() {
               name: "Sarah Johnson",
               handle: "Radiography Student",
               testimonial: "The video guides for hand and wrist projections were incredibly helpful. Seeing the exact positioning and technique made learning so much clearer than reading descriptions alone.",
-              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=8",
               imageAlt: "Sarah Johnson"
             },
             {
@@ -99,7 +99,7 @@ export default function ProjectionsPage() {
               name: "Dr. Michael Chen",
               handle: "Clinical Educator",
               testimonial: "Excellent resource for teaching positioning techniques. The video demonstrations ensure students learn consistent, quality techniques from day one of clinical practice.",
-              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=9",
               imageAlt: "Dr. Michael Chen"
             },
             {
@@ -107,7 +107,7 @@ export default function ProjectionsPage() {
               name: "Emily Rodriguez",
               handle: "Radiography Technician",
               testimonial: "The projections module is my go-to reference. The step-by-step videos help me maintain consistent technique and troubleshoot positioning issues efficiently.",
-              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=10",
               imageAlt: "Emily Rodriguez"
             },
             {
@@ -115,7 +115,7 @@ export default function ProjectionsPage() {
               name: "James Wilson",
               handle: "Student Radiographer",
               testimonial: "Finally, I can see exactly how the projections should look from setup through positioning to exposure. The multiple camera angles in the videos are really helpful.",
-              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=11",
               imageAlt: "James Wilson"
             },
             {
@@ -123,7 +123,7 @@ export default function ProjectionsPage() {
               name: "Dr. Patricia Okafor",
               handle: "Program Director",
               testimonial: "Our students show significant improvement in positioning consistency. The video tutorials standardize technique across all clinical instructors and settings.",
-              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=12",
               imageAlt: "Dr. Patricia Okafor"
             },
             {
@@ -131,7 +131,7 @@ export default function ProjectionsPage() {
               name: "Marcus Thompson",
               handle: "Clinical Supervisor",
               testimonial: "The projection guides reduce training time significantly. Students arrive at clinical ready to execute proper technique with minimal correction needed.",
-              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=13",
               imageAlt: "Marcus Thompson"
             }
           ]}
-- 
2.49.1


From aca7cdf318f16f74a556d65766487a1d132ec867 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 11:47:58 +0000
Subject: [PATCH 8/8] Update src/app/resources/page.tsx

---
 src/app/resources/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx
index d36b32f..b838581 100644
--- a/src/app/resources/page.tsx
+++ b/src/app/resources/page.tsx
@@ -79,7 +79,7 @@ export default function ResourcesPage() {
                 "The anatomy section features well-labeled diagrams showing all hand and wrist structures including skeletal anatomy, joint mechanics, nerve supply (including motor and sensory branches), blood vessels, and clinically relevant anatomical variations important for radiographic interpretation.",
             },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/images-that-simulate-x-rays-with-neon-colors_23-2151521249.jpg?_wi=6"
           imageAlt="Hand anatomy reference diagram"
           title="Frequently Asked Questions"
           description="Find answers to common questions about our radiography education platform, modules, and learning resources."
@@ -103,7 +103,7 @@ export default function ResourcesPage() {
             variant: "sparkles-gradient",
           }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891194.jpg?_wi=16"
           imageAlt="Medical education and learning"
           mediaAnimation="slide-up"
           mediaPosition="right"
-- 
2.49.1