@gemboss/ui 0.12.0 → 0.21.0

package/catalog/editor.html

@@ -0,0 +1,611 @@
+<!doctype html><html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>@gemboss/ui editor</title><link rel="stylesheet" href="../gemboss-ui.css"><style>body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text);font-family:var(--gemboss-font-sans)}
+.cat{max-width:1340px;margin:0 auto;padding:32px 24px}.cat h1{margin:0 0 4px;font-size:28px}.cat>p{margin:0 0 16px;color:var(--gemboss-text-muted);max-width:820px}
+.cat h2{margin:32px 0 8px;font-size:20px;font-weight:650}
+.cat-demo{margin:0 0 16px;background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden}
+.cat-demo figcaption{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--gemboss-divider)}
+.cat-wide{overflow-x:auto}.cat-wide iframe{display:block;border:0}
+.cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
+.cat-code pre,.cat-api{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5;border-radius:0}
+.cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
+<h1>@gemboss/ui 0.21.0 · Editor</h1>
+<p>Khung của mọi editor: <code>EditorFrame</code> (cột trái · khe kéo · preview · cột phải dock trên mép phải preview) và <code>EditorTopbar</code> (← · tiêu đề · cụm giữa · cụm phải · dòng trạng thái). Là đúng khung của theme / page / section editor trong admin. Gói chỉ vẽ KHUNG; chat, Configure, canvas, page picker, menu, Publish là của editor, đi vào bằng slot. Trang HTML thuần nạp <code>editor.css</code> + <code>editor-plain.js</code> rồi gọi <code>gembossUI.initEditorFrame()</code>: kéo khe (chuột, chạm, phím mũi tên / Home / End), đổi thiết bị, mở ⋯ và Publish ▾, ẩn cột trái, Chat | Preview trên điện thoại. <a href="index.html">← Catalog</a></p>
+<h2>React</h2><pre class="cat-api"><code>import &quot;@gemboss/ui/editor.css&quot;;
+import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from &quot;@gemboss/ui/editor&quot;;
+
+&lt;EditorFrame
+  top={&lt;EditorTopbar variant=&quot;theme&quot; back={&lt;EditorBack as={Link} href=&quot;/&quot; /&gt;} title=&quot;Builder&quot;
+         chatToggle={&lt;EditorChatToggle collapsed={collapsed} onToggle={toggle} /&gt;} left={&lt;EditorSaveState state=&quot;saved&quot; /&gt;}
+         center={&lt;DeviceToggle device={device} onChange={setDevice} /&gt;} right={&lt;&gt;…⋯ · Publish&lt;/&gt;} /&gt;}
+  split={{ width, min: 300, max, collapsed, onPointerDown, onKeyDown }}
+  left={&lt;div className=&quot;gemboss-ec&quot;&gt;…&lt;/div&gt;} preview={&lt;Canvas /&gt;} right={presetsOpen ? &lt;Presets /&gt; : null}
+  mobilePane={pane}
+&gt;
+  &lt;EditorPaneTabs value={pane} onChange={setPane} labels={{ chat: &quot;Layers&quot; }} /&gt;
+  {drawers}
+&lt;/EditorFrame&gt;</code></pre>
+<h2>HTML thuần</h2><pre class="cat-api"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;…/@gemboss/ui/gemboss-ui.css&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;…/@gemboss/ui/src/editor.css&quot;&gt;
+…the markup below…
+&lt;script src=&quot;…/@gemboss/ui/src/kit-plain.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;…/@gemboss/ui/src/editor-plain.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+  gembossUI.initEditorFrame();
+  gembossUI.initEditorPanel();   // 0.17.0: tabs, groups, Seg, colour, range, edges, image
+  addEventListener(&quot;gemboss:editor-device&quot;, (e) =&gt; setCanvasWidth(e.detail.device));
+  addEventListener(&quot;gemboss:editor-split&quot;, (e) =&gt; save(e.detail.width));
+  addEventListener(&quot;gemboss:editor-edges&quot;, (e) =&gt; save(e.target.dataset.name, e.detail)); // {t, r, b, l}
+&lt;/script&gt;</code></pre>
+<h2>Builder: lớp trái, canvas, preset phải</h2>
+<figure class="cat-demo"><figcaption>1280: kéo khe giữa, bấm ⋯ / ▾ / thiết bị / biểu tượng cột trái</figcaption><div class="cat-wide"><iframe title="1280: kéo khe giữa, bấm ⋯ / ▾ / thiết bị / biểu tượng cột trái" style="width:1280px;height:560px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;&lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;&lt;/line&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;&lt;div class=&quot;gemboss-editor-overflow&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Duplicate&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Export HTML&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Delete&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-publish&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Deploy preview&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Publish live&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-editor-dock&quot;&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;b&gt;Presets&lt;/b&gt;&lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
+  &lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;
+    &lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;
+      &lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;
+      &lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;
+        &lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+          &lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;
+        &lt;/rect&gt;
+        &lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;
+      &lt;/line&gt;
+      &lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;
+    &lt;/rect&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;
+&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;
+  &lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;
+      &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;
+      &lt;/rect&gt;
+      &lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;
+    &lt;/line&gt;
+    &lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;
+  &lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;
+  &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+    &lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;
+  &lt;/rect&gt;
+  &lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;
+&lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;
+  &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+    &lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;
+  &lt;/rect&gt;
+  &lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;
+&lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;
+  &lt;div class=&quot;gemboss-editor-overflow&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;
+    &lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Duplicate&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Export HTML&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;
+      &lt;/div&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Delete&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-publish&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;
+    &lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;
+      &lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Deploy preview&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Publish live&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/header&gt;
+&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;
+  &lt;div class=&quot;gemboss-ec&quot;&gt;
+    &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
+      &lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;
+      &lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;
+    &lt;div class=&quot;gemboss-editor-dock&quot;&gt;
+      &lt;div style=&quot;padding:16px&quot;&gt;
+        &lt;b&gt;Presets&lt;/b&gt;
+        &lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;
+  &lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;
+  &lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;</code></pre></details></figure>
+<figure class="cat-demo"><figcaption>390: hai hàng trên topbar, Layers | Preview ở đáy</figcaption><div class="cat-wide"><iframe title="390: hai hàng trên topbar, Layers | Preview ở đáy" style="width:390px;height:700px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;&lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;&lt;/line&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;&lt;div class=&quot;gemboss-editor-overflow&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Duplicate&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Export HTML&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Delete&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-publish&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Deploy preview&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Publish live&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-editor-dock&quot;&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;b&gt;Presets&lt;/b&gt;&lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
+  &lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;
+    &lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;
+      &lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;
+      &lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;
+        &lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+          &lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;
+        &lt;/rect&gt;
+        &lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;
+      &lt;/line&gt;
+      &lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;
+    &lt;/rect&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;
+&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;
+  &lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;
+      &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;
+      &lt;/rect&gt;
+      &lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;
+    &lt;/line&gt;
+    &lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;
+  &lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;
+  &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+    &lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;
+  &lt;/rect&gt;
+  &lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;
+&lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;
+  &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+    &lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;
+  &lt;/rect&gt;
+  &lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;
+&lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;
+  &lt;div class=&quot;gemboss-editor-overflow&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;
+    &lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Duplicate&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Export HTML&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;
+      &lt;/div&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Delete&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-publish&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;
+    &lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;
+      &lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Deploy preview&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;
+        &lt;span&gt;Publish live&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/header&gt;
+&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;
+  &lt;div class=&quot;gemboss-ec&quot;&gt;
+    &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
+      &lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;
+      &lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;
+    &lt;div class=&quot;gemboss-editor-dock&quot;&gt;
+      &lt;div style=&quot;padding:16px&quot;&gt;
+        &lt;b&gt;Presets&lt;/b&gt;
+        &lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;
+  &lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;
+  &lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;</code></pre></details></figure>
+<h2>Thanh của page / section editor</h2>
+<figure class="cat-demo"><figcaption>variant=&quot;page&quot;, 1280</figcaption><div class="cat-wide"><iframe title="variant=&quot;page&quot;, 1280" style="width:1280px;height:420px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-pageedit-top&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Page editor&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-title&quot;&gt;Spring sale&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-kind&quot;&gt;Landing page&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-status&quot;&gt;Draft&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;+ Add section&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish&quot;&gt;Publish&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; style=&quot;--gemboss-chat-w:384px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Chat&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize chat panel&quot; aria-valuenow=&quot;384&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit mobile&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
+  &lt;header class=&quot;gemboss-editor-topbar gemboss-pageedit-top&quot;&gt;
+    &lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;
+      &lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;
+      &lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Page editor&lt;/span&gt;
+      &lt;span class=&quot;gemboss-pageedit-title&quot;&gt;Spring sale&lt;/span&gt;
+      &lt;span class=&quot;gemboss-pageedit-kind&quot;&gt;Landing page&lt;/span&gt;
+      &lt;span class=&quot;gemboss-pageedit-status&quot;&gt;Draft&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;
+      &lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;false&quot;&gt;
+          &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+            &lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;
+          &lt;/rect&gt;
+          &lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;
+        &lt;/line&gt;
+        &lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;
+      &lt;/line&gt;
+    &lt;/svg&gt;
+  &lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;
+    &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+      &lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;
+    &lt;/rect&gt;
+    &lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;
+  &lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;true&quot;&gt;
+  &lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;
+    &lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;
+  &lt;/rect&gt;
+  &lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;
+&lt;/line&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;+ Add section&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish&quot;&gt;Publish&lt;/button&gt;
+&lt;/div&gt;
+&lt;/header&gt;
+&lt;div class=&quot;gemboss-editor-body&quot; style=&quot;--gemboss-chat-w:384px&quot;&gt;
+  &lt;div class=&quot;gemboss-ec&quot;&gt;
+    &lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Chat&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize chat panel&quot; aria-valuenow=&quot;384&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;
+    &lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit mobile&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;</code></pre></details></figure>
+<h2>Bảng cài đặt (0.17.0): PanelTabs, PanelHeader, InspectorGroup, Field, Seg, ColorControl, RangeControl, EdgeBox, ImageControl</h2>
+<p>Đúng bảng Configure của editor trong admin (inspector neo trong cột trái). Bấm tiêu đề nhóm để gập, ←/→ trên hàng tab Content · Design · Advanced, bấm Seg, sửa màu (ô màu ghi vào ô chữ; gradient tắt ô màu), kéo thanh trượt, gõ lề rồi Enter, dán URL ảnh rồi rời ô. Mỗi việc bắn một event <code>gemboss:editor-*</code>.</p>
+<h3>React</h3><pre class="cat-api"><code>import { ColorControl, EdgeBox, Field, ImageControl, InspectorGroup, PanelAction, PanelHeader, PanelTabs, RangeControl, Seg } from &quot;@gemboss/ui/editor&quot;;
+
+&lt;PanelHeader title=&quot;Hero&quot; subtitle=&quot;hero-banner&quot; actions={&lt;PanelAction label=&quot;Duplicate section&quot; onClick={dup}&gt;⧉&lt;/PanelAction&gt;} /&gt;
+&lt;PanelTabs variant=&quot;inspector&quot; value={tab} onChange={setTab} tabs={[{ id: &quot;content&quot;, label: &quot;Content&quot; }, { id: &quot;design&quot;, label: &quot;Design&quot; }]} /&gt;
+&lt;InspectorGroup title=&quot;Layout&quot; note=&quot;all screens&quot; open={open.layout} onOpenChange={(v) =&gt; setOpen({ ...open, layout: v })}&gt;
+  &lt;Field label=&quot;Width&quot;&gt;&lt;Seg label=&quot;Width&quot; value={width} onChange={setWidth} options={[{ value: &quot;full&quot;, label: &quot;Full&quot; }, …]} /&gt;&lt;/Field&gt;
+  &lt;Field label=&quot;Background&quot; htmlFor=&quot;bg&quot;&gt;&lt;ColorControl id=&quot;bg&quot; label=&quot;Background&quot; value={bg} onChange={setBg} /&gt;&lt;/Field&gt;
+  &lt;Field label=&quot;Opacity&quot; htmlFor=&quot;op&quot; labelValue={`${op}%`}&gt;&lt;RangeControl id=&quot;op&quot; min={0} max={100} value={op} onChange={setOp} /&gt;&lt;/Field&gt;
+  &lt;Field label=&quot;Padding&quot;&gt;&lt;EdgeBox label=&quot;Padding&quot; values={pad} onChange={(side, raw) =&gt; …} onCommit={save} /&gt;&lt;/Field&gt;
+  &lt;Field label=&quot;Image&quot; htmlFor=&quot;img&quot;&gt;&lt;ImageControl id=&quot;img&quot; value={url} onChange={setUrl} /&gt;&lt;/Field&gt;
+&lt;/InspectorGroup&gt;</code></pre>
+<figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
+  &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
+    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;
+    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;
+    &lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;
+      &lt;header class=&quot;gemboss-ei-head&quot;&gt;
+        &lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;
+        &lt;/span&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;
+      &lt;/header&gt;
+      &lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;
+        &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;
+        &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;
+        &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;gemboss-ei-body&quot;&gt;
+        &lt;div class=&quot;gemboss-ei-pane&quot;&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;
+            &lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Content width&lt;/label&gt;
+              &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Columns&lt;/label&gt;
+              &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;
+              &lt;/div&gt;
+              &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Padding&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;
+                  &lt;span&gt;T&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;R&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;
+                  &lt;span&gt;B&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;L&lt;/span&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Margin&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;T&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;R&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;B&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;L&lt;/span&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+              &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-color&quot;&gt;
+                &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;
+                &lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-color&quot;&gt;
+                &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;
+                &lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;
+              &lt;/div&gt;
+              &lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;
+              &lt;/label&gt;
+              &lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-img&quot;&gt;
+                &lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;
+                  &lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;
+                  &lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;
+                    &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;
+                    &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;
+                  &lt;/div&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Reveal&lt;/label&gt;
+              &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/aside&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre></details></figure>
+<figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
+  &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
+    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;
+    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;
+    &lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;
+      &lt;header class=&quot;gemboss-ei-head&quot;&gt;
+        &lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;
+        &lt;/span&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;
+      &lt;/header&gt;
+      &lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;
+        &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;
+        &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;
+        &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;gemboss-ei-body&quot;&gt;
+        &lt;div class=&quot;gemboss-ei-pane&quot;&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;
+            &lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Content width&lt;/label&gt;
+              &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Columns&lt;/label&gt;
+              &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;
+              &lt;/div&gt;
+              &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Padding&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;
+                  &lt;span&gt;T&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;R&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;
+                  &lt;span&gt;B&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;L&lt;/span&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Margin&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;T&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;R&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;B&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
+                  &lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;
+                  &lt;span&gt;L&lt;/span&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+              &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-color&quot;&gt;
+                &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;
+                &lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-color&quot;&gt;
+                &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;
+                &lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;
+              &lt;/div&gt;
+              &lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;
+              &lt;/label&gt;
+              &lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;
+              &lt;div class=&quot;gemboss-ei-img&quot;&gt;
+                &lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;
+                &lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;
+                  &lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;
+                  &lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;
+                    &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;
+                    &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;
+                  &lt;/div&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
+            &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;
+              &lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;
+            &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
+              &lt;label&gt;Reveal&lt;/label&gt;
+              &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;
+                &lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/aside&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre></details></figure>
+</div></body></html>