@77-zhike/app-sdk 0.2.0-d7b1.10

package/src/ui/index.js

@@ -0,0 +1,4 @@
+// 此文件由 scripts/generate-components.mjs 生成，请修改产品能力声明。
+import * as React from "react";
+import { createUiComponents } from "./factory.js";
+export const { NativeDOM, Icon, Stack, SplitLayout, SplitLayoutMain, SplitLayoutAside, SplitLayoutActions, Section, Banner, Badge, LoadingState, Skeleton, Card, Grid, EmptyState, ZhikeLink, Button, SearchInput, FilterSelect, Switch, LookupCell, Tabs, TabsList, TabsTrigger, TabsContent, Table, TableHeader, TableBody, TableRow, TableCell, Avatar, DescriptionList, DescriptionListItem, DescriptionListMenu, DescriptionListMenuItem, Divider, Chart, DashboardSurface, DashboardLayout, DashboardPanel, MetricReadout, AnalysisView, Json, Link, StatusBadge, TextBlock, TypographyTitle, TypographyBody, TypographyCaption, TableHeaderCell, WidgetTextWidget, WidgetTitle, WidgetTextPrimary, WidgetTextSecondary, WidgetLoading, WidgetDecoration, Typography, Widget } = createUiComponents(React);

package/src/ui/jsx.generated.d.ts

@@ -0,0 +1,359 @@
+// 此文件由 scripts/generate-components.mjs 生成，请修改产品能力声明。
+import type * as React from "react";
+import type { ReactNode } from "react";
+import type { AppStyle } from "./style.js";
+import type { AppKeyboardEvent } from "./events.js";
+import type { NativeDOMIntrinsicElements } from "./native-dom.js";
+export namespace JSX {
+  type Element = React.JSX.Element;
+  type ElementType = keyof IntrinsicElements | React.JSXElementConstructor<any>;
+  interface ElementClass extends React.JSX.ElementClass {}
+  interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
+  interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
+  type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
+  interface IntrinsicAttributes extends React.Attributes {}
+  interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {}
+  interface IntrinsicElements {
+    div: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["div"];
+    section: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["section"];
+    article: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["article"];
+    header: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["header"];
+    footer: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["footer"];
+    aside: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["aside"];
+    span: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["span"];
+    p: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["p"];
+    h1: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["h1"];
+    h2: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["h2"];
+    h3: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["h3"];
+    h4: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["h4"];
+    h5: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["h5"];
+    h6: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["h6"];
+    strong: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["strong"];
+    em: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["em"];
+    small: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["small"];
+    ul: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["ul"];
+    ol: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["ol"];
+    li: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["li"];
+    br: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["br"];
+    hr: {
+  title?: string;
+  style?: AppStyle;
+  role?: "group" | "region" | "note" | "heading" | "list" | "listitem";
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: -1 | 0;
+  onClick?: () => void | Promise<void>;
+  onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+  onFocus?: () => void | Promise<void>;
+  onBlur?: () => void | Promise<void>;
+  children?: ReactNode;
+    } & React.Attributes | NativeDOMIntrinsicElements["hr"];
+    a: NativeDOMIntrinsicElements["a"];
+    abbr: NativeDOMIntrinsicElements["abbr"];
+    b: NativeDOMIntrinsicElements["b"];
+    blockquote: NativeDOMIntrinsicElements["blockquote"];
+    button: NativeDOMIntrinsicElements["button"];
+    caption: NativeDOMIntrinsicElements["caption"];
+    circle: NativeDOMIntrinsicElements["circle"];
+    clipPath: NativeDOMIntrinsicElements["clipPath"];
+    code: NativeDOMIntrinsicElements["code"];
+    col: NativeDOMIntrinsicElements["col"];
+    colgroup: NativeDOMIntrinsicElements["colgroup"];
+    dd: NativeDOMIntrinsicElements["dd"];
+    defs: NativeDOMIntrinsicElements["defs"];
+    details: NativeDOMIntrinsicElements["details"];
+    dialog: NativeDOMIntrinsicElements["dialog"];
+    dl: NativeDOMIntrinsicElements["dl"];
+    dt: NativeDOMIntrinsicElements["dt"];
+    ellipse: NativeDOMIntrinsicElements["ellipse"];
+    fieldset: NativeDOMIntrinsicElements["fieldset"];
+    figcaption: NativeDOMIntrinsicElements["figcaption"];
+    figure: NativeDOMIntrinsicElements["figure"];
+    form: NativeDOMIntrinsicElements["form"];
+    g: NativeDOMIntrinsicElements["g"];
+    i: NativeDOMIntrinsicElements["i"];
+    input: NativeDOMIntrinsicElements["input"];
+    label: NativeDOMIntrinsicElements["label"];
+    legend: NativeDOMIntrinsicElements["legend"];
+    line: NativeDOMIntrinsicElements["line"];
+    main: NativeDOMIntrinsicElements["main"];
+    mark: NativeDOMIntrinsicElements["mark"];
+    nav: NativeDOMIntrinsicElements["nav"];
+    optgroup: NativeDOMIntrinsicElements["optgroup"];
+    option: NativeDOMIntrinsicElements["option"];
+    path: NativeDOMIntrinsicElements["path"];
+    polygon: NativeDOMIntrinsicElements["polygon"];
+    polyline: NativeDOMIntrinsicElements["polyline"];
+    pre: NativeDOMIntrinsicElements["pre"];
+    progress: NativeDOMIntrinsicElements["progress"];
+    rect: NativeDOMIntrinsicElements["rect"];
+    select: NativeDOMIntrinsicElements["select"];
+    sub: NativeDOMIntrinsicElements["sub"];
+    summary: NativeDOMIntrinsicElements["summary"];
+    sup: NativeDOMIntrinsicElements["sup"];
+    svg: NativeDOMIntrinsicElements["svg"];
+    table: NativeDOMIntrinsicElements["table"];
+    tbody: NativeDOMIntrinsicElements["tbody"];
+    td: NativeDOMIntrinsicElements["td"];
+    text: NativeDOMIntrinsicElements["text"];
+    textarea: NativeDOMIntrinsicElements["textarea"];
+    th: NativeDOMIntrinsicElements["th"];
+    thead: NativeDOMIntrinsicElements["thead"];
+    time: NativeDOMIntrinsicElements["time"];
+    title: NativeDOMIntrinsicElements["title"];
+    tr: NativeDOMIntrinsicElements["tr"];
+    tspan: NativeDOMIntrinsicElements["tspan"];
+  }
+}

package/src/ui/native-dom.d.ts

@@ -0,0 +1,49 @@
+import type { AppKeyboardEvent } from "./events.js";
+import type { JSX as ReactJSX, DOMAttributes, CSSProperties, ReactNode } from "react";
+
+/** 原生元素事件只传送数据快照，不携带 DOM 节点或同步事件方法。 */
+export interface NativeDOMEvent extends AppKeyboardEvent {
+  type: string;
+  target: NativeDOMEventTarget;
+  currentTarget: NativeDOMEventTarget;
+  key: string;
+  code: string;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  button: number;
+}
+export interface NativeDOMEventTarget {
+  id: string;
+  name: string;
+  value: string;
+  checked: boolean;
+  dataset: Record<string, string>;
+}
+export const nativeDOMTags: readonly string[];
+export const nativeDOMEvents: readonly string[];
+export function isNativeDOMTag(type: string): boolean;
+export function assertNativeStyles(value: unknown, maxLength?: number): string;
+export function assertNativeDOMNode(node: { type: string; props: Record<string, unknown>; children: string[] }): void;
+
+/** HTML/CSS/JSX 可声明；自由属性的作用域由 Host 树校验，事件仍为 Worker 快照。 */
+export type NativeDOMIntrinsicElements = {
+  [Tag in keyof ReactJSX.IntrinsicElements]: Omit<ReactJSX.IntrinsicElements[Tag],
+    keyof DOMAttributes<unknown> | 'ref' | 'href' | 'src' | 'action' | 'formAction' | 'style'> & {
+      children?: ReactNode;
+      style?: CSSProperties;
+      ref?: never;
+      dangerouslySetInnerHTML?: never;
+      onClick?: (event: NativeDOMEvent) => void | Promise<void>;
+      onChange?: (event: NativeDOMEvent) => void | Promise<void>;
+      onInput?: (event: NativeDOMEvent) => void | Promise<void>;
+      onSubmit?: (event: NativeDOMEvent) => void | Promise<void>;
+      onKeyDown?: (event: AppKeyboardEvent) => void | Promise<void>;
+      onKeyUp?: (event: NativeDOMEvent) => void | Promise<void>;
+      onFocus?: (event: NativeDOMEvent) => void | Promise<void>;
+      onBlur?: (event: NativeDOMEvent) => void | Promise<void>;
+      onPointerDown?: (event: NativeDOMEvent) => void | Promise<void>;
+      onPointerUp?: (event: NativeDOMEvent) => void | Promise<void>;
+    };
+};

package/src/ui/native-dom.js

@@ -0,0 +1,44 @@
+import { assertJsonValue } from './validation.js';
+
+const fail = () => { throw new Error('runtime_ui_contract_invalid'); };
+export const nativeDOMTags = Object.freeze(('a abbr article aside b blockquote br button caption circle clipPath code col colgroup dd defs details dialog div dl dt ellipse em fieldset figcaption figure footer form g h1 h2 h3 h4 h5 h6 header hr i input label legend li line main mark nav ol optgroup option p path polygon polyline pre progress rect section select small span strong sub summary sup svg table tbody td text textarea th thead time title tr tspan ul').split(' '));
+export const nativeDOMEvents = Object.freeze(['onClick', 'onChange', 'onInput', 'onSubmit', 'onKeyDown', 'onKeyUp', 'onFocus', 'onBlur', 'onPointerDown', 'onPointerUp']);
+const tags = new Set(nativeDOMTags);
+const attributes = new Set(('id className title role name placeholder value defaultValue checked defaultChecked disabled readOnly required multiple selected open hidden tabIndex type min max step minLength maxLength rows cols colSpan rowSpan scope htmlFor form noValidate autoComplete autoFocus spellCheck width height viewBox preserveAspectRatio d points x y x1 x2 y1 y2 cx cy r rx ry dx dy fill stroke strokeWidth strokeLinecap strokeLinejoin strokeDasharray fillRule clipRule clipPath opacity transform offset fontSize textAnchor dominantBaseline dateTime').split(' '));
+const booleans = new Set(('checked defaultChecked disabled readOnly required multiple selected open hidden noValidate autoFocus').split(' '));
+
+/** 只开放呈现；远端资源、CSS 逃逸编码和主动文档节点不属于此合同。 */
+export function assertNativeStyles(value, maxLength = 65536) {
+  if (typeof value !== 'string' || value.length > maxLength || /[\\<\u0000-\u0008\u000b\u000c\u000e-\u001f]/u.test(value)) fail();
+  const normalized = value.replace(/\/\*[\s\S]*?\*\//gu, '');
+  if (/@(?:import|font-face|namespace)\b|(?:image-set|expression)\s*\(|(?:behavior|-moz-binding)\s*:/iu.test(normalized)) fail();
+  const withoutFragments = normalized.replace(/url\(\s*['"]?#[a-zA-Z][\w-]*['"]?\s*\)/gu, '');
+  if (/url\s*\(/iu.test(withoutFragments)) fail();
+  return value;
+}
+
+export function isNativeDOMTag(type) { return tags.has(type); }
+export function assertNativeDOMNode(node) {
+  if (!isNativeDOMTag(node.type)) fail();
+  for (const [key, value] of Object.entries(node.props)) {
+    if (nativeDOMEvents.includes(key)) {
+      if (!value || typeof value !== 'object' || Array.isArray(value) || Object.keys(value).join() !== 'callbackId'
+        || typeof value.callbackId !== 'string' || !value.callbackId || value.callbackId.length > 160) fail();
+    } else if (key === 'style') {
+      assertJsonValue(value, { maxBytes: 16384, maxEntries: 100 });
+      if (!value || typeof value !== 'object' || Array.isArray(value)) fail();
+      for (const [property, item] of Object.entries(value)) {
+        if (!/^(?:[a-zA-Z][a-zA-Z0-9]*|--[a-zA-Z][\w-]*)$/u.test(property) || !['string', 'number'].includes(typeof item)) fail();
+        assertNativeStyles(`${property}:${item}`, 4096);
+      }
+    } else {
+      if (!attributes.has(key) && !/^(?:aria|data)-[a-z][a-z0-9-]{0,60}$/u.test(key)) fail();
+      if (!['string', 'number', 'boolean'].includes(typeof value) || typeof value === 'number' && !Number.isFinite(value)
+        || typeof value === 'string' && value.length > 4096 || booleans.has(key) && typeof value !== 'boolean') fail();
+      if (['fill', 'stroke', 'clipPath'].includes(key)) assertNativeStyles(String(value), 4096);
+      if (key === 'type' && !['button', 'submit', 'reset', 'text', 'search', 'email', 'tel', 'url', 'number', 'date', 'datetime-local', 'time', 'checkbox', 'radio', 'range', 'hidden'].includes(value)) fail();
+    }
+  }
+  // 输入与 SVG 叶节点不能暗藏子树。
+  if (['input', 'br', 'hr', 'col'].includes(node.type) && node.children.length) fail();
+}

package/src/ui/style.d.ts

@@ -0,0 +1,5 @@
+// 此文件由 scripts/generate-components.mjs 生成，请修改产品能力声明。
+import type { CSSProperties } from "react";
+export type AllowedStyleKey = "display" | "flexDirection" | "flexWrap" | "alignItems" | "alignSelf" | "justifyContent" | "flexGrow" | "flexShrink" | "flexBasis" | "gap" | "rowGap" | "columnGap" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "boxSizing" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "fontSize" | "fontWeight" | "lineHeight" | "textAlign" | "whiteSpace" | "overflowWrap" | "wordBreak" | "color" | "backgroundColor" | "borderWidth" | "borderStyle" | "borderColor" | "borderRadius" | "opacity" | "overflow" | "overflowX" | "overflowY";
+export type AppStyle = Pick<CSSProperties, AllowedStyleKey>;
+export function assertAppStyle(value: unknown): AppStyle;

package/src/ui/style.generated.js

@@ -0,0 +1,2 @@
+// 此文件由 scripts/generate-components.mjs 生成，请修改产品能力声明。
+export const allowedStyleKeys = Object.freeze(["display","flexDirection","flexWrap","alignItems","alignSelf","justifyContent","flexGrow","flexShrink","flexBasis","gap","rowGap","columnGap","width","height","minWidth","minHeight","maxWidth","maxHeight","boxSizing","margin","marginTop","marginRight","marginBottom","marginLeft","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","fontSize","fontWeight","lineHeight","textAlign","whiteSpace","overflowWrap","wordBreak","color","backgroundColor","borderWidth","borderStyle","borderColor","borderRadius","opacity","overflow","overflowX","overflowY"]);

package/src/ui/style.js

@@ -0,0 +1,15 @@
+import { allowedStyleKeys } from './style.generated.js';
+import { assertJsonValue } from './validation.js';
+
+const allowed = new Set(allowedStyleKeys);
+/** 复制已经通过 JSON 数据边界的样式，不解释 CSS 值。 */
+export function assertAppStyle(value) {
+  assertJsonValue(value);
+  if (!value || Array.isArray(value) || typeof value !== 'object') throw new Error('runtime_ui_contract_invalid');
+  const result = {};
+  for (const [key, entry] of Object.entries(value)) {
+    if (!allowed.has(key) || !['string', 'number'].includes(typeof entry)) throw new Error('runtime_ui_contract_invalid');
+    result[key] = entry;
+  }
+  return result;
+}

package/src/ui/validation.js

@@ -0,0 +1,86 @@
+const fail = () => { throw new Error('runtime_ui_contract_invalid'); };
+
+/** 在序列化之前校验，避免 Date、非有限数字或 undefined 被 JSON 静默改写。 */
+export function assertJsonValue(value, { maxBytes = 32 * 1024, maxEntries = 1000, maxDepth = 8 } = {}) {
+  const ancestors = new Set();
+  let entries = 0;
+  function visit(item, depth) {
+    if (depth > maxDepth) fail();
+    if (item === null || typeof item === 'string' || typeof item === 'boolean') return;
+    if (typeof item === 'number') { if (!Number.isFinite(item)) fail(); return; }
+    if (typeof item !== 'object' || ancestors.has(item)) fail();
+    const array = Array.isArray(item);
+    if (!array && ![Object.prototype, null].includes(Object.getPrototypeOf(item))) fail();
+    const keys = Reflect.ownKeys(item).filter(key => !array || key !== 'length');
+    if (keys.some(key => typeof key !== 'string') || (array && keys.length !== item.length)) fail();
+    entries += keys.length;
+    if (entries > maxEntries) fail();
+    ancestors.add(item);
+    for (const key of keys) {
+      const descriptor = Object.getOwnPropertyDescriptor(item, key);
+      if (!descriptor?.enumerable || !Object.hasOwn(descriptor, 'value') || (array && !/^(0|[1-9]\d*)$/.test(key))) fail();
+      visit(descriptor.value, depth + 1);
+    }
+    ancestors.delete(item);
+  }
+  visit(value, 0);
+  if (new TextEncoder().encode(JSON.stringify(value)).byteLength > maxBytes) fail();
+  return value;
+}
+
+export function assertBannerActions(actions) {
+  if (!Array.isArray(actions) || !actions.length || actions.length > 3) fail();
+  for (const action of actions) {
+    if (!action || typeof action !== 'object' || Object.keys(action).some(key => !['label', 'variant'].includes(key))
+      || typeof action.label !== 'string' || !action.label.trim() || action.label.length > 200
+      || !['primary', 'secondary'].includes(action.variant)) fail();
+  }
+}
+
+/** 有界的纯数据图表；不接受脚本、HTML、任意样式或补零。 */
+export function assertChartData(data) {
+  assertJsonValue(data, { maxEntries: 1200 });
+  const only = (item, keys) => item && typeof item === 'object' && !Array.isArray(item) && Object.keys(item).every(key => keys.includes(key));
+  const label = value => typeof value === 'string' && value.trim().length > 0 && value.length <= 200;
+  if (!only(data, ['labels', 'series']) || !Array.isArray(data.labels) || data.labels.length > 200 || !data.labels.every(label)
+      || !Array.isArray(data.series) || !data.series.length || data.series.length > 4) fail();
+  const ids = new Set();
+  for (const series of data.series) {
+    if (!only(series, ['id', 'label', 'values']) || !label(series.id) || !label(series.label) || ids.has(series.id)
+        || !Array.isArray(series.values) || series.values.length !== data.labels.length
+        || series.values.some(value => value !== null && (typeof value !== 'number' || !Number.isFinite(value)))) fail();
+    ids.add(series.id);
+  }
+  return data;
+}
+
+
+export const ANALYSIS_VIEW_LIMITS = Object.freeze({ maxBytes: 256 * 1024, maxEntries: 20000, maxDepth: 24 });
+/** 结果只携带有界纯数据；身份、网络和执行代码均不是呈现合同。 */
+export function assertAnalysisViewData(asset, result) {
+  assertJsonValue(asset, ANALYSIS_VIEW_LIMITS);
+  assertJsonValue(result, ANALYSIS_VIEW_LIMITS);
+  const object = x => x !== null && typeof x === 'object' && !Array.isArray(x);
+  const label = x => typeof x === 'string' && x.length > 0 && x.length <= 200;
+  const cells = items => Array.isArray(items) && items.length <= 2400 && items.every(cell => object(cell) && label(cell.status) && (cell.value === null || typeof cell.value === 'string' && /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(cell.value) && Number.isFinite(Number(cell.value))));
+  if (!object(asset) || !object(asset.definition) || !label(asset.definition.id) || !label(asset.definition.name) || !object(asset.capability)
+      || !object(result) || !['scalar', 'state_analysis'].includes(result.kind) || !object(result.query) || !Array.isArray(result.query.metrics)
+      || result.query.metrics.length !== 1 || result.query.metrics[0]?.metricId !== asset.definition.id || !object(result.query.timeRange)) fail();
+  if (result.kind === 'state_analysis') {
+    const state = result.analysisResult;
+    if (!object(state) || !Array.isArray(state.measures) || !state.measures.length || state.measures.length > 24
+        || state.measures.some(m => !object(m) || !label(m.slotId) || !label(m.label) || !['count', 'ratio', 'number'].includes(m.unit))
+        || new Set(state.measures.map(m => m.slotId)).size !== state.measures.length
+        || !Array.isArray(state.dimensions) || !Array.isArray(state.rows) || state.rows.length > 400 || !cells(state.totals)
+        || state.rows.some(row => !object(row) || !Array.isArray(row.groups) || !cells(row.cells))) fail();
+  } else if (!cells(result.cells) || !cells(result.totals) || [...result.cells, ...result.totals].some(c => !Array.isArray(c.groups))) fail();
+  return { asset, result };
+}
+
+/** TreeMap 的面积只能使用单系列非负数；选择始终指向原始标签索引。 */
+export function assertChartSelection(props) {
+  if (props.selectedIndex !== undefined && (!Number.isInteger(props.selectedIndex) || props.selectedIndex < 0 || props.selectedIndex >= props.data.labels.length)) fail();
+  if (props.dimmedIndices !== undefined && (!Array.isArray(props.dimmedIndices) || props.dimmedIndices.length > props.data.labels.length || new Set(props.dimmedIndices).size !== props.dimmedIndices.length || props.dimmedIndices.some(index => !Number.isInteger(index) || index < 0 || index >= props.data.labels.length))) fail();
+  if (props.detailLabels !== undefined && (!Array.isArray(props.detailLabels) || props.detailLabels.length !== props.data.labels.length || props.detailLabels.some(label => typeof label !== 'string' || label.length > 200))) fail();
+  if (props.variant === 'treemap' && (props.data.series.length !== 1 || props.data.series[0].values.some(value => value !== null && value < 0))) fail();
+}