@longzai-intelligence-liquid-glass/react-native 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+# @longzai-intelligence-liquid-glass/react-native
+
+Liquid Glass React Native 适配层：Skia RuntimeShader 真折射。
+
+## 用法
+
+```bash
+bun run --cwd packages/adapters/react-native lint      # 代码检查
+bun run --cwd packages/adapters/react-native typecheck # 类型检查（tsgo）
+bun run --cwd packages/adapters/react-native test      # 单元测试
+bun run --cwd packages/adapters/react-native build     # 构建（lzi-builder → dist）
+```

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { LiquidGlassParamsInput } from "@longzai-intelligence-liquid-glass/core";
+//#region src/liquid-glass-view.d.ts
+/**
+ * LiquidGlassView 属性
+ */
+type LiquidGlassViewProps = {
+  /**
+   * 视图宽度（px）
+   */
+  width: number;
+  /**
+   * 视图高度（px）
+   */
+  height: number;
+  /**
+   * 强制使用降级路线（对比演示用）
+   */
+  fallback?: boolean;
+  /**
+   * 叠加在玻璃之上的内容（Skia 图层）
+   */
+  children?: React.ReactNode;
+} & LiquidGlassParamsInput;
+/**
+ * LiquidGlassView 组件
+ *
+ * @param props - 组件属性
+ * @returns 玻璃视图 JSX
+ */
+declare function LiquidGlassView(props: LiquidGlassViewProps): import("react").JSX.Element;
+//#endregion
+//#region src/refraction-shader.constants.d.ts
+/**
+ * SkSL 折射着色器
+ *
+ * Kyant0/AndroidLiquidGlass 的 AGSL 折射着色器移植（AGSL 源自 SkSL，语义一致）：
+ * sdRoundedRect + circleMap 弧面高度 + SDF 梯度法线 + R/B 对称色散 + tint。
+ * uniform 与 core 参数模型对齐，由 <LiquidGlassView> 驱动。
+ */
+/**
+ * 折射着色器 SkSL 源码
+ *
+ * uniforms：
+ * - halfSize：形状半宽高（px）
+ * - radius：圆角半径（px）
+ * - refraction：基础折射强度 0..1
+ * - refractionHeight：折射带宽度（px）
+ * - bevel：bevel 强度 0..1
+ * - dispersion：色散强度 0..1
+ * - tint：着色（rgba）
+ */
+declare const REFRACTION_SKSL = "\nuniform shader content;\nuniform float2 halfSize;\nuniform float radius;\nuniform float refraction;\nuniform float refractionHeight;\nuniform float bevel;\nuniform float dispersion;\nuniform float4 tint;\n\n/**\n * 圆角矩形 SDF（局部坐标，形状中心为原点）\n */\nfloat sdRoundBox(float2 p, float2 b, float r) {\n  float2 q = abs(p) - b + float2(r);\n  float outside = length(max(q, float2(0.0)));\n  float inside = min(max(q.x, q.y), 0.0);\n  return outside + inside - r;\n}\n\n/**\n * SDF 数值梯度 → 单位外法线\n */\nfloat2 sdNormal(float2 p, float2 b, float r) {\n  float e = 1.0;\n  float dx = sdRoundBox(p + float2(e, 0.0), b, r) - sdRoundBox(p - float2(e, 0.0), b, r);\n  float dy = sdRoundBox(p + float2(0.0, e), b, r) - sdRoundBox(p - float2(0.0, e), b, r);\n  return normalize(float2(dx, dy) + float2(1e-6));\n}\n\n/**\n * circleMap：归一化深度 → 弧面高度\n */\nfloat circleMap(float x) {\n  float c = clamp(x, 0.0, 1.0);\n  return 1.0 - sqrt(1.0 - c * c);\n}\n\nhalf4 main(float2 coord) {\n  float2 p = coord - halfSize;\n  float sdf = sdRoundBox(p, halfSize, radius);\n  float2 normal = sdNormal(p, halfSize, radius);\n\n  float f = clamp(1.0 + sdf / max(refractionHeight, 1e-4), 0.0, 1.0);\n  float height = refraction * circleMap(f) + bevel * pow(f, 10.0);\n  float2 offset = -normal * height * refractionHeight;\n\n  // R/B 沿折射方向对称缩放（蓝端更大，liquidGL 色散策略）\n  half4 rSample = content.eval(coord + offset * (1.0 - 0.5 * dispersion));\n  half4 gSample = content.eval(coord + offset);\n  half4 bSample = content.eval(coord + offset * (1.0 + 0.7 * dispersion));\n\n  half3 color = half3(rSample.r, gSample.g, bSample.b);\n  color = mix(color, half3(tint.rgb), tint.a);\n\n  float mask = 1.0 - smoothstep(-1.5, 1.5, sdf);\n  return half4(color, mask);\n}\n";
+//#endregion
+export { LiquidGlassView, type LiquidGlassViewProps, REFRACTION_SKSL };

package/dist/index.js

@@ -0,0 +1,59 @@
+import{resolveParams as e}from"@longzai-intelligence-liquid-glass/core";import{BackdropBlur as t,BackdropFilter as n,Canvas as r,RoundedRect as i,RuntimeShader as a,Skia as o}from"@shopify/react-native-skia";import{useMemo as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=`
+uniform shader content;
+uniform float2 halfSize;
+uniform float radius;
+uniform float refraction;
+uniform float refractionHeight;
+uniform float bevel;
+uniform float dispersion;
+uniform float4 tint;
+
+/**
+ * 圆角矩形 SDF（局部坐标，形状中心为原点）
+ */
+float sdRoundBox(float2 p, float2 b, float r) {
+  float2 q = abs(p) - b + float2(r);
+  float outside = length(max(q, float2(0.0)));
+  float inside = min(max(q.x, q.y), 0.0);
+  return outside + inside - r;
+}
+
+/**
+ * SDF 数值梯度 → 单位外法线
+ */
+float2 sdNormal(float2 p, float2 b, float r) {
+  float e = 1.0;
+  float dx = sdRoundBox(p + float2(e, 0.0), b, r) - sdRoundBox(p - float2(e, 0.0), b, r);
+  float dy = sdRoundBox(p + float2(0.0, e), b, r) - sdRoundBox(p - float2(0.0, e), b, r);
+  return normalize(float2(dx, dy) + float2(1e-6));
+}
+
+/**
+ * circleMap：归一化深度 → 弧面高度
+ */
+float circleMap(float x) {
+  float c = clamp(x, 0.0, 1.0);
+  return 1.0 - sqrt(1.0 - c * c);
+}
+
+half4 main(float2 coord) {
+  float2 p = coord - halfSize;
+  float sdf = sdRoundBox(p, halfSize, radius);
+  float2 normal = sdNormal(p, halfSize, radius);
+
+  float f = clamp(1.0 + sdf / max(refractionHeight, 1e-4), 0.0, 1.0);
+  float height = refraction * circleMap(f) + bevel * pow(f, 10.0);
+  float2 offset = -normal * height * refractionHeight;
+
+  // R/B 沿折射方向对称缩放（蓝端更大，liquidGL 色散策略）
+  half4 rSample = content.eval(coord + offset * (1.0 - 0.5 * dispersion));
+  half4 gSample = content.eval(coord + offset);
+  half4 bSample = content.eval(coord + offset * (1.0 + 0.7 * dispersion));
+
+  half3 color = half3(rSample.r, gSample.g, bSample.b);
+  color = mix(color, half3(tint.rgb), tint.a);
+
+  float mask = 1.0 - smoothstep(-1.5, 1.5, sdf);
+  return half4(color, mask);
+}
+`;let d=null,f=!1;function p(){if(!f){f=!0;try{d=o.RuntimeEffect.Make(u)}catch{d=null}}return d}function m(o){let{width:u,height:d,fallback:f=!1,children:m,...h}=o,g=s(()=>e(h),[h]),_=g.shape===`circle`?Math.min(u,d)/2:Math.min(g.cornerRadius,Math.min(u,d)/2-.5),v=s(()=>({halfSize:[u/2,d/2],radius:_,refraction:g.refraction,refractionHeight:g.refractionHeight,bevel:g.bevel,dispersion:g.dispersion,tint:[g.tint.r,g.tint.g,g.tint.b,g.tint.a]}),[u,d,_,g]),y=p(),b=f||y===null,x=g.blur+g.refraction*2+g.frost*12,S=b?`rgba(${Math.round(g.tint.r*255)}, ${Math.round(g.tint.g*255)}, ${Math.round(g.tint.b*255)}, ${g.tint.a})`:`transparent`;return l(r,{style:{width:u,height:d},children:[c(n,{filter:b?c(t,{blur:x}):c(a,{source:y,uniforms:v}),children:c(i,{x:0,y:0,width:u,height:d,r:_,color:S})}),m]})}export{m as LiquidGlassView,u as REFRACTION_SKSL};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@longzai-intelligence-liquid-glass/react-native",
+  "version": "0.0.1",
+  "description": "Liquid Glass React Native 绑定（Skia RuntimeShader）",
+  "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"
+  },
+  "devDependencies": {
+    "@shopify/react-native-skia": "^1.5.0",
+    "@types/react": "^19.2.15",
+    "@types/react-native": "^0.73.0"
+  },
+  "peerDependencies": {
+    "@shopify/react-native-skia": "^1.5.0",
+    "react": "^19.2.6",
+    "react-native": "^0.79.0"
+  },
+  "packageManager": "bun@1.3.14"
+}