@gemboss/ui 0.32.0 → 0.33.4

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.
@@ -27,7 +27,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
27
27
  @media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
28
28
  </style></head><body>
29
29
  <div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#auth">Đăng nhập</a><a href="#setup">Hướng dẫn thiết lập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#action-card">Thẻ hành động</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant-bridge">Trợ lý: cầu nối trên máy (0.32.0)</a><a href="#assistant-chat">Trợ lý: khung chat (0.29.0)</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
30
- <main><header class="cat-head"><h1>@gemboss/ui 0.32.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>749fece68d29</code>.</p></header>
30
+ <main><header class="cat-head"><h1>@gemboss/ui 0.33.4</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>4ca04c7a0d43</code>.</p></header>
31
31
  <section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
32
32
  <section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code>&lt;button&gt;</code> lẫn <code>&lt;a&gt;</code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
33
33
  &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Lưu nháp&lt;/button&gt;
@@ -1710,8 +1710,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1710
1710
  &lt;p class=&quot;ui-list__sub&quot;&gt;content-radar · 6 min read · 03/10/2026&lt;/p&gt;
1711
1711
  &lt;/div&gt;
1712
1712
  &lt;/li&gt;
1713
- &lt;/ul&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list chọn được (0.16.0, React <code>SelectableResourceList</code>, đang chọn 2): checkbox đầu khe media; thanh hành động là header của list, có từ đầu ("0 selected", nút tắt) nên tích ô đầu không đẩy hàng; Shift+click chọn dải; Escape bỏ chọn; bấm hàng vẫn mở chi tiết</figcaption><div class="cat-live"><div class="ui-resource"><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Shortlist</button><button type="button" class="ui-btn ui-btn--sm">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-resource&quot;&gt;
1714
- &lt;div class=&quot;ui-bulkbar&quot;&gt;
1713
+ &lt;/ul&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list chọn được (0.16.0, React <code>SelectableResourceList</code>, đang chọn 2): checkbox đầu khe media; thanh hành động là header của list, có từ đầu ("0 selected", nút tắt) nên tích ô đầu không đẩy hàng; Shift+click chọn dải; Escape bỏ chọn; bấm hàng vẫn mở chi tiết</figcaption><div class="cat-live"><div class="ui-resource"><div class="ui-bulkbar" data-fit="pending"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Shortlist</button><button type="button" class="ui-btn ui-btn--sm">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button></span><span class="ui-bulkbar__measure" aria-hidden="true"><span class="ui-btn ui-btn--sm">Shortlist</span><span class="ui-btn ui-btn--sm">Compare</span><span class="ui-btn ui-btn--sm ui-btn--critical">Not fit</span><span class="ui-btn ui-btn--icon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg></span></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-resource&quot;&gt;
1714
+ &lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;
1715
1715
  &lt;label class=&quot;ui-table__checkbox&quot;&gt;
1716
1716
  &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;
1717
1717
  &lt;/label&gt;
@@ -1721,73 +1721,90 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1721
1721
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/button&gt;
1722
1722
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/button&gt;
1723
1723
  &lt;/span&gt;
1724
- &lt;/div&gt;
1725
- &lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
1726
- &lt;li class=&quot;ui-list__item is-selected&quot;&gt;
1727
- &lt;div class=&quot;ui-list__media&quot;&gt;
1728
- &lt;label class=&quot;ui-list__check&quot;&gt;
1729
- &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot; checked=&quot;&quot;/&gt;
1730
- &lt;/label&gt;
1731
- &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;
1732
- &lt;/div&gt;
1733
- &lt;div class=&quot;ui-list__body&quot;&gt;
1734
- &lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;
1735
- &lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;
1736
- &lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;
1737
- &lt;div class=&quot;ui-list__badges&quot;&gt;
1738
- &lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;
1739
- &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1740
- &lt;/div&gt;
1741
- &lt;/div&gt;
1742
- &lt;div class=&quot;ui-list__aside&quot;&gt;
1743
- &lt;b&gt;82&lt;/b&gt;
1744
- &lt;/div&gt;
1745
- &lt;/li&gt;
1746
- &lt;li class=&quot;ui-list__item&quot;&gt;
1747
- &lt;div class=&quot;ui-list__media&quot;&gt;
1748
- &lt;label class=&quot;ui-list__check&quot;&gt;
1749
- &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;
1750
- &lt;/label&gt;
1751
- &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;
1752
- &lt;/div&gt;
1753
- &lt;div class=&quot;ui-list__body&quot;&gt;
1754
- &lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;
1755
- &lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;
1756
- &lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;
1757
- &lt;div class=&quot;ui-list__badges&quot;&gt;
1758
- &lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;
1759
- &lt;/div&gt;
1760
- &lt;/div&gt;
1761
- &lt;div class=&quot;ui-list__aside&quot;&gt;
1762
- &lt;b&gt;77&lt;/b&gt;
1763
- &lt;/div&gt;
1764
- &lt;/li&gt;
1765
- &lt;li class=&quot;ui-list__item is-selected&quot;&gt;
1766
- &lt;div class=&quot;ui-list__media&quot;&gt;
1767
- &lt;label class=&quot;ui-list__check&quot;&gt;
1768
- &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot; checked=&quot;&quot;/&gt;
1769
- &lt;/label&gt;
1770
- &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;
1724
+ &lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;
1725
+ &lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;
1726
+ &lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;
1727
+ &lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;
1728
+ &lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;
1729
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
1730
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
1731
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
1732
+ &lt;/circle&gt;
1733
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
1734
+ &lt;/circle&gt;
1735
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
1736
+ &lt;/circle&gt;
1737
+ &lt;/g&gt;
1738
+ &lt;/svg&gt;
1739
+ &lt;/span&gt;
1740
+ &lt;/span&gt;
1741
+ &lt;/div&gt;
1742
+ &lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
1743
+ &lt;li class=&quot;ui-list__item is-selected&quot;&gt;
1744
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1745
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1746
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot; checked=&quot;&quot;/&gt;
1747
+ &lt;/label&gt;
1748
+ &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;
1749
+ &lt;/div&gt;
1750
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1751
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;
1752
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;
1753
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;
1754
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1755
+ &lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;
1756
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1771
1757
  &lt;/div&gt;
1772
- &lt;div class=&quot;ui-list__body&quot;&gt;
1773
- &lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;
1774
- &lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;
1775
- &lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;
1776
- &lt;div class=&quot;ui-list__badges&quot;&gt;
1777
- &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
1778
- &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
1779
- &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1780
- &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
1781
- &lt;/div&gt;
1758
+ &lt;/div&gt;
1759
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1760
+ &lt;b&gt;82&lt;/b&gt;
1761
+ &lt;/div&gt;
1762
+ &lt;/li&gt;
1763
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1764
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1765
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1766
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;
1767
+ &lt;/label&gt;
1768
+ &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;
1769
+ &lt;/div&gt;
1770
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1771
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;
1772
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;
1773
+ &lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;
1774
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1775
+ &lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;
1782
1776
  &lt;/div&gt;
1783
- &lt;div class=&quot;ui-list__aside&quot;&gt;
1784
- &lt;b&gt;64&lt;/b&gt;
1777
+ &lt;/div&gt;
1778
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1779
+ &lt;b&gt;77&lt;/b&gt;
1780
+ &lt;/div&gt;
1781
+ &lt;/li&gt;
1782
+ &lt;li class=&quot;ui-list__item is-selected&quot;&gt;
1783
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1784
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1785
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot; checked=&quot;&quot;/&gt;
1786
+ &lt;/label&gt;
1787
+ &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;
1788
+ &lt;/div&gt;
1789
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1790
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;
1791
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;
1792
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;
1793
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1794
+ &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
1795
+ &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
1796
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1797
+ &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
1785
1798
  &lt;/div&gt;
1786
- &lt;/li&gt;
1787
- &lt;/ul&gt;
1788
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" 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/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-resource&quot;&gt;&lt;div class=&quot;ui-bulkbar&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;82&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;77&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;64&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1799
+ &lt;/div&gt;
1800
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1801
+ &lt;b&gt;64&lt;/b&gt;
1802
+ &lt;/div&gt;
1803
+ &lt;/li&gt;
1804
+ &lt;/ul&gt;
1805
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" 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/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-resource&quot;&gt;&lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;82&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;77&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;64&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1789
1806
  &lt;div class=&quot;ui-resource&quot;&gt;
1790
- &lt;div class=&quot;ui-bulkbar&quot;&gt;
1807
+ &lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;
1791
1808
  &lt;label class=&quot;ui-table__checkbox&quot;&gt;
1792
1809
  &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;
1793
1810
  &lt;/label&gt;
@@ -1797,71 +1814,88 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1797
1814
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;
1798
1815
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;
1799
1816
  &lt;/span&gt;
1817
+ &lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;
1818
+ &lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;
1819
+ &lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;
1820
+ &lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;
1821
+ &lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;
1822
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
1823
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
1824
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
1825
+ &lt;/circle&gt;
1826
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
1827
+ &lt;/circle&gt;
1828
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
1829
+ &lt;/circle&gt;
1830
+ &lt;/g&gt;
1831
+ &lt;/svg&gt;
1832
+ &lt;/span&gt;
1833
+ &lt;/span&gt;
1834
+ &lt;/div&gt;
1835
+ &lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
1836
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1837
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1838
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1839
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;
1840
+ &lt;/label&gt;
1841
+ &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;
1800
1842
  &lt;/div&gt;
1801
- &lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
1802
- &lt;li class=&quot;ui-list__item&quot;&gt;
1803
- &lt;div class=&quot;ui-list__media&quot;&gt;
1804
- &lt;label class=&quot;ui-list__check&quot;&gt;
1805
- &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;
1806
- &lt;/label&gt;
1807
- &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;
1808
- &lt;/div&gt;
1809
- &lt;div class=&quot;ui-list__body&quot;&gt;
1810
- &lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;
1811
- &lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;
1812
- &lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;
1813
- &lt;div class=&quot;ui-list__badges&quot;&gt;
1814
- &lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;
1815
- &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1816
- &lt;/div&gt;
1817
- &lt;/div&gt;
1818
- &lt;div class=&quot;ui-list__aside&quot;&gt;
1819
- &lt;b&gt;82&lt;/b&gt;
1820
- &lt;/div&gt;
1821
- &lt;/li&gt;
1822
- &lt;li class=&quot;ui-list__item&quot;&gt;
1823
- &lt;div class=&quot;ui-list__media&quot;&gt;
1824
- &lt;label class=&quot;ui-list__check&quot;&gt;
1825
- &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;
1826
- &lt;/label&gt;
1827
- &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;
1828
- &lt;/div&gt;
1829
- &lt;div class=&quot;ui-list__body&quot;&gt;
1830
- &lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;
1831
- &lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;
1832
- &lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;
1833
- &lt;div class=&quot;ui-list__badges&quot;&gt;
1834
- &lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;
1835
- &lt;/div&gt;
1836
- &lt;/div&gt;
1837
- &lt;div class=&quot;ui-list__aside&quot;&gt;
1838
- &lt;b&gt;77&lt;/b&gt;
1839
- &lt;/div&gt;
1840
- &lt;/li&gt;
1841
- &lt;li class=&quot;ui-list__item&quot;&gt;
1842
- &lt;div class=&quot;ui-list__media&quot;&gt;
1843
- &lt;label class=&quot;ui-list__check&quot;&gt;
1844
- &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;
1845
- &lt;/label&gt;
1846
- &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;
1847
- &lt;/div&gt;
1848
- &lt;div class=&quot;ui-list__body&quot;&gt;
1849
- &lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;
1850
- &lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;
1851
- &lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;
1852
- &lt;div class=&quot;ui-list__badges&quot;&gt;
1853
- &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
1854
- &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
1855
- &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1856
- &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
1857
- &lt;/div&gt;
1858
- &lt;/div&gt;
1859
- &lt;div class=&quot;ui-list__aside&quot;&gt;
1860
- &lt;b&gt;64&lt;/b&gt;
1861
- &lt;/div&gt;
1862
- &lt;/li&gt;
1863
- &lt;/ul&gt;
1864
- &lt;/div&gt;
1843
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1844
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;
1845
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;
1846
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;
1847
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1848
+ &lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;
1849
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1850
+ &lt;/div&gt;
1851
+ &lt;/div&gt;
1852
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1853
+ &lt;b&gt;82&lt;/b&gt;
1854
+ &lt;/div&gt;
1855
+ &lt;/li&gt;
1856
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1857
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1858
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1859
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;
1860
+ &lt;/label&gt;
1861
+ &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;
1862
+ &lt;/div&gt;
1863
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1864
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;
1865
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;
1866
+ &lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;
1867
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1868
+ &lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;
1869
+ &lt;/div&gt;
1870
+ &lt;/div&gt;
1871
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1872
+ &lt;b&gt;77&lt;/b&gt;
1873
+ &lt;/div&gt;
1874
+ &lt;/li&gt;
1875
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1876
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1877
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1878
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;
1879
+ &lt;/label&gt;
1880
+ &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;
1881
+ &lt;/div&gt;
1882
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1883
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;
1884
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;
1885
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;
1886
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1887
+ &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
1888
+ &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
1889
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1890
+ &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
1891
+ &lt;/div&gt;
1892
+ &lt;/div&gt;
1893
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1894
+ &lt;b&gt;64&lt;/b&gt;
1895
+ &lt;/div&gt;
1896
+ &lt;/li&gt;
1897
+ &lt;/ul&gt;
1898
+ &lt;/div&gt;
1865
1899
  &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng</figcaption><div class="cat-wide"><iframe title="3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng" style="height:420px;width:390px" 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/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--40&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#n1&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;linkedin · cro-agency · Austin, TX · posted 2d ago&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;82&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__actions&quot;&gt;&lt;a href=&quot;#orig&quot; aria-label=&quot;Open original profile&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px&quot;&gt;↗&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#n2&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell UGC Studio · 12,400 followers&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;&lt;span&gt;Runs the ads himself&lt;span style=&quot;display:block;margin-top:4px&quot;&gt;Signals: arcads · heygen · veo 3 · capcut&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-tag&quot;&gt;Hands-on&lt;/span&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Email verified&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;span&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;91&lt;/span&gt;&lt;span class=&quot;ui-sub&quot;&gt;Unverified&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__actions&quot;&gt;&lt;span&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost&quot;&gt;Evidence (3)&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More profiles&quot;&gt;⋯&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;a class=&quot;ui-menu__item&quot; href=&quot;#x&quot;&gt;X ↗&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1866
1900
  &lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;
1867
1901
  &lt;li class=&quot;ui-list__item&quot;&gt;
@@ -5691,7 +5725,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5691
5725
  &lt;/div&gt;
5692
5726
  &lt;/div&gt;
5693
5727
  &lt;/div&gt;</code></pre></details></figure></section>
5694
- <section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">30/8/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;height:360px;display:flex&quot;&gt;
5728
+ <section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">1/9/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;height:360px;display:flex&quot;&gt;
5695
5729
  &lt;aside class=&quot;gemboss-assistant-rail&quot;&gt;
5696
5730
  &lt;div class=&quot;gemboss-assistant-rail-top&quot;&gt;
5697
5731
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-newchat&quot; title=&quot;Phiên mới&quot;&gt;
@@ -5740,7 +5774,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5740
5774
  &lt;/svg&gt;
5741
5775
  &lt;span class=&quot;gemboss-assistant-thread-title&quot;&gt;So sánh advertorial với listicle&lt;/span&gt;
5742
5776
  &lt;/span&gt;
5743
- &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;30/8/2026&lt;/span&gt;
5777
+ &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;1/9/2026&lt;/span&gt;
5744
5778
  &lt;/button&gt;
5745
5779
  &lt;div class=&quot;gemboss-assistant-thread-actions&quot;&gt;
5746
5780
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-thread-act&quot; aria-label=&quot;Options&quot;&gt;