# @adia-ai/web-modules 中文文档

规范地址：https://npmcn.com/package/%40adia-ai/web-modules/

版本：0\.8\.66
npm 元数据更新时间：2026-09-14T17:19:31.477Z
中文译文更新时间：2026-11-06T21:54:28.422Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adia-ai/web-modules
原文对照：https://npmcn.com/package/%40adia-ai/web-modules/?lang=original
项目主页：https://github.com/adiahealth/gen-ui-kit#readme
源码仓库：https://github.com/adiahealth/gen-ui-kit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.3 MB，276 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@adia-ai/llm 0\.8\.66，@adia-ai/a2ui 0\.8\.66，@adia-ai/agent 0\.8\.66，@adia-ai/persona 0\.8\.66，@adia-ai/web-components 0\.8\.66
- 首次发布：2026-05-02T02:08:26.329Z
- 最新版本发布：2026-09-14T17:19:31.251Z
- 近 30 天下载量：2293（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：191（近 12 个月 191 个）

## 中文简介

AdiaUI 复合自定义元素——由@adia-ai/web- 组件原始创建的 shell, chalk, 编辑器, 运行时集群. 每组子路径导出 .

## 安装

```sh
npm install @adia-ai/web-modules
```

也可以使用：`pnpm add @adia-ai/web-modules`、`yarn add @adia-ai/web-modules`、`bun add @adia-ai/web-modules`

## README

# @adia-ai/web-模块

从 [`@adia-ai/web-components`](https://npmcn.com/package/%40adia-ai/web-components) 组件。 组织 每艘集束舰作为子路径输出 消费者只安装他们需要的.

## 安装

```bash
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) :**

```html
<!-- CSS: all components + the shell tier you use -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.8/dist/web-components.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.8/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/web-modules@0.8/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
-->
```

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

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.8/dist/web-components.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.8/dist/shell/admin-shell.min.js"></script>
```

| 套装 | 路径 | 击出 | 目录 | 何时使用 |
| --- | --- | --- | --- | --- |
| **所有东西** | `/dist/everything.min.js` | **~ 424 KB 键** | 所有组件 + @ adia- ai/ a2ui 运行时间 + 所有 4 个外壳 | **代码Pen / 单调演示** |
| 管理员壳 | `/dist/shell/admin-shell.min.js` | ~6千贝 | 壳牌注册;需要 `web-components.min.js` 第一个 | 管理应用程序, 无聊天/ 编辑器 |
| 聊天外壳 | `/dist/chat/chat-shell.min.js` | ~230 KB 键 | 包括聊天行/编译器 | 聊天表面 |
| 编辑器外壳 | `/dist/editor/editor-shell.min.js` | ~6千贝 | 壳牌注册;首先需要组件 | 编辑器表面 |
| 简单的外壳 | `/dist/simple/simple-shell.min.js` | ~5.6千贝 | 壳牌注册;首先需要组件 | 设置/ 窗体 |

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

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.8/dist/shell/admin-shell.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.8/dist/chat/chat-shell.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.8/dist/editor/editor-shell.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.8/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 使用指南](https://ui-kit.exe.xyz/site/cdn-usage) 用于完整的 CodePen 模板 + 工作实例.

### 使用人工智能特工

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

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

| 同伴依赖关系 | 使用时需要 |
| --- | --- |
| `@adia-ai/web-components` (总是) | 任意集群 |
| `@adia-ai/a2ui` | `runtime` 组数( c)`<gen-root>`, (中文(简体) ), `<a2ui-root>`——A2UI电文-DOM渲染器 |
| `@adia-ai/llm` | `chat` 组数( c)`<chat-shell>`) — LLM 代理 + 流线 |

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

## 进口:JS

```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`,参见 [集群](https://npmcn.com/package/%40adia-ai/web-modules/#readme-clusters) 页: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` 向磁盘上的每个元素样式表提出的请求 :

```js
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 (英语)](https://github.com/adiahealth/gen-ui-kit/issues/296)。 。 。 .

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

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

```js
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合同不变;只有导入 路径移动.

## 集群

| 组 | 东道主 | 讲解儿童 | 里面的东西 |
| --- | --- | --- | --- |
| `shell` | `<admin-shell>` | `<admin-sidebar>`, (中文(简体) ), `<admin-command>` (含JS) (中文(简体) ); `<admin-content>`, (中文(简体) ), `<admin-topbar>`, (中文(简体) ), `<admin-statusbar>`, (中文(简体) ), `<page-scroll>` (只提供儿童支助服务);共计6名儿童 | 管理壳组成:侧边栏、命令调色板、页铬(`<page-ui>`, ADR-0098) (英语). 调整大小/配合/持久性 `<admin-sidebar>`; 打开 Cmd+K 调色板 `<admin-command>`。 。 。 . |
| `chat` | `<chat-shell>` | `<chat-thread>`, (中文(简体) ), `<chat-composer>`, (中文(简体) ), `<chat-sidebar>` (含JS) (中文(简体) ); `<chat-empty>`, (中文(简体) ), `<chat-header>`, (中文(简体) ), `<chat-status>` (只提供儿童支助服务);共计6名儿童 | 对话表面——流出消息,作曲者与 `[disabled]` 传播 向下滚动线条, `[streaming]` 反映. |
| `editor` | `<editor-shell>` | `<editor-toolbar>`, (中文(简体) ), `<editor-canvas>`, (中文(简体) ), `<editor-sidebar>` (含JS) (中文(简体) ); `<editor-statusbar>`, (中文(简体) ), `<editor-canvas-empty>` (只提供儿童支助服务);共计5名儿童 | 设计工具表面——工具栏 `[full-screen]`中央画布 `[focused]`编号 :`[empty]`边栏包装 `<pane-ui resizable>` 代表代表团发言. |
| `runtime` | `<gen-root>`, (中文(简体) ), `<a2ui-root>` | —— 说 | 将JSON或基因UI意图变成活的DOM的发芽根. |
| `theme` | \- (仅限控制) | `<theme-panel>` (含JS;1个子女总数) | 外观偏好控制表面—— `[theme]` 命名主题, `--a-density` 编号 : `--a-radius-k` 参数覆盖, `color-scheme` 浅/暗,选入 `[persist]`进入任何消费者 `<popover-ui slot="content">` 顶边栏。 谱: [`.claude/docs/specs/theme-panel-module.md`](https://npmcn.com/package/.claude/docs/specs/theme-panel-module.md)。 。 。 . |

### 交叉包装方便子路径

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

| 子路径 | 登记册 | 页:1 |
| --- | --- | --- |
| `@adia-ai/web-modules/generative` | `<canvas-ui>`, (中文(简体) ), `<a2ui-root>` | 交叉包装——他们生活在 `@adia-ai/web-components` 但经常为基因化的UI作曲 所以我们把注册桶运到这里 按ADR-0027计算,构成交叉包装的组件不在默认目录桶中; `generative` 是明确的选择. |

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

见 [`adia-ui-authoring` 技术, `references/shell-patterns.md`](https://npmcn.com/package/packages/plugins/adia-ui-forge/skills/primitive-authoring/references/shell-patterns.md) (吸收) `bespoke-shell-children`)为三家所用克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克.

## 快开始

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

> ⚠️ **联合材料和中央支助系统都需要每组进口.** 只导入 jS给了你注册的标签 但是没有布局 见 [导入: CSS](https://npmcn.com/package/%40adia-ai/web-modules/#readme-import-css-since-v045) 上方为失败模式.

```js
// 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起):

```html
<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>`](https://ui-kit.exe.xyz/site/components/admin-shell)
-   [`<chat-shell>`](https://ui-kit.exe.xyz/site/components/chat-shell)
-   [`<editor-shell>`](https://ui-kit.exe.xyz/site/components/editor-shell)
-   [`<simple-shell>`](https://ui-kit.exe.xyz/site/components/simple-shell)
-   [`<theme-panel>`](https://ui-kit.exe.xyz/site/components/theme-panel)
-   [`<gen-root>`](https://ui-kit.exe.xyz/site/components/gen-root) • 妇女 [`<a2ui-root>`](https://ui-kit.exe.xyz/site/components/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发布:

```diff
- 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`](https://npmcn.com/package/packages/plugins/adia-ui-forge/skills/primitive-authoring/references/shell-patterns.md) (吸收) `bespoke-shell-children`) (中文(简体) ).

## 许可证

麻省理工学院

## 常见问题

### @adia-ai/web-modules 是什么？

AdiaUI 复合自定义元素——由@adia-ai/web- 组件原始创建的 shell, chalk, 编辑器, 运行时集群\. 每组子路径导出 \.

### 如何安装 @adia-ai/web-modules？

在项目目录运行 npm install @adia-ai/web-modules，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@adia-ai/llm（0\.8\.66）、@adia-ai/a2ui（0\.8\.66）、@adia-ai/agent（0\.8\.66）、@adia-ai/persona（0\.8\.66）、@adia-ai/web-components（0\.8\.66）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adia-ai/web-modules 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adia-ai/web-modules 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @adia-ai/web-modules 可以商用吗？

@adia-ai/web-modules 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @adia-ai/web-modules 的下载量有多少？

根据 npm 官方下载统计，@adia-ai/web-modules 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,293 次，日均约 76 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adia-ai/web-modules 还在维护吗？

最新版本 0\.8\.66 发布于 2026/09/15（1 个月前）；至今共发布 191 个版本，其中过去 12 个月发布了 191 个；首次发布于 2026/05/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。