@longzai-intelligence-liquid-glass/css-backdrop 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+# @longzai-intelligence-liquid-glass/css-backdrop
+
+Liquid Glass CSS backdrop-filter 降级渲染后端。
+
+## 用法
+
+```bash
+bun run --cwd packages/css-backdrop lint      # 代码检查
+bun run --cwd packages/css-backdrop typecheck # 类型检查（tsgo）
+bun run --cwd packages/css-backdrop test      # 单元测试
+bun run --cwd packages/css-backdrop build     # 构建（lzi-builder → dist）
+```

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+import { LiquidGlassParams, LiquidGlassParamsInput, LiquidGlassRenderer, LiquidGlassSize, RendererCapability } from "@longzai-intelligence-liquid-glass/core";
+//#region src/style-object.utils.d.ts
+/**
+ * CSS 样式对象（属性名 kebab-case，值字符串）
+ */
+type CssBackdropStyles = {
+  /**
+   * 样式属性 → 值
+   */
+  [property: string]: string;
+};
+/**
+ * 生成液态玻璃降级样式对象
+ *
+ * @param params - 液态玻璃参数
+ * @returns CSS 样式对象
+ */
+declare function createCssBackdropStyles(params: LiquidGlassParams): CssBackdropStyles;
+//#endregion
+//#region src/css-backdrop-renderer.utils.d.ts
+/**
+ * 渲染上下文（构造入参）
+ */
+type CssBackdropRendererContext = {
+  /**
+   * 初始参数
+   */
+  params: LiquidGlassParams;
+  /**
+   * 初始尺寸
+   */
+  size: LiquidGlassSize;
+};
+/**
+ * CSS 降级渲染器
+ */
+declare class CssBackdropRenderer implements LiquidGlassRenderer<HTMLElement> {
+  /**
+   * 后端标识
+   */
+  readonly backend: 'css-backdrop';
+  /**
+   * 宿主元素（mount 后可用）
+   */
+  private host;
+  /**
+   * 当前参数
+   */
+  private params;
+  /**
+   * 构造渲染器
+   *
+   * @param context - 渲染上下文（初始参数与尺寸）
+   */
+  constructor(context: CssBackdropRendererContext);
+  /**
+   * 挂载到 DOM 元素
+   *
+   * @param target - 宿主元素
+   */
+  mount(target: HTMLElement): void;
+  /**
+   * 热更新参数
+   *
+   * @param params - 完整参数
+   */
+  update(params: LiquidGlassParams): void;
+  /**
+   * 尺寸变化（降级路线无尺寸相关状态，空实现）
+   *
+   * @param _size - 新尺寸（未使用）
+   */
+  resize(_size: LiquidGlassSize): void;
+  /**
+   * 获取能力描述
+   *
+   * @returns 能力描述
+   */
+  getCapabilities(): RendererCapability;
+  /**
+   * 卸载并清理样式（幂等）
+   */
+  unmount(): void;
+  /**
+   * 应用当前参数样式
+   */
+  private apply;
+}
+//#endregion
+//#region src/create.utils.d.ts
+/**
+ * 命令式创建：在目标元素上应用 CSS 降级玻璃效果
+ *
+ * @param element - 宿主元素
+ * @param input - 参数输入（预设 + 覆盖）
+ * @returns 渲染器实例（调用方持有并负责 unmount）
+ */
+declare function createCssBackdropGlass(element: HTMLElement, input?: LiquidGlassParamsInput): CssBackdropRenderer;
+//#endregion
+//#region src/support.utils.d.ts
+/**
+ * CSS 降级路线支持检测
+ */
+/**
+ * 支持检测结果
+ */
+type CssBackdropSupport = {
+  /**
+   * 是否支持降级路线（backdrop-filter 或 -webkit- 前缀）
+   */
+  supported: boolean;
+  /**
+   * 不支持原因（支持时为空字符串）
+   */
+  reason: string;
+};
+/**
+ * 检测当前环境对 backdrop-filter 的支持
+ *
+ * @returns 支持检测结果
+ */
+declare function detectCssBackdropSupport(): CssBackdropSupport;
+//#endregion
+export { CssBackdropRenderer, type CssBackdropStyles, type CssBackdropSupport, createCssBackdropGlass, createCssBackdropStyles, detectCssBackdropSupport };

package/dist/index.js

@@ -0,0 +1 @@
+import{resolveParams as e}from"@longzai-intelligence-liquid-glass/core";function t(e,t,n,r){return`rgba(${Math.round(e*255)}, ${Math.round(t*255)}, ${Math.round(n*255)}, ${r.toFixed(3)})`}function n(e){let n=1+e.frost*1.5,r=`blur(${((e.blur+e.refraction*2)*n).toFixed(2)}px) saturate(${e.saturation}) brightness(${e.brightness})`;return{"backdrop-filter":r,"-webkit-backdrop-filter":r,background:t(e.tint.r,e.tint.g,e.tint.b,e.tint.a),"border-radius":e.shape===`circle`?`50%`:`${e.cornerRadius}px`,"box-shadow":[`inset 1.5px 1.5px 0 rgba(255, 255, 255, ${e.specular.toFixed(3)})`,`inset -1.5px -1.5px 0 rgba(255, 255, 255, ${(e.specular*.5).toFixed(3)})`,`0 8px 32px rgba(0, 0, 0, 0.12)`].join(`, `)}}var r=class{backend=`css-backdrop`;host=null;params;constructor(e){this.params=e.params}mount(e){this.host=e,this.apply()}update(e){this.params=e,this.apply()}resize(e){}getCapabilities(){return{backend:`css-backdrop`,supportsRefraction:!1,supportsDispersion:!1,supportsBlur:!0,supportsSpecular:!0,supportsDomBackdrop:!0}}unmount(){if(this.host!==null){for(let e of[`backdrop-filter`,`-webkit-backdrop-filter`,`background`,`border-radius`,`box-shadow`])this.host.style.removeProperty(e);this.host=null}}apply(){if(this.host===null)return;let e=n(this.params);for(let[t,n]of Object.entries(e))this.host.style.setProperty(t,n)}};function i(t,n){let i=new r({params:e(n),size:{width:0,height:0}});return i.mount(t),i}function a(){return typeof window>`u`||typeof CSS>`u`?{supported:!1,reason:`SSR 或非浏览器环境`}:typeof CSS.supports==`function`?CSS.supports(`backdrop-filter`,`blur(1px)`)||CSS.supports(`-webkit-backdrop-filter`,`blur(1px)`)?{supported:!0,reason:``}:{supported:!1,reason:`backdrop-filter 不受支持`}:{supported:!0,reason:``}}export{r as CssBackdropRenderer,i as createCssBackdropGlass,n as createCssBackdropStyles,a as detectCssBackdropSupport};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@longzai-intelligence-liquid-glass/css-backdrop",
+  "version": "0.0.1",
+  "description": "Liquid Glass CSS backdrop-filter 降级渲染后端",
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "lzi-builder",
+    "build:prod": "NODE_ENV=production bun run build",
+    "prepublishOnly": "bun run build:prod",
+    "typecheck": "bun run typecheck:app && bun run typecheck:node && bun run typecheck:test",
+    "typecheck:app": "lzi-tsgo typecheck tsconfig/app.json",
+    "typecheck:node": "lzi-tsgo typecheck tsconfig/node.json",
+    "typecheck:test": "lzi-tsgo typecheck tsconfig/test.json",
+    "lint": "oxlint && oxfmt --check",
+    "lint:fix": "oxlint --fix && oxfmt",
+    "test": "lzi-bun-cli test",
+    "test:watch": "lzi-bun-cli test --watch",
+    "test:coverage": "lzi-bun-cli test --coverage",
+    "clean": "lzi-dev-cli clean"
+  },
+  "dependencies": {
+    "@longzai-intelligence-liquid-glass/core": "0.0.1"
+  },
+  "packageManager": "bun@1.3.14"
+}