@xihan-ui/web-components 1.0.0-alpha.0

package/dist/backgrounds.d.ts

@@ -0,0 +1,76 @@
+import { r as PropertyValues } from "./types-BvWWqMd_.js";
+import { t as XhReactiveElement } from "./element-DRoFjrYO.js";
+import { BackgroundEffect, BackgroundQuality, BackgroundSurface, MorphOptions, ParamValue, PointCloud } from "@xihan-ui/backgrounds";
+//#region src/backgrounds.d.ts
+/**
+ * `<xh-background>` —— 视觉画面宿主。
+ *
+ * 元素自身就是画布的容器：内容照常写在里面，效果铺在内容底下，
+ * 画布是 pointer-events: none，不会挡住里面的交互。
+ *
+ * @customElement xh-background
+ * @attr {string} effect - 效果名，须先注册（defineXhBackground 会把内置效果一并注册）
+ * @attr {'auto'|'high'|'balanced'|'eco'} quality - 画质档位
+ * @attr {object} params - 效果参数，JSON 对象
+ * @attr {boolean} paused - 暂停绘制
+ * @attr {boolean} pointer - 是否绑定指针事件，写 "false" 关闭
+ * @attr {boolean} reduced-motion - 是否尊重系统的减弱动态效果，写 "false" 关闭
+ * @attr {boolean} pause-offscreen - 滚出视口是否暂停，写 "false" 关闭
+ */
+declare class XhBackgroundElement extends XhReactiveElement {
+  static properties: {
+    effect: {};
+    quality: {};
+    params: {
+      type: ObjectConstructor;
+    };
+    paused: {
+      type: BooleanConstructor;
+    };
+    pointer: {
+      converter: {
+        fromAttribute: (value: string | null) => boolean | undefined;
+      };
+    };
+    reducedMotion: {
+      attribute: string;
+      converter: {
+        fromAttribute: (value: string | null) => boolean | undefined;
+      };
+    };
+    pauseOffscreen: {
+      attribute: string;
+      converter: {
+        fromAttribute: (value: string | null) => boolean | undefined;
+      };
+    };
+  };
+  effect?: string | BackgroundEffect;
+  quality?: BackgroundQuality;
+  params?: Record<string, ParamValue>;
+  paused?: boolean;
+  pointer?: boolean;
+  reducedMotion?: boolean;
+  pauseOffscreen?: boolean;
+  private surface;
+  private appliedEffect;
+  /** 记住上次生效的画质：setQuality 会重建着色器程序，不能每次更新都调一遍。 */
+  private appliedQuality;
+  /** 画面还没建起来时先收着，建好后补发。 */
+  private pendingCloud;
+  /** 换点云。属性传不了二进制，只能用 JS 调。 */
+  setCloud(cloud: PointCloud, options?: MorphOptions): void;
+  /** 拿底层画面实例，用于自定义调度或调参。 */
+  getSurface(): BackgroundSurface | null;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(_changed: PropertyValues): void;
+}
+/**
+ * 注册 `<xh-background>`，并把内置效果一并注册进效果注册表——
+ * 元素只认效果名字，注册表空着的话任何 effect 属性都解析不出来。
+ */
+declare function defineXhBackground(): void;
+//#endregion
+export { XhBackgroundElement, defineXhBackground };
+//# sourceMappingURL=backgrounds.d.ts.map

package/dist/backgrounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backgrounds.d.ts","names":[],"sources":["../src/backgrounds.ts"],"mappings":";;;;;;;;;;;;;;;;;;;cA+Ca,4BAA4B;SACvB;;;;;;;;;;;QApBO,gBAAA;;;;;;QAAA,gBAAA;;;;;;QAAA,gBAAA;;;;EA8Bf,kBAAkB;EAClB,UAAU;EACV,SAAS,eAAe;EACxB;EACA;EACA;EACA;UAEA;UACA;;UAEA;;UAEA;;EAGR,SAAS,OAAO,YAAY,UAAU;;EAQtC,cAAc;EAIL;EAOA;YAOU,QAAQ,UAAU;;;;;;iBAuDvB"}

package/dist/backgrounds.js

@@ -0,0 +1,120 @@
+import { t as defineElement } from "./registry-DR6I2_zF.js";
+import { n as version, t as XhReactiveElement } from "./element-xjYY5Oe2.js";
+import { DIAGNOSTIC_CODES, reportDiagnostic } from "@xihan-ui/kernel";
+import { createBackgroundSurface, registerBuiltinEffects } from "@xihan-ui/backgrounds";
+//#region src/backgrounds.ts
+/** 属性缺席翻成 undefined（走引擎默认值），写成 "false" 才是关。 */
+const optionalBool = { fromAttribute: (value) => value === null ? void 0 : value !== "false" };
+/**
+* `<xh-background>` —— 视觉画面宿主。
+*
+* 元素自身就是画布的容器：内容照常写在里面，效果铺在内容底下，
+* 画布是 pointer-events: none，不会挡住里面的交互。
+*
+* @customElement xh-background
+* @attr {string} effect - 效果名，须先注册（defineXhBackground 会把内置效果一并注册）
+* @attr {'auto'|'high'|'balanced'|'eco'} quality - 画质档位
+* @attr {object} params - 效果参数，JSON 对象
+* @attr {boolean} paused - 暂停绘制
+* @attr {boolean} pointer - 是否绑定指针事件，写 "false" 关闭
+* @attr {boolean} reduced-motion - 是否尊重系统的减弱动态效果，写 "false" 关闭
+* @attr {boolean} pause-offscreen - 滚出视口是否暂停，写 "false" 关闭
+*/
+var XhBackgroundElement = class extends XhReactiveElement {
+	static properties = {
+		effect: {},
+		quality: {},
+		params: { type: Object },
+		paused: { type: Boolean },
+		pointer: { converter: optionalBool },
+		reducedMotion: {
+			attribute: "reduced-motion",
+			converter: optionalBool
+		},
+		pauseOffscreen: {
+			attribute: "pause-offscreen",
+			converter: optionalBool
+		}
+	};
+	surface = null;
+	appliedEffect;
+	/** 记住上次生效的画质：setQuality 会重建着色器程序，不能每次更新都调一遍。 */
+	appliedQuality;
+	/** 画面还没建起来时先收着，建好后补发。 */
+	pendingCloud = null;
+	/** 换点云。属性传不了二进制，只能用 JS 调。 */
+	setCloud(cloud, options) {
+		if (this.surface === null) this.pendingCloud = {
+			cloud,
+			options
+		};
+		else this.surface.setCloud(cloud, options);
+	}
+	/** 拿底层画面实例，用于自定义调度或调参。 */
+	getSurface() {
+		return this.surface;
+	}
+	connectedCallback() {
+		if (getComputedStyle(this).display === "inline") this.style.display = "block";
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.surface?.destroy();
+		this.surface = null;
+		this.appliedEffect = void 0;
+	}
+	updated(_changed) {
+		if (this.effect === void 0) return;
+		if (this.surface === null) {
+			try {
+				this.surface = createBackgroundSurface(this, {
+					effect: this.effect,
+					params: this.params,
+					quality: this.quality,
+					pointer: this.pointer,
+					autoplay: this.paused !== true,
+					respectReducedMotion: this.reducedMotion,
+					pauseOffscreen: this.pauseOffscreen
+				});
+			} catch (error) {
+				reportDiagnostic({
+					code: DIAGNOSTIC_CODES.warn,
+					level: "error",
+					message: `[visual] <xh-background> 创建失败：${error.message}`
+				});
+				return;
+			}
+			this.appliedEffect = this.effect;
+			this.appliedQuality = this.quality;
+			if (this.pendingCloud !== null) {
+				this.surface.setCloud(this.pendingCloud.cloud, this.pendingCloud.options);
+				this.pendingCloud = null;
+			}
+			return;
+		}
+		if (this.effect !== this.appliedEffect) {
+			this.surface.setEffect(this.effect);
+			this.appliedEffect = this.effect;
+		}
+		if (this.quality !== void 0 && this.quality !== this.appliedQuality) {
+			this.surface.setQuality(this.quality);
+			this.appliedQuality = this.quality;
+		}
+		if (this.params !== void 0) this.surface.setParams(this.params);
+		if (this.paused === true) this.surface.pause();
+		else this.surface.play();
+	}
+};
+/**
+* 注册 `<xh-background>`，并把内置效果一并注册进效果注册表——
+* 元素只认效果名字，注册表空着的话任何 effect 属性都解析不出来。
+*/
+function defineXhBackground() {
+	registerBuiltinEffects();
+	defineElement("xh-background", XhBackgroundElement, version);
+}
+//#endregion
+export { XhBackgroundElement, defineXhBackground };
+
+//# sourceMappingURL=backgrounds.js.map

package/dist/backgrounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backgrounds.js","names":["VERSION"],"sources":["../src/backgrounds.ts"],"sourcesContent":["// @xihan-ui/web-components/backgrounds —— 视觉层的 Web Components 适配。\n//\n// 与主入口和 /define 都分开：@xihan-ui/backgrounds 是可选 peer，不用视觉效果的应用不会\n// 因为装了本包而多出一个 WebGL 引擎。用之前先装 @xihan-ui/backgrounds。\n//\n// ```html\n// <xh-background effect=\"aurora\" quality=\"balanced\" style=\"height: 180px\">\n//   <h3>卡片标题</h3>\n// </xh-background>\n// ```\n\nimport type {\n  BackgroundEffect,\n  BackgroundQuality,\n  BackgroundSurface,\n  MorphOptions,\n  ParamValue,\n  PointCloud,\n} from '@xihan-ui/backgrounds'\nimport type { PropertyValues } from './reactive'\nimport { createBackgroundSurface, registerBuiltinEffects } from '@xihan-ui/backgrounds'\nimport { DIAGNOSTIC_CODES, reportDiagnostic } from '@xihan-ui/kernel'\nimport { version as VERSION } from '../package.json'\nimport { XhReactiveElement } from './reactive'\nimport { defineElement } from './runtime/registry'\n\n/** 属性缺席翻成 undefined（走引擎默认值），写成 \"false\" 才是关。 */\nconst optionalBool = {\n  fromAttribute: (value: string | null): boolean | undefined =>\n    value === null ? undefined : value !== 'false',\n}\n\n/**\n * `<xh-background>` —— 视觉画面宿主。\n *\n * 元素自身就是画布的容器：内容照常写在里面，效果铺在内容底下，\n * 画布是 pointer-events: none，不会挡住里面的交互。\n *\n * @customElement xh-background\n * @attr {string} effect - 效果名，须先注册（defineXhBackground 会把内置效果一并注册）\n * @attr {'auto'|'high'|'balanced'|'eco'} quality - 画质档位\n * @attr {object} params - 效果参数，JSON 对象\n * @attr {boolean} paused - 暂停绘制\n * @attr {boolean} pointer - 是否绑定指针事件，写 \"false\" 关闭\n * @attr {boolean} reduced-motion - 是否尊重系统的减弱动态效果，写 \"false\" 关闭\n * @attr {boolean} pause-offscreen - 滚出视口是否暂停，写 \"false\" 关闭\n */\nexport class XhBackgroundElement extends XhReactiveElement {\n  static override properties = {\n    effect: {},\n    quality: {},\n    params: { type: Object },\n    paused: { type: Boolean },\n    pointer: { converter: optionalBool },\n    reducedMotion: { attribute: 'reduced-motion', converter: optionalBool },\n    pauseOffscreen: { attribute: 'pause-offscreen', converter: optionalBool },\n  }\n\n  declare effect?: string | BackgroundEffect\n  declare quality?: BackgroundQuality\n  declare params?: Record<string, ParamValue>\n  declare paused?: boolean\n  declare pointer?: boolean\n  declare reducedMotion?: boolean\n  declare pauseOffscreen?: boolean\n\n  private surface: BackgroundSurface | null = null\n  private appliedEffect: string | BackgroundEffect | undefined\n  /** 记住上次生效的画质：setQuality 会重建着色器程序，不能每次更新都调一遍。 */\n  private appliedQuality: BackgroundQuality | undefined\n  /** 画面还没建起来时先收着，建好后补发。 */\n  private pendingCloud: { cloud: PointCloud, options?: MorphOptions } | null = null\n\n  /** 换点云。属性传不了二进制，只能用 JS 调。 */\n  setCloud(cloud: PointCloud, options?: MorphOptions): void {\n    if (this.surface === null)\n      this.pendingCloud = { cloud, options }\n    else\n      this.surface.setCloud(cloud, options)\n  }\n\n  /** 拿底层画面实例，用于自定义调度或调参。 */\n  getSurface(): BackgroundSurface | null {\n    return this.surface\n  }\n\n  override connectedCallback(): void {\n    // 自定义元素默认是行内元素，行内元素量不出高度，画布会一直是 0×0\n    if (getComputedStyle(this).display === 'inline')\n      this.style.display = 'block'\n    super.connectedCallback()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.surface?.destroy()\n    this.surface = null\n    this.appliedEffect = undefined\n  }\n\n  protected override updated(_changed: PropertyValues): void {\n    if (this.effect === undefined)\n      return\n\n    if (this.surface === null) {\n      try {\n        this.surface = createBackgroundSurface(this, {\n          effect: this.effect,\n          params: this.params,\n          quality: this.quality,\n          pointer: this.pointer,\n          autoplay: this.paused !== true,\n          respectReducedMotion: this.reducedMotion,\n          pauseOffscreen: this.pauseOffscreen,\n        })\n      }\n      catch (error) {\n        // 效果名没注册就把整页带崩不划算，报出来即可\n        reportDiagnostic({\n          code: DIAGNOSTIC_CODES.warn,\n          level: 'error',\n          message: `[visual] <xh-background> 创建失败：${(error as Error).message}`,\n        })\n        return\n      }\n      this.appliedEffect = this.effect\n      this.appliedQuality = this.quality\n      if (this.pendingCloud !== null) {\n        this.surface.setCloud(this.pendingCloud.cloud, this.pendingCloud.options)\n        this.pendingCloud = null\n      }\n      return\n    }\n\n    if (this.effect !== this.appliedEffect) {\n      this.surface.setEffect(this.effect)\n      this.appliedEffect = this.effect\n    }\n    if (this.quality !== undefined && this.quality !== this.appliedQuality) {\n      this.surface.setQuality(this.quality)\n      this.appliedQuality = this.quality\n    }\n    if (this.params !== undefined)\n      this.surface.setParams(this.params)\n    if (this.paused === true)\n      this.surface.pause()\n    else\n      this.surface.play()\n  }\n}\n\n/**\n * 注册 `<xh-background>`，并把内置效果一并注册进效果注册表——\n * 元素只认效果名字，注册表空着的话任何 effect 属性都解析不出来。\n */\nexport function defineXhBackground(): void {\n  registerBuiltinEffects()\n  defineElement('xh-background', XhBackgroundElement, VERSION)\n}\n"],"mappings":";;;;;;AA2BA,MAAM,eAAe,EACnB,gBAAgB,UACd,UAAU,OAAO,KAAA,IAAY,UAAU,QAC3C;;;;;;;;;;;;;;;;AAiBA,IAAa,sBAAb,cAAyC,kBAAkB;CACzD,OAAgB,aAAa;EAC3B,QAAQ,CAAC;EACT,SAAS,CAAC;EACV,QAAQ,EAAE,MAAM,OAAO;EACvB,QAAQ,EAAE,MAAM,QAAQ;EACxB,SAAS,EAAE,WAAW,aAAa;EACnC,eAAe;GAAE,WAAW;GAAkB,WAAW;EAAa;EACtE,gBAAgB;GAAE,WAAW;GAAmB,WAAW;EAAa;CAC1E;CAUA,UAA4C;CAC5C;;CAEA;;CAEA,eAA6E;;CAG7E,SAAS,OAAmB,SAA8B;EACxD,IAAI,KAAK,YAAY,MACnB,KAAK,eAAe;GAAE;GAAO;EAAQ;OAErC,KAAK,QAAQ,SAAS,OAAO,OAAO;CACxC;;CAGA,aAAuC;EACrC,OAAO,KAAK;CACd;CAEA,oBAAmC;EAEjC,IAAI,iBAAiB,IAAI,CAAC,CAAC,YAAY,UACrC,KAAK,MAAM,UAAU;EACvB,MAAM,kBAAkB;CAC1B;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAK,SAAS,QAAQ;EACtB,KAAK,UAAU;EACf,KAAK,gBAAgB,KAAA;CACvB;CAEA,QAA2B,UAAgC;EACzD,IAAI,KAAK,WAAW,KAAA,GAClB;EAEF,IAAI,KAAK,YAAY,MAAM;GACzB,IAAI;IACF,KAAK,UAAU,wBAAwB,MAAM;KAC3C,QAAQ,KAAK;KACb,QAAQ,KAAK;KACb,SAAS,KAAK;KACd,SAAS,KAAK;KACd,UAAU,KAAK,WAAW;KAC1B,sBAAsB,KAAK;KAC3B,gBAAgB,KAAK;IACvB,CAAC;GACH,SACO,OAAO;IAEZ,iBAAiB;KACf,MAAM,iBAAiB;KACvB,OAAO;KACP,SAAS,iCAAkC,MAAgB;IAC7D,CAAC;IACD;GACF;GACA,KAAK,gBAAgB,KAAK;GAC1B,KAAK,iBAAiB,KAAK;GAC3B,IAAI,KAAK,iBAAiB,MAAM;IAC9B,KAAK,QAAQ,SAAS,KAAK,aAAa,OAAO,KAAK,aAAa,OAAO;IACxE,KAAK,eAAe;GACtB;GACA;EACF;EAEA,IAAI,KAAK,WAAW,KAAK,eAAe;GACtC,KAAK,QAAQ,UAAU,KAAK,MAAM;GAClC,KAAK,gBAAgB,KAAK;EAC5B;EACA,IAAI,KAAK,YAAY,KAAA,KAAa,KAAK,YAAY,KAAK,gBAAgB;GACtE,KAAK,QAAQ,WAAW,KAAK,OAAO;GACpC,KAAK,iBAAiB,KAAK;EAC7B;EACA,IAAI,KAAK,WAAW,KAAA,GAClB,KAAK,QAAQ,UAAU,KAAK,MAAM;EACpC,IAAI,KAAK,WAAW,MAClB,KAAK,QAAQ,MAAM;OAEnB,KAAK,QAAQ,KAAK;CACtB;AACF;;;;;AAMA,SAAgB,qBAA2B;CACzC,uBAAuB;CACvB,cAAc,iBAAiB,qBAAqBA,OAAO;AAC7D"}