@tastic/hud 0.1.0

package/dist/index.mjs

@@ -0,0 +1,475 @@
+// src/fonts.ts
+import { Platform } from "react-native";
+var MONO_FONT = Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+
+// src/InlineColorPicker.tsx
+import { defaultColors, getContrastColor } from "@rific/auto-paper";
+import { TouchableRipple } from "@rific/feedback-press";
+import { ScrollView, StyleSheet as StyleSheet2, useWindowDimensions as useWindowDimensions2, View as View3 } from "react-native";
+import { Icon } from "react-native-paper";
+
+// src/PopoverBody.tsx
+import { StyleSheet, View } from "react-native";
+import { Fragment, jsx, jsxs } 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" ? styles.contentLeft : align === "right" ? styles.contentRight : styles.contentCenter;
+  const verticalStyle = above ? styles.contentAbove : styles.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__ */ jsxs(View, { style: [styles.content, alignStyle, verticalStyle], children: [
+    children,
+    caretColor && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    ] })
+  ] });
+}
+var styles = StyleSheet.create({
+  caret: {
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    height: 0,
+    position: "absolute",
+    width: 0,
+    // Explicit, not left to DOM order — the box it dips into is itself a position:'relative' view,
+    // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
+    // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
+    // reliably rather than relying on being the later sibling.
+    zIndex: 1
+  },
+  content: {
+    position: "absolute",
+    zIndex: 50
+  },
+  contentAbove: {
+    bottom: "100%",
+    marginBottom: 8
+  },
+  contentBelow: {
+    marginTop: 8,
+    top: "100%"
+  },
+  // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
+  // much wider) popover box inside via plain flexbox — not `left:'50%'` plus a percentage
+  // `transform`, which depends on native resolving the box's own auto width before applying the
+  // transform and has proven unreliable there, visibly shifting the box off-center.
+  contentCenter: {
+    alignItems: "center",
+    left: 0,
+    right: 0
+  },
+  contentLeft: {
+    left: 0
+  },
+  contentRight: {
+    right: 0
+  }
+});
+
+// src/useAutoAlign.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useWindowDimensions } from "react-native";
+var EDGE_MARGIN = 12;
+function useAutoAlign(open, contentWidth, contentHeight) {
+  const triggerRef = useRef(null);
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const [align, setAlign] = useState("center");
+  const [verticalAlign, setVerticalAlign] = useState("below");
+  const [maxHeight, setMaxHeight] = useState(contentHeight);
+  const [measured, setMeasured] = useState(false);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setMeasured(false);
+  }
+  const measure = useCallback(() => {
+    triggerRef.current?.measureInWindow((x, y, triggerWidth, triggerHeight) => {
+      const centerX = x + triggerWidth / 2;
+      const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
+      const overflowsLeft = centerX - contentWidth / 2 < EDGE_MARGIN;
+      if (overflowsRight && !overflowsLeft) setAlign("right");
+      else if (overflowsLeft && !overflowsRight) setAlign("left");
+      else setAlign("center");
+      const roomBelow = windowHeight - (y + triggerHeight) - EDGE_MARGIN;
+      const roomAbove = y - EDGE_MARGIN;
+      const above = contentHeight > roomBelow && roomAbove > roomBelow;
+      setVerticalAlign(above ? "above" : "below");
+      setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
+      setMeasured(true);
+    });
+  }, [contentWidth, contentHeight, windowWidth, windowHeight]);
+  useEffect(() => {
+    if (open) measure();
+  }, [open, measure]);
+  return { align, maxHeight, measured, triggerRef, verticalAlign };
+}
+
+// src/InlineColorPicker.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SIZE = 48;
+var SWATCH_SIZE = 28;
+var SWATCHES_PADDING = 8;
+var SWATCHES_GAP = 6;
+var SWATCHES_BORDER_WIDTH = 2;
+var MIN_COLUMNS = 3;
+var MAX_COLUMNS = 6;
+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", autoDismiss = true, columns }) {
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const { width: windowWidth } = useWindowDimensions2();
+  const autoColumns = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))));
+  const resolvedColumns = columns ?? autoColumns;
+  const swatchesWidth = widthForColumns(resolvedColumns);
+  const swatchRows = Math.ceil(swatches.length / resolvedColumns);
+  const swatchesHeight = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * swatchRows + SWATCHES_GAP * (swatchRows - 1);
+  const open = host.openId === id;
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight);
+  const align = alignOverride ?? autoAlign;
+  return /* @__PURE__ */ jsxs2(View3, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
+    /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value }], children: /* @__PURE__ */ jsx2(View3, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: /* @__PURE__ */ jsx2(Icon, { source: icon, size: 20, color: getContrastColor(value) }) }) }),
+    /* @__PURE__ */ jsx2(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: SIZE, children: /* @__PURE__ */ jsx2(ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.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__ */ jsx2(
+        TouchableRipple,
+        {
+          disabled: taken && !swappable,
+          onPress: () => {
+            onChange(swatch.value);
+            if (autoDismiss) host.close();
+          },
+          borderless: true,
+          style: [styles2.swatch, { backgroundColor: swatch.value }, selected && styles2.swatchSelected, taken && !swappable && styles2.swatchTaken],
+          children: selected ? /* @__PURE__ */ jsx2(Icon, { source: "check", size: 16, color: getContrastColor(swatch.value) }) : swappable ? /* @__PURE__ */ jsx2(Icon, { source: "swap-horizontal", size: 16, color: getContrastColor(swatch.value) }) : taken ? /* @__PURE__ */ jsx2(Icon, { source: "close", size: 16, color: getContrastColor(swatch.value) }) : /* @__PURE__ */ jsx2(View3, {})
+        },
+        swatch.value
+      );
+    }) }) })
+  ] });
+}
+var styles2 = StyleSheet2.create({
+  anchor: {
+    position: "relative"
+  },
+  // See SectionedDropdown's identical comment — React Native Web gives every position:'relative' view
+  // its own stacking context, so the elevation has to live on the anchor itself, not just the
+  // popover content nested inside it, to correctly paint above this anchor's own later siblings.
+  anchorOpen: {
+    zIndex: 100
+  },
+  swatch: {
+    alignItems: "center",
+    borderRadius: SWATCH_SIZE / 2,
+    height: SWATCH_SIZE,
+    justifyContent: "center",
+    width: SWATCH_SIZE
+  },
+  swatchSelected: {
+    borderColor: "#ffffff",
+    borderWidth: 2
+  },
+  swatchTaken: {
+    opacity: 0.35
+  },
+  swatches: {
+    borderRadius: 12,
+    borderWidth: SWATCHES_BORDER_WIDTH,
+    elevation: 8,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+    // width is set inline above — border-box sizing means it has to include the border too
+    // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
+    // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
+    // dead space on the right edge of each row instead.
+  },
+  // Separate from `swatches` itself — see SectionedDropdown's identical menu/menuContent split.
+  // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
+  // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
+  swatchesContent: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SWATCHES_GAP,
+    padding: SWATCHES_PADDING
+  },
+  trigger: {
+    alignItems: "center",
+    alignSelf: "flex-start",
+    borderRadius: SIZE / 2,
+    height: SIZE,
+    justifyContent: "center",
+    width: SIZE
+  },
+  // Wraps just the icon, inside the TouchableRipple, purely so useAutoAlign has a plain View to
+  // attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a measurable
+  // native node.
+  triggerMeasure: {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    width: "100%"
+  }
+});
+
+// src/loadSkiaWeb.ts
+import { Platform as Platform2 } from "react-native";
+function loadSkiaWeb() {
+  if (Platform2.OS !== "web") return Promise.resolve();
+  return import("@shopify/react-native-skia/src/web").then((m) => m.LoadSkiaWeb());
+}
+
+// src/PressAwayOverlay.tsx
+import { Pressable, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PressAwayOverlay({ active, onPress, style }) {
+  if (!active) return null;
+  return /* @__PURE__ */ jsx3(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet3.absoluteFill, style] });
+}
+
+// src/ReadyButton.tsx
+import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet4 } from "react-native";
+import { Text } from "react-native-paper";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
+  return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: onToggleReady, borderless: true, style: [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style], children: /* @__PURE__ */ jsx4(Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily, fontWeight: "bold" }, { color: ready ? "#000000" : color }], children: ready ? "READY \u2713" : "READY?" }) });
+}
+var styles3 = StyleSheet4.create({
+  readyButton: {
+    alignItems: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    justifyContent: "center",
+    minWidth: 120,
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  }
+});
+
+// src/SectionedDropdown.tsx
+import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
+import { IconButton, TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
+import { ScrollView as ScrollView2, StyleSheet as StyleSheet5, View as View4 } from "react-native";
+import { Icon as Icon2, Text as Text2 } from "react-native-paper";
+
+// src/TriggerGaugeHost.tsx
+import { lazy, Suspense } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-HIPRGEWJ.mjs").then((m) => ({ default: m.TriggerGauge }))));
+function TriggerGaugeHost(props) {
+  return /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(LazyTriggerGauge, { ...props }) });
+}
+
+// src/SectionedDropdown.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var MENU_BORDER_WIDTH = 1;
+var TRIGGER_SIZE = 44;
+var MENU_MIN_WIDTH = 200;
+var MENU_MAX_WIDTH = 220;
+var MENU_ITEM_ICON_SIZE = 18;
+var MENU_ITEM_LABEL_MAX_WIDTH = 150;
+var MENU_ITEM_HEIGHT = 40;
+var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
+var MENU_DIVIDER_HEIGHT = 9;
+var MENU_VERTICAL_PADDING = 12;
+function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const menuBorderColor = getBlendedColor(mutedColor, menuBg, 0.5);
+  const resolvedOnAccentColor = onAccentColor ?? getColorRoles(accentColor, menuBg).onColor;
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const open = host.openId === id;
+  const estimatedHeight = MENU_VERTICAL_PADDING + sections.reduce((sum, section, sectionIndex) => {
+    const rows = section.options.reduce((rowSum, option) => rowSum + (option.description ? MENU_ITEM_HEIGHT_WITH_DESCRIPTION : MENU_ITEM_HEIGHT), 0);
+    const footer = section.kind === "multi" && section.allClear ? MENU_ITEM_HEIGHT : 0;
+    const divider = sectionIndex > 0 ? MENU_DIVIDER_HEIGHT : 0;
+    return sum + rows + footer + divider;
+  }, 0);
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight);
+  const align = alignOverride ?? autoAlign;
+  const onlySection = sections.length === 1 ? sections[0] : null;
+  const selectedOption = onlySection?.kind === "single" ? onlySection.options.find((o) => o.value === onlySection.value) : void 0;
+  const triggerIcon = selectedOption?.icon ?? icon;
+  const triggerIconSize = selectedOption?.iconSize ?? 22;
+  const hasMultiSection = sections.some((s) => s.kind === "multi");
+  const anyMultiSelected = sections.some((s) => s.kind === "multi" && s.value.length > 0);
+  const triggerIconColor = hasMultiSection ? anyMultiSelected ? accentColor : fg : fg;
+  const gaugeSegments = sections.reduce((sum, section) => sum + section.options.length, 0);
+  const gaugeLitIndices = [];
+  let gaugeOffset = 0;
+  for (const section of sections) {
+    if (section.kind === "single") {
+      const index = section.options.findIndex((o) => o.value === section.value);
+      if (index >= 0) gaugeLitIndices.push(gaugeOffset + index);
+    } else {
+      section.options.forEach((o, i) => {
+        if (section.value.includes(o.value)) gaugeLitIndices.push(gaugeOffset + i);
+      });
+    }
+    gaugeOffset += section.options.length;
+  }
+  return /* @__PURE__ */ jsxs3(View4, { style: [styles4.anchor, open && styles4.anchorOpen], children: [
+    /* @__PURE__ */ jsxs3(View4, { ref: triggerRef, collapsable: false, style: styles4.triggerBox, children: [
+      /* @__PURE__ */ jsx6(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ jsx6(IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+    ] }),
+    /* @__PURE__ */ jsx6(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx6(ScrollView2, { style: [styles4.menu, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }], contentContainerStyle: styles4.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs3(View4, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx6(View4, { style: [styles4.divider, { backgroundColor: menuBorderColor }] }),
+      section.kind === "single" ? /* @__PURE__ */ jsx6(
+        SingleSection,
+        {
+          section,
+          accentColor,
+          onAccentColor: resolvedOnAccentColor,
+          mutedColor,
+          labelFontFamily,
+          onSelect: (value) => {
+            section.onChange(value);
+            if (autoDismiss) host.close();
+          }
+        }
+      ) : /* @__PURE__ */ jsx6(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+    ] }, section.id)) }) })
+  ] });
+}
+function SingleSection({
+  section,
+  accentColor,
+  onAccentColor,
+  mutedColor,
+  labelFontFamily,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx6(Fragment2, { children: section.options.map((option) => {
+    const selected = option.value === section.value;
+    const rowColor = selected ? onAccentColor : mutedColor;
+    return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => onSelect(option.value), style: [styles4.item, selected && { backgroundColor: accentColor }], children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
+      option.icon && /* @__PURE__ */ jsx6(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ jsxs3(View4, { style: styles4.itemLabelColumn, children: [
+        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label }),
+        option.description && /* @__PURE__ */ jsx6(Text2, { variant: "labelSmall", style: [{ fontFamily: labelFontFamily }, { color: rowColor }], children: option.description })
+      ] })
+    ] }) }, option.value);
+  }) });
+}
+function MultiSection({
+  section,
+  accentColor,
+  onAccentColor,
+  mutedColor,
+  labelFontFamily,
+  allClearLabels
+}) {
+  const allSelected = section.value.length === section.options.length;
+  return /* @__PURE__ */ jsxs3(Fragment2, { 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);
+      return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: [styles4.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }], children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
+        option.icon && /* @__PURE__ */ jsx6(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.itemLabelFlex, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label })
+      ] }) }, option.value);
+    }),
+    section.allClear && /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles4.item, children: /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+  ] });
+}
+var styles4 = StyleSheet5.create({
+  allClearLabel: {
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  anchor: {
+    position: "relative"
+  },
+  // React Native Web gives every position:'relative' view an explicit zIndex (0, not 'auto'),
+  // which makes each one its own stacking context — so a zIndex set only on the popover content
+  // below only wins comparisons within this anchor's own box, not against this anchor's own later
+  // siblings (e.g. a Ready button), which are otherwise painted on top by DOM-order tiebreak.
+  // Elevating the anchor itself, only while its popover is open, fixes that at the right level.
+  anchorOpen: {
+    zIndex: 100
+  },
+  divider: {
+    height: StyleSheet5.hairlineWidth,
+    marginVertical: 4
+  },
+  item: {
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  itemLabelColumn: {
+    maxWidth: MENU_ITEM_LABEL_MAX_WIDTH
+  },
+  itemLabelFlex: {
+    flex: 1
+  },
+  itemRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8
+  },
+  menu: {
+    borderRadius: 12,
+    borderWidth: MENU_BORDER_WIDTH,
+    elevation: 8,
+    maxWidth: MENU_MAX_WIDTH,
+    minWidth: MENU_MIN_WIDTH,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  // Separate from `menu` itself — a ScrollView's own style sets the scrolling frame's bounds
+  // (including the maxHeight that actually caps it), while padding/gap belong to its
+  // contentContainerStyle, which sizes to the *unclamped* content instead of the frame.
+  menuContent: {
+    gap: 4,
+    padding: 6
+  },
+  // Fixed hit-area regardless of the current option's iconSize, so a small-vs-large trigger icon
+  // doesn't shift this picker's position within its row.
+  triggerBox: {
+    alignItems: "center",
+    height: TRIGGER_SIZE,
+    justifyContent: "center",
+    width: TRIGGER_SIZE
+  }
+});
+
+// src/usePopoverHost.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+function usePopoverHost() {
+  const [openId, setOpenId] = useState2(null);
+  const toggle = useCallback2((id) => {
+    setOpenId((prev) => prev === id ? null : id);
+  }, []);
+  const close = useCallback2(() => setOpenId(null), []);
+  return { openId, toggle, close };
+}
+export {
+  InlineColorPicker,
+  MONO_FONT,
+  PopoverBody,
+  PressAwayOverlay,
+  ReadyButton,
+  SectionedDropdown,
+  TriggerGaugeHost,
+  loadSkiaWeb,
+  useAutoAlign,
+  usePopoverHost
+};

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@tastic/hud",
+  "version": "0.1.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",
+    "expo",
+    "local-multiplayer",
+    "couch-multiplayer",
+    "hud",
+    "popover",
+    "dropdown",
+    "color-picker",
+    "press-away",
+    "dialog"
+  ],
+  "homepage": "https://github.com/jayrdeaton/react-native-hud#readme",
+  "bugs": {
+    "url": "https://github.com/jayrdeaton/react-native-hud/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jayrdeaton/react-native-hud.git"
+  },
+  "license": "MIT",
+  "author": "Jay Deaton",
+  "sideEffects": false,
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "react-native": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__mocks__"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "fix": "eslint --fix",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build",
+    "release": "git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:patch": "npm version patch && git push --follow-tags",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "typecheck": "tsc --noEmit",
+    "preversion": "npm run lint && npm test && npm run build"
+  },
+  "devDependencies": {
+    "@rific/auto-paper": "^0.9.4",
+    "@rific/feedback-press": "^0.10.4",
+    "@shopify/react-native-skia": "^2.6.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
+    "@typescript-eslint/parser": "^8.59.3",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-package-json": "^1.0.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "prettier": "^3.8.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": "^0.85.3",
+    "react-native-paper": "^5.15.2",
+    "react-native-reanimated": "^4.5.1",
+    "ts-jest": "^29.4.9",
+    "tsup": "^8.0.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.3"
+  },
+  "peerDependencies": {
+    "@rific/auto-paper": ">=0.9.0",
+    "@rific/feedback-press": ">=0.10.0",
+    "@shopify/react-native-skia": ">=1.5.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-paper": ">=5.0.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}