@expokit/cli 0.4.3 → 0.4.4

package/registry/bottom-nav/files/src/components/ui/bottom-nav.tsx

@@ -371,12 +371,13 @@ export function BottomNav({
   ) : null;
 
   if (look === 'floating') {
-    // Two shadows: a wide soft one on the outer view, a tight contact one on the bar itself.
+    // Two shadows: a wide soft one on the outer view, a tight contact one on the bar itself
+    // (boxShadow, so they look the same on iOS, Android and web).
     return (
       <View
         style={[
           styles.floatOuter,
-          { marginBottom: 12 + bottomInset, borderRadius: floatR, backgroundColor: surface, shadowOpacity: dark ? 0.55 : 0.1 },
+          { marginBottom: 12 + bottomInset, borderRadius: floatR, backgroundColor: surface, boxShadow: `0px 12px 48px rgba(0,0,0,${dark ? 0.55 : 0.1})` },
           style,
         ]}
       >
@@ -390,7 +391,7 @@ export function BottomNav({
               borderRadius: floatR,
               backgroundColor: surface,
               borderColor: hairline,
-              shadowOpacity: dark ? 0.35 : 0.06,
+              boxShadow: `0px 1px 6px rgba(0,0,0,${dark ? 0.35 : 0.06})`,
             },
           ]}
         >
@@ -744,7 +745,7 @@ function FabFace({
           </Svg>
         </Animated.View>
       ) : null}
-      <View style={[styles.fab, { width: size, height: size, borderRadius: r, backgroundColor: from, shadowColor: from }]}>
+      <View style={{ width: size, height: size, borderRadius: r, backgroundColor: from, boxShadow: `0px 6px 24px ${alpha(from, 0.4)}` }}>
         <Svg width={size} height={size} style={StyleSheet.absoluteFill}>
           <Defs>
             {twoTone ? (
@@ -959,16 +960,9 @@ const styles = StyleSheet.create({
   },
   floatOuter: {
     marginHorizontal: 16,
-    shadowColor: '#000',
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 12 },
-    elevation: 10,
   },
   floatInner: {
     borderWidth: StyleSheet.hairlineWidth,
-    shadowColor: '#000',
-    shadowRadius: 3,
-    shadowOffset: { width: 0, height: 1 },
   },
   row: {
     flexDirection: 'row',
@@ -995,6 +989,8 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     marginTop: 4,
     letterSpacing: 0.1,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
   floatLabel: {
     position: 'absolute',
@@ -1013,6 +1009,8 @@ const styles = StyleSheet.create({
     fontSize: 13.5,
     fontWeight: '400',
     letterSpacing: -0.1,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
   measure: {
     position: 'absolute',
@@ -1022,12 +1020,6 @@ const styles = StyleSheet.create({
   selfStart: {
     alignSelf: 'flex-start',
   },
-  fab: {
-    shadowOpacity: 0.4,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 6 },
-    elevation: 6,
-  },
   home: {
     position: 'absolute',
     bottom: 6,
@@ -1059,5 +1051,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     lineHeight: 12,
     fontVariant: ['tabular-nums'],
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
 });

package/registry/bottom-nav/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
+ * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   space: (n: number) => number;
+  /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
+  shadow: (level: ShadowLevel, color?: string) => ViewStyle;
   font: { family?: string; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/bottom-sheet/files/src/components/ui/bottom-sheet.tsx

@@ -20,7 +20,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { alpha, motion, useKit } from '@/lib/kit';
+import { alpha, motion, useKit, useLayout } from '@/lib/kit';
 
 export type SnapPoint = number | `${number}%`;
 
@@ -126,6 +126,8 @@ export function BottomSheet({
   const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const { height: screen } = useWindowDimensions();
+  // Full width on portrait phones; a centred, width-capped card on foldables, tablets and landscape.
+  const { sheetWidth } = useLayout();
 
   // No snap points: one detent at the content's own height, measured before the sheet slides in.
   const auto = !snapPoints || snapPoints.length === 0;
@@ -423,8 +425,8 @@ export function BottomSheet({
               styles.sheet,
               {
                 height: max + OVERDRAG,
+                width: sheetWidth,
                 opacity: measured ? 1 : 0,
-                shadowOpacity: dark ? 0.5 : 0.12,
                 transform: [{ translateY: Animated.add(y, lift) }],
               },
               style,
@@ -439,7 +441,8 @@ export function BottomSheet({
                   borderTopLeftRadius: corner,
                   borderTopRightRadius: corner,
                   borderColor: hairline,
-                  shadowOpacity: dark ? 0.35 : 0.06,
+                  // Ambient + contact shadow as boxShadow: identical on iOS, Android and web.
+                  boxShadow: `0px -8px 64px rgba(0,0,0,${dark ? 0.5 : 0.12}), 0px -1px 6px rgba(0,0,0,${dark ? 0.35 : 0.06})`,
                 },
               ]}
             >
@@ -549,21 +552,11 @@ const styles = StyleSheet.create({
   // No text selection while dragging with a mouse on web.
   grab: Platform.OS === 'web' ? ({ userSelect: 'none', cursor: 'grab' } as object) : {},
   dock: { position: 'absolute', left: 0, right: 0, bottom: -OVERDRAG, alignItems: 'center' },
-  sheet: {
-    width: '100%',
-    maxWidth: 640,
-    shadowColor: '#000',
-    shadowRadius: 32,
-    shadowOffset: { width: 0, height: -8 },
-    elevation: 24,
-  },
+  sheet: { maxWidth: '100%' },
   surface: {
     flex: 1,
     borderWidth: StyleSheet.hairlineWidth,
     borderBottomWidth: 0,
-    shadowColor: '#000',
-    shadowRadius: 3,
-    shadowOffset: { width: 0, height: -1 },
   },
   handleArea: { alignItems: 'center', paddingTop: 8, paddingBottom: 10, minHeight: 28 },
   handle: { width: 36, height: 5 },

package/registry/bottom-sheet/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
+ * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   space: (n: number) => number;
+  /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
+  shadow: (level: ShadowLevel, color?: string) => ViewStyle;
   font: { family?: string; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/button/files/src/components/ui/button.tsx

@@ -121,7 +121,7 @@ export function Button({
   onPressOut,
   ...props
 }: ButtonProps) {
-  const { colors, radius, dark, font } = useKit();
+  const { colors, radius, dark, font, shadow } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const gid = 'btn' + useId().replace(/[^a-zA-Z0-9]/g, '');
   const reduce = useReduceMotion();
@@ -208,9 +208,9 @@ export function Button({
             opacity: isDisabled ? 0.5 : pressed && variant === 'link' ? 0.6 : 1,
           },
           pressed && quiet && variant !== 'link' && { backgroundColor: color ? alpha(tint, 0.1) : colors.muted },
-          // Coloured glow under the button (iOS / web; Android shows plain elevation).
-          variant === 'glow' && !isDisabled && [styles.glow, { shadowColor: tint }],
-          variant === 'elevated' && styles.elevated,
+          // Coloured glow / soft lift as boxShadow: the same on iOS, Android and web.
+          variant === 'glow' && !isDisabled && { boxShadow: `0px 6px 28px ${alpha(tint, 0.45)}` },
+          variant === 'elevated' && shadow('md'),
         ]}
         {...props}
       >
@@ -285,19 +285,6 @@ const styles = StyleSheet.create({
   base: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
   row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
   block: { alignSelf: 'stretch' },
-  label: { fontWeight: '400', letterSpacing: -0.1 },
+  label: { fontWeight: '400', letterSpacing: -0.1, includeFontPadding: false, textAlignVertical: 'center' },
   link: { textDecorationLine: 'underline' },
-  glow: {
-    shadowOpacity: 0.45,
-    shadowRadius: 14,
-    shadowOffset: { width: 0, height: 6 },
-    elevation: 6,
-  },
-  elevated: {
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 3 },
-    elevation: 3,
-  },
 });

package/registry/button/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
+ * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   space: (n: number) => number;
+  /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
+  shadow: (level: ShadowLevel, color?: string) => ViewStyle;
   font: { family?: string; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/button-3d/files/src/components/ui/button-3d.tsx

@@ -131,7 +131,7 @@ export function Button3D({
   ) : isTextNode(children) ? (
     // No numberOfLines: on a narrow fixed-width key ("esc", "Q") the label may use the padding
     // instead of being cut to an ellipsis.
-    <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: m.ink, fontSize: round ? s.font + 4 : s.font, fontWeight: '600', letterSpacing: 0.1, flexShrink: 0, textAlign: 'center' }, ff]}>
+    <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: m.ink, fontSize: round ? s.font + 4 : s.font, fontWeight: '600', letterSpacing: 0.1, flexShrink: 0, textAlign: 'center', includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
       {children}
     </Text>
   ) : (
@@ -180,15 +180,14 @@ export function Button3D({
               top: depth,
               borderRadius: corner,
               backgroundColor: m.edge[1],
-              shadowOpacity: m.shadow,
+              // boxShadow: the same contact shadow on iOS, Android and web.
+              boxShadow: `0px 5px 16px rgba(0,0,0,${m.shadow})`,
               opacity: press.interpolate({ inputRange: [0, 1], outputRange: [1, 0.55] }),
             },
-            styles.shadow,
           ]}
         />
         {/* The edge: the keycap's darker side. */}
-        {/* elevation (no background → no shadow) keeps the edge and face above the shadow layer on Android. */}
-        <View style={[styles.fill, { top: depth, borderRadius: corner, overflow: 'hidden', elevation: 3 }]}>{gradient(`${gid}-e`, m.edge)}</View>
+        <View style={[styles.fill, { top: depth, borderRadius: corner, overflow: 'hidden' }]}>{gradient(`${gid}-e`, m.edge)}</View>
         <Animated.View
           style={[
             styles.face,
@@ -199,7 +198,6 @@ export function Button3D({
               paddingHorizontal: round ? 0 : s.px,
               gap: s.gap,
               borderRadius: corner,
-              elevation: 4,
               // Reduce Motion: the key doesn't sink; only the contact shadow dims.
               transform: reduce ? [] : [{ translateY: press.interpolate({ inputRange: [0, 1], outputRange: [0, depth] }) }],
             },
@@ -235,6 +233,5 @@ function useReduceMotion() {
 
 const styles = StyleSheet.create({
   fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
-  shadow: { shadowColor: '#000', shadowRadius: 8, shadowOffset: { width: 0, height: 5 }, elevation: 3 },
   face: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
 });