@unif/react-native-chat 4.3.2 → 4.4.0

package/lib/typescript/src/components/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAS,CAAC;AAE5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BAoL1C"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAS,CAAC;AAE5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BA6L1C"}

package/lib/typescript/src/components/Message/styles.d.ts

@@ -31,7 +31,12 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
         paddingHorizontal: number;
         paddingVertical: number;
         borderRadius: number;
-        backgroundColor: string;
+    };
+    material: {
+        borderRadius: number;
+    };
+    waitingMaterial: {
+        borderTopLeftRadius: number;
     };
     outgoing: {
         backgroundColor: string;

package/lib/typescript/src/components/Message/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuE5C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwE5C,CAAC"}

package/lib/typescript/src/components/MessageList/useMessageListScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageListScroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/useMessageListScroll.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,cAAc,EACd,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAEV,wBAAwB,EAIxB,gBAAgB,EAChB,wBAAwB,EACzB,MAAM,YAAS,CAAC;AAEjB,UAAU,sBAAsB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC9C,gBAAgB,CAAC,CAAC,CAAC,EACnB,iBAAiB,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CACtE;IACC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACvC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,oBAAoB,CAAC,EAAE,cAAc,CAAC;IACtC,oBAAoB,CAAC,EAAE,cAAc,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,yBAAyB,IAAI,IAAI,CAAC;CACnC;AAaD,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,YAAoC,EACpC,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,SAAS,EACT,oBAAoB,EACpB,yBAAyB,GAC1B,EAAE,sBAAsB,CAAC,CAAC,CAAC;;;wBA8JlB,MAAM,YAAW,wBAAwB;wBA5CzC,MAAM,SAAS,MAAM,QAAQ,eAAe;wBAsB5C,MAAM,SAAS,MAAM,SAAS,MAAM;yBAUJ,MAAM,SAAS,MAAM;4BAMlB,iBAAiB;qCAkP/C,UAAU,CACjB,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CACvD,CAAC,CAAC,CAAC;4BAnLI,wBAAwB;4CAsIJ,iBAAiB;kCAQtC,MAAM,UAAU,MAAM;sBA3CvB,oBAAoB,CAAC,iBAAiB,CAAC;;;6BA2DvC,oBAAoB,CAAC,iBAAiB,CAAC;iCAUvC,oBAAoB,CAAC,iBAAiB,CAAC;EA+ClD"}
+{"version":3,"file":"useMessageListScroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/useMessageListScroll.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,cAAc,EACd,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAEV,wBAAwB,EAIxB,gBAAgB,EAChB,wBAAwB,EACzB,MAAM,YAAS,CAAC;AAEjB,UAAU,sBAAsB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC9C,gBAAgB,CAAC,CAAC,CAAC,EACnB,iBAAiB,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CACtE;IACC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACvC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,oBAAoB,CAAC,EAAE,cAAc,CAAC;IACtC,oBAAoB,CAAC,EAAE,cAAc,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,yBAAyB,IAAI,IAAI,CAAC;CACnC;AAaD,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,YAAoC,EACpC,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,SAAS,EACT,oBAAoB,EACpB,yBAAyB,GAC1B,EAAE,sBAAsB,CAAC,CAAC,CAAC;;;wBA+JlB,MAAM,YAAW,wBAAwB;wBA5CzC,MAAM,SAAS,MAAM,QAAQ,eAAe;wBAsB5C,MAAM,SAAS,MAAM,SAAS,MAAM;yBAUJ,MAAM,SAAS,MAAM;4BAMlB,iBAAiB;qCAkP/C,UAAU,CACjB,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CACvD,CAAC,CAAC,CAAC;4BAnLI,wBAAwB;4CAsIJ,iBAAiB;kCAQtC,MAAM,UAAU,MAAM;sBA3CvB,oBAAoB,CAAC,iBAAiB,CAAC;;;6BA2DvC,oBAAoB,CAAC,iBAAiB,CAAC;iCAUvC,oBAAoB,CAAC,iBAAiB,CAAC;EA+ClD"}

package/lib/typescript/src/components/MessageList/webPrependAnchor/useWebPrependAnchor.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebPrependAnchor.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageList/webPrependAnchor/useWebPrependAnchor.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAI1B,sBAAsB,EAEvB,MAAM,YAAS,CAAC;AAqDjB,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,aAAa,EACb,IAAI,GACL,EAAE,0BAA0B,GAAG,sBAAsB,CAmQrD"}
+{"version":3,"file":"useWebPrependAnchor.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageList/webPrependAnchor/useWebPrependAnchor.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAI1B,sBAAsB,EAEvB,MAAM,YAAS,CAAC;AAqDjB,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,aAAa,EACb,IAAI,GACL,EAAE,0BAA0B,GAAG,sBAAsB,CAqQrD"}

package/lib/typescript/src/components/Process/Process.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Process.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/Process.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,YAAS,CAAC;AAqCzD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8K9D"}
+{"version":3,"file":"Process.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/Process.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,YAAS,CAAC;AAqCzD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqL9D"}

package/lib/typescript/src/components/Process/styles.d.ts

@@ -46,8 +46,13 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
         paddingHorizontal: number;
         paddingVertical: number;
     };
+    timelineMaterial: {
+        borderRadius: number;
+    };
+    material: {
+        borderRadius: number;
+    };
     timelineRoot: {
-        backgroundColor: string;
         borderRadius: number;
         padding: number;
     };
@@ -154,7 +159,6 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
-        backgroundColor: string;
     };
     heading: {
         flexDirection: "row";
@@ -211,7 +215,6 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
     details: {
         padding: number;
         borderRadius: number;
-        backgroundColor: string;
     };
     actions: {
         flexDirection: "row";

package/lib/typescript/src/components/Process/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4L5C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2L5C,CAAC"}

package/lib/typescript/src/components/Sources/Sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sources.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sources/Sources.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,YAAS,CAAC;AAExD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAA6B,EAC7B,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA4DzC"}
+{"version":3,"file":"Sources.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sources/Sources.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,YAAS,CAAC;AAExD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAA6B,EAC7B,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAqEzC"}

package/lib/typescript/src/components/Sources/styles.d.ts

@@ -13,18 +13,16 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
     };
     item: {
         minHeight: 44;
-        flexDirection: "row";
-        alignItems: "flex-start";
-        gap: number;
         padding: number;
         borderRadius: number;
-        backgroundColor: string;
     };
-    pressed: {
-        opacity: number;
+    material: {
+        borderRadius: number;
     };
-    disabled: {
-        opacity: number;
+    itemContent: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        gap: number;
     };
     label: {
         minWidth: number;

package/lib/typescript/src/components/Sources/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sources/styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+C5C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sources/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2C5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-chat",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "Unif React Native 聊天组件：消息、输入、附件和交互展示",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -32,7 +32,8 @@
     "web": "yarn workspace @unif/react-native-chat-website start",
     "lint": "eslint \"**/*.{js,jsx,mjs,ts,tsx}\"",
     "format:check": "prettier --check .",
-    "website": "yarn workspace @unif/react-native-chat-website"
+    "website": "yarn workspace @unif/react-native-chat-website",
+    "test:native": "python3 scripts/test-native-hosts.py"
   },
   "keywords": [
     "react-native",
@@ -61,15 +62,15 @@
     "@eslint/eslintrc": "^3.3.6",
     "@eslint/js": "^9.39.5",
     "@jest/globals": "^30.3.0",
-    "@react-native/babel-preset": "0.86.3",
-    "@react-native/eslint-config": "0.86.3",
-    "@react-native/jest-preset": "0.86.3",
-    "@react-native/metro-config": "0.86.3",
+    "@react-native/babel-preset": "0.88.0",
+    "@react-native/eslint-config": "0.88.0",
+    "@react-native/jest-preset": "0.88.0",
+    "@react-native/metro-config": "0.88.0",
     "@release-it/conventional-changelog": "^12.0.0",
     "@testing-library/react-native": "13.3.3",
     "@types/react": "^19.2.0",
-    "@unif/react-native-design": "^1.4.0",
-    "@unif/react-native-icons": "^0.3.0",
+    "@unif/react-native-design": "^1.7.0",
+    "@unif/react-native-icons": "^0.4.1",
     "commitlint": "^21.2.1",
     "del-cli": "^7.0.0",
     "eslint": "^9.39.5",
@@ -80,24 +81,24 @@
     "jest": "^30.3.0",
     "lefthook": "^2.1.10",
     "prettier": "^3.9.6",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-native": "0.86.3",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-native": "0.88.0",
     "react-native-builder-bob": "^0.43.0",
     "react-native-gesture-handler": "3.1.0",
-    "react-native-reanimated": "4.6.0",
+    "react-native-reanimated": "4.7.1",
     "react-native-reanimated-carousel": "5.0.0",
     "react-native-safe-area-context": "5.8.0",
-    "react-native-svg": "15.15.5",
-    "react-native-web": "~0.21.2",
-    "react-native-worklets": "0.12.1",
-    "react-test-renderer": "19.2.3",
+    "react-native-svg": "15.16.0",
+    "react-native-web": "0.21.4",
+    "react-native-worklets": "0.13.0",
+    "react-test-renderer": "19.3.0",
     "release-it": "^21.0.1",
     "turbo": "^2.10.8",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@unif/react-native-design": "^1.4.0",
+    "@unif/react-native-design": "^1.7.0",
     "@unif/react-native-icons": "^0.3.0 || ^0.4.0",
     "react": ">=19.2.3 <20.0.0",
     "react-native": ">=0.86.0",

package/src/components/Attachments/AttachmentItem.tsx

@@ -223,6 +223,7 @@ export function AttachmentItem({
     );
     return (
       <View style={[styles.item, styles.row, mixed && styles.mixedRow]}>
+        <GlassLayer style={styles.itemMaterial} />
         {previewable && !retry ? (
           <Pressable
             style={[styles.rowBody, mixed && styles.mixedRowBody]}
@@ -240,6 +241,7 @@ export function AttachmentItem({
         <View style={styles.actions}>
           {previewable && retry ? (
             <IconButton
+              variant="glass"
               icon={EyeOutlined}
               size="sm"
               accessibilityLabel={`预览${name}`}
@@ -248,6 +250,7 @@ export function AttachmentItem({
           ) : null}
           {removable ? (
             <IconButton
+              variant="glass"
               icon={CloseOutlined}
               size="sm"
               accessibilityLabel={`移除${name}`}
@@ -380,6 +383,7 @@ export function AttachmentItem({
       {separatePreview ? (
         <View style={[styles.previewAction, { width: imageSize }]}>
           <IconButton
+            variant="glass"
             icon={EyeOutlined}
             size="sm"
             accessibilityLabel={`预览${name}`}

package/src/components/Attachments/styles.ts

@@ -51,8 +51,8 @@ export const createStyles = (colors: ColorTokens) =>
       borderWidth: 1,
       borderColor: colors.outline,
       borderRadius: radius.md,
-      backgroundColor: colors.surface,
     },
+    itemMaterial: { borderRadius: radius.md },
     row: { width: '100%', flexDirection: 'row', alignItems: 'center' },
     rowBody: {
       flex: 1,
@@ -68,7 +68,6 @@ export const createStyles = (colors: ColorTokens) =>
       paddingHorizontal: space[3],
       borderWidth: StyleSheet.hairlineWidth,
       borderRadius: radius.md,
-      backgroundColor: colors.surfaceContainerHigh,
     },
     content: { minWidth: 0, flexShrink: 1 },
     rowContent: { flex: 1 },

package/src/components/Composer/Composer.tsx

@@ -272,8 +272,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
                       setMenuOpen(false);
                       if (primaryAction.kind === 'send')
                         primaryAction.onPress(value);
-                      else if (primaryAction.kind === 'stop')
-                        primaryAction.onPress();
+                      else primaryAction.onPress();
                     }}
                   />
                 ) : null}

package/src/components/Confirmation/Confirmation.tsx

@@ -6,6 +6,7 @@ import {
 import { Text, View } from 'react-native';
 import {
   Button,
+  GlassLayer,
   Spinner,
   useColors,
   useThemedStyles,
@@ -56,6 +57,7 @@ export function Confirmation({
         : WarningOutlined;
   return (
     <View style={[styles.root, { borderColor }, style]} testID={testID}>
+      <GlassLayer style={styles.material} />
       <View style={styles.heading}>
         {status === 'processing' ? (
           <Spinner size={14} color={tint} />

package/src/components/Confirmation/styles.ts

@@ -14,8 +14,8 @@ export const createStyles = (colors: ColorTokens) =>
       borderWidth: 2,
       borderColor: colors.outline,
       borderRadius: radius.lg,
-      backgroundColor: colors.surface,
     },
+    material: { borderRadius: radius.lg },
     heading: {
       flexDirection: 'row',
       alignItems: 'center',

package/src/components/Feedback/Feedback.tsx

@@ -1,6 +1,7 @@
 import { Text, View } from 'react-native';
 import {
   Button,
+  GlassLayer,
   r,
   useColors,
   useThemedStyles,
@@ -50,14 +51,12 @@ export function Feedback({
 
   const Glyph = FEEDBACK_TONE_ICONS[tone];
   return (
-    <View
-      style={[
-        styles.root,
-        { backgroundColor: toneColors.backgroundColor },
-        style,
-      ]}
-      testID={testID}
-    >
+    <View style={[styles.root, style]} testID={testID}>
+      <GlassLayer
+        style={styles.material}
+        tintColor={toneColors.backgroundColor}
+        fallbackColor={toneColors.backgroundColor}
+      />
       <Glyph size={r(18)} color={toneColors.iconColor} />
       <View style={styles.content}>
         <View accessible accessibilityLabel={accessibilityLabel}>
@@ -78,7 +77,7 @@ export function Feedback({
               loading={action.loading}
               accessibilityHint={action.accessibilityHint}
               size="sm"
-              variant="outline"
+              variant="secondary"
             />
           </View>
         ) : null}

package/src/components/Feedback/styles.ts

@@ -11,6 +11,7 @@ export const createStyles = (colors: ColorTokens) =>
       padding: space[4],
       borderRadius: radius.lg,
     },
+    material: { borderRadius: radius.lg },
     content: {
       flex: 1,
       gap: space[1],

package/src/components/Message/MarkdownContent/styles.ts

@@ -13,7 +13,7 @@ const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
     text: body,
     paragraph: { paddingVertical: 0, paddingBottom: r(6) },
     em: { color: textColor, fontStyle: 'italic' },
-    strong: { color: textColor, fontWeight: 'bold' },
+    strong: { color: textColor, fontWeight: fw.bold },
     strikethrough: { color: textColor, textDecorationLine: 'line-through' },
     link: {
       color: outgoing ? colors.onPrimary : colors.primary,

package/src/components/Message/Message.tsx

@@ -2,6 +2,7 @@ import { AlertOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
 import {
   Button,
+  GlassLayer,
   IconButton,
   useThemedStyles,
   useColors,
@@ -59,6 +60,15 @@ export function Message(props: MessageProps) {
   ];
   const content = (
     <>
+      {surface === 'outlined' ||
+      (surface === 'bubble' && placement === 'start') ? (
+        <GlassLayer
+          style={[
+            styles.material,
+            waiting && surface === 'bubble' && styles.waitingMaterial,
+          ]}
+        />
+      ) : null}
       {header}
       {props.text !== undefined ? (
         props.format === 'markdown' ? (
@@ -145,7 +155,7 @@ export function Message(props: MessageProps) {
             <IconButton
               icon={AlertOutlined}
               size="sm"
-              variant="ghost"
+              variant="glass"
               color={colors.error}
               style={styles.failureAction}
               accessibilityLabel={failedAction.label}
@@ -166,7 +176,7 @@ export function Message(props: MessageProps) {
                   key={action.id}
                   icon={action.icon}
                   size="sm"
-                  variant="ghost"
+                  variant="glass"
                   color={colors.foregroundSubtle}
                   accessibilityLabel={action.label}
                   accessibilityHint={action.accessibilityHint}

package/src/components/Message/styles.ts

@@ -24,8 +24,9 @@ export const createStyles = (colors: ColorTokens) =>
       paddingHorizontal: space[5],
       paddingVertical: space[4],
       borderRadius: radius['2xl'],
-      backgroundColor: colors.surface,
     },
+    material: { borderRadius: radius['2xl'] },
+    waitingMaterial: { borderTopLeftRadius: 0 },
     outgoing: { backgroundColor: colors.primary },
     outgoingText: { color: colors.onPrimary },
     outlined: {

package/src/components/MessageList/useMessageListScroll.ts

@@ -81,7 +81,6 @@ export function useMessageListScroll<T>({
   const layoutRevision = useRef(0);
   const footerHeight = useRef(0);
   if (!hasFooter) footerHeight.current = 0;
-  const layoutChanged = useRef<() => void>(() => {});
   const [anchorMinimumHeight, setAnchorMinimumHeight] = useState<number>();
   const minimumRef = useRef<number | undefined>(undefined);
   const threshold = Number.isFinite(endThreshold)
@@ -169,6 +168,8 @@ export function useMessageListScroll<T>({
     publishPosition();
   }, [listRef, publishPosition, ready]);
 
+  const layoutChanged = useRef(applyAnchor);
+
   const onCellLayout = useCallback(
     (key: string, index: number, cell: LayoutRectangle) => {
       if (

package/src/components/MessageList/webPrependAnchor/useWebPrependAnchor.web.ts

@@ -153,9 +153,10 @@ export function useWebPrependAnchor({
   );
 
   const correctPrepend = useCallback(
-    (connection: WebPrependAnchorConnection) => {
-      const preservation = preservationRef.current;
-      if (!preservation) return;
+    (
+      connection: WebPrependAnchorConnection,
+      preservation: WebAnchorSnapshot
+    ) => {
       const anchor = findRow(connection.scroller, preservation.id);
       if (anchor) {
         const viewport = connection.scroller.getBoundingClientRect();
@@ -189,7 +190,8 @@ export function useWebPrependAnchor({
     const connection = connectionRef.current;
     if (!connection) return;
     refreshResizeTargets(connection);
-    if (preservingPrependRef.current) correctPrepend(connection);
+    const preservation = preservationRef.current;
+    if (preservation) correctPrepend(connection, preservation);
     else captureAnchor(connection);
   }, [captureAnchor, correctPrepend, refreshResizeTargets]);
 

package/src/components/Process/Process.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
 import {
   Button,
+  GlassLayer,
   r,
   useColors,
   useThemedStyles,
@@ -95,6 +96,13 @@ export function Process(props: ProcessProps): React.JSX.Element {
       ]}
       testID={testID}
     >
+      {variant === 'card' || variant === 'timeline' ? (
+        <GlassLayer
+          style={
+            variant === 'timeline' ? styles.timelineMaterial : styles.material
+          }
+        />
+      ) : null}
       {title || (identity && !inlineIdentity) ? (
         <View style={styles.heading}>
           {!inlineIdentity ? identity : null}

package/src/components/Process/styles.ts

@@ -54,8 +54,9 @@ export const createStyles = (colors: ColorTokens) =>
       paddingHorizontal: space[5],
       paddingVertical: space[4],
     },
+    timelineMaterial: { borderRadius: radius.lg },
+    material: { borderRadius: radius.xl },
     timelineRoot: {
-      backgroundColor: colors.surface,
       borderRadius: radius.lg,
       padding: space[5],
     },
@@ -134,7 +135,6 @@ export const createStyles = (colors: ColorTokens) =>
       borderRadius: radius.xl,
       borderWidth: 1,
       borderColor: colors.outline,
-      backgroundColor: colors.surface,
     },
     heading: {
       flexDirection: 'row',
@@ -191,7 +191,6 @@ export const createStyles = (colors: ColorTokens) =>
     details: {
       padding: space[4],
       borderRadius: radius.md,
-      backgroundColor: colors.surfaceContainer,
     },
     actions: {
       flexDirection: 'row',

package/src/components/ProcessingProgress/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { r, space, type } from '@unif/react-native-design';
+import { leading, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
@@ -12,6 +12,6 @@ export const createStyles = (colors: ColorTokens) =>
     text: {
       color: colors.foregroundMuted,
       fontSize: type.xs,
-      lineHeight: r(20),
+      lineHeight: leading.sm,
     },
   });

package/src/components/Sources/Sources.tsx

@@ -1,6 +1,12 @@
 import { ChevronRightOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
-import { r, useColors, useThemedStyles } from '@unif/react-native-design';
+import {
+  GlassLayer,
+  pressedOpacity,
+  r,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
 import { DEFAULT_SOURCES_TITLE } from './constants';
 import { createStyles } from './styles';
 import type { SourceItem, SourcesProps } from './types';
@@ -17,20 +23,27 @@ export function Sources({
 
   if (items.length === 0) return null;
 
-  const renderItem = (item: SourceItem, showChevron: boolean) => (
+  const renderItem = (
+    item: SourceItem,
+    showChevron: boolean,
+    opacity: number
+  ) => (
     <>
-      <Text style={styles.label} testID={`source-label-${item.id}`}>
-        {item.label}
-      </Text>
-      <View style={styles.content}>
-        {item.title ? <Text style={styles.title}>{item.title}</Text> : null}
-        {item.description ? (
-          <Text style={styles.description}>{item.description}</Text>
+      <GlassLayer style={styles.material} />
+      <View style={[styles.itemContent, { opacity }]}>
+        <Text style={styles.label} testID={`source-label-${item.id}`}>
+          {item.label}
+        </Text>
+        <View style={styles.content}>
+          {item.title ? <Text style={styles.title}>{item.title}</Text> : null}
+          {item.description ? (
+            <Text style={styles.description}>{item.description}</Text>
+          ) : null}
+        </View>
+        {showChevron ? (
+          <ChevronRightOutlined size={r(18)} color={colors.foregroundMuted} />
         ) : null}
       </View>
-      {showChevron ? (
-        <ChevronRightOutlined size={r(18)} color={colors.foregroundMuted} />
-      ) : null}
     </>
   );
 
@@ -42,11 +55,7 @@ export function Sources({
           onPress ? (
             <Pressable
               key={item.id}
-              style={({ pressed }) => [
-                styles.item,
-                pressed && styles.pressed,
-                item.disabled && styles.disabled,
-              ]}
+              style={styles.item}
               onPress={item.disabled ? undefined : () => onPress(item)}
               disabled={item.disabled}
               accessibilityRole="button"
@@ -56,15 +65,21 @@ export function Sources({
               accessibilityState={{ disabled: item.disabled === true }}
               testID={`source-${item.id}`}
             >
-              {renderItem(item, true)}
+              {({ pressed }) =>
+                renderItem(
+                  item,
+                  true,
+                  item.disabled ? 0.5 : pressed ? pressedOpacity : 1
+                )
+              }
             </Pressable>
           ) : (
             <View
               key={item.id}
-              style={[styles.item, item.disabled && styles.disabled]}
+              style={styles.item}
               testID={`source-${item.id}`}
             >
-              {renderItem(item, false)}
+              {renderItem(item, false, item.disabled ? 0.5 : 1)}
             </View>
           )
         )}

package/src/components/Sources/styles.ts

@@ -1,12 +1,5 @@
 import { StyleSheet } from 'react-native';
-import {
-  fixed,
-  fw,
-  pressedOpacity,
-  radius,
-  space,
-  type,
-} from '@unif/react-native-design';
+import { fixed, fw, radius, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
@@ -24,18 +17,14 @@ export const createStyles = (colors: ColorTokens) =>
     },
     item: {
       minHeight: fixed.hitTarget,
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      gap: space[3],
       padding: space[3],
       borderRadius: radius.md,
-      backgroundColor: colors.surfaceContainer,
-    },
-    pressed: {
-      opacity: pressedOpacity,
     },
-    disabled: {
-      opacity: 0.5,
+    material: { borderRadius: radius.md },
+    itemContent: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: space[3],
     },
     label: {
       minWidth: space[7],