@ohhwells/bridge 0.1.54-next.153 → 0.1.54-next.156

package/dist/index.cjs

@@ -192,6 +192,59 @@ function deleteSectionFromState(state, sectionId) {
   return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
 }
 
+// src/lib/brand-chrome.ts
+var BRAND_NAME_KEY = "__ohw_brand_name";
+var BRAND_TITLE_KEY = "__ohw_site_title";
+var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
+var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
+  BRAND_NAME_KEY,
+  BRAND_TITLE_KEY,
+  BRAND_FAVICON_LETTER_KEY
+]);
+function upsertMeta(selector, attr, token, value) {
+  let el = document.head.querySelector(selector);
+  if (!el) {
+    el = document.createElement("meta");
+    el.setAttribute(attr, token);
+    document.head.appendChild(el);
+  }
+  if (el.getAttribute("content") !== value) el.setAttribute("content", value);
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function applyLetterFavicon(letter) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#111827"/><text x="32" y="46" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="40" font-weight="700" text-anchor="middle" fill="#ffffff">${escapeXml(letter)}</text></svg>`;
+  const href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  let link = document.head.querySelector('link[rel="icon"]');
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "icon";
+    document.head.appendChild(link);
+  }
+  link.type = "image/svg+xml";
+  if (link.href !== href) link.href = href;
+}
+function applyBrandChrome(content) {
+  const name = content[BRAND_NAME_KEY];
+  if (typeof name === "string" && name.length > 0) {
+    document.querySelectorAll("[data-ohw-wordmark]").forEach((el) => {
+      if (el.textContent !== name) el.textContent = name;
+      if (el.getAttribute("title") !== name) el.setAttribute("title", name);
+    });
+  }
+  const title = content[BRAND_TITLE_KEY];
+  if (typeof title === "string" && title.length > 0) {
+    if (document.title !== title) document.title = title;
+    upsertMeta('meta[property="og:title"]', "property", "og:title", title);
+    upsertMeta('meta[name="twitter:title"]', "name", "twitter:title", title);
+  }
+  const letter = content[BRAND_FAVICON_LETTER_KEY];
+  if (typeof letter === "string" && letter.length > 0) {
+    applyLetterFavicon(letter);
+  }
+}
+
 // src/ui/ai-tree/aiSectionsManager.tsx
 var import_react_dom = require("react-dom");
 var import_client = require("react-dom/client");
@@ -5942,6 +5995,7 @@ function ToolbarActionTooltip({
 function ItemActionToolbar({
   onEditLink,
   onAddItem,
+  onStyle,
   onSelectParent,
   onDuplicate,
   onDelete,
@@ -5953,6 +6007,8 @@ function ItemActionToolbar({
   deleteDisabled = false,
   showEditLink = true,
   showAddItem = true,
+  showStyle = false,
+  styleActive = false,
   showMore = true,
   tooltipSide = "bottom",
   dropdownOpen = null,
@@ -6026,6 +6082,22 @@ function ItemActionToolbar({
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Link, { className: "size-4 shrink-0", "aria-hidden": true })
       }
     ) : null,
+    showStyle ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ToolbarActionTooltip,
+      {
+        label: "Style",
+        side: tooltipSide,
+        buttonProps: {
+          active: styleActive,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onStyle?.();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Brush, { className: "size-4 shrink-0", "aria-hidden": true })
+      }
+    ) : null,
     showAddItem ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ToolbarActionTooltip,
       {
@@ -9591,12 +9663,14 @@ function iconMarkupInheritingColour(markup) {
 
 // src/lib/socials-items.ts
 var ICON_SELECTOR = '[data-ohw-editable="icon"]';
+var SOCIAL_KEY_RE = /(^|-)social(s)?(-|$)/i;
 var SOCIALS_ROW_ATTR = "data-ohw-socials-row";
 var SOCIALS_ITEM_ATTR = "data-ohw-social-item";
 function isSocialItem(el) {
   if (!el) return false;
   const anchor = el instanceof HTMLAnchorElement ? el : el.closest("a");
   if (!anchor) return false;
+  if (SOCIAL_KEY_RE.test(anchor.getAttribute("data-ohw-href-key") ?? "")) return true;
   return anchor.querySelectorAll(ICON_SELECTOR).length === 1;
 }
 function getSocialItem(el) {
@@ -9606,7 +9680,8 @@ function getSocialItem(el) {
 function findSocialsRow(el) {
   const item = getSocialItem(el);
   if (!item) return null;
-  const row = item.parentElement;
+  const wrapper = item.parentElement;
+  const row = wrapper && wrapper.querySelectorAll("a").length === 1 && wrapper.matches("li, div, span") ? wrapper.parentElement : wrapper;
   if (!row) return null;
   const anchors = Array.from(row.querySelectorAll("a"));
   if (!anchors.length || !anchors.every((anchor) => isSocialItem(anchor))) return null;
@@ -9617,14 +9692,24 @@ function isSocialsRow(el) {
   return anchors.length > 0 && anchors.every((anchor) => isSocialItem(anchor));
 }
 function listSocialItems(row) {
-  return Array.from(row.children).filter((child) => {
-    return child instanceof HTMLElement && isSocialItem(child);
-  });
+  return Array.from(row.children).map((child) => {
+    if (!(child instanceof HTMLElement)) return null;
+    const anchor = child.matches("a") ? child : child.querySelector("a");
+    return isSocialItem(anchor) ? anchor : null;
+  }).filter((item) => item !== null);
+}
+function socialRowUnit(item) {
+  const row = findSocialsRow(item);
+  let node = item;
+  while (node.parentElement && node.parentElement !== row) {
+    node = node.parentElement;
+  }
+  return node;
 }
 function listSocialsRows(root = document) {
   const rows = /* @__PURE__ */ new Set();
-  root.querySelectorAll(ICON_SELECTOR).forEach((icon) => {
-    const row = findSocialsRow(icon);
+  root.querySelectorAll(`${ICON_SELECTOR}, a[data-ohw-href-key]`).forEach((el) => {
+    const row = findSocialsRow(el);
     if (row) rows.add(row);
   });
   root.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`).forEach((row) => rows.add(row));
@@ -9638,7 +9723,7 @@ function markSocialsRows(root = document) {
   listSocialsRows(root).forEach((row) => {
     row.setAttribute(SOCIALS_ROW_ATTR, "");
     const items = listSocialItems(row);
-    if (items[0]) rowTemplates.set(rowKeyOf(row), items[0].outerHTML);
+    if (items[0]) rowTemplates.set(rowKeyOf(row), socialRowUnit(items[0]).outerHTML);
     items.forEach((item, index) => {
       item.setAttribute(SOCIALS_ITEM_ATTR, String(index));
       const iconKey = socialIconKey(item);
@@ -9648,7 +9733,7 @@ function markSocialsRows(root = document) {
 }
 var SOCIALS_LABEL_ATTR = "data-ohw-social-label";
 function ensureLabelSlot(item, iconKey) {
-  if (item.querySelector(`[${SOCIALS_LABEL_ATTR}]`)) return;
+  if (socialLabelElement(item)) return;
   const label = document.createElement("span");
   label.setAttribute("data-ohw-key", `${iconKey}-label`);
   label.setAttribute("data-ohw-editable", "text");
@@ -9657,6 +9742,11 @@ function ensureLabelSlot(item, iconKey) {
   label.textContent = item.getAttribute("aria-label") ?? "";
   item.appendChild(label);
 }
+function socialLabelElement(item) {
+  return item.querySelector(
+    `[${SOCIALS_LABEL_ATTR}], [data-ohw-editable="text"], [data-ohw-editable="plain"]`
+  );
+}
 function socialLabelKey(iconKey) {
   return `${iconKey}-label`;
 }
@@ -9691,7 +9781,8 @@ function fromMarkup(markup) {
 var rowKeys = /* @__PURE__ */ new WeakMap();
 function rowKeyOf(row) {
   const first = listSocialItems(row)[0];
-  const derived = first ? socialIconKey(first)?.replace(/-\d+$/, "") : null;
+  const itemKey = first ? socialIconKey(first) ?? socialHrefKey(first)?.replace(/-href$/, "") : null;
+  const derived = itemKey?.replace(/-[^-]+$/, "") || null;
   if (derived) rowKeys.set(row, derived);
   return derived ?? rowKeys.get(row) ?? "social";
 }
@@ -9727,8 +9818,10 @@ function insertSocialItem(row, after, content = {}) {
   const index = nextSocialIndex(row, rowKey, content);
   const iconKey = `${rowKey}-${index}`;
   const hrefKey = `${iconKey}-href`;
-  const item = template ? template.cloneNode(true) : fromMarkup(remembered);
-  if (!item) return null;
+  const templateUnit = template ? socialRowUnit(template) : null;
+  const unit = templateUnit ? templateUnit.cloneNode(true) : fromMarkup(remembered);
+  const item = unit && (unit.matches("a") ? unit : unit.querySelector("a"));
+  if (!unit || !item) return null;
   item.setAttribute("data-ohw-href-key", hrefKey);
   item.setAttribute("href", "");
   item.removeAttribute("aria-label");
@@ -9739,8 +9832,9 @@ function insertSocialItem(row, after, content = {}) {
   const icon = item.querySelector(ICON_SELECTOR);
   icon?.setAttribute("data-ohw-key", iconKey);
   item.querySelector(`[${SOCIALS_LABEL_ATTR}]`)?.remove();
-  if (after && after.parentElement === row) after.insertAdjacentElement("afterend", item);
-  else row.appendChild(item);
+  const afterUnit = after ? socialRowUnit(after) : null;
+  if (afterUnit && afterUnit.parentElement === row) afterUnit.insertAdjacentElement("afterend", unit);
+  else row.appendChild(unit);
   markSocialsRows(row.ownerDocument);
   return { item, hrefKey, iconKey, order: getSocialsOrderFromDom(row.ownerDocument) };
 }
@@ -9773,8 +9867,9 @@ function removeSocialItem(item, content) {
   const previousContent = Object.fromEntries(
     removedKeys.filter((key) => key in content).map((key) => [key, content[key]])
   );
-  const nextSibling = item.nextElementSibling;
-  item.remove();
+  const unit = socialRowUnit(item);
+  const nextSibling = unit.nextElementSibling;
+  unit.remove();
   markSocialsRows(row.ownerDocument);
   return {
     removedKeys,
@@ -9782,8 +9877,8 @@ function removeSocialItem(item, content) {
     order: getSocialsOrderFromDom(row.ownerDocument),
     previousOrder,
     undo: () => {
-      if (nextSibling) nextSibling.before(item);
-      else row.appendChild(item);
+      if (nextSibling) nextSibling.before(unit);
+      else row.appendChild(unit);
       markSocialsRows(row.ownerDocument);
     }
   };
@@ -9795,7 +9890,7 @@ function applySocialsOrder(order, root = document) {
     const byKey = new Map(listSocialItems(row).map((item) => [socialHrefKey(item), item]));
     wanted.forEach((key) => {
       const item = byKey.get(key);
-      if (item) row.appendChild(item);
+      if (item) row.appendChild(socialRowUnit(item));
     });
   });
   markSocialsRows(root);
@@ -9825,7 +9920,7 @@ function reconcileSocialsFromContent(content, root = document) {
     });
     if (surviving.length) {
       present.forEach((item) => {
-        if (!surviving.includes(item)) item.remove();
+        if (!surviving.includes(item)) socialRowUnit(item).remove();
       });
     }
   });
@@ -9883,6 +9978,70 @@ function planSocialMove(hrefKey, insertIndex, root = document) {
   next.splice(insertIndex > from ? insertIndex - 1 : insertIndex, 0, hrefKey);
   return { ...order, [key]: next };
 }
+var SOCIALS_DISPLAY_KEY = "__ohw_socials_display";
+function readSocialsDisplay(row) {
+  const items = listSocialItems(row);
+  const visible = (el) => Boolean(el) && el.style.display !== "none" && el.getAttribute("data-ohw-hidden") === null;
+  return {
+    text: items.some((item) => visible(socialLabelElement(item))),
+    icon: items.some((item) => visible(item.querySelector(ICON_SELECTOR)))
+  };
+}
+function parseSocialsDisplay(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function socialsDisplayFor(row, content) {
+  return parseSocialsDisplay(content[SOCIALS_DISPLAY_KEY])?.[rowKeyOf(row)] ?? readSocialsDisplay(row);
+}
+function socialsDisplayWith(row, display, content) {
+  return { ...parseSocialsDisplay(content[SOCIALS_DISPLAY_KEY]) ?? {}, [rowKeyOf(row)]: display };
+}
+function applySocialsDisplayToRow(row, display) {
+  listSocialItems(row).forEach((item) => {
+    const label = socialLabelElement(item);
+    const icon = item.querySelector(ICON_SELECTOR);
+    if (label) label.style.display = display.text ? "" : "none";
+    if (icon) icon.style.display = display.icon ? "" : "none";
+  });
+}
+function applySocialsDisplayFromContent(content, root = document) {
+  const stored = parseSocialsDisplay(content[SOCIALS_DISPLAY_KEY]);
+  if (!stored) return;
+  listSocialsRows(root).forEach((row) => {
+    const display = stored[rowKeyOf(row)];
+    if (!display) return;
+    if (display.icon) {
+      listSocialItems(row).forEach((item) => {
+        const iconKey = ensureIconSlot(item);
+        const slot = item.querySelector(ICON_SELECTOR);
+        if (iconKey && slot && content[iconKey]) applyIconMarkup(slot, content[iconKey]);
+      });
+    }
+    applySocialsDisplayToRow(row, display);
+  });
+}
+function socialsMissingIcons(row) {
+  return listSocialItems(row).filter((item) => !item.querySelector(ICON_SELECTOR)).map((item) => ({ hrefKey: socialHrefKey(item) ?? "", url: item.getAttribute("href") ?? "" })).filter((entry) => Boolean(entry.hrefKey));
+}
+function ensureIconSlot(item) {
+  const existing = item.querySelector(ICON_SELECTOR);
+  if (existing) return existing.dataset.ohwKey ?? null;
+  const hrefKey = socialHrefKey(item);
+  if (!hrefKey) return null;
+  const iconKey = hrefKey.replace(/-href$/, "");
+  const slot = document.createElement("span");
+  slot.setAttribute("data-ohw-key", iconKey);
+  slot.setAttribute("data-ohw-editable", "icon");
+  slot.style.display = "inline-flex";
+  item.prepend(slot);
+  return iconKey;
+}
 
 // src/lib/footer-items.ts
 var FOOTER_ORDER_KEY = "__ohw_footer_order";
@@ -11370,6 +11529,75 @@ function LogoSizePanel({
   ] });
 }
 
+// src/ui/socials-display-panel.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function DisplaySwitch({
+  label,
+  checked,
+  disabled,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "span",
+      {
+        className: cn(
+          "min-w-0 flex-1 text-sm font-medium leading-5",
+          disabled ? "text-muted-foreground" : "text-foreground"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-label": label,
+        disabled,
+        onClick: () => onChange(!checked),
+        className: cn(
+          "relative h-5 w-9 shrink-0 rounded-full transition-colors",
+          checked ? "bg-primary" : "bg-primary-50",
+          disabled ? "cursor-default opacity-50" : "cursor-pointer"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "span",
+          {
+            className: cn(
+              "absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all",
+              checked ? "left-[1.125rem]" : "left-0.5"
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function SocialsDisplayPanel({ display, onChange, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      DisplaySwitch,
+      {
+        label: "Text",
+        checked: display.text,
+        disabled: display.text && !display.icon,
+        onChange: (text) => onChange({ ...display, text })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      DisplaySwitch,
+      {
+        label: "Icon",
+        checked: display.icon,
+        disabled: display.icon && !display.text,
+        onChange: (icon) => onChange({ ...display, icon })
+      }
+    )
+  ] });
+}
+
 // src/lib/item-drag-interaction.ts
 function disableNativeHrefDrag(el) {
   if (el.draggable) el.draggable = false;
@@ -11919,7 +12147,7 @@ function useNavItemDrag({
 
 // src/ui/footer-container-chrome.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FooterContainerChrome({
   rect,
   onAdd,
@@ -11927,7 +12155,7 @@ function FooterContainerChrome({
 }) {
   const chromeGap = 6;
   const buttonMargin = 7;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       "data-ohw-footer-container-chrome": "",
@@ -11939,8 +12167,8 @@ function FooterContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
             type: "button",
@@ -11959,10 +12187,10 @@ function FooterContainerChrome({
               if (addDisabled) return;
               onAdd();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
       ] })
     }
   ) });
@@ -12423,13 +12651,13 @@ function deleteSelectedNavFooterItem(deps) {
 
 // src/ui/navbar-container-chrome.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function NavbarContainerChrome({
   rect,
   onAdd
 }) {
   const chromeGap = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-ohw-navbar-container-chrome": "",
@@ -12441,7 +12669,7 @@ function NavbarContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           type: "button",
@@ -12458,7 +12686,7 @@ function NavbarContainerChrome({
             e.stopPropagation();
             onAdd();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
         }
       )
     }
@@ -12467,7 +12695,7 @@ function NavbarContainerChrome({
 
 // src/ui/drop-indicator.tsx
 var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var dropIndicatorVariants = cva(
   "ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
   {
@@ -12491,7 +12719,7 @@ var dropIndicatorVariants = cva(
 );
 var DropIndicator = React10.forwardRef(
   ({ className, direction, state, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         ref,
@@ -12508,7 +12736,7 @@ var DropIndicator = React10.forwardRef(
 DropIndicator.displayName = "DropIndicator";
 
 // src/ui/badge.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -12526,12 +12754,12 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/OhhwellsBridge.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PRIMARY3 = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -12700,7 +12928,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
     const root = (0, import_client2.createRoot)(container);
     (0, import_react_dom3.flushSync)(() => {
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           SchedulingWidget,
           {
             notifyOnConnect,
@@ -13368,7 +13596,7 @@ function EditGlowChrome({
   hideHandle = false
 }) {
   const GAP = SELECTION_CHROME_GAP2;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       ref: elRef,
@@ -13383,7 +13611,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             style: {
@@ -13396,7 +13624,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -13408,7 +13636,7 @@ function EditGlowChrome({
               transform: "translate(calc(-100% - 7px), -50%)",
               pointerEvents: dragDisabled ? "none" : "auto"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DragHandle,
               {
                 "aria-label": `Reorder ${reorderHrefKey}`,
@@ -13618,7 +13846,7 @@ function FloatingToolbar({
     return () => ro.disconnect();
   }, [showEditLink, activeCommands]);
   const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       ref: setRefs,
@@ -13630,12 +13858,12 @@ function FloatingToolbar({
         zIndex: 2147483647,
         pointerEvents: "auto"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react16.default.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CustomToolbarDivider, {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(CustomToolbar, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react16.default.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               CustomToolbarButton,
               {
                 title: btn.title,
@@ -13644,7 +13872,7 @@ function FloatingToolbar({
                   e.preventDefault();
                   onCommand(btn.cmd);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "svg",
                   {
                     width: "16",
@@ -13665,7 +13893,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           CustomToolbarButton,
           {
             type: "button",
@@ -13679,7 +13907,7 @@ function FloatingToolbar({
               e.preventDefault();
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Link, { className: "size-4 shrink-0", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Link, { className: "size-4 shrink-0", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -13696,7 +13924,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -13710,7 +13938,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -14324,6 +14552,7 @@ function OhhwellsBridge() {
       const result2 = insertSocialItem(socialsRow, after, editContentRef.current);
       if (!result2) return;
       const orderJson = JSON.stringify(result2.order);
+      applySocialsDisplayToRow(socialsRow, socialsDisplayFor(socialsRow, editContentRef.current));
       editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
       postToParent2({ type: "ow:change", nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }] });
       postToParentRef.current({
@@ -14911,6 +15140,39 @@ function OhhwellsBridge() {
       placement
     });
   }, []);
+  const openSocialsDisplayPanel = (0, import_react16.useCallback)((row) => {
+    setParentScrollSnap(parentScrollRef.current);
+    setFloatingPanel({
+      key: "socials-display",
+      title: "Style",
+      context: "Socials \xB7 Footer",
+      kind: "socials-display",
+      row
+    });
+  }, []);
+  const changeSocialsDisplay = (0, import_react16.useCallback)(
+    (row, next) => {
+      if (next.icon) {
+        const missing = socialsMissingIcons(row);
+        listSocialItems(row).forEach((item) => ensureIconSlot(item));
+        if (missing.length) {
+          postToParentRef.current({ type: "ow:social-icons-needed", items: missing });
+        }
+      }
+      applySocialsDisplayToRow(row, next);
+      requestAnimationFrame(() => {
+        if (selectedElRef.current === row && row.isConnected) setToolbarRect(row.getBoundingClientRect());
+      });
+      const displayJson = JSON.stringify(socialsDisplayWith(row, next, editContentRef.current));
+      editContentRef.current = { ...editContentRef.current, [SOCIALS_DISPLAY_KEY]: displayJson };
+      postToParentRef.current({
+        type: "ow:change",
+        nodes: [{ key: SOCIALS_DISPLAY_KEY, text: displayJson }],
+        flush: true
+      });
+    },
+    []
+  );
   const closeFloatingPanelOnly = (0, import_react16.useCallback)(() => {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
@@ -15082,11 +15344,13 @@ function OhhwellsBridge() {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
         applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
       }
+      applyBrandChrome(content);
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key)) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -15126,6 +15390,7 @@ function OhhwellsBridge() {
       reconcileNavbarItemsFromContent(content);
       reconcileFooterOrderFromContent(content);
       reconcileSocialsFromContent(content);
+      applySocialsDisplayFromContent(content);
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
       sectionsLoadedRef.current = true;
@@ -15166,10 +15431,12 @@ function OhhwellsBridge() {
       retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
       observer?.disconnect();
       try {
+        applyBrandChrome(content);
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
           if (key === LOGO_PLACEHOLDER_KEY) continue;
           if (LOGO_IMAGE_KEYS.includes(key)) continue;
+          if (BRAND_CHROME_KEYS.has(key)) continue;
           if (applyVideoSettingNode(key, val)) continue;
           if (applyCarouselNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -15194,6 +15461,8 @@ function OhhwellsBridge() {
         reconcileNavbarItemsFromContent(content);
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
+        applySocialsDisplayFromContent(content);
+        applySocialsDisplayFromContent(content);
       } finally {
         observer?.observe(document.body, { childList: true, subtree: true });
       }
@@ -15272,6 +15541,8 @@ function OhhwellsBridge() {
         reconcileNavbarItemsFromContent(content);
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
+        applySocialsDisplayFromContent(content);
+        applySocialsDisplayFromContent(content);
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
           if (isFooterHrefKey(el.getAttribute("data-ohw-href-key"))) {
             disableNativeHrefDrag(el);
@@ -16549,32 +16820,34 @@ function OhhwellsBridge() {
     };
     const handleSocialUpdate = (e) => {
       if (e.data?.type !== "ow:social-update") return;
-      const { hrefKey, iconKey, url, iconMarkup, platformId, label } = e.data;
+      const updates = Array.isArray(e.data.items) ? e.data.items : [e.data];
       const nodes = [];
-      if (hrefKey) {
-        document.querySelectorAll(`[data-ohw-href-key="${hrefKey}"]`).forEach((el) => applyLinkHref(el, url));
-        nodes.push({ key: hrefKey, text: url });
-      }
-      if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
-        document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
-          applyIconMarkup(el, iconMarkup);
-        });
-        nodes.push({ key: iconKey, text: iconMarkup });
-      }
-      if (iconKey && platformId) nodes.push({ key: socialPlatformKey(iconKey), text: platformId });
-      if (iconKey && label) {
-        const labelKey = socialLabelKey(iconKey);
-        document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
-          el.textContent = label;
-        });
-        nodes.push({ key: labelKey, text: label });
+      for (const { hrefKey, iconKey, url, iconMarkup, platformId, label } of updates) {
+        if (hrefKey) {
+          document.querySelectorAll(`[data-ohw-href-key="${hrefKey}"]`).forEach((el) => applyLinkHref(el, url));
+          nodes.push({ key: hrefKey, text: url });
+        }
+        if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
+          document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
+            applyIconMarkup(el, iconMarkup);
+          });
+          nodes.push({ key: iconKey, text: iconMarkup });
+        }
+        if (iconKey && platformId) nodes.push({ key: socialPlatformKey(iconKey), text: platformId });
+        if (iconKey && label) {
+          const labelKey = socialLabelKey(iconKey);
+          document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
+            el.textContent = label;
+          });
+          nodes.push({ key: labelKey, text: label });
+        }
       }
       if (!nodes.length) return;
       editContentRef.current = {
         ...editContentRef.current,
         ...Object.fromEntries(nodes.map((node) => [node.key, node.text]))
       };
-      postToParentRef.current({ type: "ow:change", nodes });
+      postToParentRef.current({ type: "ow:change", nodes, flush: true });
     };
     const handleIconMarkup = (e) => {
       if (e.data?.type !== "ow:icon-markup") return;
@@ -16587,7 +16860,7 @@ function OhhwellsBridge() {
       targets.forEach((el) => {
         applyIconMarkup(el, markup);
       });
-      postToParentRef.current({ type: "ow:change", nodes: [{ key, text: markup }] });
+      postToParentRef.current({ type: "ow:change", nodes: [{ key, text: markup }], flush: true });
     };
     const handleImageUrl = (e) => {
       if (e.data?.type !== "ow:image-url") return;
@@ -16721,6 +16994,7 @@ function OhhwellsBridge() {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
         applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
       }
+      applyBrandChrome(content);
       let sectionsJson = null;
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") {
@@ -16730,6 +17004,7 @@ function OhhwellsBridge() {
         if (key === AI_SECTIONS_KEY) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -17893,6 +18168,8 @@ function OhhwellsBridge() {
       };
       postToParent2({ type: "ow:change", nodes });
       enforceLinkHrefs();
+      const copyRow = findSocialsRow(result.item);
+      if (copyRow) applySocialsDisplayToRow(copyRow, socialsDisplayFor(copyRow, editContentRef.current));
       requestAnimationFrame(() => selectRef.current(result.item));
       return;
     }
@@ -18119,10 +18396,10 @@ function OhhwellsBridge() {
     [postToParent2]
   );
   return bridgeRoot ? (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      isEditMode && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
-      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+      isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MediaOverlay,
         {
           hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
@@ -18133,7 +18410,7 @@ function OhhwellsBridge() {
         },
         `uploading-${key}`
       )),
-      mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MediaOverlay,
         {
           hover: mediaHover,
@@ -18142,11 +18419,11 @@ function OhhwellsBridge() {
           onVideoSettingsChange: handleVideoSettingsChange
         }
       ),
-      carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
-      siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-      siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
-      isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
-      isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+      siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+      siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
+      isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
+      isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           className: "pointer-events-none fixed z-2147483646",
@@ -18156,7 +18433,7 @@ function OhhwellsBridge() {
             width: slot.width,
             height: slot.height
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             DropIndicator,
             {
               direction: slot.direction,
@@ -18167,7 +18444,7 @@ function OhhwellsBridge() {
         },
         `footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
       )),
-      isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           className: "pointer-events-none fixed z-2147483646",
@@ -18177,7 +18454,7 @@ function OhhwellsBridge() {
             width: slot.width,
             height: slot.height
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             DropIndicator,
             {
               direction: slot.direction,
@@ -18188,10 +18465,10 @@ function OhhwellsBridge() {
         },
         `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
       )),
-      hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
-      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
+      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         FooterContainerChrome,
         {
           rect: toolbarRect,
@@ -18199,7 +18476,7 @@ function OhhwellsBridge() {
           addDisabled: !canAddFooterColumn()
         }
       ),
-      toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         ItemInteractionLayer,
         {
           rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
@@ -18214,10 +18491,18 @@ function OhhwellsBridge() {
           onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
           onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
           itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
-          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
+              onStyle: () => {
+                const row = selectedElRef.current;
+                if (!row) return;
+                if (floatingPanel?.kind === "socials-display") closeFloatingPanelOnly();
+                else openSocialsDisplayPanel(row);
+              },
+              showStyle: selectedIsSocialsRow,
+              styleActive: floatingPanel?.kind === "socials-display",
               onAddItem: handleAddChildItem,
               onSelectParent: handleSelectParent,
               onDuplicate: handleDuplicateSelected,
@@ -18239,8 +18524,8 @@ function OhhwellsBridge() {
           ) : void 0
         }
       ),
-      toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           EditGlowChrome,
           {
             rect: toolbarRect,
@@ -18250,7 +18535,7 @@ function OhhwellsBridge() {
             hideHandle: isItemDragging
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           FloatingToolbar,
           {
             rect: toolbarRect,
@@ -18263,7 +18548,7 @@ function OhhwellsBridge() {
           }
         )
       ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -18289,7 +18574,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -18298,15 +18583,15 @@ function OhhwellsBridge() {
           onStateChange: handleStateChange
         }
       ),
-      sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           "data-ohw-section-insert-line": "",
           className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
           style: { top: sectionGap.y, transform: "translateY(-50%)" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Badge,
               {
                 className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
@@ -18323,11 +18608,11 @@ function OhhwellsBridge() {
                 children: "Add Section"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
           ]
         }
       ),
-      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         LinkPopover,
         {
           panelRef: linkPopoverPanelRef,
@@ -18344,7 +18629,29 @@ function OhhwellsBridge() {
         },
         linkPopover.key
       ) : null,
-      floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        FloatingPanel,
+        {
+          open: true,
+          title: floatingPanel.title,
+          context: floatingPanel.context,
+          position: floatingPanelPos,
+          onPositionChange: setFloatingPanelPos,
+          parentScroll: parentScrollSnap ?? parentScrollRef.current,
+          onClose: closeFloatingPanelOnly,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            SocialsDisplayPanel,
+            {
+              display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
+              onChange: (next) => {
+                changeSocialsDisplay(floatingPanel.row, next);
+                setFloatingPanel({ ...floatingPanel });
+              }
+            }
+          )
+        }
+      ) : null,
+      floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         FloatingPanel,
         {
           open: true,
@@ -18354,7 +18661,7 @@ function OhhwellsBridge() {
           onPositionChange: setFloatingPanelPos,
           parentScroll: parentScrollSnap ?? parentScrollRef.current,
           onClose: closeFloatingPanelAndDeselect,
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             LogoSizePanel,
             {
               viewport: editorViewport,
@@ -18402,10 +18709,10 @@ function OhhwellsBridge() {
 
 // src/ui/EmptySection.tsx
 var import_link = __toESM(require("next/link"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "p",
       {
         style: {
@@ -18417,10 +18724,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
           color: "var(--brand-accent)",
           marginBottom: "1.5rem"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "h1",
       {
         style: {
@@ -18435,7 +18742,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "p",
       {
         style: {