@gemboss/ui 0.41.0 → 0.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +59 -0
- package/README.md +7 -3
- package/catalog/editor.html +9 -7
- package/catalog/index.html +11 -4
- package/gemboss-ui.css +1 -1
- package/package.json +1 -1
- package/parts/components.css +1 -1
- package/parts/core.css +1 -1
- package/parts/shell.css +1 -1
- package/src/editor/controls.tsx +52 -8
- package/src/editor/index.ts +2 -2
- package/src/editor/swatch.ts +133 -9
- package/src/editor-plain.js +1 -1
- package/src/index.ts +2 -2
- package/src/portal.tsx +12 -6
- package/src/reactions-data.ts +13 -0
- package/src/reactions.tsx +5 -5
- package/src/team-chat-data.ts +46 -13
- package/src/team-chat-plain.js +1 -1
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="#sheet">Ngăn trượt cạnh phải</a><a href="#reader">Hộp đọc tài liệu</a><a href="#settings">Hộp cài đặt</a><a href="#switcher">Chuyển dịch vụ</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="#site">Trang công khai: thanh trên, logo cỡ site, nút, chân trang</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="#team-chat">Chat đội</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.42.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>d7a7ee215f17</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>
|
|
@@ -7371,13 +7371,20 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
7371
7371
|
</svg>
|
|
7372
7372
|
</button>
|
|
7373
7373
|
</div>
|
|
7374
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>ReactionPicker: bảng chọn</figcaption><div class="cat-live"><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction"><input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/><div class="ui-reaction-picker__body"><p class="ui-reaction-picker__head">Frequently used</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button></div><p class="ui-reaction-picker__head">Smileys</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button><button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button><button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button><button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button><button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button><button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button><button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button><button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button><button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button><button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button><button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button><button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button><button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button><button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button><button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button><button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button><button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button><button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button><button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button><button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button><button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button><button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button><button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button><button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button><button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button><button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button><button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button><button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button><button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button><button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button><button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button><button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button><button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button><button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button><button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button><button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button><button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button><button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button></div><p class="ui-reaction-picker__head">Hands</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button><button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button><button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button><button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button><button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button><button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button><button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button><button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button><button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button><button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button></div><p class="ui-reaction-picker__head">Marks</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button><button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button><button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button><button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button><button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button><button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button><button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button><button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button><button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button><button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button><button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button><button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button><button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button><button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button><button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button><button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button><button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button><button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button></div><p class="ui-reaction-picker__head">Work</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button><button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button><button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button><button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button><button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button><button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button><button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button><button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button><button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button><button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button><button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button><button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button><button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button><button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button><button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button><button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button><button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button><button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button><button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button><button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button><button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button><button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button><button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button><button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button><button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button><button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button><button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button><button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button><button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button><button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button><button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button><button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction">
|
|
7374
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>ReactionPicker: bảng chọn</figcaption><div class="cat-live"><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction"><input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/><div class="ui-reaction-picker__body"><p class="ui-reaction-picker__head">Frequently used</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button></div><p class="ui-reaction-picker__head">Smileys</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button><button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button><button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button><button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button><button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button><button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button><button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button><button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button><button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button><button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button><button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button><button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button><button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button><button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button><button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button><button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button><button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button><button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button><button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button><button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button><button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button><button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button><button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button><button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button><button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button><button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button><button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button><button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button><button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button><button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button><button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button><button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button><button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button><button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button><button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button><button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button><button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button><button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button></div><p class="ui-reaction-picker__head">Hands</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button><button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button><button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button><button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button><button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button><button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button><button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button><button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button><button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button><button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button></div><p class="ui-reaction-picker__head">Marks</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button><button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button><button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button><button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button><button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button><button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button><button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button><button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button><button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button><button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button><button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button><button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button><button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button><button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button><button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button><button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button><button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button><button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button></div><p class="ui-reaction-picker__head">Work</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button><button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button><button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button><button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button><button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button><button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button><button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button><button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button><button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button><button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button><button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button><button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button><button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button><button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button><button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button><button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button><button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button><button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button><button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button><button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button><button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button><button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button><button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button><button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button><button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button><button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button><button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button><button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button><button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button><button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button><button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button><button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction">
|
|
7375
7375
|
<input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/>
|
|
7376
7376
|
<div class="ui-reaction-picker__body">
|
|
7377
7377
|
<p class="ui-reaction-picker__head">Frequently used</p>
|
|
7378
7378
|
<div class="ui-reaction-picker__grid">
|
|
7379
7379
|
<button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button>
|
|
7380
7380
|
<button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button>
|
|
7381
|
+
<button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button>
|
|
7382
|
+
<button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button>
|
|
7383
|
+
<button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button>
|
|
7384
|
+
<button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button>
|
|
7385
|
+
<button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button>
|
|
7386
|
+
<button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button>
|
|
7387
|
+
<button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button>
|
|
7381
7388
|
</div>
|
|
7382
7389
|
<p class="ui-reaction-picker__head">Smileys</p>
|
|
7383
7390
|
<div class="ui-reaction-picker__grid">
|
|
@@ -11844,7 +11851,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11844
11851
|
</div>
|
|
11845
11852
|
</div>
|
|
11846
11853
|
</div></code></pre></details></figure></section>
|
|
11847
|
-
<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">
|
|
11854
|
+
<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">11/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><div style="height:360px;display:flex">
|
|
11848
11855
|
<aside class="gemboss-assistant-rail">
|
|
11849
11856
|
<div class="gemboss-assistant-rail-top">
|
|
11850
11857
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -11893,7 +11900,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11893
11900
|
</svg>
|
|
11894
11901
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
11895
11902
|
</span>
|
|
11896
|
-
<span class="gemboss-assistant-thread-meta">
|
|
11903
|
+
<span class="gemboss-assistant-thread-meta">11/9/2026</span>
|
|
11897
11904
|
</button>
|
|
11898
11905
|
<div class="gemboss-assistant-thread-actions">
|
|
11899
11906
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|
package/gemboss-ui.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* GemBoss admin design system — GENERATED — do not edit; regenerate from gemboss:
|
|
3
3
|
* node apps/admin/scripts/export-ui-css.mjs --out <path> (npm run export:ui-css)
|
|
4
|
-
* gemboss commit:
|
|
4
|
+
* gemboss commit: 41849515f207ff84851bedbd29e1ad20fd1f5228
|
|
5
5
|
* sources sha256: 3fa181b46fbf335e1053c855264065b48b8ad461f029aaebcfb31a1bb6652511
|
|
6
6
|
* contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
|
|
7
7
|
* (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gemboss/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.0",
|
|
4
4
|
"description": "GemBoss design system for every surface in the fleet: the admin shell (topbar + rail + drawer) as React components, and the admin stylesheet exported as one CSS file.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
package/parts/components.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* @gemboss/ui components.css — GENERATED by packages/ui/scripts/build-css.mjs from export:ui + export:field + src/kit-plain.css; do not edit
|
|
3
|
-
* gemboss commit:
|
|
3
|
+
* gemboss commit: 41849515f207ff84851bedbd29e1ad20fd1f5228
|
|
4
4
|
*/
|
|
5
5
|
:root{--ui-surface: #ffffff;--ui-surface: var(--gemboss-surface, #ffffff);--ui-surface-2: var(--gemboss-hover, #eceef2);--ui-text: var(--gemboss-text, #1b1c1e);--ui-text-muted: var(--gemboss-text-muted, #686b71);--ui-border: var(--gemboss-divider, #e5e7ea);--ui-accent: var(--gemboss-primary, #1b1c1e);--ui-accent-hover: var(--gemboss-primary-dark, #000000);--ui-accent-fg: #ffffff;--ui-accent-soft: var(--gemboss-active-bg, #f0f1f4);--ui-accent-strong: var(--gemboss-active-fg, #1b1c1e);--ui-text-strong: var(--gemboss-text-strong, #1b1c1e);--ui-success-fg: var(--gemboss-success);--ui-warning-fg: var(--gemboss-primary-dark);--ui-danger-fg: var(--gemboss-danger-strong);--ui-focus: var(--gemboss-accent, #5661f5);--ui-radius-sm: 6px;--ui-radius-md: 8px;--ui-radius-lg: 12px;--ui-space-1: 4px;--ui-space-2: 8px;--ui-space-3: 12px;--ui-space-4: 16px;--ui-control-h: 32px;--ui-btn-h: 28px;--ui-card-shadow: 0 1px 0 rgba(26,26,26,.07);--ui-fs-body: 13px;--ui-fs-caption: 12px;--ui-content-max: 900px}.gemboss-admin-shell{--ui-surface: var(--adm-surface);--ui-surface-2: var(--adm-surface-2);--ui-text: var(--adm-text);--ui-text-muted: var(--adm-muted);--ui-border: var(--adm-divider);--ui-accent: var(--adm-accent);--ui-accent-hover: var(--gemboss-primary-dark, #000000);--ui-accent-fg: #ffffff;--ui-accent-soft: var(--adm-accent-soft);--ui-accent-strong: var(--adm-accent-fg);--ui-text-strong: var(--adm-text-strong);--ui-success-fg: color-mix(in srgb, var(--gemboss-success) 70%, #ffffff);--ui-warning-fg: color-mix(in srgb, #c99a2e 70%, #ffffff);--ui-danger-fg: color-mix(in srgb, var(--gemboss-danger-strong) 70%, #ffffff);--ui-focus: var(--adm-accent);--ui-card-shadow: none}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);height:var(--ui-btn-h);padding:0 var(--ui-space-3);box-sizing:border-box;line-height:1;white-space:nowrap;vertical-align:middle;border-radius:var(--ui-radius-md);font-family:inherit;font-size:var(--ui-fs-caption);font-weight:550;cursor:pointer;text-decoration:none;user-select:none;border:1px solid var(--ui-border);background:transparent;color:var(--ui-text);transition:background .12s ease,border-color .12s ease}.ui-btn:hover{background:var(--ui-surface-2);text-decoration:none}.ui-btn:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.ui-btn[disabled],.ui-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ui-btn--primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-fg)}.ui-btn--primary:hover{background:var(--ui-accent-hover);border-color:var(--ui-accent-hover)}.ui-btn--ghost{border-color:transparent;background:transparent;color:var(--ui-text-muted)}.ui-btn--ghost:hover{background:var(--ui-surface-2);color:var(--ui-text)}.ui-btn--on,.ui-btn--on:hover{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-accent-strong)}.ui-card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-card-shadow);padding:var(--ui-space-4);color:var(--ui-text)}.ui-card__title{font-size:14px;line-height:20px;font-weight:650;margin:0 0 var(--ui-space-2)}.ui-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin-bottom:var(--ui-space-2)}.ui-card__head>.ui-card__title{margin:0}.ui-card__head>:last-child:not(.ui-card__title){display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}.ui-select{height:var(--ui-control-h);padding:0 32px 0 12px;max-width:100%;background:var(--gemboss-field-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;border:1px solid var(--gemboss-field-line);border-radius:var(--ui-radius-md);color:var(--gemboss-field-ink);font-family:inherit;font-size:var(--ui-fs-body);font-weight:450;appearance:none;-webkit-appearance:none;cursor:pointer}.ui-select:hover:not(:disabled){border-color:var(--gemboss-field-line-hover);background-color:var(--gemboss-field-bg-hover)}.ui-select:focus{outline:none}.ui-select:focus-visible:not(:disabled){outline:2px solid var(--ui-focus);outline-offset:1px;border-color:var(--gemboss-field-line-active)}.ui-select:disabled{opacity:.5;cursor:not-allowed}.ui-select--slim{height:30px;font-size:var(--ui-fs-caption)}.ui-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--ui-fs-caption);line-height:20px;font-weight:450;padding:0 6px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2);color:var(--ui-text-muted)}.ui-tag--accent{background:var(--adm-accent-soft, rgba(20,22,26,.05));color:var(--adm-accent-fg, var(--ui-accent))}.ui-tag--chip{text-transform:none;letter-spacing:0;font-size:11px;font-weight:500;padding:2px 8px;background:transparent;border:1px solid var(--ui-border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.ui-tag--chip.ui-tag--accent{color:var(--adm-accent-fg, var(--ui-accent));border-color:var(--ui-accent);background:transparent}.ui-chips{display:flex;flex-wrap:wrap;gap:var(--ui-space-2, 8px);margin:0;padding:0;list-style:none}.ui-chips>a.ui-tag--chip{min-height:28px;padding:4px 12px;border-radius:var(--ui-radius-md, 8px);font-family:inherit;font-size:var(--gemboss-fs-caption, 12px);color:var(--ui-text);text-decoration:none}.ui-chips>a.ui-tag--chip:hover{background:var(--ui-surface-2);border-color:var(--ui-text-muted)}.ui-chips>a.ui-tag--chip:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-chips>a.ui-tag--chip[aria-current=page]{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-accent-strong);font-weight:600}.ui-tag--success{background:var(--gemboss-success-soft);color:var(--gemboss-success-strong, var(--gemboss-success))}.ui-tag--warning{background:var(--gemboss-warning-soft);color:var(--gemboss-warning)}.ui-tag--danger{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong, var(--gemboss-danger))}.ui-muted{color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-page-head{margin-bottom:20px}.ui-page-head h1{color:var(--ui-text-strong);font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.01em}.ui-page-head p{color:var(--ui-text-muted);font-size:var(--ui-fs-body);margin-top:4px}.ui-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}.ui-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}.ui-metric{display:flex;flex-direction:column;gap:1px;min-width:78px;padding:8px 12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}a.ui-metric{text-decoration:none;color:inherit}a.ui-metric:hover{border-color:var(--ui-text-muted)}a.ui-metric:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-metric__val{font-size:17px;font-weight:700;color:var(--ui-text);font-variant-numeric:tabular-nums;line-height:1.15}.ui-metric__lbl{font-size:var(--ui-fs-caption);font-weight:500;color:var(--ui-text-muted)}.ui-metric--success{border-color:color-mix(in srgb,var(--gemboss-success) 40%,transparent)}.ui-metric--success .ui-metric__val{color:var(--ui-success-fg)}.ui-metric--warning{border-color:color-mix(in srgb,#c99a2e 40%,transparent)}.ui-metric--warning .ui-metric__val{color:var(--ui-warning-fg)}.ui-metric--danger{border-color:color-mix(in srgb,var(--gemboss-danger-strong) 40%,transparent)}.ui-metric--danger .ui-metric__val{color:var(--ui-danger-fg)}.ui-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 16px;margin:0}.ui-dl>div{min-width:0}.ui-dl dt{font-size:var(--ui-fs-caption);color:var(--ui-text-muted)}.ui-dl dd{margin:4px 0 0;font-weight:600;color:var(--ui-text);overflow-wrap:anywhere}.ui-notice{padding:12px 16px;border-radius:var(--ui-radius-md);border:1px solid var(--ui-border);background:var(--ui-surface-2);color:var(--ui-text);font-size:var(--ui-fs-body);overflow-wrap:anywhere}.ui-notice--warning{background:var(--gemboss-warning-soft);border-color:var(--gemboss-warning-border);color:var(--gemboss-warning)}.ui-notice--danger{background:var(--gemboss-danger-soft);border-color:var(--gemboss-danger-border);color:var(--gemboss-danger-strong)}.ui-notice--success{background:var(--gemboss-success-soft);border-color:var(--gemboss-success-border);color:var(--gemboss-success-strong)}.ui-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0}.ui-pager>a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);color:var(--ui-text);text-decoration:none;font-size:var(--ui-fs-body)}.ui-pager>a:hover{background:var(--ui-surface-2)}.ui-pager>a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-pager>[aria-current=page]{color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--ui-fs-caption);line-height:16px;font-weight:450;white-space:nowrap;padding:2px 8px;border-radius:var(--ui-radius-md);background:color-mix(in srgb,var(--ui-text) 8%,transparent);color:var(--ui-text-muted)}.ui-overlay{position:fixed;inset:0;z-index:500;background:#00000080;display:grid;place-items:center;padding:20px}.ui-modal{width:min(460px,100%);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--gemboss-shadow-overlay, 0 20px 60px rgba(0, 0, 0, .4));overflow:hidden}.ui-modal:focus{outline:none}.ui-modal__head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ui-border);font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text)}.ui-modal__title{min-width:0;flex:1 1 auto}.ui-modal__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--ui-radius-md, 8px);background:transparent;color:var(--ui-text-muted);cursor:pointer}.ui-modal__close svg{width:20px;height:20px}.ui-modal__close:hover{background:var(--ui-surface-2);color:var(--ui-text)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-modal__body{padding:16px}.ui-modal__foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--ui-border)}@media (pointer: coarse),(max-width: 47.9975em){.ui-modal__close{width:44px;height:44px;margin:-8px -8px -8px 0}:is(.ui-modal__head,.ui-modal__foot) .ui-btn{min-height:44px}}.ui-modal--lg{position:relative}.ui-textarea{width:100%;min-height:96px;resize:vertical;box-sizing:border-box;background:var(--gemboss-field-bg);border:1px solid var(--gemboss-field-line);border-radius:var(--ui-radius-md);padding:12px;color:var(--gemboss-field-ink);font-size:var(--ui-fs-body);line-height:1.5;font-family:inherit}.ui-textarea::placeholder{color:var(--gemboss-field-placeholder)}.ui-textarea:hover:not(:disabled){border-color:var(--gemboss-field-line-hover);background-color:var(--gemboss-field-bg-hover)}.ui-textarea:focus{outline:none}.ui-textarea:focus-visible:not(:disabled){outline:2px solid var(--ui-focus);outline-offset:1px;border-color:var(--gemboss-field-line-active)}.ui-textarea:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 47.9975em){.ui-select.ui-select,.ui-textarea{font-size:16px}.ui-select:not(.ui-select--slim){min-height:44px}}.ui-seg{display:inline-flex;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden;overflow:clip;min-width:0}.ui-seg :is(button,a){display:inline-grid;place-items:center;width:calc(var(--ui-btn-h) - 2px);height:calc(var(--ui-btn-h) - 2px);border:0;background:transparent;color:var(--ui-text-muted);cursor:pointer;font-family:inherit}.ui-seg :is(button,a).is-text{width:auto;padding:0 12px;font-size:var(--ui-fs-caption);font-weight:550;grid-auto-flow:column;column-gap:2px}.ui-seg :is(button,a)+:is(button,a){border-left:1px solid var(--ui-border)}.ui-seg :is(button,a):hover{background:var(--ui-surface-2);color:var(--ui-text)}.ui-seg :is(button,a):focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-seg a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ui-text-muted)}.ui-seg a[aria-current=page],.ui-seg button.active{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}.ui-seg svg{width:16px;height:16px;fill:currentColor}.ui-seg svg[fill=none]{fill:none}.ui-seg :is(button,a):is(:disabled,[aria-disabled=true]){opacity:.45;cursor:not-allowed}.ui-seg :is(button,a):is(:disabled,[aria-disabled=true]):not(.active):hover{background:transparent;color:var(--ui-text-muted)}.ui-seg--fill{display:flex;width:100%}.ui-seg.ui-seg--fill>:is(button,a).is-text{flex:1 1 0;min-width:0}.ui-seg-n{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--ui-text-muted);font-weight:450}.ui-stats{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-bottom:24px}.ui-stat{display:inline-flex;align-items:center;gap:var(--ui-space-2);padding:6px 12px;border-radius:999px;font-family:inherit;background:var(--ui-surface);border:1px solid var(--ui-border);font-size:var(--ui-fs-caption);color:var(--ui-text-muted)}.ui-stat b{color:var(--ui-text-strong);font-weight:650}.ui-stat.is-clickable{cursor:pointer;transition:border-color .14s ease,background-color .14s ease}.ui-stat.is-clickable:hover{border-color:var(--ui-text-muted);background:var(--ui-surface-2)}.ui-stat.is-clickable.active{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}.ui-stat.is-clickable.active b{color:var(--ui-accent-strong)}.gemboss-toast-viewport{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:2147483000;display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:min(560px,calc(100vw - 32px));pointer-events:none}.gemboss-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-width:220px;max-width:100%;padding:12px 12px 12px 16px;background:var(--ui-text-strong, #1a1917);color:var(--gemboss-on-primary, #fff);border-radius:12px;font-size:var(--ui-fs-body, 13px);line-height:1.4;font-weight:500;box-shadow:var(--gemboss-shadow-overlay, 0 8px 28px rgba(0, 0, 0, .24));animation:gemboss-toast-in .24s cubic-bezier(.16,1,.3,1)}.gemboss-toast.is-error{background:var(--gemboss-danger, #d72c0d)}.gemboss-toast-text{flex:1 1 auto;min-width:0}.gemboss-toast-action{flex:0 0 auto;border:0;background:transparent;color:var(--gemboss-on-primary, #fff);cursor:pointer;padding:4px 8px;border-radius:8px;font:inherit;font-weight:650;text-decoration:underline;text-underline-offset:2px;transition:background .14s ease}.gemboss-toast-action:hover{background:#ffffff29}.gemboss-toast-dismiss{flex:0 0 auto;display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:8px;cursor:pointer;background:#ffffff1f;color:var(--gemboss-on-primary, #fff);transition:background .14s ease}.gemboss-toast-dismiss:hover{background:#ffffff42}.gemboss-toast-action:focus-visible,.gemboss-toast-dismiss:focus-visible{outline:2px solid var(--gemboss-on-primary, #fff);outline-offset:2px}@keyframes gemboss-toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.gemboss-toast{animation:none}}@media (max-width: 47.9975em){.ui-btn:not(.ui-btn--sm),.ui-seg :is(button,a){min-height:44px}.ui-seg :is(button,a):not(.is-text){min-width:44px}}@media (pointer: coarse){.ui-btn:not(.ui-btn--sm),.ui-stat.is-clickable,.ui-chips>a.ui-tag--chip,.ui-pager>a,.ui-seg :is(button,a){min-height:44px}.ui-stat.is-clickable{min-width:44px;justify-content:center}.ui-chips>a.ui-tag--chip{min-width:44px;justify-content:center}.ui-select.ui-select,.ui-select--slim.ui-select--slim{min-height:44px}.ui-seg :is(button,a){min-width:44px}}.ui-skeleton{display:flex;flex-direction:column;gap:var(--ui-space-2)}.ui-skeleton__line{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--ui-surface-2) 25%,var(--ui-border) 37%,var(--ui-surface-2) 63%);background-size:400% 100%;animation:ui-skeleton-sheen 1.4s ease-in-out infinite}@keyframes ui-skeleton-sheen{0%{background-position:100% 50%}to{background-position:0 50%}}@media (prefers-reduced-motion: reduce){.ui-skeleton__line{animation:none;background:var(--ui-surface-2)}}.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.ui-resizer{cursor:col-resize;position:relative;touch-action:none;outline:none}.ui-resizer:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:44px;border-radius:var(--gemboss-radius-full);background:var(--gemboss-primary);opacity:0;transition:opacity .14s ease,height .14s ease}.ui-resizer:hover:before,.ui-resizer:focus-visible:before,.ui-resizer.dragging:before,body.ui-resizing .ui-resizer:before{opacity:1;height:52px}@media (pointer: coarse){.ui-resizer:after{content:"";position:absolute;inset:0 -14px;touch-action:none;z-index:2}}body.ui-resizing,body.ui-resizing *{cursor:col-resize!important;user-select:none!important}body.ui-resizing:after{content:"";position:fixed;inset:0;z-index:9999;cursor:col-resize}.ui-tabs{display:flex;gap:var(--ui-space-2);border-bottom:1px solid var(--ui-border);overflow-x:auto;scrollbar-width:none}.ui-tabs>button,.ui-tabs>a{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ui-space-2);min-height:var(--ui-btn-h);padding:0 var(--ui-space-3);border:0;background:transparent;cursor:pointer;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0;font-family:inherit;font-size:var(--ui-fs-caption);font-weight:550;white-space:nowrap;color:var(--ui-text-muted);transition:color var(--gemboss-transition-fast) ease,background-color var(--gemboss-transition-fast) ease}.ui-tabs>button:hover,.ui-tabs>a:hover{color:var(--ui-text);background:var(--ui-surface-2)}.ui-tabs>button:focus-visible,.ui-tabs>a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-tabs>a{text-decoration:none}.ui-tabs>a[aria-current=page],.ui-tabs>button[aria-selected=true]{color:var(--ui-text-strong)}.ui-tabs>a[aria-current=page]:after,.ui-tabs>button[aria-selected=true]:after{content:"";position:absolute;left:var(--ui-space-3);right:var(--ui-space-3);bottom:0;height:2px;border-radius:var(--gemboss-radius-full);background:var(--ui-accent)}.ui-tabs>button:disabled{opacity:.5;cursor:not-allowed}@media (pointer: coarse),(max-width: 47.9975em){.ui-tabs>:is(button,a){min-height:44px}}.ui-table-wrap{overflow-x:auto;max-width:100%;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-card-shadow)}.ui-table{width:100%;border-collapse:collapse;font-size:var(--ui-fs-body);color:var(--ui-text)}.ui-table th,.ui-table td{padding:var(--ui-space-2) 6px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--ui-border)}.ui-table :is(th,td):where(:first-child){padding-left:var(--ui-space-3)}.ui-table :is(th,td):where(:last-child){padding-right:var(--ui-space-3)}.ui-table th{font-weight:450;color:var(--ui-text-muted);white-space:nowrap}.ui-table thead th{padding-block:var(--ui-space-3)}.ui-table tbody tr:last-child>:is(td,th){border-bottom:0}.ui-table tbody tr:hover{background:var(--ui-surface-2)}.ui-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.ui-table td>a{display:inline-flex;align-items:center;min-height:24px}.ui-table .ui-sub{display:block;margin-top:2px;font-size:var(--ui-fs-caption);color:var(--ui-text-muted);font-weight:400}.ui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-space-2);padding:var(--ui-space-4);padding-block:40px;text-align:center;color:var(--ui-text-muted);font-size:var(--ui-fs-body)}.ui-empty__title{margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text-strong)}.ui-empty__body{margin:0;max-width:48ch;line-height:1.5}.ui-empty>.ui-btn{margin-top:var(--ui-space-2)}.gemboss-field,.gemboss-control{box-sizing:border-box;height:32px;min-width:0;padding:0 12px;font:inherit;font-size:13px;line-height:20px;color:var(--gemboss-field-ink);background-color:var(--gemboss-field-bg);border:1px solid var(--gemboss-field-line);border-radius:8px}input[type=search]:is(.gemboss-field,.gemboss-field__bare){-webkit-appearance:none;appearance:none}.gemboss-field::placeholder{color:var(--gemboss-field-placeholder)}.gemboss-field--tall{min-height:44px}.gemboss-field--narrow{padding:0 6px;appearance:textfield;-moz-appearance:textfield}.gemboss-field--narrow::-webkit-outer-spin-button,.gemboss-field--narrow::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gemboss-field:hover:not(:disabled):not(:has(>.gemboss-field__bare:disabled)),.gemboss-control:hover:not(:disabled){border-color:var(--gemboss-field-line-hover);background-color:var(--gemboss-field-bg-hover)}.gemboss-field:focus-visible,.gemboss-control:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:1px;border-color:var(--gemboss-field-line-active)}.gemboss-field:disabled,.gemboss-control:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 47.9975em){.gemboss-field,.gemboss-control{font-size:16px;min-height:44px}}textarea.gemboss-field{height:auto;padding:6px 12px;resize:vertical}.gemboss-field--group{display:flex;align-items:center;gap:6px;height:auto;min-height:32px;padding-right:0;overflow:hidden}@media (max-width: 47.9975em){.gemboss-field--group{min-height:44px}}.gemboss-field--group:focus-within{outline:2px solid var(--ui-focus, #5661f5);outline-offset:1px;border-color:var(--gemboss-field-line-active)}.gemboss-field--group input[type=color]{flex:none;align-self:stretch;width:44px;min-width:44px;height:auto;min-height:0;margin:-1px 0 -1px -12px;padding:0;border:0;border-right:1px solid var(--gemboss-field-line);border-radius:0;background:none;cursor:pointer}.gemboss-field--group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gemboss-field--group input[type=color]::-webkit-color-swatch{border:0;border-radius:0}.gemboss-field__bare{flex:1;min-width:0;align-self:stretch;margin-block:-1px;padding:0 12px 0 0;border:0;border-radius:0;outline:none;background:transparent;color:inherit;font:inherit}.gemboss-field__bare::placeholder{color:var(--gemboss-field-placeholder)}.gemboss-field__suffix{flex:none;padding-right:12px;color:var(--gemboss-field-placeholder)}.gemboss-field__bare:has(+.gemboss-field__suffix){padding-right:0}.gemboss-field--group:has(>.gemboss-field__bare:disabled){opacity:.5;cursor:not-allowed}.gemboss-field__bare:disabled{cursor:not-allowed}@media (pointer: coarse){.gemboss-field,.gemboss-control{height:auto;min-height:44px}}.gemboss-control{cursor:pointer}.gemboss-control.gemboss-control--icon{width:32px;flex:0 0 auto;padding:0}@media (pointer: coarse){.gemboss-control.gemboss-control--icon{width:44px;min-width:44px}}.ui-btn--icon{flex:none;width:var(--ui-btn-h);padding:0}.ui-btn--icon svg{width:18px;height:18px}.ui-menu{position:relative;display:inline-block}.ui-menu>summary{list-style:none;cursor:pointer}.ui-menu>summary::-webkit-details-marker{display:none}.ui-menu__list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:grid;min-width:220px;padding:var(--ui-space-1);box-sizing:border-box}.ui-menu--end .ui-menu__list{left:auto;right:0}.ui-menu__list[popover]{position:fixed;inset:auto;margin:0;overflow:auto}.ui-menu__list[popover]:not(:popover-open){display:none}:where(.ui-menu__list[popover]){border:0;background:none;color:inherit}:root[data-gb-menus=float] .ui-menu[open]>.ui-menu__list:not([popover]){visibility:hidden}.ui-menu__item:is([disabled],[aria-disabled=true]){opacity:.5;cursor:not-allowed;pointer-events:none}.ui-menu__hint{margin-left:auto;padding-left:var(--ui-space-4);color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-menu__sep{height:1px;margin:var(--ui-space-1) 0;border:0;background:var(--ui-border)}.ui-check{display:inline-flex;align-items:center;gap:var(--ui-space-2);min-height:44px;max-width:100%;overflow-wrap:break-word;cursor:pointer;font-size:var(--ui-fs-body);color:var(--ui-text)}.ui-check>input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ui-accent);cursor:inherit}.ui-check>input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.ui-check:has(>input:disabled){opacity:.5;cursor:not-allowed}.ui-check>:last-child:not(input){min-width:0}.ui-label{display:block;margin:0 0 var(--ui-space-1);font-size:var(--ui-fs-caption);font-weight:600;color:var(--ui-text-muted)}.ui-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--ui-space-2) var(--ui-space-4);margin:0;font-size:var(--ui-fs-body)}.ui-kv>dt{color:var(--ui-text-muted)}.ui-kv>dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}@media (pointer: coarse){.ui-btn--icon:not(.ui-btn--sm){min-width:44px}}@media (max-width: 47.9975em){.ui-btn--icon:not(.ui-btn--sm){min-width:44px;min-height:44px}}.ui-link,.ui-prose :where(a:not([class])){color:var(--gemboss-accent-strong, #3a44de);text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:2px}.ui-link:visited,.ui-prose :where(a:not([class])):visited{color:var(--gemboss-accent-strong, #3a44de)}.ui-link:hover,.ui-prose :where(a:not([class])):hover{color:var(--gemboss-accent, #5661f5);text-decoration-thickness:2px}.ui-link:focus-visible,.ui-prose :where(a:not([class])):focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:2px;border-radius:2px}.ui-card--media{position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column}.ui-card__link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--ui-text);font-size:var(--ui-fs-body);line-height:20px;font-weight:650;text-decoration:none;overflow-wrap:anywhere}.ui-card__link:after{content:"";position:absolute;inset:0;z-index:0}.ui-card__link:focus-visible{outline:none}.ui-card--media:has(.ui-card__link){cursor:pointer}.ui-card--media:has(.ui-card__link:hover){border-color:var(--ui-text-muted)}.ui-card--media:has(.ui-card__link:focus-visible){outline:2px solid var(--ui-focus);outline-offset:1px}.ui-card--media :is(.ui-card__foot button,.ui-card__foot a,.ui-card__body a:not(.ui-card__link),.ui-card__body button,select,input,summary){position:relative;z-index:1}.ui-card__menu{position:absolute;top:8px;right:8px;z-index:2}.ui-card--media:has(>.ui-card__menu){overflow:visible}.ui-card--media:has(>.ui-card__menu)>.ui-card__media{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.ui-card__meta{color:var(--ui-text-muted);font-size:var(--ui-fs-caption);line-height:16px}.ui-card--media[data-ratio="4/3"]>.ui-card__media{aspect-ratio:4 / 3}.ui-card--media[data-ratio="1/1"]>.ui-card__media{aspect-ratio:1 / 1}.ui-card__media{display:block;width:100%;aspect-ratio:16 / 10;margin:0;padding:0;border:0;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-2);overflow:hidden;color:inherit}.ui-card__media>img{display:block;width:100%;height:100%;object-fit:cover}button.ui-card__media,a.ui-card__media{cursor:pointer}.ui-card__media:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:-2px}.ui-card__body{display:grid;justify-items:start;gap:var(--ui-space-2, 8px);padding:var(--ui-space-3, 12px) var(--ui-space-4, 16px);min-width:0}.ui-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2, 8px);margin-top:auto;padding:0 var(--ui-space-4, 16px) var(--ui-space-3, 12px);color:var(--ui-text-muted);font-size:var(--ui-fs-caption, 13px)}.ui-modal__subtitle{display:block;margin-top:2px;font-size:var(--ui-fs-caption);line-height:16px;font-weight:450;color:var(--ui-text-muted);overflow-wrap:anywhere}.ui-modal__actions{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2)}.ui-overlay>.ui-modal{display:flex;flex-direction:column;max-height:calc(100dvh - 40px)}.ui-modal>.ui-modal__head,.ui-modal>.ui-modal__foot{flex:none}.ui-modal>.ui-modal__body{flex:1 1 auto;min-height:0;overflow:auto}:root{--ui-series-1: var(--gemboss-accent, #5661f5);--ui-series-2: #0f9f8f;--ui-series-3: #d9822b;--ui-series-4: #c2417a;--ui-series-5: #6b7280}.ui-delta{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-delta--good{color:var(--ui-success-fg)}.ui-delta--bad{color:var(--ui-danger-fg)}.ui-metrics--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--ui-space-3);margin:0}.ui-metric--lg{gap:4px;padding:var(--ui-space-3) var(--ui-space-4)}.ui-metric--lg .ui-metric__val{font-size:24px;line-height:32px}.ui-metric--lg .ui-metric__lbl{order:-1;font-size:var(--ui-fs-body)}.ui-metric__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}@media (max-width: 520px){.ui-metrics--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.ui-barlist{display:grid;gap:var(--ui-space-3);margin:0;padding:0;list-style:none;font-size:var(--ui-fs-body, 13px)}.ui-barlist>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px var(--ui-space-3)}.ui-barlist__label{min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}.ui-barlist__label a{color:inherit}.ui-barlist__val{font-weight:600;color:var(--ui-text);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.ui-barlist__share{margin-left:6px;font-weight:400;color:var(--ui-text-muted)}.ui-barlist__note{grid-column:1 / -1;margin-top:-2px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-barlist__bar{grid-column:1 / -1;position:relative;height:6px;border-radius:999px;background:var(--ui-surface-2);overflow:hidden}.ui-barlist__bar:after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v, 0) * 100%);min-width:3px;border-radius:inherit;background:var(--c, var(--ui-series-1))}.ui-chart{margin:0}.ui-chart__plot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:3px;height:180px;padding-top:18px;border-bottom:1px solid var(--ui-border);background:linear-gradient(to top,var(--ui-border) 1px,transparent 1px) 0 0 / 100% 25% repeat-y;background-origin:content-box;background-clip:content-box}.ui-chart__plot[data-max]:before{content:attr(data-max);position:absolute;top:0;left:0;font-size:var(--gemboss-fs-micro, 11px);line-height:1;color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-chart__col{position:relative;flex:1 1 0;min-width:0;max-width:48px;height:100%;display:flex;flex-direction:column-reverse}.ui-chart__col:hover{background:color-mix(in srgb,var(--ui-text) 6%,transparent)}.ui-chart__seg{display:block;flex:none;height:calc(var(--v, 0) * 100%);background:var(--c, var(--ui-series-1))}.ui-chart__dot{position:absolute;left:50%;bottom:calc(var(--v, 0) * 100%);width:8px;height:8px;margin:0 0 -4px -4px;box-sizing:border-box;border-radius:50%;background:var(--ui-surface);border:2px solid var(--c, var(--ui-text-strong, var(--ui-text)))}.ui-chart__axis{display:flex;justify-content:space-between;gap:var(--ui-space-2);margin-top:6px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:var(--ui-space-2) 0 0;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-legend__item{display:inline-flex;align-items:center;gap:6px}.ui-legend__item>i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c, var(--ui-series-1))}.ui-legend__item--dot>i{border-radius:50%;background:var(--ui-surface);border:2px solid var(--c, var(--ui-text-strong, var(--ui-text)));box-sizing:border-box}.ui-funnel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--ui-space-2);margin:0;padding:0;list-style:none}.ui-funnel>li{position:relative;display:flex;flex-direction:column;gap:2px;padding:var(--ui-space-3);border-radius:var(--ui-radius-md);background:var(--ui-surface-2);min-width:0}.ui-funnel__val{font-size:20px;font-weight:700;color:var(--ui-text);font-variant-numeric:tabular-nums;line-height:24px}.ui-funnel__lbl{font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted);overflow-wrap:anywhere}.ui-funnel__rate{order:-1;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--ui-series-1);font-variant-numeric:tabular-nums}@media (max-width: 520px){.ui-funnel{grid-auto-flow:row}}.ui-grid{display:grid;gap:var(--ui-space-4);align-items:start}.ui-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width: 1100px){.ui-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 960px){.ui-grid--2{grid-template-columns:minmax(0,1fr)}}@media (max-width: 720px){.ui-grid--3{grid-template-columns:minmax(0,1fr)}}.ui-section-head{margin:var(--ui-space-4) 0 0}.ui-section-head>h2{margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text)}.ui-section-head>p{margin:2px 0 0;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-seg{max-width:100%;overflow-x:auto}.ui-seg :is(button,a).is-text{flex:none;white-space:nowrap}@media (max-width: 360px){.ui-seg :is(button,a).is-text{padding:0 9px}}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg :is(button,a){height:44px;min-height:44px}}.ui-btn--critical{color:var(--gemboss-danger-strong)}.ui-btn--critical:hover{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong)}.ui-btn--primary.ui-btn--critical{background:var(--gemboss-danger);border-color:var(--gemboss-danger);color:var(--gemboss-on-primary)}.ui-btn--primary.ui-btn--critical:hover{background:var(--gemboss-danger-strong);border-color:var(--gemboss-danger-strong);color:var(--gemboss-on-primary)}.ui-btn--critical:focus-visible{outline-color:var(--gemboss-danger-strong)}@media (pointer: coarse),(max-width: 47.9975em){.ui-btn,.ui-btn.ui-btn--sm,.ui-select.ui-select{min-height:44px}.ui-btn--icon.ui-btn--sm,.ui-seg :is(button,a):not(.is-text){min-width:44px}}.ui-badge--success{background:var(--gemboss-success-soft);color:var(--gemboss-success-strong)}.ui-badge--warning{background:var(--gemboss-warning-soft);color:var(--gemboss-warning)}.ui-badge--critical{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong)}.ui-badge--info{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.ui-badge--dot:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}.ui-banner{--ui-banner-bg: var(--ui-surface-2);--ui-banner-fg: var(--ui-text);border-radius:var(--ui-radius-lg);overflow:hidden;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 0 0 1px var(--ui-border),0 3px 1px -1px #1a1a1a12;font-size:var(--ui-fs-body);line-height:20px}.ui-banner--success{--ui-banner-bg: var(--gemboss-success-soft);--ui-banner-fg: var(--gemboss-success-strong)}.ui-banner--warning{--ui-banner-bg: var(--gemboss-warning-soft);--ui-banner-fg: var(--gemboss-warning)}.ui-banner--critical{--ui-banner-bg: var(--gemboss-danger-soft);--ui-banner-fg: var(--gemboss-danger-strong)}.ui-banner--info{--ui-banner-bg: var(--gemboss-accent-soft);--ui-banner-fg: var(--gemboss-accent-strong)}.ui-banner__head{display:flex;align-items:center;gap:var(--ui-space-2);min-height:32px;padding:6px var(--ui-space-3);background:var(--ui-banner-bg);color:var(--ui-banner-fg)}.ui-banner__icon{flex:none;width:20px;height:20px;fill:currentColor}.ui-banner__title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--ui-fs-body);font-weight:650;line-height:20px}.ui-banner__close{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:-6px -8px -6px 0;border:0;border-radius:var(--ui-radius-md);background:transparent;color:inherit;cursor:pointer}.ui-banner__close:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.ui-banner__close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-banner__close svg{width:16px;height:16px}.ui-banner__body{padding:var(--ui-space-3) var(--ui-space-4)}.ui-banner__body>:first-child{margin-top:0}.ui-banner__body>:last-child{margin-bottom:0}.ui-banner__actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-top:var(--ui-space-3)}@media (pointer: coarse),(max-width: 47.9975em){.ui-banner__close{width:44px;height:44px;margin:-12px -12px -12px 0}}.ui-help{margin:var(--ui-space-1) 0 0;font-size:var(--ui-fs-body);line-height:20px;color:var(--ui-text-muted)}.ui-error:empty{display:none}.ui-error{display:flex;gap:6px;margin:var(--ui-space-1) 0 0;font-size:var(--ui-fs-body);line-height:20px;color:var(--gemboss-danger-strong)}.ui-error:before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat}.gemboss-field[aria-invalid=true],.gemboss-field--group:has([aria-invalid=true]),.ui-select[aria-invalid=true],.ui-textarea[aria-invalid=true]{border-color:var(--gemboss-danger-strong);background-color:var(--gemboss-danger-soft)}.ui-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;border:0;min-width:0}.ui-choices>legend{padding:0}.ui-switch>input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:32px;height:20px;margin:0;border-radius:var(--gemboss-radius-full);background:var(--gemboss-field-line);transition:background-color var(--gemboss-transition-fast) ease}.ui-switch>input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--gemboss-surface);box-shadow:0 1px 2px #0003;transition:transform var(--gemboss-transition-fast) ease}.ui-switch>input[type=checkbox]:checked{background:var(--ui-accent)}.ui-switch>input[type=checkbox]:checked:before{transform:translate(12px)}@media (prefers-reduced-motion: reduce){.ui-switch>input[type=checkbox],.ui-switch>input[type=checkbox]:before{transition:none}}.ui-tooltip{position:relative;display:inline-flex}.ui-tooltip__bubble{position:absolute;z-index:30;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);width:max-content;max-width:240px;padding:4px 8px;border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text);font-size:var(--ui-fs-body);line-height:20px;font-weight:450;box-shadow:0 8px 16px -4px #1a1a1a38,0 0 0 1px var(--ui-border);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--gemboss-transition-fast) ease}.ui-tooltip--end .ui-tooltip__bubble{left:auto;right:0;transform:none}.ui-tooltip:hover>.ui-tooltip__bubble,.ui-tooltip:focus-within>.ui-tooltip__bubble{opacity:1;visibility:visible}.ui-spinner{display:inline-block;flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:2px solid color-mix(in srgb,var(--ui-text) 18%,transparent);border-top-color:var(--ui-text);animation:ui-spin .7s linear infinite;vertical-align:middle}.ui-spinner--lg{width:44px;height:44px;border-width:4px}@keyframes ui-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-spinner{animation-duration:2s}}.ui-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--gemboss-radius-full);overflow:hidden;background:var(--gemboss-divider);color:var(--ui-accent)}.ui-progress::-webkit-progress-bar{background:var(--gemboss-divider);border-radius:inherit}.ui-progress::-webkit-progress-value{background:currentColor;border-radius:inherit}.ui-progress::-moz-progress-bar{background:currentColor;border-radius:inherit}.ui-progress--success{color:var(--gemboss-success)}.ui-progress--critical{color:var(--gemboss-danger)}.ui-modal--wide{width:min(620px,100%)}dialog.ui-modal{padding:0;max-width:calc(100% - 40px);max-height:calc(100dvh - 40px);color:var(--ui-text)}dialog.ui-modal[open]{display:flex;flex-direction:column}dialog.ui-modal::backdrop{background:#00000080}html:has(dialog.ui-modal:modal){overflow:hidden}@media (pointer: coarse),(max-width: 47.9975em){.ui-btn.ui-btn--sm{min-width:44px}}.ui-badge--wrap{white-space:normal;overflow-wrap:anywhere;line-height:16px}.ui-page-head--actions{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}.ui-page-head--actions>:first-child{min-width:0}.ui-page-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2)}.ui-chips>button.ui-tag--chip{min-height:28px;padding:4px 12px;border-radius:var(--ui-radius-md, 8px);cursor:pointer;font-family:inherit;font-size:var(--gemboss-fs-caption, 12px);color:var(--ui-text)}.ui-chips>button.ui-tag--chip:hover{background:var(--ui-surface-2);border-color:var(--ui-text-muted)}.ui-chips>button.ui-tag--chip:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:1px}.ui-chips>button.ui-tag--chip[aria-pressed=true]{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-accent-strong);font-weight:600}@media (pointer: coarse),(max-width: 47.9975em){.ui-chips>button.ui-tag--chip{min-height:44px;min-width:44px;justify-content:center}}@media (max-width: 47.9975em){.gemboss-ec-input.gemboss-ec-input textarea{font-size:16px}}.ui-seg button[aria-pressed=true]{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}:is(.gemboss-field,.ui-textarea)[readonly][readonly]{background:var(--ui-surface-2);border-color:var(--ui-border);cursor:default}.ui-modal>form{display:contents}.ui-modal>form>.ui-modal__head,.ui-modal>form>.ui-modal__foot{flex:none}.ui-modal>form>.ui-modal__body{flex:1 1 auto;min-height:0;overflow:auto}button.ui-metric{font:inherit;text-align:left;color:inherit;cursor:pointer}button.ui-metric:hover{border-color:var(--ui-text-muted)}button.ui-metric:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-metric.ui-metric:is([aria-pressed=true],[aria-current=page]){border-color:var(--gemboss-accent);box-shadow:inset 0 0 0 1px var(--gemboss-accent)}.ui-pager>a,.ui-pager>[aria-disabled=true]{min-width:32px;justify-content:center;box-sizing:border-box;gap:4px}.ui-pager>a[aria-current=page]{background:var(--ui-text);border-color:var(--ui-text);color:var(--ui-surface);font-size:var(--ui-fs-body);font-weight:600}.ui-pager>a[aria-current=page]:hover{background:var(--ui-text)}.ui-pager>[aria-disabled=true]{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);color:var(--ui-text-muted);font-size:var(--ui-fs-body);opacity:.55;cursor:default}.ui-pager>[aria-disabled=true]:hover{background:none}.ui-pager__gap{min-width:16px;text-align:center;color:var(--ui-text-muted)}.ui-pager__range{margin-left:auto;color:var(--ui-text-muted);font-size:var(--ui-fs-body);font-variant-numeric:tabular-nums}.ui-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:16px 0;color:var(--ui-text-muted);font-size:var(--ui-fs-body);text-align:center}.ui-more[hidden]{display:none}@media (pointer: coarse),(max-width: 47.9975em){.ui-pager>a,.ui-pager>[aria-disabled=true]{min-width:44px;min-height:44px}}@media (max-width: 35.9975em){.ui-pager>a:not([rel]):not([aria-current]):not([aria-disabled]),.ui-pager__gap{display:none}}.ui-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;height:var(--ui-btn-h, 28px);padding:0 12px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:var(--ui-fs-caption);font-weight:550;line-height:16px;white-space:nowrap;text-decoration:none;cursor:pointer}.ui-chip:hover{border-style:solid;background:var(--ui-surface-2)}.ui-chip:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-chip:is([aria-pressed=true],[aria-current=page],[aria-current=true]){border-style:solid;border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}@media (pointer: coarse),(max-width: 47.9975em){.ui-chip{height:auto;min-height:44px;min-width:44px}}.ui-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-space-4)}.ui-stack--tight{gap:var(--ui-space-2)}
|
package/parts/core.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* @gemboss/ui core.css — GENERATED by packages/ui/scripts/build-css.mjs from export:globals + export:tokens; do not edit
|
|
3
|
-
* gemboss commit:
|
|
3
|
+
* gemboss commit: 41849515f207ff84851bedbd29e1ad20fd1f5228
|
|
4
4
|
*/
|
|
5
5
|
*{box-sizing:border-box}:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-text-strong: #1b1c1e;--gemboss-text: #1b1c1e;--gemboss-text-muted: #686b71;--gemboss-surface: #ffffff;--gemboss-canvas: #ffffff;--gemboss-preview-canvas: #eceef1;--gemboss-rail-bg: #ffffff;--gemboss-panel-bg: #ffffff;--gemboss-divider: #e5e7ea;--gemboss-invite-h: 0px;--gemboss-divider-soft: #edeff2;--gemboss-hover: #eceef2;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-danger: #d72c0d;--gemboss-danger-strong: #b42318;--gemboss-danger-soft: #fff0e9;--gemboss-danger-border: #f5c9bc;--gemboss-success: #007f5f;--gemboss-success-strong: #0a6a4c;--gemboss-success-soft: #e3f1df;--gemboss-success-border: #b7dfcd;--gemboss-warning: #9a6700;--gemboss-warning-soft: #fff8e0;--gemboss-warning-border: #f5d569;--gemboss-radius-xs: 4px;--gemboss-radius-sm: 6px;--gemboss-radius-md: 8px;--gemboss-radius-lg: 12px;--gemboss-radius-xl: 16px;--gemboss-radius-2xl: 20px;--gemboss-radius-full: 999px;--gemboss-shadow-resting: 0 1px 2px rgba(31, 30, 29, .04), 0 2px 6px rgba(31, 30, 29, .06);--gemboss-shadow-raised: 0 4px 16px rgba(31, 30, 29, .1);--gemboss-shadow-overlay: 0 16px 48px rgba(31, 30, 29, .18);--gemboss-transition-fast: .12s;--gemboss-transition-base: .15s;--gemboss-fs-micro: 11px;--gemboss-fs-caption: 12px;--gemboss-fs-body: 14px;--gemboss-fs-body-lg: 16px;--gemboss-fs-h3: 16px;--gemboss-fs-h2: 20px;--gemboss-fs-h1: 24px;--gemboss-fs-display: 30px;--gemboss-dark-bg: #0a0a0c;--gemboss-dark-rail: #0e0e11;--gemboss-dark-surface: #16161a;--gemboss-dark-surface-2: #1e1e24;--gemboss-dark-divider: #2a2a31;--gemboss-dark-text: #ededf0;--gemboss-dark-muted: #9a9aa4;--gemboss-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--gemboss-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--gemboss-field-bg: #fdfdfd;--gemboss-field-bg-hover: #fafafa;--gemboss-field-ink: #303030;--gemboss-field-placeholder: #616161;--gemboss-field-line: #8a8a8a;--gemboss-field-line-hover: #616161;--gemboss-field-line-active: #1a1a1a;--gemboss-chip-ink: #303633;--gemboss-chip-line: #cfd6ce;--gemboss-chip-line-hover: #aab4ad;--gemboss-chip-bg-hover: #f6f7f5;--gemboss-on-primary: #ffffff;--gemboss-topbar-bg: rgba(255, 255, 255, .98);--gemboss-nav-bg: var(--gemboss-surface);--gemboss-nav-hover: rgba(20, 19, 18, .045)}:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-app-bg: #ffffff}
|
package/parts/shell.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* @gemboss/ui shell.css — GENERATED by packages/ui/scripts/build-css.mjs from export:shell + src/app-shell.css; do not edit
|
|
3
|
-
* gemboss commit:
|
|
3
|
+
* gemboss commit: 41849515f207ff84851bedbd29e1ad20fd1f5228
|
|
4
4
|
*/
|
|
5
5
|
.gemboss-popover-surface{background:var(--gemboss-surface);background:color-mix(in srgb,var(--gemboss-surface) 93%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-lg);box-shadow:var(--gemboss-shadow-raised)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.gemboss-popover-surface{background:var(--gemboss-surface)}}.icon-nav{position:fixed;top:56px;left:0;z-index:200;height:calc(100dvh - 56px);background:var(--gemboss-rail-bg);border-right:1px solid var(--gemboss-divider);display:flex;flex-direction:column;padding-top:8px;overflow:hidden}.gemboss-account-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;z-index:320;overflow:hidden}.gemboss-account-menu-item,.ui-menu__item{display:block;width:100%;min-height:44px;padding:12px 16px;border:0;background:transparent;font:inherit;font-size:13px;color:var(--gemboss-text);text-align:left;text-decoration:none;cursor:pointer;transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-account-menu-item:hover,.ui-menu__item:hover{background:var(--gemboss-hover)}.gemboss-account-menu-item:focus-visible,.ui-menu__item:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:-2px;background:var(--gemboss-hover)}.gemboss-account-menu-item.danger,.ui-menu__item--danger{color:var(--gemboss-danger-strong)}.gemboss-account-chip{width:30px;height:30px;border:1px solid #cfd6ce;border-radius:var(--gemboss-radius-full);background:#f5f7f4;color:#303633;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:11px;font-weight:700;cursor:pointer}.gemboss-platform-main{box-sizing:border-box;min-height:100dvh;padding-top:56px;background:var(--gemboss-app-bg)}.icon-nav{top:56px;height:calc(100dvh - 56px);background:var(--gemboss-nav-bg);border-right-color:var(--gemboss-divider)}@media (max-width: 1040px){.gemboss-platform-topbar{grid-template-columns:minmax(120px,1fr) minmax(220px,520px) minmax(120px,1fr)}}@media (max-width: 760px){.gemboss-platform-main{margin-left:0}}.gemboss-account-chip{width:32px;height:32px;border-radius:50%;background:var(--gemboss-primary);color:#fff;font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform var(--gemboss-transition-base) ease}.gemboss-account-chip:hover{transform:scale(1.05)}.gemboss-account-chip:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-platform-main{margin-top:56px;min-height:calc(100vh - 56px);padding:24px;background:#fafafb}@media (max-width: 768px){.gemboss-platform-main{margin-left:0;padding:16px}}.gemboss-platform-shell{display:block;min-height:100vh;background:var(--gemboss-app-bg)}.gemboss-platform-topbar{position:fixed;inset:0 0 auto;z-index:300;height:56px;border-bottom:1px solid var(--gemboss-divider);background:var(--gemboss-topbar-bg);display:grid;grid-template-columns:minmax(200px,1fr) minmax(280px,560px) minmax(200px,1fr);align-items:center;gap:16px;padding:0 16px;box-shadow:var(--gemboss-shadow-resting)}:root:has(.gemboss-platform-topbar){scroll-padding-top:64px}.gemboss-account-chip{width:32px;height:32px;border:1px solid var(--gemboss-chip-line);border-radius:var(--gemboss-radius-full);background:var(--gemboss-surface);color:var(--gemboss-chip-ink);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:11px;font-weight:700;cursor:pointer;transition:border-color var(--gemboss-transition-base) ease,background-color var(--gemboss-transition-base) ease}.gemboss-account-chip:hover{border-color:var(--gemboss-chip-line-hover);background:var(--gemboss-chip-bg-hover);transform:none}.icon-nav{position:fixed;top:56px;left:0;z-index:200;height:calc(100dvh - 56px);border-right:1px solid var(--gemboss-divider);background:var(--gemboss-nav-bg);padding-top:12px}.gemboss-platform-main{min-height:calc(100vh - 56px);margin-top:56px;background:var(--gemboss-app-bg);padding:24px}@media (max-width: 1120px){.gemboss-platform-topbar{grid-template-columns:220px minmax(220px,1fr) auto;gap:12px}}@media (max-width: 760px){.gemboss-platform-topbar{height:auto;min-height:56px;grid-template-columns:minmax(0,1fr) auto;padding:12px}.gemboss-account-chip,.icon-nav{display:none}.gemboss-platform-main{margin-left:0;padding:16px}}.gnav-scroll{scrollbar-width:thin;scrollbar-color:rgba(31,30,29,.22) transparent}.gemboss-assistant-railfoot.is-button{width:100%;border:none;background:none;cursor:pointer;text-align:left;font:inherit;border-radius:8px;transition:background .12s ease,color .12s ease}.gemboss-assistant-railfoot.is-button:hover{background:var(--gemboss-primary-soft);color:var(--gemboss-primary-dark)}.gemboss-assistant-empty{padding:24px 20px;color:var(--gemboss-text-muted);font-size:13px}@media (max-width: 760px){.gemboss-platform-topbar{display:flex;align-items:center;gap:8px;height:56px;min-height:56px;padding:0 12px}.gemboss-account-chip{display:inline-flex}.gemboss-platform-main{padding-top:16px;padding-bottom:calc(56px + env(safe-area-inset-bottom))}}@media (pointer: coarse){.gemboss-account-chip{width:44px;height:44px}.gnav-item{min-height:44px}.gemboss-assistant-collapse,.gemboss-assistant-newchat{min-height:44px;min-width:44px}}.icon-nav{width:240px;padding:12px 0 0;overflow:hidden;background:var(--gemboss-nav-bg);display:flex;flex-direction:column}.gnav-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-inline:12px}.gnav-bottom{padding:0 12px 12px}.gnav-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;margin:1px 0;border:0;background:transparent;cursor:pointer;text-align:left;border-radius:var(--gemboss-radius-md);text-decoration:none;font-family:inherit;color:var(--gemboss-text);font-size:var(--gemboss-fs-body);font-weight:500;line-height:1.2;transition:background-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gnav-item:hover{background:var(--gemboss-nav-hover)}.gnav-item:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gnav-item.active{color:var(--gemboss-active-fg);font-weight:600}.gnav-group:not(.has-active-child)>.gnav-item.active{background:var(--gemboss-active-bg)}.gnav-group:not(.has-active-child)>.gnav-item.active:hover{background:var(--gemboss-active-bg)}.gnav-group.has-active-child>.gnav-item.active:hover{background:var(--gemboss-nav-hover)}.gnav-ico{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center}.gnav-ico svg{width:20px;height:20px;fill:currentColor}.gnav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gnav-sub{list-style:none;margin:1px 0 6px;padding:0}.gnav-subitem{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 6px 44px;margin:1px 0;border-radius:var(--gemboss-radius-sm);color:var(--gemboss-text-muted);font-size:13px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}@media (pointer: coarse){.gnav-subitem{min-height:44px}}.gnav-subitem:hover{background:var(--gemboss-nav-hover);color:var(--gemboss-text)}.gnav-subitem.active{color:var(--gemboss-active-fg);font-weight:600;background:var(--gemboss-active-bg)}.gnav-subitem.active:hover{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}.gnav-subitem.active:before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:3px;height:15px;border-radius:2px;background:var(--gemboss-primary)}.gnav-subitem.is-soon{opacity:.5;cursor:default}.gnav-subitem em{font-style:normal;font-size:var(--gemboss-fs-micro);font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-sm);padding:1px 6px}.gnav-sep{height:1px;background:var(--gemboss-divider);margin:8px 6px}.gnav-item.gnav-assistant{color:var(--gemboss-accent-strong);font-weight:600;background:var(--gemboss-accent-soft)}.gnav-item.gnav-assistant .gnav-ico svg{fill:var(--gemboss-accent)}.gnav-item.gnav-assistant:hover{background:color-mix(in srgb,var(--gemboss-accent) 16%,var(--gemboss-surface))}.gnav-item.gnav-assistant.active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}.gnav-item.gnav-assistant.active .gnav-ico svg{fill:var(--gemboss-active-fg)}.gemboss-platform-main{margin-left:240px}.gemboss-mobile-menu-btn,.gemboss-mobile-nav-backdrop{display:none}@media (max-width: 760px){.gemboss-platform-main{margin-left:0;padding-bottom:env(safe-area-inset-bottom)}.gemboss-mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;margin-left:-2px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:var(--gemboss-text)}.gemboss-mobile-menu-btn:active{background:var(--gemboss-hover)}.icon-nav{display:flex;width:min(82vw,300px);transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:none}.gemboss-platform-shell.is-mobile-nav-open .icon-nav{transform:translate(0);box-shadow:2px 0 26px #1f1e1d33}.gemboss-mobile-nav-backdrop{display:block;position:fixed;inset:56px 0 0;width:100%;border:0;padding:0;background:#14131261;opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:999}.gemboss-platform-shell.is-mobile-nav-open .gemboss-mobile-nav-backdrop{opacity:1;pointer-events:auto}}@media (max-width: 305.98px){.gemboss-platform-topbar{padding:0 8px}}@media (min-width: 306px) and (max-width: 460px){.gemboss-platform-topbar{padding:0 8px}.gemboss-mobile-menu-btn,.gemboss-account-chip{width:44px;height:44px}}.gemboss-assistant-chatslot{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}.gemboss-assistant-chatslot[hidden]{display:none}.gemboss-assistant-page>.gemboss-assistant-tabs{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:4px 8px 0;overflow-x:auto;scrollbar-width:none}.gemboss-assistant-tabs::-webkit-scrollbar{display:none}.gemboss-assistant-tab{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:190px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);background:transparent}.gemboss-assistant-tab.active{background:var(--gemboss-active-bg);border-color:var(--gemboss-active-bg)}.gemboss-assistant-tab-main{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:0 4px 0 8px;border:0;background:transparent;font:inherit;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);cursor:pointer}.gemboss-assistant-tab.active .gemboss-assistant-tab-main{color:var(--gemboss-text-strong)}.gemboss-assistant-tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-assistant-tab-dot{flex:0 0 auto;width:6px;height:6px;border-radius:var(--gemboss-radius-full);background:var(--gemboss-divider)}.gemboss-assistant-tab-dot.is-running{background:var(--gemboss-primary);animation:gemboss-assistant-pulse 1.4s ease-in-out infinite}.gemboss-assistant-tab-close{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--gemboss-text-muted);cursor:pointer;padding:0}.gemboss-assistant-tab-close:hover{color:var(--gemboss-text-strong)}.gemboss-assistant-tab-close svg{width:14px;height:14px}.gemboss-assistant-sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gemboss-assistant-thread-running{flex:0 0 auto;width:6px;height:6px;border-radius:var(--gemboss-radius-full);background:var(--gemboss-primary);animation:gemboss-assistant-pulse 1.4s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.gemboss-assistant-tab-dot.is-running,.gemboss-assistant-thread-running{animation:none}}.gemboss-assistant-route-claim{display:block;height:100%}.gemboss-assistant-layout.is-dock{height:auto;min-height:0}.gemboss-assistant-layout.is-dock .gemboss-assistant-page{height:auto;max-width:none;padding:4px 0 8px}.gnav-item.gnav-assistant{position:relative}body.gemboss-assistant-busy .gnav-item.gnav-assistant:after,body.gemboss-assistant-unread .gnav-item.gnav-assistant:after{content:"";position:absolute;top:6px;left:26px;width:8px;height:8px;border-radius:50%;border:2px solid var(--gemboss-surface)}body.gemboss-assistant-busy .gnav-item.gnav-assistant:after{background:var(--gemboss-primary);animation:gemboss-assistant-pulse 1.4s ease-in-out infinite}body.gemboss-assistant-unread .gnav-item.gnav-assistant:after{background:var(--gemboss-success-strong)}@media (prefers-reduced-motion: reduce){body.gemboss-assistant-busy .gnav-item.gnav-assistant:after{animation:none}}.gemboss-assistant-layout{display:flex;height:calc(100dvh - 56px);width:100%;min-height:0}.gemboss-assistant-rail{flex:0 0 264px;width:264px;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--gemboss-divider);background:transparent;padding:16px 12px 12px;gap:12px;transition:flex-basis .18s ease,width .18s ease}.gemboss-assistant-rail-top{display:flex;align-items:center;gap:6px}.gemboss-assistant-newchat{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;padding:12px;border:1px solid var(--gemboss-divider);border-radius:12px;background:transparent;color:var(--gemboss-text);font-size:var(--gemboss-fs-body);font-weight:600;cursor:pointer;transition:background .12s ease,border-color .12s ease}.gemboss-assistant-newchat:hover{background:#00000009;border-color:var(--gemboss-text-muted)}.gemboss-assistant-newchat svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}.gemboss-assistant-newchat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.gemboss-assistant-kbd{flex:0 0 auto;font-size:var(--gemboss-fs-micro);font-weight:600;line-height:1;padding:4px 6px;border:1px solid var(--gemboss-divider);border-radius:6px;background:transparent;color:var(--gemboss-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.gemboss-assistant-search:focus-within .gemboss-assistant-kbd{display:none}.gemboss-assistant-collapse{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.gemboss-assistant-collapse:hover{background:#0000000d;color:var(--gemboss-text)}.gemboss-assistant-collapse svg{width:16px;height:16px;fill:currentColor}.gemboss-assistant-search{gap:6px}.gemboss-assistant-search>svg{width:15px;height:15px;fill:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-assistant-search-clear{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:6px;background:transparent;color:var(--gemboss-text-muted);cursor:pointer}.gemboss-assistant-search-clear:hover{background:#00000012;color:var(--gemboss-text)}.gemboss-assistant-search-clear svg{width:13px;height:13px;fill:currentColor}.gemboss-assistant-railfoot{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 12px 2px;border-top:1px solid var(--gemboss-divider);margin-top:4px;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption);line-height:1.35}.gemboss-assistant-railfoot svg{width:13px;height:13px;flex:0 0 auto;fill:currentColor;opacity:.8}.gemboss-assistant-threads{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.gemboss-assistant-threads-empty{padding:16px 8px;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption)}.gemboss-assistant-group{display:flex;flex-direction:column;gap:2px}.gemboss-assistant-group+.gemboss-assistant-group{margin-top:12px}.gemboss-assistant-group-label{padding:4px 12px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gemboss-text-muted);text-transform:uppercase}.gemboss-assistant-thread{position:relative;display:flex;align-items:center;border-radius:8px;transition:background .12s ease}.gemboss-assistant-thread:hover{background:var(--gemboss-hover, rgba(0,0,0,.04))}.gemboss-assistant-thread.active{background:#00000012}.gemboss-assistant-thread-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border:0;background:transparent;text-align:left;cursor:pointer}.gemboss-assistant-thread-titlerow{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.gemboss-assistant-pin-dot{width:12px;height:12px;flex:0 0 auto;fill:var(--gemboss-text-muted)}.gemboss-assistant-thread-title{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;color:var(--gemboss-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gemboss-assistant-thread-meta{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gemboss-assistant-thread.menu-open{background:#00000012}.gemboss-assistant-thread.menu-open .gemboss-assistant-thread-actions{opacity:1}.gemboss-assistant-menu{z-index:60;width:184px;padding:6px;display:flex;flex-direction:column}.gemboss-assistant-menu-confirm{padding:8px 12px 6px;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--gemboss-text)}.gemboss-assistant-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;text-align:left;font-size:13px;color:var(--gemboss-text);cursor:pointer}.gemboss-assistant-menu button:hover{background:var(--gemboss-hover, rgba(0,0,0,.05))}.gemboss-assistant-menu button.danger{color:var(--gemboss-danger-strong)}.gemboss-assistant-menu button svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}.gemboss-assistant-thread-actions{position:absolute;right:6px;display:flex;gap:2px;opacity:0;transition:opacity .12s ease}.gemboss-assistant-thread:hover .gemboss-assistant-thread-actions,.gemboss-assistant-thread:focus-within .gemboss-assistant-thread-actions{opacity:1}.gemboss-assistant-thread-act{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.gemboss-assistant-thread-act:hover{background:#00000012;color:var(--gemboss-text)}.gemboss-assistant-thread-act.danger:hover{color:var(--gemboss-danger-strong)}.gemboss-assistant-thread-act svg{width:15px;height:15px;fill:currentColor}.gemboss-assistant-thread.editing{background:#00000012}.gemboss-assistant-thread-edit{display:flex;align-items:center;gap:2px;width:100%;padding:6px}.gemboss-assistant-thread-edit input{flex:1 1 auto;min-width:0}.gemboss-assistant-layout .gemboss-assistant-page{height:100%;max-width:820px;flex:1 1 auto;min-width:0;padding-top:16px}.gemboss-assistant-layout .gemboss-assistant-page.is-switching{opacity:.55;transition:opacity .12s ease;pointer-events:none}.gemboss-assistant-rail.is-collapsed{flex-basis:60px;width:60px;padding:16px 8px 12px}.gemboss-assistant-rail.is-collapsed .gemboss-assistant-rail-top{flex-direction:column;gap:8px}.gemboss-assistant-rail.is-collapsed .gemboss-assistant-newchat{justify-content:center;padding:8px;flex:0 0 auto}.gemboss-assistant-rail.is-collapsed .gemboss-assistant-newchat span,.gemboss-assistant-rail.is-collapsed .gemboss-assistant-search,.gemboss-assistant-rail.is-collapsed .gemboss-assistant-railfoot,.gemboss-assistant-rail.is-collapsed .gemboss-assistant-threads{display:none}@media (max-width: 760px){.gemboss-assistant-rail{flex-basis:60px;width:60px;padding:16px 8px 12px}.gemboss-assistant-rail .gemboss-assistant-rail-top{flex-direction:column;gap:8px}.gemboss-assistant-newchat{justify-content:center;padding:8px;flex:0 0 auto}.gemboss-assistant-newchat span,.gemboss-assistant-search,.gemboss-assistant-railfoot,.gemboss-assistant-threads,.gemboss-assistant-collapse{display:none}}.gemboss-assistant-page{height:calc(100dvh - 56px);width:100%;max-width:760px;margin:0 auto;padding:24px 0 16px;display:flex;flex-direction:column;min-height:0}.gemboss-assistant-page>*{flex:1 1 auto;min-height:0}.gemboss-assistant-empty{flex:1;display:grid;place-items:center;color:var(--gemboss-text-muted);font-size:14px}.gemboss-platform-shell{display:flow-root}.gemboss-platform-main{padding-bottom:calc(24px + var(--gemboss-invite-h, 0px))}.gb-account{position:relative}.gb-account>summary{list-style:none}.gb-account>summary::-webkit-details-marker{display:none}.gb-account-head{padding:12px 16px;border-bottom:1px solid var(--gemboss-divider)}.gb-account-name{font-size:13px;font-weight:600;color:var(--gemboss-text-strong)}.gb-account-email{font-size:12px;color:var(--gemboss-text-muted)}.gb-account-role{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:600;color:var(--gemboss-active-fg);background:var(--gemboss-active-bg)}.gb-account-form{margin:0}.gnav-scroll::-webkit-scrollbar{width:9px}.gnav-scroll::-webkit-scrollbar-track{background:transparent}.gnav-scroll::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid transparent;background-clip:content-box}@keyframes gemboss-assistant-pulse{0%,to{opacity:1}50%{opacity:.35}}:where(html,body,button){font-family:var(--gemboss-font-sans)}:where(body){font-size:13px;line-height:20px;font-weight:450;color:var(--gemboss-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where(h1,h2,h3){letter-spacing:-.01em;line-height:1.3}:where(.gemboss-platform-shell) :where(h1,h2,h3,h4,h5,h6,p):where(:not([class])):not(:where(.ui-prose,[data-content],[class*=prose i],[class*=markdown i],.md-body,.recap-md,.asst-md,.article-body) *){margin:0;font-size:1em;font-weight:inherit;line-height:inherit}.gemboss-topbar-start{display:flex;align-items:center;gap:8px;min-width:0}.gemboss-topbar-center{display:flex;justify-content:center;min-width:0}.gemboss-topbar-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}@media (max-width: 760px){.gemboss-topbar-center{flex:1 1 0;min-width:96px;justify-content:flex-start}.gemboss-topbar-center:empty{min-width:0}.gemboss-topbar-end:empty{display:none}.gemboss-topbar-end{flex:0 0 auto}.gemboss-topbar-start{flex:0 1 auto}.gemboss-topbar-start>.gemboss-mobile-menu-btn{flex:0 0 auto}.gemboss-topbar-start>.gb-brand{min-width:44px}}.gnav-heading{padding:10px 12px 4px;font-size:var(--gemboss-fs-micro);font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gnav-scroll>.gnav-heading:first-child,.gnav-scroll>.gnav-section:first-child>.gnav-heading:first-child{padding-top:2px}.gnav-count{margin-left:auto;flex:0 0 auto;min-width:20px;padding:0 6px;border-radius:var(--gemboss-radius-full);background:var(--gemboss-hover);color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-micro);font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}.gnav-item.active .gnav-count{background:var(--gemboss-primary);color:var(--gemboss-on-primary)}.gnav-item:is([aria-busy=true],:has(>.gnav-pending)),.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)){cursor:progress}.gnav-item:is([aria-busy=true],:has(>.gnav-pending))>.gnav-ico>*{visibility:hidden}.gnav-item:is([aria-busy=true],:has(>.gnav-pending))>.gnav-ico:after,.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)):after,.gb-pending-mark{content:"";display:inline-block;vertical-align:middle;grid-area:1 / 1;flex:none;box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color:currentColor;animation:gnav-spin .7s linear infinite}.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)):after{position:absolute;left:22px;top:50%;margin-top:-6px;width:12px;height:12px;border-width:1.5px}@keyframes gnav-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.gnav-item:is([aria-busy=true],:has(>.gnav-pending))>.gnav-ico:after,.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)):after,.gb-pending-mark{animation-duration:2s}}a[data-gb-pending]:has(>.gb-pending-mark),a[data-gb-pending][aria-busy=true]{cursor:progress}a[data-gb-pending]>.gb-pending-mark{display:inline-block;width:12px;height:12px;border-width:1.5px;margin-left:6px;vertical-align:-1px}a[data-gb-pending=corner]{position:relative}a[data-gb-pending=corner]>.gb-pending-mark{position:absolute;top:12px;right:12px;width:16px;height:16px;margin:0}.gb-route-holding{padding-top:4px}.gb-route-holding .ui-skeleton{gap:16px}.gb-route-holding__heading{margin:0 0 20px;font-size:20px;font-weight:650;line-height:1.3;color:var(--gemboss-text)}.gb-route-holding .ui-skeleton__line{height:10px}.gb-route-holding .ui-skeleton__line.gb-route-holding__title{height:20px;width:34%;margin-bottom:8px}.gb-route-holding .ui-skeleton__line:nth-last-child(4){width:46%}.gb-route-holding .ui-skeleton__line:nth-last-child(3){width:92%}.gb-route-holding .ui-skeleton__line:nth-last-child(2){width:78%}.gb-route-holding .ui-skeleton__line:nth-last-child(1){width:61%}.gb-route-cover{display:none}html[data-gb-navigating] .gb-route-cover{display:block;position:fixed;inset:56px 0 0 240px;z-index:5;overflow:hidden;box-sizing:border-box;padding:24px;background:var(--gemboss-app-bg);pointer-events:none;animation:gb-route-cover-in .08s ease-out both}@keyframes gb-route-cover-in{0%{opacity:0}to{opacity:1}}@media (max-width: 760px){html[data-gb-navigating] .gb-route-cover{left:0;padding:16px}}@media (prefers-reduced-motion: reduce){html[data-gb-navigating] .gb-route-cover{animation-duration:0s}}.gnav-pending{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.gb-brand{min-width:0;height:40px;margin:0;padding:0 8px;border-radius:var(--gemboss-radius-md);display:inline-flex;align-items:center;gap:4.5px;color:var(--gb-brand-ink, #14151a);text-decoration:none;transition:background-color var(--gemboss-transition-base) ease}.gb-brand:hover{background:var(--gemboss-hover)}.gb-brand:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gb-brand-gem{display:block;flex:0 0 auto}.gb-brand-name{font-family:Inter,var(--gemboss-font-sans);font-size:13.3px;font-weight:700;letter-spacing:-.13px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media (max-width: 460px){.gb-brand-name{display:none}.gb-brand{min-width:44px;height:44px;justify-content:center}}.gemboss-topbar-search{width:100%;max-width:560px;height:36px;min-width:0;margin:0 auto;border:1px solid var(--gemboss-field-line);border-radius:var(--gemboss-radius-md);background:var(--gemboss-field-bg);padding:0 8px 0 12px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;color:var(--gemboss-text-muted)}.gemboss-topbar-search:hover{border-color:var(--gemboss-field-line-hover);background:var(--gemboss-field-bg-hover)}.gemboss-topbar-search:focus-within{border-color:var(--gemboss-field-line-active);background:var(--gemboss-surface)}.gemboss-topbar-search-icon{width:18px;height:18px;color:currentColor}.gemboss-topbar-search-input{min-width:0;height:calc(100% + 2px);border:0;background:transparent;padding:0;margin:-1px 0;font:inherit;font-size:var(--gemboss-fs-body);line-height:18px;color:var(--gemboss-field-ink);outline:none}.gemboss-topbar-search-input::placeholder{color:var(--gemboss-field-placeholder);opacity:1}.gemboss-topbar-search-kbd{border:1px solid var(--gemboss-field-line);border-radius:var(--gemboss-radius-sm);background:var(--gemboss-surface);padding:1px 6px;color:var(--gemboss-text-muted);font-family:inherit;font-size:var(--gemboss-fs-micro);line-height:16px}.gemboss-topbar-search:focus-within .gemboss-topbar-search-kbd{display:none}@media (pointer: coarse),(max-width: 47.9975em){.gemboss-topbar-search{height:44px}}@media (max-width: 460px){.gemboss-topbar-search-kbd{display:none}}.ui-page{box-sizing:border-box;width:100%;min-width:0;max-width:var(--ui-content-max, 900px);margin-inline:auto}.ui-page--feed{max-width:720px}.ui-page--form{max-width:662px}.ui-page--canvas{max-width:1440px}.ui-page--full{max-width:none}.ui-menu__item{display:flex;align-items:center;gap:var(--ui-space-2);white-space:nowrap;border-radius:var(--ui-radius-sm)}@media (max-width: 47.9975em){.gemboss-assistant-collapse,.gemboss-assistant-newchat{min-height:44px;min-width:44px}}
|
package/src/editor/controls.tsx
CHANGED
|
@@ -14,7 +14,7 @@ import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surfac
|
|
|
14
14
|
import { useEffect, useId, useRef, useState } from "react";
|
|
15
15
|
import type React from "react";
|
|
16
16
|
import { cssUrl } from "./css-url";
|
|
17
|
-
import { swatchState, swatchWhy } from "./swatch";
|
|
17
|
+
import { opacityOf, pickSwatch, swatchState, swatchWhy, withOpacity } from "./swatch";
|
|
18
18
|
import { Segmented } from "../segmented";
|
|
19
19
|
|
|
20
20
|
const blurOnEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
@@ -153,34 +153,78 @@ export interface ColorControlProps {
|
|
|
153
153
|
/** The field's name; the swatch is announced as "<label> swatch". */
|
|
154
154
|
label: string;
|
|
155
155
|
placeholder?: string;
|
|
156
|
+
/** Colours offered as chips while the field is in use (the focus inside it): the theme's colours by role, each with the colour
|
|
157
|
+
* the page draws for it, then the ones used lately. A click writes `value`. None: no chips (the theme inspector, no page). */
|
|
158
|
+
choices?: readonly ColorChoice[];
|
|
156
159
|
}
|
|
157
160
|
|
|
161
|
+
/** One chip: what it writes (`var(--gem-color-accent)`, `#3366ff`), what it is called, and the colour it paints. */
|
|
162
|
+
export interface ColorChoice { value: string; label: string; swatch: string }
|
|
163
|
+
|
|
158
164
|
/**
|
|
159
|
-
* `.gemboss-ei-color`: a native swatch beside a text box
|
|
160
|
-
*
|
|
161
|
-
*
|
|
165
|
+
* `.gemboss-ei-color`: a native swatch beside a text box, and the colour's opacity in percent. The swatch shows any one colour
|
|
166
|
+
* (`swatchState`: hex, rgb, hsl, oklch) and a pick keeps the value's transparency and way of writing (`pickSwatch`); it is
|
|
167
|
+
* DISABLED (with the reason under it) for what is not one colour, a token or a gradient: `<input type="color">` would show
|
|
168
|
+
* black for it and overwrite it with black on the first touch. The opacity box shows for a colour only (A4, 21/10/2026: 17% of
|
|
169
|
+
* the colours on real pages carry an alpha, which no control could change).
|
|
162
170
|
*/
|
|
163
|
-
export function ColorControl({ id, value, onChange, disabled, label, placeholder }: ColorControlProps) {
|
|
171
|
+
export function ColorControl({ id, value, onChange, disabled, label, placeholder, choices }: ColorControlProps) {
|
|
164
172
|
const [draft, setDraft] = useState(value);
|
|
165
173
|
useEffect(() => { setDraft(value); }, [value]);
|
|
174
|
+
// THE THEME'S COLOURS, CLICKED (A4b, 21/10/2026; Chris: "bấm trước gõ sau"): while the field is in use its chips show under it,
|
|
175
|
+
// and go when the focus leaves it, so a panel of colour fields is no longer for them. A theme colour the field holds shows on
|
|
176
|
+
// the swatch as the colour the page draws for it, and a pick there writes that colour as your own.
|
|
177
|
+
const [inUse, setInUse] = useState(false);
|
|
178
|
+
const chosen = choices?.find((c) => c.value === draft.trim()) ?? null;
|
|
179
|
+
const shown = chosen ? swatchState(chosen.swatch) : null;
|
|
166
180
|
// NOT SET IS NOT BLACK (control standard §13b U7, Chris 20/10/2026): an empty colour drew the swatch black beside "Not set", so a
|
|
167
181
|
// seller read a colour nobody chose. Empty, the swatch is white with the slash a colour picker draws for "none" (editor.css
|
|
168
182
|
// `[data-empty]`), and opens on white.
|
|
169
183
|
const empty = !draft.trim();
|
|
170
|
-
const { swatch, usable } = swatchState(draft, "#ffffff");
|
|
184
|
+
const { swatch, usable } = shown?.usable ? shown : swatchState(draft, "#ffffff");
|
|
171
185
|
// Why the swatch is off, said under it, read with it (a tooltip alone reached neither a finger nor the keys). The COMMITTED
|
|
172
186
|
// value's reason, and kept while the panel saves (it disables every field): taken from the draft or dropped while saving, the
|
|
173
187
|
// line came and went on every write and while a hex was typed (review of #4636). A draft that is a whole hex has none.
|
|
174
188
|
const why = usable ? null : swatchWhy(value);
|
|
175
189
|
const whyId = useId();
|
|
190
|
+
// The opacity, as typed until it is committed (blur / Enter): "50", "50%" or " 50 % " all read 50; anything else changes nothing.
|
|
191
|
+
const opacity = opacityOf(draft);
|
|
192
|
+
const [alphaDraft, setAlphaDraft] = useState<string | null>(null);
|
|
193
|
+
const commitAlpha = (raw: string) => {
|
|
194
|
+
setAlphaDraft(null);
|
|
195
|
+
const n = Number(raw.replace(/%/g, "").trim());
|
|
196
|
+
if (!raw.trim() || !Number.isFinite(n)) return;
|
|
197
|
+
const next = withOpacity(draft, n);
|
|
198
|
+
if (next !== draft) { setDraft(next); onChange(next); }
|
|
199
|
+
};
|
|
176
200
|
return (
|
|
177
|
-
<div className="gemboss-ei-color"
|
|
201
|
+
<div className="gemboss-ei-color" onFocus={() => setInUse(true)}
|
|
202
|
+
onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setInUse(false); }}>
|
|
178
203
|
<input type="color" className="gemboss-ei-swatch" aria-label={`${label} swatch`} value={swatch} data-empty={empty ? "" : undefined}
|
|
179
204
|
disabled={disabled || !usable}
|
|
180
205
|
title={usable ? undefined : swatchWhy(draft) ?? undefined} aria-describedby={why ? whyId : undefined}
|
|
181
|
-
onChange={(e) => {
|
|
206
|
+
onChange={(e) => { const next = pickSwatch(chosen ? chosen.swatch : draft, e.target.value); setDraft(next); onChange(next); }} />
|
|
182
207
|
<input id={id} className="gemboss-field gemboss-ei-inp" placeholder={placeholder ?? "Not set"} value={draft} disabled={disabled}
|
|
183
208
|
onChange={(e) => setDraft(e.target.value)} onBlur={() => onChange(draft)} onKeyDown={blurOnEnter} />
|
|
209
|
+
{/* A fixed narrow box beside the wide one (the row's own rule makes every .gemboss-ei-inp flex: 1): inline, not a new rule. */}
|
|
210
|
+
{opacity !== null ? (
|
|
211
|
+
// `data-alpha`: the hook editor-plain.js finds it by (the same box on a page without React).
|
|
212
|
+
<input className="gemboss-field gemboss-ei-inp" data-alpha="" aria-label={`${label} opacity`} inputMode="numeric" style={{ flex: "0 0 64px" }}
|
|
213
|
+
value={alphaDraft ?? `${opacity}%`} disabled={disabled}
|
|
214
|
+
onChange={(e) => setAlphaDraft(e.target.value)} onBlur={(e) => commitAlpha(e.target.value)} onKeyDown={blurOnEnter} />
|
|
215
|
+
) : null}
|
|
216
|
+
{inUse && choices?.length ? (
|
|
217
|
+
// The kit's colour chips (.gemboss-ei-swatches / .gemboss-ei-sw, the theme inspector's Background row), on a line of their own.
|
|
218
|
+
<div className="gemboss-ei-swatches" role="group" aria-label={`${label} colors`} style={{ flexBasis: "100%", flexWrap: "wrap" }}>
|
|
219
|
+
{choices.map((c) => {
|
|
220
|
+
const on = c.value === draft.trim();
|
|
221
|
+
return (
|
|
222
|
+
<button key={c.value} type="button" className={`gemboss-ei-sw${on ? " on" : ""}`} title={c.label} aria-label={c.label} aria-pressed={on}
|
|
223
|
+
style={{ background: c.swatch }} disabled={disabled} onClick={() => { setDraft(c.value); onChange(c.value); }} />
|
|
224
|
+
);
|
|
225
|
+
})}
|
|
226
|
+
</div>
|
|
227
|
+
) : null}
|
|
184
228
|
{why ? <p id={whyId} className="gemboss-ei-color-why">{why}</p> : null}
|
|
185
229
|
</div>
|
|
186
230
|
);
|