@oxy.so/bloom 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -769,6 +769,20 @@
         "default": "./lib/commonjs/settings-modal/index.js"
       }
     },
+    "./settings-modal/rows": {
+      "react-native": {
+        "types": "./lib/typescript/module/settings-modal/rows.d.ts",
+        "default": "./src/settings-modal/rows.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/settings-modal/rows.d.ts",
+        "default": "./lib/module/settings-modal/rows.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/settings-modal/rows.d.ts",
+        "default": "./lib/commonjs/settings-modal/rows.js"
+      }
+    },
     "./auth-card": {
       "react-native": {
         "types": "./lib/typescript/module/auth-card/index.d.ts",
@@ -1966,6 +1980,20 @@
         "default": "./lib/commonjs/chat-people/index.js"
       }
     },
+    "./chat-people/contact-row": {
+      "react-native": {
+        "types": "./lib/typescript/module/chat-people/contact-row.d.ts",
+        "default": "./src/chat-people/contact-row.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/chat-people/contact-row.d.ts",
+        "default": "./lib/module/chat-people/contact-row.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/chat-people/contact-row.d.ts",
+        "default": "./lib/commonjs/chat-people/contact-row.js"
+      }
+    },
     "./chat-screen": {
       "react-native": {
         "types": "./lib/typescript/module/chat-screen/index.d.ts",
@@ -3659,6 +3687,9 @@
       "settings-modal": [
         "./lib/typescript/module/settings-modal/index.d.ts"
       ],
+      "settings-modal/rows": [
+        "./lib/typescript/module/settings-modal/rows.d.ts"
+      ],
       "auth-card": [
         "./lib/typescript/module/auth-card/index.d.ts"
       ],
@@ -3893,6 +3924,9 @@
       "chat-people": [
         "./lib/typescript/module/chat-people/index.d.ts"
       ],
+      "chat-people/contact-row": [
+        "./lib/typescript/module/chat-people/contact-row.d.ts"
+      ],
       "chat-screen": [
         "./lib/typescript/module/chat-screen/index.d.ts"
       ],

package/src/ai-chat/AiChatResizeHandle.tsx

@@ -0,0 +1,151 @@
+/**
+ * The divider grip between two resizable panes. Its own module because three
+ * families draw it — `AiChatShell`, `AppShell`'s `split` variant and
+ * `ChatSplitLayout` — and the two that are not the AI chat must not link the
+ * chat shell (Metro does not tree-shake): importing it from `AiChatShell` put
+ * that module, its reanimated drawers and the whole ai-chat message catalog in
+ * every app that renders an `AppShell`.
+ */
+import React, { useMemo, useRef, useState } from 'react';
+import { PanResponder, View, type LayoutChangeEvent, type PointerEvent } from 'react-native';
+
+import { useCommonMessages } from '../locale/common-messages';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { dataHook, IS_WEB, useAiChatPalette, useAiChatWebCss } from './shared';
+import type { AiChatResizeHandleProps } from './types';
+
+/**
+ * The resize grip (`DragHandle`): a 20px strip straddling the chat's right edge
+ * (10px past it). Hovering it reveals a 15×25 grip — radius 4, 1px
+ * border-button-default, background-primary, shadow-xs, three 1×13
+ * icon-quaternary lines 2 apart — that follows the pointer along the edge
+ * (kept 13px inside it) and stays up while dragging (150ms fade). Holding and
+ * dragging reports the horizontal distance from where the drag started.
+ */
+export function AiChatResizeHandle({
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  label: labelProp,
+  onNudge,
+  style,
+  testID,
+}: AiChatResizeHandleProps) {
+  useAiChatWebCss();
+  const palette = useAiChatPalette();
+  const common = useCommonMessages();
+  const label = labelProp ?? common.resizePanels;
+  const [gripY, setGripY] = useState<number | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const height = useRef(0);
+  const startX = useRef(0);
+  const callbacks = useRef({ onResizeStart, onResize, onResizeEnd });
+  callbacks.current = { onResizeStart, onResize, onResizeEnd };
+
+  const track = (localY: number) => {
+    const h = height.current;
+    if (h > 0) setGripY(Math.min(h - 13, Math.max(13, localY)));
+  };
+
+  // Native: a pan responder (web uses pointer capture below).
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (event) => {
+          track(event.nativeEvent.locationY);
+          setDragging(true);
+          callbacks.current.onResizeStart?.();
+        },
+        onPanResponderMove: (_event, gesture) => callbacks.current.onResize(gesture.dx),
+        onPanResponderRelease: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+        onPanResponderTerminate: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+      }),
+    [],
+  );
+
+  type DomTarget = {
+    getBoundingClientRect: () => { top: number };
+    setPointerCapture: (id: number) => void;
+    hasPointerCapture: (id: number) => boolean;
+  };
+  const web = IS_WEB
+    ? {
+        onPointerDown: (event: PointerEvent) => {
+          event.preventDefault();
+          startX.current = event.nativeEvent.clientX;
+          setDragging(true);
+          callbacks.current.onResizeStart?.();
+          (event.currentTarget as unknown as DomTarget).setPointerCapture(event.nativeEvent.pointerId);
+        },
+        onPointerMove: (event: PointerEvent) => {
+          const target = event.currentTarget as unknown as DomTarget;
+          track(event.nativeEvent.clientY - target.getBoundingClientRect().top);
+          if (target.hasPointerCapture(event.nativeEvent.pointerId)) {
+            callbacks.current.onResize(event.nativeEvent.clientX - startX.current);
+          }
+        },
+        onPointerUp: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+        onPointerCancel: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+        onKeyDown: (event: { nativeEvent: { key: string } }) => {
+          if (event.nativeEvent.key === 'ArrowLeft') onNudge?.(-16);
+          if (event.nativeEvent.key === 'ArrowRight') onNudge?.(16);
+        },
+        tabIndex: onNudge ? (0 as const) : undefined,
+      }
+    : responder.panHandlers;
+
+  const grip: WebCssStyle = {
+    position: 'absolute',
+    ...(gripY === null ? { top: '50%' } : { top: gripY }),
+    width: 15,
+    height: 25,
+    marginTop: -12.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.primary,
+    boxShadow: palette.shadowXs,
+    ...(IS_WEB ? null : { opacity: dragging ? 1 : 0 }),
+  };
+
+  return (
+    <View
+      {...dataHook('bloomAiChatGrip')}
+      {...web}
+      role="separator"
+      aria-orientation="vertical"
+      accessibilityLabel={label}
+      testID={testID}
+      onLayout={(event: LayoutChangeEvent) => {
+        height.current = event.nativeEvent.layout.height;
+      }}
+      style={[
+        { position: 'absolute', top: 0, bottom: 0, right: -10, zIndex: 10, width: 20, alignItems: 'center' },
+        style,
+      ]}>
+      <View {...dataHook('bloomAiChatGripPill', dragging ? 'dragging' : '')} pointerEvents="none" style={grip}>
+        {[0, 1, 2].map((line) => (
+          <View key={line} style={{ width: 1, height: 13, backgroundColor: palette.iconQuaternary }} />
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/ai-chat/AiChatShell.tsx

@@ -9,7 +9,6 @@ import {
   useWindowDimensions,
   type GestureResponderEvent,
   type LayoutChangeEvent,
-  type PointerEvent,
   type ViewProps,
 } from 'react-native';
 import Animated, {
@@ -39,9 +38,11 @@ import {
   useAiChatPalette,
   useAiChatWebCss,
 } from './shared';
+import { useCommonMessages } from '../locale/common-messages';
 import { useMessages } from '../locale/messages';
 import { AI_CHAT_MESSAGES } from './messages';
-import type { AiChatMobileHeaderProps, AiChatResizeHandleProps, AiChatShellProps } from './types';
+import type { AiChatMobileHeaderProps, AiChatShellProps } from './types';
+import { AiChatResizeHandle } from './AiChatResizeHandle';
 import { clamp01 } from '../styles/clamp';
 
 const REVEAL_EASE = Easing.bezier(0.42, 0, 0.58, 1);
@@ -90,146 +91,6 @@ const NAV_SETTLE_MIN_MS = 120;
 
 
 
-// ---------------------------------------------------------------------------
-//  Resize handle
-// ---------------------------------------------------------------------------
-
-/**
- * The resize grip (`DragHandle`): a 20px strip straddling the chat's right edge
- * (10px past it). Hovering it reveals a 15×25 grip — radius 4, 1px
- * border-button-default, background-primary, shadow-xs, three 1×13
- * icon-quaternary lines 2 apart — that follows the pointer along the edge
- * (kept 13px inside it) and stays up while dragging (150ms fade). Holding and
- * dragging reports the horizontal distance from where the drag started.
- */
-export function AiChatResizeHandle({
-  onResizeStart,
-  onResize,
-  onResizeEnd,
-  label: labelProp,
-  onNudge,
-  style,
-  testID,
-}: AiChatResizeHandleProps) {
-  useAiChatWebCss();
-  const palette = useAiChatPalette();
-  const { messages } = useMessages(AI_CHAT_MESSAGES);
-  const label = labelProp ?? messages.shell.resize;
-  const [gripY, setGripY] = useState<number | null>(null);
-  const [dragging, setDragging] = useState(false);
-  const height = useRef(0);
-  const startX = useRef(0);
-  const callbacks = useRef({ onResizeStart, onResize, onResizeEnd });
-  callbacks.current = { onResizeStart, onResize, onResizeEnd };
-
-  const track = (localY: number) => {
-    const h = height.current;
-    if (h > 0) setGripY(Math.min(h - 13, Math.max(13, localY)));
-  };
-
-  // Native: a pan responder (web uses pointer capture below).
-  const responder = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: (event) => {
-          track(event.nativeEvent.locationY);
-          setDragging(true);
-          callbacks.current.onResizeStart?.();
-        },
-        onPanResponderMove: (_event, gesture) => callbacks.current.onResize(gesture.dx),
-        onPanResponderRelease: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-        onPanResponderTerminate: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-      }),
-    [],
-  );
-
-  type DomTarget = {
-    getBoundingClientRect: () => { top: number };
-    setPointerCapture: (id: number) => void;
-    hasPointerCapture: (id: number) => boolean;
-  };
-  const web = IS_WEB
-    ? {
-        onPointerDown: (event: PointerEvent) => {
-          event.preventDefault();
-          startX.current = event.nativeEvent.clientX;
-          setDragging(true);
-          callbacks.current.onResizeStart?.();
-          (event.currentTarget as unknown as DomTarget).setPointerCapture(event.nativeEvent.pointerId);
-        },
-        onPointerMove: (event: PointerEvent) => {
-          const target = event.currentTarget as unknown as DomTarget;
-          track(event.nativeEvent.clientY - target.getBoundingClientRect().top);
-          if (target.hasPointerCapture(event.nativeEvent.pointerId)) {
-            callbacks.current.onResize(event.nativeEvent.clientX - startX.current);
-          }
-        },
-        onPointerUp: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-        onPointerCancel: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-        onKeyDown: (event: { nativeEvent: { key: string } }) => {
-          if (event.nativeEvent.key === 'ArrowLeft') onNudge?.(-16);
-          if (event.nativeEvent.key === 'ArrowRight') onNudge?.(16);
-        },
-        tabIndex: onNudge ? (0 as const) : undefined,
-      }
-    : responder.panHandlers;
-
-  const grip: WebCssStyle = {
-    position: 'absolute',
-    ...(gripY === null ? { top: '50%' } : { top: gripY }),
-    width: 15,
-    height: 25,
-    marginTop: -12.5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 2,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: palette.border,
-    backgroundColor: palette.primary,
-    boxShadow: palette.shadowXs,
-    ...(IS_WEB ? null : { opacity: dragging ? 1 : 0 }),
-  };
-
-  return (
-    <View
-      {...dataHook('bloomAiChatGrip')}
-      {...web}
-      role="separator"
-      aria-orientation="vertical"
-      accessibilityLabel={label}
-      testID={testID}
-      onLayout={(event: LayoutChangeEvent) => {
-        height.current = event.nativeEvent.layout.height;
-      }}
-      style={[
-        { position: 'absolute', top: 0, bottom: 0, right: -10, zIndex: 10, width: 20, alignItems: 'center' },
-        style,
-      ]}>
-      <View {...dataHook('bloomAiChatGripPill', dragging ? 'dragging' : '')} pointerEvents="none" style={grip}>
-        {[0, 1, 2].map((line) => (
-          <View key={line} style={{ width: 1, height: 13, backgroundColor: palette.iconQuaternary }} />
-        ))}
-      </View>
-    </View>
-  );
-}
-
 // ---------------------------------------------------------------------------
 //  Mobile header
 // ---------------------------------------------------------------------------
@@ -344,7 +205,11 @@ export function AiChatShell({
   const reducedMotion = useReducedMotion();
   const { messages } = useMessages(AI_CHAT_MESSAGES);
   const panelLabel = panelLabelProp ?? messages.code;
-  const l = useMemo(() => ({ ...messages.shell, ...labels }), [messages, labels]);
+  const common = useCommonMessages();
+  const l = useMemo(
+    () => ({ ...messages.shell, resize: common.resizePanels, ...labels }),
+    [messages, common, labels],
+  );
   const { width: windowWidth } = useWindowDimensions();
   // Native has no document: `document` is `container` there.
   const documentScroll = IS_WEB && scroll === 'document';

package/src/ai-chat/index.ts

@@ -15,7 +15,8 @@ export {
   AiChatMessageLine,
   AiChatStrong,
 } from './AiChatMessages';
-export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { AiChatResizeHandle } from './AiChatResizeHandle';
+export { AiChatMobileHeader, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
 export type { AiChatChromeInsets, AiChatShellState } from './context';
 export type {

package/src/ai-chat/index.web.ts

@@ -20,7 +20,8 @@ export {
   AiChatMessageLine,
   AiChatStrong,
 } from './AiChatMessages';
-export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { AiChatResizeHandle } from './AiChatResizeHandle';
+export { AiChatMobileHeader, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
 export type { AiChatChromeInsets, AiChatShellState } from './context';
 export type {

package/src/ai-chat/messages.ts

@@ -60,7 +60,6 @@ export interface AiChatMessages {
     closeNavigation: string;
     openPanel: (panel: string) => string;
     closePanel: (panel: string) => string;
-    resize: string;
   };
   /** The shell's default panel name. */
   code: string;
@@ -105,7 +104,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Close navigation',
       openPanel: (panel) => `Open ${String(panel).toLowerCase()}`,
       closePanel: (panel) => `Close ${String(panel).toLowerCase()}`,
-      resize: 'Resize panels',
     },
     code: 'Code',
   },
@@ -145,7 +143,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Cerrar navegación',
       openPanel: (panel) => `Abrir ${String(panel).toLowerCase()}`,
       closePanel: (panel) => `Cerrar ${String(panel).toLowerCase()}`,
-      resize: 'Cambiar tamaño de los paneles',
     },
     code: 'Código',
   },
@@ -185,7 +182,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Tanca la navegació',
       openPanel: (panel) => `Obre ${String(panel).toLowerCase()}`,
       closePanel: (panel) => `Tanca ${String(panel).toLowerCase()}`,
-      resize: 'Canvia la mida dels taulers',
     },
     code: 'Codi',
   },
@@ -226,7 +222,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Navigation schließen',
       openPanel: (panel) => `${panel} öffnen`,
       closePanel: (panel) => `${panel} schließen`,
-      resize: 'Bereichsgröße ändern',
     },
     code: 'Code',
   },
@@ -272,7 +267,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Fermer la navigation',
       openPanel: (panel) => `Ouvrir le panneau ${panel}`,
       closePanel: (panel) => `Fermer le panneau ${panel}`,
-      resize: 'Redimensionner les panneaux',
     },
     code: 'Code',
   },
@@ -312,7 +306,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Chiudi navigazione',
       openPanel: (panel) => `Apri ${String(panel).toLowerCase()}`,
       closePanel: (panel) => `Chiudi ${String(panel).toLowerCase()}`,
-      resize: 'Ridimensiona pannelli',
     },
     code: 'Codice',
   },
@@ -352,7 +345,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Fechar navegação',
       openPanel: (panel) => `Abrir ${String(panel).toLowerCase()}`,
       closePanel: (panel) => `Fechar ${String(panel).toLowerCase()}`,
-      resize: 'Redimensionar painéis',
     },
     code: 'Código',
   },
@@ -399,7 +391,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Закрыть навигацию',
       openPanel: (panel) => `Открыть панель «${panel}»`,
       closePanel: (panel) => `Закрыть панель «${panel}»`,
-      resize: 'Изменить размер панелей',
     },
     code: 'Код',
   },
@@ -439,7 +430,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Gezinmeyi kapat',
       openPanel: (panel) => `${panel} panelini aç`,
       closePanel: (panel) => `${panel} panelini kapat`,
-      resize: 'Panelleri yeniden boyutlandır',
     },
     code: 'Kod',
   },
@@ -479,7 +469,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'ナビゲーションを閉じる',
       openPanel: (panel) => `${panel}を開く`,
       closePanel: (panel) => `${panel}を閉じる`,
-      resize: 'パネルのサイズを変更',
     },
     code: 'コード',
   },
@@ -519,7 +508,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: '关闭导航',
       openPanel: (panel) => `打开${panel}`,
       closePanel: (panel) => `关闭${panel}`,
-      resize: '调整面板大小',
     },
     code: '代码',
   },
@@ -575,7 +563,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'إغلاق التنقل',
       openPanel: (panel) => `فتح لوحة ${panel}`,
       closePanel: (panel) => `إغلاق لوحة ${panel}`,
-      resize: 'تغيير حجم اللوحات',
     },
     code: 'الرمز البرمجي',
   },
@@ -615,7 +602,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'नेविगेशन बंद करें',
       openPanel: (panel) => `${panel} खोलें`,
       closePanel: (panel) => `${panel} बंद करें`,
-      resize: 'पैनल का आकार बदलें',
     },
     code: 'कोड',
   },
@@ -655,7 +641,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'নেভিগেশন বন্ধ করুন',
       openPanel: (panel) => `${panel} খুলুন`,
       closePanel: (panel) => `${panel} বন্ধ করুন`,
-      resize: 'প্যানেলের আকার বদলান',
     },
     code: 'কোড',
   },
@@ -695,7 +680,6 @@ export const AI_CHAT_MESSAGES: MessageCatalog<AiChatMessages> = {
       closeNavigation: 'Tutup navigasi',
       openPanel: (panel) => `Buka ${String(panel).toLowerCase()}`,
       closePanel: (panel) => `Tutup ${String(panel).toLowerCase()}`,
-      resize: 'Ubah ukuran panel',
     },
     code: 'Kode',
   },

package/src/app-shell/AppShellSplit.tsx

@@ -17,7 +17,7 @@
 import React, { memo, useCallback, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 
-import { AiChatResizeHandle } from '../ai-chat/AiChatShell';
+import { AiChatResizeHandle } from '../ai-chat/AiChatResizeHandle';
 import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 

package/src/button/Button.tsx

@@ -43,6 +43,35 @@ function isTextContent(node: React.ReactNode): boolean {
   return React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment && isTextContent(node.props.children);
 }
 
+/** Keep contiguous labels together so the button's gap only separates layout nodes. */
+function renderTextContent(node: React.ReactNode, wrap: (text: React.ReactNode) => React.ReactNode): React.ReactNode {
+  if (isTextContent(node)) return wrap(node);
+  const result: React.ReactNode[] = [];
+  let run: React.ReactNode[] = [];
+  let runKey = '';
+  const flush = () => {
+    if (run.length) result.push(<React.Fragment key={runKey}>{wrap(run)}</React.Fragment>);
+    run = [];
+  };
+  const visit = (children: React.ReactNode, path: string) => {
+    React.Children.toArray(children).forEach((child, index) => {
+      const key = `${path}/${React.isValidElement(child) ? child.key ?? index : index}`;
+      if (React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment) {
+        visit(child.props.children, key);
+      } else if (typeof child === 'string' || typeof child === 'number') {
+        if (!run.length) runKey = key;
+        run.push(child);
+      } else {
+        flush();
+        result.push(<React.Fragment key={key}>{child}</React.Fragment>);
+      }
+    });
+  };
+  visit(node, 'content');
+  flush();
+  return result;
+}
+
 export type {
   ButtonProps, LinkButtonProps,
   ButtonSize,
@@ -340,16 +369,12 @@ const ButtonComponent = forwardRef<View, ButtonProps>(function ButtonComponent({
       )}
       {leading}
       {iconNode}
-      {!isSquare && children != null && (isTextContent(children) ? (
-        <Text
-          variant={textVariant ?? geometry.type}
-          numberOfLines={numberOfLines}
-          style={[computedTextStyle, textStyle]}
-        >
-          {children}
-        </Text>
-      ) : children)}
-      {isSquare && !renderLeadingIcon && !LeadingIcon && !iconNode && children != null ? children : null}
+      {children != null && (!isSquare || (!renderLeadingIcon && !LeadingIcon && !iconNode))
+        ? renderTextContent(children, text => (
+          <Text variant={textVariant ?? geometry.type} numberOfLines={numberOfLines} style={[computedTextStyle, textStyle]}>
+            {text}
+          </Text>
+        )) : null}
       {trailing}
       {!isSquare
         ? resolveIconSlot(renderTrailingIcon, iconSize, paint.foreground, () =>

package/src/button/GlyphButton.tsx

@@ -164,9 +164,9 @@ function GlyphButtonComponent(
       aria-busy={busy || undefined}
       aria-expanded={ariaExpanded}
       {...(ariaHasPopup == null ? {} : { 'aria-haspopup': ariaHasPopup })}
-      disabled={blocked}
-      onPress={onPress}
-      onLongPress={onLongPress}
+      disabled={disabled}
+      onPress={onPress ? event => { if (!blocked) onPress(event); } : undefined}
+      onLongPress={onLongPress ? event => { if (!blocked) onLongPress(event); } : undefined}
       onHoverIn={onHoverIn}
       onHoverOut={onHoverOut}
       onPressIn={onPressIn}

package/src/card-form/shared.ts

@@ -65,7 +65,8 @@ export function groupCardDigits(digits: string, groups: readonly number[] = DEFA
  * re-groups it when the field is left.
  *
  * An edit that would push the number past `maxDigits` is refused outright:
- * returning a truncated value would move the caret too.
+ * returning a truncated value would move the caret too. Deletions still work
+ * when a scheme change made the existing value longer than the new limit.
  */
 export function applyCardNumberEdit(
   previous: string,
@@ -74,8 +75,8 @@ export function applyCardNumberEdit(
   maxDigits = 19,
 ): string {
   const nextDigits = cardDigits(next);
-  if (nextDigits.length > maxDigits) return previous;
   const previousDigits = cardDigits(previous);
+  if (nextDigits.length > maxDigits && nextDigits.length >= previousDigits.length) return previous;
   const atEnd =
     previousDigits.startsWith(nextDigits) || nextDigits.startsWith(previousDigits);
   if (atEnd) return groupCardDigits(nextDigits, groups);