@tastic/hud 0.15.0 → 0.16.0

package/README.md

@@ -52,7 +52,13 @@ corner of the screen.
   instead of reusing this component there, a real (if minor) missed-reuse case worth fixing next
   time one of those screens gets touched. Not the right fit for a screen where the top corners fall
   *inside* one player's own rotated zone (two-player face-to-face) - see `SharedActionBand` for
-  that case instead.
+  that case instead. Each button's touch target is its own 40pt box. Pass the optional `hitSlop`
+  (a number or `Insets`, forwarded to both buttons) to grow it without changing anything visible:
+  `hitSlop={4}` makes a 48pt target, and the glyphs and press ripple stay as they are. It needs
+  `@rific/feedback-press` 0.13.0 or later, whose `IconButton` makes `hitSlop` reach past Paper's
+  clipped box (older versions silently ignore it). Omit it to keep the 40pt target. Leave room for
+  it: the slop reaches past each button's box, and where it overlaps another touch target,
+  whichever is drawn on top gets the press.
 - **`StaggeredWord`** / **`getStaggeredWordDuration`** - the letter-by-letter stagger-in animation
   every app's own hero-title screen had hand-rolled independently, identical down to the same 45ms
   stagger, 320ms per-letter duration, and back-ease overshoot. Renders one word/line at a time - a

package/dist/chrome/index.d.mts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, TextStyle, LayoutChangeEvent } from 'react-native';
+import { StyleProp, ViewStyle, Insets, TextStyle, LayoutChangeEvent } from 'react-native';
 
 interface Props$7 {
     rows: AchievementCatalogRow[];
@@ -113,8 +113,9 @@ interface Props$2 {
     };
     backIcon?: string;
     backLabel?: string;
+    hitSlop?: number | Insets;
 }
-declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel }: Props$2): react.JSX.Element;
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
 
 declare const MONO_FONT: string;
 

package/dist/chrome/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, TextStyle, LayoutChangeEvent } from 'react-native';
+import { StyleProp, ViewStyle, Insets, TextStyle, LayoutChangeEvent } from 'react-native';
 
 interface Props$7 {
     rows: AchievementCatalogRow[];
@@ -113,8 +113,9 @@ interface Props$2 {
     };
     backIcon?: string;
     backLabel?: string;
+    hitSlop?: number | Insets;
 }
-declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel }: Props$2): react.JSX.Element;
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
 
 declare const MONO_FONT: string;
 

package/dist/chrome/index.js

@@ -693,10 +693,10 @@ var styles9 = import_react_native11.StyleSheet.create({
 var import_feedback_press4 = require("@rific/feedback-press");
 var import_react_native12 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
+function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press4.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press4.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
 var styles10 = import_react_native12.StyleSheet.create({

package/dist/chrome/index.mjs

@@ -15,7 +15,7 @@ import {
   StatSection,
   UpdateDialog,
   getStaggeredWordDuration
-} from "../chunk-OTMMST5M.mjs";
+} from "../chunk-JXRBXQLQ.mjs";
 import {
   getOverlayCardColors,
   overlayActionStyles,

package/dist/{chunk-OTMMST5M.mjs → chunk-JXRBXQLQ.mjs}

@@ -569,10 +569,10 @@ var styles9 = StyleSheet9.create({
 import { IconButton as IconButton2 } from "@rific/feedback-press";
 import { StyleSheet as StyleSheet10 } from "react-native";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
+function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsx11(IconButton2, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ jsx11(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+    /* @__PURE__ */ jsx11(IconButton2, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ jsx11(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
 var styles10 = StyleSheet10.create({

package/dist/index.js

@@ -1251,10 +1251,10 @@ function ControlSchemePicker({ id, host, value, onChange, options, takenValue, a
 var import_feedback_press5 = require("@rific/feedback-press");
 var import_react_native18 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
+function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press5.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles14.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press5.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles14.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press5.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles14.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press5.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles14.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
 var styles14 = import_react_native18.StyleSheet.create({

package/dist/index.mjs

@@ -18,7 +18,7 @@ import {
   StatSection,
   UpdateDialog,
   getStaggeredWordDuration
-} from "./chunk-OTMMST5M.mjs";
+} from "./chunk-JXRBXQLQ.mjs";
 import {
   getOverlayCardColors,
   overlayActionStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",

package/src/CornerActionButtons.tsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@rific/feedback-press'
-import { StyleSheet } from 'react-native'
+import { type Insets, StyleSheet } from 'react-native'
 
 interface Props {
   onBack: () => void
@@ -20,6 +20,14 @@ interface Props {
   // together - an icon without a matching label (or vice versa) misleads screen readers/tooltips.
   backIcon?: string
   backLabel?: string
+  // Opt-in extra touch area on both buttons, forwarded as each IconButton's own hitSlop (RN's
+  // number | Insets). Each button's target is its 40pt box (24pt glyph plus Paper's 8pt padding), so
+  // 4 makes it 48pt. Nothing visible changes: the glyphs, the press ripple and the 8pt corner offset
+  // all stay put. Needs @rific/feedback-press 0.13.0 or later, whose IconButton makes hitSlop reach
+  // past Paper's clipped box; on older versions it's silently ignored. Omitted means no slop, as
+  // before. The caller owns what sits near its corners, so it's the one that knows how much room
+  // there is.
+  hitSlop?: number | Insets
 }
 
 // Back (top-left) + Settings (top-right) icon buttons, fixed at the screen's rotated corners - the
@@ -28,11 +36,11 @@ interface Props {
 // right answer for a screen where the top corners themselves fall *inside* one player's own rotated
 // zone (two-player face-to-face) - see SharedActionBand for that case instead, which callers select
 // between based on their own game-mode/orientation state (this component has no opinion on which).
-export function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = 'arrow-left', backLabel = 'Back' }: Props) {
+export function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = 'arrow-left', backLabel = 'Back', hitSlop }: Props) {
   return (
     <>
-      <IconButton icon={backIcon} iconColor={fg} size={24} style={[styles.back, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={onBack} accessibilityLabel={backLabel} />
-      <IconButton icon='cog' iconColor={fg} size={24} style={[styles.topRight, { top: 8 + insets.top, right: 8 + insets.right }]} onPress={onSettings} accessibilityLabel='Settings' />
+      <IconButton icon={backIcon} iconColor={fg} size={24} style={[styles.back, { top: 8 + insets.top, left: 8 + insets.left }]} hitSlop={hitSlop} onPress={onBack} accessibilityLabel={backLabel} />
+      <IconButton icon='cog' iconColor={fg} size={24} style={[styles.topRight, { top: 8 + insets.top, right: 8 + insets.right }]} hitSlop={hitSlop} onPress={onSettings} accessibilityLabel='Settings' />
     </>
   )
 }