@tastic/hud 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -232,25 +232,25 @@ var styles2 = StyleSheet2.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: {
@@ -261,10 +261,10 @@ var styles2 = StyleSheet2.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
   }
 });
 
@@ -369,17 +369,41 @@ var styles3 = StyleSheet3.create({
   }
 });
 
+// src/ContentGutter.tsx
+import { computeContentBounds } from "@tastic/core";
+import { StyleSheet as StyleSheet4, useWindowDimensions, View as View4 } from "react-native";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
+  const { width: windowWidth } = useWindowDimensions();
+  const { contentWidth, gutterWidth } = computeContentBounds(windowWidth, maxContentWidth ?? Infinity);
+  return /* @__PURE__ */ jsxs4(View4, { style: [styles4.row, style], children: [
+    /* @__PURE__ */ jsx4(View4, { style: [styles4.gutter, { width: gutterWidth }], children: leftGutter }),
+    /* @__PURE__ */ jsx4(View4, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ jsx4(View4, { style: [styles4.gutter, { width: gutterWidth }], children: rightGutter })
+  ] });
+}
+var styles4 = StyleSheet4.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"
+  }
+});
+
 // src/CornerActionButtons.tsx
 import { IconButton as IconButton2 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet4 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet5 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function CornerActionButtons({ onBack, onSettings, fg, insets }) {
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(IconButton2, { icon: "arrow-left", iconColor: fg, size: 24, style: [styles4.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: "Back" }),
-    /* @__PURE__ */ jsx4(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles4.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(IconButton2, { icon: "arrow-left", iconColor: fg, size: 24, style: [styles5.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: "Back" }),
+    /* @__PURE__ */ jsx5(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles5.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
-var styles4 = StyleSheet4.create({
+var styles5 = StyleSheet5.create({
   back: {
     position: "absolute"
   },
@@ -396,34 +420,34 @@ var MONO_FONT = Platform2.select({ ios: "Menlo", android: "monospace", default:
 import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { clamp } from "@tastic/core";
-import { ScrollView as ScrollView3, StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions2, View as View6 } from "react-native";
+import { ScrollView as ScrollView3, StyleSheet as StyleSheet7, useWindowDimensions as useWindowDimensions3, View as View7 } from "react-native";
 import { Icon as Icon4, Text as Text4 } from "react-native-paper";
 
 // src/PopoverBody.tsx
-import { StyleSheet as StyleSheet5, View as View4 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet6, View as View5 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
 var CARET_DIP = 1;
 function PopoverBody({ visible, children, align = "center", verticalAlign = "below", caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }) {
   if (!visible) return null;
   const above = verticalAlign === "above";
-  const alignStyle = align === "left" ? styles5.contentLeft : align === "right" ? styles5.contentRight : styles5.contentCenter;
-  const verticalStyle = above ? styles5.contentAbove : styles5.contentBelow;
+  const alignStyle = align === "left" ? styles6.contentLeft : align === "right" ? styles6.contentRight : styles6.contentCenter;
+  const verticalStyle = above ? styles6.contentAbove : styles6.contentBelow;
   const ringSize = CARET_SIZE + caretBorderWidth;
   const caretOffset = (halfFootprint) => align === "right" ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint };
   const caretFill = above ? "borderTopColor" : "borderBottomColor";
   const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
   const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ jsxs5(View4, { style: [styles5.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ jsxs6(View5, { style: [styles6.content, alignStyle, verticalStyle], children: [
     children,
-    caretColor && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx5(View4, { style: [styles5.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ jsx5(View4, { style: [styles5.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    caretColor && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(View5, { style: [styles6.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ jsx6(View5, { style: [styles6.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
-var styles5 = StyleSheet5.create({
+var styles6 = StyleSheet6.create({
   caret: {
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
@@ -467,11 +491,11 @@ var styles5 = StyleSheet5.create({
 
 // src/useAutoAlign.ts
 import { useCallback, useEffect, useRef, useState as useState3 } from "react";
-import { useWindowDimensions } from "react-native";
+import { useWindowDimensions as useWindowDimensions2 } from "react-native";
 var EDGE_MARGIN = 12;
 function useAutoAlign(open, contentWidth, contentHeight) {
   const triggerRef = useRef(null);
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions2();
   const [align, setAlign] = useState3("center");
   const [verticalAlign, setVerticalAlign] = useState3("below");
   const [maxHeight, setMaxHeight] = useState3(contentHeight);
@@ -504,7 +528,7 @@ function useAutoAlign(open, contentWidth, contentHeight) {
 }
 
 // src/InlineColorPicker.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
@@ -517,9 +541,9 @@ var SCREEN_MARGIN = 40;
 function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
-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 }) {
+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 }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
-  const { width: windowWidth } = useWindowDimensions2();
+  const { width: windowWidth } = useWindowDimensions3();
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
@@ -528,15 +552,18 @@ function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors
   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) => hex);
+  const displayValue = displayFor(value);
+  const contrastColor = getContrastColor(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsxs6(View6, { style: [styles6.anchor, open && styles6.anchorOpen], children: [
-    /* @__PURE__ */ jsx6(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles6.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx6(View6, { ref: triggerRef, collapsable: false, style: styles6.triggerMeasure, children: tag ? /* @__PURE__ */ jsx6(Text4, { style: [styles6.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx6(Icon4, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ jsx6(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx6(ScrollView3, { style: [styles6.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles6.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ jsxs7(View7, { style: [styles7.anchor, open && styles7.anchorOpen], children: [
+    /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles7.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx7(View7, { ref: triggerRef, collapsable: false, style: styles7.triggerMeasure, children: tag ? /* @__PURE__ */ jsx7(Text4, { style: [styles7.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx7(Icon4, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx7(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx7(ScrollView3, { style: [styles7.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles7.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
-      return /* @__PURE__ */ jsx6(
+      const swatchDisplay = displayFor(swatch.value);
+      return /* @__PURE__ */ jsx7(
         TouchableRipple2,
         {
           disabled: taken && !swappable,
@@ -545,15 +572,15 @@ function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles6.swatch, { backgroundColor: swatch.value }, selected && styles6.swatchSelected, taken && !swappable && styles6.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx6(Icon4, { source: "check", size: 16, color: getContrastColor(swatch.value) }) : swappable ? /* @__PURE__ */ jsx6(Icon4, { source: "swap-horizontal", size: 16, color: getContrastColor(swatch.value) }) : taken ? /* @__PURE__ */ jsx6(Icon4, { source: "close", size: 16, color: getContrastColor(swatch.value) }) : /* @__PURE__ */ jsx6(View6, {})
+          style: [styles7.swatch, { backgroundColor: swatchDisplay }, selected && styles7.swatchSelected, taken && !swappable && styles7.swatchTaken],
+          children: selected ? /* @__PURE__ */ jsx7(Icon4, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx7(Icon4, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx7(Icon4, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx7(View7, {})
         },
         swatch.value
       );
     }) }) })
   ] });
 }
-var styles6 = StyleSheet6.create({
+var styles7 = StyleSheet7.create({
   anchor: {
     position: "relative"
   },
@@ -599,6 +626,10 @@ var styles6 = StyleSheet6.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: {
@@ -617,19 +648,15 @@ var styles6 = StyleSheet6.create({
     justifyContent: "center",
     paddingHorizontal: 4,
     width: "100%"
-  },
-  tagLabel: {
-    fontWeight: "700",
-    letterSpacing: 0.5
   }
 });
 
 // src/LabeledDropdown.tsx
 import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
-import { ScrollView as ScrollView4, StyleSheet as StyleSheet7, View as View7 } from "react-native";
+import { ScrollView as ScrollView4, StyleSheet as StyleSheet8, View as View8 } from "react-native";
 import { Icon as Icon5, Text as Text5 } from "react-native-paper";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 180;
 var ROW_HEIGHT = 36;
@@ -652,22 +679,22 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsxs7(View7, { style: [styles7.anchor, open && styles7.anchorOpen], children: [
-    /* @__PURE__ */ jsx7(TouchableRipple3, { onPress: () => host.toggle(id), style: styles7.trigger, children: /* @__PURE__ */ jsxs7(View7, { ref: triggerRef, collapsable: false, style: styles7.triggerInner, children: [
-      /* @__PURE__ */ jsx7(Text5, { style: [styles7.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
-      /* @__PURE__ */ jsx7(Icon5, { source: "menu-down", size: 16, color })
+  return /* @__PURE__ */ jsxs8(View8, { style: [styles8.anchor, open && styles8.anchorOpen], children: [
+    /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => host.toggle(id), style: styles8.trigger, children: /* @__PURE__ */ jsxs8(View8, { ref: triggerRef, collapsable: false, style: styles8.triggerInner, children: [
+      /* @__PURE__ */ jsx8(Text5, { style: [styles8.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ jsx8(Icon5, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ jsx7(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx7(ScrollView4, { style: [styles7.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles7.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+    /* @__PURE__ */ jsx8(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx8(ScrollView4, { style: [styles8.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles8.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
       const onColor = getContrastColor2(color);
-      return /* @__PURE__ */ jsx7(TouchableRipple3, { onPress: () => handleSelect(option), style: [styles7.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs7(View7, { style: styles7.rowInner, children: [
-        option.icon && /* @__PURE__ */ jsx7(Icon5, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
-        /* @__PURE__ */ jsx7(Text5, { style: [styles7.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => handleSelect(option), style: [styles8.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs8(View8, { style: styles8.rowInner, children: [
+        option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ jsx8(Text5, { style: [styles8.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })
   ] });
 }
-var styles7 = StyleSheet7.create({
+var styles8 = StyleSheet8.create({
   anchor: {
     position: "relative"
   },
@@ -725,25 +752,25 @@ function loadSkiaWeb() {
 }
 
 // src/PressAwayOverlay.tsx
-import { Pressable, StyleSheet as StyleSheet8 } from "react-native";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { Pressable, StyleSheet as StyleSheet9 } from "react-native";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ jsx8(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet8.absoluteFill, style] });
+  return /* @__PURE__ */ jsx9(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet9.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
 import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet9 } from "react-native";
+import { StyleSheet as StyleSheet10 } from "react-native";
 import { Text as Text6 } from "react-native-paper";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  const readyButtonStyle = [styles8.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const readyButtonStyle = [styles9.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ jsx9(TouchableRipple4, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx9(Text6, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ jsx10(TouchableRipple4, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx10(Text6, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles8 = StyleSheet9.create({
+var styles9 = StyleSheet10.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -758,19 +785,19 @@ var styles8 = StyleSheet9.create({
 // src/SectionedDropdown.tsx
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
 import { IconButton as IconButton3, TouchableRipple as TouchableRipple5 } from "@rific/feedback-press";
-import { ScrollView as ScrollView5, StyleSheet as StyleSheet10, View as View8 } from "react-native";
+import { ScrollView as ScrollView5, StyleSheet as StyleSheet11, View as View9 } from "react-native";
 import { Icon as Icon6, Text as Text7 } from "react-native-paper";
 
 // src/TriggerGaugeHost.tsx
 import { lazy, Suspense } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-2OJOOF6I.mjs").then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx10(Suspense, { fallback: null, children: /* @__PURE__ */ jsx10(LazyTriggerGauge, { ...props }) });
+  return /* @__PURE__ */ jsx11(Suspense, { fallback: null, children: /* @__PURE__ */ jsx11(LazyTriggerGauge, { ...props }) });
 }
 
 // src/SectionedDropdown.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var MENU_BORDER_WIDTH = 1;
 var TRIGGER_SIZE = 44;
 var MENU_MIN_WIDTH = 200;
@@ -816,17 +843,17 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  const anchorStyle = [styles9.anchor, open && styles9.anchorOpen];
+  const anchorStyle = [styles10.anchor, open && styles10.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ jsxs8(View8, { style: anchorStyle, children: [
-    /* @__PURE__ */ jsxs8(View8, { ref: triggerRef, collapsable: false, style: styles9.triggerBox, children: [
-      /* @__PURE__ */ jsx11(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ jsx11(IconButton3, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+  return /* @__PURE__ */ jsxs9(View9, { style: anchorStyle, children: [
+    /* @__PURE__ */ jsxs9(View9, { ref: triggerRef, collapsable: false, style: styles10.triggerBox, children: [
+      /* @__PURE__ */ jsx12(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ jsx12(IconButton3, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ jsx11(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx11(ScrollView5, { style: [styles9.menu, menuStyle], contentContainerStyle: styles9.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs8(View8, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ jsx11(View8, { style: [styles9.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx12(ScrollView5, { style: [styles10.menu, menuStyle], contentContainerStyle: styles10.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs9(View9, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx12(View9, { style: [styles10.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ jsx12(
         SingleSection,
         {
           section,
@@ -839,7 +866,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
             if (autoDismiss) host.close();
           }
         }
-      ) : /* @__PURE__ */ jsx11(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+      ) : /* @__PURE__ */ jsx12(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
     ] }, section.id)) }) })
   ] });
 }
@@ -851,17 +878,18 @@ function SingleSection({
   labelFontFamily,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx11(Fragment4, { children: section.options.map((option) => {
+  return /* @__PURE__ */ jsx12(Fragment4, { children: section.options.map((option) => {
     const selected = option.value === section.value;
+    const taken = !selected && option.value === section.takenValue;
     const rowColor = selected ? onAccentColor : mutedColor;
-    const itemStyle = [styles9.item, selected && { backgroundColor: accentColor }];
+    const itemStyle = [styles10.item, selected && { backgroundColor: accentColor }, taken && styles10.itemTaken];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ jsx11(TouchableRipple5, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs8(View8, { style: styles9.itemRow, children: [
-      option.icon && /* @__PURE__ */ jsx11(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ jsxs8(View8, { style: styles9.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx11(Text7, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ jsx11(Text7, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+    return /* @__PURE__ */ jsx12(TouchableRipple5, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs9(View9, { style: styles10.itemRow, children: [
+      option.icon && /* @__PURE__ */ jsx12(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ jsxs9(View9, { style: styles10.itemLabelColumn, children: [
+        /* @__PURE__ */ jsx12(Text7, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx12(Text7, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -875,23 +903,23 @@ function MultiSection({
   allClearLabels
 }) {
   const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
     section.options.map((option, i) => {
       const selected = section.value.includes(option.value);
       const rowColor = selected ? onAccentColor : mutedColor;
       const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      const itemStyle = [styles9.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const itemStyle = [styles10.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-      return /* @__PURE__ */ jsx11(TouchableRipple5, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs8(View8, { style: styles9.itemRow, children: [
-        option.icon && /* @__PURE__ */ jsx11(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx11(Text7, { variant: "labelLarge", style: [styles9.itemLabelFlex, labelStyle], children: option.label })
+      return /* @__PURE__ */ jsx12(TouchableRipple5, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs9(View9, { style: styles10.itemRow, children: [
+        option.icon && /* @__PURE__ */ jsx12(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ jsx12(Text7, { variant: "labelLarge", style: [styles10.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ jsx11(TouchableRipple5, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles9.item, children: /* @__PURE__ */ jsx11(Text7, { variant: "labelLarge", style: [styles9.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ jsx12(TouchableRipple5, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles10.item, children: /* @__PURE__ */ jsx12(Text7, { variant: "labelLarge", style: [styles10.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles9 = StyleSheet10.create({
+var styles10 = StyleSheet11.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -908,7 +936,7 @@ var styles9 = StyleSheet10.create({
     zIndex: 100
   },
   divider: {
-    height: StyleSheet10.hairlineWidth,
+    height: StyleSheet11.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -927,6 +955,11 @@ var styles9 = StyleSheet10.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,
@@ -957,20 +990,20 @@ var styles9 = StyleSheet10.create({
 
 // src/SharedActionBand.tsx
 import { IconButton as IconButton4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet11, View as View9 } from "react-native";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet12, View as View10 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ jsxs9(View9, { style: [styles10.column, popoverOpen && styles10.columnOpen], children: [
-    /* @__PURE__ */ jsxs9(View9, { style: styles10.actionsRow, children: [
-      /* @__PURE__ */ jsx12(IconButton4, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
-      onRandomize && /* @__PURE__ */ jsx12(IconButton4, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
-      onReset && /* @__PURE__ */ jsx12(IconButton4, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
-      /* @__PURE__ */ jsx12(IconButton4, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ jsxs10(View10, { style: [styles11.column, popoverOpen && styles11.columnOpen], children: [
+    /* @__PURE__ */ jsxs10(View10, { style: styles11.actionsRow, children: [
+      /* @__PURE__ */ jsx13(IconButton4, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ jsx13(IconButton4, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ jsx13(IconButton4, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ jsx13(IconButton4, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
     ] }),
     children
   ] });
 }
-var styles10 = StyleSheet11.create({
+var styles11 = StyleSheet12.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -987,19 +1020,19 @@ var styles10 = StyleSheet11.create({
 
 // src/StatRow.tsx
 import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet12, View as View10 } from "react-native";
+import { StyleSheet as StyleSheet13, View as View11 } from "react-native";
 import { Text as Text8 } from "react-native-paper";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
   const { dark } = useAutoPaperTheme4();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  return /* @__PURE__ */ jsxs10(View10, { style: styles11.row, children: [
-    /* @__PURE__ */ jsx13(Text8, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
-    /* @__PURE__ */ jsx13(Text8, { variant: "bodyMedium", style: [styles11.value, { color: fg }], children: value })
+  return /* @__PURE__ */ jsxs11(View11, { style: styles12.row, children: [
+    /* @__PURE__ */ jsx14(Text8, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
+    /* @__PURE__ */ jsx14(Text8, { variant: "bodyMedium", style: [styles12.value, { color: fg }], children: value })
   ] });
 }
-var styles11 = StyleSheet12.create({
+var styles12 = StyleSheet13.create({
   row: {
     alignItems: "center",
     flexDirection: "row",
@@ -1012,19 +1045,19 @@ var styles11 = StyleSheet12.create({
 
 // src/StatSection.tsx
 import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet13, View as View11 } from "react-native";
+import { StyleSheet as StyleSheet14, View as View12 } from "react-native";
 import { Text as Text9 } from "react-native-paper";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
   const { dark } = useAutoPaperTheme5();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
-  return /* @__PURE__ */ jsxs11(View11, { style: [styles12.section, { backgroundColor: sectionBg }], children: [
-    /* @__PURE__ */ jsx14(Text9, { variant: "labelMedium", style: [styles12.label, { color: fg }], children: label }),
+  return /* @__PURE__ */ jsxs12(View12, { style: [styles13.section, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ jsx15(Text9, { variant: "labelMedium", style: [styles13.label, { color: fg }], children: label }),
     children
   ] });
 }
-var styles12 = StyleSheet13.create({
+var styles13 = StyleSheet14.create({
   // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
   // same visual weight as StatRow's own row labels below it (both used the identical muted color;
   // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
@@ -1054,6 +1087,7 @@ export {
   AchievementRow,
   BaseSettingsDialog,
   BaseStatsScreen,
+  ContentGutter,
   CornerActionButtons,
   InlineColorPicker,
   LABELED_DROPDOWN_POPOVER_WIDTH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.5.0",
+  "version": "0.6.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",
@@ -63,14 +63,14 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.8",
+    "@infinitetoken/eslint-config": "0.2.0",
     "@infinitetoken/jest-config": "^0.2.0",
-    "@infinitetoken/tsconfig": "^0.3.0",
+    "@infinitetoken/tsconfig": "^0.4.1",
     "@rific/auto-paper": "^0.10.3",
     "@rific/feedback-press": "^0.10.8",
     "@rific/updater": "^0.4.2",
     "@shopify/react-native-skia": "^2.6.2",
-    "@tastic/core": "^0.1.5",
+    "@tastic/core": "^0.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",