@proulr/sdui-components 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {
@@ -9,7 +9,7 @@
     "./renderer": "./src/renderer/index.ts",
     "./ui": "./src/renderer/ui/index.ts",
     "./primitives": "./src/renderer/ui/primitives.ts",
-    "./theme": "./src/renderer/theme/proulr-theme.ts"
+    "./theme": "./src/renderer/theme/index.ts"
   },
   "files": [
     "src"
@@ -32,6 +32,7 @@
     "@proulr/sdui-contract": "^0.1.0"
   },
   "peerDependencies": {
+    "expo-blur": ">=15",
     "expo-linear-gradient": ">=56",
     "react": ">=19",
     "react-native": ">=0.85",
@@ -48,6 +49,9 @@
     "expo-linear-gradient": {
       "optional": true
     },
+    "expo-blur": {
+      "optional": true
+    },
     "react-native-google-mobile-ads": {
       "optional": true
     },
@@ -60,6 +64,7 @@
     "@types/react": "~19.2.2",
     "eslint": "^9.0.0",
     "eslint-config-expo": "~56.0.4",
+    "expo-blur": "~56.0.3",
     "expo-linear-gradient": "~56.0.4",
     "globals": "^16.0.0",
     "husky": "^9.1.7",

package/src/renderer/index.ts

@@ -27,6 +27,9 @@ export type {
   SduiNativeBlockRenderProps,
 } from './sdui-hybrid-renderer-context';
 export * from './theme/proulr-theme';
+export * from './theme/chrome-glass';
+export * from './theme/chrome-layout';
+export * from './theme/chrome-pill-styles';
 export { resolveViewStyleProps, resolveTextStyleProps } from './theme/resolve-style-props';
 export {
   formatDistanceLabel,

package/src/renderer/theme/chrome-glass.ts

@@ -0,0 +1,15 @@
+/**
+ * Chrome glass (BlurView) — fonte única Night Stalker.
+ * Overlay de cor fica em `colors.chromeGlassOverlay` (tema).
+ */
+
+/** Intensidade do frost — mais blur, menos “placa” opaca. */
+export const CHROME_GLASS_BLUR_INTENSITY = 50;
+
+/**
+ * Tint limpo (sem material cinza do system material).
+ * Tipado como string literal para não exigir peer `expo-blur` na lib.
+ */
+export const CHROME_GLASS_BLUR_TINT = 'dark' as const;
+
+export type ChromeGlassBlurTint = typeof CHROME_GLASS_BLUR_TINT;

package/src/renderer/theme/chrome-layout.ts

@@ -0,0 +1,42 @@
+import { m3Shape, spacing } from './proulr-theme';
+
+export const CHROME_HORIZONTAL_INSET = spacing.md;
+export const CHROME_VERTICAL_GAP = spacing.sm;
+export const CHROME_PILL_RADIUS = m3Shape.cornerFull;
+export const HEADER_PILL_ROW_HEIGHT = 56;
+export const HEADER_SLOT_GAP = spacing.md;
+export const HEADER_SLOT_ROW_HEIGHT = 52;
+export const FLOATING_TAB_BAR_HEIGHT = 60;
+export const CHROME_CONTENT_TOP_GAP = spacing.sm;
+export const CHROME_SCROLL_BOTTOM_EXTRA = spacing.sm;
+export const CHROME_SCROLL_FADE_EXTRA = 32;
+export const CHROME_SCROLL_FADE_Z_BEHIND_CHROME = 1;
+export const CHROME_SCROLL_FADE_Z_ABOVE_CONTENT = 5;
+export const CHROME_PILL_Z_INDEX = 10;
+export const CHROME_DRAWER_OVERLAY_Z_INDEX = 30;
+export const CHROME_DRAWER_Z_INDEX = 31;
+
+type HeaderChromeOptions = {
+  hasSlot?: boolean;
+  searchOpen?: boolean;
+};
+
+export function estimateHeaderChromeHeight(
+  topInset: number,
+  options: boolean | HeaderChromeOptions = false,
+): number {
+  const { hasSlot = false, searchOpen = false } =
+    typeof options === 'boolean' ? { hasSlot: options } : options;
+  const showsSlot = hasSlot && !searchOpen;
+  const slotRow = showsSlot ? HEADER_SLOT_GAP + HEADER_SLOT_ROW_HEIGHT : 0;
+  return topInset + CHROME_VERTICAL_GAP + HEADER_PILL_ROW_HEIGHT + slotRow;
+}
+
+export function estimateTabBarChromeHeight(bottomInset: number): number {
+  return bottomInset + CHROME_VERTICAL_GAP + FLOATING_TAB_BAR_HEIGHT;
+}
+
+/** Mesma área reservada que a tab bar — footer flutuante com CTA primário. */
+export function estimateChromeFooterActionHeight(bottomInset: number): number {
+  return estimateTabBarChromeHeight(bottomInset);
+}

package/src/renderer/theme/chrome-pill-styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { colors } from './proulr-theme';
+import { CHROME_PILL_RADIUS } from './chrome-layout';
+
+export const chromePillStyles = StyleSheet.create({
+  shell: {
+    backgroundColor: colors.chromePillBackground,
+    borderWidth: 1,
+    borderColor: colors.chromePillBorder,
+    borderRadius: CHROME_PILL_RADIUS,
+    overflow: 'hidden',
+  },
+});

package/src/renderer/theme/index.ts

@@ -0,0 +1,4 @@
+export * from './proulr-theme';
+export * from './chrome-glass';
+export * from './chrome-layout';
+export * from './chrome-pill-styles';

package/src/renderer/theme/proulr-theme.ts

@@ -1,6 +1,6 @@
-import { Platform, ViewStyle } from 'react-native';
+import { Platform, type ViewStyle } from 'react-native';
 
-/** Proulr UI theme — Night Stalker OLED. */
+/** Proulr UI theme — Night Stalker OLED (fonte única para app + SDUI). */
 
 export const m3Colors = {
   primary: '#D946EF',
@@ -30,9 +30,8 @@ export const m3Colors = {
   inverseSurface: '#FFFFFF',
   inverseOnSurface: '#000000',
   scrim: 'rgba(0,0,0,0.78)',
+  storyInteractionScrim: 'rgba(0,0,0,0.48)',
   online: '#34FF88',
-  chromePillBackground: 'rgba(28, 28, 30, 0.82)',
-  chromePillBorder: 'rgba(255, 255, 255, 0.06)',
 } as const;
 
 export const m3Shape = {
@@ -79,35 +78,58 @@ export const colors = {
   dangerSoft: 'rgba(255,68,68,0.22)',
   overlay: 'rgba(0,0,0,0.78)',
   surfaceGlass: 'rgba(255,255,255,0.06)',
-  chromePillBackground: 'rgba(28, 28, 30, 0.82)',
-  chromePillBorder: 'rgba(255, 255, 255, 0.06)',
-  primary: m3Colors.primary,
-  onSurface: m3Colors.onSurface,
-  onSurfaceVariant: m3Colors.onSurfaceVariant,
-};
+  /** Pílula / chrome sem BlurView — preto OLED. */
+  chromePillBackground: 'rgba(0, 0, 0, 0.82)',
+  /** Overlay sobre BlurView — transparente = frost limpo (sem placa acinzentada). */
+  chromeGlassOverlay: 'rgba(0, 0, 0, 0)',
+  chromePillBorder: 'rgba(255, 255, 255, 0.08)',
+  videoControlBackground: 'rgba(0,0,0,0.45)',
+  videoTrackBackground: 'rgba(255,255,255,0.25)',
+  scrollbarThumb: 'rgba(255, 255, 255, 0.28)',
+  scrollbarThumbHover: 'rgba(255, 255, 255, 0.45)',
+  primary: '#D946EF',
+  onSurface: '#FFFFFF',
+  onSurfaceVariant: '#A3A3A3',
+} as const;
 
-export const radius = {
+export const spacing = {
+  xs: 4,
   sm: 8,
   md: 12,
   lg: 16,
   xl: 24,
-  pill: 999,
+  xxl: 32,
 };
 
-export const spacing = {
-  xs: 4,
+export const radius = {
   sm: 8,
   md: 12,
   lg: 16,
   xl: 24,
-  xxl: 32,
-} as const;
+  pill: 999,
+};
 
 export const gradients = {
   brand: ['#7A0D8A', '#D946EF'] as const,
   header: ['#2D0A35', '#D946EF'] as const,
   headerGlow: ['rgba(217,70,239,0.20)', 'rgba(217,70,239,0)'] as const,
+  authHero: ['rgba(217,70,239,0.14)', 'rgba(0,229,255,0.06)', 'transparent'] as const,
   neonBorder: [colors.headerEnd, colors.accent] as const,
+  videoControlsShade: ['transparent', 'rgba(0,0,0,0.72)'] as const,
+  chromeScrollFadeBottom: [
+    'transparent',
+    'rgba(0,0,0,0.22)',
+    'rgba(0,0,0,0.65)',
+    '#000000',
+  ] as const,
+  chromeScrollFadeBottomLocations: [0, 0.45, 0.82, 1] as const,
+  chromeScrollFadeTop: [
+    '#000000',
+    'rgba(0,0,0,0.65)',
+    'rgba(0,0,0,0.22)',
+    'transparent',
+  ] as const,
+  chromeScrollFadeTopLocations: [0, 0.18, 0.55, 1] as const,
 };
 
 export const fonts = {
@@ -116,7 +138,7 @@ export const fonts = {
   semibold: 'Montserrat_600SemiBold',
   bold: 'Montserrat_700Bold',
   extrabold: 'Montserrat_800ExtraBold',
-};
+} as const;
 
 export const shadows = {
   card: Platform.select<ViewStyle>({

package/src/renderer/ui/ChromeGlass.tsx

@@ -0,0 +1,78 @@
+import React, { type ReactNode } from 'react';
+import { BlurView } from 'expo-blur';
+import {
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { colors } from '../theme/proulr-theme';
+import {
+  CHROME_GLASS_BLUR_INTENSITY,
+  CHROME_GLASS_BLUR_TINT,
+} from '../theme/chrome-glass';
+import { chromePillStyles } from '../theme/chrome-pill-styles';
+
+const absoluteFill: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+type ChromeGlassLayerProps = {
+  style?: StyleProp<ViewStyle>;
+  pointerEvents?: ViewProps['pointerEvents'];
+};
+
+/**
+ * Camada de frost única do sistema (igual AppSideDrawer topo/base).
+ * BlurView + `colors.chromeGlassOverlay` — sem cast cinza.
+ */
+export function ChromeGlassLayer({
+  style,
+  pointerEvents = 'none',
+}: ChromeGlassLayerProps) {
+  return (
+    <View style={[absoluteFill, style]} pointerEvents={pointerEvents}>
+      <BlurView
+        intensity={CHROME_GLASS_BLUR_INTENSITY}
+        tint={CHROME_GLASS_BLUR_TINT}
+        style={StyleSheet.absoluteFill}
+      />
+      <View style={[absoluteFill, styles.tint]} />
+    </View>
+  );
+}
+
+type ChromeGlassShellProps = {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Pílula chrome com o mesmo glass do drawer (shell + blur + overlay).
+ */
+export function ChromeGlassShell({ children, style, contentStyle }: ChromeGlassShellProps) {
+  return (
+    <View style={[chromePillStyles.shell, styles.shellTransparent, style]}>
+      <ChromeGlassLayer />
+      <View style={[styles.content, contentStyle]}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tint: {
+    backgroundColor: colors.chromeGlassOverlay,
+  },
+  shellTransparent: {
+    backgroundColor: 'transparent',
+  },
+  content: {
+    zIndex: 1,
+  },
+});

package/src/renderer/ui/DateField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput, TextInputProps, ViewStyle } from 'react-native';
+import { TextInput, TextInputProps, type StyleProp, type ViewStyle } from 'react-native';
 import { maskDateBR } from '../lib/brazilian-date-input';
 import { TextField } from './TextField';
 
@@ -15,7 +15,7 @@ export function DateField({
   value: string;
   onChange: (masked: string) => void;
   placeholder?: string;
-  containerStyle?: ViewStyle;
+  containerStyle?: StyleProp<ViewStyle>;
   inputRef?: React.Ref<TextInput>;
   returnKeyType?: TextInputProps['returnKeyType'];
   onSubmitEditing?: TextInputProps['onSubmitEditing'];

package/src/renderer/ui/compose-pill-input.tsx

@@ -11,9 +11,11 @@ import {
   View,
   type StyleProp,
   type TextInputProps,
+  type TextStyle,
   type ViewStyle,
 } from 'react-native';
 import { AppIcon } from './app-icon';
+import { ChromeGlassLayer } from './ChromeGlass';
 import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
 const ACTION_BUTTON_SIZE = 48;
@@ -138,7 +140,7 @@ export type ComposePillTextFieldProps = Omit<TextInputProps, 'multiline' | 'styl
   maxLines?: number;
   inputRef?: ComposePillTextInputRef;
   layout?: ComposePillLineLayoutState;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
 };
 
 export function ComposePillTextField({
@@ -240,9 +242,11 @@ function composePillVariantColors(variant: ComposePillVariant) {
     return {
       text: colors.white,
       placeholder: 'rgba(255,255,255,0.55)',
-      pillBackground: 'rgba(28,28,30,0.72)',
-      pillBorder: 'rgba(255,255,255,0.08)',
-      replyBackground: 'rgba(28,28,30,0.72)',
+      /** Transparent — frost via ChromeGlassLayer (mesmo glass do drawer). */
+      pillBackground: 'transparent',
+      pillBorder: colors.chromePillBorder,
+      replyBackground: 'transparent',
+      useChromeGlass: true,
     };
   }
 
@@ -250,9 +254,10 @@ function composePillVariantColors(variant: ComposePillVariant) {
     return {
       text: m3Colors.onSurface,
       placeholder: m3Colors.onSurfaceVariant,
-      pillBackground: colors.chromePillBackground,
+      pillBackground: 'transparent',
       pillBorder: colors.chromePillBorder,
-      replyBackground: colors.chromePillBackground,
+      replyBackground: 'transparent',
+      useChromeGlass: true,
     };
   }
 
@@ -262,6 +267,7 @@ function composePillVariantColors(variant: ComposePillVariant) {
     pillBackground: m3Colors.surfaceContainerHigh,
     pillBorder: 'transparent',
     replyBackground: m3Colors.surfaceContainerHigh,
+    useChromeGlass: false,
   };
 }
 
@@ -275,7 +281,14 @@ export function ComposePillReplyBar({
   const variantColors = composePillVariantColors(variant);
 
   return (
-    <View style={[styles.replyBar, { backgroundColor: variantColors.replyBackground }]}>
+    <View
+      style={[
+        styles.replyBar,
+        { backgroundColor: variantColors.replyBackground },
+        variantColors.useChromeGlass && styles.replyBarGlass,
+      ]}
+    >
+      {variantColors.useChromeGlass ? <ChromeGlassLayer /> : null}
       <View style={styles.replyBarAccent} />
       <View style={styles.replyBarContent}>
         <Text style={styles.replyBarName} numberOfLines={1}>
@@ -426,8 +439,10 @@ export function ComposePillInput({
                 borderColor: variantColors.pillBorder,
                 borderWidth: variant === 'overlay' || variant === 'chrome' ? 1 : 0,
               },
+              variantColors.useChromeGlass && styles.inputPillGlass,
             ]}
           >
+            {variantColors.useChromeGlass ? <ChromeGlassLayer /> : null}
             {leading}
             {textField}
             {trailing ? (
@@ -465,15 +480,20 @@ const styles = StyleSheet.create({
     borderRadius: m3Shape.cornerMedium,
     gap: spacing.sm,
   },
+  replyBarGlass: {
+    overflow: 'hidden',
+  },
   replyBarAccent: {
     width: 4,
     alignSelf: 'stretch',
     borderRadius: m3Shape.cornerExtraSmall,
     backgroundColor: m3Colors.primary,
+    zIndex: 1,
   },
   replyBarContent: {
     flex: 1,
     gap: 2,
+    zIndex: 1,
   },
   replyBarName: {
     color: m3Colors.primary,
@@ -490,6 +510,7 @@ const styles = StyleSheet.create({
     height: 32,
     alignItems: 'center',
     justifyContent: 'center',
+    zIndex: 1,
   },
   composerRow: {
     flexDirection: 'row',
@@ -505,6 +526,7 @@ const styles = StyleSheet.create({
     paddingRight: spacing.xs,
     overflow: 'hidden',
   },
+  inputPillGlass: {},
   inputPillSingle: {
     borderRadius: m3Shape.cornerFull,
   },
@@ -516,6 +538,7 @@ const styles = StyleSheet.create({
     height: 40,
     alignItems: 'center',
     justifyContent: 'center',
+    zIndex: 1,
   },
   iconButtonDisabled: {
     opacity: 0.4,
@@ -523,6 +546,7 @@ const styles = StyleSheet.create({
   trailingIcons: {
     flexDirection: 'row',
     alignItems: 'center',
+    zIndex: 1,
   },
   trailingIconsExpanded: {
     paddingBottom: spacing.xs,
@@ -535,6 +559,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xs,
     paddingTop: VERTICAL_PAD,
     paddingBottom: VERTICAL_PAD,
+    zIndex: 1,
   },
   bareInput: {
     minHeight: 40,

package/src/renderer/ui/index.ts

@@ -4,6 +4,7 @@ export { AppLoadingSpinner } from './AppLoadingSpinner';
 export { AuthStepShell } from './AuthStepShell';
 export { Card } from './Card';
 export { Chip } from './Chip';
+export { ChromeGlassLayer, ChromeGlassShell } from './ChromeGlass';
 export { ComposeAudiencePill } from './compose-audience-pill';
 export {
   ComposeCameraGlyph,