@gemboss/ui 0.32.0 → 0.33.1
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.
- package/CHANGELOG.md +52 -0
- package/README.md +3 -0
- package/catalog/editor.html +1 -1
- package/catalog/index.html +166 -132
- package/gemboss-ui.css +4 -4
- package/package.json +1 -1
- package/parts/components.css +1 -1
- package/parts/core.css +1 -1
- package/parts/shell.css +2 -2
- package/src/collections.css +1 -1
- package/src/editor.css +1 -1
- package/src/index-table.tsx +4 -2
- package/src/resource-list-select.tsx +4 -2
- package/src/selection.tsx +71 -8
- package/src/shell.css +1 -1
- package/src/shell.tsx +88 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,58 @@
|
|
|
2
2
|
|
|
3
3
|
Versions up to 0.9.0 are described in the README, each in the section that introduced it.
|
|
4
4
|
|
|
5
|
+
## 0.33.1 (10/10/2026)
|
|
6
|
+
|
|
7
|
+
**PanelTabs' row (`.gemboss-ec-tabs`) carries what GemFactory patched in its own CSS** (server/ui.mjs "VÁ GÓI: PanelTabs
|
|
8
|
+
cột", 06/10/2026, with "move it into the kit's editor.css" written on it). editor.css.
|
|
9
|
+
|
|
10
|
+
Changed
|
|
11
|
+
- A tab label never wraps: a tab is never narrower than its text (`min-width: max-content`, `nowrap`), the tabs still
|
|
12
|
+
share the row while they fit, and the ROW scrolls sideways when they do not (thin bar, `overscroll-behavior-x:
|
|
13
|
+
contain`). Four tabs with two-word labels in a 240px column broke onto two lines.
|
|
14
|
+
- Hover on an unselected tab (`--gemboss-primary-soft`, text to `--gemboss-text`); keyboard focus draws the `--ui-focus`
|
|
15
|
+
ring (the browser's own before).
|
|
16
|
+
- 44px tall at 767px and below under a mouse too (it was only under `pointer: coarse`).
|
|
17
|
+
|
|
18
|
+
## 0.33.0 (10/10/2026)
|
|
19
|
+
|
|
20
|
+
**The bulk bar stays one row.** talent-radar /pool moved to `SelectableResourceList` (collections PR 6) with five bulk
|
|
21
|
+
actions, and the bar wrapped to three rows at 390 (~150px above the first candidate); its own bar had been one
|
|
22
|
+
scrolling row since 03/10. README "Collections".
|
|
23
|
+
|
|
24
|
+
Changed
|
|
25
|
+
- `BulkBar` (IndexTable, SelectableResourceList): actions that do not fit in the row after the box and the count go into
|
|
26
|
+
a ⋯ `Menu` at its end (`.ui-bulkbar__more`), in order; each action is either a button or a menu row, never both. The
|
|
27
|
+
widths come from a hidden copy of the buttons (`.ui-bulkbar__measure`) in the surface's font, re-measured on resize
|
|
28
|
+
and when the count changes, so the fold follows the real labels (two short actions stay buttons at 320; five long
|
|
29
|
+
ones fold at 768), not a breakpoint. Menu rows are off with nothing selected, like the buttons. Before the first
|
|
30
|
+
measure (`data-fit="pending"`, a server render before hydration) the row does not wrap; the overflow is clipped.
|
|
31
|
+
Plain HTML bars (kit-plain.js) are unchanged.
|
|
32
|
+
|
|
33
|
+
- A linked activity label (`CompactList variant="activity"`, `CompactItem.href`) is text-coloured (underline on hover)
|
|
34
|
+
instead of the browser's blue, and its box is 24px (WCAG 2.5.8) with the row's height unchanged: talent-radar
|
|
35
|
+
/activity had 71 links under 24px at 320 and 390.
|
|
36
|
+
|
|
37
|
+
Added
|
|
38
|
+
- `fitActions(avail, widths, gap, menuW)`: the fold rule, exported for tests.
|
|
39
|
+
- `moreActionsLabel` on `IndexTable` and `SelectableResourceList` (default "More actions").
|
|
40
|
+
|
|
41
|
+
## 0.32.1 (10/10/2026)
|
|
42
|
+
|
|
43
|
+
**Anchors land below the topbar, and at all.** The shell's document scrolls under the fixed 56px `.gemboss-platform-topbar`, so a jump
|
|
44
|
+
to `#section` (or `scrollIntoView()`) parked the section's heading behind the bar. search-radar worked around it with
|
|
45
|
+
`scrollMarginTop: 72` on four sections (`/aeo#changes`, `#gaps`, `#trend`, `/aeo/brand/<x>#evidence`, 08/10/2026).
|
|
46
|
+
|
|
47
|
+
Fixed
|
|
48
|
+
- `:root:has(.gemboss-platform-topbar) { scroll-padding-top: 64px }` in shell.css (56 + 8 of air), only while the bar is on
|
|
49
|
+
the page; a surface without the shell keeps the browser default. A surface's own `scroll-margin-top` on a section can
|
|
50
|
+
go. anchor-scroll.browser.test.ts (real Chromium, 390 and 1280; red without the rule: the heading at 0, under the bar).
|
|
51
|
+
- A hard load of `/page#section` on a streamed page (Next App Router + loading.tsx) now reaches the section. The browser
|
|
52
|
+
looked for the fragment while it sat in React's hidden Suspense block and scrolled nowhere: on search-radar `/aeo#gaps`
|
|
53
|
+
stayed at the top on 5 of 6 loads. `AppShell` keeps the target where a fragment jump puts it while the page is still
|
|
54
|
+
arriving (until 600 ms of a quiet DOM, 5 s at most), and stops the moment the reader scrolls, presses a key, touches or
|
|
55
|
+
clicks. Once per load; client navigations are Next's. Measured on search-radar with this build: 36 of 36 loads land.
|
|
56
|
+
|
|
5
57
|
## 0.32.0 (09/10/2026)
|
|
6
58
|
|
|
7
59
|
**The bridge, once** (assistant sync, Chris 08/10/2026: "mọi service có panel này đồng bộ style + code dùng gemboss ui").
|
package/README.md
CHANGED
|
@@ -1511,6 +1511,9 @@ the admin's first load (`kit-plain-bundles.test.ts` checks the shell import carr
|
|
|
1511
1511
|
its own rule sets its button on `gb:selection`, which fires after). collections-gate reports a list with selection
|
|
1512
1512
|
boxes and no bar (`select-without-bulk`). An open ⋯ menu or dialog takes Escape first; a closed one kept in a row
|
|
1513
1513
|
does not.
|
|
1514
|
+
- **The bulk bar is one row (0.33.0).** Bulk actions that do not fit after the box and the count go into a ⋯ menu at
|
|
1515
|
+
the bar's end, in order (Polaris BulkActions). React measures the real button widths, so the fold follows the labels,
|
|
1516
|
+
not a breakpoint; pass every action and let the bar decide. Order them by use: the first ones stay buttons.
|
|
1514
1517
|
- **A sort control is 44 × 44 under a finger (0.18.0)**: the header button grows to 44 tall under `pointer: coarse`
|
|
1515
1518
|
and to 44 wide under `pointer: coarse` or at 768 and below (a short label like "ID" was 44 × 30 on an iPad); the
|
|
1516
1519
|
chips below 768 have the same floor. Under a mouse the header keeps its Polaris size.
|
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.
|
|
11
|
+
<h1>@gemboss/ui 0.33.1 · 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 "@gemboss/ui/editor.css";
|
|
14
14
|
import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from "@gemboss/ui/editor";
|
package/catalog/index.html
CHANGED
|
@@ -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.
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.33.1</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>9356207b77c5</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><button></code> lẫn <code><a></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><div class="cat-row">
|
|
33
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
@@ -1710,8 +1710,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1710
1710
|
<p class="ui-list__sub">content-radar · 6 min read · 03/10/2026</p>
|
|
1711
1711
|
</div>
|
|
1712
1712
|
</li>
|
|
1713
|
-
</ul></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 & 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><div class="ui-resource">
|
|
1714
|
-
<div class="ui-bulkbar">
|
|
1713
|
+
</ul></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 & 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><div class="ui-resource">
|
|
1714
|
+
<div class="ui-bulkbar" data-fit="pending">
|
|
1715
1715
|
<label class="ui-table__checkbox">
|
|
1716
1716
|
<input type="checkbox" aria-label="Select all"/>
|
|
1717
1717
|
</label>
|
|
@@ -1721,73 +1721,90 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1721
1721
|
<button type="button" class="ui-btn ui-btn--sm">Compare</button>
|
|
1722
1722
|
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button>
|
|
1723
1723
|
</span>
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
<
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
<
|
|
1735
|
-
<
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
<
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
</
|
|
1753
|
-
<
|
|
1754
|
-
|
|
1755
|
-
<
|
|
1756
|
-
<
|
|
1757
|
-
<div class="ui-list__badges">
|
|
1758
|
-
<span class="ui-badge">Media buyer</span>
|
|
1759
|
-
</div>
|
|
1760
|
-
</div>
|
|
1761
|
-
<div class="ui-list__aside">
|
|
1762
|
-
<b>77</b>
|
|
1763
|
-
</div>
|
|
1764
|
-
</li>
|
|
1765
|
-
<li class="ui-list__item is-selected">
|
|
1766
|
-
<div class="ui-list__media">
|
|
1767
|
-
<label class="ui-list__check">
|
|
1768
|
-
<input type="checkbox" aria-label="Select Aiko Sato" checked=""/>
|
|
1769
|
-
</label>
|
|
1770
|
-
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1724
|
+
<span class="ui-bulkbar__measure" aria-hidden="true">
|
|
1725
|
+
<span class="ui-btn ui-btn--sm">Shortlist</span>
|
|
1726
|
+
<span class="ui-btn ui-btn--sm">Compare</span>
|
|
1727
|
+
<span class="ui-btn ui-btn--sm ui-btn--critical">Not fit</span>
|
|
1728
|
+
<span class="ui-btn ui-btn--icon">
|
|
1729
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
1730
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
1731
|
+
<circle cx="4.5" cy="10" r="1">
|
|
1732
|
+
</circle>
|
|
1733
|
+
<circle cx="10" cy="10" r="1">
|
|
1734
|
+
</circle>
|
|
1735
|
+
<circle cx="15.5" cy="10" r="1">
|
|
1736
|
+
</circle>
|
|
1737
|
+
</g>
|
|
1738
|
+
</svg>
|
|
1739
|
+
</span>
|
|
1740
|
+
</span>
|
|
1741
|
+
</div>
|
|
1742
|
+
<ul class="ui-list" aria-label="Candidates">
|
|
1743
|
+
<li class="ui-list__item is-selected">
|
|
1744
|
+
<div class="ui-list__media">
|
|
1745
|
+
<label class="ui-list__check">
|
|
1746
|
+
<input type="checkbox" aria-label="Select Lily Tran" checked=""/>
|
|
1747
|
+
</label>
|
|
1748
|
+
<span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span>
|
|
1749
|
+
</div>
|
|
1750
|
+
<div class="ui-list__body">
|
|
1751
|
+
<a class="ui-list__title" href="#s0">Lily Tran</a>
|
|
1752
|
+
<p class="ui-list__sub">Head of CRO at Ruggable</p>
|
|
1753
|
+
<p class="ui-list__meta">Replied 2 days ago</p>
|
|
1754
|
+
<div class="ui-list__badges">
|
|
1755
|
+
<span class="ui-badge">CRO</span>
|
|
1756
|
+
<span class="ui-badge">Plus</span>
|
|
1771
1757
|
</div>
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1758
|
+
</div>
|
|
1759
|
+
<div class="ui-list__aside">
|
|
1760
|
+
<b>82</b>
|
|
1761
|
+
</div>
|
|
1762
|
+
</li>
|
|
1763
|
+
<li class="ui-list__item">
|
|
1764
|
+
<div class="ui-list__media">
|
|
1765
|
+
<label class="ui-list__check">
|
|
1766
|
+
<input type="checkbox" aria-label="Select Marcus Bell"/>
|
|
1767
|
+
</label>
|
|
1768
|
+
<span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span>
|
|
1769
|
+
</div>
|
|
1770
|
+
<div class="ui-list__body">
|
|
1771
|
+
<a class="ui-list__title" href="#s1">Marcus Bell</a>
|
|
1772
|
+
<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>
|
|
1773
|
+
<p class="ui-list__meta">New</p>
|
|
1774
|
+
<div class="ui-list__badges">
|
|
1775
|
+
<span class="ui-badge">Media buyer</span>
|
|
1782
1776
|
</div>
|
|
1783
|
-
|
|
1784
|
-
|
|
1777
|
+
</div>
|
|
1778
|
+
<div class="ui-list__aside">
|
|
1779
|
+
<b>77</b>
|
|
1780
|
+
</div>
|
|
1781
|
+
</li>
|
|
1782
|
+
<li class="ui-list__item is-selected">
|
|
1783
|
+
<div class="ui-list__media">
|
|
1784
|
+
<label class="ui-list__check">
|
|
1785
|
+
<input type="checkbox" aria-label="Select Aiko Sato" checked=""/>
|
|
1786
|
+
</label>
|
|
1787
|
+
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1788
|
+
</div>
|
|
1789
|
+
<div class="ui-list__body">
|
|
1790
|
+
<a class="ui-list__title" href="#s2">Aiko Sato</a>
|
|
1791
|
+
<p class="ui-list__sub">Shopify app founder (reviews)</p>
|
|
1792
|
+
<p class="ui-list__meta">Waiting on intro</p>
|
|
1793
|
+
<div class="ui-list__badges">
|
|
1794
|
+
<span class="ui-badge">App</span>
|
|
1795
|
+
<span class="ui-badge">Japan</span>
|
|
1796
|
+
<span class="ui-badge">Plus</span>
|
|
1797
|
+
<span class="ui-badge">+1</span>
|
|
1785
1798
|
</div>
|
|
1786
|
-
</
|
|
1787
|
-
|
|
1788
|
-
<
|
|
1799
|
+
</div>
|
|
1800
|
+
<div class="ui-list__aside">
|
|
1801
|
+
<b>64</b>
|
|
1802
|
+
</div>
|
|
1803
|
+
</li>
|
|
1804
|
+
</ul>
|
|
1805
|
+
</div></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="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"></head><body><div style="padding:16px"><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">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm" disabled="">Shortlist</button><button type="button" class="ui-btn ui-btn--sm" disabled="">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical" disabled="">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"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran"/></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"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato"/></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></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1789
1806
|
<div class="ui-resource">
|
|
1790
|
-
<div class="ui-bulkbar">
|
|
1807
|
+
<div class="ui-bulkbar" data-fit="pending">
|
|
1791
1808
|
<label class="ui-table__checkbox">
|
|
1792
1809
|
<input type="checkbox" aria-label="Select all"/>
|
|
1793
1810
|
</label>
|
|
@@ -1797,71 +1814,88 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1797
1814
|
<button type="button" class="ui-btn ui-btn--sm" disabled="">Compare</button>
|
|
1798
1815
|
<button type="button" class="ui-btn ui-btn--sm ui-btn--critical" disabled="">Not fit</button>
|
|
1799
1816
|
</span>
|
|
1817
|
+
<span class="ui-bulkbar__measure" aria-hidden="true">
|
|
1818
|
+
<span class="ui-btn ui-btn--sm">Shortlist</span>
|
|
1819
|
+
<span class="ui-btn ui-btn--sm">Compare</span>
|
|
1820
|
+
<span class="ui-btn ui-btn--sm ui-btn--critical">Not fit</span>
|
|
1821
|
+
<span class="ui-btn ui-btn--icon">
|
|
1822
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
1823
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
1824
|
+
<circle cx="4.5" cy="10" r="1">
|
|
1825
|
+
</circle>
|
|
1826
|
+
<circle cx="10" cy="10" r="1">
|
|
1827
|
+
</circle>
|
|
1828
|
+
<circle cx="15.5" cy="10" r="1">
|
|
1829
|
+
</circle>
|
|
1830
|
+
</g>
|
|
1831
|
+
</svg>
|
|
1832
|
+
</span>
|
|
1833
|
+
</span>
|
|
1834
|
+
</div>
|
|
1835
|
+
<ul class="ui-list" aria-label="Candidates">
|
|
1836
|
+
<li class="ui-list__item">
|
|
1837
|
+
<div class="ui-list__media">
|
|
1838
|
+
<label class="ui-list__check">
|
|
1839
|
+
<input type="checkbox" aria-label="Select Lily Tran"/>
|
|
1840
|
+
</label>
|
|
1841
|
+
<span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span>
|
|
1800
1842
|
</div>
|
|
1801
|
-
<
|
|
1802
|
-
<
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
<
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
<
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
<
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
<
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
</
|
|
1848
|
-
<
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
</div>
|
|
1858
|
-
</div>
|
|
1859
|
-
<div class="ui-list__aside">
|
|
1860
|
-
<b>64</b>
|
|
1861
|
-
</div>
|
|
1862
|
-
</li>
|
|
1863
|
-
</ul>
|
|
1864
|
-
</div>
|
|
1843
|
+
<div class="ui-list__body">
|
|
1844
|
+
<a class="ui-list__title" href="#s0">Lily Tran</a>
|
|
1845
|
+
<p class="ui-list__sub">Head of CRO at Ruggable</p>
|
|
1846
|
+
<p class="ui-list__meta">Replied 2 days ago</p>
|
|
1847
|
+
<div class="ui-list__badges">
|
|
1848
|
+
<span class="ui-badge">CRO</span>
|
|
1849
|
+
<span class="ui-badge">Plus</span>
|
|
1850
|
+
</div>
|
|
1851
|
+
</div>
|
|
1852
|
+
<div class="ui-list__aside">
|
|
1853
|
+
<b>82</b>
|
|
1854
|
+
</div>
|
|
1855
|
+
</li>
|
|
1856
|
+
<li class="ui-list__item">
|
|
1857
|
+
<div class="ui-list__media">
|
|
1858
|
+
<label class="ui-list__check">
|
|
1859
|
+
<input type="checkbox" aria-label="Select Marcus Bell"/>
|
|
1860
|
+
</label>
|
|
1861
|
+
<span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span>
|
|
1862
|
+
</div>
|
|
1863
|
+
<div class="ui-list__body">
|
|
1864
|
+
<a class="ui-list__title" href="#s1">Marcus Bell</a>
|
|
1865
|
+
<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>
|
|
1866
|
+
<p class="ui-list__meta">New</p>
|
|
1867
|
+
<div class="ui-list__badges">
|
|
1868
|
+
<span class="ui-badge">Media buyer</span>
|
|
1869
|
+
</div>
|
|
1870
|
+
</div>
|
|
1871
|
+
<div class="ui-list__aside">
|
|
1872
|
+
<b>77</b>
|
|
1873
|
+
</div>
|
|
1874
|
+
</li>
|
|
1875
|
+
<li class="ui-list__item">
|
|
1876
|
+
<div class="ui-list__media">
|
|
1877
|
+
<label class="ui-list__check">
|
|
1878
|
+
<input type="checkbox" aria-label="Select Aiko Sato"/>
|
|
1879
|
+
</label>
|
|
1880
|
+
<span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span>
|
|
1881
|
+
</div>
|
|
1882
|
+
<div class="ui-list__body">
|
|
1883
|
+
<a class="ui-list__title" href="#s2">Aiko Sato</a>
|
|
1884
|
+
<p class="ui-list__sub">Shopify app founder (reviews)</p>
|
|
1885
|
+
<p class="ui-list__meta">Waiting on intro</p>
|
|
1886
|
+
<div class="ui-list__badges">
|
|
1887
|
+
<span class="ui-badge">App</span>
|
|
1888
|
+
<span class="ui-badge">Japan</span>
|
|
1889
|
+
<span class="ui-badge">Plus</span>
|
|
1890
|
+
<span class="ui-badge">+1</span>
|
|
1891
|
+
</div>
|
|
1892
|
+
</div>
|
|
1893
|
+
<div class="ui-list__aside">
|
|
1894
|
+
<b>64</b>
|
|
1895
|
+
</div>
|
|
1896
|
+
</li>
|
|
1897
|
+
</ul>
|
|
1898
|
+
</div>
|
|
1865
1899
|
</div></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="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"></head><body><div style="padding:16px"><ul class="ui-list" aria-label="People"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--40" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#n1">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests</p><p class="ui-list__meta">linkedin · cro-agency · Austin, TX · posted 2d ago</p></div><div class="ui-list__aside"><span class="ui-tag ui-tag--success">82</span></div><div class="ui-list__actions"><a href="#orig" aria-label="Open original profile" style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px">↗</a></div></li><li class="ui-list__item"><div class="ui-list__body"><a class="ui-list__title" href="#n2">Marcus Bell</a><p class="ui-list__sub">Founder, Bell UGC Studio · 12,400 followers</p><p class="ui-list__meta"><span>Runs the ads himself<span style="display:block;margin-top:4px">Signals: arcads · heygen · veo 3 · capcut</span></span></p><div class="ui-list__badges"><span class="ui-tag">Hands-on</span><span class="ui-tag ui-tag--success">Email verified</span></div></div><div class="ui-list__aside"><span><span class="ui-tag ui-tag--success">91</span><span class="ui-sub">Unverified</span></span></div><div class="ui-list__actions"><span><button type="button" class="ui-btn ui-btn--ghost">Evidence (3)</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More profiles">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><a class="ui-menu__item" href="#x">X ↗</a></div></details></span></div></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1866
1900
|
<ul class="ui-list" aria-label="People">
|
|
1867
1901
|
<li class="ui-list__item">
|
|
@@ -5691,7 +5725,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
5691
5725
|
</div>
|
|
5692
5726
|
</div>
|
|
5693
5727
|
</div></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">
|
|
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">31/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><div style="height:360px;display:flex">
|
|
5695
5729
|
<aside class="gemboss-assistant-rail">
|
|
5696
5730
|
<div class="gemboss-assistant-rail-top">
|
|
5697
5731
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -5740,7 +5774,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
5740
5774
|
</svg>
|
|
5741
5775
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
5742
5776
|
</span>
|
|
5743
|
-
<span class="gemboss-assistant-thread-meta">
|
|
5777
|
+
<span class="gemboss-assistant-thread-meta">31/8/2026</span>
|
|
5744
5778
|
</button>
|
|
5745
5779
|
<div class="gemboss-assistant-thread-actions">
|
|
5746
5780
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|