@tastic/hud 0.5.0 → 0.6.0

package/src/BaseSettingsDialog.tsx

@@ -334,25 +334,25 @@ const styles = StyleSheet.create({
   sectionLabel: {
     letterSpacing: 2
   },
-  // Negative margin cancels the padding so the icon still lines up with APPEARANCE/SOUND &
-  // HAPTICS below, while the ripple/hover highlight itself gets room to breathe on both sides
-  // instead of a flush edge-to-edge slab. overflow: 'hidden' makes sure that highlight actually
-  // clips to borderRadius instead of drawing as a plain rectangle.
+  // Used to carry marginHorizontal: -12 + paddingHorizontal: 12 (netting to the same inset as
+  // APPEARANCE/SOUND & HAPTICS below, while giving the ripple/hover highlight room to breathe
+  // into the dialog's own gutter beyond that). Removed: this dialog scrolls (Dialog.ScrollArea +
+  // ScrollView above), and on web a ScrollView's own content wrapper clips to its own bounds
+  // regardless of a child's negative margin - confirmed live, the icon's own rounded-square badge
+  // was getting its left edge sliced off by exactly that overhang. No horizontal inset of its own
+  // now - it relies purely on the same dialog padding APPEARANCE/every other row already does,
+  // which can never overflow because it's never negative.
   toggleButton: {
     borderRadius: 12,
-    marginHorizontal: -12,
     overflow: 'hidden',
-    paddingHorizontal: 12,
     paddingVertical: 10
   },
-  // Same shape as toggleButton but `flex: 1` instead of its own `marginHorizontal: -12` — two of
-  // these side by side in toggleRow would otherwise both pull inward and collide in the middle.
-  // toggleRow carries that edge-alignment margin once, for the row as a whole, instead.
+  // Same shape as toggleButton, `flex: 1` instead of its own width - two of these side by side in
+  // toggleRow share the row's own edge alignment instead of each carrying their own.
   toggleButtonInRow: {
     borderRadius: 12,
     flex: 1,
     overflow: 'hidden',
-    paddingHorizontal: 12,
     paddingVertical: 10
   },
   toggleContent: {
@@ -363,9 +363,9 @@ const styles = StyleSheet.create({
   toggleGroup: {
     gap: 4
   },
+  // No horizontal margin of its own now either - see toggleButton's identical note.
   toggleRow: {
     flexDirection: 'row',
-    gap: 4,
-    marginHorizontal: -12
+    gap: 4
   }
 })

package/src/ContentGutter.tsx

@@ -0,0 +1,55 @@
+import { computeContentBounds } from '@tastic/core'
+import { ReactNode } from 'react'
+import { StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native'
+
+interface Props {
+  // Upper bound on the centered content region's width, in px. Omitted (the default) means no
+  // clamp at all - content fills the full window width and both gutters stay at 0 - the right
+  // default for a caller that wants this component's centered-content structure without ever
+  // actually capping width (e.g. a future full-bleed/"extend into safe area"-style mode: just
+  // don't pass this prop for that mode, rather than needing a separate disable flag).
+  maxContentWidth?: number
+  // Decoration for the left/right leftover space once maxContentWidth actually clamps something -
+  // e.g. a boundary wall. Each renders inside a View already sized to that side's own
+  // gutterWidth (0, and so with no room to show in, whenever nothing's clamped) - omit either/both
+  // for plain empty space, the default.
+  leftGutter?: ReactNode
+  rightGutter?: ReactNode
+  style?: StyleProp<ViewStyle>
+  children: ReactNode
+}
+
+// Caps a game's play area at maxContentWidth on a wide desktop/web window, splitting whatever's
+// left over into two equal, empty-by-default gutters instead of letting content keep stretching
+// (or drift off-center, left-anchored inside a now-much-wider parent) past the point where growing
+// any further stops being useful. Below maxContentWidth - or with it omitted entirely - this is a
+// no-op passthrough: children render at the full window width, no gutters.
+//
+// See @tastic/core's computeContentBounds for the actual clamp math this just wires up to a live
+// useWindowDimensions() read - deliberately the only geometry source this component owns itself; a
+// caller that also needs to fold in device safe-area insets or a split-screen zone boundary
+// composes those together on its own side, the same way LightCycles' useZoneClampedAlign composes
+// useAutoAlign with its own extra geometry (see that hook for the pattern this follows).
+export function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props) {
+  const { width: windowWidth } = useWindowDimensions()
+  const { contentWidth, gutterWidth } = computeContentBounds(windowWidth, maxContentWidth ?? Infinity)
+
+  return (
+    <View style={[styles.row, style]}>
+      <View style={[styles.gutter, { width: gutterWidth }]}>{leftGutter}</View>
+      <View style={{ width: contentWidth }}>{children}</View>
+      <View style={[styles.gutter, { width: gutterWidth }]}>{rightGutter}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
+  // column instead of clipping cleanly at its own real width.
+  gutter: {
+    overflow: 'hidden'
+  },
+  row: {
+    flexDirection: 'row'
+  }
+})

package/src/InlineColorPicker.tsx

@@ -40,6 +40,13 @@ interface Props {
   host: PopoverHost
   value: string
   onChange: (hex: string) => void
+  // Transforms only what's *rendered* — trigger fill, swatch fill, and the contrast/caret/border
+  // colors derived from them — leaving `value`/`swatch.value` themselves untouched for `selected`/
+  // `taken` matching and for what onChange actually commits. For a host whose own theme mutes or
+  // tints a raw seed color before it's actually used elsewhere (e.g. blending it toward a base
+  // palette for a card-back tint), so the picker can preview that real result per-swatch instead of
+  // the too-vibrant seed hue, without changing what gets stored.
+  previewValue?: (hex: string) => string
   swatches?: SeedColor[]
   // The other player's current color, if any — stays visible in the grid (so the full palette
   // reads consistently for both players) but renders disabled with an X, rather than being
@@ -82,7 +89,7 @@ interface Props {
 // Renders inline rather than as a full-screen modal, scoped to its own panel — a modal color
 // picker would block the whole screen for one player while another can't touch their own panel at
 // the same time, which defeats the point of a split-screen lobby.
-export function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
+export function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const { width: windowWidth } = useWindowDimensions()
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS)
@@ -94,7 +101,9 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
   const open = host.openId === id
   const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight)
   const align = alignOverride ?? autoAlign
-  const contrastColor = getContrastColor(value)
+  const displayFor = previewValue ?? ((hex: string) => hex)
+  const displayValue = displayFor(value)
+  const contrastColor = getContrastColor(displayValue)
   // An emoji glyph reads visually smaller than a bold letter at the same fontSize (the system emoji
   // font leaves more of its own em-box empty), so a plain-text ratio that looks right for an initial
   // still looks small for an emoji tag at the identical size — this bumps emoji up to the icon's own
@@ -103,7 +112,7 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
 
   return (
     <View style={[styles.anchor, open && styles.anchorOpen]}>
-      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }]}>
+      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }]}>
         <View ref={triggerRef} collapsable={false} style={styles.triggerMeasure}>
           {/* Sized as a fraction of the trigger's own diameter rather than a fixed pixel size, so
           the glyph still reads as a deliberate part of the circle instead of shrinking toward its
@@ -121,18 +130,19 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
       {/* Gated on `measured`, not just `open` — see useAutoAlign's own comment and
       SectionedDropdown's identical fix: without it, the popover mounts for one frame at a stale or
       guessed alignment and visibly jumps once this open's own measurement lands. */}
-      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={value} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={size}>
+      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={displayValue} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={size}>
         {/* Border matches this trigger's own current color (not a neutral gray) — two triggers can
         sit close together, so the popover needs a clear visual tie back to which one opened it,
         not just its screen position. maxHeight (see useAutoAlign) only actually clamps on a screen
         short enough that the full grid can't fit above or below the trigger either way — a short
         landscape screen with the trigger row near the top, same case SectionedDropdown's own
         ScrollView exists for. */}
-        <ScrollView style={[styles.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }]} contentContainerStyle={styles.swatchesContent} showsVerticalScrollIndicator={false}>
+        <ScrollView style={[styles.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }]} contentContainerStyle={styles.swatchesContent} showsVerticalScrollIndicator={false}>
           {swatches.map((swatch) => {
             const selected = swatch.value.toLowerCase() === value.toLowerCase()
             const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase()
             const swappable = taken && allowSwapTaken
+            const swatchDisplay = displayFor(swatch.value)
             return (
               <TouchableRipple
                 key={swatch.value}
@@ -142,9 +152,9 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
                   if (autoDismiss) host.close()
                 }}
                 borderless
-                style={[styles.swatch, { backgroundColor: swatch.value }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]}
+                style={[styles.swatch, { backgroundColor: swatchDisplay }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]}
               >
-                {selected ? <Icon source='check' size={16} color={getContrastColor(swatch.value)} /> : swappable ? <Icon source='swap-horizontal' size={16} color={getContrastColor(swatch.value)} /> : taken ? <Icon source='close' size={16} color={getContrastColor(swatch.value)} /> : <View />}
+                {selected ? <Icon source='check' size={16} color={getContrastColor(swatchDisplay)} /> : swappable ? <Icon source='swap-horizontal' size={16} color={getContrastColor(swatchDisplay)} /> : taken ? <Icon source='close' size={16} color={getContrastColor(swatchDisplay)} /> : <View />}
               </TouchableRipple>
             )
           })}
@@ -200,6 +210,10 @@ const styles = StyleSheet.create({
     gap: SWATCHES_GAP,
     padding: SWATCHES_PADDING
   },
+  tagLabel: {
+    fontWeight: '700',
+    letterSpacing: 0.5
+  },
   // borderRadius/height/width come from the `size` prop instead (see render-site override) — no
   // fixed default here, since this style object is shared by every caller regardless of size.
   trigger: {
@@ -218,9 +232,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: 4,
     width: '100%'
-  },
-  tagLabel: {
-    fontWeight: '700',
-    letterSpacing: 0.5
   }
 })

package/src/SectionedDropdown.tsx

@@ -53,6 +53,12 @@ export interface SingleSelectSection<T extends string | number> {
   options: MenuOption<T>[]
   value: T
   onChange: (value: T) => void
+  // Another seat's currently-selected value in this section, if any — stays in `options` (so the
+  // trigger gauge below keeps indexing into the one list every seat shares, instead of each seat's
+  // gauge landing wherever its own filtered-down list happens to put the remaining values) but
+  // renders disabled and dimmed, unselectable. Same "shown, not removed" treatment as
+  // InlineColorPicker's own takenValue, for the same reason.
+  takenValue?: T
 }
 
 // Any number of these can be true at once — checkbox-style. Tapping a row toggles just that one and
@@ -250,12 +256,13 @@ function SingleSection({
     <>
       {section.options.map((option) => {
         const selected = option.value === section.value
+        const taken = !selected && option.value === section.takenValue
         const rowColor = selected ? onAccentColor : mutedColor
-        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }]
+        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }, taken && styles.itemTaken]
         const labelStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? 'bold' : 'normal' }
         const descriptionStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor }
         return (
-          <TouchableRipple key={option.value} onPress={() => onSelect(option.value)} style={itemStyle}>
+          <TouchableRipple key={option.value} disabled={taken} onPress={() => onSelect(option.value)} style={itemStyle}>
             <View style={styles.itemRow}>
               {option.icon && <Icon source={option.icon} size={MENU_ITEM_ICON_SIZE} color={rowColor} />}
               <View style={styles.itemLabelColumn}>
@@ -367,6 +374,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 8
   },
+  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken — the fleet's
+  // established "shown, not removed" treatment for another seat's own current pick.
+  itemTaken: {
+    opacity: 0.35
+  },
   menu: {
     borderRadius: 12,
     borderWidth: MENU_BORDER_WIDTH,

package/src/index.ts

@@ -1,6 +1,7 @@
 export { AchievementRow, LOCKED_BADGE_COLOR } from './AchievementRow'
 export { BaseSettingsDialog, type BaseSettingsDialogProps } from './BaseSettingsDialog'
 export { BaseStatsScreen } from './BaseStatsScreen'
+export { ContentGutter } from './ContentGutter'
 export { CornerActionButtons } from './CornerActionButtons'
 export { MONO_FONT } from './fonts'
 export { InlineColorPicker } from './InlineColorPicker'