@tastic/hud 0.1.0 → 0.1.2

package/dist/{TriggerGauge-HIPRGEWJ.mjs → TriggerGauge-XBKZ3KER.mjs}

@@ -100,7 +100,15 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     return path;
   }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
   if (segments < 2) return null;
-  return /* @__PURE__ */ jsx(View, { style: [styles.container, { height: size, width: size }], pointerEvents: "none", children: /* @__PURE__ */ jsxs(Canvas, { style: { height: canvasSize, width: canvasSize }, children: [
+  const gaugeSizeStyle = {
+    height: size,
+    width: size
+  };
+  const canvasSizeStyle = {
+    height: canvasSize,
+    width: canvasSize
+  };
+  return /* @__PURE__ */ jsx(View, { style: [styles.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ jsxs(Canvas, { style: canvasSizeStyle, children: [
     /* @__PURE__ */ jsx(Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
     /* @__PURE__ */ jsx(Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
@@ -20,14 +18,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/TriggerGauge.tsx
@@ -122,18 +112,26 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     return path;
   }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
   if (segments < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native8.View, { style: [styles4.container, { height: size, width: size }], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: { height: canvasSize, width: canvasSize }, children: [
+  const gaugeSizeStyle = {
+    height: size,
+    width: size
+  };
+  const canvasSizeStyle = {
+    height: canvasSize,
+    width: canvasSize
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.View, { style: [styles4.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_react2, import_react_native8, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
+var import_react_native_skia, import_react2, import_react_native7, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
     import_react2 = require("react");
-    import_react_native8 = require("react-native");
+    import_react_native7 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
     import_jsx_runtime5 = require("react/jsx-runtime");
     UNLIT_THICKNESS = 3;
@@ -145,7 +143,7 @@ var init_TriggerGauge = __esm({
     MOUNT_DURATION_MS = 450;
     MOUNT_STAGGER_MS = 40;
     SELECTION_TRANSITION_DURATION_MS = 260;
-    styles4 = import_react_native8.StyleSheet.create({
+    styles4 = import_react_native7.StyleSheet.create({
       container: {
         alignItems: "center",
         justifyContent: "center",
@@ -398,29 +396,30 @@ var styles2 = import_react_native4.StyleSheet.create({
 });
 
 // src/loadSkiaWeb.ts
-var import_react_native5 = require("react-native");
 function loadSkiaWeb() {
-  if (import_react_native5.Platform.OS !== "web") return Promise.resolve();
-  return import("@shopify/react-native-skia/src/web").then((m) => m.LoadSkiaWeb());
+  return Promise.resolve();
 }
 
 // src/PressAwayOverlay.tsx
-var import_react_native6 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native6.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native5.StyleSheet.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
 var import_feedback_press2 = require("@rific/feedback-press");
-var import_react_native7 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily, fontWeight: "bold" }, { color: ready ? "#000000" : color }], children: ready ? "READY \u2713" : "READY?" }) });
+  const readyButtonStyle = [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
+  const labelColorStyle = { color: ready ? "#000000" : color };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles3 = import_react_native7.StyleSheet.create({
+var styles3 = import_react_native6.StyleSheet.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -435,7 +434,7 @@ var styles3 = import_react_native7.StyleSheet.create({
 // src/SectionedDropdown.tsx
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
-var import_react_native9 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 
 // src/TriggerGaugeHost.tsx
@@ -493,13 +492,16 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: [styles5.anchor, open && styles5.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
+  const anchorStyle = [styles5.anchor, open && styles5.anchorOpen];
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
+  const dividerStyle = { backgroundColor: menuBorderColor };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: anchorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.ScrollView, { style: [styles5.menu, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles5.divider, { backgroundColor: menuBorderColor }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.ScrollView, { style: [styles5.menu, menuStyle], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { style: [styles5.divider, dividerStyle] }),
       section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SingleSection,
         {
@@ -528,11 +530,14 @@ function SingleSection({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: section.options.map((option) => {
     const selected = option.value === section.value;
     const rowColor = selected ? onAccentColor : mutedColor;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: [styles5.item, selected && { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
+    const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }];
+    const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+    const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemRow, children: [
       option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemLabelColumn, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: [{ fontFamily: labelFontFamily }, { color: rowColor }], children: option.description })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemLabelColumn, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -552,15 +557,17 @@ function MultiSection({
       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__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
+      const itemStyle = [styles5.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__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemRow, children: [
         option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.itemLabelFlex, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
     section.allClear && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles5.item, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles5 = import_react_native9.StyleSheet.create({
+var styles5 = import_react_native8.StyleSheet.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -577,7 +584,7 @@ var styles5 = import_react_native9.StyleSheet.create({
     zIndex: 100
   },
   divider: {
-    height: import_react_native9.StyleSheet.hairlineWidth,
+    height: import_react_native8.StyleSheet.hairlineWidth,
     marginVertical: 4
   },
   item: {

package/dist/index.mjs

@@ -225,10 +225,8 @@ var styles2 = StyleSheet2.create({
 });
 
 // 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());
+  return Promise.resolve();
 }
 
 // src/PressAwayOverlay.tsx
@@ -245,7 +243,10 @@ 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?" }) });
+  const readyButtonStyle = [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
+  const labelColorStyle = { color: ready ? "#000000" : color };
+  return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx4(Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
 var styles3 = StyleSheet4.create({
   readyButton: {
@@ -268,7 +269,7 @@ 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 }))));
+var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-XBKZ3KER.mjs").then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
   return /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(LazyTriggerGauge, { ...props }) });
 }
@@ -320,13 +321,16 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  return /* @__PURE__ */ jsxs3(View4, { style: [styles4.anchor, open && styles4.anchorOpen], children: [
+  const anchorStyle = [styles4.anchor, open && styles4.anchorOpen];
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
+  const dividerStyle = { backgroundColor: menuBorderColor };
+  return /* @__PURE__ */ jsxs3(View4, { style: anchorStyle, 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 }] }),
+    /* @__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, menuStyle], contentContainerStyle: styles4.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs3(View4, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx6(View4, { style: [styles4.divider, dividerStyle] }),
       section.kind === "single" ? /* @__PURE__ */ jsx6(
         SingleSection,
         {
@@ -355,11 +359,14 @@ function SingleSection({
   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: [
+    const itemStyle = [styles4.item, selected && { backgroundColor: accentColor }];
+    const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+    const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
+    return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => onSelect(option.value), style: itemStyle, 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 })
+        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx6(Text2, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -379,9 +386,11 @@ function MultiSection({
       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: [
+      const itemStyle = [styles4.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__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, 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 })
+        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.itemLabelFlex, labelStyle], 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 }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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/ReadyButton.tsx

@@ -1,5 +1,5 @@
 import { TouchableRipple } from '@rific/feedback-press'
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
 import { Text } from 'react-native-paper'
 
 import { MONO_FONT } from './fonts'
@@ -21,9 +21,13 @@ interface Props {
 // below a shared row — e.g. a vs-CPU mode with only one human player needs just one Ready toggle,
 // not one tucked under each slot.
 export function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }: Props) {
+  const readyButtonStyle = [styles.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style]
+  const labelTextStyle: TextStyle = { fontFamily: labelFontFamily, fontWeight: 'bold' }
+  const labelColorStyle = { color: ready ? '#000000' : color }
+
   return (
-    <TouchableRipple onPress={onToggleReady} borderless style={[styles.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style]}>
-      <Text variant='labelLarge' style={[{ fontFamily: labelFontFamily, fontWeight: 'bold' }, { color: ready ? '#000000' : color }]}>
+    <TouchableRipple onPress={onToggleReady} borderless style={readyButtonStyle}>
+      <Text variant='labelLarge' style={[labelTextStyle, labelColorStyle]}>
         {ready ? 'READY ✓' : 'READY?'}
       </Text>
     </TouchableRipple>

package/src/SectionedDropdown.tsx

@@ -1,6 +1,6 @@
 import { getBlendedColor, getColorRoles } from '@rific/auto-paper'
 import { IconButton, TouchableRipple } from '@rific/feedback-press'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { ScrollView, StyleSheet, TextStyle, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { MONO_FONT } from './fonts'
@@ -177,8 +177,12 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
     gaugeOffset += section.options.length
   }
 
+  const anchorStyle = [styles.anchor, open && styles.anchorOpen]
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }
+  const dividerStyle = { backgroundColor: menuBorderColor }
+
   return (
-    <View style={[styles.anchor, open && styles.anchorOpen]}>
+    <View style={anchorStyle}>
       <View ref={triggerRef} collapsable={false} style={styles.triggerBox}>
         <TriggerGaugeHost segments={gaugeSegments} litIndices={gaugeLitIndices} size={TRIGGER_SIZE} accentColor={accentColor} mutedColor={mutedColor} />
         <IconButton icon={triggerIcon} iconColor={triggerIconColor} size={triggerIconSize} accessibilityLabel={accessibilityLabel} onPress={() => host.toggle(id)} />
@@ -194,13 +198,13 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
         is always <= maxHeight then, so nothing scrolls); on a short landscape screen where neither
         direction has enough room, this is what keeps the menu from just running off the screen
         edge instead of flipping only made it run off a *smaller* amount. */}
-        <ScrollView style={[styles.menu, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }]} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
+        <ScrollView style={[styles.menu, menuStyle]} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
           {sections.map((section, sectionIndex) => (
             <View key={section.id}>
               {/* Every section after the first gets a rule above it — the divider belongs to the
               boundary between sections, not to either section itself, so it's keyed off position
               rather than each section carrying its own "divider below me" flag. */}
-              {sectionIndex > 0 && <View style={[styles.divider, { backgroundColor: menuBorderColor }]} />}
+              {sectionIndex > 0 && <View style={[styles.divider, dividerStyle]} />}
 
               {section.kind === 'single' ? (
                 <SingleSection
@@ -247,16 +251,19 @@ function SingleSection({
       {section.options.map((option) => {
         const selected = option.value === section.value
         const rowColor = selected ? onAccentColor : mutedColor
+        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }]
+        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={[styles.item, selected && { backgroundColor: accentColor }]}>
+          <TouchableRipple key={option.value} 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}>
-                <Text variant='labelLarge' style={[{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? 'bold' : 'normal' }]}>
+                <Text variant='labelLarge' style={labelStyle}>
                   {option.label}
                 </Text>
                 {option.description && (
-                  <Text variant='labelSmall' style={[{ fontFamily: labelFontFamily }, { color: rowColor }]}>
+                  <Text variant='labelSmall' style={descriptionStyle}>
                     {option.description}
                   </Text>
                 )}
@@ -299,11 +306,13 @@ function MultiSection({
         // separately-rounded pills.
         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 = [styles.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }]
+        const labelStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? 'bold' : 'normal' }
         return (
-          <TouchableRipple key={option.value} onPress={() => section.onChange(selected ? section.value.filter((v: unknown) => v !== option.value) : [...section.value, option.value])} style={[styles.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }]}>
+          <TouchableRipple key={option.value} onPress={() => section.onChange(selected ? section.value.filter((v: unknown) => v !== option.value) : [...section.value, option.value])} style={itemStyle}>
             <View style={styles.itemRow}>
               {option.icon && <Icon source={option.icon} size={MENU_ITEM_ICON_SIZE} color={rowColor} />}
-              <Text variant='labelLarge' style={[styles.itemLabelFlex, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? 'bold' : 'normal' }]}>
+              <Text variant='labelLarge' style={[styles.itemLabelFlex, labelStyle]}>
                 {option.label}
               </Text>
             </View>

package/src/TriggerGauge.tsx

@@ -266,9 +266,18 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
 
   if (segments < 2) return null
 
+  const gaugeSizeStyle = {
+    height: size,
+    width: size
+  }
+  const canvasSizeStyle = {
+    height: canvasSize,
+    width: canvasSize
+  }
+
   return (
-    <View style={[styles.container, { height: size, width: size }]} pointerEvents='none'>
-      <Canvas style={{ height: canvasSize, width: canvasSize }}>
+    <View style={[styles.container, gaugeSizeStyle]} pointerEvents='none'>
+      <Canvas style={canvasSizeStyle}>
         <Path path={unlitPath} style='stroke' strokeWidth={UNLIT_THICKNESS} strokeCap='round' color={mutedColor} opacity={0.35} />
         <Path path={litPath} style='stroke' strokeWidth={LIT_THICKNESS} strokeCap='round' color={accentColor} opacity={1} />
       </Canvas>

package/src/TriggerGaugeHost.tsx

@@ -11,10 +11,9 @@ import { TriggerGaugeProps } from './TriggerGauge'
 // file therefore never imports TriggerGauge itself except as a type (erased at compile time,
 // carrying no runtime module reference) — `lazy()` is what actually defers the real import to
 // runtime, after loadSkiaWeb() resolves. Always lazy, on every platform, rather than a native/web
-// branch here: this package builds to a single bundled dist file (see loadSkiaWeb's own comment on
-// why), so there's no reliable build-time way to give native a plain, non-lazy passthrough instead —
-// loadSkiaWeb() itself already resolves immediately on native, so the Suspense boundary there just
-// clears on the next tick, not a perceptible delay. The Suspense fallback renders nothing, so a
+// branch here, purely to keep this file simple — loadSkiaWeb() itself already resolves immediately
+// on native (see its own file split), so the Suspense boundary there just clears on the next tick,
+// not a perceptible delay. The Suspense fallback renders nothing, so a
 // consumer's trigger icon still shows immediately and the gauge ring just pops in a beat later.
 const LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import('./TriggerGauge').then((m) => ({ default: m.TriggerGauge }))))
 

package/src/loadSkiaWeb.ts

@@ -1,14 +1,10 @@
-import { Platform } from 'react-native'
-
-// Skia's web target renders through CanvasKit, a WASM build of Skia fetched at runtime — nothing
-// using @shopify/react-native-skia's React components can draw a single frame until this resolves.
-// Skia on native (via JSI) is ready as soon as the app's native module is linked, so this only
-// actually does anything on web — a Platform.OS check rather than a `.web.ts` sibling file, since
-// this package builds to a single bundled dist file (see package.json's `build` script): a bundler
-// that pre-flattens the whole module graph itself (tsup/esbuild) never sees or swaps in a `.web.ts`
-// variant the way a consuming app's own Metro bundler would, so the split has to be a runtime
-// branch that survives being bundled, not a build-time file choice that wouldn't.
+// Native counterpart to loadSkiaWeb.web.ts — Skia on native (via JSI, no WASM) is ready as soon as
+// the app's native module is linked, so there's nothing to actually wait on here. This file must
+// never import '@shopify/react-native-skia/src/web' (even conditionally behind a Platform.OS check):
+// that module pulls in canvaskit-wasm, which does `require('fs')` — a runtime check doesn't stop
+// Metro from statically resolving that import to build the native bundle graph, and Metro has no
+// `fs` for iOS/Android, so the build fails outright. Metro's own platform-extension resolution (this
+// file vs. loadSkiaWeb.web.ts) is what actually keeps the web-only module out of the native graph.
 export function loadSkiaWeb(): Promise<void> {
-  if (Platform.OS !== 'web') return Promise.resolve()
-  return import('@shopify/react-native-skia/src/web').then((m) => m.LoadSkiaWeb())
+  return Promise.resolve()
 }

package/src/loadSkiaWeb.web.ts

@@ -0,0 +1,11 @@
+import { LoadSkiaWeb } from '@shopify/react-native-skia/src/web'
+
+// Skia's web target renders through CanvasKit, a WASM build of Skia fetched at runtime — nothing
+// using @shopify/react-native-skia's React components can draw a single frame until this resolves.
+// Kept as a thin wrapper (rather than importing LoadSkiaWeb directly at call sites) purely so this
+// file's `.ts` counterpart, loadSkiaWeb.ts, gives native an identically-shaped async no-op — Metro's
+// platform-extension resolution picks whichever one matches the bundle target, so canvaskit-wasm's
+// `require('fs')' never even gets resolved into a native/iOS/Android bundle.
+export function loadSkiaWeb(): Promise<void> {
+  return LoadSkiaWeb()
+}