Gardener 文档

快速开始

Gardener 可以只使用 CSS，也可以加载零依赖运行时获得交互行为。完整包默认包含所有主题、组件和工具类。

<!doctype html>
<html lang="zh-CN" data-g-theme="garden" data-g-mode="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="gardener.css">
</head>
<body>
  <main class="g-container g-py-8">
    <button class="g-btn g-btn-primary">开始使用</button>
  </main>
  <script type="module" src="gardener.runtime.js"></script>
</body>
</html>

默认视觉：白色画布、中性色文本、4px 基础圆角、克制阴影。圆角和强层次必须显式选择，不会污染普通业务页面。

安装与包

当前构建没有第三方运行时依赖。可通过包管理器使用，也可以直接复制 dist/ 中的静态文件。

npm install @gardener/css

导出	内容	使用场景
`@gardener/css`	完整 CSS + 默认运行时入口	直接开箱使用
`core.css`	Token、主题轴、Reset、Base	自建组件库
`themes.css`	42 主色与显示模式	只复用主题
`utilities.css`	全部响应式工具类	原子式页面
`components.css`	非 AI 通用组件及完整栅格	业务系统
`ai.css`	AI 专用组件	聊天、Agent、生成工具
`./tauri`	Tauri 窗口控制适配器	桌面 WebView
`./electron`	Electron 安全桥接适配器	桌面客户端
`./manifest`	组件与环境清单	AI / 自动化工具
`./utilities-manifest`	工具类声明和响应条件	精确类名检索
`./recipes`	高频页面配方	页面骨架选择
`./capabilities`	行业能力实现状态与接口矩阵	防止概念级遗漏
`./public-api`	公共命名、行为、事件和适配器契约	生成器与集成工具
`./builds`	平台档案、组件包、组件归属和构建器契约	按平台/组件生成
`./performance`	raw、gzip、Brotli 与 npm 包体积报告	发布性能门禁
`./components-manifest`	组件源清单	组件检索与代码生成
`./schema/*`	十套闭合 JSON Schema	契约验证

按层组合

import "@gardener/css/core.css";
import "@gardener/css/themes.css";
import "@gardener/css/components.css";
import "@gardener/css/utilities.css";

Gardener Vue 3 项目

@gardener/vue 是 Gardener CSS 1.0.0 的官方 Vue 3 适配层，当前版本为 1.0.0 Stable，支持 Vue >=3.4.0 <4.0.0 与 Node.js >=18.18。它逐项映射全部 506 个 CSS 组件和 66 种 DOM 行为，同时提供 538 个根运行时导出、21 个 TypeScript 类型导出、29 个包入口与 28 个组件 CSS 包代理。

506具名 G* 组件

538根运行时导出

29公共包入口

28组件 CSS 包

安装与全局插件

npm install @gardener/vue @gardener/css vue

import { createApp } from "vue";
import GardenerVue from "@gardener/vue";
import "@gardener/vue/style.css";
import App from "./App.vue";

createApp(App).use(GardenerVue).mount("#app");

插件选项完整覆盖 prefix、components、directive 和 initialize。需要自定义前缀、只注册部分组件、关闭 v-gardener 或延迟运行时初始化时，应通过 createGardenerVue(options) 创建插件。

按需组件与主题 Provider

<script setup lang="ts">
import { GButton, GCard, GDialog, GardenerProvider } from "@gardener/vue";
import "@gardener/vue/platform/web.css";
</script>

<template>
  <GardenerProvider
    theme="garden"
    mode="light"
    neutral="cool"
    typography="system"
    shape="subtle"
    density="comfortable"
    elevation="subtle"
    motion="full"
    platform="web"
    os="auto"
  >
    <GCard><GButton variant="primary">保存</GButton></GCard>
  </GardenerProvider>
</template>

GardenerProvider 的十条主题轴是 theme、mode、neutral、typography、shape、density、elevation、motion、platform 与 os。Home 与示例默认保持白色 Light 和小圆角；深色模式不会被默认启用。

全部组件的公共属性、透传与 Ref

属性	用途	约定
`as`	修改根元素或 Vue 组件	保留 Gardener 类、属性与插槽
`variant`	应用变体	接受字符串或字符串数组
`state`	应用组件状态	转换为 `is-*` 状态类
`config`	声明运行时配置	转换为对应 `data-g-*` 属性
`initialize`	控制 DOM 行为初始化	默认 `true`
`modelValue`	Vue 双向绑定值	原生表单和自定义 Gardener 事件均支持
`modelEvent`	指定自定义同步事件	使用 `gardener:*` 事件名
`modelKey`	从事件载荷取值	读取 `CustomEvent.detail` 指定字段

所有原生 attributes、DOM 事件和 slots 均透传。组件模板 Ref 统一公开 element、getInstance() 与 refresh()。对话框、抽屉等复合结构使用 GardenerPart 创建标准内部部件，避免破坏 CSS 和行为选择器契约。

v-model、自定义事件与指令

<GInput v-model="keyword" />

<GTreeSelect
  v-model="selectedId"
  model-event="gardener:change"
  model-key="value"
/>

<div v-gardener="{
  behavior: 'dialog',
  config: { startOpen: true }
}" />

vGardener（模板名 v-gardener）随 Vue 生命周期挂载、刷新并销毁指定行为。原生输入使用标准 update:modelValue；复杂组件通过 modelEvent 和 modelKey 将 Gardener 自定义事件桥接为相同协议。

全部 7 个 Composable

useGardener访问运行时、初始化与销毁能力

useGardenerBehavior绑定行为并访问实例

useGardenerEvent类型安全监听 gardener:* 事件

useGardenerTheme读取和更新十轴主题状态

useGardenerToast创建并管理 Toast

useTauriWindowControls绑定 Tauri 窗口按钮与销毁周期

useElectronWindowControls绑定 Electron 安全桥与销毁周期

Web、移动端与桌面端样式入口

入口	内容	适用场景
`@gardener/vue/style.css`	完整 Gardener 样式	开箱即用与原型
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	分层样式入口	定制构建
`platform/web.css`	通用 Web 能力	PC、响应式网站、Dashboard
`platform/mobile.css`	通用 + 移动端组合	移动网页、PWA、WebView
`platform/desktop.css`	通用 + 桌面组合	桌面浏览器与应用壳
`platform/tauri.css`	桌面入口 + Tauri 适配	Tauri 窗口
`platform/electron.css`	桌面入口 + Electron 适配	Electron 窗口
`component-css/*`	28 个稳定组件 CSS 包代理	按功能域加载

常规应用推荐根入口或 @gardener/vue/components 获得最佳摇树； @gardener/vue/bundle.min.js 是预压缩单文件入口。SSR 导入不访问浏览器全局对象，行为只在组件挂载后初始化，因此可用于服务端渲染与 Hydration。

全部 29 个公共包入口

JavaScript：.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js。样式：./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css 与 ./component-css/*。契约与包信息：./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

非组件运行时导出与 TypeScript 类型

32 个非组件运行时导出为：Gardener、GardenerComponent、GardenerPart、GardenerProvider、GardenerVue、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByExportName、componentByName、componentCatalog、configAttributes、createGardenerComponent、createGardenerVue、default、destroy、emit、gardenerComponents、getInstance、init、observe、register、themeAttributes、toast、7 个 Composable 与 vGardener。

21 个类型导出为：GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentKind、GardenerComponentPublicInstance、GardenerConfigValue、GardenerDirectiveOptions、GardenerDirectiveValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerPlatform、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerVueComponentName、GardenerVueOptions。

公共 Schema、元数据与发布门禁

Public API、Compatibility 和 Performance 均有关闭未知字段的 JSON Schema；组件目录 JSON 可直接供 AI、代码生成器和文档工具读取。全量压缩包预算为 328,220 B raw、51,602 B gzip、26,926 B Brotli；单个 GButton 的真实摇树结果为 3,718 B。确定性构建覆盖 87 个文件，npm 包核对 98 个文件、284,183 B packed、3,729,929 B unpacked。

cd vue
npm run release:verify

# 构建、生成覆盖、Schema、Vue SFC 类型、单元与 DOM 生命周期、
# Chromium / WebKit / Firefox / 移动端、WCAG A/AA、示例、
# 摇树、可复现构建、性能预算、npm 封包与 publint

全部 506 个 Vue 组件

下面的目录直接合并 Vue 公共 API 与组件元数据，逐项显示 Vue 导出名、CSS 名称、类别、类型、选择器、变体、状态、部件、行为与平台。它不是精选示例；全部 506 项都在同一可检索目录中。

正在读取 Vue 组件清单…

Gardener React 项目

@gardener/react 是 Gardener CSS 1.0.0 的官方 React 适配层，当前版本为 1.0.0 Stable，支持 React >=18.3.0 <20.0.0 与 Node.js >=18.18。它逐项映射全部 506 个 CSS 组件和 66 种 DOM 行为，同时提供 538 个根运行时导出、22 个 TypeScript 类型导出、 29 个公共包入口与 28 个组件 CSS 包代理。

506具名 G* 组件

538根运行时导出

29公共包入口

28组件 CSS 包

安装与根组件

npm install @gardener/react @gardener/css react react-dom

import { createRoot } from "react-dom/client";
import { GButton, GCard, GardenerProvider } from "@gardener/react";
import "@gardener/react/style.css";

createRoot(document.getElementById("root")!).render(
  <GardenerProvider theme="garden" mode="light" shape="subtle">
    <GCard><GButton variant="primary">保存</GButton></GCard>
  </GardenerProvider>,
);

组件均支持按需具名导入；构建器可从根入口或 @gardener/react/components 摇树。每个生成组件都保留其默认 HTML 标签的精确属性类型，例如 GButton 接受 type="submit"，GInput 接受 type 与 autoComplete，同时允许通过 as 切换为其他原生元素或 React 组件。

主题 Provider 与十条主题轴

<GardenerProvider
  theme="garden"
  mode="light"
  neutral="cool"
  typography="system"
  shape="subtle"
  density="comfortable"
  elevation="subtle"
  motion="full"
  platform="web"
  os="auto"
  id="application-theme"
  aria-label="应用主题范围"
>
  <App />
</GardenerProvider>

GardenerProvider 的十条主题轴是 theme、mode、neutral、typography、shape、density、elevation、motion、platform 与 os。它还会透传 className、style、ID、ARIA 与其他原生属性； useGardenerTheme 用于读写主题， useGardenerThemeContext 用于直接读取上下文。默认仍是白色 Light 与小圆角，不会自动启用深色主题。

全部组件的 10 个公共属性

属性	用途	约定
`as`	修改根元素或 React 组件	保留 Gardener 类、属性、children 与 Ref
`variant`	应用变体	字符串或只读字符串数组
`state`	应用组件状态	转换为 `is-*` 状态类
`config`	声明行为配置	转换为对应 `data-g-*` 属性
`initialize`	控制 DOM 行为初始化	默认 `true`
`value`	受控值	支持原生表单与自定义 Gardener 事件
`defaultValue`	非受控初始值	checkbox 布尔值映射为 `defaultChecked`
`valueEvent`	指定值同步事件	可使用 `gardener:*` 事件名
`valueKey`	从事件载荷取值	读取 `CustomEvent.detail` 指定字段
`onValueChange`	接收新值与原始 Event	原生 input/change 自动去重

原生 attributes、事件、children 与 className 均透传。组件 Ref 统一公开 element、getInstance() 与 refresh()；复合结构可用 GardenerPart 创建内部部件。checkbox 的布尔 value 使用 checked，radio 保留字符串 value，确保 React 表单语义一致。

受控值、自定义事件与行为实例

const [keyword, setKeyword] = useState("");

<GInput value={keyword} onValueChange={(next) => setKeyword(String(next))} />

<GTreeSelect
  value={selectedId}
  valueEvent="gardener:change"
  valueKey="value"
  onValueChange={setSelectedId}
/>

useGardenerBehavior 将 66 种行为绑定到元素、Document 或组件 Handle，并在卸载时销毁；initialize 可关闭组件自动初始化，方便由页面级运行时统一接管。显式传入的行为 data attribute 优先于生成默认值。

全部 7 个 Hooks

useGardener访问运行时、初始化、观察与销毁能力

useGardenerBehavior绑定行为并访问实例

useGardenerEvent类型安全监听 gardener:* 事件

useGardenerTheme读取和更新十轴主题状态

useGardenerToast创建并管理 Toast

useTauriWindowControls绑定 Tauri 窗口按钮与销毁周期

useElectronWindowControls绑定 Electron 安全桥与销毁周期

Web、移动端与桌面端样式入口

入口	内容	适用场景
`@gardener/react/style.css`	完整 Gardener 样式	开箱即用与原型
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	分层样式入口	定制构建
`platform/web.css`	通用 Web 能力	PC、响应式网站、Dashboard
`platform/mobile.css`	通用 + 移动端组合	移动网页、PWA、WebView
`platform/desktop.css`	通用 + 桌面组合	桌面浏览器与应用壳
`platform/tauri.css`	桌面入口 + Tauri 适配	Tauri 窗口
`platform/electron.css`	桌面入口 + Electron 适配	Electron 窗口
`component-css/*`	28 个稳定组件 CSS 包代理	按功能域加载

SSR、Hydration 与桌面桥接

包入口可在服务端安全导入，全部 506 个组件均经过逐项 SSR，行为只在 Effect 生命周期内初始化；服务端标记 Hydration 不产生 recoverable error，并兼容 StrictMode。Tauri 与 Electron 分别使用 @gardener/react/tauri 和 @gardener/react/electron 独立入口，任一入口都不会意外导出另一平台的桥接 API。

import { useTauriWindowControls } from "@gardener/react/tauri";
import "@gardener/react/platform/tauri.css";

function WindowChrome() {
  const root = useRef<HTMLElement | null>(null);
  useTauriWindowControls(root, window.__TAURI_WINDOW__);
  return <header ref={root} className="g-native-titlebar">...</header>;
}

全部 29 个公共包入口

JavaScript：.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js。样式：./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css、./component-css/*.css 与 ./component-css/*。契约与包信息：./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

非组件运行时导出与 TypeScript 类型

32 个非组件运行时导出为：Gardener、GardenerComponent、GardenerPart、GardenerProvider、GardenerThemeContext、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByExportName、componentByName、componentCatalog、configAttributes、createGardenerComponent、destroy、emit、gardenerComponents、getInstance、init、observe、register、resolveGardenerTarget、themeAttributes、themeAxes、toast、useElectronWindowControls、useGardener、useGardenerBehavior、useGardenerEvent、useGardenerTheme、useGardenerThemeContext、useGardenerToast、useTauriWindowControls。

22 个类型导出为：GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

公共 Schema、性能与发布门禁

Public API、Compatibility 和 Performance 均由关闭未知字段的 JSON Schema 验证；组件目录 JSON 可直接供 AI、代码生成器和文档工具读取。全量压缩包实测为 326,064 B raw、50,126 B gzip、26,381 B Brotli；单个 GButton 的真实摇树结果为 2,599 B。确定性构建覆盖 87 个文件，npm 包核对 98 个文件、262,706 B packed、2,438,775 B unpacked，生产依赖安全审计为 0 个漏洞。

cd react
npm run release:verify

# 生成与公共 API、Schema、TypeScript、506 组件 SSR、Hydration、DOM 生命周期、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# 摇树、可复现构建、性能预算、npm 封包与 publint

全部 506 个 React 组件

下面的目录直接合并 React 公共 API 与组件元数据，逐项显示 React 导出名、CSS 名称、类别、类型、默认标签、选择器、变体、状态、部件、行为与平台。它不是精选示例；全部 506 项都在同一可检索目录中。

正在读取 React 组件清单…

Gardener AngularJS 项目

@gardener/angularjs 是 Gardener CSS 1.0.0 的官方 AngularJS 1.x 遗留系统适配层，当前版本为 1.0.0 Stable。它验证 AngularJS >=1.8.2 <1.9.0 与 Node.js >=18.18，逐项映射全部 506 个 CSS 组件和 66 种 DOM 行为，并提供 535 个根运行时导出、24 个 TypeScript 类型导出、29 个公共包入口和 28 个组件 CSS 包代理。

遗留系统边界：AngularJS 已结束官方支持，框架本体存在没有上游修复版本的已知安全公告。本适配层将 angular 保持为外部 peer dependency，不会把它打进 Gardener 产物，也不会掩盖框架级风险。新项目优先选择 Vue、React 或框架无关入口；存量项目必须同时执行输入净化、CSP、资源白名单、桌面桥最小授权和迁移计划。完整要求见 AngularJS 安全基线。

506生成组件指令

535根运行时导出

29公共包入口

28组件 CSS 包

安装、ESM 加载与模块工厂

npm install @gardener/angularjs @gardener/css angular

import "angular/angular.js";
import { createGardenerAngularJS } from "@gardener/angularjs";
import "@gardener/angularjs/style.css";

const gardenerModule = createGardenerAngularJS(window.angular);
window.angular.module("app", [gardenerModule]);

AngularJS npm 包不是原生 ESM，因此 Vite 等构建工具中应使用 import "angular/angular.js" 的副作用导入，再把 window.angular 显式交给 createGardenerAngularJS；不要依赖不稳定的 import angular from "angular" 默认导入。Gardener 包本身不会读取全局 AngularJS，根入口可安全用于 SSR 工具链分析。

const moduleName = createGardenerAngularJS(window.angular, {
  moduleName: "gardener",
  dependencies: [],
  components: ["button", "gInput", "GCardDirective"],
  initialize: true,
  registerProvider: true,
  registerBehaviorDirective: true,
});

components 接受组件名、AngularJS 指令名或 ESM 导出名，并由 506 项联合类型约束；未知名称会立即抛错。同一 AngularJS 实例、模块名和等价选项重复安装是幂等的，不同组件子集、依赖或初始化选项使用同名模块时会明确报错，防止静默得到半注册模块。

元素指令、属性指令与语义

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">元素指令内容</g-card>
  <button g-button gardener-variant="primary" type="submit">保存</button>
  <input g-input ng-model="vm.keyword" aria-label="关键词">
</gardener-provider>

每个组件都以 restrict: "EA" 同时支持元素和属性形式，例如 <g-card> / gCard 与 <article g-card>。涉及 button、input、select、form、table、nav、aside 等原生语义时，应优先采用属性形式，让键盘、表单提交、浏览器校验和辅助技术继续使用原生行为。

全部 8 个组件公共属性

AngularJS 属性名	模板写法	用途
`gardenerVariant`	`gardener-variant`	应用空格或逗号分隔的组件变体
`gardenerState`	`gardener-state`	映射一个或多个 `is-*` 状态类
`gardenerConfig`	`gardener-config`	深度监听表达式对象并映射为 `data-g-*` 配置
`gardenerInitialize`	`gardener-initialize`	动态启用或彻底停用 DOM 行为初始化
`ngModel`	`ng-model`	保留 AngularJS 原生表单模型或桥接自定义组件值
`gardenerValueEvent`	`gardener-value-event`	选择用于更新模型的 `gardener:*` 自定义事件
`gardenerValueKey`	`gardener-value-key`	从 `CustomEvent.detail` 读取指定字段
`gardenerOnValueChange`	`gardener-on-value-change`	调用表达式并提供 `$value`、`$event` locals

指令句柄存放在 angular.element(node).data("$gardenerHandle")，统一公开 element、getInstance()、refresh() 与 destroy()。refresh() 会先销毁再按当前配置初始化节点子树；作用域 $destroy 时会移除事件并销毁行为实例。

ngModel、原生表单与 Gardener 事件

<input g-input
  ng-model="vm.keyword"
  gardener-on-value-change="vm.changed($value, $event)">

<select g-select multiple ng-model="vm.channels">
  <option value="email">邮件</option>
  <option value="sms">短信</option>
</select>

<div g-tree-select
  ng-model="vm.selectedId"
  gardener-value-event="gardener:change"
  gardener-value-key="nodeId"></div>

原生 input、textarea 和 select 的模型语义仍由 AngularJS 自己管理，适配层不会覆盖 ngModel.$render 或重复调用 $setViewValue；checkbox 保持布尔值、radio 保持选项值、multiple select 保持数组。复杂 Gardener 组件通过自定义事件更新模型，并用 gardenerOnValueChange 接收一致的回调值。

通用指令、服务与十轴主题

gGardener模板写作 g-gardener，动态声明、切换并销毁任意行为

gardenerProvider元素或属性形式提供十轴主题并初始化子树

GardenerRuntimeinit · destroy · getInstance · emit · observe

GardenerThemeattributes · apply · read · clear

GardenerToastshow(options)

主题轴完整覆盖 theme、mode、neutral、typography、shape、density、elevation、motion、platform 与 os，模板中对应 gardener-theme 至 gardener-os。默认示例保持白色 Light 和小圆角。

Web、移动端、桌面端与按域样式

入口	内容	适用场景
`@gardener/angularjs/style.css`	完整 Gardener 样式	开箱即用与遗留系统渐进接入
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	分层样式入口	定制构建
`platform/web.css`	通用 Web 能力	PC 网站与 Dashboard
`platform/mobile.css`	移动端组件和安全区	移动网页、PWA、WebView
`platform/desktop.css`	桌面工作区组合	桌面浏览器与应用壳
`platform/tauri.css`	桌面入口 + Tauri 适配	Tauri 窗口
`platform/electron.css`	桌面入口 + Electron 适配	Electron 窗口
`component-css/*`	28 个稳定组件 CSS 包代理	按功能域加载

import { createTauriWindowService } from "@gardener/angularjs/tauri";
import { createElectronWindowService } from "@gardener/angularjs/electron";

Tauri 与 Electron 入口相互隔离，均返回带 available 和 destroy() 的绑定对象；渲染层只应接收经过白名单限制的最小桥接能力。

全部 29 个公共包入口

JavaScript：.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js。样式：./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css、./component-css/*.css 与 ./component-css/*。契约与包信息：./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

非组件运行时导出与 TypeScript 类型

29 个非组件运行时导出为：GARDENER_ANGULARJS_MODULE、Gardener、GardenerRuntimeFactory、GardenerThemeFactory、GardenerToastFactory、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByDirectiveName、componentByExportName、componentByName、componentCatalog、configAttributes、createElectronWindowService、createGardenerAngularJS、createGardenerComponent、createTauriWindowService、destroy、emit、gardenerBehaviorDirective、gardenerDirectives、gardenerProviderDirective、getInstance、init、observe、register、themeAttributes、themeAxes、toast。

24 个类型导出为：GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

公共 Schema、兼容性、性能与发布门禁

Public API、Compatibility 和 Performance 都由关闭未知字段的 JSON Schema 验证；AngularJS 支持范围也写入机器可读兼容基线。组件目录 JSON 可直接供 AI、代码生成器和文档工具读取。全量压缩包实测为 404,094 B raw、59,499 B gzip、29,785 B Brotli；单个 GButtonDirective 的真实摇树结果为 4,515 B。确定性构建覆盖 83 个文件，npm 包核对 95 个文件、325,747 B packed、2,938,245 B unpacked，Gardener 自有生产负载审计为 0 个漏洞。

cd angular
npm run release:verify

# 生成与公共 API、3 套 Schema、TypeScript、AngularJS 1.8.2 / 1.8.3、
# 506 指令注册、ngModel 与 DOM 生命周期、Chromium / WebKit / Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、摇树、可复现构建、性能、封包与 publint

当前门禁包含 17 项运行时/契约测试、3 项 Schema 测试、20 项五引擎与移动端浏览器集成测试，以及 1 项 Axe WCAG A/AA 自动审计。完整 npm audit 仍会如实显示 AngularJS 本体的已知公告；这属于必须隔离、接受或迁移的遗留风险，不能标记为已修复。

全部 506 个 AngularJS 组件

下面的目录直接合并 AngularJS 公共 API 与组件元数据，逐项显示 ESM 指令工厂导出名、CSS 名称、类别、类型、默认标签、选择器、变体、状态、部件、行为与平台。它不是精选示例；全部 506 项都在同一可检索目录中。

正在读取 AngularJS 组件清单…

Gardener Blazor 项目

Gardener.Blazor 是 Gardener CSS 1.0.0 的官方 Razor Class Library，当前版本为 1.0.0 Stable。稳定资产以 net10.0 编译，并通过独立 NuGet 消费者验证 net11.0；适用于 Blazor Web App 静态 SSR、Interactive Server、Interactive WebAssembly、Auto、独立 WebAssembly、Hybrid 以及桌面 WebView。

506 Razor 组件 66 DOM 行为 75 运行时事件 28 框架类型 43 静态资源

安装、注册与静态资源

<PackageReference Include="Gardener.Blazor" Version="1.0.0" />

builder.Services.AddGardenerBlazor();

var app = builder.Build();
app.MapStaticAssets();

<link rel="stylesheet"
      href="_content/Gardener.Blazor/gardener.min.css" />

组件首次交互渲染时按需加载 _content/Gardener.Blazor/gardener.blazor.js，无需手写脚本标签。全量样式之外还提供 platforms/gardener.web.min.css、platforms/gardener.mobile.min.css、platforms/gardener.desktop.min.css、platforms/gardener.tauri.min.css、platforms/gardener.electron.min.css 和 28 个 components/*.min.css 组件域入口，全部正式压缩文件均携带外部 Source Map。

组件、Provider 与 SSR

@using Gardener.Blazor.Components

<GardenerProvider Theme="garden" Mode="light" Shape="small"
                   Density="comfortable" Platform="web">
  <GAppShell>
    <GSidebar>导航</GSidebar>
    <GMainRegion>
      <GCard>
        <GButton Variant="primary" @onclick="Save">保存</GButton>
      </GCard>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>

每个 CSS 组件都有对应的 G* 类型，并保留默认语义标签、选择器、状态、部件、行为、平台与无障碍元数据。静态 SSR 阶段直接输出完整 HTML，建立交互连接后才挂载 DOM 行为；参数签名改变会刷新挂载，组件释放时会注销监听器。 GardenerComponent 可按元数据名称动态渲染，GardenerBehavior 可把行为附着到任意内容，GardenerPart 用于输出约定部件类。

共同参数、引用句柄与表单

全部生成组件共享 20 个参数：As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

组件引用提供 6 个实例成员：Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> 继承 InputBase<TValue>，支持 EditForm、EditContext、DataAnnotations、验证状态、input、select 与 textarea。

值绑定、75 个事件与 7 个同步守卫

<GCard Value="@selection"
       ValueChanged="@(value => selection = value)"
       ValueEvent="selectionchange"
       ValueKey="value"
       EventNames="@events"
       PreventDefaultEvents="@guards"
       OnEvent="HandleEvent" />

@code {
  private object? selection;
  private readonly string[] events = [GardenerEvents.Selectionchange,
                                      GardenerEvents.Beforeopen];
  private readonly string[] guards = [GardenerEvents.Beforeopen];
  private Task HandleEvent(GardenerEventArgs args) => Task.CompletedTask;
}

Value/ValueChanged 处理原生 input/change，ValueEvent 与 ValueKey 处理复杂 CustomEvent。值会转换为 .NET 字符串、布尔、数字、数组或字典；DOM、File、BigInt、函数和循环引用会安全序列化。 GardenerEvents.All 暴露全部 75 个事件，GardenerEvents.Guards 暴露 beforeapproval、beforeclose、beforefilepicker、beforeopen、beforepromptstop、beforepromptsubmit、beforetabclose 7 个必须在 JS/.NET 异步边界前同步阻止的守卫事件。行为成员与事件 detail 契约可从 GardenerRuntimeCatalog 查询。

主题、服务与桌面桥

GardenerProvider 支持 Theme、Mode、Neutral、Typography、Shape、Density、Elevation、Motion、Platform、Os 十轴嵌套主题；GardenerThemePresets.All 收录完整 42 个颜色主题，默认保持白底 Light 与小圆角 small。 5 个作用域服务为 GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService。桌面桥只调用宿主预加载层明确暴露的白名单对象，不开放 Node 全局能力。

完整公共类型与机器可读契约

28 个框架类型为：GardenerAccessibilityDefinition、GardenerAssets、GardenerBehavior、GardenerBehaviorDefinition、GardenerBehaviors、GardenerComponent、GardenerComponentBase、GardenerConstants、GardenerElectronService、GardenerEventArgs、GardenerEventDefinition、GardenerEvents、GardenerField<TValue>、GardenerJsModule、GardenerOptions、GardenerPart、GardenerPlatform、GardenerProvider、GardenerRuntime、GardenerServiceCollectionExtensions、GardenerThemePresets、GardenerRuntimeCatalog、GardenerTauriService、GardenerThemeService、GardenerThemeState、GardenerToastService、GardenerValueChangedEventArgs、GardenerComponentDefinition。

Blazor Public API、组件元数据、Compatibility、Performance 均有闭合 JSON Schema。可读文档还包括 API、66 个行为、75 个事件、43 个静态资源、运行时、无障碍与 SSR 和发布门禁。

1.0.0 发布质量

Release 构建为 0 警告、0 错误；506 个组件全部经过真实静态 SSR。浏览器矩阵覆盖 Chromium、Firefox、WebKit、桌面与移动视口、键盘和 Axe WCAG A/AA；CI 强制 Firefox。 NuGet 使用隔离缓存真实发布消费应用，并验证静态 Web Assets endpoint manifest；另有独立 .NET 11 Preview 包消费者。程序集实测 343,552 B，43 个静态资源共 7,608,327 B，CSS gzip 139,269 B，runtime gzip 25,989 B，Blazor bridge gzip 2,054 B，nupkg 约 1.22 MiB、低于 6,000,000 B 硬上限；全部低于硬预算且 DLL/XML 可复现。

cd blazor
npm run release:verify
npm run test:net11

全部 506 个 Blazor 组件

下面的目录直接合并 Blazor 公共 API 与组件元数据，逐项显示 Razor 类型、CSS 名称、类别、类型、默认标签、选择器、状态、变体、部件、行为、平台和无障碍契约。它不是精选示例；全部 506 项都在同一可检索目录中。

正在读取 Blazor 组件清单…

设计原则

中性优先默认风格适合个人、企业、后台和内容站，不预设强烈品牌人格。

小圆角默认--g-radius-md 固定为 0.25rem；胶囊和大圆角只用于明确语义。

冗余优于缺失高复用复杂结构作为组件或配方存在，不要求 AI 每次临时组合。

语义与外观分离主色、显示模式、密度、字体、形状和平台可独立变化。

逻辑方向属性组件优先使用 inline/block 方向，减少 RTL 专用覆盖。

可机器验证组件、工具类、配方和运行时能力都有清单及构建检查。

CSS 层顺序

@layer gardener.reset,
       gardener.tokens,
       gardener.base,
       gardener.components,
       gardener.utilities,
       gardener.overrides;

项目自定义样式建议写入 gardener.overrides，避免提高选择器权重。

主题系统

颜色主题只负责品牌主色；显示模式与其他主题轴相互独立。本站固定使用 Light，以保持白色文档体验，但框架同时提供 Dark、System 与 High Contrast。

正在读取主题清单…

主题轴

属性	可用值	用途
`data-g-theme`	garden、blue、violet 等 42 项	品牌主色
`data-g-mode`	light、dark、system、high-contrast	显示模式
`data-g-neutral`	cool、warm、gray、ink、cream、blueprint、paper	中性背景与文字
`data-g-typography`	system、corporate、humanist、editorial、technical、geometric、rounded、classic、compact、cjk	字体气质
`data-g-shape`	sharp、small、medium、soft、round	形状与圆角
`data-g-density`	compact、standard、comfortable、touch	控件密度
`data-g-elevation`	flat、bordered、layered、floating	边框和阴影
`data-g-motion`	none、calm、standard、quick	动画节奏
`data-g-platform`	web、mobile、desktop、tauri、electron	平台细节
`data-g-os`	windows、macos、linux	桌面系统外观

<html
  data-g-theme="cobalt"
  data-g-mode="light"
  data-g-neutral="warm"
  data-g-typography="corporate"
  data-g-shape="small"
  data-g-density="compact"
  data-g-elevation="bordered"
  data-g-motion="calm"
  data-g-platform="electron"
  data-g-os="windows">

设计 Token

组件只消费语义 Token。品牌定制应覆盖 Token，而不是复制组件规则。

族	示例	说明
颜色	`--g-color-primary`、`--g-color-primary-text`	填充色与可读前景色分离
表面	`--g-color-canvas`、`--g-color-surface-raised`	画布、普通、抬升、轻微、下沉表面
文本	`--g-color-text`、`--g-color-text-muted`	正文、弱化和辅助文字
语义	`--g-color-success`、`--g-color-danger-soft`	成功、警告、危险、信息及柔和背景
间距	`--g-space-0`…`--g-space-96`	含半阶、小数阶和像素值
字体	`--g-font-size-sm`、`--g-line-height-normal`	字号、字重、行高、字族
形状	`--g-radius-sm`…`--g-radius-full`	默认小圆角，可显式扩展
动效	`--g-duration-fast`、`--g-ease-standard`	持续时间和缓动
层级	`--g-z-dropdown`、`--g-z-dialog`	浮层、Dialog、Toast 等稳定堆叠顺序
布局	`--g-header-height`、`--g-sidebar-width`	应用壳尺寸

局部覆盖

.billing-area {
  --g-color-primary: #0f6f95;
  --g-color-primary-text: #0b5877;
  --g-radius-md: 0.25rem;
  --g-control-height-md: 2.25rem;
}

CSS 全量 API

本索引由 css/src/**/*.css 自动生成，覆盖每个源码模块、语义类、原始选择器、Token、自定义状态钩子、数据属性和关键帧；工具类使用下一节的专用完整清单。它是源码级目录，不是精选示例。

—源码模块

—全部类

—语义选择器

—Token

覆盖规则：每一个 g-* 类必须出现在“CSS 全量 API”或“工具类”清单；每个组件、运行时和页面配方还必须出现在各自目录。构建校验会逐文件计算 SHA-256，避免目录落后于源码。

搜索全部 CSS 接口

正在读取 CSS 索引…

全部源码模块

展开任一模块可查看该文件公开的类、Token、状态、数据属性和关键帧。生成型工具模块链接到独立的 11,498 项清单。

正在读取模块清单…

工具类

全部工具类使用 g- 前缀。响应式前缀位于功能名称之前，例如 g-md-grid-cols-2。小数点写作下划线，例如 g-p-2_5；负值使用 g-neg-mt-4。

断点	最小宽度	典型端
`g-sm-*`	480px	大手机
`g-md-*`	768px	平板
`g-lg-*`	1024px	小型桌面
`g-xl-*`	1280px	标准桌面
`g-2xl-*`	1536px	宽屏工作台

优先使用 start/end、x/y 等逻辑方向工具。只有明确要求物理方向时才使用 left/right。

搜索完整工具类清单

输入类名、完整选择器、CSS 属性、值或响应条件。为避免一次渲染 11,498 项，至少输入两个字符后分批显示，每次 100 项；输入 g- 后可逐批浏览全部内容。原始 JSON 清单包含每一项，适合 AI 和构建工具直接读取。

正在读取工具类清单…

布局系统

基础布局负责容器和网格，应用壳负责固定区域、滚动边界和端适配。复杂页面不要直接从大量定位工具类开始。

.g-container标准页面宽度与自适应左右留白。

.g-stack / .g-cluster纵向流与自动换行的横向组合。

.g-grid-auto无需断点的自适应卡片网格。

.g-app-shell侧栏、页头、主内容的后台基础壳。

.g-mobile-shell顶部、底部导航与安全区。

.g-desktop-shell标题栏、活动栏、工作台、检查器与状态栏。

Dashboard 示例

<main class="g-app-shell">
  <aside class="g-app-shell-sidebar">...</aside>
  <header class="g-app-shell-header">...</header>
  <section class="g-app-shell-main">
    <div class="g-dashboard-grid">
      <article class="g-kpi g-span-3">...</article>
    </div>
  </section>
</main>

24 / 12 完整栅格系统

Gardener 以 24 栅格作为企业后台、CMS 和精细表单的主兼容协议，同时通过 .g-grid-12 提供传统 12 栅格。两者都使用原生 CSS Grid、逻辑方向和统一断点，不依赖负边距。

24 columns12 compatible5 breakpointsRTLContainer QueryPrint

接口选择：.g-row 与 .g-grid-24 等价，适合 24 栅格；传统 12 栅格必须使用 .g-grid-12 作为父级。列宽类保持相同，AI 只需先确定父级系统。

实时 24 栅格

6 / 24

12 / 24

6 / 24

offset 4 + span 16

<div class="g-grid-24 g-gutter-4">
  <aside class="g-col-24 g-md-col-6">...</aside>
  <main class="g-col-24 g-md-col-12">...</main>
  <aside class="g-col-24 g-md-col-6">...</aside>
</div>

12 栅格兼容

3 / 12

6 / 12

3 / 12

<div class="g-grid-12 g-gutter-3">
  <div class="g-col-12 g-md-col-3">...</div>
  <div class="g-col-12 g-md-col-6">...</div>
  <div class="g-col-12 g-md-col-3">...</div>
</div>

完整类名矩阵

能力	类名	范围或说明
根容器	`g-row`、`g-grid-24`、`g-grid-12`	24、24、12 列
列宽	`g-col-1`…`g-col-24`	跨度 1–24；12 栅格使用 1–12
自动与填满	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	单轨自动放置、整行填满、从指定网格线确定性填满剩余列
默认与整行	`g-col`、`g-col-full`	两者都明确占据整行
偏移	`g-offset-0`…`g-offset-23`	从逻辑 inline-start 方向偏移
显式网格线	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	复杂非连续布局
响应式	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	列、偏移、起止线、显示状态和 gutter 都可响应
顺序	`g-order-0`…`g-order-24`	同时提供五档响应式版本
间距	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
行对齐	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	控制列的交叉轴对齐
单列对齐	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	覆盖单个列
自动布局	`g-row-dense`、`g-row-no-gutter`	密集填充和零间距
显示状态	`g-col-hidden`、`g-md-col-visible`	各断点均有 hidden / visible
Subgrid	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	浏览器支持时继承父网格轨道
打印	`g-print-col-1`…`g-print-col-24`	另有 print offset、start、end、hidden、visible

断点

前缀	视口最小宽度	示例
`sm`	480px	`g-sm-col-12`
`md`	768px	`g-md-offset-4`
`lg`	1024px	`g-lg-col-start-7`
`xl`	1280px	`g-xl-gutter-6`
`2xl`	1536px	`g-2xl-col-8`

容器查询

当组件宽度由面板而不是视口决定时，在外层使用 .g-grid-container，列使用 g-cq-sm-col-*、g-cq-md-col-*、g-cq-lg-col-*。

<section class="g-grid-container">
  <div class="g-grid-24">
    <aside class="g-col-24 g-cq-md-col-8">...</aside>
    <main class="g-col-24 g-cq-md-col-16">...</main>
  </div>
</section>

RTL、嵌套与打印

偏移和网格线遵循 CSS 逻辑 inline 方向；在 dir="rtl" 下自动从右侧开始，不需要另一套类。
任意列内部都可再次放置 g-row、g-grid-24 或 g-grid-12，形成嵌套栅格。
打印端使用 g-print-col-* 明确重排；g-print-col-hidden 隐藏不应打印的列。

能力清单记录了栅格的系统数、列宽、偏移、断点、容器断点、间距和测试矩阵；独立栅格示例页用于真实验证 24 / 12、RTL、Container Query 与打印结构。构建检查会逐项验证所有类，而不是只检查几个示例。

传统区域布局系统

第 2 类能力把长期复用的页面骨架固化为 16 个语义布局。区域统一使用逻辑方向命名；AI 应先选择最接近的根布局，再填入部件，不要重新组织 Grid、定位和移动端折叠 CSS。

16 patternsViewport + ContainerRTLSafe AreaTauri / ElectronPrint

命名协议：top / start / main / end / bottom 是五个公共区域；start 和 end 会随书写方向变化。需要固定视觉左/右的特殊画布应自行明确方向，不要破坏公共逻辑语义。

实时五区域布局

Top

Main workspace

16 种成品骨架

布局	根类	直接部件 / 适用场景
上 / 主 / 下	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`；普通网站和文档页
始 / 主 / 末	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`；三栏内容
五区域	`g-region-frame`	top / start / main / end / bottom；门户与复杂后台
Holy Grail	`g-holy-grail`	五区域语义别名；传统响应式网页
单侧栏应用壳	`g-sidebar-shell`	top / start / main；Dashboard 与 CMS
双侧栏	`g-double-sidebar-layout`	start / main / end；编辑器、管理台
主从视图	`g-master-detail`	`g-master`、`g-detail`；邮件、联系人、订单
列表 / 详情 / 检查器	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`；超级 CMS
页脚沉底	`g-sticky-footer-layout`	top / main / bottom；短内容页面
固定页头	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
固定侧栏	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`；移动端用 `is-open`
粘性辅助栏	`g-sticky-aside-layout`	内容 + `g-sticky-aside`；文章目录、结算摘要
Dock 工作台	`g-dock-layout`	`g-dock-top/start/main/end/bottom`；Tauri / Electron、IDE
可调分栏	`g-split-view`	`g-split-view-primary/secondary`；配合 `data-g-split-pane`
全屏工作区	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`；画布、媒体、AI Artifact
移动安全区	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`；PWA 与移动 WebView

五区域与 Master / Detail

<main class="g-region-frame">
  <header class="g-region-top">...</header>
  <nav class="g-region-start">...</nav>
  <section class="g-region-main">...</section>
  <aside class="g-region-end">...</aside>
  <footer class="g-region-bottom">...</footer>
</main>

<section class="g-master-detail">
  <nav class="g-master">...</nav>
  <article class="g-detail">...</article>
</section>

Dock 与可调分栏

<main class="g-dock-layout">
  <header class="g-dock-top">Toolbar</header>
  <aside class="g-dock-start">Explorer</aside>
  <section class="g-dock-main">Workspace</section>
  <aside class="g-dock-end">Inspector</aside>
  <footer class="g-dock-bottom">Status</footer>
</main>

<div class="g-split-view" data-g-split-pane data-g-min="160">
  <section class="g-split-panel g-split-view-primary">...</section>
  <div class="g-split-handle" role="separator"
       aria-label="调整两侧面板宽度"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

响应、容器、状态与变量

视口小于 768px 时，多栏、Master / Detail 和检查器布局按语义顺序纵向排列；Dock 默认只保留主区，可用 is-start-open 或 is-end-open 切换移动面板。
嵌入卡片、模态框或可缩放工作台时，以 g-region-container 包裹；容器小于 768px 会独立折叠，不受浏览器窗口宽度干扰。
is-start-collapsed、is-end-collapsed 控制 Dock；g-region-panel is-collapsed 隐藏通用区域面板；is-contained 让 fixed、dock、fullscreen 布局安全嵌入预览或设计器。
尺寸通过 --g-region-min-block-size、--g-region-start-size、--g-region-end-size、--g-master-size、--g-list-size、--g-inspector-size、--g-dock-*-size 调整。
打印时固定、粘性、全屏和分栏被展平成普通文档流；分隔手柄自动隐藏。

机器可读能力清单逐项登记了 16 种布局、特性和测试矩阵；独立区域布局示例页覆盖 RTL、容器查询、固定区、Dock、Split View、移动安全区与全屏工作区。既有 g-app-shell、g-mobile-shell、g-desktop-shell 保持兼容，可继续作为业务级壳使用。

经典布局原语

第 3 类能力提供 22 个内在响应的布局原语。它们按内容和可用空间工作，通常不需要页面断点；AI 应优先按布局意图选择原语，再通过公开变量调节尺寸和间距。

22 primitivesIntrinsic responsiveContainer QueryRTLReduced MotionPrint

与工具类的区别：工具类描述单个 CSS 属性，原语描述稳定的空间关系。例如 g-sidebar-layout 会根据内容最小宽度自动从双栏切换为纵向，不要求 AI 推测应使用哪个视口断点。

实时 Bento 与流式原语

Featured 8 × 2

Tall 4 × 2

Tile

Wide

Repel 自动分离并安全换行

Clusterwrap

22 个原语完整矩阵

原语	根类与部件	用途和关键变量
Stack	`g-stack`、`is-split`、`g-stack-split`	纵向节奏；`--g-stack-gap`
Cluster	`g-cluster`	标签、按钮、元数据自动换行；gap / align / justify
Center	`g-center`、`is-intrinsic`	阅读宽度、水平或内容居中；max / gutter
Sidebar	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	按内容宽度折叠的侧栏；size / content-min / gap
Switcher	`g-switcher`	空间不足时从横向切成纵向；threshold / gap
Cover	`g-cover`、`g-cover-center`	视口或容器中间内容；min / padding
Reel	`g-reel`	横向滚动卡片、媒体轨；item-size / gap
Frame	`g-frame`	固定比例并裁切媒体；ratio / fit / position
Media Object	`g-media-object` + media / body / action	头像、正文、末端操作；`is-end`、`is-stacked`
Grid Auto Fit	`g-grid-auto-fit`、`g-grid-auto`	内容少时折叠空轨；min / gap
Grid Auto Fill	`g-grid-auto-fill`	保留空轨位置，适合固定卡槽；min / gap
Bleed	`g-bleed`、`is-full`	图片、引语突破正文宽度；size / max
Repel	`g-repel`	标题和操作分居两端并可换行；gap / align
Imposter	`g-imposter-container` + `g-imposter`	未知尺寸居中层；`is-fixed`、margin / max
Overlay	`g-overlay-layout` + base / layer	媒体上叠工具、标注、状态；align / justify / margin
Masonry	`g-masonry`	可变高度内容列；columns / min / gap，窄容器单列
Bento	`g-bento` + wide / full / tall / featured	营销、Dashboard 非均匀卡片；row-min / gap / span
Aspect Ratio	`g-aspect-ratio` + square / portrait / landscape / video / cinema	不强制裁切的通用比例盒
Scroll Area	`g-scroll-area`、`is-block`、`is-inline`	独立滚动所有者；max / overscroll
Scroll Snap	`g-scroll-snap` + `g-scroll-snap-item`	横向或 `is-block` 吸附列表；size / strictness / align
Safe Area	`g-safe-area`、`is-padded`	刘海、圆角屏和 Home Indicator 四边保护
Sticky Region	`g-sticky-region`、`is-bottom`、`is-surface`	滚动区域逻辑上/下边缘吸附；offset / z

常用组合

<section class="g-stack" style="--g-stack-gap:var(--g-space-6)">
  <header class="g-repel">
    <h2>Page title</h2>
    <div class="g-cluster">...actions...</div>
  </header>
  <div class="g-sidebar-layout">
    <aside>Filters</aside>
    <main class="g-grid-auto-fit">...cards...</main>
  </div>
</section>

Media Object、Overlay 与滚动

<article class="g-media-object">
  <img class="g-media-object-media" alt="" src="avatar.png">
  <div class="g-media-object-body">...</div>
  <button class="g-media-object-action">Open</button>
</article>

<figure class="g-overlay-layout">
  <img class="g-overlay-base" alt="...">
  <figcaption class="g-overlay-layer">Caption</figcaption>
</figure>

<div class="g-scroll-area" tabindex="0" aria-label="Activity">
  <header class="g-sticky-region is-surface">Activity</header>
  ...long content...
</div>

响应与环境规则

Sidebar、Switcher、Auto Fit/Fill 本身按可用空间响应，不依赖设备宽度。
g-layout-container 建立组件容器；小于 640px 时 Media Object、Masonry 和 Bento 独立折叠。视口同样提供 640px 兜底。
所有水平语义使用 inline/start/end；Media Object、Bleed、Imposter、Overlay、Reel 和 Scroll Snap 支持 RTL。
可滚动区域应可被键盘聚焦并提供可访问名称；Reduced Motion 会取消原语的平滑滚动。
打印时 Reel、Scroll Area、Scroll Snap、Masonry、Imposter、Overlay 和 Sticky Region 自动展平，避免内容被裁掉。

能力清单登记全部 22 个原语、别名、环境特性与测试矩阵；独立原语示例页覆盖内在响应、RTL、容器查询、Bento、Masonry、滚动吸附、安全区和打印结构。已有 g-grid-auto 与 g-sidebar-layout 接口保持兼容。

页面级公共组件

第 4 类能力提供 23 种高复用页面结构和状态。它们位于布局骨架与业务组件之间，统一标题、操作、上下文、筛选、批量选择、滚动动作和异常结果，让 AI 不必为每张页面重复拼装公共区域。

23 patternsContainer QuerySticky + FixedSafe AreaRTLPrint

状态要求：页面不能只实现正常数据态。至少要明确 Loading、Empty、Error；面向路由和完整应用时还应准备 403、404、500、Offline 和 Maintenance。Gardener 为这些状态提供相同的内容、视觉、详情、操作和帮助部件。

实时页头与公共栏

已选择 3 项

23 种完整模式

模式	根类	部件、状态和用途
Page Header	`g-page-header`	main / eyebrow / title / description / meta / actions；compact、centered、sticky
Section Header	`g-section-header`	main / title / description / actions；default、borderless
Subheader	`g-subheader`	title / actions；页面内二级上下文条
Toolbar	`g-toolbar`	start / center / end / title / separator；compact、sticky、scrollable
Action Bar	`g-action-bar`	`g-action-bar-main`；表单和页面尾部操作
Status Bar	`g-status-bar`	section / text / `is-end`；编辑器与桌面状态
Command Bar	`g-command-bar`	group / item / shortcut；横向命令和快捷键
Context Bar	`g-context-bar`	content / actions；info、success、warning、danger
Filter Bar	`g-filter-bar`	main / actions；可粘性筛选条件区
Bulk Action Bar	`g-bulk-action-bar`	count / actions；active、empty、hidden
Footer Bar	`g-footer-bar`	footer actions、记录统计和分页
Floating Action Bar	`g-floating-action-bar`	center、end、contained；安全区适配
Back to Top	`g-back-to-top`	`data-g-scroll-top` 自动显示、滚动和恢复焦点
Divider with Text	`g-divider`	`g-divider-text`；center、start、end、vertical
Sticky Actions	`g-sticky-actions`	`g-sticky-actions-main`；滚动表单底部动作
Page Loading	`g-page-loading`	content / title / description；contained、full、overlay
Page Empty	`g-page-empty`	空列表、首次使用和无搜索结果
Page Error	`g-page-error`	请求失败、重试、可选技术详情
403	`g-page-forbidden`	权限不足、申请权限和返回入口
404	`g-page-not-found`	路由失效、搜索和首页入口
500	`g-page-server-error`	服务器错误、请求编号和重试
Offline	`g-page-offline`	离线状态、本地数据安全和重连
Maintenance	`g-page-maintenance`	维护窗口、预计恢复时间和状态页

Page Header 与 Toolbar

<header class="g-page-header">
  <div class="g-page-header-main">
    <div class="g-page-header-eyebrow">Workspace</div>
    <h1 class="g-page-header-title">Content</h1>
    <p class="g-page-header-description">...</p>
  </div>
  <div class="g-page-header-meta">...</div>
  <div class="g-page-header-actions">...buttons...</div>
</header>

<div class="g-toolbar" role="toolbar" aria-label="页面工具">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

统一页面状态结构

<main class="g-page-not-found">
  <div class="g-page-state-content">
    <div class="g-page-state-code">404</div>
    <h1 class="g-page-state-title">页面不存在</h1>
    <p class="g-page-state-description">链接可能已经失效。</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">返回首页</a>
    </div>
  </div>
</main>

响应、运行时与打印

在视口或 g-page-component-container 小于 640px 时，Page Header 的操作区转到下一行，Toolbar center 独占一行，Context Bar 操作区完整换行。
所有开始、结束和操作对齐使用逻辑方向；Floating Action Bar、Back to Top 同时读取设备安全区。
Back to Top 使用现有 data-g-scroll-top 运行时，根据滚动位置显示，点击后平滑返回顶部；Reduced Motion 环境自动使用即时滚动。
打印时交互栏、筛选、加载遮罩和浮动按钮隐藏；页头和结果页展平，错误说明与请求编号仍保留。
页面状态的 visual、code、title、description、details、actions、help 部件可以按需要省略，但标题和可恢复入口不应同时缺失。

能力清单登记 23 种页面模式、运行时和测试矩阵；独立页面组件示例覆盖所有页头、公共栏、Loading、Empty、Error、403、404、500、Offline、Maintenance、Container Query 和 Back to Top。

Tip 与帮助系统

第 5 类能力提供 28 种提示、解释、引导和持续支持模式。系统同时覆盖低打扰的行内帮助、需要交互的浮层、复杂产品引导、帮助中心、排错路径与内容反馈，避免 AI 只会临时拼一个 Tooltip。

28 patterns3 runtimesCollision awareKeyboardRTLPrint

选型顺序：不遮挡内容的补充优先使用 Help Text、Inline Hint 或 Tip；必须绑定控件时使用 Tooltip；包含链接和操作时使用 Help Popover；跨步骤教学使用 Tour。不要把重要错误或必须阅读的法律信息藏进悬浮层。

实时帮助组合

保存前可以通过预览检查所有设备宽度。

这段说明有帮助吗？

28 种完整模式

模式	根类	用途与关键部件
Tip	`g-tip`	默认、info、success、warning、danger；紧凑技巧
Inline Hint	`g-inline-hint`	正文或控件旁的短解释
Help Text	`g-help-text`	字段下方持久说明；成功、警告、危险语义
Help Trigger	`g-help-trigger`	圆形问号入口；hover、focus-visible
Tooltip	`g-tooltip`	`data-g-tooltip`；悬停、焦点、Escape 与 aria-describedby
Rich Tooltip	`g-tooltip-rich`	title / description；仍然不可交互
Help Popover	`g-help-popover`	header / title / body / actions；点击、外部关闭、Escape
Definition	`g-definition`	术语、缩写与行业概念解释入口
Callout	`g-callout`	icon / title / content；五种语义色
Note	`g-note`	文档注释、兼容说明和旁注
Do / Don't	`g-guidance-pair`	do / dont / label；并排规范示例
Key Hint	`g-key-hint`	单个键位或组合键中的按键
Shortcut List	`g-shortcut-list`	item / keys；命令和快捷键对照
Help Card	`g-help-card`	icon / title / description / actions
Help Panel	`g-help-panel`	header / body / footer；Dashboard 和桌面检查器
Help Center	`g-help-center`	header / title / description / search
Help Topics	`g-help-topics`	topic / title / meta；自动响应主题网格
FAQ	`g-faq`	item / question / answer；复用 Accordion 运行时
Contextual Help	`g-contextual-help`	与当前页面或表单上下文绑定的帮助
Coach Mark	`g-coach-mark`	title / description / actions；单点功能教学
Guided Tour	`g-tour`	step / progress / actions；next、prev、skip、complete、Escape
Spotlight	`g-spotlight`	Tour 自动跟踪目标位置并遮罩页面
Hotspot	`g-hotspot`	label；脉冲热点，Reduced Motion 自动静止
Feature Hint	`g-feature-hint`	badge / title / description；新功能就地提示
What's New	`g-whats-new`	item / marker / title / description；版本更新摘要
Help Checklist	`g-help-checklist`	item / marker；pending、complete
Troubleshooting	`g-troubleshooting`	step / number / title / description；顺序排错
Help Feedback	`g-help-feedback`	actions；内容是否有用与支持升级入口

Tooltip 与 Help Popover

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="了解发布状态">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    发布后访客即可看到更改
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>为什么需要验证？</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">域名所有权</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

声明式 Guided Tour

<button data-g-tour-open="publish-tour">开始引导</button>
<div id="publish-tour" class="g-tour" data-g-tour hidden>
  <span class="g-tour-progress" data-g-tour-progress></span>
  <section class="g-tour-step" data-g-target="#preview">...</section>
  <section class="g-tour-step" data-g-target="#publish" hidden>...</section>
  <footer class="g-tour-actions">
    <button data-g-tour-skip>跳过</button>
    <button data-g-tour-prev>上一步</button>
    <button data-g-tour-next>下一步</button>
  </footer>
</div>

运行时、可访问性与环境规则

Tooltip 在 pointer hover 和键盘 focus 时显示，自动写入 role="tooltip" 与 aria-describedby；内容不得放可点击控件。
Popover 用于可交互内容，自动同步 aria-expanded、aria-controls，支持外部点击和 Escape 关闭。
浮层支持 top / bottom / start / end 与 start / center / end 对齐，空间不足时自动翻转并限制在视口内；RTL 会交换逻辑方向。
Tour 自动维护步骤、进度、目标 Spotlight、上一步/下一步/跳过/完成与触发器焦点恢复；无目标步骤居中显示。
移动端 Guidance Pair 自动单列，Help Panel 改为上边框；Reduced Motion 关闭 Hotspot 脉冲和 Spotlight 过渡。
打印隐藏 Tooltip、Popover、Tour、Spotlight、Hotspot 与反馈动作，保留 Tip、Callout、Note 和排错正文。

能力清单登记全部 28 种模式、8 类浮层位置、3 种共享运行时和测试矩阵；独立帮助系统示例覆盖所有根类、RTL/移动响应、Tooltip、Popover、FAQ 与两步 Tour。

表单传统组合

第 6 类能力把基础控件提升为 37 种稳定表单结构，覆盖普通网页、移动表单、Dashboard 设置页、CMS 编辑器和 Tauri/Electron 检查器。字段标签、说明、验证、业务分组、动态增删与最终提交都有明确接口。

37 patterns5 runtimesContainer QueryValidationRTLPrint

语义要求：Placeholder 不能替代 Label；必填、错误和帮助信息不能只靠颜色表达；相关 Checkbox/Radio 必须放入带 Legend 的 Fieldset；提交失败后应同时提供字段级错误与 Validation Summary。

实时组合示例

站点资料

字段结构、业务选择与进度状态保持一致。

已保存

站点名称必填

显示在浏览器标题中13 / 60

发布路径

/

发布方式

立即发布完成预检后切换生产版本。定时发布按站点时区执行发布。

资料完成度72%

37 种完整模式

模式	根类	用途与关键部件
Form	`g-form`	统一垂直节奏；default、bordered
Form Section	`g-form-section`	header / title / description；长表单分区
Field	`g-field`	header / meta / required / optional；标签、控件、说明
Fieldset	`g-fieldset`	legend / description；语义化相关字段组
Form Row	`g-form-row`	按最小字段宽度自动换行
Form Grid	`g-form-grid`	2/3/4 列、full-span；确定性表单网格
Horizontal Form	`g-form-horizontal`	固定标签列 + 弹性控件列
Inline Form	`g-form-inline`	筛选、搜索与紧凑提交组合
Compact Form	`g-form-compact`	Dashboard、桌面检查器高密度表单
Input Group	`g-input-group`	`g-input-addon`；按钮、Select 和输入拼接
Input Affix	`g-input-affix`	start / end；币种、单位和静态图标
Search Field	`g-search-field`	icon / action；搜索输入的标准结构
Password Field	`g-password-field`	`data-g-password-toggle`；显示/隐藏与光标保持
Clearable Field	`g-clearable-field`	`data-g-clear-input`；清空、input/change 事件和焦点恢复
Character Counter	`g-character-field`	count；default、near-limit、over-limit
Validation State	`g-validation-state`	message；success、warning、danger、error
Validation Summary	`g-validation-summary`	title / list；提交失败后链接到字段
Checkbox Group	`g-check-group`	stacked、inline；多选项分组
Radio Group	`g-radio-group`	stacked、inline；单选项分组
Switch Row	`g-switch-row`	content / title / description；设置页开关
Choice Cards	`g-choice-group`	card / title / description；套餐与方案选择
Name Group	`g-name-group`	姓/名或名/姓双字段，可由内容调整顺序
Address Group	`g-address-group`	line / city / region / postal；六轨业务布局
Phone Group	`g-phone-group`	国家代码、号码、分机
Money Group	`g-money-group`	币种 + 金额，逻辑方向圆角
Date Range	`g-date-range-group`	开始、separator、结束日期
Time Range	`g-time-range-group`	开始、separator、结束时间
Unit Field	`g-unit-field`	数值 + 固定/可选单位
Range Field	`g-range-field`	Range + output；即时数值展示
File Field	`g-file-field`	control / name；单文件选择行
Repeatable Field	`g-repeatable-field`	list / item / content / actions；模板增删、min/max、索引
Conditional Field	`g-conditional-field`	controller / show-when；显示、隐藏、inert
Form Actions	`g-form-actions`	end、start、between、sticky；Safe Area
Autosave Status	`g-autosave-status`	idle、saving、saved、error
Form Progress	`g-form-progress`	meta / track / value；填写完成度
Form Review	`g-form-review`	row / label / value / edit；提交前复核
Consent Group	`g-consent-group`	title / description；条款、授权与确认

布局与字段组合

<form class="g-form g-form-container">
  <section class="g-form-section">
    <header class="g-form-section-header">...</header>
    <div class="g-form-row">
      <div class="g-field">
        <div class="g-field-header">
          <label class="g-label" for="name">名称</label>
          <span class="g-field-required">必填</span>
        </div>
        <input class="g-input" id="name" required>
        <div class="g-field-meta">...help and count...</div>
      </div>
    </div>
  </section>
  <footer class="g-form-actions is-sticky">...</footer>
</form>

五类声明式运行时

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">显示密码</button>
</div>

<div class="g-character-field" data-g-character-count="200">
  <textarea class="g-textarea" maxlength="200"></textarea>
  <output class="g-character-count" data-g-character-output></output>
</div>

<div class="g-conditional-field" data-g-conditional-field
     data-g-controller="#delivery" data-g-show-when="shipping">...</div>

<div class="g-repeatable-field" data-g-repeatable-field
     data-g-min-items="1" data-g-max-items="5">
  <div class="g-repeatable-list" data-g-repeatable-list>...</div>
  <button data-g-repeatable-add type="button">添加</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

响应、可访问性与打印

g-form-container 建立 640px 容器查询；Form Grid、Horizontal、姓名和地址组合可在嵌入式 CMS 面板内独立折叠，视口规则作为兜底。
所有组合使用逻辑方向属性；Input Group、Money、Unit、字段动作和 Sticky Actions 在 RTL 下保持正确首尾关系。
Password Toggle 同步 aria-pressed 与可访问名称；Clear Input 同时派发 input/change；Character Count 对 Unicode 字符计数。
Conditional Field 隐藏时同时设置 hidden、inert、aria-hidden；Repeatable Field 支持 min/max、模板索引、自动初始化新增控件和删除后焦点恢复。
Reduced Motion 降低保存动画；打印隐藏密码、清空、增删和提交动作，保留字段值、验证与审核信息。

能力清单登记 37 种组合、5 种运行时和完整测试矩阵；独立表单组合示例覆盖全部根类、业务字段组、动态增删、条件显示、容器响应、RTL 与打印。

传统导航组合

第 7 类能力提供 38 种稳定导航模式，覆盖公共网站、企业门户、Dashboard、超级 CMS、移动网页和 Tauri/Electron 桌面端。全局、局部、层级、选中、页内、翻页、流程、移动、命令与身份入口都有现成结构，AI 不需要临时重组导航 CSS。

38 patterns9 reusable runtimesKeyboardSafe AreaRTLPrint

选择顺序：先判断导航范围（全局、局部、层级或页内），再判断方向和终端；Tabs 只切换同一上下文内的视图，Breadcrumb 只表达位置，Pagination 只表达结果集翻页，不应互相替代。

实时组合示例

38 种完整模式

族	模式与根类	用途
全局	Navbar `g-navbar`	品牌、中心区、尾部操作与移动 Toggle
	Primary `g-primary-nav`	产品最主要的一级入口
	Utility `g-utility-nav`	帮助、状态、语言和登录等辅助入口
	Sub Navigation `g-subnav`	产品区、频道或对象内二级导航
局部与桌面	Sidebar `g-sidebar`	Dashboard 和 CMS 持久侧栏
	Collapsible `g-collapsible-nav`	`data-g-nav-toggle`；折叠区和移动菜单
	Navigation Rail `g-nav-rail`	`data-g-roving-nav`；窄轨与方向键焦点
	Activity Bar `g-activitybar`	Tauri/Electron 工作台主功能切换
	Menubar `g-menubar`	桌面 File/Edit/View 型菜单栏
层级与菜单	Mega Menu `g-mega-menu`	大型站点多栏目入口
	Dropdown `g-dropdown`	按钮菜单；Arrow、Home、End、Escape
	Context Menu `g-context-menu`	`data-g-context-menu`；右键、Shift+F10、视口防溢出
	Tree Navigation `g-tree-nav`	`data-g-tree`；无限层级、展开与方向键
位置与选择	Breadcrumb `g-breadcrumb`	当前位置和祖先路径
	Tabs `g-tabs`	`data-g-tabs`；同层视图切换
	Vertical Tabs `g-vertical-tabs`	设置页与检查器纵向视图
	Segmented `g-segmented`	少量互斥显示方式
	Pill Navigation `g-pill-nav`	分类、状态和内容频道
	Anchor Navigation `g-anchor-nav`	静态文章目录
	Scrollspy `g-scrollspy-nav`	`data-g-scrollspy`；随滚动同步当前位置
结果集	Pagination `g-pagination`	已知总页数的数字分页
	Cursor Pagination `g-cursor-pagination`	API 游标与上一批/下一批
	Load More `g-load-more-nav`	移动 Feed 和渐进加载
流程与文档	Stepper `g-stepper`	短流程进度状态
	Wizard Navigation `g-wizard-nav`	长流程步骤目录与内容区
	Back Navigation `g-back-nav`	返回上层对象或列表
	Previous / Next `g-prev-next-nav`	文章、教程与详情序列
	Skip Navigation `g-skip-nav`	键盘用户跳过重复导航
移动端	Mobile Top `g-mobile-top-nav`	返回、标题与尾部动作
	Bottom Navigation `g-bottom-nav`	3–5 个移动端一级目的地与 Safe Area
	Mobile Tab Bar `g-mobile-tab-bar`	移动应用式顶层标签
	Drawer Navigation `g-drawer-nav`	小屏侧滑导航与焦点恢复
命令与身份	Command Palette `g-command-palette`	全局搜索式命令入口
	Command Navigation `g-command-nav`	行内命令清单与快捷键
	Jump Navigation `g-jump-nav`	`data-g-jump-nav`；Select 跳转长页面章节
	Quick Navigation `g-quick-nav`	最近、收藏和常用入口
	Locale Navigation `g-locale-nav`	语言、地区与站点版本
	Account Navigation `g-account-nav`	用户、组织、设置和退出入口

五个新增声明式行为

<button data-g-nav-toggle="mobile-menu">菜单</button>
<aside class="g-drawer-nav" id="mobile-menu" hidden>...</aside>

<nav class="g-nav-rail" data-g-roving-nav data-g-orientation="vertical">...</nav>

<div data-g-context-menu>
  <div data-g-context-target tabindex="0">...</div>
  <ul class="g-context-menu" data-g-context-menu-panel hidden>...</ul>
</div>

<nav class="g-scrollspy-nav" data-g-scrollspy
     data-g-scrollspy-root="scroll-container" data-g-scrollspy-offset="96">...</nav>

<label class="g-jump-nav" data-g-jump-nav>
  <select><option value="#section-id">章节</option></select>
</label>

可访问性、响应与环境规则

当前页使用 aria-current="page"，当前页内位置使用 aria-current="location"，Tabs 使用 aria-selected；不要只靠颜色。
Roving Nav 支持横向/纵向、RTL、四方向键、Home 与 End；Context Menu 支持鼠标右键、键盘菜单键、Shift+F10、Escape 和焦点恢复。
g-nav-container 建立 640px 容器响应；Navbar、Vertical Tabs 与 Wizard 可在 CMS 插槽或桌面检查器内独立折叠。
Bottom Navigation 与 Mobile Tab Bar 处理 safe-area-inset-bottom；Drawer 使用逻辑方向，在 RTL 中从右侧进入。
Reduced Motion 关闭 Drawer、Tree 与 Skip Link 过渡；Forced Colors 提供显式当前项轮廓；打印隐藏操作导航，保留 Breadcrumb、文档前后页与流程信息。

能力清单登记 38 种导航模式、11 个导航族、9 类复用运行时与完整测试矩阵；独立导航示例覆盖全局、层级、选择、菜单、页内、流程、移动与桌面导航，并可直接测试键盘和右键交互。

数据展示与操作组合

第 8 类能力提供 48 种稳定数据模式，把“数据显示”与“数据操作”作为同一套契约处理。普通网站、Dashboard、超级 CMS、移动端列表、分析报表和 Tauri/Electron 高密度工作台，都可以直接选择表格、记录、列表、层级、流、指标、可视化、计划、空间或操作模式。

48 patterns8 reusable runtimesSticky / StackedKeyboard GridRTLPrint

选择顺序：先判断数据形态，再判断操作强度。少量静态属性用 Description List 或 Key Value；多记录用 List 或 Table；单元格需要键盘移动和编辑时才使用 Data Grid；层级数据使用 Tree 或 Tree Table；趋势和比较先提供可读数值，再增加图形。

实时组合示例

2,480已发布

128待审核

6风险项

页面	状态	访问量
企业首页	已发布	28,420
产品中心	审核中	16,208

48 种完整模式

族	模式与根类	用途与关键能力
表格	Table `g-table`	基础语义表格；striped、hover、compact
	Responsive Table `g-responsive-table`	横向滚动、移动卡片化、Sticky 首尾列
	Data Grid `g-data-grid`	ARIA Grid、四方向键、Home/End
	Editable Grid `g-editable-grid`	可编辑单元格、editing、invalid
	Tree Table `g-tree-table`	缩进层级、父子行展开
	Grouped Table `g-grouped-table`	按区域、日期、类型分组
	Expandable Table `g-expandable-table`	详情行与 `g-row-disclosure`
	Comparison Table `g-comparison-table`	套餐、版本和能力横向比较
	Pivot Table `g-pivot`	交叉汇总、Sticky 行标题
记录与列表	Description List `g-description-list`	少量静态标签和值
	Key Value `g-key-value`	值、长文本和单项动作
	Record Detail `g-record-detail`	单条业务记录完整详情
	List Group `g-list-group`	通用列表与交互行
	Media List `g-media-list`	头像、缩略图、正文和尾部动作
	Dense List `g-dense-list`	桌面端和检查器高密度列表
	Virtual List `g-virtual-list`	大量记录的窗口化承载外壳
层级与流	Tree `g-tree`	无限层级、展开和键盘移动
	Timeline `g-timeline`	里程碑和状态历史
	Activity Feed `g-activity-feed`	用户与系统活动流
	Audit Log `g-audit-log`	日期分组、操作者、动作和时间
指标与图形	KPI `g-kpi`	关键值与涨跌方向
	Stat List `g-stat-list`	一组紧凑统计值
	Metric Card `g-metric-card`	数值、标签与小趋势图
	Sparkline `g-sparkline`	条形或 SVG 微型趋势
	Progress Stats `g-progress-stats`	分类进度和占比
	Chart `g-chart`	图表库无关的标题、绘图区和动作容器
	Data Legend `g-data-legend`	颜色、系列和可读标签
	Ranking `g-ranking`	排名、名称和数值
	Status Summary `g-status-summary`	状态数量快速总览
计划与空间	Calendar `g-calendar`	周/月时间网格和事件
	Agenda `g-agenda`	线性日程列表
	Kanban `g-kanban`	阶段列和任务卡
	Gantt `g-gantt`	任务、时间轴和进度条
	Organization Chart `g-org-chart`	组织节点和层级关系
	Map `g-map-shell`	地图画布、工具和结果面板
	Data Matrix `g-data-matrix`	权限、能力和二维状态矩阵
	Heatmap `g-heatmap`	活跃度、贡献度和密度
数据操作	Data Toolbar `g-data-toolbar`	搜索、筛选、结果数和操作
	Column Chooser `g-column-chooser`	列显示与隐藏
	Saved Views `g-saved-views`	保存筛选、排序和列配置
	Export Panel `g-export-panel`	格式、范围和字段导出
	Data State `g-data-state`	Loading、Empty、Error、Offline
	View Switcher `g-data-view-switcher`	表格、列表和卡片视图切换
	Selection Summary `g-selection-summary`	选中数量和批量动作
	Table Density `g-table-density`	舒适、标准和紧凑密度
	Filter Summary `g-filter-summary`	当前条件和一键清除
	Sort Builder `g-sort-builder`	多字段排序顺序
	Data Inspector `g-data-inspector`	CMS 和桌面端记录检查器

六个新增声明式行为

<div data-g-table-sort data-g-row-select data-g-row-disclosure
     data-g-column-toggle>
  <input data-g-select-all type="checkbox" aria-label="全选">
  <button data-g-sort-key="revenue" data-g-sort-type="number">收入</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">展开</button>
  <label><input data-g-toggle-column="owner" checked>负责人</label>
</div>

<div data-g-data-filter data-g-filter-target="result-list">
  <input data-g-filter-input type="search">
  <span data-g-filter-count>0</span>
</div>
<div id="result-list">
  <article data-g-filter-item data-g-filter-text="可选索引文本">...</article>
  <div data-g-filter-empty hidden>没有结果</div>
</div>

<div data-g-data-view data-g-current-view="table">
  <button data-g-view="table">表格</button>
  <button data-g-view="card">卡片</button>
  <section data-g-view-panel="table">...</section>
  <section data-g-view-panel="card" hidden>...</section>
</div>

运行时、可访问性与环境规则

Table Sort 自动维护表头 aria-sort，支持 text、number、date 和稳定排序；排序时详情行跟随主行移动。
Row Select 维护全选、部分选中、indeterminate、行 aria-selected、Shift 区间选择与 Selection Summary。
Row Disclosure 同时服务详情行和 Tree Table，维护 aria-controls、aria-expanded、Escape 收起与递归子行隐藏。
Column Toggle 至少保留一列；Data Filter 支持 Unicode 规范化、多关键词 AND 匹配、结果数和 Empty；Data View 支持方向键、Home、End。
g-data-container 建立 640px 容器折叠；Stacked Table 在小屏使用每格 data-g-label 生成可读卡片，不破坏桌面表格语义。
所有结构采用逻辑方向属性并支持 RTL；Forced Colors 提供选择轮廓；打印隐藏数据操作，展开详情和层级行，并移除滚动裁切。

能力清单登记 48 种数据模式、11 个数据族、8 类复用运行时和完整测试矩阵；独立数据示例可直接测试排序、选择、展开、列显隐、搜索、视图切换、移动堆叠表和键盘网格。

选择与批量操作组件

第 9 类能力把“选择对象、表达选择范围、批量执行、保存选择条件”做成完整协议。适用于超级 CMS、权限分配、成员管理、媒体库、关联字段、Dashboard、移动端后台以及 Tauri/Electron 桌面工作台。

32 patterns7 reusable runtimesMulti-selectHierarchyKeyboardRTL / Print

实时选择与批量操作

文档页面

全选

当前视图0 / 3

快速开始公开文档已发布API 参考开发者文档草稿常见问题帮助中心已发布

32 种模式完整矩阵

#	模式 / 根类	用途与契约
01	Selection Control `g-selection-control`	选中数量、总量和范围信息
02	Select All `g-select-all-control`	全选与部分选中 indeterminate
03	Invert `g-invert-selection-control`	反转当前可用项
04	Range `g-range-selection-control`	Shift 区间选择
05	Batch Toolbar `g-batch-toolbar`	安全区感知的粘性批量动作
06	Selection Scope `g-selection-scope`	列表、表格或树的选择边界
07	Transfer `g-transfer`	已选/全部双向移动和搜索
08	Dual List `g-dual-list`	权限、成员、标签双列表
09	Tree Select `g-tree-select`	层级多选与路径显示
10	Cascader `g-cascader`	逐级展开的级联选择
11	Mention Picker `g-mention-picker`	@ 人员、频道或资源
12	User Picker `g-user-picker`	头像、姓名、团队和多选
13	Organization Picker `g-organization-picker`	组织树、部门和岗位
14	Resource Picker `g-resource-picker`	文件、页面、数据源和资产
15	Media Picker `g-media-picker`	缩略图网格与媒体多选
16	Icon Picker `g-icon-picker`	图标搜索、网格和已选状态
17	Color Picker `g-color-picker`	颜色预览、输入和色板
18	Date Range `g-date-range-picker`	预设、双月日历和日期范围
19	Time Range `g-time-range-picker`	时间区间与跨日表达
20	Saved Filters `g-saved-filters`	可复用筛选条件
21	Saved Views `g-saved-views`	筛选、列、排序和密度快照
22	Column Chooser `g-column-chooser`	列显隐并至少保留一列
23	Sort Builder `g-sort-builder`	动态多字段排序规则
24	Group Builder `g-group-builder`	动态多字段分组规则
25	Entity Picker `g-entity-picker`	统一业务实体选择器
26	Tag Picker `g-tag-picker`	标签搜索、创建与多选
27	Relation Picker `g-relation-picker`	记录、页面和父子关系
28	Bulk Confirmation `g-bulk-confirmation`	危险批量操作影响确认
29	Bulk Progress `g-bulk-progress`	逐项进度、失败与后台运行
30	Picker Panel `g-picker-panel`	桌面浮层与移动底部面板
31	Picker Summary `g-picker-summary`	已选值和选择结果摘要
32	Selection Summary `g-selection-summary`	选中数量和快速动作

声明式运行时接口

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>反选</button>
  <input type="checkbox" data-g-select-row value="record-1">
  <div class="g-batch-toolbar" data-g-batch-toolbar hidden>...</div>
</section>

<div class="g-transfer" data-g-transfer>
  <div data-g-transfer-source>...</div>
  <button data-g-transfer-move="selected-to-target">→</button>
  <div data-g-transfer-target>...</div>
</div>

<div class="g-user-picker" data-g-picker data-g-picker-multiple>
  <div data-g-picker-trigger><input data-g-picker-input></div>
  <div class="g-picker-panel" data-g-picker-panel hidden>
    <button data-g-picker-option data-g-value="u1">用户</button>
  </div>
</div>

运行时与环境规则

row-select 支持全选、反选、清除、可见项选择、Shift 区间、数量输出、批量栏显隐及行 aria-selected。
transfer 支持选中/全部双向移动、两侧搜索、数量和 Empty 状态，以及 Ctrl/Command + 左右方向键。
picker 统一单选/多选、Unicode 搜索、Chip 删除、隐藏字段输出、方向键、Home、End、Enter、Space、Escape 和点击外部关闭。
data-g-cascader 维护路径和值；data-g-saved-choice 服务过滤器、视图、图标和色板；data-g-builder-list 支持模板新增、删除和排序/分组规则移动。
g-selection-container 提供 640px 容器折叠；移动端 Picker Panel 自动成为底部面板，Batch Toolbar 避让安全区。
全部模式支持逻辑方向、RTL、Reduced Motion、Forced Colors 和打印；打印时隐藏可变更选择状态的控制，并保留结果摘要。

能力清单登记全部 32 种模式、8 个能力族与测试矩阵；独立选择示例可直接测试全选、反选、范围选择、Transfer、Picker、Cascader、Saved Choice 和动态 Builder。

文件和内容系统

第 10 类能力覆盖文件从进入系统、上传与组织，到预览、编辑、协作、修订和存储的完整生命周期。Web、移动后台、超级 CMS、媒体中心以及 Tauri/Electron 桌面编辑器均可直接复用，不需要 AI 临时组织复杂工作台 CSS。

32 patterns6 reusable runtimesUpload + EditorDesktop + MobileKeyboardRTL / Print

实时上传、编辑与修订

上传队列完成 0 · 活动 0

PDF产品手册.pdf

可编辑内容

修改这段文字可验证字符统计与自动保存状态。

- 仅支持网页

+ 支持网页与桌面

32 种模式完整矩阵

#	模式 / 根类	用途与契约
01	File Drop `g-file-drop`	点击/拖放、文件输入与 Drag 状态
02	File List `g-file-list`	紧凑文件行、元信息与动作
03	Upload Queue `g-upload-queue`	多文件队列、计数、暂停和移除
04	Chunk Upload `g-chunk-upload`	分片状态、断点续传视觉协议
05	Upload Progress `g-upload-progress`	进度值、状态文本和 ARIA
06	Failed Upload `g-failed-upload`	失败原因、重试与移除
07	File Card `g-file-card`	缩略图、名称、属性和快捷动作
08	Folder Tree `g-folder-tree`	目录层级、数量和当前路径
09	File Browser `g-file-browser`	目录、搜索、网格/列表与键盘选择
10	File Preview `g-file-preview`	预览画布、缩放工具和元信息
11	Media Library `g-media-library`	媒体资产工作台与详情栏
12	Media Grid `g-media-grid`	响应式缩略图和选择状态
13	Media Details `g-media-details`	预览、替代文本、版权和尺寸
14	Image Crop `g-image-crop`	裁剪舞台、比例和检查器
15	Image Annotation `g-image-annotation`	热点、标记与审阅备注
16	Document Viewer `g-document-viewer`	纸张、缩略图、翻页和缩放
17	PDF Viewer `g-pdf-viewer`	PDF.js、原生或桌面桥接壳
18	Video Player `g-video-player`	16:9 舞台、进度和播放控制
19	Audio Player `g-audio-player`	封面、波形/时间线与控制
20	Code Editor `g-code-editor`	行号、代码画布与状态栏
21	Rich Text Editor `g-rich-text-editor`	格式工具、可编辑正文与统计
22	Markdown Editor `g-markdown-editor`	源码/预览双栏和移动折叠
23	Block Editor `g-block-editor`	区块手柄、正文和操作
24	Revision Compare `g-revision-compare`	并排/统一差异及增删语义
25	Autosave `g-autosave-indicator`	Dirty、Saving、Saved、Error
26	Content Outline `g-content-outline`	文档标题层级和当前章节
27	Editor Toolbar `g-editor-toolbar`	命令组、Pressed 状态和快捷键
28	Find & Replace `g-find-replace`	查找、替换、结果和导航
29	Comment Thread `g-comment-thread`	头像、正文、时间与协作回复
30	Version History `g-version-history`	版本时间线、当前版本和恢复
31	File Properties `g-file-properties`	类型、所有者、校验值和版权
32	Storage Meter `g-storage-meter`	配额、分类占用和进度

声明式运行时接口

<div class="g-file-drop" data-g-dropzone>...</div>
<section class="g-upload-queue" data-g-upload-manager>...</section>
<section class="g-file-browser" data-g-file-browser data-g-view="grid">...</section>
<article class="g-rich-text-editor" data-g-editor-shell>
  <div data-g-editor-surface contenteditable="true">...</div>
</article>
<div class="g-revision-compare" data-g-revision-compare>...</div>
<span class="g-autosave-indicator" data-g-autosave>...</span>

运行时、可访问性与环境规则

dropzone 处理拖入深度、键盘激活和真实文件事件；upload-manager 维护队列状态、进度、暂停、重试、移除和汇总计数。
file-browser 提供 Unicode 搜索、网格/列表切换、单项选择、方向键、Home、End、Enter 和 Space，并发布选择事件。
editor-shell 统一工具命令、Ctrl/Command 快捷键、字符与词数；富文本、Markdown、代码和区块编辑器共用协议。
revision-compare 切换并排/统一差异；autosave 表达 Dirty、Saving、Saved 和 Error，并支持延迟保存及立即保存。
g-content-container 使用 704px 容器折叠；文件浏览、媒体详情、图片编辑器、文档缩略图、Markdown 双栏和版本对比均有移动布局。
所有模式使用逻辑方向并覆盖 RTL、Reduced Motion、Forced Colors 和打印；打印隐藏上传与编辑动作，展平滚动区并保留正文和修订信息。

能力清单登记全部 32 种模式、8 个能力族与测试矩阵；独立内容系统示例覆盖上传、文件浏览、媒体、图片、文档、音视频、四类编辑器、协作、版本和存储。

登录与账号体系

第 11 类能力覆盖身份从进入系统、验证、恢复、授权，到会话、租户、设备与安全审计的完整生命周期。它不是单张登录卡，而是可直接用于 PC、移动网页、Dashboard、超级 CMS 和 Tauri/Electron 桌面 WebView 的 32 种稳定组合。

实时验证组合

验证手机号

验证码已发送至 +86 138****6608

设置新密码

密码强度未设置

至少 8 位
大写字母
小写字母
数字
符号

!

检测到新设备

Linux · Firefox · 北京

32 种模式完整矩阵

#	模式	根类	用途与关键组成
01	居中认证	`g-auth-centered`	单列入口、移动端、轻量产品；配合 `g-auth-container`、`g-auth-panel`
02	分栏认证	`g-auth-split`	`g-auth-split-aside` 品牌区 + `g-auth-split-main` 表单区
03	登录	`g-sign-in`	邮箱/用户名、密码、保持登录、找回入口与 `g-auth-provider`
04	注册	`g-registration`	个人/企业注册、条款确认、密码强度
05	找回密码	`g-password-recovery`	邮箱、手机与管理员恢复方式
06	重置密码	`g-password-reset`	新密码、确认密码、失效令牌状态
07	邮箱验证	`g-email-verification`	`g-verification-icon`、地址、重新发送计时
08	手机验证	`g-phone-verification`	国家码、脱敏号码与 OTP
09	MFA 挑战	`g-mfa-challenge`	验证器、短信、安全密钥、恢复码和受信任设备
10	OTP 输入	`g-otp-input`	`g-otp-cell`；逐位输入、粘贴、退格与方向键
11	Passkey	`g-passkey`	`g-passkey-graphic`、平台验证器与跨设备入口
12	SSO	`g-sso`	SAML/OIDC、企业域名发现与 Provider 列表
13	二维码登录	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`、刷新与过期状态
14	Magic Link	`g-magic-link`	无密码邮件登录、有效期与单次使用提示
15	邀请加入	`g-invitation`	`g-invitation-details`、组织、角色、邀请人和有效期
16	首次设置	`g-first-time-setup`	首次密码、资料、组织与安全偏好
17	锁屏	`g-lock-screen`	`g-lock-screen-panel`、时间、当前用户与快速解锁
18	会话过期	`g-session-expired`	`g-session-expired-panel`、本地更改说明与重新认证
19	账号选择	`g-account-chooser`	`g-auth-choice`、头像、邮箱与新增账号
20	租户选择	`g-tenant-chooser`	工作区、组织角色、成员量和当前租户
21	身份切换	`g-identity-switcher`	`g-identity-switcher-menu`、角色身份与访客预览
22	资料完善	`g-profile-setup`	`g-auth-avatar`、姓名、职位、时区与语言
23	账号安全中心	`g-account-security`	`g-security-section` 聚合密码、MFA、设备和连接
24	设备管理	`g-device-management`	`g-device-item`、当前设备、位置、时间与撤销
25	登录活动	`g-login-activity`	`g-login-event`、方法、IP、位置、成功与风险
26	安全事件	`g-security-alert`	`g-security-alert-actions` 确认本人或保护账号
27	恢复码	`g-recovery-codes`	`g-recovery-code` 网格、复制、下载与重新生成
28	受信任设备	`g-trusted-device`	MFA 跳过期限与公共设备风险说明
29	已连接账号	`g-connected-accounts`	`g-connected-account`、连接状态与断开操作
30	密码强度	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` 与实时评分
31	授权同意	`g-auth-consent`	`g-auth-consent-scope` 权限范围、允许与拒绝
32	认证结果	`g-auth-result`	`g-auth-result-icon`；成功、失败与处理中状态

声明式运行时接口

行为	属性	能力
Password Toggle	`data-g-password-toggle`	显示/隐藏并保持光标
OTP Input	`data-g-otp-input`	自动推进、退格、方向键、整串粘贴、完成事件
Password Strength	`data-g-password-strength`	五项规则、0–4 评分、ARIA Progress
Auth Timer	`data-g-auth-timer`	重发、二维码与会话倒计时/过期
Saved Choice	`data-g-saved-choice`	账号与租户选择
Dropdown	`data-g-dropdown`	身份切换菜单
Copy	`data-g-copy`	恢复码复制
Dialog	`data-g-dialog`	撤销设备、敏感操作确认

<div class="g-otp-input" data-g-otp-input>
  <input class="g-otp-cell" data-g-otp-cell inputmode="numeric" maxlength="1">
  ...
  <input type="hidden" data-g-otp-output>
</div>

<div class="g-password-strength" data-g-password-strength
     data-g-password-target="new-password">...</div>

状态、端点与安全规则

密码字段使用正确的 autocomplete；验证码逐位输入仍需要可访问名称，并保留隐藏的完整值用于提交。
OTP 支持数字过滤、自动推进、Backspace、左右方向键、Home、End 和 Paste；完整后发布 gardener:otpcomplete。
认证结果必须明确 Success、Error、Pending；会话过期要说明未提交数据是否保留，安全事件不能只靠颜色表达。
账号、租户与身份是不同概念，分别使用 Chooser/Switcher，避免在多组织 CMS 中误操作。
分栏认证在 704px 以下收敛为单列；卡片在 384px 以下重排 QR、规则与恢复码；底部操作尊重 Safe Area。
所有样式覆盖 RTL、Reduced Motion、Forced Colors 与打印。打印隐藏密码、Provider、倒计时和敏感操作，只保留必要的安全审计信息。

能力清单登记全部 32 种模式、8 个能力族、8 类复用运行时和完整测试矩阵；独立账号体系示例覆盖全部模式并可直接测试 OTP、密码强度、倒计时、账号/租户选择和身份菜单。

商业与支付

第 12 类能力覆盖商品发现、规格与价格、购物车、结算、履约、支付、订单以及订阅计费的完整交易链。32 种组合可以直接用于 PC 商城、移动网页、Dashboard、超级 CMS、数字商品、SaaS 和 Tauri/Electron 桌面 WebView。

实时交易组合

G

Gardener Studio企业授权 · Windows

¥699.00

小计

优惠

配送

应付

选择平台

32 种模式完整矩阵

#	模式	根类	用途与关键组成
01	商品卡	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`、标题、价格与动作
02	商品列表	`g-commerce-product-list`	`g-product-list-item`、媒体、摘要、价格和行操作
03	商品详情	`g-commerce-product-detail`	`g-product-detail-summary`、标题、Vendor、SKU、库存与购买动作
04	商品图库	`g-commerce-product-gallery`	`g-product-gallery-thumb` 与舞台；可复用 Carousel 行为
05	SKU 选择	`g-sku-selector`	`g-sku-group`、`g-sku-option`、禁用组合和完整选择输出
06	数量步进	`g-quantity-stepper`	`g-quantity-button`、输入、min/max/step 与变化事件
07	价格展示	`g-price-display`	`g-price-current`、原价、折扣、周期、含税说明与库存 `g-stock-status`
08	购物车条目	`g-commerce-cart-item`	`g-cart-item-media`、规格、数量、行合计与操作
09	购物车	`g-cart`	数量联动、`g-cart-empty`、小计、优惠、运费、税和总额
10	迷你购物车	`g-mini-cart`	Dropdown 容器、列表与 `g-mini-cart-footer`
11	购物车汇总	`g-cart-summary`	费用行和 `g-cart-summary-total`
12	结算	`g-commerce-checkout`	`g-checkout-section` 主区 + Sticky `g-checkout-sidebar` + Safe Area `g-checkout-mobile-actions`
13	结算步骤	`g-checkout-steps`	`g-checkout-step-marker`、完成/当前/待处理状态
14	地址选择	`g-address-selector`	Saved Choice、默认地址和新增入口
15	地址卡	`g-address-card`	`g-address-main`、联系人、电话、详细地址、标签与编辑
16	配送方式	`g-shipping-method`	`g-shipping-option`、时效、承运商、价格和不可达状态
17	自提选择	`g-pickup-selector`	`g-pickup-option`、门店、距离、营业时间和库存
18	优惠码	`g-coupon`	`g-coupon-status`；Idle、Applied、Invalid 与清除
19	促销列表	`g-promotion-list`	`g-promotion-item`、Code、门槛、互斥与有效期
20	发票信息	`g-invoice-information`	`g-invoice-fields`、发票类型、抬头、税号和接收方式
21	支付方式	`g-payment-method`	`g-payment-option`、银行卡、钱包、余额、线下与禁用状态
22	支付面板	`g-payment-sheet`	`g-payment-sheet-total`、金额、确认、风控提示与返回
23	支付结果	`g-payment-result`	`g-payment-result-icon`；成功、失败、处理中与后续动作
24	订单摘要	`g-commerce-order-summary`	商品、折扣、配送、税、支付与 `g-order-summary-total`
25	订单时间线	`g-commerce-order-timeline`	`g-order-timeline-item`、节点、时间、物流与当前步骤
26	订单详情	`g-order-detail`	Header、状态、商品、地址、支付、发票和 `g-order-detail-section`
27	订阅套餐	`g-subscription-plan`	`g-plan-price-value`、周期、功能、Featured 与行动
28	定价对比	`g-pricing-comparison`	Sticky 能力列、套餐差异、布尔/额度/价格单元格
29	用量计	`g-commerce-usage-meter`	`g-usage-meter-track`、当前/限额、重置期、Warning/Danger
30	账单历史	`g-billing-history`	`g-billing-history-item`、周期、金额、状态、PDF 与筛选
31	退款状态	`g-refund-status`	`g-refund-status-progress`、金额、原路退回、预计到账与失败
32	税费摘要	`g-tax-summary`	`g-tax-summary-row`、未税金额、税种、税率、地区与含税总额

声明式运行时接口

行为	属性	能力
Quantity Stepper	`data-g-quantity-stepper`	min/max/step、按钮状态、输入归一化、`gardener:quantitychange`
SKU Selector	`data-g-sku-selector`	分组单选、禁用规格、键盘漫游、JSON 输出、`gardener:skuchange`
Cart	`data-g-cart`	分币整数计算、数量/移除联动、小计/折扣/运费/税/总额
Coupon	`data-g-coupon`	声明式有效码、应用/无效/清除状态和事件
Saved Choice	`data-g-saved-choice`	地址、配送、自提和支付选择
Carousel	`data-g-carousel`	商品图库
Dropdown	`data-g-dropdown`	迷你购物车

<div class="g-cart" data-g-cart data-g-currency="CNY">
  <article class="g-commerce-cart-item" data-g-cart-item data-g-unit-price="69900">
    <div class="g-quantity-stepper" data-g-quantity-stepper>...</div>
    <strong data-g-line-total></strong>
  </article>
  <strong data-g-cart-total></strong>
</div>

金额、状态与环境规则

Cart 使用最小货币单位整数计算，显示层才交给 Intl.NumberFormat，避免浮点金额误差；税务、优惠叠加、库存与支付验证仍由业务后端裁决。
SKU 的 Disabled、库存的 Low/Out、优惠码的 Invalid、支付的 Success/Error/Pending、退款的 Processing/Complete/Failed 都有独立状态，不能只依赖颜色。
地址、配送、自提、发票、支付是不同业务对象；结算外壳负责组织它们，不把后端业务规则硬编码进 CSS。
g-commerce-container 在 704px 折叠详情/结算双栏，在 480px 重排行项目与选择卡；视口查询作为没有容器上下文时的兜底。
所有模式覆盖键盘、RTL、Reduced Motion、Forced Colors 与打印；移动结算尊重 Safe Area，打印隐藏购买动作并保留订单、发票和税费信息。
默认白色 Surface 与 4px 小圆角；组件只使用主题 Token，可在 42 套主色和所有正交主题轴中复用。

能力清单登记全部 32 种模式、8 个能力族、7 类复用运行时及完整测试矩阵；独立商业与支付示例覆盖目录、SKU、购物车、结算、履约、支付、订单、订阅、账单、退款和税费。

移动端特有组件

第 13 类能力不是把桌面组件简单缩窄，而是补齐移动网页、PWA、混合应用与桌面 WebView 的特有结构。32 种模式覆盖安全区与动态视口、移动导航、底部弹层、手势和滚动、发现与筛选、输入与键盘、移动认证/结算/媒体，以及离线、权限、空错状态。

32 patterns8 families14 reusable runtimesSafe AreaTouchRTLPrint

选择顺序：先选择 g-mobile-safe-shell 或现有页面外壳，再按“导航 → 内容 → 临时层 → 粘性动作 → 系统反馈”组合。Bottom Navigation 用于 3–5 个一级目的地；Swipe Tabs 用于同一上下文切换；Bottom Sheet 承载短任务；Fullscreen Dialog 承载长任务，不能互相混用。

实时移动组合

移动工作台

G

滑动操作条目

手势、按钮与 Escape 均可操作。

继续加载

移动端契约

100svh 提供稳定初始高度，100dvh 跟随浏览器栏变化。
四边使用 env(safe-area-inset-*)；底部栏、购买栏、Snackbar 和手势提示不会覆盖 Home Indicator。
触控目标在 Coarse Pointer 环境至少 44px；所有手势组件保留按钮或键盘路径。
逻辑方向属性支持 RTL；Reduced Motion 关闭位移过渡；Forced Colors 强化选中轮廓；打印自动展平外壳。

32 种模式完整矩阵

#	模式	根类	用途与关键组成
01	安全区外壳	`g-mobile-safe-shell`	`g-mobile-safe-content`、svh/dvh、四边 Safe Area、Contained 预览
02	顶部应用栏	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`、Sticky、Large Title
03	底部导航	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`、3–5 个一级目的地与当前状态
04	底部弹层	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`、焦点约束、Escape、滚动锁
05	动作菜单	`g-mobile-action-sheet`	`g-mobile-action-list/item`、分享、删除和上下文动作
06	下拉刷新	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`、阈值、Refresh/Complete API
07	无限加载	`g-mobile-infinite-load`	IntersectionObserver、加载按钮后备、Loading/Done
08	滑动操作	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`、LTR/RTL、按钮和 Escape 后备
09	滑动标签	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`、横向滚动吸附与 Tabs 语义
10	移动分类	`g-mobile-category-view`	`g-mobile-category-rail`、`g-mobile-category-link`、`g-mobile-category-content`、`g-mobile-category-grid`、`g-mobile-category-item`
11	移动筛选	`g-mobile-filter-sheet`	筛选内容、Sticky Footer、重置与结果动作
12	粘性购买栏	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`、价格、数量与安全区
13	移动搜索	`g-mobile-search`	`g-mobile-search-field/icon`、取消与清空
14	移动选择器	`g-mobile-picker`	`g-mobile-picker-grid/option`、单选/多选与 Saved Choice
15	滚轮选择器	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`、Scroll Snap、方向键、JSON 输出
16	浮动动作按钮	`g-mobile-fab`	主要创建动作、Safe Area 和底栏偏移
17	全屏对话框	`g-mobile-fullscreen-dialog`	长表单、编辑任务、焦点管理与动态视口
18	键盘避让	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`、Scroll Padding 与表单可见区
19	手势提示	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`、首次使用和系统手势区
20	离线横幅	`g-mobile-offline-banner`	缓存内容提示、重试与联网恢复
21	分段控制	`g-mobile-segmented-control`	`g-mobile-segmented-item`、2–5 个互斥视图
22	移动内容流	`g-mobile-feed`	`g-mobile-feed-item/main`、媒体、正文和尾部动作
23	卡片轮播	`g-mobile-card-carousel`	横向 Scroll Snap、Peek、可选 Carousel 运行时
24	移动表单	`g-mobile-form`	`g-mobile-form-actions`、全宽提交与触控字段
25	移动认证	`g-mobile-auth`	`g-mobile-auth-actions`、登录/注册/验证码与键盘环境
26	移动结算	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`、订单确认与安全区
27	移动媒体查看	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`、平移、缩放和全屏工具栏
28	键盘工具栏	`g-mobile-keyboard-toolbar`	上一项、下一项、完成、格式与输入法上沿
29	选择模式	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`、计数与批量动作
30	Snackbar	`g-mobile-snackbar`	`g-mobile-snackbar-main`、短反馈、撤销和底栏偏移
31	权限提示	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`、位置、通知、相机和媒体
32	空/错/离线状态	`g-mobile-state`	`g-mobile-state-icon/actions`、Empty/Error/Offline/Success

声明式运行时接口

行为	属性	关键接口
Mobile Sheet	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	Open/Close/Toggle、焦点陷阱、滚动锁、Backdrop、Escape
Pull Refresh	`data-g-pull-refresh`	`gardener:refresh`、`complete()`、按钮后备
Infinite Load	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`、IntersectionObserver
Swipe Actions	`data-g-swipe-actions`	Reveal/Close/Toggle、LTR/RTL 手势、按钮、Escape
Wheel Picker	`data-g-wheel-picker`	Scroll Snap、Click/Arrow/Home/End、`gardener:wheelchange`
复用运行时	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	标签、分段/选择、全屏对话框、Snackbar

<button data-g-mobile-sheet-open="filters">筛选</button>
<aside id="filters" class="g-mobile-filter-sheet"
       data-g-mobile-sheet hidden>
  <div class="g-mobile-sheet-panel">
    <div class="g-mobile-sheet-handle"></div>
    ...
    <footer class="g-mobile-sheet-footer">...</footer>
  </div>
</aside>

端点、手势与业务边界

Safe Area Shell 使用 100svh 加 100dvh；业务若要跟随软键盘，可通过 Visual Viewport/宿主桥接更新 --g-keyboard-offset。
手势只增强效率：Pull Refresh 有刷新按钮路径，Infinite Load 有“加载更多”，Swipe Actions 有 Toggle，Wheel Picker 支持键盘。
原生权限请求、网络状态、数据加载、支付、认证和媒体缩放由业务或宿主实现；Gardener 提供稳定视觉、状态、事件与无障碍接口，不伪造结果。
Bottom Sheet 适合短任务，Action Sheet 适合动作列表，Filter Sheet 适合筛选；复杂编辑使用 Fullscreen Dialog，破坏性确认仍使用专用 Dialog。
默认白色 Surface、1px 边框与 4px 小圆角；大圆角和强阴影不是移动端默认。
所有 32 模式均进入组件 Manifest 和动态组件目录；CSS 源码完整 API 也会列出模块、选择器、变量和状态。

能力清单登记全部 32 种模式、8 个能力族和完整测试矩阵；独立移动端示例可直接测试 App Bar、Bottom Navigation、Swipe Tabs、Swipe Actions、Infinite Load、Action/Filter Sheet 与移动选择器。

桌面端特有组件

第 14 类能力覆盖 Tauri、Electron、桌面 WebView 与浏览器中模拟桌面工作台的 32 种高复用模式。它把窗口 Chrome、全局导航、Dock/工作区、命令与输入、文档与文件、系统集成、生命周期更新、恢复与状态拆成稳定接口；AI 不需要临时发明标题栏、IDE 布局或系统提示。

与通用桌面布局的关系：g-desktop-shell、g-titlebar、g-workbench 继续作为兼容基础；本节的 g-desktop-workspace 和 31 个配套模式是更完整、更精确的桌面应用组合层。

实时桌面工作区

Gardener Studio — 文档空间

桌面 CMS 编辑区

标签、分栏、Dock、检查器和状态栏都保持高密度、小圆角和完整键盘路径。

↑

新版本可用

已下载，等待重启。

32 种模式完整矩阵

#	模式与根类	稳定部件 / 状态 / 用途
1	Native Titlebar `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	Window Controls `g-desktop-window-controls`	`g-desktop-window-button`；Minimize、Maximize/Restore、Close
3	Menu Bar `g-desktop-menubar`	`g-desktop-menubar-item`；菜单入口与平台顺序
4	Activity Bar `g-desktop-activity-bar`	`g-desktop-activity-item`；当前模块、全局工具
5	Dock Panel `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`、Collapsed
6	Resizable Split Pane `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`；横向/纵向
7	Inspector `g-desktop-inspector-panel`	属性、样式、审计、上下文信息
8	Status Bar `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	Command Palette `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	Shortcut Recorder `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	Context Menu `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	Unsaved Tabs `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`；Active、Dirty、Pinned
13	Drag Region `g-desktop-drag-region`	`g-desktop-no-drag` 保护按钮、链接与输入
14	Window Loading `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	Update Available `g-update-available`	版本、发行说明、延后/重启更新
16	Permission Request `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	Native File Picker `g-native-file-picker`	`g-native-file-picker-value`；单选、多选、文件夹由 input/宿主决定
18	Tray Menu Shell `g-tray-menu`	复用桌面菜单项；在线状态、窗口入口与退出
19	Multi-window Placeholder `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	Desktop Workspace `g-desktop-workspace`	`g-desktop-workspace-main`；Title/Activity/Main/Inspector/Status 网格
21	Window Switcher `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	Recent Documents `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	Desktop Toolbar `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	Bottom Panel `g-desktop-bottom-panel`	终端、日志、问题、输出与后台任务
25	Background Task Center `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	Notification Center `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`；Unread
27	Sync Status `g-sync-status`	`g-sync-status-dot`；Syncing、Synced、Offline、Error
28	Update Progress `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	Crash Recovery `g-crash-recovery`	恢复文档、恢复会话、安全启动、放弃恢复
30	Single-instance Notice `g-single-instance-notice`	切换到现有窗口、继续新窗口、取消
31	Deep-link Handler `g-deep-link-handler`	显示来源、目标、允许/拒绝与“不再询问”
32	About Dialog `g-about-dialog`	`g-about-dialog-icon`；版本、许可、更新与诊断入口

声明式运行时

行为	属性 / 触发	键盘与事件
Shortcut Recorder	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc 取消，Delete 清空，发出 `gardener:shortcutchange`
Desktop Tabs	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	箭头/Home/End、Ctrl/⌘+Tab、Ctrl/⌘+W、中键关闭
Native File Picker	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	原生 input 后备；发出 `gardener:nativefiles`
Window Switcher	`data-g-window-switcher`、`data-g-window-item`	Ctrl/⌘+`、方向键、Enter、Escape
复用运行时	`data-g-split-pane`、`data-g-command-palette`、`data-g-context-menu`、`data-g-roving-nav`、`data-g-nav-toggle`、`data-g-dropdown`、`data-g-dialog`	分栏、命令、菜单、导航、Dock、托盘和 About Dialog

Tauri / Electron 宿主契约

<!-- 只在宿主已提供白名单桥接时加载一个适配器 -->
<script type="module" src="gardener.runtime.js"></script>
<script type="module" src="gardener.electron.js"></script>

<button class="g-desktop-window-button"
        data-g-window-action="minimize">—</button>

Electron 使用 contextIsolation 与安全 preload，只暴露 Minimize、Maximize/Restore、Close 等白名单方法；不要开启 Node Integration，也不要把任意 IPC 通道暴露给页面。
Tauri v2 由应用注入 Window API；权限能力、文件系统、Updater、Deep Link、Tray 与多窗口按应用 Capability 配置，不由 CSS 自动申请。
app-region: drag 和 -webkit-app-region: drag 只负责可拖动区域；按钮、链接、输入与菜单必须放进 g-desktop-no-drag 或受内置选择器保护。
平台可用 data-g-os="macos" 或 data-g-platform="macos" 切换交通灯窗口控制；Windows/Linux 保持右侧矩形控制。
更新、权限、文件选择、托盘、多窗口、深链、单实例和崩溃恢复都要求业务或宿主返回真实结果；组件只提供可预测的展示、事件、焦点和状态结构。

响应、无障碍与打印

g-desktop-workspace 建立容器查询：小于 56rem 隐藏检查器，小于 40rem 隐藏 Dock 并简化标题栏；独立面板仍可由业务通过 Toggle 显示。
文档标签、命令面板、菜单、分栏、快捷键录制与窗口切换器均有键盘路径；Dirty 标签关闭前发出可取消的 beforetabclose。
逻辑方向属性覆盖 RTL；Reduced Motion 停止同步脉冲；Forced Colors 为当前 Activity/Tab/Command 提供明确轮廓。
打印时隐藏窗口 Chrome、活动栏、状态栏、工具栏、Bottom Panel 和所有浮层，展开主内容、Dock 与 Inspector，避免裁切。
默认白色 Surface、1px 边框和 4px 小圆角；阴影仅用于命令面板、窗口切换器和菜单等真实浮层。

能力清单登记全部 32 种模式、8 个能力族与测试矩阵；独立桌面端示例覆盖窗口、工作区、标签、命令、快捷键、文件、托盘、更新、通知和恢复状态。

AI 产品与智能交互组件

第 15 类能力覆盖 AI 助手、Copilot、Agent 工作台、生成工具、知识库问答、多模态产品与 AI 桌面客户端的完整任务链。32 种模式从会话入口延伸到 Prompt、推理、流式输出、工具批准、多 Agent、来源与 Artifact、上下文和费用、语音、权限、隐私、安全与反馈评估，不把 AI 产品错误简化为“聊天气泡 + 输入框”。

与 AI 页面生成协议的区别：本节是给最终用户使用的 AI 产品 UI；后文 AI 页面生成协议是给生成器使用 Gardener 的约束。前者提供界面组件，后者规定选能力、配方、组件和工具类的顺序。

实时 AI 工作区

上下文 38%

请生成一个多租户企业门户。

G

Gardener Agent正在工作

已匹配企业门户配方，正在检查权限、CMS 与 Dashboard 组件。

匹配 tenant、workflow、dashboard、media-library。

需要批准写入页面模板

只修改当前项目的 generated 目录。

scope: generated/** · operation: create/update

32 种模式完整矩阵

#	模式与根类	稳定部件 / 状态 / 用途
1	AI Workspace `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	Conversation List `g-conversation-list`	`g-conversation-item`、`g-conversation-title`；历史、置顶、分组和当前会话
3	Chat Thread `g-chat`	`g-chat-list`、`g-ai-empty-chat`；Empty、Loading、Streaming、Error
4	AI Message `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`；User/Assistant/System
5	Prompt Composer `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`；Enter 发送、Shift+Enter 换行、停止
6	Attachment `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	Prompt Starter `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	Prompt Library `g-prompt-library`	`g-prompt-card`；搜索、类别、收藏、参数化模板
9	Mention / Slash Menu `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	Model Selector `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	Thinking `g-thinking`	`g-thinking-trigger`、`g-thinking-content`；Collapsed、Expanded、Streaming
12	Streaming Response `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	Tool Call `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	Tool Approval `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`；Approved/Rejected/Cancelled/Expired
15	Agent Status `g-agent-status`	Idle、Working、Waiting、Blocked、Complete、Failed
16	Agent Plan `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	Multi-agent Board `g-agent-board`	`g-agent-card`、`g-agent-card-header`、`g-agent-card-task`
18	Agent Handoff `g-agent-handoff`	`g-agent-handoff-main`、`g-agent-handoff-actions`；上下文交接与人工接管
19	Sources / Citations `g-sources`	`g-source-list`、`g-source`、`g-citation`；引用定位和可信度
20	Artifact Workspace `g-artifact-layout`	对话与预览/代码/文档双区布局
21	Artifact Panel `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	AI File Tree `g-file-tree`	`g-file-tree-item`；层级、展开、选择和键盘导航
23	Version History `g-version-list`	`g-version`；生成者、时间、当前版本、比较和恢复
24	Generation Gallery `g-generation-grid`	`g-generation-card`；多结果、变体、选择与继续编辑
25	Generation Placeholder `g-generation-placeholder`	Queued、Generating、Partial、Complete、Failed
26	Context / Memory `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	Cost / Rate Limit `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	Voice Session `g-voice-state`	`g-voice-bar`、`g-voice-state-label`；Listening、Processing、Speaking、Error
29	Permission Scope `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`；资源、操作、期限、来源
30	Privacy Notice `g-privacy-notice`	训练、保留、跨境、企业策略与敏感信息说明
31	Safety / Policy Notice `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	Feedback / Evaluation `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

专用与复用运行时

行为	属性	关键接口
AI Composer	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	自动高度、Enter/Shift+Enter、`promptsubmit`、`promptstop`、Streaming 状态
Prompt Fill	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	将 Starter/Library 模板填入指定 Composer 并发出 Input
AI Approval	`data-g-ai-approval`、`data-g-approval-choice`	可取消 Before 事件、Approved/Rejected/Cancelled、Reset API
AI Feedback	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	评价原因、补充说明、`feedbackchange`、`feedbacksubmit`
复用运行时	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	模型选择、Thinking/Tool、命令菜单、Artifact 标签、文件树

<form class="g-composer" data-g-ai-composer>
  <textarea class="g-composer-input"
            data-g-composer-input></textarea>
  <button data-g-composer-stop hidden>停止</button>
  <button data-g-composer-send>发送</button>
  <span data-g-composer-status></span>
</form>

状态、信任与业务边界

Streaming 必须提供 Stop、Paused/Stopped/Complete/Error 状态；光标动画只是增强，Reduced Motion 会关闭动画。
Thinking 默认展示可读的推理摘要或进度，不要求泄露模型私有推理链；产品需明确区分“摘要”“工具日志”和“最终答案”。
Tool Call 与 Tool Approval 分离：调用状态不能代替权限确认；破坏性、外部通信、付费、敏感数据和持久权限必须由业务执行真实审批。
Sources/Citations 表示引用关系，不自动证明真实性；业务需要保留来源 URL、片段、时间和可访问性，生成内容仍需事实核验。
Context/Memory 必须允许查看来源、删除或禁用；Cost/Rate Limit 应使用后端真实计量，不能由前端估算冒充账单。
Safety Notice 不替代服务端策略；Privacy Notice 不替代合法同意。UI 应显示为什么被阻止、能否申诉、数据如何保留和使用。
所有模式使用白色 Surface、1px 边框和4px小圆角；在 960/704/512px 容器宽度下折叠 Artifact、Sidebar 与双列模式，并覆盖 RTL、Forced Colors 和打印。

能力清单登记全部32种模式、8个能力族与完整测试矩阵；独立 AI 示例覆盖对话、Composer、Prompt、Thinking、工具批准、Agent、Artifact、生成、上下文、费用、权限、安全、语音和反馈。

完整页面与行业解决方案

第 16 类是 Gardener 的最高组合层：前 15 类提供布局、部件、业务链和端特有交互，本类把它们固化为 32 种可直接选择的整页契约。它覆盖个人与企业、公共网站与后台、通用业务与垂直行业，也适用于浏览器、移动网页、PWA、Tauri 和 Electron WebView。AI 应先选择这里的页面根类和对应 Recipe，再填充组件，而不是从零组织整页 CSS。

32 complete pages52 total recipes8 familiesContainer QueryRTLPrint

实时 Dashboard 整页骨架

Enterprise overview

多租户内容平台

页面级 Header、指标、主内容、辅助区和移动折叠已有稳定契约。

站点28,640↑ 12.4%

页面486k跨 42 个主题

审核138需要处理

32 种完整页面矩阵

#	页面根类	主要部件与用途
1	Product Landing `g-product-landing`	`g-landing-hero`、copy、visual、proof、section；SaaS、App、AI 产品和新品发布
2	Corporate Home `g-corporate-home`	`g-corporate-hero`、trust、solution grid；集团、品牌、机构与企业门户
3	Personal Home `g-personal-home`	`g-personal-intro`、links、timeline；个人品牌、简历和专家主页
4	Portfolio `g-portfolio-page`	`g-portfolio-hero`、featured、project grid；设计、摄影、开发与案例库
5	Blog Index `g-blog-index`	`g-blog-index-header`、categories、entry grid；博客、新闻和企业资讯
6	Article `g-article-page`	`g-article-page-layout`、body、toc、meta；长文、新闻、教程和打印
7	Docs Portal `g-docs-portal`	`g-docs-layout`、sidebar、main、toc；产品、API 与内部文档
8	Help Center `g-help-center-page`	`g-help-center-hero`、search、layout、aside；FAQ 与客户自助
9	Search Results `g-search-results-page`	`g-search-results-layout`、filters、list、result；站内、文档、商品与资源搜索
10	Contact `g-contact-page`	`g-contact-layout`、details、form；联系、销售咨询和线索收集
11	Pricing `g-pricing-page`	`g-pricing-page-header`、grid、card；SaaS、会员和服务套餐
12	Dashboard `g-dashboard-overview`	`g-dashboard-metrics`、layout、panel；运营总览、驾驶舱和监控
13	Admin List `g-admin-list-page`	`g-admin-list-header`、filters、content、toolbar；后台资源管理
14	Record Detail `g-record-detail-page`	`g-record-detail-layout`、main、aside、section；客户、订单、内容和资产详情
15	Settings `g-settings-center`	`g-settings-center-layout`、nav、content、section；产品、组织与桌面首选项
16	User Center `g-user-center`	`g-user-center-layout`、nav、content；资料、安全、订单和会员权益
17	Notifications `g-notification-center-page`	`g-notification-groups`、group、row；通知、提醒与更新动态
18	Onboarding `g-onboarding-flow`	`g-onboarding-aside`、main、step、progress；初始化、入驻和导入
19	CRM `g-crm-workspace`	`g-crm-layout`、nav、main、inspector、pipeline；客户、商机与销售跟进
20	Project Workspace `g-project-workspace`	`g-project-layout`、board、column、inspector；项目、任务和研发协作
21	Support Center `g-support-center`	`g-support-layout`、thread、messages、reply；客服、工单和售后
22	Approval Center `g-approval-center`	`g-approval-layout`、queue、column、inspector；流程、费用、内容与权限审批
23	Knowledge Base `g-knowledge-base`	`g-knowledge-hero`、search、layout；企业 Wiki、制度库和内部帮助
24	Learning Portal `g-learning-portal`	`g-learning-layout`、course grid、card；课程、培训和学校门户
25	Event Portal `g-event-portal`	`g-event-hero`、grid、card；会议、展览、社区与直播活动
26	Booking Portal `g-booking-portal`	`g-booking-layout`、results、summary；医疗、场地、酒店与服务预约
27	Healthcare `g-healthcare-portal`	`g-healthcare-layout`、summary、record、industry alert；患者与健康服务
28	Finance `g-finance-portal`	`g-finance-layout`、summary、account、industry alert；银行、财富与企业财务
29	Public Service `g-public-service-portal`	`g-public-service-layout`、summary、item；政务办事、申请进度和便民服务
30	Marketplace `g-marketplace-page`	`g-marketplace-hero`、filters、grid、card；应用、服务、人才和插件市场
31	Community `g-community-page`	`g-community-hero`、feed、sidebar、post；社区、论坛与用户内容
32	Status Center `g-status-center-page`	`g-status-overall`、services、history、incident；状态、故障、维护与 SLA

公共整页部件

g-solution-container、g-solution-header、g-solution-actions、g-solution-section、g-solution-grid、g-solution-card、g-solution-shell、g-solution-rail、g-solution-main、g-solution-aside、g-solution-list、g-solution-item、g-solution-meta、g-solution-stat、g-solution-toolbar 与 g-solution-empty 可以跨 32 种页面复用，保证 AI 在换行业时不改变基础语法。

选择、组合与业务边界

先从 solution.* Recipe 确定整页类型，再选择平台、主题轴和密度。
根类负责页面级响应与区域关系；表单、数据、认证、商业、移动、桌面和 AI 组件仍从前 15 类填入。
营销、个人和内容页使用自然文档滚动；Dashboard 与工作台允许高密度多栏；医疗、金融和政务只是 UI 契约，不替代法规、身份验证、隐私、审计和后端业务规则。
全部模式使用逻辑方向、小圆角、白色 Surface；在 960px 与 704px 容器宽度折叠，支持 RTL、Reduced Motion、Forced Colors 和打印。
Tauri/Electron 中可把 CRM、Project、Dashboard、Settings 和 Notification 根页放入 g-desktop-workspace；真实窗口、文件、更新和权限仍由桌面适配器负责。

<main class="g-admin-list-page">
  <header class="g-admin-list-header">...</header>
  <section class="g-admin-list-content">
    <div class="g-admin-list-filters">...</div>
    <div class="g-responsive-table">...</div>
  </section>
</main>

能力清单登记全部 32 种根模式和 8 个能力族；配方清单提供每个页面的端、部件、运行时和用途；独立示例可切换公共网站、Dashboard、CRM、行业门户与状态中心预览。

公共 API 与 Schema

从 0.3.0 开始，gardener.public-api.json 是公共命名与程序接口的规范清单，完整登记 CSS 层、包入口、主题属性、JavaScript 导出、行为、事件、桌面适配器和兼容字段。

正在读取公共 API 清单…

统一命名

范围	规范	示例
CSS 类	`g-` + kebab-case	`g-command-palette`
CSS 变量	`--g-` + kebab-case	`--g-color-primary`
行为属性	`data-g-{behavior}`	`data-g-dialog`
事件	`gardener:{event}`	`gardener:beforeopen`
元数据交互	`behaviors: string[]`	`["dialog"]`
桌面桥接	`adapters: string[]`	`["tauri","electron"]`
平台	`platforms: string[]`	`["web","mobile"]`
配方 ID	dot-separated kebab-case	`solution.admin-list`

完整 Schema

十一套 Schema 全部采用 JSON Schema 2020-12，并拒绝未知字段：Components、Recipes、Capabilities、Utilities、Manifest、Public API、Builds、Custom Build、Performance Budgets、Performance Report、Compatibility。所有对象 Schema 都关闭未知字段或显式声明动态值类型。npm run test:schema 使用 Ajv 2020-12 执行 48 个标准验证用例，覆盖十份发布/配置文档、未知根字段、十类未知嵌套字段、十类缺失嵌套必填字段、跨 Schema 引用、JavaScript 标识符、SHA-256 格式、基线回归状态和旧组件 Schema 兼容别名；npm run contracts 继续执行十五组负向契约测试，并核对跨清单引用、源码与构建产物一致性、选择器、真实组件归属、SHA-256/SRI 完整性、可复现构建命令、模块种类/参数/签名、实例成员、数据属性、事件载荷、适配器、类型与发布脚本、兼容基线、构建档案、42 个绝对与相对预算产物、预算结果、版本与全部包导出。

全部 9 个模块导出

正在读取模块接口…

全部 66 种行为与实例成员

每项列出声明式初始化属性，以及 getInstance() 返回对象允许调用的全部成员。

正在读取行为契约…

全部 75 种事件及载荷

每项完整列出 CustomEvent.detail 的字段；事件均会冒泡且可取消，以 before 开头的七种事件是可通过 preventDefault() 阻止后续操作的流程守卫。

正在读取事件契约…

全部运行时数据属性

作者可使用的 309 个属性被划分为上方行为契约中的 66 个行为入口、166 个结构/动作选择器和 77 个附加配置属性；另有 27 个由运行时维护的状态属性。状态属性可能同时作为初始配置读取，但作者可用的前三组彼此互斥，不会重复计数。

结构与动作选择器

正在读取选择器属性…

附加配置属性

正在读取配置属性…

运行时维护状态

正在读取状态属性…

Tauri / Electron 适配器契约

正在读取适配器契约…

兼容规则

Manifest 的规范字段是 behaviors。旧字段 runtimeBehaviors 在整个 0.x 版本线作为只读兼容别名保留；旧 metadata/schema.json 继续指向新的 Components Schema。1.0.0 将公共契约提升为 Stable，并用机器可读 Compatibility 基线保存 0.9.0 的全部公共入口、层、主题、运行时、组件和配方；1.x 删除任何兼容入口前必须提供变更记录与迁移说明，并至少经过两个次版本的废弃期，实际移除只能发生在新的主版本。

组件目录

组件清单来自 gardener.manifest.json，包含类别、类型、状态、选择器、变体、部件、功能、平台、行为、适配器和无障碍契约。以下动态展示全部登记项及全部元数据，而不是精选列表。

正在读取组件清单…

组件状态要求

新增组件必须审查 Default、Hover、Focus Visible、Active、Disabled、Readonly、Loading、Empty、Error、Success；不是每个组件都显示全部状态，但必须明确“不适用”还是“已覆盖”。

JavaScript 运行时

运行时框架无关，通过 data-g-* 自动初始化。MutationObserver 同时处理新增节点和后加行为属性，适合 SPA、CMS 画布和 AI 流式生成 DOM。

正在读取运行时清单…

声明式 Dialog

<button data-g-dialog-open="confirm">打开</button>

<div id="confirm" class="g-dialog-backdrop" data-g-dialog hidden>
  <section class="g-dialog" role="dialog"
           aria-modal="true" aria-labelledby="confirm-title">
    <h2 id="confirm-title">确认操作</h2>
    <button data-g-close>取消</button>
  </section>
</div>

编程 API

import Gardener from "@gardener/css";

Gardener.init(document);
const dialog = Gardener.getInstance("#confirm", "dialog");
dialog.open();

Gardener.toast({
  title: "保存成功",
  message: "页面已经发布",
  tone: "success"
});

API	说明
`init(root)`	初始化根节点自身及其后代的全部行为。
`destroy(root)`	释放监听器、计时器和实例引用。
`register(name, factory)`	登记项目自定义行为。
`getInstance(element, name)`	获得单个或指定行为实例。
`emit(element, name, detail)`	派发可取消的 Gardener 事件。
`toast(options)`	创建状态或警告 Toast。
`behaviors`	读取当前登记的行为名称。

事件

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss。Before 事件可通过 preventDefault() 取消。

运行时测试门禁（0.4.0 起）

npm run test:runtime 使用 Node.js 内置测试运行器和 Happy DOM，对公共清单中的全部 66 种行为逐项双向比对真实实例成员，并验证初始化、幂等性、销毁和重新初始化；同时覆盖 MutationObserver 的动态节点、动态属性、子树移除、作用域销毁、多行为共存、全局销毁和初始化事件冒泡。

运行时行为新增或改名时，公共 API、示例/补充夹具和逐行为测试必须同步，否则测试会因缺少夹具、实例或成员而失败。

页面配方

完整配方 JSON 定义高频页面根类、所有必要部件、适用平台、行为、桌面适配器和用途。它不是截图模板，而是可换主题、可响应、可继续组合的稳定结构。以下展开项保留每个配方的全部字段。

正在读取配方清单…

AI 和模板系统应先匹配 recipe.id，再检查 platforms，最后用 parts 组成完整结构。不要用单个相似组件冒充整页配方。

AI 页面生成协议

Gardener 为 AI 提供五层事实来源：公共 API 清单回答“允许使用什么稳定名称与入口”，能力清单回答“行业常规能力是否实现”，组件清单回答“有什么”，工具类清单回答“精确类名是什么”，配方清单回答“复杂页面怎样开始”。

{
  "intent": {
    "page": "enterprise.cms.editor",
    "platform": "electron",
    "density": "compact",
    "direction": "ltr"
  },
  "selectionOrder": [
    "capability",
    "recipe",
    "components",
    "utilities",
    "themeAxes"
  ],
  "validation": [
    "selectors-exist",
    "states-covered",
    "keyboard-operable",
    "responsive",
    "rtl",
    "print"
  ]
}

生成约束

先检查 gardener.capabilities.json，确认需求对应的行业能力已经实现。
禁止编造 Manifest 中不存在的 g-* 类。
存在配方时，不从零拼装高复用页面。
优先使用语义组件类；工具类只处理局部差异。
交互组件必须使用登记的 Runtime 和规定 ARIA 结构。
输出前校验端点、键盘、焦点、状态、RTL、打印和高对比环境。
确有缺口时登记为框架能力需求，不把临时 CSS 混成系统接口。

Tauri / Electron

.g-desktop-shell 提供适合编辑器、AI 工具和超级 CMS 的固定视口布局。通过 data-g-platform 与 data-g-os 控制平台细节。

<html data-g-platform="electron" data-g-os="windows"
      data-g-density="compact">
  <main class="g-desktop-shell">
    <header class="g-titlebar">...</header>
    <nav class="g-activitybar">...</nav>
    <section class="g-workbench">...</section>
    <aside class="g-desktop-inspector">...</aside>
    <footer class="g-desktop-statusbar">...</footer>
  </main>
</html>

安全桥接

// Electron renderer
import { bindElectronWindowControls } from "@gardener/css/electron";
bindElectronWindowControls();

// preload 仅暴露白名单动作
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

不要在 Renderer 开启 Node Integration，也不要向页面暴露任意 IPC。适配器只接受 minimize、maximize、close、drag 白名单动作。

按需构建、类型、跨版本兼容与发布门禁

1.0.0 将五个平台、28 个组件包、正式压缩与性能预算滚动到上一版本实测基线，并把公共契约提升为 Stable，继续保留类型、跨版本兼容和真实 npm 发布包门禁。gardener.builds.json登记全部 5 个平台档案、28 个组件包、506 个组件到一个或多个真实所属包的映射、选择器签名、浏览器目标、构建器参数，以及全部 42 个正式产物的 SHA-256/SRI；gardener.performance.json保存每次正式构建的 raw、gzip、Brotli、压缩比例及 npm 包体积结果。

TypeScript 与跨版本兼容

构建会从 Public API 自动生成 gardener.d.ts、gardener.tauri.d.ts 与 gardener.electron.d.ts。66 种行为和 75 种事件形成完整字面量联合类型；npm run test:types 使用 TypeScript 严格模式编译真实消费者，覆盖默认及命名导出、行为工厂、Toast、实例查询和两类桌面桥接。

gardener.compatibility.json 固化从 0.9.0 继承的 1,145 项契约，包括全部 47 个包入口、CSS 层、主题、运行时、数据属性、适配器、506 个组件和 52 个配方。npm run verify:compatibility 允许后续 1.x 新增，禁止无迁移路径的删除；在 1.0.0 稳定切点还会反向检查已有入口是否漏记。废弃入口至少保留两个次版本，并只能在新的主版本移除。其闭合结构由 Compatibility Schema 约束。

包明确支持 Node.js >=18.18、Chrome/Edge/Firefox 100+、Safari/iOS 15.4+ 和 ESM；主入口及桌面适配器提供条件 types 导出。Runtime 自动初始化被标记为 sideEffects，避免打包器误删。npm run verify:package 会核对真实 npm 包白名单、每个导出目标、类型文件、开发目录泄漏与 Publint；prepublishOnly 强制执行完整 release:verify，并启用公开包和 npm Provenance。

5 个平台档案

档案	包入口	专属层	运行环境
web	`./platform/web.css`	通用组件，排除移动/桌面专属组合	PC 与响应式网页
mobile	`./platform/mobile.css`	通用组件 + mobile / mobile-compositions	移动网页、PWA、混合 WebView
desktop	`./platform/desktop.css`	通用组件 + desktop / desktop-compositions	桌面浏览器与应用壳
tauri	`./platform/tauri.css`	独立轻量入口继承 desktop CSS + Tauri 适配器	Tauri v2
electron	`./platform/electron.css`	独立轻量入口继承 desktop CSS + Electron 安全桥接适配器	Electron Renderer

npm run build:platform -- --platform web
npm run build:platform -- --platform mobile --out dist/custom/mobile-app
npm run build:platform -- --platform tauri --out dist/custom/tauri-app

每个目录同时生成可读 CSS、正式 .min.css、外部 Source Map 和闭合构建清单；Tauri / Electron 还复制对应 JavaScript 适配器。正式平台包入口统一以 .css 结尾，并通过真实安装包 CSS 打包测试验证嵌套继承可以完整展开。

28 个稳定组件包

layouts、regions、primitives、grid、basic、forms、form-compositions、navigation、navigation-compositions、feedback、data、data-compositions、selection-compositions、content-compositions、auth-compositions、commerce-compositions、mobile-compositions、extended、page、help、recipes、desktop、desktop-compositions、solution-compositions、catalog、ai、ai-extended、ai-compositions。

./component/*.css 规范导出上述全部正式压缩包，./component/* 作为兼容别名保留。按组件名构建时，构建器依据类选择器与 data-g-* 属性的真实源码命中，将 506 个组件解析到一个或多个完整所属包，而不是截取单个选择器，因此伪类、状态、动画、子部件、容器查询和依赖规则不会丢失。

npm run build:custom -- --components button,card,dialog --out dist/custom/account-ui
npm run build:custom -- --packs forms,auth-compositions --no-utilities --out dist/custom/auth
npm run build:custom -- --packs ai,ai-extended,ai-compositions --out dist/custom/ai

参数包括 --platform、--components、--packs、--utilities / --no-utilities 与 --out。未知平台、包或组件会立即失败；输出清单由 Custom Build Schema 校验。

每份自定义构建清单还会为可读 CSS、压缩 CSS、Source Map 和随包复制的 Tauri/Electron 适配器生成 SHA-256 与标准 SRI。接收方无需依赖构建机器，即可逐文件验证交付内容是否完整且未被替换。

字节级可复现构建

npm run verify:reproducible 会记录当前正式输出、重新执行完整构建，再比较 CSS、JavaScript、Source Map、元数据与 gardener.builds.json 的逐文件 SHA-256。输出清单或文件内容存在任何非确定性差异都会失败；性能报告因包含本次执行时间而不参与字节比较，但其数值契约由预算命令独立复核。

正式压缩与性能预算

正式 CSS 与 JavaScript 使用 esbuild 做语法级压缩，不使用正则替换；主压缩入口和每次自定义构建生成可追溯的外部 Source Map。压缩 CSS 使用不随版本变化的稳定 MIT banner，避免纯版本文本扰动 Brotli 基线，未压缩 CSS 与 Runtime 仍提供精确版本。npm run budget 使用 gzip level 9 与 Brotli quality 11，对全部 42 个正式压缩产物同时计算 raw、gzip 和 Brotli，并检查全量 CSS、Runtime 的压缩比例，以及 npm pack --dry-run 返回的 packed、unpacked 和文件数。1.0.0 以封版的 0.9.0 实测结果为紧邻基线，限制每个产物 raw 增长不超过 2%、gzip/Brotli 不超过 3%，npm 包 packed 不超过 3%、unpacked 不超过 2%、文件数不超过 10%；五个平台产物均拥有直接历史基线。包体测量向上取整到 4 KiB packed 与 64 KiB unpacked，形成不低估真实包体且不受性能报告自包含压缩循环影响的确定性上界。绝对上限或相对上限任一失败都会阻断发布。

受控产物	raw 上限	gzip 上限	Brotli 上限
gardener.min.css	1,050,000 B	145,000 B	65,000 B
gardener.core.min.css	65,000 B	9,000 B	6,000 B
gardener.themes.min.css	60,000 B	7,500 B	5,000 B
gardener.utilities.min.css	550,000 B	80,000 B	18,000 B
gardener.components.min.css	400,000 B	55,000 B	42,000 B
gardener.ai.min.css	30,000 B	6,000 B	5,000 B
gardener.runtime.min.js	105,000 B	30,000 B	25,000 B
platform/web.min.css	1,000,000 B	140,000 B	60,000 B
platform/mobile.min.css	1,020,000 B	142,000 B	62,000 B
platform/desktop.min.css	1,030,000 B	143,000 B	63,000 B
platform/tauri.min.css	256 B	256 B	256 B
platform/electron.min.css	256 B	256 B	256 B

上表列出 12 个主要 CSS/Runtime 入口；预算文件还逐项覆盖 2 个桌面适配器、28 个组件包，共 42 个正式压缩产物，没有使用笼统的共享上限替代单产物检查。

npm 包预算为 packed 2,050,000 B、unpacked 16,500,000 B、最多 92 个文件。预算源由 performance-budgets.json 管理，并分别受 Budgets Schema 与 Report Schema 保护。

npm run build       # 全量、分层、28 个组件包和 5 个平台档案
npm run verify:reproducible # 连续构建并逐文件验证 SHA-256
npm run budget      # 42 个正式产物 + npm 包的绝对/相对预算门禁
npm run verify:compatibility # 1,145 项 0.9.0 公共契约
npm run test:types # TypeScript 严格消费者验证
npm run verify:package # npm 白名单、导出目标与 Publint
npm run test:build  # 10 个构建、兼容、类型、发布与失败路径用例

无障碍与国际化

框架提供焦点样式、减少动效、高对比和 Forced Colors 基础，但语义名称与内容顺序仍由页面作者负责。

键盘Tabs、Menu、Tree、Grid、Carousel、Splitter、Dialog 和 Command Palette 都有键盘路径。

焦点Dialog 与命令面板约束焦点，关闭后恢复触发源；不可见项退出 Tab 顺序。

名称图标按钮需要 aria-label；表单需要 label、aria-label 或 aria-labelledby。

动态状态Toast 使用 status/alert；展开、选择、当前项通过 ARIA 状态同步。

方向布局使用逻辑属性，组件覆盖 RTL 下的动画方向与箭头。

动效prefers-reduced-motion 会压缩动画持续时间并关闭平滑滚动。

交付检查表

页面有正确的 lang 和唯一标题。
Heading 层级连续，Landmark 有可识别名称。
所有图片有符合目的的 alt；装饰图使用空 alt。
仅键盘可完成关键任务，焦点始终可见。
文本和状态色达到 WCAG AA；不能只依赖颜色表达状态。
在 200% 缩放、RTL、Reduced Motion、Forced Colors 下仍可操作。
移动端触控目标使用 touch 密度或不小于约 44px。

1.0.0 自动化测试矩阵

门禁	环境	数量	覆盖
`test:build`	Node.js + esbuild + Ajv	10	平台边界、真实组件归属、正式压缩、Source Map、SHA-256/SRI、可复现构建、绝对/相对预算、类型、兼容基线、支持策略、自定义构建、失败路径和 npm 包安装解析
`test:browser`	Desktop Chromium + WebKit	48	全部 21 个示例、Home 落地页与文档、控制台、请求、样式、横向溢出、Dialog 键盘与焦点生命周期
`test:browser:firefox`	Desktop Firefox	24	与桌面默认门禁相同；在具备 Playwright Firefox 系统运行库的主机或 CI 执行
`test:mobile`	Pixel 7 Chromium + iPhone 13 WebKit	52	全部 21 个示例、Home 落地页与文档、回流、44px 触控目标、Bottom Sheet、320px 窄屏与横屏
`test:a11y`	Chromium + Axe	25	21 个示例及 Home 两页的 WCAG 2 A/AA、2.1 A/AA、2.2 AA，以及键盘、焦点、RTL、Reduced Motion、Forced Colors
`test:html`	parse5	24	21 个示例、Home 首页和文档的解析、重复 ID、ARIA 引用、语言、标题、Viewport 与清单

npm run test:html             # 24 个 HTML 结构用例
npm run test:browser          # Chromium + WebKit，48 个桌面用例
npm run test:browser:firefox  # Firefox 独立门禁，24 个桌面用例
npm run test:browser:all      # Chromium + Firefox + WebKit，72 个桌面用例
npm run test:mobile           # Pixel 7 + iPhone 13，52 个移动用例
npm run test:a11y             # Axe、键盘与环境矩阵，25 个用例
npm run test:e2e              # 默认 125 个真实浏览器用例
npm run test:types            # TypeScript 严格消费者门禁
npm run verify:compatibility  # 1,145 项 0.9.0 兼容基线
npm run verify:package        # npm 文件、导出与 Publint
npm test                      # 281 个默认自动化用例及全部静态、契约、类型、兼容、发布、可复现与预算门禁

Axe 门禁阻断所选 WCAG A/AA 规则检测到的全部违规，不按 impact 降级放行，并输出规则、节点选择器、HTML 与修复摘要。自动化不能代替人工屏幕阅读器测试；正式产品仍应使用 NVDA / JAWS / VoiceOver 完成关键任务走查。

打印与文档输出

基础打印层会切换白底黑字、隐藏浮层与固定导航、重复表头、避免卡片和媒体跨页，并让长代码自动换行。完整栅格另外提供 g-print-col-1 至 g-print-col-24、打印偏移和显隐类，用于在纸张宽度内独立重排。报告、发票和 CMS 编辑器另有配方级打印处理。

<button class="g-no-print">编辑</button>
<section class="g-report">
  <header class="g-report-header">...</header>
  <table class="g-invoice-lines">...</table>
  <footer class="g-signature-line">...</footer>
</section>

可用工具类包括 g-print-hidden、g-print-block、g-print-break-before 和 g-break-inside-avoid。

定制、检查与发布

项目覆盖

@layer gardener.overrides {
  :root {
    --g-font-sans: Inter, system-ui, sans-serif;
    --g-reading-max: 72ch;
  }

  [data-brand="acme"] {
    --g-color-primary: #126b41;
    --g-color-primary-text: #0d5733;
  }
}

框架检查

npm run build      # 全量、分层、28 个组件包和 5 个平台档案
npm run build:platform -- --platform mobile # 平台定向构建
npm run build:custom -- --components button,dialog # 组件定向构建
npm run verify:reproducible # 字节级可复现构建门禁
npm run budget     # raw / gzip / Brotli、绝对/相对和 npm 包预算
npm run verify:compatibility # 0.9.0 跨版本公共契约基线
npm run test:types # TypeScript 严格消费者验证
npm run verify:package # npm 文件、导出目标与 Publint
npm run test:schema # Ajv 2020-12 验证十一套 Schema
npm run test:build # 10 个构建、类型、兼容、发布与失败路径用例
npm run contracts  # Schema、公共 API、命名与跨清单契约
npm run test:runtime # 66 种行为与 DOM 生命周期
npm run test:html   # 示例与 Home 的 HTML 结构
npm run check      # 主题、组件、运行时和清单一致性
npm run audit      # Token、对比度、包边界、导出和版本
npm run validate   # 配方、示例类名与基础无障碍
npm run test:e2e   # 多浏览器、移动端与 Axe
npm test           # 执行全部框架检查

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # 文档零遗漏校验

新增能力必须同步

实现 CSS 或 Runtime。
登记 metadata/components.json。
行业能力登记 metadata/capabilities.json，复杂页面登记 metadata/recipes.json。
审查完整状态矩阵和环境矩阵。
增加可运行示例与验证输入。
重新构建全部 Manifest，并运行浏览器回归。

文档站的目录浏览器直接读取 css/dist、Vue、React、AngularJS 与 Blazor 的 metadata / dist 清单。因此框架构建完成后，无需手工更新 CSS 或四套适配层的组件数量、行为名称、入口或工具类搜索数据。

快速开始

推荐选择顺序

安装与包

按层组合

Gardener Vue 3 项目

安装与全局插件

按需组件与主题 Provider

全部组件的公共属性、透传与 Ref

v-model、自定义事件与指令

全部 7 个 Composable

Web、移动端与桌面端样式入口

全部 29 个公共包入口

非组件运行时导出与 TypeScript 类型

公共 Schema、元数据与发布门禁

全部 506 个 Vue 组件

Gardener React 项目

安装与根组件

主题 Provider 与十条主题轴

全部组件的 10 个公共属性

受控值、自定义事件与行为实例

全部 7 个 Hooks

Web、移动端与桌面端样式入口

SSR、Hydration 与桌面桥接

全部 29 个公共包入口

非组件运行时导出与 TypeScript 类型

公共 Schema、性能与发布门禁

全部 506 个 React 组件

Gardener AngularJS 项目

安装、ESM 加载与模块工厂

元素指令、属性指令与语义

全部 8 个组件公共属性

ngModel、原生表单与 Gardener 事件

通用指令、服务与十轴主题

Web、移动端、桌面端与按域样式

全部 29 个公共包入口

非组件运行时导出与 TypeScript 类型

公共 Schema、兼容性、性能与发布门禁

全部 506 个 AngularJS 组件

Gardener Blazor 项目

安装、注册与静态资源

组件、Provider 与 SSR

共同参数、引用句柄与表单

值绑定、75 个事件与 7 个同步守卫

主题、服务与桌面桥

完整公共类型与机器可读契约

1.0.0 发布质量

全部 506 个 Blazor 组件

设计原则

CSS 层顺序

主题系统

主题轴

设计 Token

局部覆盖

CSS 全量 API

搜索全部 CSS 接口

全部源码模块

工具类

搜索完整工具类清单

布局系统

Dashboard 示例

24 / 12 完整栅格系统

实时 24 栅格

12 栅格兼容

完整类名矩阵

断点

容器查询

RTL、嵌套与打印

传统区域布局系统

实时五区域布局

16 种成品骨架

五区域与 Master / Detail

Dock 与可调分栏

响应、容器、状态与变量

经典布局原语

实时 Bento 与流式原语

22 个原语完整矩阵

常用组合

Media Object、Overlay 与滚动

响应与环境规则

页面级公共组件