@accelerated-agency/visual-editor 0.5.4 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/vite.cjs +472 -87
  2. package/dist/vite.js +472 -87
  3. package/package.json +1 -1
package/dist/vite.js CHANGED
@@ -1074,7 +1074,7 @@ margin-right:4px;
1074
1074
  }
1075
1075
  .sec-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.12)}
1076
1076
  .sec-thumb{
1077
- background:var(--bg-sub);height:72px;display:flex;align-items:center;
1077
+ background:var(--bg-sub);height:auto;display:flex;align-items:center;
1078
1078
  justify-content:center;font-size:22px;border-bottom:1px solid var(--border);
1079
1079
  overflow:hidden;
1080
1080
  }
@@ -1100,6 +1100,21 @@ margin-right:4px;
1100
1100
  #el-info-sel{font-size:10px;color:var(--accent-txt);font-family:var(--font-mono);margin-top:2px;word-break:break-all;opacity:.8}
1101
1101
 
1102
1102
  /* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1103
+ #tab-design.rp-pane.active{
1104
+ display:flex;
1105
+ flex-direction:column;
1106
+ min-height:0;
1107
+ overflow-y:auto;
1108
+ overflow-x:hidden;
1109
+ }
1110
+ #rp-accordion.rp-accordion{
1111
+ flex:1;
1112
+ min-height:0;
1113
+ overflow-y:auto;
1114
+ overflow-x:hidden;
1115
+ }
1116
+ #rp-accordion.rp-accordion::-webkit-scrollbar{width:3px}
1117
+ #rp-accordion.rp-accordion::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
1103
1118
  .acc-section{border-bottom:1px solid var(--border-sub)}
1104
1119
  .acc-hd{
1105
1120
  display:flex;align-items:center;padding:11px 14px;cursor:pointer;
@@ -1228,6 +1243,16 @@ select.pr-inp{cursor:pointer;background:#fff}
1228
1243
  }
1229
1244
  .img-add:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
1230
1245
 
1246
+ /* \u2500\u2500 Video properties panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1247
+ .video-preview{
1248
+ width:100%;height:120px;object-fit:contain;border:1px solid var(--border);
1249
+ border-radius:6px;background:#000;margin-bottom:8px;display:block
1250
+ }
1251
+ .embed-preview{
1252
+ width:100%;aspect-ratio:16/9;border:1px solid var(--border);
1253
+ border-radius:6px;background:#000;margin-bottom:8px;display:block;border:none
1254
+ }
1255
+
1231
1256
  /* \u2500\u2500 Right panel main tabs (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1232
1257
  #main-tabs{
1233
1258
  display:flex;
@@ -1369,9 +1394,56 @@ select.pr-inp{cursor:pointer;background:#fff}
1369
1394
  .history-remove{
1370
1395
  margin-top:2px;
1371
1396
  }
1397
+
1398
+ /* \u2500\u2500 Minimum screen size gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1399
+ #ve-min-screen-notice{
1400
+ display:none;
1401
+ position:fixed;
1402
+ inset:0;
1403
+ z-index:99999;
1404
+ flex-direction:column;
1405
+ align-items:center;
1406
+ justify-content:center;
1407
+ gap:12px;
1408
+ padding:24px;
1409
+ text-align:center;
1410
+ background:#f1f5f9;
1411
+ color:#404040;
1412
+ }
1413
+ #ve-min-screen-notice .ve-min-screen-icon{
1414
+ font-size:40px;
1415
+ color:#737373;
1416
+ line-height:1;
1417
+ }
1418
+ #ve-min-screen-notice .ve-min-screen-title{
1419
+ font-size:18px;
1420
+ font-weight:600;
1421
+ color:#262626;
1422
+ max-width:420px;
1423
+ }
1424
+ #ve-min-screen-notice .ve-min-screen-desc{
1425
+ font-size:14px;
1426
+ color:#737373;
1427
+ max-width:420px;
1428
+ line-height:1.5;
1429
+ }
1430
+ @media (max-width:1100px){
1431
+ #app,
1432
+ #custom-css-modal{
1433
+ display:none!important;
1434
+ }
1435
+ #ve-min-screen-notice{
1436
+ display:flex;
1437
+ }
1438
+ }
1372
1439
  </style>
1373
1440
  </head>
1374
1441
  <body class="mode-editor">
1442
+ <div id="ve-min-screen-notice" aria-live="polite">
1443
+ <div class="ve-min-screen-icon"><i class="bi bi-display"></i></div>
1444
+ <div class="ve-min-screen-title">Please switch to greater or bigger screen to use Visual Editor</div>
1445
+ <div class="ve-min-screen-desc">The Visual Editor requires a screen width of at least 1100px.</div>
1446
+ </div>
1375
1447
  <div id="app">
1376
1448
  <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
1377
1449
  <div id="toolbar">
@@ -1593,13 +1665,13 @@ select.pr-inp{cursor:pointer;background:#fff}
1593
1665
  <!-- Left-tab controls moved here -->
1594
1666
  <div class="lp-tabs-container section-components-tabs-container">
1595
1667
  <div class="lp-tabs">
1596
- <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
1668
+ <div class="lp-tab active" onclick="switchSectionComponentsTab('components')">Components</div>
1597
1669
  <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
1598
1670
  </div>
1599
1671
  <div class="lp-tab close-section-components-panel collapsed" onclick="toggleSectionComponentsBody()" title="Toggle components list"><i class="bi bi-chevron-down"></i></div>
1600
1672
  </div>
1601
1673
  <div class="lp-body collapsed">
1602
- <div id="tab-components" class="tab-pane"></div>
1674
+ <div id="tab-components" class="tab-pane active"></div>
1603
1675
  <div id="tab-sections" class="tab-pane"></div>
1604
1676
  </div>
1605
1677
  </div>
@@ -1621,15 +1693,33 @@ select.pr-inp{cursor:pointer;background:#fff}
1621
1693
  <div class="ns-icon"><i class="bi bi-cursor-text"></i></div>
1622
1694
  Click any element on the page to edit its properties
1623
1695
  </div>
1624
- <div id="rp-accordion" style="display:none">
1696
+ <div id="rp-accordion" class="rp-accordion" style="display:none">
1625
1697
 
1626
1698
  <!-- Image section \u2014 only shown when an <img> is selected -->
1627
- <div class="acc-section open" id="acc-image" style="display:none">
1699
+ <div class="acc-section" id="acc-image" style="display:none">
1628
1700
  <div class="acc-hd" onclick="toggleAcc('image')">Image<i class="bi bi-chevron-right acc-arrow"></i></div>
1629
1701
  <div class="acc-body" id="acc-body-image"></div>
1630
1702
  </div>
1631
1703
 
1632
- <div class="acc-section open" id="acc-content">
1704
+ <!-- Video section \u2014 only shown when a <video> is selected -->
1705
+ <div class="acc-section" id="acc-video" style="display:none">
1706
+ <div class="acc-hd" onclick="toggleAcc('video')">Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1707
+ <div class="acc-body" id="acc-body-video"></div>
1708
+ </div>
1709
+
1710
+ <!-- YouTube section \u2014 only shown when a YouTube iframe is selected -->
1711
+ <div class="acc-section" id="acc-youtube" style="display:none">
1712
+ <div class="acc-hd" onclick="toggleAcc('youtube')">YouTube Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1713
+ <div class="acc-body" id="acc-body-youtube"></div>
1714
+ </div>
1715
+
1716
+ <!-- Vimeo section \u2014 only shown when a Vimeo iframe is selected -->
1717
+ <div class="acc-section" id="acc-vimeo" style="display:none">
1718
+ <div class="acc-hd" onclick="toggleAcc('vimeo')">Vimeo Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1719
+ <div class="acc-body" id="acc-body-vimeo"></div>
1720
+ </div>
1721
+
1722
+ <div class="acc-section" id="acc-content">
1633
1723
  <div class="acc-hd" onclick="toggleAcc('content')">HTML Content<i class="bi bi-chevron-right acc-arrow"></i></div>
1634
1724
  <div class="acc-body" id="acc-body-content"></div>
1635
1725
  </div>
@@ -1811,27 +1901,91 @@ function renderCroSectionThumb(sec) {
1811
1901
  }
1812
1902
 
1813
1903
  var BASE_COMPONENTS = [
1814
- { name:'Heading', icon:'bi-type-h1', defaultAccSection:'typography', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
1815
- { name:'Paragraph', icon:'bi-paragraph', defaultAccSection:'typography', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
1904
+ { name:'Heading', icon:'bi-type-h1', defaultAccSection:'content', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
1905
+ { name:'Paragraph', icon:'bi-paragraph', defaultAccSection:'content', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
1816
1906
  { name:'Image', icon:'bi-image', defaultAccSection:'image', html:'<img src="https://placehold.co/600x300/1a1a2e/a78bfa?text=Image" alt="Image" style="display:block;max-width:100%;height:auto;border-radius:8px">' },
1817
- { name:'Button', icon:'bi-hand-index', defaultAccSection:'background', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
1818
- { name:'Link', icon:'bi-link-45deg', defaultAccSection:'typography', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
1907
+ { name:'Button', icon:'bi-hand-index', defaultAccSection:'content', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
1908
+ { name:'Link', icon:'bi-link-45deg', defaultAccSection:'content', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
1819
1909
  { name:'Divider', icon:'bi-dash-lg', defaultAccSection:'background', html:'<hr style="margin:16px 0;border:none;border-top:1px solid #e2e8f0">' },
1820
- { name:'List', icon:'bi-list-ul', defaultAccSection:'typography', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
1821
- { name:'Video', icon:'bi-play-circle', defaultAccSection:'content', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
1822
- { name:'Youtube Video', icon:'bi-youtube', defaultAccSection:'content', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1823
- { name:'Vimeo Video', icon:'bi-vimeo', defaultAccSection:'content', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1910
+ { name:'List', icon:'bi-list-ul', defaultAccSection:'content', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
1911
+ { name:'Video', icon:'bi-play-circle', defaultAccSection:'video', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
1912
+ { name:'Youtube Video', icon:'bi-youtube', defaultAccSection:'youtube', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1913
+ { name:'Vimeo Video', icon:'bi-vimeo', defaultAccSection:'vimeo', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1824
1914
  { name:'Form', icon:'bi-ui-radios', defaultAccSection:'content', html:'<form style="padding:16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;max-width:400px;box-sizing:border-box"><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Name</label><input type="text" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Email</label><input type="email" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><button type="submit" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Submit</button></form>' },
1825
- { name:'Input', icon:'bi-input-cursor-text', defaultAccSection:'size', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
1826
- { name:'Textarea', icon:'bi-textarea-resize', defaultAccSection:'size', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
1827
- { name:'Select', icon:'bi-menu-button-wide', defaultAccSection:'size', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
1828
- { name:'Card', icon:'bi-card-text', defaultAccSection:'shadow', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
1829
- { name:'Alert', icon:'bi-exclamation-triangle', defaultAccSection:'background', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
1830
- { name:'Badge', icon:'bi-tag', defaultAccSection:'typography', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
1915
+ { name:'Input', icon:'bi-input-cursor-text', defaultAccSection:'content', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
1916
+ { name:'Textarea', icon:'bi-textarea-resize', defaultAccSection:'content', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
1917
+ { name:'Select', icon:'bi-menu-button-wide', defaultAccSection:'content', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
1918
+ { name:'Card', icon:'bi-card-text', defaultAccSection:'content', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
1919
+ { name:'Alert', icon:'bi-exclamation-triangle', defaultAccSection:'content', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
1920
+ { name:'Badge', icon:'bi-tag', defaultAccSection:'content', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
1831
1921
  { name:'Container', icon:'bi-layout-three-columns', defaultAccSection:'spacing', html:'<div style="width:100%;max-width:960px;margin:0 auto;padding:16px;box-sizing:border-box"><div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 1</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 2</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 3</p></div></div></div>' },
1832
1922
  { name:'2 Cols', icon:'bi-layout-split', defaultAccSection:'spacing', html:'<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;box-sizing:border-box"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Left column</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Right column</p></div></div>' },
1833
1923
  ];
1834
1924
 
1925
+ var baseComponentAccRegistry = null;
1926
+
1927
+ function buildBaseComponentAccRegistry() {
1928
+ if (baseComponentAccRegistry) return baseComponentAccRegistry;
1929
+ var matchers = [];
1930
+ var tagFallback = {};
1931
+
1932
+ BASE_COMPONENTS.forEach(function(comp) {
1933
+ var section = comp.defaultAccSection || 'content';
1934
+ var html = String(comp.html || '').trim();
1935
+ if (!html) return;
1936
+ var tagMatch = html.match(/^<([a-z0-9-]+)/i);
1937
+ if (!tagMatch) return;
1938
+ var rootTag = tagMatch[1].toLowerCase();
1939
+ var matcher = { tag: rootTag, section: section };
1940
+
1941
+ if (rootTag === 'div') {
1942
+ if (html.indexOf('role="alert"') >= 0) matcher.role = 'alert';
1943
+ else if (html.indexOf('repeat(2') >= 0) matcher.gridCols = 2;
1944
+ else if (html.indexOf('repeat(3') >= 0) matcher.gridCols = 3;
1945
+ }
1946
+
1947
+ if (matcher.role || matcher.gridCols) matchers.push(matcher);
1948
+ else if (tagFallback[rootTag] === undefined) tagFallback[rootTag] = section;
1949
+ });
1950
+
1951
+ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(tag) {
1952
+ if (tagFallback[tag] === undefined) tagFallback[tag] = tagFallback.h2 || 'content';
1953
+ });
1954
+ if (tagFallback.ol === undefined) tagFallback.ol = tagFallback.ul || 'content';
1955
+
1956
+ baseComponentAccRegistry = { matchers: matchers, tagFallback: tagFallback };
1957
+ return baseComponentAccRegistry;
1958
+ }
1959
+
1960
+ function matchesBaseComponentAccMatcher(el, matcher) {
1961
+ if (!el || !matcher || el.tagName.toLowerCase() !== matcher.tag) return false;
1962
+ if (matcher.role) return el.getAttribute('role') === matcher.role;
1963
+ if (matcher.gridCols) {
1964
+ var style = (el.getAttribute('style') || '').toLowerCase();
1965
+ return style.indexOf('grid-template-columns') >= 0 &&
1966
+ style.indexOf('repeat(' + matcher.gridCols) >= 0;
1967
+ }
1968
+ return true;
1969
+ }
1970
+
1971
+ function getTypeDefaultAccSection(el) {
1972
+ if (!el) return 'content';
1973
+ if (isYoutubeVideoElement(el)) return 'youtube';
1974
+ if (isVimeoVideoElement(el)) return 'vimeo';
1975
+
1976
+ var registry = buildBaseComponentAccRegistry();
1977
+ var i;
1978
+ for (i = 0; i < registry.matchers.length; i++) {
1979
+ if (matchesBaseComponentAccMatcher(el, registry.matchers[i])) {
1980
+ return registry.matchers[i].section;
1981
+ }
1982
+ }
1983
+
1984
+ var tag = el.tagName.toLowerCase();
1985
+ if (registry.tagFallback[tag]) return registry.tagFallback[tag];
1986
+ return 'content';
1987
+ }
1988
+
1835
1989
  // \u2500\u2500 PostMessage bridge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
1836
1990
  var CHANNEL = 'vvveb-bridge';
1837
1991
 
@@ -2541,6 +2695,9 @@ function toggleSectionComponentsBody() {
2541
2695
  if (!body) return;
2542
2696
  var collapsed = body.classList.toggle('collapsed');
2543
2697
  if (toggle) toggle.classList.toggle('collapsed', collapsed);
2698
+ if (!collapsed) {
2699
+ switchSectionComponentsTab(currentSectionComponentsTab || 'components');
2700
+ }
2544
2701
  }
2545
2702
 
2546
2703
  function toggleSectionComponentsPanel(forceVisible) {
@@ -2570,24 +2727,97 @@ function handleAddElementClick(e) {
2570
2727
  }
2571
2728
 
2572
2729
  // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
2730
+ function closeAllAccSections(exceptName) {
2731
+ var sections = document.querySelectorAll('#rp-accordion .acc-section');
2732
+ for (var i = 0; i < sections.length; i++) {
2733
+ var sec = sections[i];
2734
+ var id = sec.id || '';
2735
+ var name = id.replace(/^acc-/, '');
2736
+ if (exceptName && name === exceptName) continue;
2737
+ sec.classList.remove('open');
2738
+ }
2739
+ }
2740
+
2741
+ function getRpAccordion() {
2742
+ return document.getElementById('rp-accordion');
2743
+ }
2744
+
2745
+ function scrollRpAccordionContainerToTop() {
2746
+ var accordion = getRpAccordion();
2747
+ if (!accordion) return;
2748
+
2749
+ try {
2750
+ accordion.scrollIntoView({ block: 'start', inline: 'nearest' });
2751
+ } catch(_) {
2752
+ try { accordion.scrollIntoView(true); } catch(__) {}
2753
+ }
2754
+
2755
+ var node = accordion.parentElement;
2756
+ while (node) {
2757
+ try {
2758
+ var style = window.getComputedStyle(node);
2759
+ var canScroll = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
2760
+ node.scrollHeight > node.clientHeight;
2761
+ if (canScroll) {
2762
+ var ar = accordion.getBoundingClientRect();
2763
+ var nr = node.getBoundingClientRect();
2764
+ node.scrollTop = Math.max(0, node.scrollTop + (ar.top - nr.top));
2765
+ break;
2766
+ }
2767
+ } catch(_) {}
2768
+ node = node.parentElement;
2769
+ }
2770
+ }
2771
+
2772
+ function scrollOpenAccSectionIntoView(sec) {
2773
+ var accordion = getRpAccordion();
2774
+ if (!accordion) return;
2775
+ var openSec =
2776
+ (sec && sec.classList.contains('open') && sec.style.display !== 'none')
2777
+ ? sec
2778
+ : accordion.querySelector('.acc-section.open');
2779
+ if (!openSec || openSec.style.display === 'none') return;
2780
+
2781
+ function doScroll() {
2782
+ scrollRpAccordionContainerToTop();
2783
+ var ar = accordion.getBoundingClientRect();
2784
+ var sr = openSec.getBoundingClientRect();
2785
+ accordion.scrollTop = Math.max(0, accordion.scrollTop + (sr.top - ar.top));
2786
+ }
2787
+
2788
+ requestAnimationFrame(function() {
2789
+ doScroll();
2790
+ requestAnimationFrame(function() {
2791
+ doScroll();
2792
+ setTimeout(doScroll, 0);
2793
+ });
2794
+ });
2795
+ }
2796
+
2797
+ function openAccSection(name, options) {
2798
+ if (!name) return null;
2799
+ var sec = document.getElementById('acc-' + name);
2800
+ if (!sec || sec.style.display === 'none') return null;
2801
+ closeAllAccSections(name);
2802
+ sec.classList.add('open');
2803
+ if (!options || options.scroll !== false) scrollOpenAccSectionIntoView(sec);
2804
+ return sec;
2805
+ }
2806
+
2573
2807
  function toggleAcc(name) {
2574
2808
  var sec = document.getElementById('acc-' + name);
2575
- if (sec) sec.classList.toggle('open');
2809
+ if (!sec || sec.style.display === 'none') return;
2810
+ if (sec.classList.contains('open')) {
2811
+ sec.classList.remove('open');
2812
+ return;
2813
+ }
2814
+ openAccSection(name);
2576
2815
  }
2577
2816
 
2578
2817
  function focusDesignAccordionSection(name) {
2579
2818
  if (!name) return;
2580
2819
  if (currentMainTab !== 'design') switchMainTab('design');
2581
- var sec = document.getElementById('acc-' + name);
2582
- if (!sec || sec.style.display === 'none') return;
2583
- sec.classList.add('open');
2584
- requestAnimationFrame(function() {
2585
- try {
2586
- sec.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
2587
- } catch(_) {
2588
- sec.scrollIntoView(true);
2589
- }
2590
- });
2820
+ openAccSection(name);
2591
2821
  }
2592
2822
 
2593
2823
  // \u2500\u2500 Main tab switching (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -2662,6 +2892,7 @@ var PROP_META = {
2662
2892
  'pp-referrerpolicy': {label:'Referrer policy', cssProp:null},
2663
2893
  'pp-src': {label:'Src', cssProp:null},
2664
2894
  'pp-video-src': {label:'Src', cssProp:null},
2895
+ 'pp-video-poster': {label:'Poster', cssProp:null},
2665
2896
  'pp-youtube-id': {label:'YouTube video ID', cssProp:null},
2666
2897
  'pp-vimeo-id': {label:'Vimeo video ID', cssProp:null},
2667
2898
  'pp-alt': {label:'Alt', cssProp:null},
@@ -2697,6 +2928,7 @@ function getOriginalValue(inputId, el) {
2697
2928
  case 'pp-referrerpolicy': return el.getAttribute('referrerpolicy') || '';
2698
2929
  case 'pp-src': return el.getAttribute('src') || '';
2699
2930
  case 'pp-video-src': return getVideoSrc(el);
2931
+ case 'pp-video-poster': return el.getAttribute('poster') || '';
2700
2932
  case 'pp-youtube-id': return getYoutubeVideoId(el);
2701
2933
  case 'pp-vimeo-id': return getVimeoVideoId(el);
2702
2934
  case 'pp-alt': return el.getAttribute('alt') || '';
@@ -2846,6 +3078,7 @@ function revertChangeOnDom(change) {
2846
3078
  case 'pp-referrerpolicy': orig ? el.setAttribute('referrerpolicy', orig) : el.removeAttribute('referrerpolicy'); break;
2847
3079
  case 'pp-src': orig ? el.setAttribute('src', orig) : el.removeAttribute('src'); break;
2848
3080
  case 'pp-video-src': orig ? setVideoSrc(el, orig) : setVideoSrc(el, ''); break;
3081
+ case 'pp-video-poster': orig ? el.setAttribute('poster', orig) : el.removeAttribute('poster'); break;
2849
3082
  case 'pp-youtube-id': orig ? setYoutubeVideoId(el, orig) : setYoutubeVideoId(el, ''); break;
2850
3083
  case 'pp-vimeo-id': orig ? setVimeoVideoId(el, orig) : setVimeoVideoId(el, ''); break;
2851
3084
  case 'pp-alt': orig ? el.setAttribute('alt', orig) : el.removeAttribute('alt'); break;
@@ -3649,20 +3882,13 @@ function handleLoadExperiment(data) {
3649
3882
  ? data.conversionProxyBaseUrl
3650
3883
  : '').trim().replace(/\\/+$/, '');
3651
3884
  var proxyPath = '/api/conversion-proxy';
3652
- // Keep iframe navigation same-origin for DOM access (selection/editing).
3653
- // If conversionProxyBaseUrl is provided, middleware delegates upstream fetches
3654
- // server-side while browser URLs stay local.
3655
- var proxyRoot = proxyPath;
3885
+ var proxyRoot = conversionProxyBaseUrl ? (conversionProxyBaseUrl + proxyPath) : proxyPath;
3656
3886
  var trackingMarkersParam = extraTrackingMarkers.length
3657
3887
  ? '&trackingMarkers=' + encodeURIComponent(JSON.stringify(extraTrackingMarkers))
3658
3888
  : '';
3659
- var conversionProxyBaseUrlParam = conversionProxyBaseUrl
3660
- ? '&conversionProxyBaseUrl=' + encodeURIComponent(conversionProxyBaseUrl)
3661
- : '';
3662
3889
  var proxyUrl = proxyRoot + '?password=' + encodeURIComponent(data.editorPassword || '') +
3663
3890
  '&url=' + encodeURIComponent(pageUrl) +
3664
3891
  '&strictObserverFreeze=' + encodeURIComponent(data && data.strictObserverFreeze ? '1' : '0') +
3665
- conversionProxyBaseUrlParam +
3666
3892
  trackingMarkersParam;
3667
3893
 
3668
3894
  // Parent often re-posts load-experiment when React re-renders (new object identity) or
@@ -4426,6 +4652,8 @@ function stateChangeToChainSet(c) {
4426
4652
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4427
4653
  case 'pp-video-src':
4428
4654
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4655
+ case 'pp-video-poster':
4656
+ return { selector: c.selector, type: 'attribute', attribute: 'poster', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4429
4657
  case 'pp-youtube-id':
4430
4658
  return { selector: c.selector, type: 'attribute', attribute: 'data-youtube-id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4431
4659
  case 'pp-vimeo-id':
@@ -4904,7 +5132,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
4904
5132
  }
4905
5133
 
4906
5134
  // \u2500\u2500 Element selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
4907
- function selectElement(el) {
5135
+ function selectElement(el, options) {
4908
5136
  beginSuppressIframeMutationDirty();
4909
5137
  try {
4910
5138
  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
@@ -4918,7 +5146,7 @@ function selectElement(el) {
4918
5146
  document.getElementById('bc-path').textContent = buildSelector(el);
4919
5147
  document.getElementById('bc-path').style.color = 'var(--accent-txt)';
4920
5148
  document.getElementById('no-sel').style.display = 'none';
4921
- renderRightPanel(el);
5149
+ renderRightPanel(el, options);
4922
5150
  updateSelectionToolbar();
4923
5151
  if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
4924
5152
  var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
@@ -5716,6 +5944,25 @@ function isFormControlElement(el) {
5716
5944
  return tag === 'input' || tag === 'textarea' || tag === 'select';
5717
5945
  }
5718
5946
 
5947
+ function shouldShowInnerContentFields(el) {
5948
+ if (!el || el.nodeType !== 1) return false;
5949
+ var tag = (el.tagName || '').toLowerCase();
5950
+ if (tag === 'input' || tag === 'textarea' || tag === 'video') return false;
5951
+ if (isEmbeddedVideoIframe(el)) return false;
5952
+ return true;
5953
+ }
5954
+
5955
+ function elementHasHtmlChildren(el) {
5956
+ if (!el || el.nodeType !== 1) return false;
5957
+ try {
5958
+ var nodes = el.childNodes;
5959
+ for (var i = 0; i < nodes.length; i++) {
5960
+ if (nodes[i].nodeType === 1) return true;
5961
+ }
5962
+ } catch(_) {}
5963
+ return false;
5964
+ }
5965
+
5719
5966
  function getFormControlValue(el) {
5720
5967
  if (!isFormControlElement(el)) return '';
5721
5968
  try {
@@ -5857,12 +6104,7 @@ function buildAnchorContentFieldsHtml(el) {
5857
6104
  'Rel',
5858
6105
  '<input class="pr-inp" id="pp-rel" type="text" value="'+esc(el.getAttribute('rel')||'')+'" placeholder="noopener noreferrer">'
5859
6106
  ) +
5860
- pr2(
5861
- 'Download',
5862
- '<input class="pr-inp" id="pp-download" type="text" value="'+esc(el.getAttribute('download')||'')+'" placeholder="filename">',
5863
- 'Title',
5864
- '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">'
5865
- ) +
6107
+ pr('Title', '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">') +
5866
6108
  pr2(
5867
6109
  'Hreflang',
5868
6110
  '<input class="pr-inp" id="pp-hreflang" type="text" value="'+esc(el.getAttribute('hreflang')||'')+'" placeholder="en">',
@@ -6082,8 +6324,122 @@ function removeSizesEntry(i) {
6082
6324
  }
6083
6325
  }
6084
6326
 
6327
+ // \u2500\u2500 Video section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6328
+ var _videoEl = null;
6329
+
6330
+ function renderVideoSection(el) {
6331
+ _videoEl = el;
6332
+ var sel = buildSelector(el);
6333
+ var src = getVideoSrc(el);
6334
+ var html = '';
6335
+
6336
+ if (src) {
6337
+ html += '<video class="video-preview" src="'+esc(src)+'" controls muted></video>';
6338
+ }
6339
+
6340
+ html += pr('Src', '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(src)+'" placeholder="https://example.com/video.mp4">');
6341
+ html += pr('Poster', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
6342
+
6343
+ document.getElementById('acc-body-video').innerHTML = html;
6344
+
6345
+ var srcInp = document.getElementById('pp-video-src');
6346
+ if (srcInp) srcInp.addEventListener('input', function() {
6347
+ var orig = getOriginalValue('pp-video-src', el);
6348
+ setVideoSrc(el, srcInp.value);
6349
+ var prev = document.querySelector('.video-preview');
6350
+ if (prev) {
6351
+ prev.src = srcInp.value;
6352
+ prev.style.display = srcInp.value ? '' : 'none';
6353
+ } else if (srcInp.value) {
6354
+ renderVideoSection(el);
6355
+ }
6356
+ logChange(sel, 'pp-video-src', srcInp.value, el, orig);
6357
+ });
6358
+ var posterInp = document.getElementById('pp-video-poster');
6359
+ if (posterInp) posterInp.addEventListener('input', function() {
6360
+ var orig = el.getAttribute('poster') || '';
6361
+ if (posterInp.value) el.setAttribute('poster', posterInp.value);
6362
+ else el.removeAttribute('poster');
6363
+ var prev = document.querySelector('.video-preview');
6364
+ if (prev) prev.poster = posterInp.value;
6365
+ logChange(sel, 'pp-video-poster', posterInp.value, el, orig);
6366
+ });
6367
+ }
6368
+
6369
+ // \u2500\u2500 YouTube / Vimeo section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6370
+ var _youtubeEl = null;
6371
+ var _vimeoEl = null;
6372
+
6373
+ function renderYoutubeSection(el) {
6374
+ _youtubeEl = el;
6375
+ var sel = buildSelector(el);
6376
+ var id = getYoutubeVideoId(el);
6377
+ var html = '';
6378
+
6379
+ if (id) {
6380
+ html += '<iframe class="embed-preview" src="https://www.youtube.com/embed/'+esc(id)+'" title="YouTube video preview" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
6381
+ }
6382
+
6383
+ html += pr('YouTube video ID', '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(id)+'" placeholder="dQw4w9WgXcQ">');
6384
+
6385
+ document.getElementById('acc-body-youtube').innerHTML = html;
6386
+
6387
+ var idInp = document.getElementById('pp-youtube-id');
6388
+ if (idInp) idInp.addEventListener('input', function() {
6389
+ var orig = getOriginalValue('pp-youtube-id', el);
6390
+ setYoutubeVideoId(el, idInp.value);
6391
+ var normalized = normalizeYoutubeVideoId(idInp.value);
6392
+ var prev = document.querySelector('#acc-body-youtube .embed-preview');
6393
+ if (prev) {
6394
+ if (normalized) {
6395
+ prev.src = 'https://www.youtube.com/embed/' + normalized;
6396
+ prev.style.display = '';
6397
+ } else {
6398
+ prev.style.display = 'none';
6399
+ }
6400
+ } else if (normalized) {
6401
+ renderYoutubeSection(el);
6402
+ }
6403
+ logChange(sel, 'pp-youtube-id', idInp.value, el, orig);
6404
+ });
6405
+ }
6406
+
6407
+ function renderVimeoSection(el) {
6408
+ _vimeoEl = el;
6409
+ var sel = buildSelector(el);
6410
+ var id = getVimeoVideoId(el);
6411
+ var html = '';
6412
+
6413
+ if (id) {
6414
+ html += '<iframe class="embed-preview" src="https://player.vimeo.com/video/'+esc(id)+'" title="Vimeo video preview" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>';
6415
+ }
6416
+
6417
+ html += pr('Vimeo video ID', '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(id)+'" placeholder="76979871">');
6418
+
6419
+ document.getElementById('acc-body-vimeo').innerHTML = html;
6420
+
6421
+ var idInp = document.getElementById('pp-vimeo-id');
6422
+ if (idInp) idInp.addEventListener('input', function() {
6423
+ var orig = getOriginalValue('pp-vimeo-id', el);
6424
+ setVimeoVideoId(el, idInp.value);
6425
+ var normalized = normalizeVimeoVideoId(idInp.value);
6426
+ var prev = document.querySelector('#acc-body-vimeo .embed-preview');
6427
+ if (prev) {
6428
+ if (normalized) {
6429
+ prev.src = 'https://player.vimeo.com/video/' + normalized;
6430
+ prev.style.display = '';
6431
+ } else {
6432
+ prev.style.display = 'none';
6433
+ }
6434
+ } else if (normalized) {
6435
+ renderVimeoSection(el);
6436
+ }
6437
+ logChange(sel, 'pp-vimeo-id', idInp.value, el, orig);
6438
+ });
6439
+ }
6440
+
6085
6441
  // \u2500\u2500 Right panel rendering (accordion) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6086
- function renderRightPanel(el) {
6442
+ function renderRightPanel(el, options) {
6087
6443
  if (!el) return;
6088
6444
  var cs = el.ownerDocument.defaultView.getComputedStyle(el);
6089
6445
  var tag = el.tagName.toLowerCase();
@@ -6094,17 +6450,51 @@ function renderRightPanel(el) {
6094
6450
  document.getElementById('el-info').style.display = '';
6095
6451
  document.getElementById('rp-accordion').style.display = '';
6096
6452
 
6097
- // \u2500\u2500 Image section (show + auto-open for <img>) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6453
+ // \u2500\u2500 Image / video accordions (show matching section at top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6098
6454
  var imgSec = document.getElementById('acc-image');
6099
6455
  if (tag === 'img') {
6100
6456
  imgSec.style.display = '';
6101
- if (!imgSec.classList.contains('open')) imgSec.classList.add('open');
6102
6457
  renderImageSection(el);
6103
6458
  } else {
6104
6459
  imgSec.style.display = 'none';
6460
+ imgSec.classList.remove('open');
6105
6461
  _imageEl = null;
6106
6462
  }
6107
6463
 
6464
+ var videoSec = document.getElementById('acc-video');
6465
+ if (tag === 'video') {
6466
+ videoSec.style.display = '';
6467
+ renderVideoSection(el);
6468
+ } else {
6469
+ videoSec.style.display = 'none';
6470
+ videoSec.classList.remove('open');
6471
+ _videoEl = null;
6472
+ }
6473
+
6474
+ var youtubeSec = document.getElementById('acc-youtube');
6475
+ if (isYoutubeVideoElement(el)) {
6476
+ youtubeSec.style.display = '';
6477
+ renderYoutubeSection(el);
6478
+ } else {
6479
+ youtubeSec.style.display = 'none';
6480
+ youtubeSec.classList.remove('open');
6481
+ _youtubeEl = null;
6482
+ }
6483
+
6484
+ var vimeoSec = document.getElementById('acc-vimeo');
6485
+ if (isVimeoVideoElement(el)) {
6486
+ vimeoSec.style.display = '';
6487
+ renderVimeoSection(el);
6488
+ } else {
6489
+ vimeoSec.style.display = 'none';
6490
+ vimeoSec.classList.remove('open');
6491
+ _vimeoEl = null;
6492
+ }
6493
+
6494
+ var activeAccSection =
6495
+ (options && options.preferredAccSection) ||
6496
+ getTypeDefaultAccSection(el);
6497
+
6108
6498
  // \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6109
6499
  document.getElementById('acc-body-typography').innerHTML =
6110
6500
  pr('Color', '<input type="color" class="pr-color" id="pp-color" value="'+esc(rgbToHex(cs.color))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:var(--font-mono)">'+esc(cs.color)+'</span>') +
@@ -6210,8 +6600,6 @@ function renderRightPanel(el) {
6210
6600
  if (tag==='img') attrHtml +=
6211
6601
  pr('Src', '<input class="pr-inp" id="pp-src" type="url" value="'+esc(el.getAttribute('src')||'')+'">') +
6212
6602
  pr('Alt', '<input class="pr-inp" id="pp-alt" type="text" value="'+esc(el.getAttribute('alt')||'')+'">');
6213
- if (tag==='textarea') attrHtml +=
6214
- pr('Placeholder', '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'">');
6215
6603
  document.getElementById('acc-body-attributes').innerHTML = attrHtml;
6216
6604
 
6217
6605
  // \u2500\u2500 HTML Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6222,32 +6610,21 @@ function renderRightPanel(el) {
6222
6610
  subLbl('Value') +
6223
6611
  '<textarea class="pr-inp" id="pp-value" style="width:100%;min-height:44px;margin-bottom:8px">'+esc(getFormControlValue(el))+'</textarea>';
6224
6612
  }
6225
- if (tag==='input') {
6613
+ if (tag==='input' || tag==='textarea') {
6226
6614
  contentHtml +=
6227
6615
  subLbl('Placeholder') +
6228
6616
  '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'" style="width:100%;margin-bottom:8px">';
6229
6617
  }
6230
- if (tag==='video') {
6231
- contentHtml +=
6232
- subLbl('Src') +
6233
- '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(getVideoSrc(el))+'" placeholder="https://example.com/video.mp4" style="width:100%;margin-bottom:8px">';
6234
- }
6235
- if (isYoutubeVideoElement(el)) {
6236
- contentHtml +=
6237
- subLbl('YouTube video ID') +
6238
- '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(getYoutubeVideoId(el))+'" placeholder="dQw4w9WgXcQ" style="width:100%;margin-bottom:8px">';
6239
- }
6240
- if (isVimeoVideoElement(el)) {
6241
- contentHtml +=
6242
- subLbl('Vimeo video ID') +
6243
- '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(getVimeoVideoId(el))+'" placeholder="76979871" style="width:100%;margin-bottom:8px">';
6244
- }
6245
- if (tag!=='input' && tag!=='video' && !isEmbeddedVideoIframe(el)) {
6246
- contentHtml +=
6247
- subLbl('Inner Text') +
6248
- '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>' +
6249
- subLbl('Inner HTML') +
6250
- '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
6618
+ if (shouldShowInnerContentFields(el)) {
6619
+ if (elementHasHtmlChildren(el)) {
6620
+ contentHtml +=
6621
+ subLbl('Inner HTML') +
6622
+ '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
6623
+ } else {
6624
+ contentHtml +=
6625
+ subLbl('Inner Text') +
6626
+ '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>';
6627
+ }
6251
6628
  }
6252
6629
  document.getElementById('acc-body-content').innerHTML = contentHtml;
6253
6630
 
@@ -6303,15 +6680,11 @@ function renderRightPanel(el) {
6303
6680
  ['pp-href', function(v){setOptionalAnchorAttr(el,'href',v)}],
6304
6681
  ['pp-target', function(v){setOptionalAnchorAttr(el,'target',v)}],
6305
6682
  ['pp-rel', function(v){setOptionalAnchorAttr(el,'rel',v)}],
6306
- ['pp-download', function(v){setOptionalAnchorAttr(el,'download',v)}],
6307
6683
  ['pp-link-title', function(v){setOptionalAnchorAttr(el,'title',v)}],
6308
6684
  ['pp-hreflang', function(v){setOptionalAnchorAttr(el,'hreflang',v)}],
6309
6685
  ['pp-link-type', function(v){setOptionalAnchorAttr(el,'type',v)}],
6310
6686
  ['pp-referrerpolicy', function(v){setOptionalAnchorAttr(el,'referrerpolicy',v)}],
6311
6687
  ['pp-src', function(v){el.setAttribute('src',v)}],
6312
- ['pp-video-src', function(v){setVideoSrc(el, v)}],
6313
- ['pp-youtube-id', function(v){setYoutubeVideoId(el, v)}],
6314
- ['pp-vimeo-id', function(v){setVimeoVideoId(el, v)}],
6315
6688
  ['pp-alt', function(v){el.setAttribute('alt',v)}],
6316
6689
  ['pp-ph', function(v){el.setAttribute('placeholder',v)}],
6317
6690
  ];
@@ -6339,6 +6712,11 @@ function renderRightPanel(el) {
6339
6712
  }
6340
6713
  });
6341
6714
  wireContentFieldSync(el, sel);
6715
+ requestAnimationFrame(function() {
6716
+ requestAnimationFrame(function() {
6717
+ openAccSection(activeAccSection);
6718
+ });
6719
+ });
6342
6720
  }
6343
6721
 
6344
6722
  function wireContentFieldSync(el, sel) {
@@ -6356,11 +6734,11 @@ function wireContentFieldSync(el, sel) {
6356
6734
  logChange(sel, 'pp-value', valueInp.value, el, orig);
6357
6735
  } else if (changedId === 'pp-text') {
6358
6736
  el.innerText = textInp.value;
6359
- htmlInp.value = el.innerHTML;
6737
+ if (htmlInp) htmlInp.value = el.innerHTML;
6360
6738
  logChange(sel, 'pp-text', textInp.value, el, orig);
6361
6739
  } else {
6362
6740
  el.innerHTML = htmlInp.value;
6363
- textInp.value = el.innerText;
6741
+ if (textInp) textInp.value = el.innerText;
6364
6742
  logChange(sel, 'pp-html', htmlInp.value, el, orig);
6365
6743
  }
6366
6744
  } finally {
@@ -6371,9 +6749,11 @@ function wireContentFieldSync(el, sel) {
6371
6749
  valueInp.addEventListener('input', function() { applyContentChange('pp-value'); });
6372
6750
  valueInp.addEventListener('change', function() { applyContentChange('pp-value'); });
6373
6751
  }
6374
- if (textInp && htmlInp) {
6752
+ if (textInp) {
6375
6753
  textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
6376
6754
  textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
6755
+ }
6756
+ if (htmlInp) {
6377
6757
  htmlInp.addEventListener('input', function() { applyContentChange('pp-html'); });
6378
6758
  htmlInp.addEventListener('change', function() { applyContentChange('pp-html'); });
6379
6759
  }
@@ -7001,10 +7381,11 @@ function insertHtml(html, options) {
7001
7381
  } catch(_) {}
7002
7382
  htmlStr = firstEl.outerHTML;
7003
7383
  }
7004
- if (firstEl) selectElement(firstEl);
7005
- var accSection = options && options.defaultAccSection;
7006
- if (accSection) {
7007
- requestAnimationFrame(function() { focusDesignAccordionSection(accSection); });
7384
+ if (firstEl) {
7385
+ if (currentMainTab !== 'design') switchMainTab('design');
7386
+ selectElement(firstEl, {
7387
+ preferredAccSection: options && options.defaultAccSection,
7388
+ });
7008
7389
  }
7009
7390
  if (activeVarId) {
7010
7391
  var insertRow = {
@@ -7078,7 +7459,9 @@ function renderSidebar(filter) {
7078
7459
  croFiltered.forEach(function(sec) {
7079
7460
  var item = document.createElement('div'); item.className = 'sec-item';
7080
7461
  item.innerHTML = '<div class="sec-thumb">'+renderCroSectionThumb(sec)+'</div><div class="sec-info"><div class="sec-name">'+sec.name+'</div>'+(sec.desc?'<div class="sec-desc">'+sec.desc+'</div>':'')+'</div>';
7081
- item.onclick = function() { insertHtml(sec.html); };
7462
+ item.onclick = function() {
7463
+ insertHtml(sec.html, { defaultAccSection: sec.defaultAccSection || 'content' });
7464
+ };
7082
7465
  secTab.appendChild(item);
7083
7466
  });
7084
7467
  }
@@ -7091,7 +7474,9 @@ function renderSidebar(filter) {
7091
7474
  if (!hasVv) { hasVv = true; var sh = document.createElement('div'); sh.className = 'cg-hdr'; sh.textContent = 'Bootstrap Sections'; secTab.appendChild(sh); }
7092
7475
  var sel = document.createElement('div'); sel.className = 'sec-item';
7093
7476
  sel.innerHTML = '<div class="sec-thumb">\u{1F4D0}</div><div class="sec-info"><div class="sec-name">'+snm+'</div></div>';
7094
- sel.onclick = (function(s){ return function(){ insertHtml(s.html||''); }; })(sec);
7477
+ sel.onclick = (function(s){ return function(){
7478
+ insertHtml(s.html || '', { defaultAccSection: 'content' });
7479
+ }; })(sec);
7095
7480
  secTab.appendChild(sel);
7096
7481
  }
7097
7482
  }