@oxy.so/bloom 4.13.3 → 4.14.0

package/src/styles/base-web-css.ts

@@ -0,0 +1,29 @@
+/**
+ * Bloom's base web rules: the few that hold for every family, adopted once by
+ * `BloomThemeProvider`.
+ *
+ * - **A control is not text.** React Native never makes text selectable unless
+ *   asked (`selectable`); react-native-web renders every `Text` selectable, so
+ *   on web a drag across the sidebar, a press on a menu item or a double-click
+ *   on a tab painted a text selection over the interface. Controls take no
+ *   selection, as a browser's own `<button>` does, whatever family drew them
+ *   and however their labels are nested. Links are left alone on purpose: they
+ *   sit inside prose, and a selection across a paragraph must include them.
+ */
+export const BASE_WEB_CSS_ID = 'bloom-base';
+
+export const BASE_WEB_CSS = `
+button,
+[role="button"],
+[role="tab"],
+[role="menuitem"],
+[role="menuitemradio"],
+[role="menuitemcheckbox"],
+[role="option"],
+[role="radio"],
+[role="checkbox"],
+[role="switch"] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+`;

package/src/theme/BloomThemeProvider.tsx

@@ -33,6 +33,8 @@ import { buildSeedScopeVars } from './color-scope/seed-scope';
 import { type AppColorName } from './color-presets';
 import { buildScopeVars, getVariableContextProvider } from './color-scope/style-builder';
 import { applyVarsToRootVariables } from './native-root-vars';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { BASE_WEB_CSS, BASE_WEB_CSS_ID } from '../styles/base-web-css';
 import {
   readPersistedTheme,
   readPersistedThemeSync,
@@ -447,6 +449,12 @@ export function BloomThemeProvider({
     applyVarsToRootVariables(themeVars);
   }, [themeVars]);
 
+  // Web: the rules every family relies on (`styles/base-web-css.ts`). A no-op
+  // on native and during SSR, where there is no document to adopt into.
+  useIsomorphicLayoutEffect(() => {
+    if (Platform.OS === 'web') adoptStyleSheet(BASE_WEB_CSS_ID, BASE_WEB_CSS);
+  }, []);
+
   const contextValue = useMemo<BloomThemeContextValue>(
     () => ({
       theme: themeColors,

package/src/web-search/WebSearch.tsx

@@ -521,7 +521,7 @@ function SourceLinkRow({
           textStyle,
         ]}
       >
-        <Text
+        <Text selectable={false}
           variant="body-regular"
           numberOfLines={1}
           style={{ flex: 1, minWidth: 0, color: palette.textSecondary }}
@@ -529,7 +529,7 @@ function SourceLinkRow({
           {source.title}
         </Text>
         {showDomain ? (
-          <Text variant="caption-1-regular" style={{ flexShrink: 0, color: palette.textTertiary }}>
+          <Text selectable={false} variant="caption-1-regular" style={{ flexShrink: 0, color: palette.textTertiary }}>
             {source.domain}
           </Text>
         ) : null}
@@ -731,7 +731,7 @@ function SourcesRow({
             ringStyle,
           ]}
         >
-          <Text variant="body-regular" style={{ color: palette.textSecondary }}>
+          <Text selectable={false} variant="body-regular" style={{ color: palette.textSecondary }}>
             {label}
           </Text>
           <Animated.View
@@ -821,7 +821,7 @@ function StepContent({
   return (
     <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
       <StepGlyph step={step} palette={palette} />
-      <Text variant="body-regular" style={{ flex: 1, minWidth: 0, color: palette.textSecondary }}>
+      <Text selectable={false} variant="body-regular" style={{ flex: 1, minWidth: 0, color: palette.textSecondary }}>
         {active ? <AgentLogShimmerText>{step.label}</AgentLogShimmerText> : step.label}
         {step.query ? (
           <RNText
@@ -837,7 +837,7 @@ function StepContent({
         ) : null}
       </Text>
       {step.meta ? (
-        <Text
+        <Text selectable={false}
           variant="body-regular"
           style={[{ flexShrink: 0, paddingTop: 1, color: palette.textTertiary }, TABULAR]}
         >