@gemboss/ui 0.36.1 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +441 -0
  2. package/README.md +617 -14
  3. package/catalog/editor.html +45 -25
  4. package/catalog/index.html +5522 -1448
  5. package/gemboss-ui.css +3 -3
  6. package/package.json +11 -2
  7. package/parts/components.css +2 -2
  8. package/parts/core.css +1 -1
  9. package/parts/shell.css +2 -2
  10. package/src/assistant/chat-markdown.ts +7 -4
  11. package/src/assistant.css +1 -1
  12. package/src/auth-field.css +1 -0
  13. package/src/auth-field.tsx +74 -0
  14. package/src/auth-sso-plain.js +1 -0
  15. package/src/auth.css +1 -1
  16. package/src/auth.tsx +64 -1
  17. package/src/brand-gem.tsx +19 -0
  18. package/src/brand.tsx +4 -7
  19. package/src/chat-plain.js +2 -2
  20. package/src/editor/controls.tsx +148 -11
  21. package/src/editor/frame.tsx +8 -4
  22. package/src/editor/index.ts +8 -4
  23. package/src/editor/panel.tsx +44 -14
  24. package/src/editor/repeater.tsx +322 -0
  25. package/src/editor/sortable.tsx +50 -24
  26. package/src/editor/swatch.ts +20 -0
  27. package/src/editor/tiles.tsx +51 -0
  28. package/src/editor-plain.js +1 -1
  29. package/src/editor-repeater.css +1 -0
  30. package/src/editor-tiles.css +1 -0
  31. package/src/editor.css +1 -1
  32. package/src/gemboss-field.css +1 -1
  33. package/src/icons.tsx +11 -0
  34. package/src/index.ts +14 -2
  35. package/src/kit-plain.js +1 -1
  36. package/src/service-switcher-plain.js +1 -1
  37. package/src/service-switcher.css +1 -1
  38. package/src/service-switcher.tsx +119 -35
  39. package/src/services.ts +4 -2
  40. package/src/shell.css +1 -1
  41. package/src/site.css +1 -0
  42. package/src/site.tsx +50 -0
  43. package/src/team-chat-data.ts +79 -0
  44. package/src/team-chat.css +1 -0
  45. package/src/team-chat.tsx +825 -0
  46. package/src/toggle-bar.tsx +60 -0
  47. package/src/ui.css +1 -1
package/catalog/editor.html CHANGED
@@ -8,7 +8,7 @@
8
8
  .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}
9
9
  .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}
10
10
  .cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
11
- <h1>@gemboss/ui 0.36.1 · Editor</h1>
11
+ <h1>@gemboss/ui 0.40.0 · Editor</h1>
12
12
  <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>
13
13
  <h2>React</h2><pre class="cat-api"><code>import &quot;@gemboss/ui/editor.css&quot;;
14
14
  import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from &quot;@gemboss/ui/editor&quot;;
@@ -319,7 +319,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
319
319
  &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;
320
320
  &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;
321
321
  &lt;/InspectorGroup&gt;</code></pre>
322
- <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;Settings&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;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&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;
322
+ <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;Settings&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;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&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 gemboss-ei-help-text&quot; id=&quot;:R18u:&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;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&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 gemboss-ei-help-text&quot; id=&quot;:R19e:&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;Not set&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&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;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&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;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&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;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&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;
323
323
  &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
324
324
  &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;Settings&lt;/button&gt;
325
325
  &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;
@@ -352,13 +352,16 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
352
352
  &lt;/div&gt;
353
353
  &lt;/div&gt;
354
354
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
355
- &lt;label&gt;Columns&lt;/label&gt;
355
+ &lt;div class=&quot;gemboss-ei-lbl&quot;&gt;
356
+ &lt;label&gt;Columns&lt;/label&gt;
357
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
358
+ &lt;/div&gt;
356
359
  &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;
357
360
  &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;
358
361
  &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;
359
362
  &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;
360
363
  &lt;/div&gt;
361
- &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;
364
+ &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R18u:&quot;&gt;Disabled while a change is applied.&lt;/p&gt;
362
365
  &lt;/div&gt;
363
366
  &lt;/div&gt;
364
367
  &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
@@ -386,7 +389,10 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
386
389
  &lt;/div&gt;
387
390
  &lt;/div&gt;
388
391
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
389
- &lt;label&gt;Margin&lt;/label&gt;
392
+ &lt;div class=&quot;gemboss-ei-lbl&quot;&gt;
393
+ &lt;label&gt;Margin&lt;/label&gt;
394
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
395
+ &lt;/div&gt;
390
396
  &lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;
391
397
  &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
392
398
  &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;
@@ -405,7 +411,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
405
411
  &lt;span&gt;L&lt;/span&gt;
406
412
  &lt;/div&gt;
407
413
  &lt;/div&gt;
408
- &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;
414
+ &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19e:&quot;&gt;Empty edges follow desktop.&lt;/p&gt;
409
415
  &lt;/div&gt;
410
416
  &lt;/div&gt;
411
417
  &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
@@ -415,16 +421,20 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
415
421
  &lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;
416
422
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
417
423
  &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;
418
- &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;
424
+ &lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;
419
425
  &lt;/div&gt;
420
426
  &lt;/div&gt;
421
427
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
422
- &lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;
428
+ &lt;div class=&quot;gemboss-ei-lbl&quot;&gt;
429
+ &lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;
430
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
431
+ &lt;/div&gt;
423
432
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
424
- &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;
425
- &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;
433
+ &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;
434
+ &lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;
435
+ &lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;
426
436
  &lt;/div&gt;
427
- &lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
437
+ &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
428
438
  &lt;/div&gt;
429
439
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
430
440
  &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;
@@ -442,8 +452,8 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
442
452
  &lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;
443
453
  &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;
444
454
  &lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;
445
- &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;
446
- &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;
455
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;
456
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;
447
457
  &lt;/div&gt;
448
458
  &lt;/div&gt;
449
459
  &lt;/div&gt;
@@ -465,7 +475,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
465
475
  &lt;/aside&gt;
466
476
  &lt;/div&gt;
467
477
  &lt;/div&gt;</code></pre></details></figure>
468
- <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;Settings&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;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&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;
478
+ <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;Settings&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;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&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 gemboss-ei-help-text&quot; id=&quot;:R18u:&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;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&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 gemboss-ei-help-text&quot; id=&quot;:R19e:&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;Not set&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;div class=&quot;gemboss-ei-lbl&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;&lt;/div&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;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&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;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn&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;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&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;
469
479
  &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
470
480
  &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;Settings&lt;/button&gt;
471
481
  &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;
@@ -498,13 +508,16 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
498
508
  &lt;/div&gt;
499
509
  &lt;/div&gt;
500
510
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
501
- &lt;label&gt;Columns&lt;/label&gt;
511
+ &lt;div class=&quot;gemboss-ei-lbl&quot;&gt;
512
+ &lt;label&gt;Columns&lt;/label&gt;
513
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Columns&quot; aria-describedby=&quot;:R18u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
514
+ &lt;/div&gt;
502
515
  &lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;
503
516
  &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;
504
517
  &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;
505
518
  &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;
506
519
  &lt;/div&gt;
507
- &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;
520
+ &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R18u:&quot;&gt;Disabled while a change is applied.&lt;/p&gt;
508
521
  &lt;/div&gt;
509
522
  &lt;/div&gt;
510
523
  &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
@@ -532,7 +545,10 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
532
545
  &lt;/div&gt;
533
546
  &lt;/div&gt;
534
547
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
535
- &lt;label&gt;Margin&lt;/label&gt;
548
+ &lt;div class=&quot;gemboss-ei-lbl&quot;&gt;
549
+ &lt;label&gt;Margin&lt;/label&gt;
550
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Margin&quot; aria-describedby=&quot;:R19e:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
551
+ &lt;/div&gt;
536
552
  &lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;
537
553
  &lt;div class=&quot;gemboss-ei-edge&quot;&gt;
538
554
  &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;
@@ -551,7 +567,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
551
567
  &lt;span&gt;L&lt;/span&gt;
552
568
  &lt;/div&gt;
553
569
  &lt;/div&gt;
554
- &lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;
570
+ &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19e:&quot;&gt;Empty edges follow desktop.&lt;/p&gt;
555
571
  &lt;/div&gt;
556
572
  &lt;/div&gt;
557
573
  &lt;div class=&quot;gemboss-ei-grp&quot;&gt;
@@ -561,16 +577,20 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
561
577
  &lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;
562
578
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
563
579
  &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;
564
- &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;
580
+ &lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;#f4efe6&quot;/&gt;
565
581
  &lt;/div&gt;
566
582
  &lt;/div&gt;
567
583
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
568
- &lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;
584
+ &lt;div class=&quot;gemboss-ei-lbl&quot;&gt;
585
+ &lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;
586
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-help&quot; aria-label=&quot;About Overlay&quot; aria-describedby=&quot;:R19u:&quot; aria-expanded=&quot;false&quot;&gt;?&lt;/button&gt;
587
+ &lt;/div&gt;
569
588
  &lt;div class=&quot;gemboss-ei-color&quot;&gt;
570
- &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;
571
- &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;
589
+ &lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;Kept as written: the swatch picks 6-digit hex colors only.&quot; aria-describedby=&quot;:Rb9u:&quot; value=&quot;#000000&quot;/&gt;
590
+ &lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Not set&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;
591
+ &lt;p id=&quot;:Rb9u:&quot; class=&quot;gemboss-ei-color-why&quot;&gt;Kept as written: the swatch picks 6-digit hex colors only.&lt;/p&gt;
572
592
  &lt;/div&gt;
573
- &lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
593
+ &lt;p class=&quot;gemboss-ei-hint gemboss-ei-help-text&quot; id=&quot;:R19u:&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;
574
594
  &lt;/div&gt;
575
595
  &lt;div class=&quot;gemboss-ei-fld&quot;&gt;
576
596
  &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;
@@ -588,8 +608,8 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
588
608
  &lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;
589
609
  &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;
590
610
  &lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;
591
- &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;
592
- &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;
611
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;
612
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;
593
613
  &lt;/div&gt;
594
614
  &lt;/div&gt;
595
615
  &lt;/div&gt;