@yoamigo.com/core 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,3 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/icons/custom-icons.tsx
+var custom_icons_exports = {};
+__export(custom_icons_exports, {
+  CUSTOM_ICON_NAMES: () => CUSTOM_ICON_NAMES,
+  IconBrandAppleMusic: () => IconBrandAppleMusic
+});
+import { forwardRef, createElement } from "react";
+var appleMusicIconNode, IconBrandAppleMusic, CUSTOM_ICON_NAMES;
+var init_custom_icons = __esm({
+  "src/icons/custom-icons.tsx"() {
+    "use strict";
+    appleMusicIconNode = [
+      [
+        "path",
+        {
+          d: "M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.801.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.045-1.773-.6-1.943-1.536a1.88 1.88 0 011.038-2.022c.323-.16.67-.25 1.018-.324.378-.082.758-.153 1.134-.24.274-.063.457-.23.51-.516a.904.904 0 00.02-.193c0-1.815 0-3.63-.002-5.443a.725.725 0 00-.026-.185c-.04-.15-.15-.243-.304-.234-.16.01-.318.035-.475.066-.76.15-1.52.303-2.28.456l-2.325.47-1.374.278c-.016.003-.032.01-.048.013-.277.077-.377.203-.39.49-.002.042 0 .086 0 .13-.002 2.602 0 5.204-.003 7.805 0 .42-.047.836-.215 1.227-.278.64-.77 1.04-1.434 1.233-.35.1-.71.16-1.075.172-.96.036-1.755-.6-1.92-1.544-.14-.812.23-1.685 1.154-2.075.357-.15.73-.232 1.108-.31.287-.06.575-.116.86-.177.383-.083.583-.323.6-.714v-.15c0-2.96 0-5.922.002-8.882 0-.123.013-.25.042-.37.07-.285.273-.448.546-.518.255-.066.515-.112.774-.165.733-.15 1.466-.296 2.2-.444l2.27-.46c.67-.134 1.34-.27 2.01-.403.22-.043.442-.088.663-.106.31-.025.523.17.554.482.008.073.012.148.012.223.002 1.91.002 3.822 0 5.732z",
+          key: "svg-0"
+        }
+      ]
+    ];
+    IconBrandAppleMusic = forwardRef(
+      ({ color = "currentColor", size = 24, className, style, title, ...rest }, ref) => createElement(
+        "svg",
+        {
+          ref,
+          xmlns: "http://www.w3.org/2000/svg",
+          width: size,
+          height: size,
+          viewBox: "0 0 24 24",
+          fill: color,
+          className,
+          style,
+          ...rest
+        },
+        // Title element provides native browser tooltip on hover
+        title && createElement("title", { key: "title" }, title),
+        ...appleMusicIconNode.map(([tag, attrs]) => createElement(tag, attrs))
+      )
+    );
+    IconBrandAppleMusic.displayName = "IconBrandAppleMusic";
+    CUSTOM_ICON_NAMES = ["IconBrandAppleMusic"];
+  }
+});
+
 // src/lib/content-registry.ts
 var contentMap = /* @__PURE__ */ new Map();
 function registerContent(content) {
@@ -234,6 +288,9 @@ var BuilderSelectionManager = class {
         case "GET_CURRENT_PAGE":
           this.sendToParent({ type: "CURRENT_PAGE", pagePath: window.location.pathname });
           break;
+        case "CHECK_BLANK_STATE":
+          this.checkBlankState();
+          break;
       }
     });
   }
@@ -885,16 +942,16 @@ var BuilderSelectionManager = class {
     }
     const links = document.querySelectorAll('a[href^="/"]');
     const routes = /* @__PURE__ */ new Set(["/"]);
-    links.forEach((link) => {
-      const href = link.getAttribute("href");
+    links.forEach((link2) => {
+      const href = link2.getAttribute("href");
       if (href && href.startsWith("/") && !href.includes("http")) {
         const path = href.split("?")[0].replace(/\/$/, "") || "/";
         routes.add(path);
       }
     });
     const navLinks = document.querySelectorAll("nav a[href]");
-    navLinks.forEach((link) => {
-      const href = link.getAttribute("href");
+    navLinks.forEach((link2) => {
+      const href = link2.getAttribute("href");
       if (href?.startsWith("/")) {
         const path = href.split("?")[0].replace(/\/$/, "") || "/";
         routes.add(path);
@@ -1082,6 +1139,66 @@ var BuilderSelectionManager = class {
       return null;
     }
   }
+  /**
+   * Check if the page is visually blank (all white/uniform color)
+   * Uses canvas pixel sampling for accuracy.
+   * Triggered after AI edits to detect if preview went white and needs refresh.
+   */
+  async checkBlankState() {
+    try {
+      const html2canvas = (await import("html2canvas-pro")).default;
+      const canvas = await html2canvas(document.body, {
+        scale: 0.1,
+        // Small scale for speed
+        logging: false,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: null
+        // Preserve actual background
+      });
+      const sampleCanvas = document.createElement("canvas");
+      const size = 100;
+      sampleCanvas.width = size;
+      sampleCanvas.height = size;
+      const ctx = sampleCanvas.getContext("2d");
+      if (!ctx) {
+        this.sendToParent({ type: "BLANK_STATE_RESULT", isBlank: false });
+        return;
+      }
+      ctx.drawImage(canvas, 0, 0, size, size);
+      const samplePoints = [
+        [25, 25],
+        [75, 25],
+        [50, 50],
+        [25, 75],
+        [75, 75],
+        [10, 10],
+        [90, 90],
+        [50, 25],
+        [50, 75],
+        [25, 50]
+      ];
+      const pixels = samplePoints.map(([x, y]) => {
+        const data = ctx.getImageData(x, y, 1, 1).data;
+        return { r: data[0], g: data[1], b: data[2] };
+      });
+      const firstPixel = pixels[0];
+      const tolerance = 10;
+      const allSame = pixels.every(
+        (p) => Math.abs(p.r - firstPixel.r) < tolerance && Math.abs(p.g - firstPixel.g) < tolerance && Math.abs(p.b - firstPixel.b) < tolerance
+      );
+      const isWhitish = firstPixel.r > 240 && firstPixel.g > 240 && firstPixel.b > 240;
+      const isBlank = allSame && isWhitish;
+      this.sendToParent({
+        type: "BLANK_STATE_RESULT",
+        isBlank,
+        sampleColor: `rgb(${firstPixel.r},${firstPixel.g},${firstPixel.b})`
+      });
+    } catch (error) {
+      console.error("[BuilderSelection] Blank check failed:", error);
+      this.sendToParent({ type: "BLANK_STATE_RESULT", isBlank: false });
+    }
+  }
 };
 var instance = null;
 function initBuilderSelection() {
@@ -2041,16 +2158,16 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     if (mode !== "inline-edit" || !containerRef.current) return;
     const container = containerRef.current;
     const handleMouseOver = (e) => {
-      const link = e.target.closest("a");
-      if (!link) return;
+      const link2 = e.target.closest("a");
+      if (!link2) return;
       if (e.target.closest(".mp-text-editing, .mp-text-editable")) return;
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) return;
       clearTimeout(hideTimerRef.current);
       showTimerRef.current = window.setTimeout(() => {
-        const href = link.getAttribute("href") || "";
+        const href = link2.getAttribute("href") || "";
         const { text: text2, isExternal } = extractLinkDisplayText(href);
-        const rect = link.getBoundingClientRect();
+        const rect = link2.getBoundingClientRect();
         const top = rect.bottom + window.scrollY + 8;
         const left = rect.left + rect.width / 2 + window.scrollX;
         setPopoverState({
@@ -2063,8 +2180,8 @@ function SafeHtml({ content, className, mode = "read-only" }) {
       }, 150);
     };
     const handleMouseOut = (e) => {
-      const link = e.target.closest("a");
-      if (!link) return;
+      const link2 = e.target.closest("a");
+      if (!link2) return;
       scheduleHide();
     };
     const handleClick = (e) => {
@@ -2077,8 +2194,8 @@ function SafeHtml({ content, className, mode = "read-only" }) {
         }
         return;
       }
-      const link = e.target.closest("a");
-      if (link) {
+      const link2 = e.target.closest("a");
+      if (link2) {
         e.preventDefault();
         e.stopPropagation();
       }
@@ -2653,6 +2770,71 @@ function useAnimatedText(fieldId, content, options = {}) {
   };
 }
 
+// src/lib/contrast-detection.ts
+function parseColor(color) {
+  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgbMatch) {
+    return { r: parseInt(rgbMatch[1]), g: parseInt(rgbMatch[2]), b: parseInt(rgbMatch[3]) };
+  }
+  const hexMatch = color.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  if (hexMatch) {
+    return { r: parseInt(hexMatch[1], 16), g: parseInt(hexMatch[2], 16), b: parseInt(hexMatch[3], 16) };
+  }
+  return null;
+}
+function getRelativeLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getEffectiveBackgroundColor(element) {
+  let el = element;
+  while (el) {
+    const bg = window.getComputedStyle(el).backgroundColor;
+    const parsed = parseColor(bg);
+    if (parsed && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)") {
+      return bg;
+    }
+    el = el.parentElement;
+  }
+  return null;
+}
+function getContrastColor(bgColor) {
+  const parsed = parseColor(bgColor);
+  if (!parsed) return "white";
+  const luminance = getRelativeLuminance(parsed.r, parsed.g, parsed.b);
+  const contrastWithWhite = (1 + 0.05) / (luminance + 0.05);
+  const contrastWithBlack = (luminance + 0.05) / (0 + 0.05);
+  return contrastWithWhite > contrastWithBlack ? "white" : "black";
+}
+function setupContrastDetection(element) {
+  const updateContrastColor = () => {
+    const bgColor = getEffectiveBackgroundColor(element);
+    if (bgColor) {
+      const contrastColor = getContrastColor(bgColor);
+      element.style.setProperty("--ya-contrast-color", contrastColor);
+    }
+  };
+  updateContrastColor();
+  let rafId = null;
+  const throttledUpdate = () => {
+    if (rafId) return;
+    rafId = requestAnimationFrame(() => {
+      updateContrastColor();
+      rafId = null;
+    });
+  };
+  window.addEventListener("scroll", throttledUpdate, { passive: true, capture: true });
+  window.addEventListener("resize", throttledUpdate, { passive: true });
+  return () => {
+    window.removeEventListener("scroll", throttledUpdate, { capture: true });
+    window.removeEventListener("resize", throttledUpdate);
+    if (rafId) cancelAnimationFrame(rafId);
+  };
+}
+
 // src/components/BubbleIcons.tsx
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function BoldIcon({ size = 16, className }) {
@@ -3090,23 +3272,34 @@ function styleInject(css, { insertAt } = {}) {
 
 // src/components/ya-text.css
 styleInject(`.ya-text-editable {
+  position: relative;
   cursor: text;
-  transition: outline 0.15s ease;
-}
-.ya-text-editable:hover {
-  outline: 2px dashed var(--color-primary, #D4A574);
+  border-radius: 4px;
+  outline: 1.5px dashed transparent;
   outline-offset: 4px;
+  transition: outline-color 0.15s ease;
+}
+.ya-text-editing {
+  position: relative;
+  cursor: text;
   border-radius: 4px;
+  outline: 1.5px solid var(--ya-contrast-color, white);
+  outline-offset: 4px;
+}
+.ya-text-editable:hover {
+  outline-color: var(--ya-contrast-color, white);
 }
 body.builder-selector-active .ya-text-editable:hover {
-  outline: none;
+  outline-color: transparent;
+}
+body.builder-selector-active .ya-text-editable {
   cursor: inherit;
 }
-.ya-text-editing {
-  outline: 2px solid var(--color-primary, #D4A574);
-  outline-offset: 4px;
-  border-radius: 4px;
-  position: relative;
+[data-ya-link=true] .ya-text-editable {
+  outline: none;
+}
+[data-ya-link=true] .ya-text-editable:hover {
+  outline: none;
 }
 .ya-text-editing .ProseMirror p::selection,
 .ya-text-editing .ProseMirror::selection {
@@ -3637,6 +3830,10 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     handleSaveRef.current = handleSave;
     handleCancelRef.current = handleCancel;
   }, [handleSave, handleCancel]);
+  useEffect8(() => {
+    if (mode !== "inline-edit" || !containerRef.current) return;
+    return setupContrastDetection(containerRef.current);
+  }, [mode]);
   useEffect8(() => {
     if (mode !== "inline-edit") return;
     const handleEditRequest = (event) => {
@@ -3689,8 +3886,8 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     if (selectModeEnabled) {
       return;
     }
-    const isInsideLink = e.currentTarget.closest("a") !== null;
-    if (isInsideLink) {
+    const isInsideYaLink = e.currentTarget.closest('[data-ya-link="true"]') !== null;
+    if (isInsideYaLink) {
       return;
     }
     if (mode === "inline-edit" && !isEditing) {
@@ -5263,14 +5460,401 @@ function YaVideo({
   );
 }
 
-// src/components/YaEmbed.tsx
+// src/components/YaProtectedMedia.tsx
 import { useCallback as useCallback15, useEffect as useEffect13, useRef as useRef14, useState as useState13 } from "react";
 
+// src/lib/api-client.ts
+function getApiUrl() {
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const apiUrl = runtimeConfig?.apiUrl || import.meta.env.YA_API_URL;
+  if (!apiUrl) {
+    throw new Error("API URL not configured (check YOAMIGO_CONFIG or YA_API_URL)");
+  }
+  return apiUrl;
+}
+function getSiteId() {
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const siteId = runtimeConfig?.siteId || import.meta.env.YA_SITE_ID;
+  if (!siteId) {
+    throw new Error("Site ID not configured (check YOAMIGO_CONFIG or YA_SITE_ID)");
+  }
+  return siteId;
+}
+
+// src/components/ya-protected-media.css
+styleInject(".ya-protected-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 12px;\n  overflow: hidden;\n  background:\n    linear-gradient(\n      135deg,\n      #1c1917 0%,\n      #292524 100%);\n}\n.ya-protected-container.ya-protected-audio {\n  padding: 24px;\n  background:\n    linear-gradient(\n      135deg,\n      #1c1917 0%,\n      #292524 100%);\n}\n.ya-protected-container.ya-protected-loading {\n  min-height: 200px;\n}\n.ya-protected-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid rgba(255, 255, 255, 0.1);\n  border-top-color: #FF6B35;\n  border-radius: 50%;\n  animation: ya-spin 0.8s linear infinite;\n}\n@keyframes ya-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ya-protected-error-state {\n  min-height: 200px;\n}\n.ya-protected-error-message {\n  color: #ef4444;\n  font-size: 14px;\n  text-align: center;\n  padding: 20px;\n}\n.ya-protected-container.ya-protected-locked {\n  background:\n    linear-gradient(\n      135deg,\n      #1c1917 0%,\n      #292524 100%);\n}\n.ya-protected-preview-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.ya-protected-preview-badge {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  padding: 6px 12px;\n  background: rgba(0, 0, 0, 0.7);\n  color: #FF6B35;\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 999px;\n  backdrop-filter: blur(4px);\n}\n.ya-protected-video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.ya-protected-video.ya-protected-preview {\n  opacity: 0.8;\n}\n.ya-protected-audio-player {\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n}\n.ya-protected-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #f5f5f4;\n  margin-bottom: 16px;\n  text-align: center;\n}\n.ya-protected-unlock-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(28, 25, 23, 0.95);\n  backdrop-filter: blur(8px);\n}\n.ya-protected-unlock-prompt {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 24px;\n  background:\n    linear-gradient(\n      to top,\n      rgba(28, 25, 23, 0.98) 0%,\n      rgba(28, 25, 23, 0.9) 80%,\n      transparent 100%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n.ya-protected-unlock-form {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  padding: 32px;\n  max-width: 320px;\n  width: 100%;\n  text-align: center;\n}\n.ya-protected-unlock-icon {\n  color: #FF6B35;\n  margin-bottom: 8px;\n}\n.ya-protected-unlock-title {\n  font-size: 24px;\n  font-weight: 700;\n  color: #f5f5f4;\n  letter-spacing: -0.02em;\n}\n.ya-protected-unlock-folder {\n  font-size: 14px;\n  color: #a8a29e;\n  margin-top: -8px;\n}\n.ya-protected-unlock-subtitle {\n  font-size: 14px;\n  color: #a8a29e;\n  margin-bottom: 8px;\n}\n.ya-protected-input {\n  width: 100%;\n  padding: 14px 16px;\n  font-size: 15px;\n  color: #f5f5f4;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 10px;\n  outline: none;\n  transition: all 0.2s ease;\n}\n.ya-protected-input::placeholder {\n  color: #78716c;\n}\n.ya-protected-input:focus {\n  border-color: #FF6B35;\n  background: rgba(255, 107, 53, 0.05);\n  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);\n}\n.ya-protected-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.ya-protected-button {\n  width: 100%;\n  padding: 14px 24px;\n  font-size: 15px;\n  font-weight: 600;\n  color: #fff;\n  background:\n    linear-gradient(\n      135deg,\n      #FF6B35 0%,\n      #e05a2b 100%);\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.ya-protected-button:hover:not(:disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35);\n}\n.ya-protected-button:active:not(:disabled) {\n  transform: translateY(0);\n}\n.ya-protected-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n.ya-protected-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.ya-protected-error {\n  color: #ef4444;\n  font-size: 13px;\n  padding: 8px 12px;\n  background: rgba(239, 68, 68, 0.1);\n  border-radius: 6px;\n  width: 100%;\n}\n.ya-protected-disclaimer {\n  font-size: 12px;\n  color: #78716c;\n  margin-top: -4px;\n}\n.ya-protected-container.ya-protected-unlocked {\n  background: transparent;\n}\n@media (max-width: 480px) {\n  .ya-protected-unlock-form {\n    padding: 24px 16px;\n  }\n  .ya-protected-unlock-title {\n    font-size: 20px;\n  }\n  .ya-protected-input,\n  .ya-protected-button {\n    padding: 12px 14px;\n    font-size: 14px;\n  }\n}\n@media (prefers-color-scheme: light) {\n  .ya-protected-container.ya-protected-locked {\n    background:\n      linear-gradient(\n        135deg,\n        #f5f5f4 0%,\n        #e7e5e4 100%);\n  }\n  .ya-protected-unlock-overlay {\n    background: rgba(245, 245, 244, 0.95);\n  }\n  .ya-protected-unlock-title {\n    color: #1c1917;\n  }\n  .ya-protected-unlock-subtitle,\n  .ya-protected-unlock-folder {\n    color: #57534e;\n  }\n  .ya-protected-input {\n    color: #1c1917;\n    background: rgba(0, 0, 0, 0.03);\n    border-color: rgba(0, 0, 0, 0.1);\n  }\n  .ya-protected-input::placeholder {\n    color: #a8a29e;\n  }\n  .ya-protected-input:focus {\n    background: rgba(255, 107, 53, 0.03);\n  }\n  .ya-protected-disclaimer {\n    color: #78716c;\n  }\n}\n");
+
+// src/components/YaProtectedMedia.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var COOKIE_PREFIX = "ya_access_";
+var COOKIE_EXPIRY_DAYS = 30;
+function getStoredAccess(folderId) {
+  const name = `${COOKIE_PREFIX}${folderId}=`;
+  const decodedCookie = decodeURIComponent(document.cookie);
+  const cookies = decodedCookie.split(";");
+  for (const cookie of cookies) {
+    const c = cookie.trim();
+    if (c.indexOf(name) === 0) {
+      return c.substring(name.length);
+    }
+  }
+  return null;
+}
+function storeAccess(folderId, email) {
+  const expires = /* @__PURE__ */ new Date();
+  expires.setTime(expires.getTime() + COOKIE_EXPIRY_DAYS * 24 * 60 * 60 * 1e3);
+  document.cookie = `${COOKIE_PREFIX}${folderId}=${email};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
+}
+function clearStoredAccess(folderId) {
+  document.cookie = `${COOKIE_PREFIX}${folderId}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
+}
+function UnlockForm({ accessInfo, onSubmit, isLoading, error }) {
+  const [email, setEmail] = useState13("");
+  const [password, setPassword] = useState13("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (accessInfo.authType === "password") {
+      onSubmit({ password });
+    } else {
+      onSubmit({ email });
+    }
+  };
+  const isEmailAuth = accessInfo.authType === "email" || accessInfo.authType === "subscriber";
+  const isPasswordAuth = accessInfo.authType === "password";
+  return /* @__PURE__ */ jsxs8("form", { className: "ya-protected-unlock-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx15("div", { className: "ya-protected-unlock-icon", children: /* @__PURE__ */ jsxs8(
+      "svg",
+      {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx15("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsx15("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx15("div", { className: "ya-protected-unlock-title", children: accessInfo.authType === "subscriber" ? "Subscribers Only" : "Exclusive Content" }),
+    accessInfo.folderName && /* @__PURE__ */ jsx15("div", { className: "ya-protected-unlock-folder", children: accessInfo.folderName }),
+    /* @__PURE__ */ jsx15("div", { className: "ya-protected-unlock-subtitle", children: isEmailAuth && accessInfo.authType === "subscriber" ? "Enter your email to verify access" : isEmailAuth ? "Enter your email to unlock" : "Enter password to access" }),
+    isEmailAuth && /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "email",
+        className: "ya-protected-input",
+        placeholder: "your@email.com",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        required: true,
+        disabled: isLoading,
+        autoFocus: true
+      }
+    ),
+    isPasswordAuth && /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "password",
+        className: "ya-protected-input",
+        placeholder: "Enter password",
+        value: password,
+        onChange: (e) => setPassword(e.target.value),
+        required: true,
+        disabled: isLoading,
+        autoFocus: true
+      }
+    ),
+    error && /* @__PURE__ */ jsx15("div", { className: "ya-protected-error", children: error }),
+    /* @__PURE__ */ jsx15("button", { type: "submit", className: "ya-protected-button", disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsx15("span", { className: "ya-protected-loading", children: "Unlocking..." }) : "Unlock Now" }),
+    isEmailAuth && accessInfo.authType === "email" && /* @__PURE__ */ jsx15("div", { className: "ya-protected-disclaimer", children: "Your email will be added to the mailing list." })
+  ] });
+}
+function YaProtectedMedia({
+  fieldId,
+  assetId,
+  type,
+  className,
+  poster,
+  aspectRatio = "16/9",
+  title,
+  onUnlock,
+  onUnlockError
+}) {
+  const containerRef = useRef14(null);
+  const mediaRef = useRef14(null);
+  const [accessInfo, setAccessInfo] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [isUnlocking, setIsUnlocking] = useState13(false);
+  const [isUnlocked, setIsUnlocked] = useState13(false);
+  const [unlockedUrl, setUnlockedUrl] = useState13(null);
+  const [error, setError] = useState13(null);
+  const [previewEnded, setPreviewEnded] = useState13(false);
+  useEffect13(() => {
+    async function fetchAccessInfo() {
+      try {
+        const apiUrl = getApiUrl();
+        const siteId = getSiteId();
+        const response = await fetch(`${apiUrl}/api/websites/${siteId}/access/asset/${assetId}`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch access info");
+        }
+        const data = await response.json();
+        setAccessInfo(data);
+        if (!data.requiresAuth && data.url) {
+          setIsUnlocked(true);
+          setUnlockedUrl(data.url);
+        }
+        if (data.requiresAuth && data.folderId) {
+          const storedEmail = getStoredAccess(data.folderId);
+          if (storedEmail) {
+            await tryStoredAccess(data.folderId, storedEmail);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to fetch access info:", err);
+        setError("Unable to load content");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchAccessInfo();
+  }, [assetId]);
+  const tryStoredAccess = async (folderId, email) => {
+    try {
+      const apiUrl = getApiUrl();
+      const siteId = getSiteId();
+      const response = await fetch(`${apiUrl}/api/websites/${siteId}/access/asset/${assetId}/unlock`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email })
+      });
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success) {
+          setIsUnlocked(true);
+          setUnlockedUrl(result.url);
+          return true;
+        }
+      }
+      clearStoredAccess(folderId);
+      return false;
+    } catch {
+      clearStoredAccess(folderId);
+      return false;
+    }
+  };
+  const handleUnlock = useCallback15(
+    async (data) => {
+      if (!accessInfo) return;
+      setIsUnlocking(true);
+      setError(null);
+      try {
+        const apiUrl = getApiUrl();
+        const siteId = getSiteId();
+        const response = await fetch(`${apiUrl}/api/websites/${siteId}/access/asset/${assetId}/unlock`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data)
+        });
+        const result = await response.json();
+        if (!response.ok) {
+          throw new Error(result.error || "Failed to unlock");
+        }
+        if (result.success) {
+          setIsUnlocked(true);
+          setUnlockedUrl(result.url);
+          if (accessInfo.folderId && data.email) {
+            storeAccess(accessInfo.folderId, data.email);
+          }
+          onUnlock?.();
+        } else {
+          throw new Error(result.error || "Failed to unlock");
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to unlock";
+        setError(message);
+        onUnlockError?.(message);
+      } finally {
+        setIsUnlocking(false);
+      }
+    },
+    [assetId, accessInfo, onUnlock, onUnlockError]
+  );
+  const handleTimeUpdate = useCallback15(() => {
+    if (!accessInfo?.showPreview || !mediaRef.current || isUnlocked) return;
+    const media = mediaRef.current;
+    if (media.currentTime >= accessInfo.previewDuration) {
+      media.pause();
+      media.currentTime = 0;
+      setPreviewEnded(true);
+    }
+  }, [accessInfo, isUnlocked]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref: containerRef,
+        className: `ya-protected-container ya-protected-loading ${className || ""}`,
+        style: { aspectRatio: type === "video" ? aspectRatio : void 0 },
+        "data-field-id": fieldId,
+        children: /* @__PURE__ */ jsx15("div", { className: "ya-protected-spinner" })
+      }
+    );
+  }
+  if (error && !accessInfo) {
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref: containerRef,
+        className: `ya-protected-container ya-protected-error-state ${className || ""}`,
+        style: { aspectRatio: type === "video" ? aspectRatio : void 0 },
+        "data-field-id": fieldId,
+        children: /* @__PURE__ */ jsx15("div", { className: "ya-protected-error-message", children: error })
+      }
+    );
+  }
+  if (isUnlocked && unlockedUrl) {
+    const resolvedUrl = resolveAssetUrl(unlockedUrl);
+    if (type === "video") {
+      return /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          ref: containerRef,
+          className: `ya-protected-container ya-protected-unlocked ${className || ""}`,
+          style: { aspectRatio },
+          "data-field-id": fieldId,
+          children: [
+            /* @__PURE__ */ jsx15(
+              "video",
+              {
+                ref: mediaRef,
+                src: resolvedUrl,
+                poster: poster ? resolveAssetUrl(poster) : void 0,
+                controls: true,
+                playsInline: true,
+                className: "ya-protected-video"
+              }
+            ),
+            title && /* @__PURE__ */ jsx15("div", { className: "ya-protected-title", children: title })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: containerRef,
+        className: `ya-protected-container ya-protected-unlocked ya-protected-audio ${className || ""}`,
+        "data-field-id": fieldId,
+        children: [
+          title && /* @__PURE__ */ jsx15("div", { className: "ya-protected-title", children: title }),
+          /* @__PURE__ */ jsx15(
+            "audio",
+            {
+              ref: mediaRef,
+              src: resolvedUrl,
+              controls: true,
+              className: "ya-protected-audio-player"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (accessInfo) {
+    const showPreviewPlayer = accessInfo.showPreview && !previewEnded && accessInfo.url;
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: containerRef,
+        className: `ya-protected-container ya-protected-locked ${className || ""}`,
+        style: { aspectRatio: type === "video" ? aspectRatio : void 0 },
+        "data-field-id": fieldId,
+        children: [
+          showPreviewPlayer && type === "video" && /* @__PURE__ */ jsxs8("div", { className: "ya-protected-preview-wrapper", children: [
+            /* @__PURE__ */ jsx15(
+              "video",
+              {
+                ref: mediaRef,
+                src: resolveAssetUrl(accessInfo.url),
+                poster: poster ? resolveAssetUrl(poster) : void 0,
+                controls: true,
+                playsInline: true,
+                className: "ya-protected-video ya-protected-preview",
+                onTimeUpdate: handleTimeUpdate
+              }
+            ),
+            /* @__PURE__ */ jsxs8("div", { className: "ya-protected-preview-badge", children: [
+              "Preview (",
+              accessInfo.previewDuration,
+              "s)"
+            ] })
+          ] }),
+          showPreviewPlayer && type === "audio" && /* @__PURE__ */ jsxs8("div", { className: "ya-protected-preview-wrapper", children: [
+            title && /* @__PURE__ */ jsx15("div", { className: "ya-protected-title", children: title }),
+            /* @__PURE__ */ jsx15(
+              "audio",
+              {
+                ref: mediaRef,
+                src: resolveAssetUrl(accessInfo.url),
+                controls: true,
+                className: "ya-protected-audio-player ya-protected-preview",
+                onTimeUpdate: handleTimeUpdate
+              }
+            ),
+            /* @__PURE__ */ jsxs8("div", { className: "ya-protected-preview-badge", children: [
+              "Preview (",
+              accessInfo.previewDuration,
+              "s)"
+            ] })
+          ] }),
+          (!showPreviewPlayer || previewEnded) && /* @__PURE__ */ jsx15("div", { className: "ya-protected-unlock-overlay", children: /* @__PURE__ */ jsx15(
+            UnlockForm,
+            {
+              accessInfo,
+              onSubmit: handleUnlock,
+              isLoading: isUnlocking,
+              error
+            }
+          ) }),
+          showPreviewPlayer && previewEnded && /* @__PURE__ */ jsxs8("div", { className: "ya-protected-unlock-prompt", children: [
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                className: "ya-protected-button",
+                onClick: () => setPreviewEnded(false),
+                children: "Replay Preview"
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              UnlockForm,
+              {
+                accessInfo,
+                onSubmit: handleUnlock,
+                isLoading: isUnlocking,
+                error
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return null;
+}
+
+// src/components/YaEmbed.tsx
+import { useCallback as useCallback16, useEffect as useEffect14, useRef as useRef15, useState as useState14 } from "react";
+
 // src/components/ya-embed.css
 styleInject('.ya-embed-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n.ya-embed-wrapper iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ya-embed-container {\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 80px;\n  min-height: 80px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-embed-container iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ya-embed-editable {\n  cursor: pointer;\n}\n.ya-embed-editable:hover {\n  outline: 2px dashed var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-selected {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-embed-editable:hover .ya-embed-overlay {\n  opacity: 1;\n}\n.ya-embed-selected .ya-embed-overlay {\n  opacity: 0;\n}\n.ya-embed-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-embed-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-embed-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.ya-embed-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  background: #f3f4f6;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n  color: #6b7280;\n  font-size: 14px;\n}\n.ya-embed-placeholder img {\n  width: 64px;\n  height: auto;\n  opacity: 0.5;\n}\n@keyframes ya-embed-success {\n  0% {\n    outline-color: var(--color-primary, #d4a574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #d4a574);\n    outline-width: 2px;\n  }\n}\n.ya-embed-success {\n  animation: ya-embed-success 0.4s ease;\n}\n.ya-embed-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-embed-shimmer 1.5s infinite;\n}\n@keyframes ya-embed-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-embed-container:focus {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-embed-container:focus-visible {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-small .ya-embed-overlay {\n  display: none;\n}\n.ya-embed-twitter {\n  min-height: 200px;\n}\n.ya-embed-twitter .twitter-tweet {\n  margin: 0 auto !important;\n}\n.ya-embed-wrapper[data-embed-type=spotify],\n.ya-embed-container[data-embed-type=spotify] {\n  min-height: 80px;\n}\n.ya-embed-wrapper[data-embed-type=soundcloud],\n.ya-embed-container[data-embed-type=soundcloud] {\n  min-height: 166px;\n}\n.ya-embed-wrapper[data-embed-type=instagram] iframe,\n.ya-embed-container[data-embed-type=instagram] iframe {\n  min-height: 400px;\n}\n');
 
 // src/components/YaEmbed.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function parseEmbedUrl(url) {
   if (!url) return null;
   const trimmedUrl = url.trim();
@@ -5385,11 +5969,11 @@ function YaEmbed({
 }) {
   const content = useContent(fieldId);
   const { mode } = content;
-  const containerRef = useRef14(null);
-  const [isSelected, setIsSelected] = useState13(false);
-  const [isHovered, setIsHovered] = useState13(false);
-  const [isSmallEmbed, setIsSmallEmbed] = useState13(false);
-  const [isInView, setIsInView] = useState13(loading === "eager");
+  const containerRef = useRef15(null);
+  const [isSelected, setIsSelected] = useState14(false);
+  const [isHovered, setIsHovered] = useState14(false);
+  const [isSmallEmbed, setIsSmallEmbed] = useState14(false);
+  const [isInView, setIsInView] = useState14(loading === "eager");
   const rawValue = content.get();
   const parsedValue = parseEmbedValue(rawValue);
   const embedData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
@@ -5397,7 +5981,7 @@ function YaEmbed({
   const embedType = embedData.type || "custom";
   const height = embedData.height;
   const aspectRatio = embedData.aspectRatio || propAspectRatio || "16/9";
-  useEffect13(() => {
+  useEffect14(() => {
     if (loading === "eager" || isInView) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -5414,7 +5998,7 @@ function YaEmbed({
     }
     return () => observer.disconnect();
   }, [loading, isInView]);
-  const handleClick = useCallback15(() => {
+  const handleClick = useCallback16(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -5434,7 +6018,7 @@ function YaEmbed({
       "*"
     );
   }, [mode, fieldId, embedData]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_EMBED_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -5447,7 +6031,7 @@ function YaEmbed({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (containerRef.current) {
@@ -5459,7 +6043,7 @@ function YaEmbed({
     window.addEventListener("resize", checkSize);
     return () => window.removeEventListener("resize", checkSize);
   }, [mode]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -5495,17 +6079,17 @@ function YaEmbed({
   }, [isSelected, fieldId, mode]);
   const renderEmbed = (isReadOnly) => {
     if (!src && !isReadOnly) {
-      return /* @__PURE__ */ jsxs8("div", { className: "ya-embed-placeholder", children: [
-        /* @__PURE__ */ jsx15("img", { src: PLACEHOLDER_SVG3, alt: "" }),
-        /* @__PURE__ */ jsx15("span", { children: "No embed selected" })
+      return /* @__PURE__ */ jsxs9("div", { className: "ya-embed-placeholder", children: [
+        /* @__PURE__ */ jsx16("img", { src: PLACEHOLDER_SVG3, alt: "" }),
+        /* @__PURE__ */ jsx16("span", { children: "No embed selected" })
       ] });
     }
     if (!isInView && loading === "lazy" && !isReadOnly) {
-      return /* @__PURE__ */ jsx15("div", { className: "ya-embed-placeholder", style: { aspectRatio }, children: /* @__PURE__ */ jsx15("img", { src: PLACEHOLDER_SVG3, alt: "" }) });
+      return /* @__PURE__ */ jsx16("div", { className: "ya-embed-placeholder", style: { aspectRatio }, children: /* @__PURE__ */ jsx16("img", { src: PLACEHOLDER_SVG3, alt: "" }) });
     }
     if (embedType === "spotify" && src) {
       const embedUrl = buildSpotifyEmbedUrl(src);
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         "iframe",
         {
           src: embedUrl,
@@ -5523,7 +6107,7 @@ function YaEmbed({
     }
     if (embedType === "soundcloud" && src) {
       const embedUrl = buildSoundCloudEmbedUrl(src);
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         "iframe",
         {
           src: embedUrl,
@@ -5539,14 +6123,14 @@ function YaEmbed({
       );
     }
     if (embedType === "twitter" && src) {
-      return /* @__PURE__ */ jsxs8("div", { className: "ya-embed-twitter", children: [
-        /* @__PURE__ */ jsx15("blockquote", { className: "twitter-tweet", "data-dnt": "true", children: /* @__PURE__ */ jsx15("a", { href: embedData.originalUrl || `https://twitter.com/i/status/${src}`, children: "Loading tweet..." }) }),
-        /* @__PURE__ */ jsx15(TwitterWidgetLoader, {})
+      return /* @__PURE__ */ jsxs9("div", { className: "ya-embed-twitter", children: [
+        /* @__PURE__ */ jsx16("blockquote", { className: "twitter-tweet", "data-dnt": "true", children: /* @__PURE__ */ jsx16("a", { href: embedData.originalUrl || `https://twitter.com/i/status/${src}`, children: "Loading tweet..." }) }),
+        /* @__PURE__ */ jsx16(TwitterWidgetLoader, {})
       ] });
     }
     if (embedType === "instagram" && src) {
       const embedUrl = buildInstagramEmbedUrl(src);
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         "iframe",
         {
           src: embedUrl,
@@ -5564,7 +6148,7 @@ function YaEmbed({
       );
     }
     if (embedType === "custom" && src) {
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         "iframe",
         {
           src,
@@ -5588,7 +6172,7 @@ function YaEmbed({
     maxWidth: maxWidth ? `${maxWidth}px` : void 0
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         ref: containerRef,
@@ -5600,7 +6184,7 @@ function YaEmbed({
       }
     );
   }
-  const embedIcon = /* @__PURE__ */ jsxs8(
+  const embedIcon = /* @__PURE__ */ jsxs9(
     "svg",
     {
       width: "24",
@@ -5612,12 +6196,12 @@ function YaEmbed({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx15("polyline", { points: "16 18 22 12 16 6" }),
-        /* @__PURE__ */ jsx15("polyline", { points: "8 6 2 12 8 18" })
+        /* @__PURE__ */ jsx16("polyline", { points: "16 18 22 12 16 6" }),
+        /* @__PURE__ */ jsx16("polyline", { points: "8 6 2 12 8 18" })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: containerRef,
@@ -5640,14 +6224,14 @@ function YaEmbed({
       style: wrapperStyle,
       children: [
         renderEmbed(false),
-        isSmallEmbed ? /* @__PURE__ */ jsxs8(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
+        isSmallEmbed ? /* @__PURE__ */ jsxs9(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           embedIcon,
-          /* @__PURE__ */ jsx15("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx16("span", { children: "Click to edit" })
         ] }) : (
           /* For large embeds: show overlay inside the container */
-          /* @__PURE__ */ jsxs8("div", { className: "ya-embed-overlay", children: [
-            /* @__PURE__ */ jsx15("div", { className: "ya-embed-edit-icon", children: embedIcon }),
-            /* @__PURE__ */ jsx15("span", { className: "ya-embed-edit-label", children: "Click to edit" })
+          /* @__PURE__ */ jsxs9("div", { className: "ya-embed-overlay", children: [
+            /* @__PURE__ */ jsx16("div", { className: "ya-embed-edit-icon", children: embedIcon }),
+            /* @__PURE__ */ jsx16("span", { className: "ya-embed-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -5655,7 +6239,7 @@ function YaEmbed({
   );
 }
 function TwitterWidgetLoader() {
-  useEffect13(() => {
+  useEffect14(() => {
     if (window.twttr?.widgets) {
       ;
       window.twttr.widgets.load();
@@ -5676,7 +6260,7 @@ function TwitterWidgetLoader() {
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect3, useRef as useRef17, useState as useState16, useCallback as useCallback18, useId } from "react";
+import { useEffect as useEffect19, useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState19, useCallback as useCallback20, useId } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
@@ -5686,7 +6270,7 @@ import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
 
 // src/components/SafeTriangleBelow.tsx
-import { useEffect as useEffect14, useState as useState14, useRef as useRef15, useCallback as useCallback16 } from "react";
+import { useEffect as useEffect15, useState as useState15, useRef as useRef16, useCallback as useCallback17 } from "react";
 function SafeTriangleBelow({
   triggerRef,
   popoverRef,
@@ -5694,10 +6278,10 @@ function SafeTriangleBelow({
   onLeave,
   onStayInside
 }) {
-  const [bounds, setBounds] = useState14(null);
-  const boundsRef = useRef15(bounds);
+  const [bounds, setBounds] = useState15(null);
+  const boundsRef = useRef16(bounds);
   boundsRef.current = bounds;
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isVisible || !triggerRef.current || !popoverRef.current) {
       setBounds(null);
       return;
@@ -5715,7 +6299,7 @@ function SafeTriangleBelow({
     }, 10);
     return () => clearTimeout(timer);
   }, [isVisible, triggerRef, popoverRef]);
-  const checkMousePosition = useCallback16((e) => {
+  const checkMousePosition = useCallback17((e) => {
     const b = boundsRef.current;
     if (!b) return;
     const { clientX: x, clientY: y } = e;
@@ -5727,7 +6311,7 @@ function SafeTriangleBelow({
       onStayInside?.();
     }
   }, [onLeave, onStayInside]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isVisible || !bounds) return;
     document.addEventListener("mousemove", checkMousePosition);
     return () => document.removeEventListener("mousemove", checkMousePosition);
@@ -5736,22 +6320,36 @@ function SafeTriangleBelow({
 }
 
 // src/hooks/useSafeTriangle.ts
-import { useState as useState15, useRef as useRef16, useCallback as useCallback17, useEffect as useEffect15 } from "react";
+import { useState as useState16, useRef as useRef17, useCallback as useCallback18, useEffect as useEffect16 } from "react";
 function useSafeTriangle(options = {}) {
   const { showDelay = 0, hideDelay = 150, enabled = true } = options;
-  const [isVisible, setIsVisible] = useState15(false);
-  const [isHovering, setIsHovering] = useState15(false);
-  const triggerRef = useRef16(null);
-  const popoverRef = useRef16(null);
-  const showTimeoutRef = useRef16(null);
-  const hideTimeoutRef = useRef16(null);
-  useEffect15(() => {
+  const [isVisible, setIsVisible] = useState16(false);
+  const [isHovering, setIsHovering] = useState16(false);
+  const triggerRef = useRef17(null);
+  const popoverRef = useRef17(null);
+  const showTimeoutRef = useRef17(null);
+  const hideTimeoutRef = useRef17(null);
+  useEffect16(() => {
     return () => {
       if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const show = useCallback17(() => {
+  useEffect16(() => {
+    if (!enabled) {
+      if (showTimeoutRef.current) {
+        clearTimeout(showTimeoutRef.current);
+        showTimeoutRef.current = null;
+      }
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+      setIsVisible(false);
+      setIsHovering(false);
+    }
+  }, [enabled]);
+  const show = useCallback18(() => {
     if (!enabled) return;
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
@@ -5759,7 +6357,7 @@ function useSafeTriangle(options = {}) {
     }
     setIsVisible(true);
   }, [enabled]);
-  const hide = useCallback17(() => {
+  const hide = useCallback18(() => {
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
       showTimeoutRef.current = null;
@@ -5767,7 +6365,7 @@ function useSafeTriangle(options = {}) {
     setIsVisible(false);
     setIsHovering(false);
   }, []);
-  const handleMouseEnter = useCallback17(() => {
+  const handleMouseEnter = useCallback18(() => {
     if (!enabled) return;
     setIsHovering(true);
     if (hideTimeoutRef.current) {
@@ -5782,7 +6380,7 @@ function useSafeTriangle(options = {}) {
       setIsVisible(true);
     }
   }, [showDelay, enabled]);
-  const handleMouseLeave = useCallback17(() => {
+  const handleMouseLeave = useCallback18(() => {
     setIsHovering(false);
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
@@ -5792,16 +6390,16 @@ function useSafeTriangle(options = {}) {
       setIsVisible(false);
     }, hideDelay);
   }, [hideDelay]);
-  const handleFocus = useCallback17(() => {
+  const handleFocus = useCallback18(() => {
     if (!enabled) return;
     setIsVisible(true);
   }, [enabled]);
-  const handleTriangleLeave = useCallback17(() => {
+  const handleTriangleLeave = useCallback18(() => {
     if (!isHovering) {
       setIsVisible(false);
     }
   }, [isHovering]);
-  const handleStayInside = useCallback17(() => {
+  const handleStayInside = useCallback18(() => {
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
@@ -5828,13 +6426,696 @@ function useSafeTriangle(options = {}) {
   };
 }
 
-// src/components/ya-link.css
-styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ProseMirror-gapcursor {\n  display: none !important;\n}\n.ProseMirror .ProseMirror-dropcursor {\n  display: none !important;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: fixed;\n  z-index: 10000;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover--above {\n  animation: ya-href-popover-fade-in-above 0.15s ease;\n}\n@keyframes ya-href-popover-fade-in-above {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-href-popover--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n.ya-link-edit-popover {\n  position: fixed;\n  z-index: 10000;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 100ms ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
+// src/icons/DynamicIcon.tsx
+import { useEffect as useEffect17, useState as useState17, memo } from "react";
 
-// src/components/YaLink.tsx
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-function isInternalPath(path) {
-  if (!path) return false;
+// src/icons/icon-registry.ts
+var iconCache = /* @__PURE__ */ new Map();
+var pendingLoads = /* @__PURE__ */ new Map();
+var registeredLoaders = /* @__PURE__ */ new Map();
+var MAX_CACHE_SIZE = 100;
+function registerIcon(name, loader) {
+  registeredLoaders.set(name, loader);
+}
+function registerIcons(loaders) {
+  for (const [name, loader] of Object.entries(loaders)) {
+    registeredLoaders.set(name, loader);
+  }
+}
+function getIcon(name) {
+  return iconCache.get(name) ?? null;
+}
+async function loadIcon(name) {
+  if (iconCache.has(name)) {
+    return iconCache.get(name);
+  }
+  if (pendingLoads.has(name)) {
+    return pendingLoads.get(name);
+  }
+  const loadPromise = (async () => {
+    try {
+      let IconComponent;
+      if (name === "IconBrandAppleMusic") {
+        const customModule = await Promise.resolve().then(() => (init_custom_icons(), custom_icons_exports));
+        IconComponent = customModule.IconBrandAppleMusic;
+      } else if (registeredLoaders.has(name)) {
+        const loader = registeredLoaders.get(name);
+        const module = await loader();
+        IconComponent = module.default;
+      } else {
+        const module = await import("@tabler/icons-react");
+        IconComponent = module[name];
+      }
+      if (!IconComponent) {
+        console.warn(`Icon "${name}" not found in @tabler/icons-react or custom icons`);
+        return null;
+      }
+      if (iconCache.size >= MAX_CACHE_SIZE) {
+        const firstKey = iconCache.keys().next().value;
+        if (firstKey) {
+          iconCache.delete(firstKey);
+        }
+      }
+      iconCache.set(name, IconComponent);
+      return IconComponent;
+    } catch (error) {
+      console.error(`Failed to load icon "${name}":`, error);
+      return null;
+    } finally {
+      pendingLoads.delete(name);
+    }
+  })();
+  pendingLoads.set(name, loadPromise);
+  return loadPromise;
+}
+async function preloadIcons(names) {
+  await Promise.all(names.map(loadIcon));
+}
+function isIconLoaded(name) {
+  return iconCache.has(name);
+}
+
+// src/icons/DynamicIcon.tsx
+import { Fragment as Fragment4, jsx as jsx17 } from "react/jsx-runtime";
+function DynamicIconComponent({
+  name,
+  fallback = null,
+  className,
+  size = 24,
+  stroke = 2,
+  ...props
+}) {
+  const cachedIcon = getIcon(name);
+  const [Icon, setIcon] = useState17(cachedIcon);
+  const [isLoading, setIsLoading] = useState17(!cachedIcon && !!name);
+  useEffect17(() => {
+    if (!name) {
+      setIcon(null);
+      setIsLoading(false);
+      return;
+    }
+    const cached = getIcon(name);
+    if (cached) {
+      setIcon(cached);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    let cancelled = false;
+    loadIcon(name).then((LoadedIcon) => {
+      if (!cancelled) {
+        setIcon(LoadedIcon);
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [name]);
+  if (!name) {
+    return null;
+  }
+  if (isLoading || !Icon) {
+    if (fallback) {
+      return /* @__PURE__ */ jsx17(Fragment4, { children: fallback });
+    }
+    return /* @__PURE__ */ jsx17(
+      "span",
+      {
+        className,
+        style: {
+          display: "inline-flex",
+          width: size,
+          height: size
+        },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx17(Icon, { size, stroke, className, ...props });
+}
+var DynamicIcon = memo(DynamicIconComponent);
+
+// src/components/IconPicker.tsx
+import { useState as useState18, useEffect as useEffect18, useCallback as useCallback19, useRef as useRef18, useMemo as useMemo7 } from "react";
+
+// src/icons/icon-metadata.ts
+var ICON_METADATA = [
+  // ============================================================================
+  // BRAND / SOCIAL MEDIA (~30 icons)
+  // ============================================================================
+  { name: "IconBrandTwitter", category: "brand", keywords: ["twitter", "x", "social", "tweet"] },
+  { name: "IconBrandX", category: "brand", keywords: ["twitter", "x", "social"] },
+  { name: "IconBrandFacebook", category: "brand", keywords: ["facebook", "fb", "social", "meta"] },
+  { name: "IconBrandInstagram", category: "brand", keywords: ["instagram", "ig", "social", "photo"] },
+  { name: "IconBrandLinkedin", category: "brand", keywords: ["linkedin", "professional", "social", "job"] },
+  { name: "IconBrandYoutube", category: "brand", keywords: ["youtube", "video", "social", "stream"] },
+  { name: "IconBrandTiktok", category: "brand", keywords: ["tiktok", "video", "social", "short"] },
+  { name: "IconBrandSpotify", category: "brand", keywords: ["spotify", "music", "streaming", "audio"] },
+  { name: "IconBrandApple", category: "brand", keywords: ["apple", "mac", "ios", "iphone"] },
+  { name: "IconBrandApplePodcast", category: "brand", keywords: ["apple", "podcast", "audio"] },
+  { name: "IconBrandAppleMusic", category: "brand", keywords: ["apple", "music", "streaming", "audio", "itunes"] },
+  { name: "IconBrandGithub", category: "brand", keywords: ["github", "code", "git", "developer"] },
+  { name: "IconBrandDiscord", category: "brand", keywords: ["discord", "chat", "gaming", "community"] },
+  { name: "IconBrandSlack", category: "brand", keywords: ["slack", "chat", "work", "team"] },
+  { name: "IconBrandWhatsapp", category: "brand", keywords: ["whatsapp", "message", "chat", "phone"] },
+  { name: "IconBrandTelegram", category: "brand", keywords: ["telegram", "message", "chat"] },
+  { name: "IconBrandSnapchat", category: "brand", keywords: ["snapchat", "snap", "social", "photo"] },
+  { name: "IconBrandPinterest", category: "brand", keywords: ["pinterest", "pin", "social", "image"] },
+  { name: "IconBrandDribbble", category: "brand", keywords: ["dribbble", "design", "portfolio"] },
+  { name: "IconBrandBehance", category: "brand", keywords: ["behance", "design", "portfolio", "adobe"] },
+  { name: "IconBrandFigma", category: "brand", keywords: ["figma", "design", "ui", "prototype"] },
+  { name: "IconBrandStripe", category: "brand", keywords: ["stripe", "payment", "money"] },
+  { name: "IconBrandPaypal", category: "brand", keywords: ["paypal", "payment", "money"] },
+  { name: "IconBrandAmazon", category: "brand", keywords: ["amazon", "shop", "ecommerce"] },
+  { name: "IconBrandGoogle", category: "brand", keywords: ["google", "search", "gmail"] },
+  { name: "IconBrandMedium", category: "brand", keywords: ["medium", "blog", "writing", "article"] },
+  { name: "IconBrandReddit", category: "brand", keywords: ["reddit", "social", "community", "forum"] },
+  { name: "IconBrandTwitch", category: "brand", keywords: ["twitch", "stream", "gaming", "video"] },
+  { name: "IconBrandSoundcloud", category: "brand", keywords: ["soundcloud", "music", "audio", "stream"] },
+  { name: "IconBrandVimeo", category: "brand", keywords: ["vimeo", "video", "film"] },
+  { name: "IconBrandPatreon", category: "brand", keywords: ["patreon", "creator", "support", "subscription"] },
+  // ============================================================================
+  // COMMUNICATION (~15 icons)
+  // ============================================================================
+  { name: "IconMail", category: "communication", keywords: ["mail", "email", "envelope", "message"] },
+  { name: "IconMailOpened", category: "communication", keywords: ["mail", "email", "open", "read"] },
+  { name: "IconInbox", category: "communication", keywords: ["inbox", "mail", "message"] },
+  { name: "IconSend", category: "communication", keywords: ["send", "submit", "message", "arrow"] },
+  { name: "IconPhone", category: "communication", keywords: ["phone", "call", "contact", "mobile"] },
+  { name: "IconPhoneCall", category: "communication", keywords: ["phone", "call", "ringing"] },
+  { name: "IconMessage", category: "communication", keywords: ["message", "chat", "bubble", "sms"] },
+  { name: "IconMessageCircle", category: "communication", keywords: ["message", "chat", "bubble"] },
+  { name: "IconMessages", category: "communication", keywords: ["messages", "chat", "conversation"] },
+  { name: "IconAt", category: "communication", keywords: ["at", "email", "mention", "address"] },
+  { name: "IconBell", category: "communication", keywords: ["bell", "notification", "alert"] },
+  { name: "IconBellRinging", category: "communication", keywords: ["bell", "notification", "alert", "ring"] },
+  { name: "IconBroadcast", category: "communication", keywords: ["broadcast", "live", "stream", "radio"] },
+  { name: "IconMicrophone", category: "communication", keywords: ["microphone", "audio", "voice", "record"] },
+  { name: "IconVideo", category: "communication", keywords: ["video", "camera", "record", "call"] },
+  // ============================================================================
+  // MEDIA (~20 icons)
+  // ============================================================================
+  { name: "IconPlayerPlay", category: "media", keywords: ["play", "video", "start", "media"] },
+  { name: "IconPlayerPause", category: "media", keywords: ["pause", "stop", "media"] },
+  { name: "IconPlayerStop", category: "media", keywords: ["stop", "media", "end"] },
+  { name: "IconPlayerSkipForward", category: "media", keywords: ["skip", "forward", "next"] },
+  { name: "IconPlayerSkipBack", category: "media", keywords: ["skip", "back", "previous"] },
+  { name: "IconPlayerRecord", category: "media", keywords: ["record", "recording", "media"] },
+  { name: "IconVolume", category: "media", keywords: ["volume", "sound", "audio", "speaker"] },
+  { name: "IconVolume2", category: "media", keywords: ["volume", "sound", "audio", "medium"] },
+  { name: "IconVolume3", category: "media", keywords: ["volume", "sound", "audio", "high"] },
+  { name: "IconVolumeOff", category: "media", keywords: ["volume", "mute", "silent", "off"] },
+  { name: "IconMusic", category: "media", keywords: ["music", "audio", "note", "song"] },
+  { name: "IconPlaylist", category: "media", keywords: ["playlist", "music", "queue", "list"] },
+  { name: "IconHeadphones", category: "media", keywords: ["headphones", "audio", "music", "listen"] },
+  { name: "IconCamera", category: "media", keywords: ["camera", "photo", "picture", "capture"] },
+  { name: "IconPhoto", category: "media", keywords: ["photo", "image", "picture", "gallery"] },
+  { name: "IconMovie", category: "media", keywords: ["movie", "film", "video", "cinema"] },
+  { name: "IconScreenShare", category: "media", keywords: ["screen", "share", "present", "display"] },
+  { name: "IconCast", category: "media", keywords: ["cast", "chromecast", "stream", "tv"] },
+  { name: "IconPodium", category: "media", keywords: ["podium", "present", "speech", "stage"] },
+  { name: "IconVinyl", category: "media", keywords: ["vinyl", "record", "music", "retro"] },
+  // ============================================================================
+  // NAVIGATION (~20 icons)
+  // ============================================================================
+  { name: "IconArrowRight", category: "navigation", keywords: ["arrow", "right", "next", "forward"] },
+  { name: "IconArrowLeft", category: "navigation", keywords: ["arrow", "left", "back", "previous"] },
+  { name: "IconArrowUp", category: "navigation", keywords: ["arrow", "up", "top"] },
+  { name: "IconArrowDown", category: "navigation", keywords: ["arrow", "down", "bottom"] },
+  { name: "IconArrowUpRight", category: "navigation", keywords: ["arrow", "external", "link", "open"] },
+  { name: "IconChevronRight", category: "navigation", keywords: ["chevron", "right", "next", "expand"] },
+  { name: "IconChevronLeft", category: "navigation", keywords: ["chevron", "left", "back", "collapse"] },
+  { name: "IconChevronUp", category: "navigation", keywords: ["chevron", "up", "expand"] },
+  { name: "IconChevronDown", category: "navigation", keywords: ["chevron", "down", "dropdown", "collapse"] },
+  { name: "IconMenu2", category: "navigation", keywords: ["menu", "hamburger", "nav", "mobile"] },
+  { name: "IconX", category: "navigation", keywords: ["close", "x", "cancel", "remove"] },
+  { name: "IconHome", category: "navigation", keywords: ["home", "house", "main", "start"] },
+  { name: "IconSearch", category: "navigation", keywords: ["search", "find", "magnify", "lookup"] },
+  { name: "IconExternalLink", category: "navigation", keywords: ["external", "link", "open", "new"] },
+  { name: "IconLink", category: "navigation", keywords: ["link", "chain", "url", "connect"] },
+  { name: "IconAnchor", category: "navigation", keywords: ["anchor", "link", "section", "scroll"] },
+  { name: "IconMapPin", category: "navigation", keywords: ["map", "pin", "location", "place"] },
+  { name: "IconMap", category: "navigation", keywords: ["map", "location", "directions"] },
+  { name: "IconCompass", category: "navigation", keywords: ["compass", "direction", "explore", "navigate"] },
+  { name: "IconRefresh", category: "navigation", keywords: ["refresh", "reload", "update", "sync"] },
+  // ============================================================================
+  // COMMERCE (~20 icons)
+  // ============================================================================
+  { name: "IconShoppingCart", category: "commerce", keywords: ["cart", "shop", "buy", "ecommerce"] },
+  { name: "IconShoppingBag", category: "commerce", keywords: ["bag", "shop", "buy", "store"] },
+  { name: "IconBasket", category: "commerce", keywords: ["basket", "shop", "buy", "cart"] },
+  { name: "IconCreditCard", category: "commerce", keywords: ["credit", "card", "payment", "pay"] },
+  { name: "IconWallet", category: "commerce", keywords: ["wallet", "money", "payment", "cash"] },
+  { name: "IconCash", category: "commerce", keywords: ["cash", "money", "payment", "dollar"] },
+  { name: "IconReceipt", category: "commerce", keywords: ["receipt", "invoice", "bill", "payment"] },
+  { name: "IconTruck", category: "commerce", keywords: ["truck", "delivery", "shipping", "transport"] },
+  { name: "IconPackage", category: "commerce", keywords: ["package", "box", "shipping", "delivery"] },
+  { name: "IconGift", category: "commerce", keywords: ["gift", "present", "reward", "prize"] },
+  { name: "IconTicket", category: "commerce", keywords: ["ticket", "event", "coupon", "pass"] },
+  { name: "IconTag", category: "commerce", keywords: ["tag", "label", "price", "sale"] },
+  { name: "IconTags", category: "commerce", keywords: ["tags", "labels", "categories"] },
+  { name: "IconDiscount", category: "commerce", keywords: ["discount", "sale", "percent", "offer"] },
+  { name: "IconBuildingStore", category: "commerce", keywords: ["store", "shop", "building", "retail"] },
+  { name: "IconStarFilled", category: "commerce", keywords: ["star", "rating", "review", "favorite"] },
+  { name: "IconStar", category: "commerce", keywords: ["star", "rating", "review", "favorite"] },
+  { name: "IconHeart", category: "commerce", keywords: ["heart", "like", "love", "favorite", "wishlist"] },
+  { name: "IconHeartFilled", category: "commerce", keywords: ["heart", "like", "love", "favorite", "wishlist"] },
+  { name: "IconCoin", category: "commerce", keywords: ["coin", "money", "currency", "token"] },
+  // ============================================================================
+  // UI ELEMENTS (~25 icons)
+  // ============================================================================
+  { name: "IconPlus", category: "ui", keywords: ["plus", "add", "new", "create"] },
+  { name: "IconMinus", category: "ui", keywords: ["minus", "remove", "subtract"] },
+  { name: "IconCheck", category: "ui", keywords: ["check", "done", "complete", "success"] },
+  { name: "IconCircleCheck", category: "ui", keywords: ["check", "done", "complete", "circle"] },
+  { name: "IconCircleX", category: "ui", keywords: ["close", "error", "fail", "circle"] },
+  { name: "IconAlertCircle", category: "ui", keywords: ["alert", "warning", "error", "info"] },
+  { name: "IconAlertTriangle", category: "ui", keywords: ["alert", "warning", "caution", "danger"] },
+  { name: "IconInfoCircle", category: "ui", keywords: ["info", "information", "help", "about"] },
+  { name: "IconQuestionMark", category: "ui", keywords: ["question", "help", "faq", "support"] },
+  { name: "IconHelp", category: "ui", keywords: ["help", "support", "question", "assist"] },
+  { name: "IconSettings", category: "ui", keywords: ["settings", "gear", "config", "preferences"] },
+  { name: "IconAdjustments", category: "ui", keywords: ["adjustments", "settings", "sliders", "filter"] },
+  { name: "IconFilter", category: "ui", keywords: ["filter", "sort", "funnel"] },
+  { name: "IconDotsVertical", category: "ui", keywords: ["dots", "menu", "more", "options"] },
+  { name: "IconDots", category: "ui", keywords: ["dots", "menu", "more", "options", "horizontal"] },
+  { name: "IconEdit", category: "ui", keywords: ["edit", "pencil", "modify", "write"] },
+  { name: "IconTrash", category: "ui", keywords: ["trash", "delete", "remove", "bin"] },
+  { name: "IconCopy", category: "ui", keywords: ["copy", "duplicate", "clone"] },
+  { name: "IconDownload", category: "ui", keywords: ["download", "save", "export", "arrow"] },
+  { name: "IconUpload", category: "ui", keywords: ["upload", "import", "add", "arrow"] },
+  { name: "IconShare", category: "ui", keywords: ["share", "social", "send", "export"] },
+  { name: "IconShare2", category: "ui", keywords: ["share", "network", "connect"] },
+  { name: "IconEye", category: "ui", keywords: ["eye", "view", "visible", "show"] },
+  { name: "IconEyeOff", category: "ui", keywords: ["eye", "hidden", "invisible", "hide"] },
+  { name: "IconLock", category: "ui", keywords: ["lock", "secure", "private", "password"] },
+  { name: "IconLockOpen", category: "ui", keywords: ["unlock", "open", "public", "access"] },
+  // ============================================================================
+  // FILES & DOCUMENTS (~15 icons)
+  // ============================================================================
+  { name: "IconFile", category: "files", keywords: ["file", "document", "page"] },
+  { name: "IconFileText", category: "files", keywords: ["file", "document", "text", "page"] },
+  { name: "IconFileTypePdf", category: "files", keywords: ["pdf", "file", "document", "adobe"] },
+  { name: "IconFileMusic", category: "files", keywords: ["file", "music", "audio", "mp3"] },
+  { name: "IconVideo", category: "files", keywords: ["file", "video", "movie", "mp4"] },
+  { name: "IconPhoto", category: "files", keywords: ["file", "image", "photo", "picture"] },
+  { name: "IconFileCode", category: "files", keywords: ["file", "code", "programming", "dev"] },
+  { name: "IconFileZip", category: "files", keywords: ["file", "zip", "archive", "compress"] },
+  { name: "IconFolder", category: "files", keywords: ["folder", "directory", "files"] },
+  { name: "IconFolderOpen", category: "files", keywords: ["folder", "open", "directory"] },
+  { name: "IconClipboard", category: "files", keywords: ["clipboard", "paste", "copy"] },
+  { name: "IconClipboardCheck", category: "files", keywords: ["clipboard", "done", "complete"] },
+  { name: "IconNotes", category: "files", keywords: ["notes", "document", "memo", "write"] },
+  { name: "IconBook", category: "files", keywords: ["book", "read", "documentation", "manual"] },
+  { name: "IconBookmark", category: "files", keywords: ["bookmark", "save", "favorite", "mark"] },
+  // ============================================================================
+  // WEATHER (~10 icons)
+  // ============================================================================
+  { name: "IconSun", category: "weather", keywords: ["sun", "sunny", "day", "bright"] },
+  { name: "IconMoon", category: "weather", keywords: ["moon", "night", "dark", "sleep"] },
+  { name: "IconCloud", category: "weather", keywords: ["cloud", "cloudy", "weather"] },
+  { name: "IconCloudRain", category: "weather", keywords: ["cloud", "rain", "weather", "rainy"] },
+  { name: "IconCloudSnow", category: "weather", keywords: ["cloud", "snow", "weather", "winter"] },
+  { name: "IconWind", category: "weather", keywords: ["wind", "windy", "weather", "air"] },
+  { name: "IconUmbrella", category: "weather", keywords: ["umbrella", "rain", "weather", "protection"] },
+  { name: "IconTemperature", category: "weather", keywords: ["temperature", "thermometer", "weather"] },
+  { name: "IconFlame", category: "weather", keywords: ["flame", "fire", "hot", "trending"] },
+  { name: "IconSnowflake", category: "weather", keywords: ["snowflake", "snow", "winter", "cold"] },
+  // ============================================================================
+  // MISCELLANEOUS (~15 icons)
+  // ============================================================================
+  { name: "IconUser", category: "misc", keywords: ["user", "person", "account", "profile"] },
+  { name: "IconUsers", category: "misc", keywords: ["users", "people", "team", "group"] },
+  { name: "IconUserCircle", category: "misc", keywords: ["user", "avatar", "profile", "account"] },
+  { name: "IconBriefcase", category: "misc", keywords: ["briefcase", "work", "job", "business"] },
+  { name: "IconBuilding", category: "misc", keywords: ["building", "office", "company", "business"] },
+  { name: "IconCalendar", category: "misc", keywords: ["calendar", "date", "schedule", "event"] },
+  { name: "IconCalendarEvent", category: "misc", keywords: ["calendar", "event", "schedule", "meeting"] },
+  { name: "IconClock", category: "misc", keywords: ["clock", "time", "hour", "schedule"] },
+  { name: "IconHourglass", category: "misc", keywords: ["hourglass", "time", "wait", "timer"] },
+  { name: "IconRocket", category: "misc", keywords: ["rocket", "launch", "startup", "fast"] },
+  { name: "IconBolt", category: "misc", keywords: ["bolt", "lightning", "fast", "power"] },
+  { name: "IconSparkles", category: "misc", keywords: ["sparkles", "magic", "new", "ai"] },
+  { name: "IconTrophy", category: "misc", keywords: ["trophy", "award", "winner", "achievement"] },
+  { name: "IconTarget", category: "misc", keywords: ["target", "goal", "aim", "focus"] },
+  { name: "IconWorld", category: "misc", keywords: ["world", "globe", "earth", "international"] }
+];
+var ICON_CATEGORIES = {
+  brand: "Social & Brands",
+  communication: "Communication",
+  media: "Media",
+  navigation: "Navigation",
+  commerce: "Commerce",
+  ui: "UI Elements",
+  files: "Files",
+  weather: "Weather",
+  misc: "Miscellaneous"
+};
+var ICON_ALIASES = {
+  // Social media rebrands & abbreviations
+  "x": ["IconBrandTwitter", "IconBrandX", "IconX"],
+  "tweet": ["IconBrandTwitter", "IconBrandX"],
+  "bird": ["IconBrandTwitter"],
+  "ig": ["IconBrandInstagram"],
+  "insta": ["IconBrandInstagram"],
+  "gram": ["IconBrandInstagram"],
+  "fb": ["IconBrandFacebook"],
+  "meta": ["IconBrandFacebook", "IconBrandInstagram", "IconBrandWhatsapp"],
+  "li": ["IconBrandLinkedin"],
+  "yt": ["IconBrandYoutube"],
+  "tt": ["IconBrandTiktok"],
+  "gh": ["IconBrandGithub"],
+  "wa": ["IconBrandWhatsapp"],
+  "am": ["IconBrandAppleMusic"],
+  "applemusic": ["IconBrandAppleMusic"],
+  "itunes": ["IconBrandAppleMusic"],
+  // Common abbreviations
+  "email": ["IconMail", "IconMailOpened", "IconInbox", "IconAt"],
+  "envelope": ["IconMail", "IconMailOpened"],
+  "telephone": ["IconPhone", "IconPhoneCall"],
+  "mobile": ["IconPhone", "IconPhoneCall"],
+  "cell": ["IconPhone", "IconPhoneCall"],
+  "sms": ["IconMessage", "IconMessageCircle", "IconMessages"],
+  "txt": ["IconMessage", "IconMessageCircle"],
+  "text": ["IconMessage", "IconMessageCircle", "IconFileText"],
+  // Commerce
+  "basket": ["IconShoppingCart", "IconShoppingBag", "IconBasket"],
+  "buy": ["IconShoppingCart", "IconShoppingBag", "IconCreditCard"],
+  "purchase": ["IconShoppingCart", "IconCreditCard", "IconReceipt"],
+  "checkout": ["IconShoppingCart", "IconCreditCard"],
+  "pay": ["IconCreditCard", "IconWallet", "IconCash", "IconBrandStripe", "IconBrandPaypal"],
+  "money": ["IconCash", "IconWallet", "IconCoin", "IconCreditCard"],
+  "dollar": ["IconCash", "IconCoin"],
+  "ship": ["IconTruck", "IconPackage"],
+  "deliver": ["IconTruck", "IconPackage"],
+  // Common UI terms
+  "close": ["IconX", "IconCircleX"],
+  "cancel": ["IconX", "IconCircleX"],
+  "remove": ["IconX", "IconTrash", "IconMinus"],
+  "delete": ["IconTrash", "IconX"],
+  "add": ["IconPlus", "IconUpload"],
+  "new": ["IconPlus", "IconSparkles"],
+  "create": ["IconPlus", "IconEdit"],
+  "ok": ["IconCheck", "IconCircleCheck"],
+  "yes": ["IconCheck", "IconCircleCheck"],
+  "done": ["IconCheck", "IconCircleCheck", "IconClipboardCheck"],
+  "complete": ["IconCheck", "IconCircleCheck"],
+  "success": ["IconCheck", "IconCircleCheck"],
+  "error": ["IconCircleX", "IconAlertCircle", "IconAlertTriangle"],
+  "warning": ["IconAlertTriangle", "IconAlertCircle"],
+  "info": ["IconInfoCircle", "IconHelp"],
+  "help": ["IconHelp", "IconQuestionMark", "IconInfoCircle"],
+  "faq": ["IconQuestionMark", "IconHelp"],
+  "gear": ["IconSettings", "IconAdjustments"],
+  "cog": ["IconSettings"],
+  "config": ["IconSettings", "IconAdjustments"],
+  "prefs": ["IconSettings", "IconAdjustments"],
+  "menu": ["IconMenu2", "IconDotsVertical", "IconDotsHorizontal"],
+  "hamburger": ["IconMenu2"],
+  "more": ["IconDotsVertical", "IconDotsHorizontal"],
+  "options": ["IconDotsVertical", "IconDotsHorizontal", "IconSettings"],
+  // Navigation
+  "next": ["IconArrowRight", "IconChevronRight", "IconPlayerSkipForward"],
+  "prev": ["IconArrowLeft", "IconChevronLeft", "IconPlayerSkipBack"],
+  "previous": ["IconArrowLeft", "IconChevronLeft", "IconPlayerSkipBack"],
+  "back": ["IconArrowLeft", "IconChevronLeft"],
+  "forward": ["IconArrowRight", "IconChevronRight", "IconPlayerSkipForward"],
+  "up": ["IconArrowUp", "IconChevronUp"],
+  "down": ["IconArrowDown", "IconChevronDown"],
+  "external": ["IconExternalLink", "IconArrowUpRight"],
+  "outbound": ["IconExternalLink", "IconArrowUpRight"],
+  // Media
+  "start": ["IconPlayerPlay"],
+  "stop": ["IconPlayerStop", "IconPlayerPause"],
+  "mute": ["IconVolumeOff"],
+  "silent": ["IconVolumeOff", "IconBellOff"],
+  "audio": ["IconVolume", "IconMusic", "IconHeadphones", "IconMicrophone"],
+  "sound": ["IconVolume", "IconVolume2", "IconVolume3"],
+  "speaker": ["IconVolume", "IconVolume2", "IconVolume3"],
+  "mic": ["IconMicrophone"],
+  "cam": ["IconCamera", "IconVideo"],
+  "pic": ["IconPhoto", "IconCamera", "IconFileImage"],
+  "img": ["IconPhoto", "IconFileImage"],
+  "image": ["IconPhoto", "IconFileImage"],
+  "picture": ["IconPhoto", "IconFileImage"],
+  // Misc
+  "person": ["IconUser", "IconUserCircle"],
+  "profile": ["IconUser", "IconUserCircle"],
+  "account": ["IconUser", "IconUserCircle"],
+  "avatar": ["IconUserCircle"],
+  "people": ["IconUsers"],
+  "team": ["IconUsers"],
+  "group": ["IconUsers"],
+  "date": ["IconCalendar", "IconCalendarEvent"],
+  "schedule": ["IconCalendar", "IconCalendarEvent", "IconClock"],
+  "event": ["IconCalendar", "IconCalendarEvent", "IconTicket"],
+  "time": ["IconClock", "IconHourglass"],
+  "hour": ["IconClock"],
+  "fast": ["IconRocket", "IconBolt"],
+  "quick": ["IconRocket", "IconBolt"],
+  "magic": ["IconSparkles"],
+  "ai": ["IconSparkles", "IconRocket"],
+  "globe": ["IconWorld"],
+  "earth": ["IconWorld"],
+  "international": ["IconWorld"],
+  "hot": ["IconFlame", "IconTrending"],
+  "fire": ["IconFlame"],
+  "trending": ["IconFlame"]
+};
+function levenshteinDistance(str1, str2) {
+  const m = str1.length;
+  const n = str2.length;
+  if (m === 0) return n;
+  if (n === 0) return m;
+  const dp = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      const cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        // deletion
+        dp[i][j - 1] + 1,
+        // insertion
+        dp[i - 1][j - 1] + cost
+        // substitution
+      );
+    }
+  }
+  return dp[m][n];
+}
+function fuzzyMatch(query, target) {
+  if (query.length < 3) return false;
+  const threshold = query.length <= 5 ? 1 : 2;
+  return levenshteinDistance(query, target) <= threshold;
+}
+function getIconsByCategory(category) {
+  return ICON_METADATA.filter((icon) => icon.category === category);
+}
+function searchIcons(query) {
+  const lowerQuery = query.toLowerCase().trim();
+  if (!lowerQuery) return ICON_METADATA;
+  const matches = /* @__PURE__ */ new Map();
+  const addMatch = (iconName, score) => {
+    const existing = matches.get(iconName);
+    if (existing === void 0 || score < existing) {
+      matches.set(iconName, score);
+    }
+  };
+  const aliasMatches = ICON_ALIASES[lowerQuery];
+  if (aliasMatches) {
+    aliasMatches.forEach((iconName) => addMatch(iconName, 0));
+  }
+  for (const icon of ICON_METADATA) {
+    const lowerName = icon.name.toLowerCase();
+    if (lowerName.includes(lowerQuery)) {
+      addMatch(icon.name, 1);
+      continue;
+    }
+    if (icon.keywords.some((keyword) => keyword.includes(lowerQuery))) {
+      addMatch(icon.name, 2);
+      continue;
+    }
+    if (icon.keywords.some((keyword) => fuzzyMatch(lowerQuery, keyword))) {
+      addMatch(icon.name, 3);
+      continue;
+    }
+    const nameParts = icon.name.replace(/([A-Z])/g, " $1").toLowerCase().trim().split(/\s+/);
+    if (nameParts.some((part) => fuzzyMatch(lowerQuery, part))) {
+      addMatch(icon.name, 4);
+    }
+  }
+  const sortedNames = [...matches.entries()].sort((a, b) => a[1] - b[1]).map(([name]) => name);
+  return sortedNames.map((name) => ICON_METADATA.find((icon) => icon.name === name)).filter((icon) => icon !== void 0);
+}
+function getIconMeta(name) {
+  return ICON_METADATA.find((icon) => icon.name === name);
+}
+function getIconLabel(name) {
+  let label = name.replace(/^Icon/, "");
+  label = label.replace(/^Brand/, "");
+  label = label.replace(/([A-Z])/g, " $1").trim();
+  return label;
+}
+
+// src/components/icon-picker.css
+styleInject('.ya-icon-picker {\n  min-width: 320px;\n  max-width: 360px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-icon-picker-search {\n  padding: 12px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-icon-picker-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-icon-picker-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-icon-picker-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-icon-picker-categories {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 8px 12px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-icon-category-btn {\n  padding: 5px 10px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: rgba(255, 255, 255, 0.7);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n.ya-icon-category-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #ffffff;\n}\n.ya-icon-category-btn.is-active {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-icon-picker-grid-container {\n  position: relative;\n  height: 264px;\n  overflow: hidden;\n}\n.ya-icon-picker-grid {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 4px;\n  padding: 12px;\n  height: 100%;\n  overflow-y: auto;\n  align-content: start;\n}\n.ya-icon-picker-grid::-webkit-scrollbar {\n  width: 6px;\n}\n.ya-icon-picker-grid::-webkit-scrollbar-track {\n  background: transparent;\n}\n.ya-icon-picker-grid::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n.ya-icon-picker-grid::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n.ya-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-icon-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n  color: #ffffff;\n}\n.ya-icon-btn.is-selected {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-icon-btn.is-focused {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: -2px;\n}\n.ya-icon-btn-none {\n  position: relative;\n}\n.ya-icon-btn-none-x {\n  font-size: 20px;\n  line-height: 1;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-icon-btn-none:hover .ya-icon-btn-none-x {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-icon-btn-none.is-selected .ya-icon-btn-none-x {\n  color: #1a1a1a;\n}\n.ya-icon-picker-empty {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  color: rgba(255, 255, 255, 0.5);\n  font-size: 13px;\n  pointer-events: none;\n}\n.ya-icon-picker-footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  background: rgba(255, 255, 255, 0.02);\n}\n.ya-icon-picker-selected-name {\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.7);\n}\n.ya-edit-icon-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-edit-icon-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-edit-icon-preview {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n}\n.ya-edit-icon-label {\n  flex: 1;\n}\n');
+
+// src/components/IconPicker.tsx
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function getIconPickerLabel(value) {
+  if (!value) return "Icon";
+  return getIconLabel(value);
+}
+function IconPicker({ value, onChange, onClose }) {
+  const [searchQuery, setSearchQuery] = useState18("");
+  const [activeCategory, setActiveCategory] = useState18("all");
+  const [focusedIndex, setFocusedIndex] = useState18(-1);
+  const searchInputRef = useRef18(null);
+  const gridRef = useRef18(null);
+  useEffect18(() => {
+    searchInputRef.current?.focus();
+  }, []);
+  const filteredIcons = useMemo7(() => {
+    if (searchQuery.trim()) {
+      return searchIcons(searchQuery);
+    }
+    if (activeCategory === "all") {
+      return ICON_METADATA;
+    }
+    return getIconsByCategory(activeCategory);
+  }, [searchQuery, activeCategory]);
+  const handleSearchChange = useCallback19((e) => {
+    setSearchQuery(e.target.value);
+    setFocusedIndex(-1);
+    if (e.target.value.trim()) {
+      setActiveCategory("all");
+    }
+  }, []);
+  const handleIconSelect = useCallback19((iconName) => {
+    onChange(iconName);
+    onClose();
+  }, [onChange, onClose]);
+  const handleKeyDown = useCallback19((e) => {
+    const iconsPerRow = 6;
+    const totalIcons = filteredIcons.length + 1;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev + iconsPerRow;
+          return next < totalIcons ? next : prev;
+        });
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev - iconsPerRow;
+          return next >= 0 ? next : prev;
+        });
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev + 1;
+          return next < totalIcons ? next : prev;
+        });
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev - 1;
+          return next >= 0 ? next : prev;
+        });
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (focusedIndex === 0) {
+          handleIconSelect(null);
+        } else if (focusedIndex > 0 && focusedIndex <= filteredIcons.length) {
+          handleIconSelect(filteredIcons[focusedIndex - 1].name);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        onClose();
+        break;
+    }
+  }, [filteredIcons, focusedIndex, handleIconSelect, onClose]);
+  useEffect18(() => {
+    if (focusedIndex >= 0 && gridRef.current) {
+      const focusedButton = gridRef.current.children[focusedIndex];
+      focusedButton?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [focusedIndex]);
+  const handleMouseDown = useCallback19((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsxs10("div", { className: "ya-icon-picker", onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx18("div", { className: "ya-icon-picker-search", children: /* @__PURE__ */ jsx18(
+      "input",
+      {
+        ref: searchInputRef,
+        type: "text",
+        value: searchQuery,
+        onChange: handleSearchChange,
+        onClick: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        className: "ya-icon-picker-input",
+        placeholder: "Search icons...",
+        autoComplete: "off",
+        spellCheck: false
+      }
+    ) }),
+    /* @__PURE__ */ jsxs10("div", { className: "ya-icon-picker-grid-container", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "ya-icon-picker-grid", ref: gridRef, children: [
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            className: `ya-icon-btn ya-icon-btn-none ${!value ? "is-selected" : ""} ${focusedIndex === 0 ? "is-focused" : ""}`,
+            onClick: () => handleIconSelect(null),
+            onMouseDown: handleMouseDown,
+            title: "No icon",
+            children: /* @__PURE__ */ jsx18("span", { className: "ya-icon-btn-none-x", children: "\xD7" })
+          }
+        ),
+        filteredIcons.map((icon, index) => /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            className: `ya-icon-btn ${value === icon.name ? "is-selected" : ""} ${focusedIndex === index + 1 ? "is-focused" : ""}`,
+            onClick: () => handleIconSelect(icon.name),
+            onMouseDown: handleMouseDown,
+            title: getIconLabel(icon.name),
+            children: /* @__PURE__ */ jsx18(DynamicIcon, { name: icon.name, size: 20 })
+          },
+          icon.name
+        ))
+      ] }),
+      filteredIcons.length === 0 && /* @__PURE__ */ jsxs10("div", { className: "ya-icon-picker-empty", children: [
+        'No icons found for "',
+        searchQuery,
+        '"'
+      ] })
+    ] }),
+    value && /* @__PURE__ */ jsxs10("div", { className: "ya-icon-picker-footer", children: [
+      /* @__PURE__ */ jsx18(DynamicIcon, { name: value, size: 16 }),
+      /* @__PURE__ */ jsx18("span", { className: "ya-icon-picker-selected-name", children: getIconLabel(value) })
+    ] })
+  ] });
+}
+
+// src/components/ya-link.css
+styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editable:has(.ya-text-editing),\n.ya-link-editable:has(.ya-text-editing):hover {\n  outline: none !important;\n  cursor: text;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ProseMirror-gapcursor {\n  display: none !important;\n}\n.ProseMirror .ProseMirror-dropcursor {\n  display: none !important;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: fixed;\n  z-index: 10000;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover--above {\n  animation: ya-href-popover-fade-in-above 0.15s ease;\n}\n@keyframes ya-href-popover-fade-in-above {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-href-popover--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n.ya-link-edit-popover {\n  position: fixed;\n  z-index: 10000;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 100ms ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n@keyframes ya-link-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  30% {\n    outline-color: rgba(134, 239, 172, 0.6);\n    outline-width: 2px;\n  }\n  100% {\n    outline-color: transparent;\n    outline-width: 2px;\n  }\n}\n.ya-link-success {\n  outline: 2px solid transparent;\n  outline-offset: 4px;\n  border-radius: 4px;\n  animation: ya-link-success 0.5s ease;\n}\n');
+
+// src/components/YaLink.tsx
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function isInternalPath(path) {
+  if (!path) return false;
   if (path.startsWith("#")) return false;
   if (path.startsWith("//")) return false;
   if (path.includes("://")) return false;
@@ -5929,41 +7210,49 @@ function discoverSectionsFromDOM() {
   });
   return sections;
 }
-function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName, style, as: Component = "a", children, availablePages, onClick, target, rel }) {
+function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName, style, as: Component = "a", children, availablePages, onClick, target, rel, title, iconPosition, iconSize }) {
+  const effectiveIconSize = iconSize ?? (iconPosition === "only" ? 24 : 20);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
+  const iconFieldId = `${fieldId}.icon`;
   const textContent = useContent(textFieldId);
   const hrefContent = useContent(hrefFieldId);
+  const iconContent = useContent(iconFieldId);
   const { mode } = textContent;
   const { getPages } = useContentStore();
   const [, navigate] = useLocation();
   const pages = availablePages ?? getPages();
-  const [sections, setSections] = useState16([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState16(false);
+  const [sections, setSections] = useState19([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState19(false);
   const storeText = textContent.get();
   const storeHref = hrefContent.get();
+  const storeIcon = iconContent.get();
   const isIconMode = children != null && typeof children !== "string";
   const text2 = storeText || (typeof children === "string" ? children : "");
   const href = storeHref || defaultHref;
+  const currentIcon = storeIcon || null;
   const isExternal = isExternalHref(href);
   const effectiveTarget = target ?? (isExternal ? "_blank" : void 0);
   const effectiveRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
-  const [editingMode, setEditingMode] = useState16(null);
-  const [originalText, setOriginalText] = useState16(text2);
-  const [originalHref, setOriginalHref] = useState16(href);
-  const [currentHref, setCurrentHref] = useState16(href);
-  const [isExternalUrl, setIsExternalUrl] = useState16(false);
-  const [externalUrl, setExternalUrl] = useState16("");
-  const containerRef = useRef17(null);
-  const hrefPopoverRef = useRef17(null);
-  const [actionButtonsPos, setActionButtonsPos] = useState16(null);
-  const [editPopoverPos, setEditPopoverPos] = useState16(null);
-  const [editPopoverVisible, setEditPopoverVisible] = useState16(false);
-  const [editPopoverMounted, setEditPopoverMounted] = useState16(false);
-  const [hrefPopoverPos, setHrefPopoverPos] = useState16(null);
-  const handleSaveTextRef = useRef17(() => {
+  const [editingMode, setEditingMode] = useState19(null);
+  const [showSuccess, setShowSuccess] = useState19(false);
+  const [originalText, setOriginalText] = useState19(text2);
+  const [originalHref, setOriginalHref] = useState19(href);
+  const [currentHref, setCurrentHref] = useState19(href);
+  const [isExternalUrl, setIsExternalUrl] = useState19(false);
+  const [externalUrl, setExternalUrl] = useState19("");
+  const containerRef = useRef19(null);
+  const hrefPopoverRef = useRef19(null);
+  const [actionButtonsPos, setActionButtonsPos] = useState19(null);
+  const [editPopoverPos, setEditPopoverPos] = useState19(null);
+  const [editPopoverVisible, setEditPopoverVisible] = useState19(false);
+  const [editPopoverMounted, setEditPopoverMounted] = useState19(false);
+  const [hrefPopoverPos, setHrefPopoverPos] = useState19(null);
+  const [iconPopoverPos, setIconPopoverPos] = useState19(null);
+  const iconPopoverRef = useRef19(null);
+  const handleSaveTextRef = useRef19(() => {
   });
-  const handleCancelTextRef = useRef17(() => {
+  const handleCancelTextRef = useRef19(() => {
   });
   const {
     popoverRef: editPopoverRef,
@@ -5977,12 +7266,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
   });
   const triggerRef = containerRef;
   const instanceId = useId();
-  useEffect16(() => {
+  useEffect19(() => {
     if (showEditPopover && mode === "inline-edit" && !editingMode) {
       window.dispatchEvent(new CustomEvent("yalink:popover-open", { detail: { id: instanceId } }));
     }
   }, [showEditPopover, mode, editingMode, instanceId]);
-  useEffect16(() => {
+  useEffect19(() => {
     const handleOtherPopoverOpen = (event) => {
       const customEvent = event;
       if (customEvent.detail.id !== instanceId && showEditPopover) {
@@ -6036,19 +7325,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       }
     }
   });
-  useEffect16(() => {
+  useEffect19(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text2) {
         editor.commands.setContent(text2);
       }
     }
   }, [text2, editor, editingMode]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (editingMode !== "text" || !containerRef.current) {
       setActionButtonsPos(null);
       return;
@@ -6069,7 +7358,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
-  useEffect16(() => {
+  useEffect19(() => {
     const shouldShow = showEditPopover && !editingMode && mode === "inline-edit";
     if (shouldShow) {
       setEditPopoverMounted(true);
@@ -6131,7 +7420,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -6145,7 +7434,44 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  const handleSaveText = useCallback18(() => {
+  useLayoutEffect3(() => {
+    if (editingMode !== "icon" || !containerRef.current) {
+      setIconPopoverPos(null);
+      return;
+    }
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const popoverHeight = 400;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const isAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;
+      setIconPopoverPos({
+        top: isAbove ? rect.top - 8 : rect.bottom + 8,
+        left: rect.left + rect.width / 2,
+        isAbove
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [editingMode]);
+  useEffect19(() => {
+    if (editingMode !== "icon") return;
+    const handleClickOutside = (event) => {
+      const target2 = event.target;
+      if (iconPopoverRef.current?.contains(target2)) return;
+      if (containerRef.current?.contains(target2)) return;
+      setEditingMode(null);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [editingMode]);
+  const handleSaveText = useCallback20(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -6153,30 +7479,40 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     textContent.save();
     setEditingMode(null);
   }, [editor, textContent]);
-  const handleSaveLink = useCallback18(() => {
+  const handleSaveLink = useCallback20(() => {
     hrefContent.set(currentHref, "user");
     hrefContent.save();
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [currentHref, hrefContent]);
-  const handleCancelText = useCallback18(() => {
+  const handleCancelText = useCallback20(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback18(() => {
+  const handleCancelLink = useCallback20(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  useEffect16(() => {
+  const handleIconSelect = useCallback20((iconName) => {
+    iconContent.set(iconName || "", "user");
+    iconContent.save();
+    setEditingMode(null);
+    setShowSuccess(true);
+    setTimeout(() => setShowSuccess(false), 500);
+  }, [iconContent]);
+  const handleCancelIcon = useCallback20(() => {
+    setEditingMode(null);
+  }, []);
+  useEffect19(() => {
     handleSaveTextRef.current = handleSaveText;
     handleCancelTextRef.current = handleCancelText;
   }, [handleSaveText, handleCancelText]);
-  const handleClick = useCallback18(
+  const handleClick = useCallback20(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -6208,7 +7544,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [href, navigate, onClick]
   );
-  const startEditText = useCallback18(() => {
+  const startEditText = useCallback20(() => {
     hideEditPopover();
     if (isIconMode) {
       window.dispatchEvent(new CustomEvent("yatext:edit-mode", {
@@ -6222,14 +7558,18 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       }, 20);
     }
   }, [text2, editor, hideEditPopover, isIconMode, fieldId]);
-  const startEditLink = useCallback18(() => {
+  const startEditLink = useCallback20(() => {
     hideEditPopover();
     setEditingMode("link");
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
   }, [href, hideEditPopover]);
-  const handleKeyDown = useCallback18(
+  const startEditIcon = useCallback20(() => {
+    hideEditPopover();
+    setEditingMode("icon");
+  }, [hideEditPopover]);
+  const handleKeyDown = useCallback20(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -6250,7 +7590,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback18(
+  const handleFontSizeChange = useCallback20(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -6262,7 +7602,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback18(
+  const handleFontWeightChange = useCallback20(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -6274,11 +7614,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [editor]
   );
-  const handlePageSelect = useCallback18((path) => {
+  const handlePageSelect = useCallback20((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback18(() => {
+  const handleExternalUrlApply = useCallback20(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -6293,28 +7633,58 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     const attrs = editor.getAttributes("textStyle");
     return attrs.fontWeight || "";
   };
+  const renderIcon = () => currentIcon ? /* @__PURE__ */ jsx19(DynamicIcon, { name: currentIcon, size: effectiveIconSize }) : null;
+  const renderLinkContent = (textContent2) => {
+    if (iconPosition === "only") {
+      return currentIcon ? renderIcon() : children;
+    }
+    if (iconPosition === "left") {
+      return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        renderIcon(),
+        renderIcon() && /* @__PURE__ */ jsx19("span", { style: { marginLeft: "0.35em" } }),
+        textContent2
+      ] });
+    }
+    if (iconPosition === "right") {
+      return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        textContent2,
+        renderIcon() && /* @__PURE__ */ jsx19("span", { style: { marginRight: "0.35em" } }),
+        renderIcon()
+      ] });
+    }
+    return textContent2;
+  };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx16(SafeHtml, { content: text2, mode });
+    let content;
+    if (iconPosition) {
+      content = renderLinkContent(/* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode }));
+    } else if (isIconMode) {
+      content = children;
+    } else {
+      content = /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode });
+    }
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx19(
         WouterLink,
         {
           href,
           className,
           style,
+          title,
           "data-ya-restricted": "true",
           "data-field-id": fieldId,
           children: content
         }
       );
     }
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx19(
       Component,
       {
         ref: containerRef,
         href: Component === "a" ? href : void 0,
         target: Component === "a" ? effectiveTarget : void 0,
         rel: Component === "a" ? effectiveRel : void 0,
+        title,
         className,
         style,
         "data-ya-restricted": "true",
@@ -6323,29 +7693,48 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       }
     );
   }
-  return /* @__PURE__ */ jsxs9("span", { className: `ya-link-wrapper ${wrapperClassName || ""}`, children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs11("span", { className: `ya-link-wrapper ${wrapperClassName || ""}`, children: [
+    /* @__PURE__ */ jsx19(
       Component,
       {
         ref: containerRef,
         href: Component === "a" ? href : void 0,
         target: Component === "a" ? effectiveTarget : void 0,
         rel: Component === "a" ? effectiveRel : void 0,
-        className: `${className || ""} ${editingMode ? "ya-link-editing" : "ya-link-editable"}`,
+        title,
+        className: `${className || ""} ${editingMode ? "ya-link-editing" : "ya-link-editable"} ${showSuccess ? "ya-link-success" : ""}`,
         style,
         "data-ya-restricted": "true",
+        "data-ya-link": "true",
         "data-field-id": fieldId,
         onClick: handleClick,
         onMouseEnter: safeTriangleHandlers.onMouseEnter,
         onMouseLeave: safeTriangleHandlers.onMouseLeave,
         onFocus: safeTriangleHandlers.onFocus,
         onKeyDown: handleKeyDown,
-        children: isIconMode ? (
-          // Icon mode: render children directly, no text editing
+        children: iconPosition === "only" ? (
+          // Icon-only mode: render DynamicIcon
+          currentIcon ? /* @__PURE__ */ jsx19(DynamicIcon, { name: currentIcon, size: effectiveIconSize }) : children
+        ) : iconPosition === "left" ? (
+          // Icon before text
+          /* @__PURE__ */ jsxs11(Fragment5, { children: [
+            renderIcon(),
+            renderIcon() && /* @__PURE__ */ jsx19("span", { style: { marginLeft: "0.35em" } }),
+            isIconMode ? children : editor ? editingMode === "text" ? /* @__PURE__ */ jsx19(EditorContent2, { editor }) : /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode }) : /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode })
+          ] })
+        ) : iconPosition === "right" ? (
+          // Text before icon
+          /* @__PURE__ */ jsxs11(Fragment5, { children: [
+            isIconMode ? children : editor ? editingMode === "text" ? /* @__PURE__ */ jsx19(EditorContent2, { editor }) : /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode }) : /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode }),
+            renderIcon() && /* @__PURE__ */ jsx19("span", { style: { marginRight: "0.35em" } }),
+            renderIcon()
+          ] })
+        ) : isIconMode ? (
+          // Icon mode (children is React node): render children directly, no text editing
           children
-        ) : editor ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        ) : editor ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
           createPortal6(
-            /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsxs11(
               BubbleMenu,
               {
                 editor,
@@ -6353,28 +7742,28 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx19(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx16("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx19("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx19(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx16("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx19("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx16("span", { className: "ya-bubble-divider" }),
-                  /* @__PURE__ */ jsxs9(
+                  /* @__PURE__ */ jsx19("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsxs11(
                     "select",
                     {
                       value: getCurrentFontSize(),
@@ -6382,12 +7771,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx16("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx16("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx19("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx19("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs9(
+                  /* @__PURE__ */ jsxs11(
                     "select",
                     {
                       value: getCurrentFontWeight(),
@@ -6395,8 +7784,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx16("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx16("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx19("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx19("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -6405,10 +7794,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
             ),
             document.body
           ),
-          editingMode === "text" ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-            /* @__PURE__ */ jsx16(EditorContent2, { editor }),
+          editingMode === "text" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+            /* @__PURE__ */ jsx19(EditorContent2, { editor }),
             actionButtonsPos && createPortal6(
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs11(
                 "div",
                 {
                   className: "ya-link-actions",
@@ -6418,19 +7807,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     right: actionButtonsPos.right
                   },
                   children: [
-                    /* @__PURE__ */ jsx16("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-                    /* @__PURE__ */ jsx16("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+                    /* @__PURE__ */ jsx19("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+                    /* @__PURE__ */ jsx19("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
                   ]
                 }
               ),
               document.body
             )
-          ] }) : /* @__PURE__ */ jsx16(SafeHtml, { content: text2, mode })
-        ] }) : /* @__PURE__ */ jsx16(SafeHtml, { content: text2, mode })
+          ] }) : /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode })
+        ] }) : /* @__PURE__ */ jsx19(SafeHtml, { content: text2, mode })
       }
     ),
     editPopoverMounted && editPopoverPos && createPortal6(
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsx19(
         "div",
         {
           ref: editPopoverRef,
@@ -6443,15 +7832,31 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
           },
           onMouseEnter: safeTriangleHandlers.onMouseEnter,
           onMouseLeave: safeTriangleHandlers.onMouseLeave,
-          children: [
-            /* @__PURE__ */ jsx16("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-            /* @__PURE__ */ jsx16("button", { type: "button", onClick: startEditLink, children: "Edit link" })
-          ]
+          children: iconPosition === "only" ? (
+            // Icon-only mode: show "Edit icon" + "Edit link"
+            /* @__PURE__ */ jsxs11(Fragment5, { children: [
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditIcon, children: "Edit icon" }),
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+            ] })
+          ) : iconPosition ? (
+            // Icon + text mode: show all three options
+            /* @__PURE__ */ jsxs11(Fragment5, { children: [
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditIcon, children: "Edit icon" }),
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+            ] })
+          ) : (
+            // Text-only mode: show "Edit text" + "Edit link"
+            /* @__PURE__ */ jsxs11(Fragment5, { children: [
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+              /* @__PURE__ */ jsx19("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+            ] })
+          )
         }
       ),
       document.body
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx19(
       SafeTriangleBelow,
       {
         triggerRef,
@@ -6462,7 +7867,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       }
     ),
     editingMode === "link" && hrefPopoverPos && createPortal6(
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs11(
         "div",
         {
           ref: hrefPopoverRef,
@@ -6474,24 +7879,24 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
             transform: "translateX(-50%)"
           },
           children: [
-            /* @__PURE__ */ jsx16("div", { className: "ya-href-popover-header", children: "Link destination" }),
-            !isExternalUrl ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-              sections.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-                /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsx19("div", { className: "ya-href-popover-header", children: "Link destination" }),
+            !isExternalUrl ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+              sections.length > 0 && /* @__PURE__ */ jsxs11("div", { className: "ya-href-popover-section", children: [
+                /* @__PURE__ */ jsxs11(
                   "button",
                   {
                     type: "button",
                     className: "ya-href-popover-label ya-href-collapsible-header",
                     onClick: () => setSectionsExpanded(!sectionsExpanded),
                     children: [
-                      /* @__PURE__ */ jsx16("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                      /* @__PURE__ */ jsx19("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                       "Scroll to section (",
                       sections.length,
                       ")"
                     ]
                   }
                 ),
-                sectionsExpanded && /* @__PURE__ */ jsx16("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs9(
+                sectionsExpanded && /* @__PURE__ */ jsx19("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs11(
                   "button",
                   {
                     type: "button",
@@ -6499,15 +7904,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     onClick: () => handlePageSelect(section.path),
                     children: [
                       section.label,
-                      /* @__PURE__ */ jsx16("span", { className: "ya-href-page-path", children: section.path })
+                      /* @__PURE__ */ jsx19("span", { className: "ya-href-page-path", children: section.path })
                     ]
                   },
                   section.path
                 )) })
               ] }),
-              pages.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-                /* @__PURE__ */ jsx16("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-                /* @__PURE__ */ jsx16("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs9(
+              pages.length > 0 && /* @__PURE__ */ jsxs11("div", { className: "ya-href-popover-section", children: [
+                /* @__PURE__ */ jsx19("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+                /* @__PURE__ */ jsx19("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs11(
                   "button",
                   {
                     type: "button",
@@ -6515,13 +7920,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     onClick: () => handlePageSelect(page.path),
                     children: [
                       page.label,
-                      /* @__PURE__ */ jsx16("span", { className: "ya-href-page-path", children: page.path })
+                      /* @__PURE__ */ jsx19("span", { className: "ya-href-page-path", children: page.path })
                     ]
                   },
                   page.path
                 )) })
               ] }),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx19(
                 "button",
                 {
                   type: "button",
@@ -6533,10 +7938,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                   children: "Use external URL instead"
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
-              /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-                /* @__PURE__ */ jsx16("label", { className: "ya-href-popover-label", children: "External URL" }),
-                /* @__PURE__ */ jsx16(
+            ] }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
+              /* @__PURE__ */ jsxs11("div", { className: "ya-href-popover-section", children: [
+                /* @__PURE__ */ jsx19("label", { className: "ya-href-popover-label", children: "External URL" }),
+                /* @__PURE__ */ jsx19(
                   "input",
                   {
                     type: "url",
@@ -6548,49 +7953,313 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+              /* @__PURE__ */ jsx19("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
             ] }),
-            /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-actions", children: [
-              /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-              isExternalUrl ? /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+            /* @__PURE__ */ jsxs11("div", { className: "ya-href-popover-actions", children: [
+              /* @__PURE__ */ jsx19("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+              isExternalUrl ? /* @__PURE__ */ jsx19("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx19("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
             ] })
           ]
         }
       ),
       document.body
+    ),
+    editingMode === "icon" && iconPopoverPos && createPortal6(
+      /* @__PURE__ */ jsx19(
+        "div",
+        {
+          ref: iconPopoverRef,
+          className: `ya-href-popover ${iconPopoverPos.isAbove ? "ya-href-popover--above" : ""}`,
+          style: {
+            top: iconPopoverPos.isAbove ? "auto" : iconPopoverPos.top,
+            bottom: iconPopoverPos.isAbove ? window.innerHeight - iconPopoverPos.top : "auto",
+            left: iconPopoverPos.left,
+            transform: "translateX(-50%)"
+          },
+          children: /* @__PURE__ */ jsx19(
+            IconPicker,
+            {
+              value: currentIcon,
+              onChange: handleIconSelect,
+              onClose: handleCancelIcon
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/YaIcon.tsx
+import React9, { useLayoutEffect as useLayoutEffect4, useRef as useRef20, useState as useState20, useCallback as useCallback21, useId as useId2, useEffect as useEffect20 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
+
+// src/components/ya-icon.css
+styleInject('.ya-icon-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.ya-icon-editable {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.ya-icon-editable::after {\n  content: "";\n  position: absolute;\n  inset: -4px;\n  border: 1.5px dotted var(--ya-contrast-color, white);\n  border-radius: 4px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.15s ease;\n}\n.ya-icon-editable:hover::after {\n  opacity: 1;\n}\nbody.builder-selector-active .ya-icon-editable:hover::after {\n  opacity: 0;\n}\nbody.builder-selector-active .ya-icon-editable {\n  cursor: inherit;\n}\n.ya-icon-editing::after {\n  opacity: 1;\n  border-style: solid;\n}\n.ya-icon-placeholder {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(212, 165, 116, 0.15);\n  border: 1px dashed rgba(212, 165, 116, 0.5);\n  border-radius: 4px;\n  color: var(--color-primary, #D4A574);\n}\n@keyframes ya-icon-success {\n  0% {\n    opacity: 1;\n    border-color: white;\n  }\n  30% {\n    opacity: 1;\n    border-color: rgba(134, 239, 172, 0.8);\n  }\n  100% {\n    opacity: 0;\n    border-color: rgba(134, 239, 172, 0.8);\n  }\n}\n.ya-icon-success::after {\n  border-style: solid;\n  animation: ya-icon-success 0.5s ease forwards;\n}\n.ya-icon-edit-popover {\n  position: fixed;\n  z-index: 10000;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 100ms ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n.ya-icon-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-icon-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-icon-edit-popover button:hover {\n  background: #4a4a4a;\n}\n.ya-icon-picker-popover {\n  position: fixed;\n  z-index: 10000;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  animation: ya-icon-picker-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-icon-picker-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-icon-picker-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-icon-picker-popover--above {\n  animation: ya-icon-picker-fade-in-above 0.15s ease;\n}\n@keyframes ya-icon-picker-fade-in-above {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-icon-picker-popover--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n');
+
+// src/components/YaIcon.tsx
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function YaIcon({
+  fieldId,
+  fallback,
+  size = 24,
+  stroke = 2,
+  className,
+  wrapperClassName
+}) {
+  const iconFieldId = `${fieldId}.icon`;
+  const iconContent = useContent(iconFieldId);
+  const { mode } = iconContent;
+  const storeIcon = iconContent.get();
+  const currentIcon = storeIcon || fallback || null;
+  const [isEditing, setIsEditing] = useState20(false);
+  const [showSuccess, setShowSuccess] = useState20(false);
+  const containerRef = useRef20(null);
+  const iconPopoverRef = useRef20(null);
+  const [editPopoverPos, setEditPopoverPos] = useState20(null);
+  const [editPopoverVisible, setEditPopoverVisible] = useState20(false);
+  const [editPopoverMounted, setEditPopoverMounted] = useState20(false);
+  const [iconPickerPos, setIconPickerPos] = useState20(null);
+  const instanceId = useId2();
+  const {
+    popoverRef: editPopoverRef,
+    isVisible: showEditPopover,
+    handlers: safeTriangleHandlers,
+    triangleProps,
+    hide: hideEditPopover
+  } = useSafeTriangle({
+    enabled: mode === "inline-edit" && !isEditing,
+    hideDelay: 150
+  });
+  const triggerRef = containerRef;
+  useEffect20(() => {
+    if (mode !== "inline-edit" || !containerRef.current) return;
+    return setupContrastDetection(containerRef.current);
+  }, [mode]);
+  React9.useEffect(() => {
+    if (showEditPopover && mode === "inline-edit" && !isEditing) {
+      window.dispatchEvent(new CustomEvent("yaicon:popover-open", { detail: { id: instanceId } }));
+    }
+  }, [showEditPopover, mode, isEditing, instanceId]);
+  React9.useEffect(() => {
+    const handleOtherPopoverOpen = (event) => {
+      const customEvent = event;
+      if (customEvent.detail.id !== instanceId && showEditPopover) {
+        hideEditPopover();
+      }
+    };
+    window.addEventListener("yaicon:popover-open", handleOtherPopoverOpen);
+    window.addEventListener("yalink:popover-open", handleOtherPopoverOpen);
+    return () => {
+      window.removeEventListener("yaicon:popover-open", handleOtherPopoverOpen);
+      window.removeEventListener("yalink:popover-open", handleOtherPopoverOpen);
+    };
+  }, [instanceId, showEditPopover, hideEditPopover]);
+  React9.useEffect(() => {
+    const shouldShow = showEditPopover && !isEditing && mode === "inline-edit";
+    if (shouldShow) {
+      setEditPopoverMounted(true);
+      requestAnimationFrame(() => {
+        setEditPopoverVisible(true);
+      });
+    } else {
+      setEditPopoverVisible(false);
+      const timer = setTimeout(() => {
+        setEditPopoverMounted(false);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [showEditPopover, isEditing, mode]);
+  useLayoutEffect4(() => {
+    if (!editPopoverMounted || !containerRef.current) {
+      setEditPopoverPos(null);
+      return;
+    }
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setEditPopoverPos({
+        top: rect.bottom + 8,
+        left: rect.left + rect.width / 2
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [editPopoverMounted]);
+  useLayoutEffect4(() => {
+    if (!isEditing || !containerRef.current) {
+      setIconPickerPos(null);
+      return;
+    }
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const popoverHeight = 400;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const isAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;
+      setIconPickerPos({
+        top: isAbove ? rect.top - 8 : rect.bottom + 8,
+        left: rect.left + rect.width / 2,
+        isAbove
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isEditing]);
+  React9.useEffect(() => {
+    if (!isEditing) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (iconPopoverRef.current?.contains(target)) return;
+      if (containerRef.current?.contains(target)) return;
+      setIsEditing(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isEditing]);
+  const startEdit = useCallback21(() => {
+    hideEditPopover();
+    setIsEditing(true);
+  }, [hideEditPopover]);
+  const handleIconSelect = useCallback21((iconName) => {
+    iconContent.set(iconName || "", "user");
+    iconContent.save();
+    setIsEditing(false);
+    setShowSuccess(true);
+    setTimeout(() => setShowSuccess(false), 500);
+  }, [iconContent]);
+  const handleCancel = useCallback21(() => {
+    setIsEditing(false);
+  }, []);
+  if (mode === "read-only") {
+    if (!currentIcon) return null;
+    return /* @__PURE__ */ jsx20(
+      DynamicIcon,
+      {
+        name: currentIcon,
+        size,
+        stroke,
+        className,
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs12("span", { className: `ya-icon-wrapper ${wrapperClassName || ""}`, children: [
+    /* @__PURE__ */ jsx20(
+      "span",
+      {
+        ref: containerRef,
+        className: `ya-icon-editable ${isEditing ? "ya-icon-editing" : ""} ${showSuccess ? "ya-icon-success" : ""}`,
+        "data-ya-restricted": "true",
+        "data-ya-icon": "true",
+        "data-field-id": fieldId,
+        onMouseEnter: safeTriangleHandlers.onMouseEnter,
+        onMouseLeave: safeTriangleHandlers.onMouseLeave,
+        onFocus: safeTriangleHandlers.onFocus,
+        children: currentIcon ? /* @__PURE__ */ jsx20(DynamicIcon, { name: currentIcon, size, stroke, className }) : (
+          // Placeholder when no icon set
+          /* @__PURE__ */ jsx20("span", { className: `ya-icon-placeholder ${className || ""}`, style: { width: size, height: size }, children: /* @__PURE__ */ jsx20(DynamicIcon, { name: "IconPlus", size: size * 0.6, stroke }) })
+        )
+      }
+    ),
+    editPopoverMounted && editPopoverPos && createPortal7(
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          ref: editPopoverRef,
+          className: "ya-icon-edit-popover",
+          style: {
+            top: editPopoverPos.top,
+            left: editPopoverPos.left,
+            transform: "translateX(-50%)",
+            opacity: editPopoverVisible ? 1 : 0
+          },
+          onMouseEnter: safeTriangleHandlers.onMouseEnter,
+          onMouseLeave: safeTriangleHandlers.onMouseLeave,
+          children: /* @__PURE__ */ jsx20("button", { type: "button", onClick: startEdit, children: "Edit icon" })
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ jsx20(
+      SafeTriangleBelow,
+      {
+        triggerRef,
+        popoverRef: editPopoverRef,
+        isVisible: showEditPopover && !isEditing && mode === "inline-edit",
+        onLeave: triangleProps.onLeave,
+        onStayInside: triangleProps.onStayInside
+      }
+    ),
+    isEditing && iconPickerPos && createPortal7(
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          ref: iconPopoverRef,
+          className: `ya-icon-picker-popover ${iconPickerPos.isAbove ? "ya-icon-picker-popover--above" : ""}`,
+          style: {
+            top: iconPickerPos.isAbove ? "auto" : iconPickerPos.top,
+            bottom: iconPickerPos.isAbove ? window.innerHeight - iconPickerPos.top : "auto",
+            left: iconPickerPos.left,
+            transform: "translateX(-50%)"
+          },
+          children: /* @__PURE__ */ jsx20(
+            IconPicker,
+            {
+              value: currentIcon,
+              onChange: handleIconSelect,
+              onClose: handleCancel
+            }
+          )
+        }
+      ),
+      document.body
     )
   ] });
 }
 
 // src/components/YaContainer.tsx
-import { useCallback as useCallback20, useEffect as useEffect18, useRef as useRef19, useState as useState18 } from "react";
-import { createPortal as createPortal8 } from "react-dom";
+import { useCallback as useCallback23, useEffect as useEffect22, useRef as useRef22, useState as useState22 } from "react";
+import { createPortal as createPortal9 } from "react-dom";
 
 // src/components/Tooltip.tsx
-import { useState as useState17, useRef as useRef18, useEffect as useEffect17, useLayoutEffect as useLayoutEffect4, useCallback as useCallback19 } from "react";
-import { createPortal as createPortal7 } from "react-dom";
+import { useState as useState21, useRef as useRef21, useEffect as useEffect21, useLayoutEffect as useLayoutEffect5, useCallback as useCallback22 } from "react";
+import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/tooltip.css
 styleInject('.ya-tooltip-trigger {\n  display: inline-flex;\n}\n.ya-tooltip-v2 {\n  position: fixed;\n  z-index: 10000;\n  padding: 8px 12px;\n  background: #1a1a1a;\n  color: white;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  animation: ya-tooltip-v2-fade-in 0.15s ease-out;\n}\n@keyframes ya-tooltip-v2-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-tooltip-v2-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.ya-tooltip-v2-bottom .ya-tooltip-v2-arrow {\n  top: -6px;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-top .ya-tooltip-v2-arrow {\n  bottom: -6px;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-left .ya-tooltip-v2-arrow {\n  right: -6px;\n  left: auto;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-left: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-right .ya-tooltip-v2-arrow {\n  left: -6px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-right: 6px solid #1a1a1a;\n}\n');
 
 // src/components/Tooltip.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function Tooltip({
   content,
   children,
   position = "bottom",
   delay = 0
 }) {
-  const [isVisible, setIsVisible] = useState17(false);
-  const [tooltipPosition, setTooltipPosition] = useState17(null);
-  const [isMounted, setIsMounted] = useState17(false);
-  const triggerRef = useRef18(null);
-  const tooltipRef = useRef18(null);
-  const timeoutRef = useRef18(null);
-  useEffect17(() => {
+  const [isVisible, setIsVisible] = useState21(false);
+  const [tooltipPosition, setTooltipPosition] = useState21(null);
+  const [isMounted, setIsMounted] = useState21(false);
+  const triggerRef = useRef21(null);
+  const tooltipRef = useRef21(null);
+  const timeoutRef = useRef21(null);
+  useEffect21(() => {
     setIsMounted(true);
   }, []);
-  const calculatePosition = useCallback19(() => {
+  const calculatePosition = useCallback22(() => {
     if (!triggerRef.current) return null;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
@@ -6675,7 +8344,7 @@ function Tooltip({
     setIsVisible(false);
     setTooltipPosition(null);
   };
-  useEffect17(() => {
+  useEffect21(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -6683,7 +8352,7 @@ function Tooltip({
     };
   }, []);
   const edgePadding = 12;
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!isVisible || !tooltipRef.current || !tooltipPosition || tooltipPosition.adjusted) {
       return;
     }
@@ -6734,8 +8403,8 @@ function Tooltip({
       }
     }
   }, [isVisible, tooltipPosition]);
-  const tooltipContent = isMounted && isVisible && tooltipPosition ? createPortal7(
-    /* @__PURE__ */ jsxs10(
+  const tooltipContent = isMounted && isVisible && tooltipPosition ? createPortal8(
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: tooltipRef,
@@ -6748,7 +8417,7 @@ function Tooltip({
         role: "tooltip",
         children: [
           content,
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx21(
             "div",
             {
               className: "ya-tooltip-v2-arrow",
@@ -6760,8 +8429,8 @@ function Tooltip({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx21(
       "div",
       {
         ref: triggerRef,
@@ -6779,7 +8448,7 @@ function Tooltip({
 styleInject('.ya-container {\n  position: relative;\n}\n.ya-container-has-overlay::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: var(--ya-overlay-color, transparent);\n  opacity: var(--ya-overlay-opacity, 0);\n  pointer-events: none;\n  z-index: 0;\n}\n.ya-container > *:not(.ya-container-toolbar) {\n  position: relative;\n  z-index: 1;\n}\n.ya-container-editable {\n  transition: outline 0.15s ease;\n  pointer-events: none;\n}\n.ya-container-editable > * {\n  pointer-events: auto;\n}\n.ya-container-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: -2px;\n}\nbody.builder-selector-active .ya-container-editable:hover {\n  outline: none;\n}\n.ya-container-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar {\n  display: flex;\n  gap: 4px;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 6px 8px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: ya-container-toolbar-fade-in 0.15s ease;\n}\n@keyframes ya-container-toolbar-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ya-container-toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: #3a3a3a;\n  border: none;\n  border-radius: 6px;\n  color: #ffffff;\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.1s ease;\n}\n.ya-container-toolbar button:hover {\n  background: #4a4a4a;\n  transform: scale(1.05);\n}\n.ya-container-toolbar button:active {\n  transform: scale(0.98);\n}\n.ya-container-toolbar button.active {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n}\n.ya-container-toolbar button svg {\n  width: 18px;\n  height: 18px;\n}\n.ya-container-toolbar button[aria-label="Clear background"] {\n  background: #3a2a2a;\n}\n.ya-container-toolbar button[aria-label="Clear background"]:hover {\n  background: #5a3a3a;\n}\n.ya-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar button:focus-visible {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 2px;\n}\n.ya-container-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -2px;\n  pointer-events: auto !important;\n}\n.ya-container-drop-target .ya-container-toolbar {\n  display: none !important;\n}\n.ya-container-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -3px;\n}\n.ya-container-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: rgba(59, 130, 246, 0.08);\n  pointer-events: none;\n  z-index: 10;\n  animation: ya-container-drop-pulse 1s ease-in-out infinite;\n}\n@keyframes ya-container-drop-pulse {\n  0%, 100% {\n    background: rgba(59, 130, 246, 0.05);\n  }\n  50% {\n    background: rgba(59, 130, 246, 0.12);\n  }\n}\n.ya-container-tooltip {\n  background: #1a1a1a;\n  color: white;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  z-index: 10000;\n  pointer-events: none;\n  animation: ya-container-tooltip-fade-in 0.1s ease;\n}\n@keyframes ya-container-tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n');
 
 // src/components/YaContainer.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function parseBackgroundConfig(value) {
   if (!value) {
     return { type: "none" };
@@ -6821,8 +8490,8 @@ function deriveContainerLabel(element) {
   return tagLabels[tagName] || "Section";
 }
 function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick: _onAIClick, onClearClick, hasBackground }) {
-  const [position, setPosition] = useState18(null);
-  useEffect18(() => {
+  const [position, setPosition] = useState22(null);
+  useEffect22(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -6841,8 +8510,8 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick: _onAICli
     };
   }, [containerRef]);
   if (!position) return null;
-  return createPortal8(
-    /* @__PURE__ */ jsxs11(
+  return createPortal9(
+    /* @__PURE__ */ jsxs14(
       "div",
       {
         className: "ya-container-toolbar",
@@ -6853,40 +8522,40 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick: _onAICli
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx18(Tooltip, { content: "Background Image", position: "bottom", children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx22(Tooltip, { content: "Background Image", position: "bottom", children: /* @__PURE__ */ jsx22(
             "button",
             {
               type: "button",
               onClick: onImageClick,
               "aria-label": "Edit background image",
-              children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx18("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx18("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-                /* @__PURE__ */ jsx18("polyline", { points: "21 15 16 10 5 21" })
+              children: /* @__PURE__ */ jsxs14("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx22("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx22("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx22("polyline", { points: "21 15 16 10 5 21" })
               ] })
             }
           ) }),
-          /* @__PURE__ */ jsx18(Tooltip, { content: "Background Color", position: "bottom", children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx22(Tooltip, { content: "Background Color", position: "bottom", children: /* @__PURE__ */ jsx22(
             "button",
             {
               type: "button",
               onClick: onColorClick,
               "aria-label": "Edit background color",
-              children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx18("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
+              children: /* @__PURE__ */ jsxs14("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx22("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
               ] })
             }
           ) }),
-          hasBackground && /* @__PURE__ */ jsx18(Tooltip, { content: "Remove Background", position: "bottom", children: /* @__PURE__ */ jsx18(
+          hasBackground && /* @__PURE__ */ jsx22(Tooltip, { content: "Remove Background", position: "bottom", children: /* @__PURE__ */ jsx22(
             "button",
             {
               type: "button",
               onClick: onClearClick,
               "aria-label": "Clear background",
-              children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx18("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+              children: /* @__PURE__ */ jsxs14("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx22("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
               ] })
             }
           ) })
@@ -6905,13 +8574,13 @@ function YaContainer({
   defaultBackground
 }) {
   const { getValue, setValue, saveToWorker, mode } = useContentStore();
-  const containerRef = useRef19(null);
-  const [isHovered, setIsHovered] = useState18(false);
-  const [isSelected, setIsSelected] = useState18(false);
-  const [isDropMode, setIsDropMode] = useState18(false);
-  const [isDropHover, setIsDropHover] = useState18(false);
-  const [previewConfig, setPreviewConfig] = useState18(null);
-  useEffect18(() => {
+  const containerRef = useRef22(null);
+  const [isHovered, setIsHovered] = useState22(false);
+  const [isSelected, setIsSelected] = useState22(false);
+  const [isDropMode, setIsDropMode] = useState22(false);
+  const [isDropHover, setIsDropHover] = useState22(false);
+  const [previewConfig, setPreviewConfig] = useState22(null);
+  useEffect22(() => {
     if (mode !== "inline-edit") return;
     const containerEl = containerRef.current;
     if (!containerEl) return;
@@ -6954,7 +8623,7 @@ function YaContainer({
     overlayCustomProps["--ya-overlay-color"] = displayConfig.overlay.color;
     overlayCustomProps["--ya-overlay-opacity"] = displayConfig.overlay.opacity;
   }
-  const handleImageClick = useCallback20(() => {
+  const handleImageClick = useCallback23(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -6974,7 +8643,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleColorClick = useCallback20(() => {
+  const handleColorClick = useCallback23(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -6994,7 +8663,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleAIClick = useCallback20(() => {
+  const handleAIClick = useCallback23(() => {
     if (mode !== "inline-edit") return;
     const label = deriveContainerLabel(containerRef.current);
     window.parent.postMessage(
@@ -7007,14 +8676,14 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleClearClick = useCallback20(() => {
+  const handleClearClick = useCallback23(() => {
     if (mode !== "inline-edit") return;
     const clearedConfig = { type: "none" };
     const serialized = serializeBackgroundConfig(clearedConfig);
     setValue(fieldId, serialized);
     saveToWorker?.(fieldId, serialized);
   }, [mode, fieldId, setValue, saveToWorker]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_CONTAINER_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
@@ -7035,7 +8704,7 @@ function YaContainer({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -7049,7 +8718,7 @@ function YaContainer({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback20(
+  const handleDragEnter = useCallback23(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -7073,7 +8742,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback20(
+  const handleDragOver = useCallback23(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -7081,7 +8750,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback20(
+  const handleDragLeave = useCallback23(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -7095,7 +8764,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback20(
+  const handleDrop = useCallback23(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -7113,7 +8782,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  useEffect18(() => {
+  useEffect22(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -7148,7 +8817,7 @@ function YaContainer({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx22(
       Tag,
       {
         className: `ya-container ${className || ""}`,
@@ -7172,7 +8841,7 @@ function YaContainer({
     isDropHover ? "ya-container-drop-hover" : "",
     className || ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs14(
     Tag,
     {
       ref: containerRef,
@@ -7191,7 +8860,7 @@ function YaContainer({
       onDrop: handleDrop,
       children: [
         children,
-        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx18(
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx22(
           Toolbar,
           {
             containerRef,
@@ -7208,10 +8877,10 @@ function YaContainer({
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx23(
     Component,
     {
       className,
@@ -7222,7 +8891,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -7258,7 +8927,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx24(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -7275,8 +8944,8 @@ function MpImage({
 }
 
 // src/components/MarkdownText.tsx
-import { Fragment as Fragment6 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { Fragment as Fragment7 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function tokenize(text2) {
   const tokens = [];
   let remaining = text2;
@@ -7338,13 +9007,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx21(Fragment6, { children: token.content }, index);
+        return /* @__PURE__ */ jsx25(Fragment7, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx21("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx25("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx21("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx25("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsx25(
           "a",
           {
             href: token.url,
@@ -7356,7 +9025,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx21("br", {}, index);
+        return /* @__PURE__ */ jsx25("br", {}, index);
       default:
         return null;
     }
@@ -7368,14 +9037,14 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx21("span", { className, children: elements });
+  return /* @__PURE__ */ jsx25("span", { className, children: elements });
 }
 
 // src/components/CollectionPage.tsx
 import { useParams } from "wouter";
 
 // src/hooks/useCollection.ts
-import { useState as useState19, useEffect as useEffect19, useCallback as useCallback21, useRef as useRef20 } from "react";
+import { useState as useState23, useEffect as useEffect23, useCallback as useCallback24, useRef as useRef23 } from "react";
 
 // src/lib/collection-client.ts
 function getEnvVar(key) {
@@ -7541,13 +9210,13 @@ function useCollectionList(options) {
     orderDir,
     enabled = true
   } = options;
-  const [data, setData] = useState19(null);
-  const [isLoading, setIsLoading] = useState19(true);
-  const [error, setError] = useState19(null);
-  const [totalCount, setTotalCount] = useState19(0);
-  const [currentPage, setCurrentPage] = useState19(page);
-  const fetchVersion = useRef20(0);
-  const fetchData = useCallback21(async (pageNum) => {
+  const [data, setData] = useState23(null);
+  const [isLoading, setIsLoading] = useState23(true);
+  const [error, setError] = useState23(null);
+  const [totalCount, setTotalCount] = useState23(0);
+  const [currentPage, setCurrentPage] = useState23(page);
+  const fetchVersion = useRef23(0);
+  const fetchData = useCallback24(async (pageNum) => {
     if (!enabled) {
       setIsLoading(false);
       return;
@@ -7585,15 +9254,15 @@ function useCollectionList(options) {
       }
     }
   }, [collection, JSON.stringify(filters), pageSize, orderBy, orderDir, enabled]);
-  useEffect19(() => {
+  useEffect23(() => {
     fetchData(page);
   }, [fetchData, page]);
   const totalPages = Math.ceil(totalCount / pageSize);
   const hasMore = currentPage < totalPages;
-  const refetch = useCallback21(() => {
+  const refetch = useCallback24(() => {
     fetchData(currentPage);
   }, [fetchData, currentPage]);
-  const goToPage = useCallback21((newPage) => {
+  const goToPage = useCallback24((newPage) => {
     if (newPage >= 1 && newPage <= Math.max(1, totalPages)) {
       fetchData(newPage);
     }
@@ -7617,12 +9286,12 @@ function useCollectionRecord(options) {
     slugValue,
     enabled = true
   } = options;
-  const [data, setData] = useState19(null);
-  const [isLoading, setIsLoading] = useState19(true);
-  const [error, setError] = useState19(null);
-  const [notFound, setNotFound] = useState19(false);
-  const fetchVersion = useRef20(0);
-  const fetchData = useCallback21(async () => {
+  const [data, setData] = useState23(null);
+  const [isLoading, setIsLoading] = useState23(true);
+  const [error, setError] = useState23(null);
+  const [notFound, setNotFound] = useState23(false);
+  const fetchVersion = useRef23(0);
+  const fetchData = useCallback24(async () => {
     if (!enabled || !slugValue) {
       setIsLoading(false);
       return;
@@ -7660,10 +9329,10 @@ function useCollectionRecord(options) {
       }
     }
   }, [collection, slugField, slugValue, enabled]);
-  useEffect19(() => {
+  useEffect23(() => {
     fetchData();
   }, [fetchData]);
-  const refetch = useCallback21(() => {
+  const refetch = useCallback24(() => {
     fetchData();
   }, [fetchData]);
   return {
@@ -7720,7 +9389,7 @@ function CollectionDetailPage({
 }
 
 // src/components/CollectionList.tsx
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function CollectionList({
   collection,
   prefix,
@@ -7753,7 +9422,7 @@ function CollectionList({
       { length: skeletonCount },
       (_, index) => skeleton({ index })
     );
-    return Wrapper ? /* @__PURE__ */ jsx22(Wrapper, { children: skeletonItems }) : /* @__PURE__ */ jsx22(Fragment7, { children: skeletonItems });
+    return Wrapper ? /* @__PURE__ */ jsx26(Wrapper, { children: skeletonItems }) : /* @__PURE__ */ jsx26(Fragment8, { children: skeletonItems });
   }
   if (result.error) {
     return error?.(result.error) ?? null;
@@ -7763,7 +9432,7 @@ function CollectionList({
   }
   const items = result.data.map((record, index) => {
     const fieldPrefix = `${prefix}.${record.id}`;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       CollectionContentProvider,
       {
         record: record.data,
@@ -7776,9 +9445,9 @@ function CollectionList({
       record.id
     );
   });
-  const content = Wrapper ? /* @__PURE__ */ jsx22(Wrapper, { children: items }) : /* @__PURE__ */ jsx22(Fragment7, { children: items });
+  const content = Wrapper ? /* @__PURE__ */ jsx26(Wrapper, { children: items }) : /* @__PURE__ */ jsx26(Fragment8, { children: items });
   if (pagination) {
-    return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+    return /* @__PURE__ */ jsxs15(Fragment8, { children: [
       content,
       pagination({
         currentPage: result.currentPage,
@@ -7793,7 +9462,7 @@ function CollectionList({
 }
 
 // src/components/CollectionItem.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function CollectionItem({
   collection,
   prefix,
@@ -7823,7 +9492,7 @@ function CollectionItem({
   if (result.error || result.notFound || !result.data) {
     return children(renderProps);
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx27(
     CollectionContentProvider,
     {
       record: result.data.data,
@@ -7838,10 +9507,10 @@ function CollectionItem({
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx24(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx28(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -7860,7 +9529,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -7875,11 +9544,11 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx25(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx29(WouterRouter, { base: basename, children });
 }
 
 // src/router/ScrollRestoration.tsx
-import { useEffect as useEffect20, useRef as useRef21 } from "react";
+import { useEffect as useEffect24, useRef as useRef24 } from "react";
 import { useLocation as useLocation3 } from "wouter";
 var SCROLL_POSITIONS_KEY = "yoamigo-scroll-positions";
 var HISTORY_INDEX_KEY = "yoamigo-history-index";
@@ -7915,10 +9584,10 @@ function setHistoryIndex(index) {
 var globalHistoryIndex = 0;
 function ScrollRestoration() {
   const [location] = useLocation3();
-  const previousLocation = useRef21(location);
-  const isPopState = useRef21(false);
-  const scrollPositionsRef = useRef21({});
-  useEffect20(() => {
+  const previousLocation = useRef24(location);
+  const isPopState = useRef24(false);
+  const scrollPositionsRef = useRef24({});
+  useEffect24(() => {
     if (typeof history !== "undefined" && "scrollRestoration" in history) {
       history.scrollRestoration = "manual";
     }
@@ -7936,7 +9605,7 @@ function ScrollRestoration() {
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
   }, []);
-  useEffect20(() => {
+  useEffect24(() => {
     if (previousLocation.current === location) return;
     const prevHistoryIndex = globalHistoryIndex;
     const currentScrollY = window.scrollY;
@@ -7956,7 +9625,7 @@ function ScrollRestoration() {
     }
     previousLocation.current = location;
   }, [location]);
-  useEffect20(() => {
+  useEffect24(() => {
     let timeoutId;
     const handleScroll = () => {
       clearTimeout(timeoutId);
@@ -8060,12 +9729,15 @@ function video(config) {
 function embed(config) {
   return JSON.stringify(config);
 }
+function link(href) {
+  return href;
+}
 
 // src/contexts/CartContext.tsx
-import { createContext as createContext5, useContext as useContext5, useEffect as useEffect22 } from "react";
+import { createContext as createContext5, useContext as useContext5, useEffect as useEffect26 } from "react";
 
 // src/hooks/useCart.ts
-import { useState as useState20, useEffect as useEffect21, useCallback as useCallback22, useRef as useRef22 } from "react";
+import { useState as useState24, useEffect as useEffect25, useCallback as useCallback25, useRef as useRef25 } from "react";
 
 // src/lib/cart-storage.ts
 var CART_STORAGE_KEY_PREFIX = "yoamigo_cart_";
@@ -8201,11 +9873,11 @@ function getConfig2(options) {
 }
 function useCart(options = {}) {
   const { userToken } = options;
-  const [items, setItems] = useState20([]);
-  const [isLoading, setIsLoading] = useState20(true);
-  const [error, setError] = useState20(null);
-  const fetchVersion = useRef22(0);
-  const configRef = useRef22(null);
+  const [items, setItems] = useState24([]);
+  const [isLoading, setIsLoading] = useState24(true);
+  const [error, setError] = useState24(null);
+  const fetchVersion = useRef25(0);
+  const configRef = useRef25(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig2(options);
@@ -8214,7 +9886,7 @@ function useCart(options = {}) {
   }
   const isAuthenticated = !!userToken;
   const sessionId = typeof window !== "undefined" ? getSessionId() : null;
-  const apiCall = useCallback22(async (endpoint, method = "GET", body) => {
+  const apiCall = useCallback25(async (endpoint, method = "GET", body) => {
     const config = configRef.current;
     if (!config) throw new Error("Cart not configured");
     const headers = {
@@ -8235,7 +9907,7 @@ function useCart(options = {}) {
     );
     return response.json();
   }, [userToken, isAuthenticated, sessionId]);
-  const fetchCart = useCallback22(async () => {
+  const fetchCart = useCallback25(async () => {
     const config = configRef.current;
     if (!config) {
       setIsLoading(false);
@@ -8274,10 +9946,10 @@ function useCart(options = {}) {
       }
     }
   }, [apiCall, isAuthenticated, sessionId]);
-  useEffect21(() => {
+  useEffect25(() => {
     fetchCart();
   }, [fetchCart]);
-  const addItem = useCallback22(async (productId, collectionSlug, quantity = 1, variantId, data) => {
+  const addItem = useCallback25(async (productId, collectionSlug, quantity = 1, variantId, data) => {
     const config = configRef.current;
     if (!config) throw new Error("Cart not configured");
     setError(null);
@@ -8305,7 +9977,7 @@ function useCart(options = {}) {
       throw err;
     }
   }, [apiCall, isAuthenticated, sessionId]);
-  const updateQuantity = useCallback22(async (itemId, quantity) => {
+  const updateQuantity = useCallback25(async (itemId, quantity) => {
     const config = configRef.current;
     if (!config) throw new Error("Cart not configured");
     setError(null);
@@ -8327,7 +9999,7 @@ function useCart(options = {}) {
       throw err;
     }
   }, [apiCall, isAuthenticated, sessionId]);
-  const removeItem = useCallback22(async (itemId) => {
+  const removeItem = useCallback25(async (itemId) => {
     const config = configRef.current;
     if (!config) throw new Error("Cart not configured");
     setError(null);
@@ -8349,7 +10021,7 @@ function useCart(options = {}) {
       throw err;
     }
   }, [apiCall, isAuthenticated, sessionId]);
-  const clearCart = useCallback22(async () => {
+  const clearCart = useCallback25(async () => {
     const config = configRef.current;
     if (!config) throw new Error("Cart not configured");
     setError(null);
@@ -8371,7 +10043,7 @@ function useCart(options = {}) {
       throw err;
     }
   }, [apiCall, isAuthenticated, sessionId]);
-  const mergeGuestCart = useCallback22(async () => {
+  const mergeGuestCart = useCallback25(async () => {
     if (!isAuthenticated || !sessionId) return;
     setError(null);
     try {
@@ -8408,7 +10080,7 @@ function useCart(options = {}) {
 }
 
 // src/contexts/CartContext.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var CartContext = createContext5(null);
 function CartProvider({
   children,
@@ -8417,13 +10089,13 @@ function CartProvider({
   ...options
 }) {
   const cart = useCart({ ...options, userToken });
-  useEffect22(() => {
+  useEffect26(() => {
     if (userToken) {
       cart.mergeGuestCart();
     }
     onUserTokenChange?.(!!userToken);
   }, [userToken]);
-  return /* @__PURE__ */ jsx26(CartContext.Provider, { value: cart, children });
+  return /* @__PURE__ */ jsx30(CartContext.Provider, { value: cart, children });
 }
 function useCartContext() {
   const context = useContext5(CartContext);
@@ -8437,7 +10109,7 @@ function useOptionalCartContext() {
 }
 
 // src/hooks/useCheckout.ts
-import { useState as useState21, useCallback as useCallback23, useRef as useRef23 } from "react";
+import { useState as useState25, useCallback as useCallback26, useRef as useRef26 } from "react";
 function getConfig3(options) {
   if (typeof window === "undefined") {
     throw new Error("useCheckout requires browser environment");
@@ -8455,9 +10127,9 @@ function getConfig3(options) {
 }
 function useCheckout(options = {}) {
   const { userToken } = options;
-  const [isLoading, setIsLoading] = useState21(false);
-  const [error, setError] = useState21(null);
-  const configRef = useRef23(null);
+  const [isLoading, setIsLoading] = useState25(false);
+  const [error, setError] = useState25(null);
+  const configRef = useRef26(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig3(options);
@@ -8466,7 +10138,7 @@ function useCheckout(options = {}) {
   }
   const isAuthenticated = !!userToken;
   const sessionId = typeof window !== "undefined" ? getSessionId() : null;
-  const initiateCheckout = useCallback23(async (checkoutOptions) => {
+  const initiateCheckout = useCallback26(async (checkoutOptions) => {
     const config = configRef.current;
     if (!config) {
       throw new Error("Checkout not configured");
@@ -8511,10 +10183,10 @@ function useCheckout(options = {}) {
 }
 function useCheckoutStatus(options) {
   const { userToken, sessionId: checkoutSessionId, poll = false, pollInterval = 2e3 } = options;
-  const [status, setStatus] = useState21(null);
-  const [isLoading, setIsLoading] = useState21(true);
-  const [error, setError] = useState21(null);
-  const configRef = useRef23(null);
+  const [status, setStatus] = useState25(null);
+  const [isLoading, setIsLoading] = useState25(true);
+  const [error, setError] = useState25(null);
+  const configRef = useRef26(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig3(options);
@@ -8523,7 +10195,7 @@ function useCheckoutStatus(options) {
   }
   const isAuthenticated = !!userToken;
   const guestSessionId = typeof window !== "undefined" ? getSessionId() : null;
-  const fetchStatus = useCallback23(async () => {
+  const fetchStatus = useCallback26(async () => {
     const config = configRef.current;
     if (!config || !checkoutSessionId) {
       setIsLoading(false);
@@ -8555,7 +10227,7 @@ function useCheckoutStatus(options) {
       setIsLoading(false);
     }
   }, [checkoutSessionId, userToken, isAuthenticated, guestSessionId]);
-  useState21(() => {
+  useState25(() => {
     fetchStatus();
     if (poll) {
       const interval = setInterval(() => {
@@ -8647,7 +10319,7 @@ function useProduct(options) {
 }
 
 // src/hooks/useSubscription.ts
-import { useState as useState22, useCallback as useCallback24, useRef as useRef24 } from "react";
+import { useState as useState26, useCallback as useCallback27, useRef as useRef27 } from "react";
 function getConfig4(options) {
   if (typeof window === "undefined") {
     throw new Error("useSubscription requires browser environment");
@@ -8665,16 +10337,16 @@ function getConfig4(options) {
 }
 function useSubscription(options = {}) {
   const { userToken } = options;
-  const [isLoading, setIsLoading] = useState22(false);
-  const [error, setError] = useState22(null);
-  const configRef = useRef24(null);
+  const [isLoading, setIsLoading] = useState26(false);
+  const [error, setError] = useState26(null);
+  const configRef = useRef27(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig4(options);
     } catch {
     }
   }
-  const subscribe = useCallback24(async (params) => {
+  const subscribe = useCallback27(async (params) => {
     const config = configRef.current;
     if (!config) {
       return {
@@ -8740,7 +10412,7 @@ function useSubscription(options = {}) {
 }
 
 // src/hooks/useSubscriptionTiers.ts
-import { useState as useState23, useCallback as useCallback25, useEffect as useEffect23, useRef as useRef25 } from "react";
+import { useState as useState27, useCallback as useCallback28, useEffect as useEffect27, useRef as useRef28 } from "react";
 function getConfig5(options) {
   if (typeof window === "undefined") {
     throw new Error("useSubscriptionTiers requires browser environment");
@@ -8762,17 +10434,17 @@ function getConfig5(options) {
 }
 function useSubscriptionTiers(options = {}) {
   const { fetchOnMount = true } = options;
-  const [tiers, setTiers] = useState23([]);
-  const [isLoading, setIsLoading] = useState23(false);
-  const [error, setError] = useState23(null);
-  const configRef = useRef25(null);
+  const [tiers, setTiers] = useState27([]);
+  const [isLoading, setIsLoading] = useState27(false);
+  const [error, setError] = useState27(null);
+  const configRef = useRef28(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig5(options);
     } catch {
     }
   }
-  const refresh = useCallback25(async () => {
+  const refresh = useCallback28(async () => {
     const config = configRef.current;
     if (!config) {
       setError("Subscription tiers not configured");
@@ -8804,7 +10476,7 @@ function useSubscriptionTiers(options = {}) {
       setIsLoading(false);
     }
   }, []);
-  useEffect23(() => {
+  useEffect27(() => {
     if (fetchOnMount && configRef.current) {
       refresh();
     }
@@ -8818,7 +10490,7 @@ function useSubscriptionTiers(options = {}) {
 }
 
 // src/hooks/useCustomerPortal.ts
-import { useState as useState24, useCallback as useCallback26, useRef as useRef26 } from "react";
+import { useState as useState28, useCallback as useCallback29, useRef as useRef29 } from "react";
 function getConfig6(options) {
   if (typeof window === "undefined") {
     throw new Error("useCustomerPortal requires browser environment");
@@ -8836,16 +10508,16 @@ function getConfig6(options) {
 }
 function useCustomerPortal(options) {
   const { userToken } = options;
-  const [isLoading, setIsLoading] = useState24(false);
-  const [error, setError] = useState24(null);
-  const configRef = useRef26(null);
+  const [isLoading, setIsLoading] = useState28(false);
+  const [error, setError] = useState28(null);
+  const configRef = useRef29(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig6(options);
     } catch {
     }
   }
-  const openPortal = useCallback26(async (params) => {
+  const openPortal = useCallback29(async (params) => {
     const config = configRef.current;
     if (!config) {
       return {
@@ -8907,7 +10579,7 @@ function useCustomerPortal(options) {
 }
 
 // src/hooks/useSubscriptionStatus.ts
-import { useState as useState25, useCallback as useCallback27, useRef as useRef27, useEffect as useEffect24 } from "react";
+import { useState as useState29, useCallback as useCallback30, useRef as useRef30, useEffect as useEffect28 } from "react";
 function getConfig7(options) {
   if (typeof window === "undefined") {
     throw new Error("useSubscriptionStatus requires browser environment");
@@ -8925,18 +10597,18 @@ function getConfig7(options) {
 }
 function useSubscriptionStatus(options) {
   const { userToken, autoFetch = true, pollInterval = 0 } = options;
-  const [status, setStatus] = useState25(null);
-  const [subscriptions, setSubscriptions] = useState25([]);
-  const [isLoading, setIsLoading] = useState25(autoFetch);
-  const [error, setError] = useState25(null);
-  const configRef = useRef27(null);
+  const [status, setStatus] = useState29(null);
+  const [subscriptions, setSubscriptions] = useState29([]);
+  const [isLoading, setIsLoading] = useState29(autoFetch);
+  const [error, setError] = useState29(null);
+  const configRef = useRef30(null);
   if (!configRef.current && typeof window !== "undefined") {
     try {
       configRef.current = getConfig7(options);
     } catch {
     }
   }
-  const fetchStatus = useCallback27(async () => {
+  const fetchStatus = useCallback30(async () => {
     const config = configRef.current;
     if (!config) {
       setError("Subscription status not configured");
@@ -8975,12 +10647,12 @@ function useSubscriptionStatus(options) {
       setIsLoading(false);
     }
   }, [userToken]);
-  useEffect24(() => {
+  useEffect28(() => {
     if (autoFetch && userToken) {
       fetchStatus();
     }
   }, [autoFetch, userToken, fetchStatus]);
-  useEffect24(() => {
+  useEffect28(() => {
     if (pollInterval <= 0 || !userToken) {
       return;
     }
@@ -9008,6 +10680,10 @@ export {
   CollectionListPage,
   ContentStoreProvider,
   ContentStoreProvider2 as ContentStoreProviderProd,
+  DynamicIcon,
+  ICON_CATEGORIES,
+  ICON_METADATA,
+  IconPicker,
   Link2 as Link,
   MarkdownText,
   Route,
@@ -9021,8 +10697,10 @@ export {
   Tooltip,
   YaContainer,
   YaEmbed,
+  YaIcon,
   YaImage,
   YaLink,
+  YaProtectedMedia,
   YaText,
   YaVideo,
   background,
@@ -9040,6 +10718,11 @@ export {
   getAllContent,
   getCollectionClient,
   getContent,
+  getIcon,
+  getIconLabel,
+  getIconMeta,
+  getIconPickerLabel,
+  getIconsByCategory,
   getLocalCartItemCount,
   getLocalCartItems,
   getSessionId,
@@ -9048,13 +10731,20 @@ export {
   image,
   imageCrossfadeStrategy,
   initBuilderSelection,
+  isIconLoaded,
+  link,
   linkTransitionStrategy,
+  loadIcon,
   parseBackgroundConfig,
   parseEmbedUrl,
   parseFieldValue,
+  preloadIcons,
   registerContent,
+  registerIcon,
+  registerIcons,
   resetCollectionClient,
   resolveAssetUrl,
+  searchIcons,
   serializeBackgroundConfig,
   serializeEmbedValue,
   serializeImageValue,