@adia-ai/web-模块

从 @adia-ai/web-components 组件。 组织 每艘集束舰作为子路径输出 消费者只安装他们需要的.

安装

npm install @adia-ai/web-modules @adia-ai/web-components

CDN — 无捆绑器( CodePen, 营销页, 静态 HTML)

自兹 (单位:千美元),这个包和 @adia-ai/web-components 船体预缩放 + 精密捆绑 dist/ 使用零积分工具.

Kitchen-sink 1-tag 设置(CodePen / demos / drop-in-to- any-HTML) :

<!-- CSS: all components + the shell tier you use -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/web-components.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/shell/admin-shell.min.css">

<!-- JS: everything in one bundle (components + all 4 shells + the @adia-ai/a2ui runtime; ~424 KB gzipped) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/everything.min.js"></script>

<admin-shell mode="rounded borderless">
  <admin-sidebar slot="leading" resizable collapsible>
    <admin-topbar slot="header">
      <span slot="heading">My App</span>
    </admin-topbar>
    <section-ui>
      <nav-ui>
        <nav-item-ui icon="house" text="Home" selected></nav-item-ui>
        <nav-item-ui icon="gear" text="Settings"></nav-item-ui>
      </nav-ui>
    </section-ui>
    <div data-sidebar-resize></div>
  </admin-sidebar>
  <admin-content>
    <admin-topbar>
      <breadcrumb-ui><span>Dashboard</span></breadcrumb-ui>
    </admin-topbar>
    <page-scroll>
      <page-ui band padding="10">
        <header>
          <div>
            <h1>Dashboard</h1>
            <div data-actions>
              <button-ui text="Share" variant="outline" size="sm"></button-ui>
            </div>
          </div>
          <p>Welcome back.</p>
        </header>
        <section>
          <button-ui variant="primary" text="Click me"></button-ui>
        </section>
      </page-ui>
    </page-scroll>
  </admin-content>
</admin-shell>

<!--
  Canonical admin-shell hierarchy (matches ui-kit.exe.xyz/site/index.html):
  - <nav-ui> + <nav-item-ui> is THE component pair for sidebar navigation.
  - <menu-ui> / <menu-item-ui> are for popover action menus (dropdowns), NOT for nav.
  - <admin-topbar slot="header"> goes inside <admin-sidebar> (workspace switcher / brand).
  - <admin-statusbar slot="footer"> goes inside <admin-sidebar> (user switcher / sign-in).
  - <page-scroll> wraps <page-ui band> inside <admin-content>.
  - <page-ui band>'s <header> holds <div><h1>+<div data-actions></div></div><p>.
    The <div data-actions> slot is right-aligned for page-level action buttons.
    Use <header data-flush> to drop the bottom border. (ADR-0098 — <page-ui band>
    replaces the retired <admin-page>/<admin-page-header>/<admin-page-body> family.)
  Reference: https://ui-kit.exe.xyz/site/examples/admin-dashboard +
             https://github.com/adiahealth/gen-ui-kit/blob/main/site/templates/settings.html
-->

每个壳的设置( 高级—— 仅装入一个壳层):

<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/web-components.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/shell/admin-shell.min.js"></script>

每个外壳都需要匹配的 CSS (上面的厨房-下沉示例只载入) admin-shell.min.css) (中文(简体) ). 镜像 JS 路径——换上外壳层:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/shell/admin-shell.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/chat/chat-shell.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/editor/editor-shell.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/[email protected]/dist/simple/simple-shell.min.css">

这个 @0.7 范围跟踪最新 0.6.x 补丁( 不会跳到断开处) 0.8; 标出准确的版本(例如. @0.7.13用于可再生产建筑.

选择一条捆绑的道路. 混合 everything.min.js 单独设置 web-components.min.js 原因 customElements.define 以丢出“已定义的名称”。 对于CodePen来说,厨房下沉路径是正确的.

npm-植入的消费者留在现有的集群出口上 (单位:千美元)./shell, (中文(简体) ), ./chat(见A/C.5/49/70,附件)。 新的 */bundled (中央支助)和 */js-bundled + 键 ./everything (JS)出口是添加剂——只有没有捆绑的消费者需要.

见 CDN 使用指南 用于完整的 CodePen 模板 + 工作实例.

使用人工智能特工

当用 AI 编码代理( Claude Code / Cursor / Windsurf / Claude 桌面) 编译 UI 时, 加载 adia-ui-kit 技能 它编码了95个组件目录、所有贝壳的构成模式(admin / chalch / 编辑/ 简单)和Plan-Execute-Verify 纪律,这些纪律使构成的表面成为真正的演示,以验证意图。 技术生活于 .agents/skills/screen-composition/ 在回购.

@adia-ai/web-components 实值 总是需要 (模块在运行时由组件组成). 宣布另外两个同伴依赖关系,但 仅供特定组别使用数字 :

如果你只使用 shell, (中文(简体) ), editor, (中文(简体) ), simple,或 theme 组,可以省略这两个同位素(或保留为 --legacy-peer-deps npm 下的警告。 自动安装的pnpm会默默地安装它们.

进口:JS

import '@adia-ai/web-modules';                  // every cluster
import '@adia-ai/web-modules/shell';             // admin-shell + admin-sidebar + admin-command
import '@adia-ai/web-modules/chat';              // chat-shell + chat-thread + chat-composer + …
import '@adia-ai/web-modules/editor';            // editor-shell + editor-canvas + editor-sidebar + …
import '@adia-ai/web-modules/simple';            // simple-shell + simple-content + simple-hero
import '@adia-ai/web-modules/theme';             // theme-panel
import '@adia-ai/web-modules/runtime';           // gen-root + a2ui-root

每组进口登记册 联合来文支持 仅限元素。 每个 分组还拥有 仅限 CSS 结构化儿童(例如:. admin-content, (中文(简体) ), admin-topbar, (中文(简体) ), page-scroll,参见 集群 页:1 不需要JS注册:它们完全属于普通习惯元素 由 CSS 组组成. customElements.get() 返回时 undefined 一个 里面没有虫子.

导入: CSS( 自 v. 4. 5 起)

⚠️ 需要—— shell布局取决于此 CSS. 壳牌联合材料单元 (单位:千美元)admin-shell, (中文(简体) ), chat-shell, (中文(简体) ), editor-shell, (中文(简体) ), simple-shell这样做 没有 自动导入其布局 CSS. 选择匹配 *.css 导入用于 你使用的任何外壳都使外壳成为: 无样式堆叠 <div> 要素 没有控制台错误 — 内容上方的侧边栏堆栈, 顶边栏/状态栏从取景口网格上掉出,没有抛出. 这是 由外部消费者报告的# 1 冷启动无声失败模式. 如果你的外壳看起来像一个垂直的块列表, 你错过了一条行 见下文.

CSS 的导入使用包指定符——包的 exports 地图解析 .css 向磁盘上的每个元素样式表提出的请求 :

import '@adia-ai/web-modules/shell/admin-shell.css';
import '@adia-ai/web-modules/chat/chat-shell.css';
import '@adia-ai/web-modules/editor/editor-shell.css';
import '@adia-ai/web-modules/simple/simple-shell.css';
import '@adia-ai/web-modules/theme/theme-panel.css';
import '@adia-ai/web-modules/runtime/gen-root.css';

对于v0.4.5前消费者: 如果您正在通过相对导入 CSS node_modules 路径( r)'../node_modules/@adia-ai/web-modules/editor/editor-shell/editor-shell.css'),切换到上面的包指定形式。 相对路径形态在pnpm,Yarn PnP,和npm起起伏下是脆弱的;新的包分型形态在所有三个下都有效.

不要重复目录名称. 每组儿童生活在 <cluster>/<name>/<name>.css 磁盘(例如). shell/admin-command/admin-command.css, (中文(简体) ), 这样 @adia-ai/web-modules/shell/admin-command/admin-command.css 看起来像 自然的描述者, 用简短的形式, @adia-ai/web-modules/shell/admin-command.css如上所示. 筑巢的形态静静地决定了垃圾,不存在的路径 (目录名称为四倍)而不是一个明显的"未找到"错误—— 节点的导出图通配符匹配 / 无法阻止 这个,所以不能固定在包里. 跟踪为 gh#296 (英语)。 。 。 .

导入: JS + CSS 在一行(/with-css(中文(简体) )

给 shell 组合 /with-css 选择进入会崩溃 JS + CSS 进口到单一副作用进口:

import '@adia-ai/web-modules/shell/with-css';

登记了联署材料支持的外壳元素(admin-shell, (中文(简体) ), admin-sidebar, (中文(简体) ), admin-command(中文(简体) ) 财务报告和审定财务报表 挂载外壳布局 CSS (单位:千美元)admin-shell.css 捆绑每个子组件样式。 这是一行 等于 import '@adia-ai/web-modules/shell' + 键 import '@adia-ai/web-modules/shell/admin-shell.css'。 。 。 .

默认 @adia-ai/web-modules/shell 子路径保持 CSS 自由到 保留明确进口合同ADR-0030(三); /with-css 是命名的选入。 伴侣 (单位:千美元)@adia-ai/web-modules/shell/admin-shell/with-css也存在用于 精细的进口.

每组携带一个 shell 主机 (行为唯一的管弦乐手) (单位:千美元) 贝壳级儿童家庭 (组名间隔自定义) 带有状态性语义的元素) ADR-0023. 标语词汇表是自v. 4.0起唯一公认的写作形状(ADR-0024) (中文(简体) ).

内有图案目录 @adia-ai/web-components 作为 patterns/ 直到此软件包被提取( 参见 ADR-0012) (中文(简体) ). 标记、CSS和YAML/A2UI合同不变;只有导入 路径移动.

集群

交叉包装方便子路径

generative 不是一个网络模块集群,它是一个方便桶 这拉入两个 @adia-ai/web-components 所需组件 基因UI表面。 子路径在此列出,所以消费者不必 猎取它:

战略前景的未来分组: data (坎班,过滤器, 表格工具栏, agent (代理追踪,推理板).

见 adia-ui-authoring 技术, references/shell-patterns.md (吸收) bespoke-shell-children)为三家所用克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克.

快开始

仅限无害环境管理——捆绑者(Vite、esbuilt、webpack 5+、Rollup) import 双方的发言 .js 财务报告和审定财务报表 .css; 在平面 HTML 中, 使用 <script type="module"> 联合来文和来文 <link> 为CSS服务.

⚠️ 联合材料和中央支助系统都需要每组进口. 只导入 jS给了你注册的标签 但是没有布局 见 导入: CSS 上方为失败模式.

// JS — register every component + the clusters you compose with
import '@adia-ai/web-components';        // components + nav family
import '@adia-ai/web-modules/shell';     // admin-shell + bespoke children
import '@adia-ai/web-modules/chat';      // chat-shell + bespoke children (needs @adia-ai/llm)
import '@adia-ai/web-modules/editor';    // editor-shell + bespoke children
import '@adia-ai/web-modules/runtime';   // gen-root, a2ui-root (needs @adia-ai/a2ui)
import '@adia-ai/web-modules/theme';     // theme-panel (appearance prefs)

// CSS — one stylesheet per cluster you use (REQUIRED — see callout above)
import '@adia-ai/web-components/css';              // every component's CSS
import '@adia-ai/web-modules/shell/admin-shell.css';
import '@adia-ai/web-modules/chat/chat-shell.css';
import '@adia-ai/web-modules/editor/editor-shell.css';
import '@adia-ai/web-modules/theme/theme-panel.css';

然后,在你的标记(形而上学,自v. 4.0起):

<admin-shell mode="rounded">
  <admin-sidebar slot="leading" resizable collapsible>
    <header-ui>
      <span slot="heading">App</span>
    </header-ui>
    <section-ui>
      <nav-ui>…</nav-ui>
    </section-ui>
  </admin-sidebar>
  <main>…</main>
  <admin-command>
    <command-ui placeholder="Search..."></command-ui>
  </admin-command>
</admin-shell>

现场演示 每组:

• <admin-shell>
• <chat-shell>
• <editor-shell>
• <simple-shell>
• <theme-panel>
• <gen-root> • 妇女 <a2ui-root>

三级建筑

@adia-ai/web-components   — components (button, table, card, …)
@adia-ai/web-modules      — composites (this package; clusters via subpath)
@adia-ai/web-themes       — token sets per vendor/brand (future)

模块和主题都取决于同行 web-components 直接; 它们 不要互相导入。 消费者的构成 网站,不在图书馆里。 见 ADR-0012 原理和模式/模块崩溃.

从 @adia-ai/web-components/patterns

这个 patterns/ 目录是从 @adia-ai/web-components 在 v0.0.29 中输入此套件ADR-0012) (中文(简体) ). 如果你是在升级 从前v0.0.29发布:

- import '@adia-ai/web-components/patterns/app-shell/app-shell.js';
+ import '@adia-ai/web-modules/shell';

- import '@adia-ai/web-components/patterns/adia-chat/adia-chat.js';
+ import '@adia-ai/web-modules/chat';

CSS路径也以同样的方式转移. 标签名称 + 类名称也在 v0.0.31 (ADR- 0015 –)中更改 <app-shell-ui> → <admin-shell>, (中文(简体) ), <adia-chat-ui> → <chat-shell>, (中文(简体) ), <adia-editor-ui> → <editor-shell>, (中文(简体) ), <gen-ui-ui> → <gen-root>)和v0.032(ADR-0016——模块类 Adia 前缀). 和遗产的造型<aside-ui slot>, (中文(简体) ), <section data-chat-messages>在v. 4.0中退休,赞成讲解词汇——见 ADR-0024 完全的移民食谱.

版式

web-modules/
├── shell/                 9 elements
│   ├── admin-shell/       <admin-shell> host (87 LOC JS, behavior-only)
│   ├── admin-sidebar/     resizable + collapsible + localStorage persistence
│   ├── admin-command/     Cmd+K command palette
│   └── admin-{topbar,content,statusbar,scroll,page,page-header,page-body}/
│                          CSS-only structural children
├── chat/                  6 elements
│   ├── chat-shell/        <chat-shell> host (streaming-aware)
│   ├── chat-thread/       scrollable message list
│   ├── chat-composer/     input + submit + [disabled] propagation
│   ├── chat-sidebar/      conversation list
│   └── chat-{empty,header,status}/   CSS-only
├── editor/                5 elements
│   ├── editor-shell/      <editor-shell> host (toolbar/canvas/sidebar orchestrator)
│   ├── editor-toolbar/    <editor-toolbar> with [full-screen]
│   ├── editor-canvas/     <editor-canvas> with [empty]/[focused]
│   ├── editor-sidebar/    wraps <pane-ui resizable> for delegation
│   └── editor-{statusbar,canvas-empty}/   CSS-only
├── simple/                3 elements
│   ├── simple-shell/      <simple-shell> minimal marketing/landing shell
│   └── simple-{content,hero}/   CSS-only
├── runtime/               2 render roots
│   ├── gen-root/          <gen-root> turns gen-UI intents into DOM
│   └── a2ui-root/         <a2ui-root> A2UI protocol → DOM (uses @adia-ai/a2ui)
├── theme/                 1 element
│   └── theme-panel/       <theme-panel> appearance-preferences control surface
└── index.js               barrel re-export of every cluster

每个元素目录都包含 .js, (中文(简体) ), .css, (中文(简体) ), .yaml,以及 .a2ui.json 文件 — 形状与 web-components/components/<x>/. Yaml + a2ui.json 合同在 packages/gen-ui/a2ui/catalog/catalog-a2ui_1_0.json; 构建脚本 scripts/build/components.mjs 扫描两者 web-components/components/ 财务报告和审定财务报表 web-modules/<cluster>/。 。 。 .

行为合同

全体 <*-shell> 主机为 仅行为指挥家 ——反映国家属性,向说话的孩子宣传插槽意图,并开展前行活动. 视觉布局由孩子们的CSS拥有. 说话的儿童分为两个班:

• JS 育有子女 携带 connected()编号 :disconnected() 交互行为寿命周期(admin-sidebar 调整大小, admin-command 调色板, chat-thread 流经卷轴, editor-canvas 缩放等).
• CSS 独家儿童 (无) .js 文件——仅 .yaml + 键 .css + 键 .a2ui.json) 声明为主机的造型系统附加对接的插槽意图. 不要写 .js 用于这些;主机通过属性选择器处理其行为.

分解配方(对于 JS 包含 vs CSS 仅使用, 如何命名空间状态属性, 时档词汇公约)在 adia-ui-authoring 技术, references/shell-patterns.md (吸收) bespoke-shell-children) (中文(简体) ).

许可证

麻省理工学院