StudioSocial.html

<script>
(() => {
  'use strict';

  const plus = window.HTMLStudioPlus;
  if (!plus) return;

  const $ = id => document.getElementById(id);
  const setStatus = value => document.documentElement.setAttribute('data-html-studio-social', value);
  let selection = null;
  let editing = false;

  const PLATFORMS = [
    { key:'website', label:'Website', placeholder:'https://example.com' },
    { key:'instagram', label:'Instagram', placeholder:'https://instagram.com/username' },
    { key:'facebook', label:'Facebook', placeholder:'https://facebook.com/page' },
    { key:'linkedin', label:'LinkedIn', placeholder:'https://linkedin.com/in/username' },
    { key:'x', label:'X / Twitter', placeholder:'https://x.com/username' },
    { key:'youtube', label:'YouTube', placeholder:'https://youtube.com/@channel' },
    { key:'tiktok', label:'TikTok', placeholder:'https://tiktok.com/@username' },
    { key:'pinterest', label:'Pinterest', placeholder:'https://pinterest.com/username' },
    { key:'email', label:'Email', placeholder:'hello@example.com' },
    { key:'custom1', label:'Custom link 1', placeholder:'https://…', custom:true },
    { key:'custom2', label:'Custom link 2', placeholder:'https://…', custom:true }
  ];

  const BRAND_PATHS = {
    instagram:'M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334',
    facebook:'M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951',
    linkedin:'M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z',
    x:'M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z',
    youtube:'M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z',
    tiktok:'M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3z',
    pinterest:'M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0'
  };

  function socialIconSvg(key) {
    if (BRAND_PATHS[key]) return `<svg class="unscriptly-social-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" style="width:1em;height:1em;display:block;flex:0 0 auto;"><path d="${BRAND_PATHS[key]}"></path></svg>`;
    if (key === 'email') return '<svg class="unscriptly-social-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" style="width:1em;height:1em;display:block;flex:0 0 auto;"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-.5a.5.5 0 0 0-.5.5v.217l6.5 4.063 6.5-4.063V4a.5.5 0 0 0-.5-.5zm12.5 2.484-4.958 3.099L14.5 12.18zm-.966 6.516-5.263-3.289a.5.5 0 0 0-.542 0L2.466 12.5zm-12.034-.32 4.958-3.097L1.5 5.984z"></path></svg>';
    if (key === 'website') return '<svg class="unscriptly-social-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true" focusable="false" style="width:1em;height:1em;display:block;flex:0 0 auto;"><circle cx="8" cy="8" r="6.3"></circle><path d="M1.8 8h12.4M8 1.7c1.65 1.65 2.45 3.75 2.45 6.3S9.65 12.65 8 14.3C6.35 12.65 5.55 10.55 5.55 8S6.35 3.35 8 1.7Z"></path></svg>';
    return '<svg class="unscriptly-social-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" style="width:1em;height:1em;display:block;flex:0 0 auto;"><path d="M6.354 5.5H4a3.5 3.5 0 1 0 0 7h3.5a3.5 3.5 0 0 0 3.356-2.5H9.793A2.5 2.5 0 0 1 7.5 11.5H4a2.5 2.5 0 1 1 0-5h2.354zm3.292-2H12a3.5 3.5 0 1 1 0 7H8.5A3.5 3.5 0 0 1 5.144 8h1.063A2.5 2.5 0 0 0 8.5 9.5H12a2.5 2.5 0 1 0 0-5H9.646z"></path></svg>';
  }

  function escapeHtml(value) {
    return String(value == null ? '' : value)
      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
      .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
  }

  function escapeAttr(value) { return escapeHtml(value); }

  function selectedTarget(doc) {
    if (!selection || !doc) return null;
    if (selection.id) {
      const byId = doc.getElementById(selection.id);
      if (byId) return byId;
    }
    if (selection.path) {
      try {
        const byPath = doc.querySelector(selection.path);
        if (byPath) return byPath;
      } catch (_) {}
    }
    const list = Array.from(doc.querySelectorAll(selection.tag || '*'));
    if (selection.classes && selection.classes.length) {
      const byClass = list.find(el => selection.classes.every(name => el.classList.contains(name)));
      if (byClass) return byClass;
    }
    return list[0] || null;
  }

  function defaultConfig() {
    return {
      display:'both', align:'left', style:'outline', shape:'rounded', size:'medium', gap:10,
      foreground:'#111111', background:'#ffffff', newTab:true,
      links: PLATFORMS.map((p, index) => ({
        key:p.key,
        label:p.custom ? (index === 9 ? 'Portfolio' : 'Contact') : p.label,
        iconKey:p.key,
        url:'',
        enabled:false
      }))
    };
  }

  function configFromSelected() {
    if (!selection) return null;
    const source = plus.readSource();
    if (!source) return null;
    try {
      const doc = new DOMParser().parseFromString(source, 'text/html');
      const target = selectedTarget(doc);
      if (!target) return null;
      const bar = target.matches && target.matches('[data-unscriptly-social-bar="true"]') ? target : (target.closest ? target.closest('[data-unscriptly-social-bar="true"]') : null);
      if (!bar) return null;
      const encoded = bar.getAttribute('data-unscriptly-social-config') || '';
      if (encoded) {
        try { return JSON.parse(decodeURIComponent(encoded)); } catch (_) {}
      }
      return null;
    } catch (_) { return null; }
  }

  function normalizeUrl(key, value) {
    let url = String(value || '').trim();
    if (!url) return '';
    if (key === 'email' && !/^mailto:/i.test(url)) return 'mailto:' + url;
    return url;
  }

  function sizeMetrics(size) {
    if (size === 'small') return { font:12, icon:28, padX:9, height:30 };
    if (size === 'large') return { font:16, icon:44, padX:15, height:46 };
    return { font:14, icon:36, padX:12, height:38 };
  }

  function anchorStyle(config, iconOnly) {
    const m = sizeMetrics(config.size);
    const radius = config.shape === 'round' ? '999px' : (config.shape === 'square' ? '0px' : '9px');
    let background = 'transparent';
    let border = '1px solid transparent';
    if (config.style === 'outline') border = '1px solid ' + config.foreground + '33';
    if (config.style === 'filled') background = config.background;
    return [
      'display:inline-flex','align-items:center','justify-content:center','gap:7px',
      'min-height:' + m.height + 'px',
      iconOnly ? ('width:' + m.height + 'px') : ('padding:0 ' + m.padX + 'px'),
      'border:' + border,'border-radius:' + radius,'background:' + background,
      'color:' + config.foreground,'text-decoration:none',
      'font:700 ' + m.font + 'px/1 Arial,sans-serif','box-sizing:border-box','white-space:nowrap'
    ].join(';');
  }

  function buildBarHtml(config) {
    const enabledLinks = (config.links || []).filter(link => link.enabled && String(link.url || '').trim());
    if (!enabledLinks.length) return '';
    const display = config.display || 'both';
    const justify = config.align === 'center' ? 'center' : (config.align === 'right' ? 'flex-end' : 'flex-start');
    const encoded = encodeURIComponent(JSON.stringify(config));
    const items = enabledLinks.map(item => {
      const href = normalizeUrl(item.key, item.url);
      const target = config.newTab && item.key !== 'email' ? ' target="_blank" rel="noopener noreferrer"' : '';
      const iconOnly = display === 'icon';
      const showIcon = display !== 'text';
      const showText = display !== 'icon';
      const icon = showIcon ? `<span aria-hidden="true" style="display:inline-grid;place-items:center;min-width:1.15em;line-height:1;font-size:1em;">${socialIconSvg(item.iconKey || item.key)}</span>` : '';
      const text = showText ? `<span>${escapeHtml(item.label || 'Link')}</span>` : '';
      return `<a href="${escapeAttr(href)}"${target} aria-label="${escapeAttr(item.label || 'Link')}" title="${escapeAttr(item.label || 'Link')}" style="${escapeAttr(anchorStyle(config, iconOnly))}">${icon}${text}</a>`;
    }).join('');

    return `<nav data-unscriptly-social-bar="true" data-unscriptly-social-config="${escapeAttr(encoded)}" aria-label="Social and external links" style="display:flex;align-items:center;justify-content:${justify};gap:${Number(config.gap || 10)}px;flex-wrap:wrap;width:100%;">${items}</nav>`;
  }

  function injectElementTile() {
    if ($('socialLinkBarTile')) return;
    const groups = Array.from(document.querySelectorAll('#elementCatalog .element-group'));
    const group = groups.find(section => {
      const title = section.querySelector('.element-group-title');
      return title && /text\s*&\s*actions/i.test(title.textContent || '');
    });
    const grid = group && group.querySelector('.element-grid');
    if (!grid) return;
    const tile = document.createElement('button');
    tile.id = 'socialLinkBarTile';
    tile.className = 'element-tile';
    tile.type = 'button';
    tile.dataset.search = 'social media link bar instagram facebook linkedin x twitter youtube tiktok pinterest website icons';
    tile.innerHTML = '<span class="element-glyph">◎</span><span>Social / Link Bar</span>';
    tile.addEventListener('click', () => openBuilder(false));
    grid.appendChild(tile);
  }

  function injectModal() {
    if ($('socialBarModal')) return;
    const modal = document.createElement('div');
    modal.className = 'modal-backdrop hidden';
    modal.id = 'socialBarModal';
    modal.innerHTML = `
      <div class="modal-card social-bar-card">
        <div class="modal-head">
          <div><div class="eyebrow">Elements</div><h2 id="socialBarModalTitle">Social / Link Bar</h2></div>
          <button id="closeSocialBarModalBtn" class="icon-btn" type="button">×</button>
        </div>
        <div class="modal-body social-bar-body">
          <div class="social-link-list" id="socialLinkRows"></div>
          <div class="social-option-grid">
            <div><label class="field-label" for="socialDisplayInput">Display</label><select id="socialDisplayInput" class="field"><option value="icon">Icons</option><option value="text">Text</option><option value="both" selected>Icon + text</option></select></div>
            <div><label class="field-label" for="socialAlignInput">Alignment</label><select id="socialAlignInput" class="field"><option value="left">Left</option><option value="center">Center</option><option value="right">Right</option></select></div>
            <div><label class="field-label" for="socialStyleInput">Style</label><select id="socialStyleInput" class="field"><option value="minimal">Minimal</option><option value="outline" selected>Outline</option><option value="filled">Filled</option></select></div>
            <div><label class="field-label" for="socialShapeInput">Shape</label><select id="socialShapeInput" class="field"><option value="round">Round</option><option value="rounded" selected>Rounded</option><option value="square">Square</option></select></div>
            <div><label class="field-label" for="socialSizeInput">Size</label><select id="socialSizeInput" class="field"><option value="small">Small</option><option value="medium" selected>Medium</option><option value="large">Large</option></select></div>
            <div><label class="field-label" for="socialGapInput">Spacing</label><select id="socialGapInput" class="field"><option value="6">6 px</option><option value="10" selected>10 px</option><option value="14">14 px</option><option value="18">18 px</option><option value="24">24 px</option></select></div>
          </div>
          <div class="social-color-row">
            <label><span class="field-label">Foreground</span><input id="socialForegroundInput" type="color" value="#111111"></label>
            <label><span class="field-label">Fill</span><input id="socialBackgroundInput" type="color" value="#ffffff"></label>
            <label class="check-row social-new-tab"><input id="socialNewTabInput" type="checkbox" checked> Open external links in new tab</label>
          </div>
          <div class="field-help">Enable the services you want, enter their links, then insert the bar. Select an existing bar later to edit it again.</div>
        </div>
        <div class="modal-foot">
          <button id="cancelSocialBarBtn" class="button secondary" type="button">Cancel</button>
          <button id="applySocialBarBtn" class="button primary" type="button">Add social / link bar</button>
        </div>
      </div>`;
    document.body.appendChild(modal);
  }

  function renderRows(config) {
    const root = $('socialLinkRows');
    if (!root) return;
    root.innerHTML = '';
    PLATFORMS.forEach(platform => {
      const saved = (config.links || []).find(link => link.key === platform.key) || {};
      const row = document.createElement('div');
      row.className = 'social-link-row';
      row.dataset.key = platform.key;
      row.dataset.iconKey = saved.iconKey || platform.key;
      row.innerHTML = `
        <label class="social-enable"><input class="social-link-enabled" type="checkbox" ${saved.enabled ? 'checked' : ''}><span class="social-row-glyph">${socialIconSvg(saved.iconKey || platform.key)}</span></label>
        <div class="social-row-fields">
          ${platform.custom ? `<input class="field social-label-input" type="text" value="${escapeAttr(saved.label || (platform.key === 'custom1' ? 'Portfolio' : 'Contact'))}" placeholder="Link label">` : `<strong>${escapeHtml(platform.label)}</strong>`}
          <input class="field social-url-input" type="text" value="${escapeAttr(saved.url || '')}" placeholder="${escapeAttr(platform.placeholder)}">
        </div>`;
      root.appendChild(row);
    });
  }

  function readConfig() {
    const config = {
      display: $('socialDisplayInput').value,
      align: $('socialAlignInput').value,
      style: $('socialStyleInput').value,
      shape: $('socialShapeInput').value,
      size: $('socialSizeInput').value,
      gap: Number($('socialGapInput').value || 10),
      foreground: $('socialForegroundInput').value || '#111111',
      background: $('socialBackgroundInput').value || '#ffffff',
      newTab: Boolean($('socialNewTabInput').checked),
      links: []
    };
    Array.from(document.querySelectorAll('#socialLinkRows .social-link-row')).forEach(row => {
      const platform = PLATFORMS.find(p => p.key === row.dataset.key);
      const customLabel = row.querySelector('.social-label-input');
      config.links.push({
        key: row.dataset.key,
        iconKey: row.dataset.iconKey || (platform && platform.key) || 'custom1',
        label: customLabel ? String(customLabel.value || '').trim() : ((platform && platform.label) || 'Link'),
        url: String((row.querySelector('.social-url-input') || {}).value || '').trim(),
        enabled: Boolean((row.querySelector('.social-link-enabled') || {}).checked)
      });
    });
    return config;
  }

  function loadConfigIntoUi(config) {
    const c = config || defaultConfig();
    renderRows(c);
    $('socialDisplayInput').value = c.display || 'both';
    $('socialAlignInput').value = c.align || 'left';
    $('socialStyleInput').value = c.style || 'outline';
    $('socialShapeInput').value = c.shape || 'rounded';
    $('socialSizeInput').value = c.size || 'medium';
    $('socialGapInput').value = String(c.gap || 10);
    $('socialForegroundInput').value = c.foreground || '#111111';
    $('socialBackgroundInput').value = c.background || '#ffffff';
    $('socialNewTabInput').checked = c.newTab !== false;
  }

  function openBuilder(editMode) {
    editing = Boolean(editMode);
    const config = editing ? configFromSelected() : null;
    if (editing && !config) {
      plus.toast('Select a Social / Link Bar or one of its links first.', 'error');
      return;
    }
    loadConfigIntoUi(config || defaultConfig());
    $('socialBarModalTitle').textContent = editing ? 'Edit Social / Link Bar' : 'Social / Link Bar';
    $('applySocialBarBtn').textContent = editing ? 'Update bar' : 'Add social / link bar';
    $('socialBarModal').classList.remove('hidden');
  }

  function closeBuilder() {
    const modal = $('socialBarModal');
    if (modal) modal.classList.add('hidden');
    editing = false;
  }

  function applyBar() {
    const config = readConfig();
    const html = buildBarHtml(config);
    if (!html) {
      plus.toast('Enable at least one link and enter its URL.', 'error');
      return;
    }

    if (editing) {
      const ok = plus.patchSelected((target, doc) => {
        const bar = target.matches && target.matches('[data-unscriptly-social-bar="true"]') ? target : (target.closest ? target.closest('[data-unscriptly-social-bar="true"]') : null);
        if (!bar) throw new Error('Social bar could not be located.');
        const template = doc.createElement('template');
        template.innerHTML = html;
        const replacement = template.content.firstElementChild;
        if (!replacement) throw new Error('Social bar markup could not be generated.');
        bar.parentNode.replaceChild(replacement, bar);
      }, { message: 'Social / Link Bar updated.' });
      if (ok) closeBuilder();
      return;
    }

    const position = $('insertPositionInput') ? $('insertPositionInput').value : 'smart';
    const inserted = plus.insertHtml(html, position, { message: 'Social / Link Bar added.' });
    if (inserted) closeBuilder();
  }

  function injectInspectorControl() {
    const inspector = $('inspectorContent');
    if (!inspector || $('socialBarInspectorSection')) return;
    const section = document.createElement('section');
    section.id = 'socialBarInspectorSection';
    section.className = 'control-section hidden';
    section.innerHTML = `<button class="section-toggle" type="button"><span>Social / Link Bar</span><span>⌃</span></button><div class="section-body"><div class="field-help">Customize the selected social/link bar, services, URLs, icons, labels, colors, spacing, and alignment.</div><button id="editSocialBarBtn" type="button" class="button secondary full-width-button">Edit social / link bar</button></div>`;
    inspector.appendChild(section);
    section.querySelector('.section-toggle').addEventListener('click', () => section.querySelector('.section-body').classList.toggle('collapsed'));
    $('editSocialBarBtn').addEventListener('click', () => openBuilder(true));
  }

  function refreshInspector() {
    const section = $('socialBarInspectorSection');
    if (!section) return;
    section.classList.toggle('hidden', !configFromSelected());
  }

  function bind() {
    injectElementTile();
    injectModal();
    injectInspectorControl();

    $('closeSocialBarModalBtn').addEventListener('click', closeBuilder);
    $('cancelSocialBarBtn').addEventListener('click', closeBuilder);
    $('applySocialBarBtn').addEventListener('click', applyBar);
    $('socialBarModal').addEventListener('click', event => { if (event.target === $('socialBarModal')) closeBuilder(); });

    document.addEventListener('htmlstudio:plus-selection', event => {
      selection = event.detail || null;
      window.setTimeout(refreshInspector, 0);
    });
    document.addEventListener('htmlstudio:plus-preview-ready', () => window.setTimeout(refreshInspector, 50));

    setStatus('ready');
  }

  window.HTMLStudioSocial = { open: () => openBuilder(false), edit: () => openBuilder(true), buildHtml: buildBarHtml };

  try {
    bind();
  } catch (error) {
    console.error('[HTML Studio] Social / Link Bar module failed:', error);
    setStatus('error');
    plus.toast('Social / Link Bar could not initialize. Core editing remains available.', 'error');
  }
})();
</script>