@tastic/hud 0.20.0 → 0.22.0

package/README.md

@@ -483,6 +483,7 @@ interface AchievementCatalogSectionProps {
   label?: string // default 'ALL ACHIEVEMENTS'
   fg?: string
   fgMuted?: string
+  sectionBg?: string // passed to every row
 }
 ```
 
@@ -495,9 +496,17 @@ stats object with these three fields satisfies it:
 ```ts
 interface ActivityStatSectionProps {
   stats: { distinctDaysPlayed: number; currentDayStreak: number; bestDayStreak: number }
+  fg?: string
+  fgMuted?: string
+  sectionBg?: string
 }
 ```
 
+**Wells.** Every `StatSection` and `AchievementRow` is a well: the theme's `surface` (the same surface as the dialogs)
+on MD3's level-1 shadow, with `onSurface`/`onSurfaceVariant` text. `useWellColors()` returns those colors and
+`WELL_SHADOW` the shadow, for an app's own cards (a menu tile) to match. Each component's `fg`/`fgMuted`/`sectionBg`
+props still override them.
+
 Composing both with `@tastic/achievements`' own row computation:
 
 ```tsx
@@ -625,7 +634,7 @@ touches the main barrel. It's for an app that has `@tastic/core` and `@rific/upd
 
 - Dialogs: `BaseSettingsDialog`, `ConfirmDialog`, `UpdateDialog`, `RotatedFrame`
 - Stats: `BaseStatsScreen`, `StatSection`, `StatRow`, `AchievementRow`, `LOCKED_BADGE_COLOR`,
-  `AchievementCatalogSection`, `ActivityStatSection`
+  `AchievementCatalogSection`, `ActivityStatSection`, `useWellColors`, `WELL_SHADOW`
 - Chrome: `CornerActionButtons`, `ContentGutter`, `StaggeredWord`, `getStaggeredWordDuration`
 - Overlay cards: `OverlayCard`, `OverlayBackdrop`, `useOverlayCardColors`, `DialogHeader`, `useCompactDialog`, `isCompactDialogHeight`, `COMPACT_DIALOG_HEIGHT`
 - Style tokens: `overlayStyles`, `overlayActionStyles`, `MONO_FONT`

package/dist/chrome/index.d.mts

@@ -9,8 +9,9 @@ interface Props$7 {
     label?: string;
     fg?: string;
     fgMuted?: string;
+    sectionBg?: string;
 }
-declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$7): react.JSX.Element;
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride, sectionBg }: Props$7): react.JSX.Element;
 
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 interface Props$6 {
@@ -35,8 +36,11 @@ interface ActivityStats {
 }
 interface Props$5 {
     stats: ActivityStats;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
 }
-declare function ActivityStatSection({ stats }: Props$5): react.JSX.Element;
+declare function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props$5): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -270,4 +274,12 @@ declare function useCompactDialog(rotation?: ViewRotation): {
     onLayout: (e: LayoutChangeEvent) => void;
 };
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors };
+declare const WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+interface WellColors {
+    bg: string;
+    fg: string;
+    fgMuted: string;
+}
+declare function useWellColors(): WellColors;
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, WELL_SHADOW, type WellColors, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, useWellColors };

package/dist/chrome/index.d.ts

@@ -9,8 +9,9 @@ interface Props$7 {
     label?: string;
     fg?: string;
     fgMuted?: string;
+    sectionBg?: string;
 }
-declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$7): react.JSX.Element;
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride, sectionBg }: Props$7): react.JSX.Element;
 
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 interface Props$6 {
@@ -35,8 +36,11 @@ interface ActivityStats {
 }
 interface Props$5 {
     stats: ActivityStats;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
 }
-declare function ActivityStatSection({ stats }: Props$5): react.JSX.Element;
+declare function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props$5): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -270,4 +274,12 @@ declare function useCompactDialog(rotation?: ViewRotation): {
     onLayout: (e: LayoutChangeEvent) => void;
 };
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors };
+declare const WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+interface WellColors {
+    bg: string;
+    fg: string;
+    fgMuted: string;
+}
+declare function useWellColors(): WellColors;
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, WELL_SHADOW, type WellColors, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, useWellColors };

package/dist/chrome/index.js

@@ -49,12 +49,14 @@ __export(chrome_exports, {
   StatRow: () => StatRow,
   StatSection: () => StatSection,
   UpdateDialog: () => UpdateDialog,
+  WELL_SHADOW: () => WELL_SHADOW,
   getStaggeredWordDuration: () => getStaggeredWordDuration,
   isCompactDialogHeight: () => isCompactDialogHeight,
   overlayActionStyles: () => overlayActionStyles,
   overlayStyles: () => overlayStyles,
   useCompactDialog: () => useCompactDialog,
-  useOverlayCardColors: () => useOverlayCardColors
+  useOverlayCardColors: () => useOverlayCardColors,
+  useWellColors: () => useWellColors
 });
 module.exports = __toCommonJS(chrome_exports);
 
@@ -65,16 +67,25 @@ var import_react_native3 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 
 // src/AchievementRow.tsx
-var import_auto_paper = require("@rific/auto-paper");
 var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
+
+// src/wellSurface.ts
+var import_auto_paper = require("@rific/auto-paper");
+var WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+function useWellColors() {
+  const { colors } = (0, import_auto_paper.useAutoPaperTheme)();
+  return { bg: colors.surface, fg: colors.onSurface, fgMuted: colors.onSurfaceVariant };
+}
+
+// src/AchievementRow.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
-  const { dark } = (0, import_auto_paper.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
+  const sectionBg = sectionBgOverride ?? well.bg;
   const unlocked = unlockedLabel !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
@@ -117,6 +128,7 @@ var styles = import_react_native.StyleSheet.create({
   row: {
     alignItems: "center",
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     flexDirection: "row",
     gap: 12,
     padding: 12
@@ -138,13 +150,13 @@ var MONO_FONT = import_react_native2.Platform.select({ ios: "Menlo", android: "m
 
 // src/AchievementCatalogSection.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
+function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride, sectionBg }) {
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
   const tierAccent = (tierColor) => dark ? tierColor : (0, import_auto_paper2.getBlendedColor)("#000000", tierColor, 0.5);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride, sectionBg }, row.id))
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -155,14 +167,13 @@ var styles2 = import_react_native3.StyleSheet.create({
 });
 
 // src/StatRow.tsx
-var import_auto_paper3 = require("@rific/auto-paper");
 var import_react_native4 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
-  const { dark } = (0, import_auto_paper3.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.row, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: [styles3.value, { color: fg }], children: value })
@@ -180,14 +191,13 @@ var styles3 = import_react_native4.StyleSheet.create({
 });
 
 // src/StatSection.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
 var import_react_native5 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
-  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const sectionBg = sectionBgOverride ?? well.bg;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: [styles4.section, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "labelMedium", style: [styles4.label, { color: fg }], children: label }),
     children
@@ -204,6 +214,7 @@ var styles4 = import_react_native5.StyleSheet.create({
   },
   section: {
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     gap: 8,
     padding: 16
   }
@@ -211,16 +222,16 @@ var styles4 = import_react_native5.StyleSheet.create({
 
 // src/ActivityStatSection.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ActivityStatSection({ stats }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(StatSection, { label: "ACTIVITY", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
+function ActivityStatSection({ stats, fg, fgMuted, sectionBg }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(StatSection, { label: "ACTIVITY", fg, sectionBg, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed), fg, fgMuted }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak), fg, fgMuted }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak), fg, fgMuted })
   ] });
 }
 
 // src/BaseSettingsDialog.tsx
-var import_auto_paper8 = require("@rific/auto-paper");
+var import_auto_paper6 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
 var import_core4 = require("@tastic/core");
@@ -230,7 +241,7 @@ var import_react_native_paper8 = require("react-native-paper");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // src/ConfirmDialog.tsx
-var import_auto_paper7 = require("@rific/auto-paper");
+var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
 var import_react3 = require("react");
@@ -238,7 +249,7 @@ var import_react_native10 = require("react-native");
 var import_react_native_paper6 = require("react-native-paper");
 
 // src/DialogHeader.tsx
-var import_auto_paper5 = require("@rific/auto-paper");
+var import_auto_paper3 = require("@rific/auto-paper");
 var import_react_native6 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -247,7 +258,7 @@ function isCompactDialogHeight(height) {
   return height < COMPACT_DIALOG_HEIGHT;
 }
 function DialogHeader({ icon, title, color, compact = false, style }) {
-  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper3.useAutoPaperTheme)();
   const accent = color ?? colors.primary;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [compact ? styles5.compact : styles5.full, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Icon, { source: icon, size: compact ? COMPACT_ICON_SIZE : ICON_SIZE, color: accent }),
@@ -344,11 +355,11 @@ var overlayActionStyles = import_react_native7.StyleSheet.create({
 });
 
 // src/OverlaySurface.tsx
-var import_auto_paper6 = require("@rific/auto-paper");
+var import_auto_paper4 = require("@rific/auto-paper");
 var import_react_native8 = require("react-native");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function useOverlayCardColors() {
-  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper4.useAutoPaperTheme)();
   return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
 }
 function OverlayBackdrop({ children, style, onLayout }) {
@@ -356,9 +367,9 @@ function OverlayBackdrop({ children, style, onLayout }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { onLayout, style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
 }
 function OverlayCard({ children, style, ...rest }) {
-  const { isV3, roundness } = (0, import_auto_paper6.useAutoPaperTheme)();
-  const blur = (0, import_auto_paper6.useBlur)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_auto_paper6.BlurView, { blur, style: [overlayStyles.card, styles6.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
+  const { isV3, roundness } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const blur = (0, import_auto_paper4.useBlur)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_auto_paper4.BlurView, { blur, style: [overlayStyles.card, styles6.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
 }
 var styles6 = import_react_native8.StyleSheet.create({
   card: { overflow: "hidden" }
@@ -384,7 +395,7 @@ function useCompactDialog(rotation = 0) {
 // src/ConfirmDialog.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
   const onCancelRef = (0, import_react3.useRef)(onCancel);
@@ -489,7 +500,7 @@ function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles9.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Icon, { source, size: 18, color }) });
 }
 function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
-  const { colors } = (0, import_auto_paper8.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
   const ambientRotation = (0, import_core4.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const window = (0, import_react_native12.useWindowDimensions)();
@@ -502,8 +513,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
   const sound = (0, import_react6.useContext)(import_feedback_press2.SoundContext);
   const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
-  const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper8.useThemeSettings)();
-  const expoBlur = (0, import_auto_paper8.useBlurModule)();
+  const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper6.useThemeSettings)();
+  const expoBlur = (0, import_auto_paper6.useBlurModule)();
   const [infoMessage, setInfoMessage] = (0, import_react6.useState)(null);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.useUpdater)({
@@ -526,8 +537,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const showUpdateCheck = import_react_native12.Platform.OS !== "web" && !hideUpdateCheck;
   if (!opened) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper8.Dialog, { visible, onDismiss, style: [styles9.dialog, { width: sheetWidth }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper8.Dialog.ScrollArea, { style: styles9.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper8.FadingScrollView, { contentContainerStyle: styles9.scrollContent, showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper6.Dialog, { visible, onDismiss, style: [styles9.dialog, { width: sheetWidth }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper6.Dialog.ScrollArea, { style: styles9.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper6.FadingScrollView, { contentContainerStyle: styles9.scrollContent, showsVerticalScrollIndicator: false, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogHeader, { icon: "cog", title: "Settings", compact: compactHeader }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.content, children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleGroup, children: [
@@ -609,7 +620,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
           ] }),
           showAppearance && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.section, children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper8.AutoAppearancePicker, { showLabels: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper6.AutoAppearancePicker, { showLabels: false }),
             showBlur && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles9.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
@@ -720,7 +731,7 @@ var styles9 = import_react_native12.StyleSheet.create({
 });
 
 // src/BaseStatsScreen.tsx
-var import_auto_paper9 = require("@rific/auto-paper");
+var import_auto_paper7 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
 var import_core5 = require("@tastic/core");
 var import_react7 = require("react");
@@ -728,7 +739,7 @@ var import_react_native13 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
-  const { dark, colors } = (0, import_auto_paper9.useAutoPaperTheme)();
+  const { dark, colors } = (0, import_auto_paper7.useAutoPaperTheme)();
   const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = (0, import_react7.useState)(false);
@@ -740,7 +751,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: titleVariant, style: [styles10.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.ScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper7.FadingScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles10.resetButton, children: resetLabel })
     ] }),
@@ -781,7 +792,7 @@ var styles10 = import_react_native13.StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.
@@ -898,10 +909,12 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
   StatRow,
   StatSection,
   UpdateDialog,
+  WELL_SHADOW,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   overlayActionStyles,
   overlayStyles,
   useCompactDialog,
-  useOverlayCardColors
+  useOverlayCardColors,
+  useWellColors
 });

package/dist/chrome/index.mjs

@@ -14,9 +14,11 @@ import {
   StatRow,
   StatSection,
   UpdateDialog,
+  WELL_SHADOW,
   getStaggeredWordDuration,
-  useCompactDialog
-} from "../chunk-DK3HOZC5.mjs";
+  useCompactDialog,
+  useWellColors
+} from "../chunk-N7A7W72S.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,
@@ -47,10 +49,12 @@ export {
   StatRow,
   StatSection,
   UpdateDialog,
+  WELL_SHADOW,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   overlayActionStyles,
   overlayStyles,
   useCompactDialog,
-  useOverlayCardColors
+  useOverlayCardColors,
+  useWellColors
 };

package/dist/{chunk-DK3HOZC5.mjs → chunk-N7A7W72S.mjs}

@@ -8,17 +8,24 @@ import {
   useOverlayCardColors
 } from "./chunk-PUF6TABL.mjs";
 
-// src/AchievementRow.tsx
+// src/wellSurface.ts
 import { useAutoPaperTheme } from "@rific/auto-paper";
+var WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+function useWellColors() {
+  const { colors } = useAutoPaperTheme();
+  return { bg: colors.surface, fg: colors.onSurface, fgMuted: colors.onSurfaceVariant };
+}
+
+// src/AchievementRow.tsx
 import { StyleSheet, View } from "react-native";
 import { Icon, ProgressBar, Text } from "react-native-paper";
 import { jsx, jsxs } from "react/jsx-runtime";
 var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
-  const { dark } = useAutoPaperTheme();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
+  const sectionBg = sectionBgOverride ?? well.bg;
   const unlocked = unlockedLabel !== void 0;
   return /* @__PURE__ */ jsxs(View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ jsx(View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ jsx(Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
@@ -61,6 +68,7 @@ var styles = StyleSheet.create({
   row: {
     alignItems: "center",
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     flexDirection: "row",
     gap: 12,
     padding: 12
@@ -86,13 +94,13 @@ import { Fragment } from "react";
 import { StyleSheet as StyleSheet2 } from "react-native";
 import { Text as Text2 } from "react-native-paper";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
+function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride, sectionBg }) {
   const { dark } = useAutoPaperTheme2();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
   const tierAccent = (tierColor) => dark ? tierColor : getBlendedColor("#000000", tierColor, 0.5);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(Text2, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ jsx2(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ jsx2(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride, sectionBg }, row.id))
   ] });
 }
 var styles2 = StyleSheet2.create({
@@ -103,14 +111,13 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/StatRow.tsx
-import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { StyleSheet as StyleSheet3, View as View2 } from "react-native";
 import { Text as Text3 } from "react-native-paper";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
-  const { dark } = useAutoPaperTheme3();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
   return /* @__PURE__ */ jsxs3(View2, { style: styles3.row, children: [
     /* @__PURE__ */ jsx3(Text3, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ jsx3(Text3, { variant: "bodyMedium", style: [styles3.value, { color: fg }], children: value })
@@ -128,14 +135,13 @@ var styles3 = StyleSheet3.create({
 });
 
 // src/StatSection.tsx
-import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
 import { StyleSheet as StyleSheet4, View as View3 } from "react-native";
 import { Text as Text4 } from "react-native-paper";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
-  const { dark } = useAutoPaperTheme4();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const sectionBg = sectionBgOverride ?? well.bg;
   return /* @__PURE__ */ jsxs4(View3, { style: [styles4.section, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ jsx4(Text4, { variant: "labelMedium", style: [styles4.label, { color: fg }], children: label }),
     children
@@ -152,6 +158,7 @@ var styles4 = StyleSheet4.create({
   },
   section: {
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     gap: 8,
     padding: 16
   }
@@ -159,11 +166,11 @@ var styles4 = StyleSheet4.create({
 
 // src/ActivityStatSection.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function ActivityStatSection({ stats }) {
-  return /* @__PURE__ */ jsxs5(StatSection, { label: "ACTIVITY", children: [
-    /* @__PURE__ */ jsx5(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
-    /* @__PURE__ */ jsx5(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
-    /* @__PURE__ */ jsx5(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
+function ActivityStatSection({ stats, fg, fgMuted, sectionBg }) {
+  return /* @__PURE__ */ jsxs5(StatSection, { label: "ACTIVITY", fg, sectionBg, children: [
+    /* @__PURE__ */ jsx5(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed), fg, fgMuted }),
+    /* @__PURE__ */ jsx5(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak), fg, fgMuted }),
+    /* @__PURE__ */ jsx5(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak), fg, fgMuted })
   ] });
 }
 
@@ -185,7 +192,7 @@ function useCompactDialog(rotation = 0) {
 }
 
 // src/ConfirmDialog.tsx
-import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
+import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { Button } from "@rific/feedback-press";
 import { toRotationStyle } from "@tastic/core";
 import { useEffect, useRef } from "react";
@@ -193,7 +200,7 @@ import { BackHandler, StyleSheet as StyleSheet5, View as View4 } from "react-nat
 import { Portal, Text as Text5 } from "react-native-paper";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { colors } = useAutoPaperTheme5();
+  const { colors } = useAutoPaperTheme3();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
   const onCancelRef = useRef(onCancel);
@@ -273,7 +280,7 @@ var styles6 = StyleSheet6.create({
 });
 
 // src/BaseSettingsDialog.tsx
-import { AutoAppearancePicker, Dialog, FadingScrollView, useAutoPaperTheme as useAutoPaperTheme6, useBlurModule, useThemeSettings } from "@rific/auto-paper";
+import { AutoAppearancePicker, Dialog, FadingScrollView, useAutoPaperTheme as useAutoPaperTheme4, useBlurModule, useThemeSettings } from "@rific/auto-paper";
 import { Button as Button2, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
 import { rotateInsets as rotateInsets2, useIsTouchPrimaryDevice, useRotation as useRotation2 } from "@tastic/core";
@@ -308,7 +315,7 @@ function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ jsx8(View6, { style: [styles7.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx8(Icon2, { source, size: 18, color }) });
 }
 function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
-  const { colors } = useAutoPaperTheme6();
+  const { colors } = useAutoPaperTheme4();
   const ambientRotation = useRotation2();
   const rotation = rotationOverride ?? ambientRotation;
   const window = useWindowDimensions3();
@@ -539,15 +546,15 @@ var styles7 = StyleSheet7.create({
 });
 
 // src/BaseStatsScreen.tsx
-import { useAutoPaperTheme as useAutoPaperTheme7 } from "@rific/auto-paper";
+import { FadingScrollView as FadingScrollView2, useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
 import { Button as Button3, IconButton } from "@rific/feedback-press";
 import { useRotation as useRotation3 } from "@tastic/core";
 import { useState as useState4 } from "react";
-import { ScrollView, StyleSheet as StyleSheet8, View as View7 } from "react-native";
+import { StyleSheet as StyleSheet8, View as View7 } from "react-native";
 import { Text as Text7 } from "react-native-paper";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
-  const { dark, colors } = useAutoPaperTheme7();
+  const { dark, colors } = useAutoPaperTheme5();
   const ambientRotation = useRotation3();
   const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = useState4(false);
@@ -559,7 +566,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ jsx9(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ jsx9(Text7, { variant: titleVariant, style: [styles8.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ jsxs8(ScrollView, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ jsxs8(FadingScrollView2, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ jsx9(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles8.resetButton, children: resetLabel })
     ] }),
@@ -600,7 +607,7 @@ var styles8 = StyleSheet8.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.
@@ -698,6 +705,8 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
 }
 
 export {
+  WELL_SHADOW,
+  useWellColors,
   LOCKED_BADGE_COLOR,
   AchievementRow,
   MONO_FONT,