@ 2lab.ai/ ui (英语)

2lab soma-work仪表板的代理UI组件,作为 Web 组件 零运行时间依赖.

演示文件( D) : https://2lab.ai/ui* (中文(简体) )* 联合国

表面——物剂周围的页平面块(0.6.0):

页面部分——应用程序周围的页面:设置,内存,登录 (0.9.0):

原始内容——构件为仪表板共享,语气和动作相同:

基金会: @2lab.ai/ui/icons (16克、1.5克) currentColor SVG 设置 - icon('gear') 返回 SVG 字符串)和 @2lab.ai/ui/ui-kit.css (轻-DOM课在同一个符号上: .ui-btn 用一出墨水为主, .ui-icon-btn, (中文(简体) ), .ui-fab - 圆形,或 .is-extended 用一个词 .is-folded 折叠而去, .ui-chip (单位:千美元).is-sm· ; .is-toned 带有内线 --ui-tone 用于每样颜色,如环境标记——标记,而不是切换:按住并徘徊状态保持平原芯片的状态, .ui-select-chip (当地人) <select> 读作标签大小的芯片, 单独或在一个 <label> 以白话盟誓, .ui-spinner (工作戒指;一个有点的平地戒指, .ui-status, (中文(简体) ), .ui-kbd, (中文(简体) ), .ui-dl, (中文(简体) ), .ui-skeleton, (中文(简体) ), .ui-empty, (中文(简体) ), .ui-status-line, (中文(简体) ), .ui-avatar, (中文(简体) ), .ui-owner-badge (板名药; .is-self 轨道 - syncOwnerBadgeOrbit(el) 保持与董事会一致, .ui-sr-only, (中文(简体) ), .ui-expand, (中文(简体) ), .ui-section-head 带有 .ui-count 徽章和页面部分 .ui-input, (中文(简体) ), .ui-switch, (中文(简体) ), .ui-card, (中文(简体) ), .ui-notice, (中文(简体) ), .ui-row 这行就是页面, aria-current="page"保持盘旋状态。 韩语口语( O)lang="ko")在文字之间断开,从不包含在其中,在每一个元素中和 每节套件类(word-break: keep-all) (中文(简体) ).

设计——整个寻找用这些部件建造的场地(0.38.0): data-design="<id>" 打开 <html> (与 tokens.css) 重唱 每一个元素和工具包类,锁定在设计中的颜色方案,以及 designs/<id>/DESIGN.md 在这个寄存器中保持其语气和方式 (排出,类型,组成,验收清单). 开始于 designs/README.md; 现场直播 https://2lab.ai/ui/docs/designs 互联网档案馆的存檔,存档日期2013-12-22。 。 。 .

服务器 - @2lab.ai/ui/server,其中没有元素的条目: authCardHtml(data) 使认证卡成为声明阴影 将元素根接到水合物的位置, authCardCss 作为其数据的工作表,其中 tokensCss, (中文(简体) ), kitCss, (中文(简体) ), icon() 和逃亡者, 没什么 它在负载时会触碰DOM,所以它运行在节点上作为无害环境管理(HEM)import或普通JS( 普通JS ) (require,则 .cjs ); 其类型 节点Next和节点10(typesVersions) (中文(简体) ).

// a route handler, ESM or CommonJS — the page works before (and without) the script
const { authCardHtml, tokensCss } = require('@2lab.ai/ui/server');
res.send(`<style>${tokensCss}</style>${authCardHtml(data, { page: true })}<script type="module" src="/lib/auth-card.js"></script>`);

声音 – 选入接口提示 (0. 11: 0): 每个元素都会为人物刚刚的行为打出一个短提示( 标签时跳出) 变化, 对话框打开时的空气, 运行完成时的柔和和弦). 关到人打开为止. @2lab.ai/ui/sound 实值 政策setSound, (中文(简体) ), bindSound静静的区域,选择输入),不装入音频; @2lab.ai/ui/sound-cuelume 这是 玩家 - 库鲁姆14个提示与Web Audio同步直播 没有音频文件, 捆绑后,软件包保持了零运行时的依赖性. 见 https://2lab.ai/ui/docs/sound (中文(简体) )。 。 。 .

import { bindSound, setSound } from '@2lab.ai/ui/sound';
bindSound();                                   // your own <button data-ui-sound> … sound too
// in the click that turns sound on (keep the choice beside the theme switch):
const { cuelumeSound, unlockSound } = await import('@2lab.ai/ui/sound-cuelume');
setSound({ player: cuelumeSound, enabled: true });
unlockSound();

安装

npm i @2lab.ai/ui

import '@2lab.ai/ui';                 // registers every element
import '@2lab.ai/ui/context-window';  // or just one
import '@2lab.ai/ui/tokens.css';      // optional page tokens (data-theme="dark" switches)
import '@2lab.ai/ui/ui-kit.css';      // optional light-DOM classes (buttons, chips, status …)
import { icon } from '@2lab.ai/ui/icons';
import { authCardHtml } from '@2lab.ai/ui/server';  // on a server: no DOM, no element; require() works too

无构建步骤 : <script type="module" src="https://2lab.ai/ui/lib/index.js"></script>。 。 。 .

使用

<ui-context-window lang="en"></ui-context-window>
<script type="module">
  const el = document.querySelector('ui-context-window');
  el.data = { window: 1_000_000, autoCompactAt: 750_000, parts: { cacheRead: 272300, output: 10 }, canCompact: true };
  el.addEventListener('ui-compact', async () => {
    el.data = { ...el.data, compactState: 'sending' };   // assign a new object — in-place mutation does not re-render
    await fetch('/compact', { method: 'POST' });
    el.data = { ...el.data, compactState: 'sent' };
  });
</script>

数据单位:(el.data = {...} 总是指定新对象),出事(ui-*(bbbling + 组成)。 元素从不获取。 默认使用英语, 韩语使用 lang="ko"轻/暗跟踪操作系统, theme="light|dark" 针一, --ui-* 自定义属性主题一个页面,以及 data-design="modern-mono" 应用整个设计(参见 designs/README.md) (中文(简体) ).

开发

npm i
npm run dev          # demo site with live reload
npm run verify       # biome · tsc · vitest · lib + site build · packed-tarball consumer check (NodeNext + node10 types, every element registers, require('@2lab.ai/ui/server'))

见 AGENTS.md 部分合同.

贷项

对互动模式的研究来自 影响UI 并重新执行 苏玛工作仪表板 拥有数据。 不包括影响UI代码或资产.

接口声音 : 库鲁姆 (麻省理工学院,丹尼尔·贝利) dist/sound-cuelume.js; 声音政策从 吗啡UI (麻省理工学院,Ivan Oliinyk).

六个元素从 (原始内容存档于2018-09-21) (英语). fango.dev自由地块(麻省理工,洛伦佐·卡布拉 -- https://bencho.dev/licence 页面存档备份,存于互联网档案馆:滑行到确认,代理岛(Dynamic Island),步道(Step player),动作节点, 图像比较和ASCII Wake. 班乔 Pro 块不能在组件库内传递,所以没有包含任何块.

他们的通知飞入 dist/THIRD_PARTY_NOTICES.md。 。 。 .